File manager - Edit - /var/www/payraty/helpdesk/common/resources/client/background-selector/background-selector.tsx
Back
import clsx from 'clsx'; import {Trans} from '@common/i18n/trans'; import {ImageIcon} from '@common/icons/material/Image'; import {FormatColorFillIcon} from '@common/icons/material/FormatColorFill'; import {GradientIcon} from '@common/icons/material/Gradient'; import {ReactElement, ReactNode, useState} from 'react'; import {BgSelectorTabProps} from '@common/background-selector/bg-selector-tab-props'; import {ColorBackgroundTab} from '@common/background-selector/color-background-tab'; import {GradientBackgroundTab} from '@common/background-selector/gradient-background-tab'; import {ImageBackgroundTab} from '@common/background-selector/image-background-tab/image-background-tab'; import {BackgroundSelectorConfig} from '@common/background-selector/background-selector-config'; const TabMap: Record< 'color' | 'gradient' | 'image', (value: BgSelectorTabProps<any>) => ReactElement > = { color: ColorBackgroundTab, gradient: GradientBackgroundTab, image: ImageBackgroundTab, }; type TabName = keyof typeof TabMap; interface BackgroundSelectorProps { className?: string; value: BackgroundSelectorConfig | undefined; onChange: (newValue: BackgroundSelectorConfig) => void; tabColWidth?: string; isInsideDialog?: boolean; positionSelector?: 'simple' | 'advanced'; diskPrefix?: string; } export function BackgroundSelector({ className, value, onChange, tabColWidth, isInsideDialog, positionSelector = 'simple', diskPrefix, }: BackgroundSelectorProps) { const [activeTab, setActiveTab] = useState<TabName>(() => { if (value?.type === 'image') return 'image'; if (value?.type === 'gradient') return 'gradient'; return 'color'; }); const Tab = TabMap[activeTab]; return ( <div className={className}> <TypeSelector activeTab={activeTab} onTabChange={setActiveTab} /> <Tab value={value} onChange={onChange} isInsideDialog={isInsideDialog} positionSelector={positionSelector} diskPrefix={diskPrefix} className={clsx( 'grid items-start gap-14', tabColWidth || 'grid-cols-[repeat(auto-fill,minmax(90px,1fr))]', )} /> </div> ); } interface TypeSelectorProps { activeTab: TabName; onTabChange: (tab: TabName) => void; } function TypeSelector({activeTab, onTabChange}: TypeSelectorProps) { return ( <div className="mb-20 flex items-center gap-20 border-b pb-20"> <TypeButton isActive={activeTab === 'color'} icon={<FormatColorFillIcon />} title={<Trans message="Flat color" />} onClick={() => onTabChange('color')} /> <TypeButton isActive={activeTab === 'gradient'} icon={<GradientIcon />} title={<Trans message="Gradient" />} onClick={() => onTabChange('gradient')} /> <TypeButton isActive={activeTab === 'image'} icon={<ImageIcon />} title={<Trans message="Image" />} onClick={() => onTabChange('image')} /> </div> ); } interface TypeButtonProps { isActive: boolean; icon: ReactNode; title: ReactNode; onClick?: () => void; } function TypeButton({isActive, icon, title, onClick}: TypeButtonProps) { return ( <div role="button" className="block" onClick={onClick}> <div className={clsx( 'mx-auto mb-8 flex h-50 w-50 items-center justify-center rounded-panel border text-muted', isActive && 'border-primary ring', )} > {icon} </div> <div className="text-center text-sm text-primary">{title}</div> </div> ); }
| ver. 1.4 |
Github
|
.
| PHP 8.3.30 | Generation time: 1.02 |
proxy
|
phpinfo
|
Settings