roamjs-components 0.77.20 → 0.77.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -9,6 +9,7 @@ export declare type AutocompleteInputProps = {
|
|
|
9
9
|
placeholder?: string;
|
|
10
10
|
autoFocus?: boolean;
|
|
11
11
|
multiline?: boolean;
|
|
12
|
+
id?: string;
|
|
12
13
|
};
|
|
13
|
-
declare const AutocompleteInput: ({ value, setValue, onBlur, onConfirm, showButton, options, placeholder, autoFocus, multiline, }: AutocompleteInputProps) => React.ReactElement;
|
|
14
|
+
declare const AutocompleteInput: ({ value, setValue, onBlur, onConfirm, showButton, options, placeholder, autoFocus, multiline, id, }: AutocompleteInputProps) => React.ReactElement;
|
|
14
15
|
export default AutocompleteInput;
|
|
@@ -5,7 +5,7 @@ const core_1 = require("@blueprintjs/core");
|
|
|
5
5
|
const react_1 = tslib_1.__importStar(require("react"));
|
|
6
6
|
const useArrowKeyDown_1 = tslib_1.__importDefault(require("../hooks/useArrowKeyDown"));
|
|
7
7
|
const fuzzy_1 = tslib_1.__importDefault(require("fuzzy"));
|
|
8
|
-
const AutocompleteInput = ({ value, setValue, onBlur, onConfirm, showButton, options = [], placeholder = "Enter value", autoFocus, multiline, }) => {
|
|
8
|
+
const AutocompleteInput = ({ value, setValue, onBlur, onConfirm, showButton, options = [], placeholder = "Enter value", autoFocus, multiline, id, }) => {
|
|
9
9
|
const [isOpen, setIsOpen] = (0, react_1.useState)(false);
|
|
10
10
|
const open = (0, react_1.useCallback)(() => setIsOpen(true), [setIsOpen]);
|
|
11
11
|
const close = (0, react_1.useCallback)(() => setIsOpen(false), [setIsOpen]);
|
|
@@ -61,7 +61,7 @@ const AutocompleteInput = ({ value, setValue, onBlur, onConfirm, showButton, opt
|
|
|
61
61
|
else {
|
|
62
62
|
onKeyDown(e);
|
|
63
63
|
}
|
|
64
|
-
}, onClick: () => setIsTyping(true), onBlur: (e) => {
|
|
64
|
+
}, id: id, onClick: () => setIsTyping(true), onBlur: (e) => {
|
|
65
65
|
var _a, _b;
|
|
66
66
|
if (e.relatedTarget === null ||
|
|
67
67
|
!((_b = (_a = e.relatedTarget).closest) === null || _b === void 0 ? void 0 : _b.call(_a, ".roamjs-autocomplete-input"))) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AutocompleteInput.js","sourceRoot":"","sources":["../../src/components/AutocompleteInput.tsx"],"names":[],"mappings":";;;AAAA,4CAQ2B;AAC3B,uDAMe;AACf,uFAAuD;AACvD,0DAA0B;
|
|
1
|
+
{"version":3,"file":"AutocompleteInput.js","sourceRoot":"","sources":["../../src/components/AutocompleteInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n InputGroup,\n Menu,\n MenuItem,\n PopoverPosition,\n Popover,\n Button,\n TextArea,\n} from \"@blueprintjs/core\";\nimport React, {\n useState,\n useCallback,\n useMemo,\n useRef,\n useEffect,\n} from \"react\";\nimport useArrowKeyDown from \"../hooks/useArrowKeyDown\";\nimport fuzzy from \"fuzzy\";\n\nexport type AutocompleteInputProps = {\n value: string;\n setValue: (q: string) => void;\n showButton?: boolean;\n onBlur?: (v: string) => void;\n onConfirm?: () => void;\n options?: string[];\n placeholder?: string;\n autoFocus?: boolean;\n multiline?: boolean;\n id?: string;\n};\n\nconst AutocompleteInput = ({\n value,\n setValue,\n onBlur,\n onConfirm,\n showButton,\n options = [],\n placeholder = \"Enter value\",\n autoFocus,\n multiline,\n id,\n}: AutocompleteInputProps): React.ReactElement => {\n const [isOpen, setIsOpen] = useState(false);\n const open = useCallback(() => setIsOpen(true), [setIsOpen]);\n const close = useCallback(() => setIsOpen(false), [setIsOpen]);\n const [isTyping, setIsTyping] = useState(false);\n const items = useMemo(\n () =>\n value\n ? fuzzy\n .filter(value, options)\n .slice(0, 9)\n .map((e) => e.string)\n : options.slice(0, 9),\n [value, options]\n );\n const menuRef = useRef<HTMLUListElement>(null);\n const inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n const onEnter = useCallback(\n (value) => {\n if (isOpen) {\n setValue(value);\n setIsTyping(false);\n } else if (onConfirm) {\n onConfirm();\n } else {\n setIsOpen(true);\n }\n },\n [setValue, close, onConfirm, isOpen]\n );\n const { activeIndex, onKeyDown } = useArrowKeyDown({\n onEnter,\n results: items,\n menuRef,\n });\n useEffect(() => {\n if (!items.length || !isTyping) close();\n else open();\n }, [items, close, open, isTyping]);\n const Input = useMemo(() => (multiline ? TextArea : InputGroup), [multiline]);\n return (\n <Popover\n portalClassName={\"roamjs-autocomplete-input\"}\n targetClassName={\"roamjs-autocomplete-input-target\"}\n captureDismiss={true}\n isOpen={isOpen}\n onOpened={open}\n minimal\n autoFocus={false}\n enforceFocus={false}\n position={PopoverPosition.BOTTOM_LEFT}\n modifiers={{\n flip: { enabled: false },\n preventOverflow: { enabled: false },\n }}\n content={\n <Menu className={\"max-h-64 overflow-auto max-w-md\"} ulRef={menuRef}>\n {items.map((t, i) => (\n <MenuItem\n text={t}\n active={activeIndex === i}\n key={i}\n multiline\n onClick={() => {\n setIsTyping(false);\n setValue(t);\n inputRef.current?.focus();\n }}\n />\n ))}\n </Menu>\n }\n target={\n <Input\n value={value || \"\"}\n onChange={(e) => {\n setIsTyping(true);\n setValue(e.target.value);\n }}\n autoFocus={autoFocus}\n placeholder={placeholder}\n onKeyDown={(e) => {\n if (e.key === \"Escape\") {\n e.stopPropagation();\n close();\n } else {\n onKeyDown(e);\n }\n }}\n id={id}\n onClick={() => setIsTyping(true)}\n onBlur={(e) => {\n if (\n e.relatedTarget === null ||\n !(e.relatedTarget as HTMLElement).closest?.(\n \".roamjs-autocomplete-input\"\n )\n ) {\n setIsTyping(false);\n }\n if (onBlur) {\n onBlur(e.target.value);\n }\n }}\n inputRef={inputRef}\n {...(showButton\n ? {\n rightElement: <Button icon={\"add\"} minimal onClick={onEnter} />,\n }\n : {})}\n />\n }\n />\n );\n};\n\nexport default AutocompleteInput;\n"]}
|
package/package.json
CHANGED