import { useState , useEffect , memo } from 'react' ; import classnames from 'classnames' ; import Icon from '../../BasicShop/BasicComponents/Icon' ; import styles from './index.less' ; import React from 'react' ; import { IconTypes } from '@/components/BasicShop/BasicComponents/Icon/schema' ; import { ICardPickerConfigType } from '../FormEditor/types' ; interface CardPickerType extends Omit < ICardPickerConfigType < IconTypes > , 'type' | 'key' | 'name' > { onChange ? : ( v : string ) => void ; type : IconTypes ; } export default memo ( ( props ) => { const { type , icons , onChange } = props ; const [ selected , setSelected ] = useState < IconTypes > ( type ) ; const handlePicker = ( v ) => { if ( onChange ) { onChange ( v ) ; return ; } setSelected ( v ) ; } ; useEffect ( ( ) => { setSelected ( type ) ; } , [ type ] ) ; return ( < div className = { styles . pickerWrap } > { icons . map ( ( item , i ) => { return ( < span className = { classnames ( styles . picker , selected === item ? styles . selected : '' ) } onClick = { ( ) => handlePicker ( item ) } key = { i } > < Icon type = { item } size = { 20 } color = { '#4091f7' } spin = { false } / > < /span>); } ) } < /div>); } ) ;