@lobehub/ui/es/ImageSelect/ImageSelect.mjs.map

Lobe UI is an open-source UI component library for building AIGC web apps

{"version":3,"file":"ImageSelect.mjs","names":["useControlledState","Flexbox","Img","Icon"],"sources":["../../src/ImageSelect/ImageSelect.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport Img from '@/Img';\n\nimport { styles } from './styles';\nimport type { ImageSelectProps } from './type';\n\nconst ImageSelect = memo<ImageSelectProps>(\n  ({\n    ref,\n    className,\n    style,\n    value,\n    defaultValue,\n    onChange,\n    options,\n    width = 144,\n    height = 86,\n    styles: customStyles,\n    classNames,\n    unoptimized,\n    ...rest\n  }) => {\n    const [currentValue, setCurrentValue] = useControlledState<string>(defaultValue, {\n      defaultValue,\n      onChange,\n      value,\n    });\n\n    return (\n      <Flexbox className={className} gap={16} horizontal ref={ref} style={style} {...rest}>\n        {options?.map((item) => {\n          const isActive = item.value === currentValue;\n          return (\n            <Flexbox\n              align={'center'}\n              className={cx(styles.container, isActive && styles.active)}\n              gap={4}\n              key={item.value}\n              onClick={() => setCurrentValue(item.value)}\n            >\n              <Img\n                alt={item.alt || item.value}\n                className={cx(styles.img, isActive && styles.imgActive, classNames?.img)}\n                height={height}\n                src={item.img}\n                style={{\n                  ...customStyles?.img,\n                  height,\n                  width,\n                }}\n                unoptimized={unoptimized}\n                width={width}\n              />\n\n              <Flexbox align={'center'} gap={4} horizontal>\n                {item.icon && <Icon icon={item.icon} />}\n                {item.label}\n              </Flexbox>\n            </Flexbox>\n          );\n        })}\n      </Flexbox>\n    );\n  },\n);\n\nImageSelect.displayName = 'ImageSelect';\n\nexport default ImageSelect;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAM,cAAc,MACjB,EACC,KACA,WACA,OACA,OACA,cACA,UACA,SACA,QAAQ,KACR,SAAS,IACT,QAAQ,cACR,YACA,aACA,GAAG,WACC;CACJ,MAAM,CAAC,cAAc,mBAAmBA,cAA2B,cAAc;EAC/E;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAACC;EAAmB;EAAW,KAAK;EAAI;EAAgB;EAAY;EAAO,GAAI;YAC5E,SAAS,KAAK,SAAS;GACtB,MAAM,WAAW,KAAK,UAAU;AAChC,UACE,qBAACA;IACC,OAAO;IACP,WAAW,GAAG,OAAO,WAAW,YAAY,OAAO,OAAO;IAC1D,KAAK;IAEL,eAAe,gBAAgB,KAAK,MAAM;eAE1C,oBAACC;KACC,KAAK,KAAK,OAAO,KAAK;KACtB,WAAW,GAAG,OAAO,KAAK,YAAY,OAAO,WAAW,YAAY,IAAI;KAChE;KACR,KAAK,KAAK;KACV,OAAO;MACL,GAAG,cAAc;MACjB;MACA;MACD;KACY;KACN;MACP,EAEF,qBAACD;KAAQ,OAAO;KAAU,KAAK;KAAG;gBAC/B,KAAK,QAAQ,oBAACE,gBAAK,MAAM,KAAK,OAAQ,EACtC,KAAK;MACE;MApBL,KAAK,MAqBF;IAEZ;GACM;EAGf;AAED,YAAY,cAAc;AAE1B,0BAAe"}