roamjs-components 0.78.8 → 0.78.10
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.
- package/components/AutocompleteInput.js +32 -8
- package/components/AutocompleteInput.js.map +1 -1
- package/components/FormDialog.d.ts +1 -0
- package/components/FormDialog.js +17 -9
- package/components/FormDialog.js.map +1 -1
- package/components.js +5 -0
- package/components.js.map +1 -1
- package/package.json +1 -1
- package/util/renderWithUnmount.js +4 -0
- package/util/renderWithUnmount.js.map +1 -1
|
@@ -33,7 +33,7 @@ const AutocompleteInput = ({ value, setValue, onBlur, onConfirm, showButton, opt
|
|
|
33
33
|
else {
|
|
34
34
|
setIsOpen(true);
|
|
35
35
|
}
|
|
36
|
-
}, [setValue,
|
|
36
|
+
}, [setValue, onConfirm, isOpen]);
|
|
37
37
|
const { activeIndex, onKeyDown } = (0, useArrowKeyDown_1.default)({
|
|
38
38
|
onEnter,
|
|
39
39
|
results: items,
|
|
@@ -49,19 +49,43 @@ const AutocompleteInput = ({ value, setValue, onBlur, onConfirm, showButton, opt
|
|
|
49
49
|
if (query)
|
|
50
50
|
setValue(items[activeIndex] || onNewItem(query));
|
|
51
51
|
}, [setValue, activeIndex, items, onNewItem, query]);
|
|
52
|
+
(0, react_1.useEffect)(() => {
|
|
53
|
+
if (inputRef.current &&
|
|
54
|
+
inputRef.current === document.activeElement &&
|
|
55
|
+
value) {
|
|
56
|
+
const index = itemToQuery(value).length;
|
|
57
|
+
inputRef.current.setSelectionRange(index, index);
|
|
58
|
+
}
|
|
59
|
+
const touchEndListener = (e) => {
|
|
60
|
+
if (!e.target ||
|
|
61
|
+
!(e.target instanceof HTMLElement) ||
|
|
62
|
+
!menuRef.current ||
|
|
63
|
+
menuRef.current.contains(e.target)) {
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
66
|
+
if (inputRef.current && inputRef.current.contains(e.target)) {
|
|
67
|
+
return;
|
|
68
|
+
}
|
|
69
|
+
close();
|
|
70
|
+
};
|
|
71
|
+
document.body.addEventListener("touchend", touchEndListener);
|
|
72
|
+
return () => document.body.removeEventListener("touchend", touchEndListener);
|
|
73
|
+
}, [inputRef, menuRef, close]);
|
|
52
74
|
const Input = (0, react_1.useMemo)(() => (multiline ? core_1.TextArea : core_1.InputGroup), [multiline]);
|
|
53
75
|
return (react_1.default.createElement(core_1.Popover, { portalClassName: "roamjs-autocomplete-input", targetClassName: "roamjs-autocomplete-input-target", captureDismiss: true, isOpen: isOpen, onOpened: open, minimal: true, autoFocus: false, enforceFocus: false, position: core_1.PopoverPosition.BOTTOM_LEFT, modifiers: {
|
|
54
76
|
flip: { enabled: false },
|
|
55
77
|
preventOverflow: { enabled: false },
|
|
56
78
|
}, content: react_1.default.createElement(core_1.Menu, { className: "max-h-64 overflow-auto max-w-md", ulRef: menuRef }, items.map((t, i) => {
|
|
79
|
+
const onClick = () => {
|
|
80
|
+
var _a;
|
|
81
|
+
setIsTyping(false);
|
|
82
|
+
setValue(t);
|
|
83
|
+
setQuery(itemToQuery(t));
|
|
84
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
85
|
+
};
|
|
57
86
|
const sharedProps = {
|
|
58
|
-
onClick
|
|
59
|
-
|
|
60
|
-
setIsTyping(false);
|
|
61
|
-
setValue(t);
|
|
62
|
-
setQuery(itemToQuery(t));
|
|
63
|
-
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
64
|
-
},
|
|
87
|
+
onClick,
|
|
88
|
+
onTouchEnd: onClick,
|
|
65
89
|
active: activeIndex === i,
|
|
66
90
|
};
|
|
67
91
|
return renderItem ? (react_1.default.createElement(react_1.default.Fragment, { key: i }, renderItem === null || renderItem === void 0 ? void 0 : renderItem(Object.assign({ item: t }, sharedProps)))) : (react_1.default.createElement(core_1.MenuItem, Object.assign({ text: itemToQuery(t), key: i, multiline: true }, sharedProps)));
|
|
@@ -1 +1 @@
|
|
|
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\ntype FilterOptions<T> = (options: T[], query: string) => T[];\ntype OnNewItem<T> = (s: string) => T;\ntype ItemToQuery<T> = (t?: T) => string;\n\nexport type AutocompleteInputProps<T = string> = {\n value?: T;\n setValue: (q: T) => void;\n showButton?: boolean;\n onBlur?: (v: string) => void;\n onConfirm?: () => void;\n options?: T[];\n placeholder?: string;\n autoFocus?: boolean;\n multiline?: boolean;\n id?: string;\n filterOptions?: FilterOptions<T>;\n itemToQuery?: ItemToQuery<T>;\n renderItem?: (props: {\n item: T;\n onClick: () => void;\n active: boolean;\n }) => React.ReactElement;\n onNewItem?: OnNewItem<T>;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\nconst AutocompleteInput = <T extends unknown = string>({\n value,\n setValue,\n onBlur,\n onConfirm,\n showButton,\n options = [],\n placeholder = \"Enter value\",\n autoFocus,\n multiline,\n id,\n filterOptions: _filterOptions,\n itemToQuery: _itemToQuery,\n renderItem,\n onNewItem: _onNewItem,\n}: AutocompleteInputProps<T>): React.ReactElement => {\n const [isOpen, setIsOpen] = useState(false);\n const itemToQuery = useMemo<ItemToQuery<T>>(\n () => _itemToQuery || ((s) => (s ? `${s}` : \"\")),\n [_onNewItem]\n );\n const [query, setQuery] = useState<string>(() => itemToQuery(value));\n const open = useCallback(() => setIsOpen(true), [setIsOpen]);\n const close = useCallback(() => setIsOpen(false), [setIsOpen]);\n const [isTyping, setIsTyping] = useState(false);\n const filterOptions = useMemo<FilterOptions<T>>(\n () =>\n _filterOptions ||\n ((o, q) =>\n typeof o[0] === \"string\"\n ? (fuzzy.filter(q, o).map((e) => e.string) as T[])\n : o),\n [_filterOptions]\n );\n const onNewItem = useMemo<OnNewItem<T>>(\n () => _onNewItem || ((s) => s as T),\n [_onNewItem]\n );\n\n const items = useMemo(\n () => (query ? filterOptions(options, query) : options),\n [query, options, filterOptions]\n );\n const menuRef = useRef<HTMLUListElement>(null);\n const inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n const onEnter = useCallback(\n (value?: T) => {\n if (isOpen && value) {\n setQuery(itemToQuery(value));\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 useEffect(() => {\n if (query) setValue(items[activeIndex] || onNewItem(query));\n }, [setValue, activeIndex, items, onNewItem, query]);\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 const sharedProps = {\n onClick: () => {\n setIsTyping(false);\n setValue(t);\n setQuery(itemToQuery(t));\n inputRef.current?.focus();\n },\n active: activeIndex === i,\n };\n return renderItem ? (\n <React.Fragment key={i}>\n {renderItem?.({\n item: t,\n ...sharedProps,\n })}\n </React.Fragment>\n ) : (\n <MenuItem\n text={itemToQuery(t)}\n key={i}\n multiline\n {...sharedProps}\n />\n );\n })}\n </Menu>\n }\n target={\n <Input\n value={query}\n onChange={(e) => {\n setIsTyping(true);\n setQuery(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: (\n <Button icon={\"add\"} minimal onClick={() => onEnter()} />\n ),\n }\n : {})}\n />\n }\n />\n );\n};\n\nexport default AutocompleteInput;\n"]}
|
|
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\ntype FilterOptions<T> = (options: T[], query: string) => T[];\ntype OnNewItem<T> = (s: string) => T;\ntype ItemToQuery<T> = (t?: T) => string;\n\nexport type AutocompleteInputProps<T = string> = {\n value?: T;\n setValue: (q: T) => void;\n showButton?: boolean;\n onBlur?: (v: string) => void;\n onConfirm?: () => void;\n options?: T[];\n placeholder?: string;\n autoFocus?: boolean;\n multiline?: boolean;\n id?: string;\n filterOptions?: FilterOptions<T>;\n itemToQuery?: ItemToQuery<T>;\n renderItem?: (props: {\n item: T;\n onClick: () => void;\n active: boolean;\n }) => React.ReactElement;\n onNewItem?: OnNewItem<T>;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\nconst AutocompleteInput = <T extends unknown = string>({\n value,\n setValue,\n onBlur,\n onConfirm,\n showButton,\n options = [],\n placeholder = \"Enter value\",\n autoFocus,\n multiline,\n id,\n filterOptions: _filterOptions,\n itemToQuery: _itemToQuery,\n renderItem,\n onNewItem: _onNewItem,\n}: AutocompleteInputProps<T>): React.ReactElement => {\n const [isOpen, setIsOpen] = useState(false);\n const itemToQuery = useMemo<ItemToQuery<T>>(\n () => _itemToQuery || ((s) => (s ? `${s}` : \"\")),\n [_onNewItem]\n );\n const [query, setQuery] = useState<string>(() => itemToQuery(value));\n const open = useCallback(() => setIsOpen(true), [setIsOpen]);\n const close = useCallback(() => setIsOpen(false), [setIsOpen]);\n const [isTyping, setIsTyping] = useState(false);\n const filterOptions = useMemo<FilterOptions<T>>(\n () =>\n _filterOptions ||\n ((o, q) =>\n typeof o[0] === \"string\"\n ? (fuzzy.filter(q, o).map((e) => e.string) as T[])\n : o),\n [_filterOptions]\n );\n const onNewItem = useMemo<OnNewItem<T>>(\n () => _onNewItem || ((s) => s as T),\n [_onNewItem]\n );\n\n const items = useMemo(\n () => (query ? filterOptions(options, query) : options),\n [query, options, filterOptions]\n );\n const menuRef = useRef<HTMLUListElement>(null);\n const inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n const onEnter = useCallback(\n (value?: T) => {\n if (isOpen && value) {\n setQuery(itemToQuery(value));\n setValue(value);\n setIsTyping(false);\n } else if (onConfirm) {\n onConfirm();\n } else {\n setIsOpen(true);\n }\n },\n [setValue, 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 useEffect(() => {\n if (query) setValue(items[activeIndex] || onNewItem(query));\n }, [setValue, activeIndex, items, onNewItem, query]);\n useEffect(() => {\n if (\n inputRef.current &&\n inputRef.current === document.activeElement &&\n value\n ) {\n const index = itemToQuery(value).length;\n inputRef.current.setSelectionRange(index, index);\n }\n const touchEndListener = (e: TouchEvent) => {\n if (\n !e.target ||\n !(e.target instanceof HTMLElement) ||\n !menuRef.current ||\n menuRef.current.contains(e.target)\n ) {\n return;\n }\n if (inputRef.current && inputRef.current.contains(e.target)) {\n return;\n }\n close();\n };\n document.body.addEventListener(\"touchend\", touchEndListener);\n return () =>\n document.body.removeEventListener(\"touchend\", touchEndListener);\n }, [inputRef, menuRef, close]);\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 const onClick = () => {\n setIsTyping(false);\n setValue(t);\n setQuery(itemToQuery(t));\n inputRef.current?.focus();\n };\n const sharedProps = {\n onClick,\n onTouchEnd: onClick,\n active: activeIndex === i,\n };\n return renderItem ? (\n <React.Fragment key={i}>\n {renderItem?.({\n item: t,\n ...sharedProps,\n })}\n </React.Fragment>\n ) : (\n <MenuItem\n text={itemToQuery(t)}\n key={i}\n multiline\n {...sharedProps}\n />\n );\n })}\n </Menu>\n }\n target={\n <Input\n value={query}\n onChange={(e) => {\n setIsTyping(true);\n setQuery(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: (\n <Button icon={\"add\"} minimal onClick={() => onEnter()} />\n ),\n }\n : {})}\n />\n }\n />\n );\n};\n\nexport default AutocompleteInput;\n"]}
|
|
@@ -29,6 +29,7 @@ declare type Props<T> = {
|
|
|
29
29
|
type: "embed";
|
|
30
30
|
}) & {
|
|
31
31
|
label?: string;
|
|
32
|
+
conditional?: string;
|
|
32
33
|
}>;
|
|
33
34
|
};
|
|
34
35
|
declare const FormDialog: <T extends Record<string, unknown>>({ title, content, isOpen, onClose, onSubmit, fields, }: RoamOverlayProps<Props<T>>) => JSX.Element;
|
package/components/FormDialog.js
CHANGED
|
@@ -75,7 +75,12 @@ const FormDialog = ({ title, content, isOpen, onClose, onSubmit = () => Promise.
|
|
|
75
75
|
const [data, setData] = (0, react_1.useState)(() => Object.fromEntries(Object.entries(fields)
|
|
76
76
|
.filter(([, meta]) => typeof meta.defaultValue !== "undefined")
|
|
77
77
|
.map(([key, meta]) => [key, meta.defaultValue])));
|
|
78
|
-
const onClick = (0, react_1.useCallback)(() => Promise.resolve(onSubmit(Object.fromEntries(Object.entries(data)
|
|
78
|
+
const onClick = (0, react_1.useCallback)(() => Promise.resolve(onSubmit(Object.fromEntries(Object.entries(data)
|
|
79
|
+
.filter(([key]) => {
|
|
80
|
+
const { conditional } = fields[key];
|
|
81
|
+
return !conditional || !!data[conditional];
|
|
82
|
+
})
|
|
83
|
+
.map(([key, value]) => [key, typeof value === "function" ? value() : value]))))
|
|
79
84
|
.then(onClose)
|
|
80
85
|
.catch((e) => {
|
|
81
86
|
setError(e.message);
|
|
@@ -85,33 +90,36 @@ const FormDialog = ({ title, content, isOpen, onClose, onSubmit = () => Promise.
|
|
|
85
90
|
react_1.default.createElement("div", { className: core_1.Classes.DIALOG_BODY },
|
|
86
91
|
content,
|
|
87
92
|
Object.entries(fields).map(([name, meta], index) => {
|
|
93
|
+
if (meta.conditional && !data[meta.conditional]) {
|
|
94
|
+
return react_1.default.createElement("div", { key: name });
|
|
95
|
+
}
|
|
88
96
|
if (meta.type === "text") {
|
|
89
|
-
return (react_1.default.createElement(core_1.Label,
|
|
97
|
+
return (react_1.default.createElement(core_1.Label, { key: name },
|
|
90
98
|
meta.label,
|
|
91
99
|
react_1.default.createElement(core_1.InputGroup, { value: data[name], onChange: (e) => setData(Object.assign(Object.assign({}, data), { [name]: e.target.value })), autoFocus: index === 0 })));
|
|
92
100
|
}
|
|
93
101
|
else if (meta.type === "number") {
|
|
94
|
-
return (react_1.default.createElement(core_1.Label,
|
|
102
|
+
return (react_1.default.createElement(core_1.Label, { key: name },
|
|
95
103
|
meta.label,
|
|
96
104
|
react_1.default.createElement(core_1.NumericInput, { value: data[name], onChange: (e) => setData(Object.assign(Object.assign({}, data), { [name]: e.target.value })), autoFocus: index === 0 })));
|
|
97
105
|
}
|
|
98
106
|
else if (meta.type === "flag") {
|
|
99
|
-
return (react_1.default.createElement(core_1.Checkbox, { label: meta.label, value: data[name], onChange: (e) => setData(Object.assign(Object.assign({}, data), { [name]: e.target.checked })), autoFocus: index === 0 }));
|
|
107
|
+
return (react_1.default.createElement(core_1.Checkbox, { label: meta.label, value: data[name], onChange: (e) => setData(Object.assign(Object.assign({}, data), { [name]: e.target.checked })), key: name, autoFocus: index === 0 }));
|
|
100
108
|
}
|
|
101
109
|
else if (meta.type === "select") {
|
|
102
|
-
return (react_1.default.createElement(core_1.Label,
|
|
110
|
+
return (react_1.default.createElement(core_1.Label, { key: name },
|
|
103
111
|
meta.label,
|
|
104
112
|
react_1.default.createElement(MenuItemSelect_1.default, { activeItem: data[name], onItemSelect: (e) => setData(Object.assign(Object.assign({}, data), { [name]: e })), items: meta.options || [], ButtonProps: {
|
|
105
113
|
autoFocus: index === 0,
|
|
106
114
|
} })));
|
|
107
115
|
}
|
|
108
116
|
else if (meta.type === "page") {
|
|
109
|
-
return (react_1.default.createElement(core_1.Label,
|
|
117
|
+
return (react_1.default.createElement(core_1.Label, { key: name },
|
|
110
118
|
meta.label,
|
|
111
119
|
react_1.default.createElement(PageInput_1.default, { key: name, value: data[name], setValue: (e) => setData(Object.assign(Object.assign({}, data), { [name]: e })), autoFocus: index === 0 })));
|
|
112
120
|
}
|
|
113
121
|
else if (meta.type === "block") {
|
|
114
|
-
return (react_1.default.createElement(core_1.Label,
|
|
122
|
+
return (react_1.default.createElement(core_1.Label, { key: name },
|
|
115
123
|
meta.label,
|
|
116
124
|
react_1.default.createElement(BlockInput_1.default, { value: (0, getTextByBlockUid_1.default)(data[name]) ||
|
|
117
125
|
data[name], setValue: (text, uid) => setData(Object.assign(Object.assign({}, data), { [name]: window.roamAlphaAPI.pull("[:db/id]", [
|
|
@@ -122,14 +130,14 @@ const FormDialog = ({ title, content, isOpen, onClose, onSubmit = () => Promise.
|
|
|
122
130
|
: text })), autoFocus: index === 0 })));
|
|
123
131
|
}
|
|
124
132
|
else if (meta.type === "embed") {
|
|
125
|
-
return (react_1.default.createElement(core_1.Label,
|
|
133
|
+
return (react_1.default.createElement(core_1.Label, { key: name },
|
|
126
134
|
meta.label,
|
|
127
135
|
react_1.default.createElement(EmbedInput, { defaultValue: meta.defaultValue, onChange: (value) => {
|
|
128
136
|
setData(Object.assign(Object.assign({}, data), { [name]: value }));
|
|
129
137
|
}, autoFocus: index === 0 })));
|
|
130
138
|
}
|
|
131
139
|
else {
|
|
132
|
-
return react_1.default.createElement(
|
|
140
|
+
return react_1.default.createElement("div", { key: name });
|
|
133
141
|
}
|
|
134
142
|
})),
|
|
135
143
|
react_1.default.createElement("div", { className: core_1.Classes.DIALOG_FOOTER },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormDialog.js","sourceRoot":"","sources":["../../src/components/FormDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Button,\n Checkbox,\n Classes,\n Dialog,\n InputGroup,\n Intent,\n Label,\n NumericInput,\n Spinner,\n SpinnerSize,\n} from \"@blueprintjs/core\";\nimport React, {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport getTextByBlockUid from \"../queries/getTextByBlockUid\";\nimport createOverlayRender from \"../util/createOverlayRender\";\nimport type { RoamOverlayProps } from \"../util/renderOverlay\";\nimport BlockInput from \"./BlockInput\";\nimport MenuItemSelect from \"./MenuItemSelect\";\nimport PageInput from \"./PageInput\";\nimport nanoid from \"nanoid\";\nimport { getUids } from \"../dom\";\nimport { InputTextNode } from \"../types\";\nimport getFullTreeByParentUid from \"../queries/getFullTreeByParentUid\";\nimport createPage from \"../writes/createPage\";\n\ntype Props<T> = {\n title?: React.ReactNode;\n content?: React.ReactNode;\n onSubmit?: (data: T) => Promise<unknown> | unknown;\n fields?: Record<\n string,\n (\n | {\n defaultValue?: string;\n type: \"text\";\n }\n | {\n defaultValue?: number;\n type: \"number\";\n }\n | {\n defaultValue?: string;\n type: \"select\";\n options?: string[];\n }\n | {\n defaultValue?: string;\n type: \"page\";\n }\n | {\n defaultValue?: string;\n type: \"block\";\n }\n | {\n defaultValue?: boolean;\n type: \"flag\";\n }\n | {\n defaultValue?: InputTextNode[];\n type: \"embed\";\n }\n ) & { label?: string }\n >;\n};\n\nconst EmbedInput = ({\n defaultValue,\n onChange,\n autoFocus,\n}: {\n defaultValue?: InputTextNode[];\n onChange: (s: () => InputTextNode[]) => void;\n autoFocus: boolean;\n}) => {\n const defaultEmbed = useMemo(() => defaultValue || [], [defaultValue]);\n const elRef = useRef<HTMLDivElement>(null);\n useEffect(() => {\n const el = elRef.current;\n if (el) {\n const uid = window.roamAlphaAPI.util.generateUID();\n const parentUid = window.roamAlphaAPI.util.generateUID();\n createPage({\n uid: parentUid,\n title: nanoid(),\n tree: defaultEmbed,\n }).then(() => {\n window.roamAlphaAPI.ui.components.renderPage({\n uid: parentUid,\n el,\n hideMentions: true,\n });\n if (autoFocus) {\n const block = el.querySelector<HTMLDivElement | HTMLTextAreaElement>(\n `div[id*=\"block-input\"],textarea[id*=\"block-input\"]`\n );\n const { windowId, blockUid } = getUids(block);\n if (blockUid)\n window.roamAlphaAPI.ui.setBlockFocusAndSelection({\n location: {\n \"block-uid\": blockUid,\n \"window-id\": windowId,\n },\n });\n }\n });\n // In the future, we can return the whole tree of data from `parentUid`\n onChange(() => getFullTreeByParentUid(parentUid).children);\n return () => {\n window.roamAlphaAPI.deleteBlock({ block: { uid } });\n window.roamAlphaAPI.deletePage({ page: { uid: parentUid } });\n };\n }\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n return () => {};\n }, [\n elRef,\n defaultEmbed,\n autoFocus,\n // Triggering infinite rerender\n // onChange\n ]);\n return (\n <>\n <style>{`div.rm-autocomplete__results {\n z-index: 1000;\n}\n.roamjs-form-embed div div:has(> h1.rm-title-display),\n.roamjs-form-embed .rm-api-render--page > div:has(.rm-reference-main) {\n display: none;\n}`}</style>\n <div\n ref={elRef}\n className=\"rounded-md bg-white font-normal mt-1 bp3-input h-32 overflow-scroll roamjs-form-embed py-2 px-4\"\n />\n </>\n );\n};\n\nconst FormDialog = <T extends Record<string, unknown>>({\n title,\n content,\n isOpen,\n onClose,\n onSubmit = () => Promise.resolve(),\n fields = {},\n}: RoamOverlayProps<Props<T>>) => {\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(\"\");\n const [data, setData] = useState<T>(\n () =>\n Object.fromEntries(\n Object.entries(fields)\n .filter(([, meta]) => typeof meta.defaultValue !== \"undefined\")\n .map(([key, meta]) => [key, meta.defaultValue])\n ) as T\n );\n const onClick = useCallback(\n () =>\n Promise.resolve(\n onSubmit(\n Object.fromEntries(\n Object.entries(data).map(\n ([key, value]) =>\n [key, typeof value === \"function\" ? value() : value] as const\n )\n ) as T\n )\n )\n .then(onClose)\n .catch((e) => {\n setError(e.message);\n setLoading(false);\n }),\n [data, onClose, setError, setLoading]\n );\n return (\n <Dialog\n isOpen={isOpen}\n onClose={onClose}\n title={title}\n enforceFocus={!title}\n autoFocus={!title}\n >\n <div className={Classes.DIALOG_BODY}>\n {content}\n {Object.entries(fields).map(([name, meta], index) => {\n if (meta.type === \"text\") {\n return (\n <Label>\n {meta.label}\n <InputGroup\n value={data[name] as string}\n onChange={(e) =>\n setData({\n ...data,\n [name]: e.target.value,\n })\n }\n autoFocus={index === 0}\n />\n </Label>\n );\n } else if (meta.type === \"number\") {\n return (\n <Label>\n {meta.label}\n <NumericInput\n value={data[name] as string}\n onChange={(e) =>\n setData({\n ...data,\n [name]: e.target.value,\n })\n }\n autoFocus={index === 0}\n />\n </Label>\n );\n } else if (meta.type === \"flag\") {\n return (\n <Checkbox\n label={meta.label}\n value={data[name] as string}\n onChange={(e) =>\n setData({\n ...data,\n [name]: (e.target as HTMLInputElement).checked,\n })\n }\n autoFocus={index === 0}\n />\n );\n } else if (meta.type === \"select\") {\n return (\n <Label>\n {meta.label}\n <MenuItemSelect\n activeItem={data[name] as string}\n onItemSelect={(e) =>\n setData({\n ...data,\n [name]: e,\n })\n }\n items={meta.options || []}\n ButtonProps={{\n autoFocus: index === 0,\n }}\n />\n </Label>\n );\n } else if (meta.type === \"page\") {\n return (\n <Label>\n {meta.label}\n <PageInput\n key={name}\n value={data[name] as string}\n setValue={(e) =>\n setData({\n ...data,\n [name]: e,\n })\n }\n autoFocus={index === 0}\n />\n </Label>\n );\n } else if (meta.type === \"block\") {\n return (\n <Label>\n {meta.label}\n <BlockInput\n value={\n getTextByBlockUid(data[name] as string) ||\n (data[name] as string)\n }\n setValue={(text, uid) =>\n setData({\n ...data,\n [name]: window.roamAlphaAPI.pull(\"[:db/id]\", [\n \":block/uid\",\n uid || \"\",\n ])\n ? uid\n : text,\n })\n }\n autoFocus={index === 0}\n />\n </Label>\n );\n } else if (meta.type === \"embed\") {\n return (\n <Label>\n {meta.label}\n <EmbedInput\n defaultValue={meta.defaultValue}\n onChange={(value) => {\n setData({\n ...data,\n [name]: value,\n });\n }}\n autoFocus={index === 0}\n />\n </Label>\n );\n } else {\n return <></>;\n }\n })}\n </div>\n <div className={Classes.DIALOG_FOOTER}>\n <div className={`${Classes.DIALOG_FOOTER_ACTIONS} items-center`}>\n {loading && <Spinner size={SpinnerSize.SMALL} />}\n <span className=\"text-red-700\">{error}</span>\n <Button\n text={\"Cancel\"}\n onClick={onClose}\n disabled={loading}\n className=\"flex-shrink-0\"\n />\n <Button\n text={\"Submit\"}\n intent={Intent.PRIMARY}\n onClick={onClick}\n disabled={loading}\n className=\"flex-shrink-0\"\n />\n </div>\n </div>\n </Dialog>\n );\n};\n\nexport const render = createOverlayRender<Props<Record<string, unknown>>>(\n \"form-dialog\",\n FormDialog\n);\n\nexport const prompt = ({\n defaultAnswer,\n question,\n title,\n}: {\n title: string;\n question: string;\n defaultAnswer: string;\n}) =>\n new Promise<string>((resolve) =>\n render({\n onSubmit: (data) => resolve(data.value as string),\n fields: { value: { type: \"text\", defaultValue: defaultAnswer } },\n title,\n content: (\n <div className=\"whitespace-pre-wrap font-semibold text-lg mb-4\">\n {question}\n </div>\n ),\n })\n );\n\nexport default FormDialog;\n"]}
|
|
1
|
+
{"version":3,"file":"FormDialog.js","sourceRoot":"","sources":["../../src/components/FormDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Button,\n Checkbox,\n Classes,\n Dialog,\n InputGroup,\n Intent,\n Label,\n NumericInput,\n Spinner,\n SpinnerSize,\n} from \"@blueprintjs/core\";\nimport React, {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport getTextByBlockUid from \"../queries/getTextByBlockUid\";\nimport createOverlayRender from \"../util/createOverlayRender\";\nimport type { RoamOverlayProps } from \"../util/renderOverlay\";\nimport BlockInput from \"./BlockInput\";\nimport MenuItemSelect from \"./MenuItemSelect\";\nimport PageInput from \"./PageInput\";\nimport nanoid from \"nanoid\";\nimport { getUids } from \"../dom\";\nimport { InputTextNode } from \"../types\";\nimport getFullTreeByParentUid from \"../queries/getFullTreeByParentUid\";\nimport createPage from \"../writes/createPage\";\n\ntype Props<T> = {\n title?: React.ReactNode;\n content?: React.ReactNode;\n onSubmit?: (data: T) => Promise<unknown> | unknown;\n fields?: Record<\n string,\n (\n | {\n defaultValue?: string;\n type: \"text\";\n }\n | {\n defaultValue?: number;\n type: \"number\";\n }\n | {\n defaultValue?: string;\n type: \"select\";\n options?: string[];\n }\n | {\n defaultValue?: string;\n type: \"page\";\n }\n | {\n defaultValue?: string;\n type: \"block\";\n }\n | {\n defaultValue?: boolean;\n type: \"flag\";\n }\n | {\n defaultValue?: InputTextNode[];\n type: \"embed\";\n }\n ) & { label?: string; conditional?: string }\n >;\n};\n\nconst EmbedInput = ({\n defaultValue,\n onChange,\n autoFocus,\n}: {\n defaultValue?: InputTextNode[];\n onChange: (s: () => InputTextNode[]) => void;\n autoFocus: boolean;\n}) => {\n const defaultEmbed = useMemo(() => defaultValue || [], [defaultValue]);\n const elRef = useRef<HTMLDivElement>(null);\n useEffect(() => {\n const el = elRef.current;\n if (el) {\n const uid = window.roamAlphaAPI.util.generateUID();\n const parentUid = window.roamAlphaAPI.util.generateUID();\n createPage({\n uid: parentUid,\n title: nanoid(),\n tree: defaultEmbed,\n }).then(() => {\n window.roamAlphaAPI.ui.components.renderPage({\n uid: parentUid,\n el,\n hideMentions: true,\n });\n if (autoFocus) {\n const block = el.querySelector<HTMLDivElement | HTMLTextAreaElement>(\n `div[id*=\"block-input\"],textarea[id*=\"block-input\"]`\n );\n const { windowId, blockUid } = getUids(block);\n if (blockUid)\n window.roamAlphaAPI.ui.setBlockFocusAndSelection({\n location: {\n \"block-uid\": blockUid,\n \"window-id\": windowId,\n },\n });\n }\n });\n // In the future, we can return the whole tree of data from `parentUid`\n onChange(() => getFullTreeByParentUid(parentUid).children);\n return () => {\n window.roamAlphaAPI.deleteBlock({ block: { uid } });\n window.roamAlphaAPI.deletePage({ page: { uid: parentUid } });\n };\n }\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n return () => {};\n }, [\n elRef,\n defaultEmbed,\n autoFocus,\n // Triggering infinite rerender\n // onChange\n ]);\n return (\n <>\n <style>{`div.rm-autocomplete__results {\n z-index: 1000;\n}\n.roamjs-form-embed div div:has(> h1.rm-title-display),\n.roamjs-form-embed .rm-api-render--page > div:has(.rm-reference-main) {\n display: none;\n}`}</style>\n <div\n ref={elRef}\n className=\"rounded-md bg-white font-normal mt-1 bp3-input h-32 overflow-scroll roamjs-form-embed py-2 px-4\"\n />\n </>\n );\n};\n\nconst FormDialog = <T extends Record<string, unknown>>({\n title,\n content,\n isOpen,\n onClose,\n onSubmit = () => Promise.resolve(),\n fields = {},\n}: RoamOverlayProps<Props<T>>) => {\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(\"\");\n const [data, setData] = useState<T>(\n () =>\n Object.fromEntries(\n Object.entries(fields)\n .filter(([, meta]) => typeof meta.defaultValue !== \"undefined\")\n .map(([key, meta]) => [key, meta.defaultValue])\n ) as T\n );\n const onClick = useCallback(\n () =>\n Promise.resolve(\n onSubmit(\n Object.fromEntries(\n Object.entries(data)\n .filter(([key]) => {\n const { conditional } = fields[key];\n return !conditional || !!data[conditional];\n })\n .map(\n ([key, value]) =>\n [key, typeof value === \"function\" ? value() : value] as const\n )\n ) as T\n )\n )\n .then(onClose)\n .catch((e) => {\n setError(e.message);\n setLoading(false);\n }),\n [data, onClose, setError, setLoading]\n );\n return (\n <Dialog\n isOpen={isOpen}\n onClose={onClose}\n title={title}\n enforceFocus={!title}\n autoFocus={!title}\n >\n <div className={Classes.DIALOG_BODY}>\n {content}\n {Object.entries(fields).map(([name, meta], index) => {\n if (meta.conditional && !data[meta.conditional]) {\n return <div key={name} />;\n }\n if (meta.type === \"text\") {\n return (\n <Label key={name}>\n {meta.label}\n <InputGroup\n value={data[name] as string}\n onChange={(e) =>\n setData({\n ...data,\n [name]: e.target.value,\n })\n }\n autoFocus={index === 0}\n />\n </Label>\n );\n } else if (meta.type === \"number\") {\n return (\n <Label key={name}>\n {meta.label}\n <NumericInput\n value={data[name] as string}\n onChange={(e) =>\n setData({\n ...data,\n [name]: e.target.value,\n })\n }\n autoFocus={index === 0}\n />\n </Label>\n );\n } else if (meta.type === \"flag\") {\n return (\n <Checkbox\n label={meta.label}\n value={data[name] as string}\n onChange={(e) =>\n setData({\n ...data,\n [name]: (e.target as HTMLInputElement).checked,\n })\n }\n key={name}\n autoFocus={index === 0}\n />\n );\n } else if (meta.type === \"select\") {\n return (\n <Label key={name}>\n {meta.label}\n <MenuItemSelect\n activeItem={data[name] as string}\n onItemSelect={(e) =>\n setData({\n ...data,\n [name]: e,\n })\n }\n items={meta.options || []}\n ButtonProps={{\n autoFocus: index === 0,\n }}\n />\n </Label>\n );\n } else if (meta.type === \"page\") {\n return (\n <Label key={name}>\n {meta.label}\n <PageInput\n key={name}\n value={data[name] as string}\n setValue={(e) =>\n setData({\n ...data,\n [name]: e,\n })\n }\n autoFocus={index === 0}\n />\n </Label>\n );\n } else if (meta.type === \"block\") {\n return (\n <Label key={name}>\n {meta.label}\n <BlockInput\n value={\n getTextByBlockUid(data[name] as string) ||\n (data[name] as string)\n }\n setValue={(text, uid) =>\n setData({\n ...data,\n [name]: window.roamAlphaAPI.pull(\"[:db/id]\", [\n \":block/uid\",\n uid || \"\",\n ])\n ? uid\n : text,\n })\n }\n autoFocus={index === 0}\n />\n </Label>\n );\n } else if (meta.type === \"embed\") {\n return (\n <Label key={name}>\n {meta.label}\n <EmbedInput\n defaultValue={meta.defaultValue}\n onChange={(value) => {\n setData({\n ...data,\n [name]: value,\n });\n }}\n autoFocus={index === 0}\n />\n </Label>\n );\n } else {\n return <div key={name} />;\n }\n })}\n </div>\n <div className={Classes.DIALOG_FOOTER}>\n <div className={`${Classes.DIALOG_FOOTER_ACTIONS} items-center`}>\n {loading && <Spinner size={SpinnerSize.SMALL} />}\n <span className=\"text-red-700\">{error}</span>\n <Button\n text={\"Cancel\"}\n onClick={onClose}\n disabled={loading}\n className=\"flex-shrink-0\"\n />\n <Button\n text={\"Submit\"}\n intent={Intent.PRIMARY}\n onClick={onClick}\n disabled={loading}\n className=\"flex-shrink-0\"\n />\n </div>\n </div>\n </Dialog>\n );\n};\n\nexport const render = createOverlayRender<Props<Record<string, unknown>>>(\n \"form-dialog\",\n FormDialog\n);\n\nexport const prompt = ({\n defaultAnswer,\n question,\n title,\n}: {\n title: string;\n question: string;\n defaultAnswer: string;\n}) =>\n new Promise<string>((resolve) =>\n render({\n onSubmit: (data) => resolve(data.value as string),\n fields: { value: { type: \"text\", defaultValue: defaultAnswer } },\n title,\n content: (\n <div className=\"whitespace-pre-wrap font-semibold text-lg mb-4\">\n {question}\n </div>\n ),\n })\n );\n\nexport default FormDialog;\n"]}
|
package/components.js
CHANGED
|
@@ -63,6 +63,11 @@ const components = [
|
|
|
63
63
|
text: { type: "text", label: "Text Field" },
|
|
64
64
|
number: { type: "number", label: "Number Field" },
|
|
65
65
|
flag: { type: "flag", label: "Flag Field" },
|
|
66
|
+
conditionalText: {
|
|
67
|
+
type: "text",
|
|
68
|
+
label: "Conditional Text Field",
|
|
69
|
+
conditional: "flag",
|
|
70
|
+
},
|
|
66
71
|
page: { type: "page", label: "Page Field" },
|
|
67
72
|
block: { type: "block", label: "Block Field" },
|
|
68
73
|
select: {
|
package/components.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.tsx"],"names":[],"mappings":"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","sourcesContent":["import ReactDOM from \"react-dom\";\nimport React, { useState, useMemo } from \"react\";\nimport { Button } from \"@blueprintjs/core\";\n\nimport AutocompleteInput from \"./components/AutocompleteInput\";\nimport FormDialog from \"./components/FormDialog\";\nimport PageInput from \"./components/PageInput\";\nimport renderToast from \"./components/Toast\";\n\nimport renderOverlay from \"./util/renderOverlay\";\nimport runExtension from \"./util/runExtension\";\n\nimport { createBlock } from \"./writes\";\n\n// const blockRender = (Component: React.FC) => {\n// const block = window.roamAlphaAPI.ui.getFocusedBlock();\n// const parent = document.getElementById(\n// `block-input-${block?.[\"window-id\"]}-${block?.[\"block-uid\"]}`\n// );\n// ReactDOM.render(<Component />, parent);\n// };\n\nconst unloads = new Set<() => void>();\n\nconst rootRender = (Component: React.FC) => {\n const root = document.querySelector(\".roam-article\");\n const parent = document.createElement(\"div\");\n root?.insertBefore(parent, root.firstElementChild);\n ReactDOM.render(<Component />, parent);\n unloads.add(() => {\n ReactDOM.unmountComponentAtNode(parent);\n parent.remove();\n });\n};\n\nconst components = [\n {\n callback: () =>\n rootRender(() => {\n const [value, setValue] = useState(\"\");\n const options = useMemo(() => [\"apple\", \"banana\", \"orange\"], []);\n return (\n <>\n <AutocompleteInput\n value={value}\n setValue={setValue}\n options={options}\n />\n <div>Chosen value: {value}</div>\n </>\n );\n }),\n label: \"AutocompleteInput\",\n },\n {\n callback: () =>\n rootRender(() => {\n const [isOpen, setIsOpen] = useState(false);\n return (\n <>\n <Button onClick={() => setIsOpen(true)} text={\"Open Form\"} />\n <FormDialog\n isOpen={isOpen}\n onClose={() => setIsOpen(false)}\n onSubmit={(data) =>\n window.roamAlphaAPI.ui.mainWindow\n .getOpenPageOrBlockUid()\n .then((parentUid) =>\n createBlock({\n parentUid:\n parentUid ||\n window.roamAlphaAPI.util.dateToPageUid(new Date()),\n node: {\n text: \"Response\",\n children: Object.entries(data).map(([k, v]) => ({\n text: k,\n children: Array.isArray(v) ? v : [{ text: `${v}` }],\n })),\n },\n })\n )\n }\n fields={{\n text: { type: \"text\", label: \"Text Field\" },\n number: { type: \"number\", label: \"Number Field\" },\n flag: { type: \"flag\", label: \"Flag Field\" },\n page: { type: \"page\", label: \"Page Field\" },\n block: { type: \"block\", label: \"Block Field\" },\n select: {\n type: \"select\",\n label: \"Select Field\",\n options: [\"apple\", \"banana\", \"orange\"],\n },\n embed: {\n type: \"embed\",\n label: \"Embed Field\",\n },\n }}\n />\n </>\n );\n }),\n label: \"FormDialog\",\n },\n {\n callback: () =>\n rootRender(() => {\n const [value, setValue] = useState(\"\");\n const [multiline, setMultiline] = useState(false);\n return (\n <>\n <PageInput\n value={value}\n setValue={setValue}\n multiline={multiline}\n />\n <input\n className=\"ml-8 inline-block\"\n checked={multiline}\n onChange={(e) => setMultiline(e.target.checked)}\n type={\"checkbox\"}\n />\n </>\n );\n }),\n label: \"PageInput\",\n },\n];\n\nexport default runExtension({\n extensionId: \"components\",\n run: (args) => {\n components.forEach(({ callback, label }) => {\n args.extensionAPI.ui.commandPalette.addCommand({\n label: `Render RoamJS component ${label}`,\n callback,\n });\n });\n window.roamjs.extension.developer = {\n components: {\n AutocompleteInput,\n FormDialog,\n PageInput,\n renderToast,\n },\n util: {\n renderOverlay,\n runExtension,\n },\n args,\n };\n return () => {\n unloads.forEach((unload) => unload());\n };\n },\n});\n"]}
|
|
1
|
+
{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.tsx"],"names":[],"mappings":"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","sourcesContent":["import ReactDOM from \"react-dom\";\nimport React, { useState, useMemo } from \"react\";\nimport { Button } from \"@blueprintjs/core\";\n\nimport AutocompleteInput from \"./components/AutocompleteInput\";\nimport FormDialog from \"./components/FormDialog\";\nimport PageInput from \"./components/PageInput\";\nimport renderToast from \"./components/Toast\";\n\nimport renderOverlay from \"./util/renderOverlay\";\nimport runExtension from \"./util/runExtension\";\n\nimport { createBlock } from \"./writes\";\n\n// const blockRender = (Component: React.FC) => {\n// const block = window.roamAlphaAPI.ui.getFocusedBlock();\n// const parent = document.getElementById(\n// `block-input-${block?.[\"window-id\"]}-${block?.[\"block-uid\"]}`\n// );\n// ReactDOM.render(<Component />, parent);\n// };\n\nconst unloads = new Set<() => void>();\n\nconst rootRender = (Component: React.FC) => {\n const root = document.querySelector(\".roam-article\");\n const parent = document.createElement(\"div\");\n root?.insertBefore(parent, root.firstElementChild);\n ReactDOM.render(<Component />, parent);\n unloads.add(() => {\n ReactDOM.unmountComponentAtNode(parent);\n parent.remove();\n });\n};\n\nconst components = [\n {\n callback: () =>\n rootRender(() => {\n const [value, setValue] = useState(\"\");\n const options = useMemo(() => [\"apple\", \"banana\", \"orange\"], []);\n return (\n <>\n <AutocompleteInput\n value={value}\n setValue={setValue}\n options={options}\n />\n <div>Chosen value: {value}</div>\n </>\n );\n }),\n label: \"AutocompleteInput\",\n },\n {\n callback: () =>\n rootRender(() => {\n const [isOpen, setIsOpen] = useState(false);\n return (\n <>\n <Button onClick={() => setIsOpen(true)} text={\"Open Form\"} />\n <FormDialog\n isOpen={isOpen}\n onClose={() => setIsOpen(false)}\n onSubmit={(data) =>\n window.roamAlphaAPI.ui.mainWindow\n .getOpenPageOrBlockUid()\n .then((parentUid) =>\n createBlock({\n parentUid:\n parentUid ||\n window.roamAlphaAPI.util.dateToPageUid(new Date()),\n node: {\n text: \"Response\",\n children: Object.entries(data).map(([k, v]) => ({\n text: k,\n children: Array.isArray(v) ? v : [{ text: `${v}` }],\n })),\n },\n })\n )\n }\n fields={{\n text: { type: \"text\", label: \"Text Field\" },\n number: { type: \"number\", label: \"Number Field\" },\n flag: { type: \"flag\", label: \"Flag Field\" },\n conditionalText: {\n type: \"text\",\n label: \"Conditional Text Field\",\n conditional: \"flag\",\n },\n page: { type: \"page\", label: \"Page Field\" },\n block: { type: \"block\", label: \"Block Field\" },\n select: {\n type: \"select\",\n label: \"Select Field\",\n options: [\"apple\", \"banana\", \"orange\"],\n },\n embed: {\n type: \"embed\",\n label: \"Embed Field\",\n },\n }}\n />\n </>\n );\n }),\n label: \"FormDialog\",\n },\n {\n callback: () =>\n rootRender(() => {\n const [value, setValue] = useState(\"\");\n const [multiline, setMultiline] = useState(false);\n return (\n <>\n <PageInput\n value={value}\n setValue={setValue}\n multiline={multiline}\n />\n <input\n className=\"ml-8 inline-block\"\n checked={multiline}\n onChange={(e) => setMultiline(e.target.checked)}\n type={\"checkbox\"}\n />\n </>\n );\n }),\n label: \"PageInput\",\n },\n];\n\nexport default runExtension({\n extensionId: \"components\",\n run: (args) => {\n components.forEach(({ callback, label }) => {\n args.extensionAPI.ui.commandPalette.addCommand({\n label: `Render RoamJS component ${label}`,\n callback,\n });\n });\n window.roamjs.extension.developer = {\n components: {\n AutocompleteInput,\n FormDialog,\n PageInput,\n renderToast,\n },\n util: {\n renderOverlay,\n runExtension,\n },\n args,\n };\n return () => {\n unloads.forEach((unload) => unload());\n };\n },\n});\n"]}
|
package/package.json
CHANGED
|
@@ -7,6 +7,7 @@ const ExtensionApiContext_1 = tslib_1.__importDefault(require("../components/Ext
|
|
|
7
7
|
const dispatchToRegistry_1 = tslib_1.__importDefault(require("./dispatchToRegistry"));
|
|
8
8
|
const removeFromRegistry_1 = tslib_1.__importDefault(require("./removeFromRegistry"));
|
|
9
9
|
const renderWithUnmount = (el, p, args) => {
|
|
10
|
+
const oldChildren = p.children;
|
|
10
11
|
react_dom_1.default.render(react_1.default.createElement(ExtensionApiContext_1.default, args, el), p);
|
|
11
12
|
const unmount = (observer) => {
|
|
12
13
|
observer.disconnect();
|
|
@@ -15,6 +16,9 @@ const renderWithUnmount = (el, p, args) => {
|
|
|
15
16
|
reactRoots: [p],
|
|
16
17
|
observers: [observer],
|
|
17
18
|
});
|
|
19
|
+
if (oldChildren.length && document.body.contains(p)) {
|
|
20
|
+
Array.from(oldChildren).forEach((c) => p.appendChild(c));
|
|
21
|
+
}
|
|
18
22
|
};
|
|
19
23
|
const unmountObserver = new MutationObserver((ms, observer) => {
|
|
20
24
|
const parentRemoved = ms
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"renderWithUnmount.js","sourceRoot":"","sources":["../../src/util/renderWithUnmount.ts"],"names":[],"mappings":";;;AAAA,0DAA0B;AAC1B,kEAAiC;AACjC,oGAA4E;AAE5E,sFAAsD;AACtD,sFAAsD;AAEtD,MAAM,iBAAiB,GAAG,CACxB,EAAsB,EACtB,CAAc,EACd,IAAiB,EACH,EAAE;IAChB,mBAAQ,CAAC,MAAM,CACb,eAAK,CAAC,aAAa,CAAC,6BAA2B,EAAE,IAAI,EAAE,EAAE,CAAC,EAC1D,CAAC,CACF,CAAC;IACF,MAAM,OAAO,GAAG,CAAC,QAA0B,EAAE,EAAE;QAC7C,QAAQ,CAAC,UAAU,EAAE,CAAC;QACtB,mBAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC;QACnC,IAAA,4BAAkB,EAAC;YACjB,UAAU,EAAE,CAAC,CAAC,CAAC;YACf,SAAS,EAAE,CAAC,QAAQ,CAAC;SACtB,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"renderWithUnmount.js","sourceRoot":"","sources":["../../src/util/renderWithUnmount.ts"],"names":[],"mappings":";;;AAAA,0DAA0B;AAC1B,kEAAiC;AACjC,oGAA4E;AAE5E,sFAAsD;AACtD,sFAAsD;AAEtD,MAAM,iBAAiB,GAAG,CACxB,EAAsB,EACtB,CAAc,EACd,IAAiB,EACH,EAAE;IAChB,MAAM,WAAW,GAAG,CAAC,CAAC,QAAQ,CAAC;IAC/B,mBAAQ,CAAC,MAAM,CACb,eAAK,CAAC,aAAa,CAAC,6BAA2B,EAAE,IAAI,EAAE,EAAE,CAAC,EAC1D,CAAC,CACF,CAAC;IACF,MAAM,OAAO,GAAG,CAAC,QAA0B,EAAE,EAAE;QAC7C,QAAQ,CAAC,UAAU,EAAE,CAAC;QACtB,mBAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC;QACnC,IAAA,4BAAkB,EAAC;YACjB,UAAU,EAAE,CAAC,CAAC,CAAC;YACf,SAAS,EAAE,CAAC,QAAQ,CAAC;SACtB,CAAC,CAAC;QACH,IAAI,WAAW,CAAC,MAAM,IAAI,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;YACnD,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;SAC1D;IACH,CAAC,CAAC;IACF,MAAM,eAAe,GAAG,IAAI,gBAAgB,CAAC,CAAC,EAAE,EAAE,QAAQ,EAAE,EAAE;QAC5D,MAAM,aAAa,GAAG,EAAE;aACrB,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;aAC1C,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;QACzC,IAAI,aAAa,EAAE;YACjB,OAAO,CAAC,QAAQ,CAAC,CAAC;SACnB;IACH,CAAC,CAAC,CAAC;IACH,eAAe,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IAC3E,IAAA,4BAAkB,EAAC;QACjB,UAAU,EAAE,CAAC,CAAC,CAAC;QACf,SAAS,EAAE,CAAC,eAAe,CAAC;KAC7B,CAAC,CAAC;IACH,OAAO,GAAG,EAAE,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;AACxC,CAAC,CAAC;AAEF,kBAAe,iBAAiB,CAAC","sourcesContent":["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ExtensionApiContextProvider from \"../components/ExtensionApiContext\";\nimport { OnloadArgs } from \"../types\";\nimport dispatchToRegistry from \"./dispatchToRegistry\";\nimport removeFromRegistry from \"./removeFromRegistry\";\n\nconst renderWithUnmount = (\n el: React.ReactElement,\n p: HTMLElement,\n args?: OnloadArgs\n): (() => void) => {\n const oldChildren = p.children;\n ReactDOM.render(\n React.createElement(ExtensionApiContextProvider, args, el),\n p\n );\n const unmount = (observer: MutationObserver) => {\n observer.disconnect();\n ReactDOM.unmountComponentAtNode(p);\n removeFromRegistry({\n reactRoots: [p],\n observers: [observer],\n });\n if (oldChildren.length && document.body.contains(p)) {\n Array.from(oldChildren).forEach((c) => p.appendChild(c));\n }\n };\n const unmountObserver = new MutationObserver((ms, observer) => {\n const parentRemoved = ms\n .flatMap((m) => Array.from(m.removedNodes))\n .some((n) => n === p || n.contains(p));\n if (parentRemoved) {\n unmount(observer);\n }\n });\n unmountObserver.observe(document.body, { childList: true, subtree: true });\n dispatchToRegistry({\n reactRoots: [p],\n observers: [unmountObserver],\n });\n return () => unmount(unmountObserver);\n};\n\nexport default renderWithUnmount;\n"]}
|