@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
85 lines (82 loc) • 2.78 kB
JavaScript
'use client';
import Icon_default from "../Icon/Icon.mjs";
import Hotkey_default from "../Hotkey/Hotkey.mjs";
import Input_default from "../Input/Input.mjs";
import Spotlight_default from "../awesome/Spotlight/Spotlight.mjs";
import { styles } from "./style.mjs";
import { memo, useMemo, useRef, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { cx } from "antd-style";
import useMergeState from "use-merge-value";
import { LucideLoader2, Search } from "lucide-react";
import { useHotkeys } from "react-hotkeys-hook";
//#region src/SearchBar/SearchBar.tsx
const SearchBar = memo(({ defaultValue = "", spotlight, className, value, onInputChange, placeholder, enableShortKey, shortKey = "mod+k", onSearch, loading, style, onChange, onBlur, onPressEnter, onFocus, styles: { input: inputStyle, shortKey: shortKeyStyle } = {}, classNames: { input: inputClassName, shortKey: shortKeyClassName } = {}, ...rest }) => {
const [inputValue, setInputValue] = useMergeState(defaultValue, {
defaultValue,
onChange: onInputChange,
value
});
const [showTag, setShowTag] = useState(true);
const inputReference = useRef(null);
const hotkey = useMemo(() => shortKey.includes("+") ? shortKey : `mod+${shortKey}`, [shortKey]);
useHotkeys(hotkey, () => {
if (!enableShortKey) return;
inputReference.current?.focus();
}, {
enableOnFormTags: true,
enabled: !!enableShortKey && !!shortKey,
preventDefault: true
});
return /* @__PURE__ */ jsxs("div", {
className: cx(styles.search, className),
style,
children: [
spotlight && /* @__PURE__ */ jsx(Spotlight_default, {}),
/* @__PURE__ */ jsx(Input_default, {
allowClear: true,
className: inputClassName,
onBlur: (e) => {
onBlur?.(e);
setInputValue(e.target.value);
setShowTag(true);
},
onChange: (e) => {
setInputValue(e.target.value);
onChange?.(e);
},
onFocus: (e) => {
onFocus?.(e);
setShowTag(false);
},
onPressEnter: (e) => {
onPressEnter?.(e);
onSearch?.(inputValue);
},
placeholder: placeholder ?? "Type keywords...",
prefix: /* @__PURE__ */ jsx(Icon_default, {
className: styles.icon,
icon: loading ? LucideLoader2 : Search,
size: "small",
spin: loading,
style: { marginRight: 4 }
}),
ref: inputReference,
style: inputStyle,
value: inputValue,
...rest
}),
enableShortKey && showTag && !inputValue && /* @__PURE__ */ jsx(Hotkey_default, {
className: cx(styles.tag, shortKeyClassName),
compact: true,
keys: hotkey,
style: shortKeyStyle
})
]
});
});
SearchBar.displayName = "SearchBar";
var SearchBar_default = SearchBar;
//#endregion
export { SearchBar_default as default };
//# sourceMappingURL=SearchBar.mjs.map