@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
1 lines • 4.04 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 Icon from '@/Icon';\nimport { styles as menuStyles } from '@/Menu/sharedStyle';\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;AAEJ,QACE,qBAACA,OAAW,MAAZ;EACE,UAAU,OAAO;EAEjB,OAAO,oBAAoB,OAAO;EAClC,QAAQ,UAAU,oBAAoB,KAAA;EACtC,OAAO,OAAO;EACd,WAAW,GACTC,OAAW,MACXC,SAAO,MACP,mBAAmBA,SAAO,kBAC1B,YAAY,MACZ,YAAY,QACZ,OAAO,UACR;EACD,OAAO;GACL,WAAW;GACX,GAAG,OAAO;GACX;YAjBH,CAmBE,oBAACF,OAAW,UAAZ;GAAqB,WAAW;aAC7B,eAAe,aAAa,QAAQ,EAAE,OAAO,CAAC,GAAG,OAAO;GACrC,CAAA,EACrB,CAAC,mBACA,oBAACA,OAAW,eAAZ;GAA0B,WAAW,GAAGE,SAAO,eAAe,YAAY,cAAc;aACtF,oBAAC,MAAD;IAAM,MAAM;IAAO,MAAM;IAAW,CAAA;GACX,CAAA,CAEb;IAzBX,GAAG,OAAO,OAAO,MAAM,CAAC,GAAG,QAyBhB;;AAItB,SAAgB,cAAc,QAA6B;CACzD,MAAM,EAAE,YAAY,UAAU;CAC9B,IAAI,cAAc;AAElB,QAAO,MAAM,KAAK,MAAM,UAAU;AAChC,MAAI,cAAc,KAAK,CACrB,QACE,qBAACF,OAAW,OAAZ;GAAkB,WAAW,GAAGE,SAAO,OAAO,YAAY,MAAM;aAAhE,CACE,oBAACF,OAAW,YAAZ;IACE,WAAW,GAAGC,OAAW,YAAYC,SAAO,YAAY,YAAY,WAAW;cAE9E,KAAK;IACgB,CAAA,EACvB,KAAK,QAAQ,KAAK,WAAW,WAAW,QAAQ,eAAe,OAAO,CAAC,CACvD;KAPoD,SAAS,QAO7D;AAIvB,SAAO,WAAW,MAAM,eAAe,OAAO;GAC9C"}