UNPKG

@lobehub/ui

Version:

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

1 lines 5.16 kB
{"version":3,"file":"AutoComplete.mjs","names":["inputVariants","inputStyles","styles"],"sources":["../../../src/base-ui/AutoComplete/AutoComplete.tsx"],"sourcesContent":["'use client';\n\nimport { Autocomplete } from '@base-ui/react/autocomplete';\nimport { cx, useThemeMode } from 'antd-style';\nimport { XIcon } from 'lucide-react';\nimport { memo, useMemo, useRef } from 'react';\n\nimport { inputStyles, inputVariants } from '@/base-ui/Input';\nimport Icon from '@/Icon';\nimport { useAppElement } from '@/ThemeProvider';\n\nimport { styles } from './style';\nimport type { AutoCompleteOption, AutoCompleteProps } from './type';\n\nconst AutoComplete = memo<AutoCompleteProps>(\n ({\n className,\n classNames,\n styles: customStyles,\n style,\n variant,\n shadow,\n size = 'middle',\n options = [],\n onChange,\n onSearch,\n allowClear,\n disabled,\n placeholder,\n prefix,\n suffix,\n emptyText,\n ...rest\n }) => {\n const { isDarkMode } = useThemeMode();\n const appElement = useAppElement();\n const anchorRef = useRef<HTMLDivElement>(null);\n const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\n\n const items = useMemo<AutoCompleteOption[]>(\n () => options.map((option) => (typeof option === 'string' ? { value: option } : option)),\n [options],\n );\n\n return (\n <Autocomplete.Root\n openOnInputClick\n disabled={disabled}\n itemToStringValue={(item) => (item as AutoCompleteOption).value}\n items={items}\n onValueChange={(value) => {\n onChange?.(value);\n onSearch?.(value);\n }}\n {...rest}\n >\n <div\n className={cx(inputVariants({ shadow, size, variant: mergedVariant }), className)}\n data-disabled={disabled ? '' : undefined}\n ref={anchorRef}\n style={style}\n >\n {prefix && <span className={inputStyles.slot}>{prefix}</span>}\n <Autocomplete.Input\n className={cx(inputStyles.input, classNames?.input)}\n placeholder={placeholder}\n style={customStyles?.input}\n />\n {allowClear && (\n <Autocomplete.Clear aria-label={'Clear'} className={styles.clear}>\n <Icon icon={XIcon} size={14} />\n </Autocomplete.Clear>\n )}\n {suffix && <span className={inputStyles.slot}>{suffix}</span>}\n </div>\n <Autocomplete.Portal container={appElement ?? undefined}>\n <Autocomplete.Positioner anchor={anchorRef} className={styles.positioner} sideOffset={4}>\n <Autocomplete.Popup\n className={cx(styles.popup, classNames?.popup)}\n style={customStyles?.popup}\n >\n {emptyText && (\n <Autocomplete.Empty className={styles.empty}>{emptyText}</Autocomplete.Empty>\n )}\n <Autocomplete.List className={styles.list}>\n {(item: AutoCompleteOption) => (\n <Autocomplete.Item\n className={cx(styles.item, classNames?.item)}\n disabled={item.disabled}\n key={item.value}\n style={customStyles?.item}\n value={item}\n >\n {item.label ?? item.value}\n </Autocomplete.Item>\n )}\n </Autocomplete.List>\n </Autocomplete.Popup>\n </Autocomplete.Positioner>\n </Autocomplete.Portal>\n </Autocomplete.Root>\n );\n },\n);\n\nAutoComplete.displayName = 'AutoComplete';\n\nexport default AutoComplete;\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,eAAe,MAClB,EACC,WACA,YACA,QAAQ,cACR,OACA,SACA,QACA,OAAO,UACP,UAAU,CAAC,GACX,UACA,UACA,YACA,UACA,aACA,QACA,QACA,WACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,aAAa,cAAc;CACjC,MAAM,YAAY,OAAuB,IAAI;CAC7C,MAAM,gBAAgB,YAAY,aAAa,WAAW;CAE1D,MAAM,QAAQ,cACN,QAAQ,KAAK,WAAY,OAAO,WAAW,WAAW,EAAE,OAAO,OAAO,IAAI,MAAO,GACvF,CAAC,OAAO,CACV;CAEA,OACE,qBAAC,aAAa,MAAd;EACE,kBAAA;EACU;EACV,oBAAoB,SAAU,KAA4B;EACnD;EACP,gBAAgB,UAAU;GACxB,WAAW,KAAK;GAChB,WAAW,KAAK;EAClB;EACA,GAAI;YATN,CAWE,qBAAC,OAAD;GACE,WAAW,GAAGA,aAAc;IAAE;IAAQ;IAAM,SAAS;GAAc,CAAC,GAAG,SAAS;GAChF,iBAAe,WAAW,KAAK,KAAA;GAC/B,KAAK;GACE;aAJT;IAMG,UAAU,oBAAC,QAAD;KAAM,WAAWC,OAAY;eAAO;IAAa,CAAA;IAC5D,oBAAC,aAAa,OAAd;KACE,WAAW,GAAGA,OAAY,OAAO,YAAY,KAAK;KACrC;KACb,OAAO,cAAc;IACtB,CAAA;IACA,cACC,oBAAC,aAAa,OAAd;KAAoB,cAAY;KAAS,WAAWC,SAAO;eACzD,oBAAC,MAAD;MAAM,MAAM;MAAO,MAAM;KAAK,CAAA;IACZ,CAAA;IAErB,UAAU,oBAAC,QAAD;KAAM,WAAWD,OAAY;eAAO;IAAa,CAAA;GACzD;MACL,oBAAC,aAAa,QAAd;GAAqB,WAAW,cAAc,KAAA;aAC5C,oBAAC,aAAa,YAAd;IAAyB,QAAQ;IAAW,WAAWC,SAAO;IAAY,YAAY;cACpF,qBAAC,aAAa,OAAd;KACE,WAAW,GAAGA,SAAO,OAAO,YAAY,KAAK;KAC7C,OAAO,cAAc;eAFvB,CAIG,aACC,oBAAC,aAAa,OAAd;MAAoB,WAAWA,SAAO;gBAAQ;KAA8B,CAAA,GAE9E,oBAAC,aAAa,MAAd;MAAmB,WAAWA,SAAO;iBACjC,SACA,oBAAC,aAAa,MAAd;OACE,WAAW,GAAGA,SAAO,MAAM,YAAY,IAAI;OAC3C,UAAU,KAAK;OAEf,OAAO,cAAc;OACrB,OAAO;iBAEN,KAAK,SAAS,KAAK;MACH,GALZ,KAAK,KAKO;KAEJ,CAAA,CACD;;GACG,CAAA;EACN,CAAA,CACJ;;AAEvB,CACF;AAEA,aAAa,cAAc"}