@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
1 lines • 4.53 kB
Source Map (JSON)
{"version":3,"file":"SearchBar.mjs","names":["useControlledState","inputReference: any","Spotlight","Input","Icon","Hotkey"],"sources":["../../src/SearchBar/SearchBar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { LucideLoader2, Search } from 'lucide-react';\nimport { memo, useMemo, useRef, useState } from 'react';\nimport { useHotkeys } from 'react-hotkeys-hook';\nimport useControlledState from 'use-merge-value';\n\nimport Hotkey from '@/Hotkey';\nimport Icon from '@/Icon';\nimport Input from '@/Input';\nimport Spotlight from '@/awesome/Spotlight';\n\nimport { styles } from './style';\nimport type { SearchBarProps } from './type';\n\nconst SearchBar = memo<SearchBarProps>(\n ({\n defaultValue = '',\n spotlight,\n className,\n value,\n onInputChange,\n placeholder,\n enableShortKey,\n shortKey = 'mod+k',\n onSearch,\n loading,\n style,\n onChange,\n onBlur,\n onPressEnter,\n onFocus,\n styles: { input: inputStyle, shortKey: shortKeyStyle } = {},\n classNames: { input: inputClassName, shortKey: shortKeyClassName } = {},\n ...rest\n }) => {\n const [inputValue, setInputValue] = useControlledState(defaultValue, {\n defaultValue,\n onChange: onInputChange,\n value,\n });\n\n const [showTag, setShowTag] = useState<boolean>(true);\n const inputReference: any = useRef<HTMLInputElement>(null);\n const hotkey = useMemo(\n () => (shortKey.includes('+') ? shortKey : `mod+${shortKey}`),\n [shortKey],\n );\n\n useHotkeys(\n hotkey,\n () => {\n if (!enableShortKey) return;\n inputReference.current?.focus();\n },\n {\n enableOnFormTags: true,\n enabled: !!enableShortKey && !!shortKey,\n preventDefault: true,\n },\n );\n\n return (\n <div className={cx(styles.search, className)} style={style}>\n {spotlight && <Spotlight />}\n <Input\n allowClear\n className={inputClassName}\n onBlur={(e) => {\n onBlur?.(e);\n setInputValue(e.target.value);\n setShowTag(true);\n }}\n onChange={(e) => {\n setInputValue(e.target.value);\n onChange?.(e);\n }}\n onFocus={(e) => {\n onFocus?.(e);\n setShowTag(false);\n }}\n onPressEnter={(e) => {\n onPressEnter?.(e);\n onSearch?.(inputValue);\n }}\n placeholder={placeholder ?? 'Type keywords...'}\n prefix={\n <Icon\n className={styles.icon}\n icon={loading ? LucideLoader2 : Search}\n size=\"small\"\n spin={loading}\n style={{ marginRight: 4 }}\n />\n }\n ref={inputReference}\n style={inputStyle}\n value={inputValue}\n {...rest}\n />\n {enableShortKey && showTag && !inputValue && (\n <Hotkey\n className={cx(styles.tag, shortKeyClassName)}\n compact\n keys={hotkey}\n style={shortKeyStyle}\n />\n )}\n </div>\n );\n },\n);\n\nSearchBar.displayName = 'SearchBar';\n\nexport default SearchBar;\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAM,YAAY,MACf,EACC,eAAe,IACf,WACA,WACA,OACA,eACA,aACA,gBACA,WAAW,SACX,UACA,SACA,OACA,UACA,QACA,cACA,SACA,QAAQ,EAAE,OAAO,YAAY,UAAU,kBAAkB,EAAE,EAC3D,YAAY,EAAE,OAAO,gBAAgB,UAAU,sBAAsB,EAAE,EACvE,GAAG,WACC;CACJ,MAAM,CAAC,YAAY,iBAAiBA,cAAmB,cAAc;EACnE;EACA,UAAU;EACV;EACD,CAAC;CAEF,MAAM,CAAC,SAAS,cAAc,SAAkB,KAAK;CACrD,MAAMC,iBAAsB,OAAyB,KAAK;CAC1D,MAAM,SAAS,cACN,SAAS,SAAS,IAAI,GAAG,WAAW,OAAO,YAClD,CAAC,SAAS,CACX;AAED,YACE,cACM;AACJ,MAAI,CAAC,eAAgB;AACrB,iBAAe,SAAS,OAAO;IAEjC;EACE,kBAAkB;EAClB,SAAS,CAAC,CAAC,kBAAkB,CAAC,CAAC;EAC/B,gBAAgB;EACjB,CACF;AAED,QACE,qBAAC;EAAI,WAAW,GAAG,OAAO,QAAQ,UAAU;EAAS;;GAClD,aAAa,oBAACC,sBAAY;GAC3B,oBAACC;IACC;IACA,WAAW;IACX,SAAS,MAAM;AACb,cAAS,EAAE;AACX,mBAAc,EAAE,OAAO,MAAM;AAC7B,gBAAW,KAAK;;IAElB,WAAW,MAAM;AACf,mBAAc,EAAE,OAAO,MAAM;AAC7B,gBAAW,EAAE;;IAEf,UAAU,MAAM;AACd,eAAU,EAAE;AACZ,gBAAW,MAAM;;IAEnB,eAAe,MAAM;AACnB,oBAAe,EAAE;AACjB,gBAAW,WAAW;;IAExB,aAAa,eAAe;IAC5B,QACE,oBAACC;KACC,WAAW,OAAO;KAClB,MAAM,UAAU,gBAAgB;KAChC,MAAK;KACL,MAAM;KACN,OAAO,EAAE,aAAa,GAAG;MACzB;IAEJ,KAAK;IACL,OAAO;IACP,OAAO;IACP,GAAI;KACJ;GACD,kBAAkB,WAAW,CAAC,cAC7B,oBAACC;IACC,WAAW,GAAG,OAAO,KAAK,kBAAkB;IAC5C;IACA,MAAM;IACN,OAAO;KACP;;GAEA;EAGX;AAED,UAAU,cAAc;AAExB,wBAAe"}