@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
1 lines • 4.07 kB
Source Map (JSON)
{"version":3,"file":"renderOptions.mjs","names":["BaseSelect","menuStyles","styles"],"sources":["../../../src/base-ui/Select/renderOptions.tsx"],"sourcesContent":["'use client';\n\nimport { Select as BaseSelect } from '@base-ui/react/select';\nimport { cx } from 'antd-style';\nimport { Check } from 'lucide-react';\nimport { type ComponentProps } from 'react';\n\nimport { styles as menuStyles } from '@/base-ui/DropdownMenu/sharedStyle';\nimport Icon from '@/Icon';\n\nimport { getOptionSearchText, isGroupOption } from './helpers';\nimport { styles } from './style';\nimport {\n type SelectClassNames,\n type SelectOption,\n type SelectOptions,\n type SelectProps,\n} from './type';\n\ninterface RenderOptionsParams {\n classNames: SelectClassNames | undefined;\n isBoldIndicator: boolean;\n items: SelectOptions<any>;\n itemTextClassName: string;\n listItemHeight: number | undefined;\n optionRender: SelectProps['optionRender'];\n renderVirtualItem: NonNullable<ComponentProps<typeof BaseSelect.Item>['render']>;\n virtual: boolean | undefined;\n}\n\nfunction renderItem(\n option: SelectOption<any>,\n index: number,\n params: Omit<RenderOptionsParams, 'items'>,\n) {\n const {\n classNames,\n isBoldIndicator,\n itemTextClassName,\n listItemHeight,\n optionRender,\n renderVirtualItem,\n virtual,\n } = params;\n\n return (\n <BaseSelect.Item\n disabled={option.disabled}\n key={`${String(option.value)}-${index}`}\n label={getOptionSearchText(option)}\n render={virtual ? renderVirtualItem : undefined}\n value={option.value}\n className={cx(\n menuStyles.item,\n styles.item,\n isBoldIndicator && styles.itemBoldSelected,\n classNames?.item,\n classNames?.option,\n option.className,\n )}\n style={{\n minHeight: listItemHeight,\n ...option.style,\n }}\n >\n <BaseSelect.ItemText className={itemTextClassName}>\n {optionRender ? optionRender(option, { index }) : option.label}\n </BaseSelect.ItemText>\n {!isBoldIndicator && (\n <BaseSelect.ItemIndicator className={cx(styles.itemIndicator, classNames?.itemIndicator)}>\n <Icon icon={Check} size={'small'} />\n </BaseSelect.ItemIndicator>\n )}\n </BaseSelect.Item>\n );\n}\n\nexport function renderOptions(params: RenderOptionsParams) {\n const { classNames, items } = params;\n let optionIndex = 0;\n\n return items.map((item, index) => {\n if (isGroupOption(item)) {\n return (\n <BaseSelect.Group className={cx(styles.group, classNames?.group)} key={`group-${index}`}>\n <BaseSelect.GroupLabel\n className={cx(menuStyles.groupLabel, styles.groupLabel, classNames?.groupLabel)}\n >\n {item.label}\n </BaseSelect.GroupLabel>\n {item.options.map((option) => renderItem(option, optionIndex++, params))}\n </BaseSelect.Group>\n );\n }\n\n return renderItem(item, optionIndex++, params);\n });\n}\n"],"mappings":";;;;;;;;;;AA8BA,SAAS,WACP,QACA,OACA,QACA;CACA,MAAM,EACJ,YACA,iBACA,mBACA,gBACA,cACA,mBACA,YACE;CAEJ,OACE,qBAACA,OAAW,MAAZ;EACE,UAAU,OAAO;EAEjB,OAAO,oBAAoB,MAAM;EACjC,QAAQ,UAAU,oBAAoB,KAAA;EACtC,OAAO,OAAO;EACd,WAAW,GACTC,OAAW,MACXC,SAAO,MACP,mBAAmBA,SAAO,kBAC1B,YAAY,MACZ,YAAY,QACZ,OAAO,SACT;EACA,OAAO;GACL,WAAW;GACX,GAAG,OAAO;EACZ;YAjBF,CAmBE,oBAACF,OAAW,UAAZ;GAAqB,WAAW;aAC7B,eAAe,aAAa,QAAQ,EAAE,MAAM,CAAC,IAAI,OAAO;EACtC,CAAA,GACpB,CAAC,mBACA,oBAACA,OAAW,eAAZ;GAA0B,WAAW,GAAGE,SAAO,eAAe,YAAY,aAAa;aACrF,oBAAC,MAAD;IAAM,MAAM;IAAO,MAAM;GAAU,CAAA;EACX,CAAA,CAEb;IAzBV,GAAG,OAAO,OAAO,KAAK,EAAE,GAAG,OAyBjB;AAErB;AAEA,SAAgB,cAAc,QAA6B;CACzD,MAAM,EAAE,YAAY,UAAU;CAC9B,IAAI,cAAc;CAElB,OAAO,MAAM,KAAK,MAAM,UAAU;EAChC,IAAI,cAAc,IAAI,GACpB,OACE,qBAACF,OAAW,OAAZ;GAAkB,WAAW,GAAGE,SAAO,OAAO,YAAY,KAAK;aAA/D,CACE,oBAACF,OAAW,YAAZ;IACE,WAAW,GAAGC,OAAW,YAAYC,SAAO,YAAY,YAAY,UAAU;cAE7E,KAAK;GACe,CAAA,GACtB,KAAK,QAAQ,KAAK,WAAW,WAAW,QAAQ,eAAe,MAAM,CAAC,CACvD;KAPqD,SAAS,OAO9D;EAItB,OAAO,WAAW,MAAM,eAAe,MAAM;CAC/C,CAAC;AACH"}