Файловый менеджер - Редактировать - /home/digitalm/tendepavia/wp-content/plugins/redux-framework/extendify-sdk/src/Onboarding/pages/Goals.js
Назад
import { useEffect, useRef } from '@wordpress/element' import { __ } from '@wordpress/i18n' import classNames from 'classnames' import { getGoals } from '@onboarding/api/DataApi' import { CheckboxInputCard } from '@onboarding/components/CheckboxInputCard' import { SquareNextButton } from '@onboarding/components/SquareNextButton' import { useFetch } from '@onboarding/hooks/useFetch' import { PageLayout } from '@onboarding/layouts/PageLayout' import { usePagesStore } from '@onboarding/state/Pages' import { useUserSelectionStore } from '@onboarding/state/UserSelections' import { pageState } from '@onboarding/state/factory' import { BarChart, Design, Donate, OpenEnvelope, Pencil, Planner, PriceTag, School, Shop, Speech, Ticket, } from '@onboarding/svg' export const fetcher = () => getGoals() export const fetchData = () => ({ key: 'goals' }) export const state = pageState('Goals', () => ({ title: __('Goals', 'extendify'), default: undefined, showInSidebar: true, ready: false, isDefault: () => { // If no goals are selected and no text is entered const { feedbackMissingGoal, goals } = useUserSelectionStore.getState() return !feedbackMissingGoal?.length && goals?.length === 0 }, })) export const Goals = () => { const { data: goals, loading } = useFetch(fetchData, fetcher) const { toggle, has } = useUserSelectionStore() const { feedbackMissingGoal: feedback, setFeedbackMissingGoal, goals: selectedGoals, } = useUserSelectionStore() const nextPage = usePagesStore((state) => state.nextPage) const initialFocus = useRef() const showMissingInput = () => window.extOnbData?.activeTests?.['remove-dont-see-inputs'] === 'A' const userSelectedGoals = selectedGoals.map((goal) => goal.slug) const iconComponents = { BarChart, Design, Donate, OpenEnvelope, Pencil, Planner, PriceTag, School, Shop, Speech, Ticket, } useEffect(() => { if (loading) return state.setState({ ready: true }) }, [loading]) useEffect(() => { if (!initialFocus.current) return const raf = requestAnimationFrame(() => initialFocus.current?.querySelector('input')?.focus(), ) return () => cancelAnimationFrame(raf) }, [initialFocus]) return ( <PageLayout> <div> <h1 className="text-3xl text-partner-primary-text mb-4 mt-0" data-test="goals-heading"> {__( 'What do you want to accomplish with this new site?', 'extendify', )} </h1> <p className="text-base opacity-70 mb-0"> {__('You can change these later.', 'extendify')} </p> </div> <div className="w-full"> <h2 className="text-lg m-0 mb-4 text-gray-900"> {__('Select the goals relevant to your site:', 'extendify')} </h2> {loading ? ( <p>{__('Loading...', 'extendify')}</p> ) : ( <form data-test="goals-form" onSubmit={(e) => { e.preventDefault() nextPage() }} className="w-full grid lg:grid-cols-2 gap-4 goal-select"> {/* Added so forms can be submitted by pressing Enter */} <input type="submit" className="hidden" /> {goals?.map((goal, index) => { const selected = userSelectedGoals.includes( goal.slug, ) const Icon = iconComponents[goal.icon] return ( <div key={goal.id} className={classNames( 'relative border rounded-lg', { 'border-gray-800': !selected, 'border-partner-primary-bg': selected, }, )} ref={index === 0 ? initialFocus : undefined} data-test="goal-item"> <div className={classNames( 'absolute inset-0 pointer-events-none', { 'bg-partner-primary-bg': selected, }, )} aria-hidden="true" style={{ opacity: '0.04' }} /> <div className="flex items-center gap-4 h-full"> <CheckboxInputCard label={goal.title} slug={`goal-${goal.slug}`} description={goal.description} checked={has('goals', goal)} onChange={() => { toggle('goals', goal) }} Icon={Icon} /> </div> </div> ) })} </form> )} {!loading && showMissingInput() && ( <div className="max-w-onboarding-sm"> <h2 className="text-lg mt-12 mb-4 text-gray-900"> {__( "Don't see what you're looking for?", 'extendify', )} </h2> <div className="search-panel flex items-center justify-center relative gap-4"> <input type="text" className="w-full bg-gray-100 h-14 pl-5 input-focus rounded-none ring-offset-0 focus:bg-white" value={feedback} onChange={(e) => setFeedbackMissingGoal(e.target.value) } placeholder={__( 'Add your goals...', 'extendify', )} /> <div className={classNames({ visible: feedback, invisible: !feedback, })}> <SquareNextButton /> </div> </div> </div> )} </div> </PageLayout> ) }
| ver. 1.4 |
Github
|
.
| PHP 8.3.23 | Генерация страницы: 0.05 |
proxy
|
phpinfo
|
Настройка