|
@ -1,23 +1,27 @@ |
|
|
import { Popover, PopoverProps } from 'antd' |
|
|
import { Popover, PopoverProps } from 'antd' |
|
|
import { FC, useEffect } from 'react' |
|
|
|
|
|
|
|
|
import { FC, memo, useEffect } from 'react' |
|
|
import Display from './Display.tsx' |
|
|
import Display from './Display.tsx' |
|
|
import PickerPanel from './PickerPanel' |
|
|
import PickerPanel from './PickerPanel' |
|
|
import { PickerContextProvider, usePickerContext } from './context.tsx' |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import { ICON_RESET, PickerContextProvider, usePickerContext } from './context.tsx' |
|
|
|
|
|
import { IconUnit } from '@/components/icon/types.ts' |
|
|
|
|
|
|
|
|
interface PickerProps extends Partial<PopoverProps> { |
|
|
interface PickerProps extends Partial<PopoverProps> { |
|
|
value?: string, |
|
|
value?: string, |
|
|
onChange?: (value: string) => void, |
|
|
onChange?: (value: string) => void, |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const IconPicker: FC = (props: PickerProps) => { |
|
|
|
|
|
|
|
|
const IconPicker: FC = memo((props: PickerProps) => { |
|
|
|
|
|
|
|
|
const { state, actions: { selectIcon, togglePanel } } = usePickerContext() |
|
|
const { state, actions: { selectIcon, togglePanel } } = usePickerContext() |
|
|
const { value, onChange } = props |
|
|
const { value, onChange } = props |
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
useEffect(() => { |
|
|
if (onChange) { |
|
|
|
|
|
onChange(state.icon ? `${state.icon.type}:${state.icon.componentName}` : '') |
|
|
|
|
|
|
|
|
if (onChange && state.icon) { |
|
|
|
|
|
if (state.icon === ICON_RESET) { |
|
|
|
|
|
return onChange('') |
|
|
|
|
|
} |
|
|
|
|
|
const icon = state.icon as IconUnit |
|
|
|
|
|
onChange(state.icon ? `${icon.type}:${icon.componentName}` : '') |
|
|
} |
|
|
} |
|
|
}, [ state.icon ]) |
|
|
}, [ state.icon ]) |
|
|
|
|
|
|
|
@ -26,7 +30,7 @@ const IconPicker: FC = (props: PickerProps) => { |
|
|
if (value) { |
|
|
if (value) { |
|
|
const [ type, componentName ] = value.split(':') |
|
|
const [ type, componentName ] = value.split(':') |
|
|
selectIcon({ type, componentName } as any) |
|
|
selectIcon({ type, componentName } as any) |
|
|
}else{ |
|
|
|
|
|
|
|
|
} else { |
|
|
selectIcon(null as any) |
|
|
selectIcon(null as any) |
|
|
} |
|
|
} |
|
|
}, [ value ]) |
|
|
}, [ value ]) |
|
@ -47,10 +51,10 @@ const IconPicker: FC = (props: PickerProps) => { |
|
|
<Display/> |
|
|
<Display/> |
|
|
</Popover> |
|
|
</Popover> |
|
|
) |
|
|
) |
|
|
} |
|
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
export default (props: PickerProps) => { |
|
|
|
|
|
|
|
|
export default memo((props: PickerProps) => { |
|
|
return <PickerContextProvider value={{} as any}> |
|
|
return <PickerContextProvider value={{} as any}> |
|
|
<IconPicker {...props as any}/> |
|
|
<IconPicker {...props as any}/> |
|
|
</PickerContextProvider> |
|
|
</PickerContextProvider> |
|
|
} |
|
|
|
|
|
|
|
|
}) |