@ioca/react 1.5.14 → 1.5.16
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/README.md +5 -0
- package/lib/cjs/components/datagrid/datagrid.js +1 -1
- package/lib/cjs/components/datagrid/datagrid.js.map +1 -1
- package/lib/cjs/components/drawer/drawer.js +4 -1
- package/lib/cjs/components/drawer/drawer.js.map +1 -1
- package/lib/cjs/components/form/field.js +9 -5
- package/lib/cjs/components/form/field.js.map +1 -1
- package/lib/cjs/components/form/form.js +16 -8
- package/lib/cjs/components/form/form.js.map +1 -1
- package/lib/cjs/components/form/useConfig.js +1 -1
- package/lib/cjs/components/form/useConfig.js.map +1 -1
- package/lib/cjs/components/form/useForm.js +43 -58
- package/lib/cjs/components/form/useForm.js.map +1 -1
- package/lib/cjs/components/form/utils.js +33 -0
- package/lib/cjs/components/form/utils.js.map +1 -0
- package/lib/cjs/js/hooks.js +8 -6
- package/lib/cjs/js/hooks.js.map +1 -1
- package/lib/css/colors.css +1 -1
- package/lib/css/index.css +1 -1
- package/lib/css/index.css.map +1 -1
- package/lib/css/tokens.css +11 -10
- package/lib/es/components/datagrid/datagrid.js +1 -1
- package/lib/es/components/datagrid/datagrid.js.map +1 -1
- package/lib/es/components/drawer/drawer.js +4 -1
- package/lib/es/components/drawer/drawer.js.map +1 -1
- package/lib/es/components/form/field.js +9 -5
- package/lib/es/components/form/field.js.map +1 -1
- package/lib/es/components/form/form.js +17 -9
- package/lib/es/components/form/form.js.map +1 -1
- package/lib/es/components/form/useConfig.js +1 -1
- package/lib/es/components/form/useConfig.js.map +1 -1
- package/lib/es/components/form/useForm.js +43 -58
- package/lib/es/components/form/useForm.js.map +1 -1
- package/lib/es/components/form/utils.js +29 -0
- package/lib/es/components/form/utils.js.map +1 -0
- package/lib/es/js/hooks.js +8 -6
- package/lib/es/js/hooks.js.map +1 -1
- package/lib/index.js +108 -81
- package/lib/types/components/form/useForm.d.ts +3 -3
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"datagrid.js","sources":["../../../../packages/components/datagrid/datagrid.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport {\n\tCSSProperties,\n\tKey,\n\tMouseEvent,\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n} from \"react\";\nimport { useReactive } from \"../../js/hooks\";\nimport { getNextSorter } from \"../../js/utils\";\nimport Loading from \"../loading\";\nimport Empty from \"../utils/empty\";\nimport {\n\tapplyFixedInsets,\n\tbuildCssWidths,\n\tbuildGridTemplateColumns,\n} from \"./helper\";\nimport \"./index.css\";\nimport Row, { Header } from \"./row\";\nimport type { IColumn, IData, IDatagrid, TDatagridState } from \"./type\";\nimport VirtualDatagrid from \"./virtual\";\n\nconst Datagrid = (props: IDatagrid) => {\n\tconst {\n\t\tdata = [],\n\t\tcolumns = [],\n\t\tborder,\n\t\tstriped,\n\t\theader = true,\n\t\tresizable,\n\t\tcellPadding = \".5em\",\n\t\tcellEllipsis,\n\t\tempty = <Empty />,\n\t\tloading,\n\t\theight = \"unset\",\n\t\tstyle,\n\t\tclassName,\n\t\trowKey,\n\t\tvirtual,\n\t\trenderLoading = () => (\n\t\t\t<Loading size='1.5em' className='color-3' absolute />\n\t\t),\n\t\tonCellClick,\n\t\tonRowClick,\n\t\tonCellDoubleClick,\n\t\tonHeaderClick,\n\t\tonSort,\n\t\tonScroll,\n\t\tonResize,\n\t} = props;\n\n\tconst container = useRef<HTMLDivElement>(null);\n\tconst wrapRef = useRef<HTMLDivElement>(null);\n\n\tconst state = useReactive<TDatagridState>({\n\t\trows: data,\n\t\twidths: columns.map((col) => col.width ?? \"min-content\"),\n\t\tsortBy: \"\",\n\t\tsortType: \"\",\n\t});\n\tconst previewRef = useRef({ index: -1, width: -1, template: \"\" });\n\n\tuseEffect(() => {\n\t\tconst next = columns.map((col, i) => {\n\t\t\tif (col.width != null) return col.width;\n\t\t\treturn state.widths[i] ?? \"min-content\";\n\t\t});\n\n\t\tlet changed = next.length !== state.widths.length;\n\t\tif (!changed) {\n\t\t\tfor (let i = 0; i < next.length; i++) {\n\t\t\t\tif (next[i] !== state.widths[i]) {\n\t\t\t\t\tchanged = true;\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tif (changed) state.widths = next;\n\t}, [columns, state]);\n\n\tconst styles = useMemo(() => {\n\t\tconst { widths } = state;\n\n\t\tconst o = {\n\t\t\t...style,\n\t\t\t\"--grid-template-columns\": buildGridTemplateColumns(widths),\n\t\t};\n\n\t\tif (!resizable) return o;\n\n\t\tconst cssWidths = buildCssWidths(widths);\n\t\tapplyFixedInsets(\n\t\t\t(k, v) => {\n\t\t\t\t(o as any)[k] = v;\n\t\t\t},\n\t\t\tcolumns,\n\t\t\tcssWidths,\n\t\t);\n\n\t\treturn o;\n\t}, [columns, resizable, state.widths, style]);\n\n\tconst handleWidthChange = useCallback(\n\t\t(i: number, w: number, phase: \"preview\" | \"commit\" = \"commit\") => {\n\t\t\tif (!resizable) return;\n\t\t\tif (phase === \"preview\") {\n\t\t\t\tconst el = wrapRef.current;\n\t\t\t\tif (!el) return;\n\t\t\t\tif (\n\t\t\t\t\tpreviewRef.current.index === i &&\n\t\t\t\t\tpreviewRef.current.width === w\n\t\t\t\t) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst template = buildGridTemplateColumns(state.widths, i, w);\n\t\t\t\tif (previewRef.current.template !== template) {\n\t\t\t\t\tel.style.setProperty(\"--grid-template-columns\", template);\n\t\t\t\t\tconst cssWidths = buildCssWidths(state.widths, i, w);\n\t\t\t\t\tapplyFixedInsets(\n\t\t\t\t\t\t(k, v) => el.style.setProperty(k, v),\n\t\t\t\t\t\tcolumns,\n\t\t\t\t\t\tcssWidths,\n\t\t\t\t\t);\n\t\t\t\t\tpreviewRef.current.template = template;\n\t\t\t\t}\n\t\t\t\tpreviewRef.current.index = i;\n\t\t\t\tpreviewRef.current.width = w;\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tpreviewRef.current.index = -1;\n\t\t\tpreviewRef.current.width = -1;\n\t\t\tpreviewRef.current.template = \"\";\n\n\t\t\tif (state.widths[i] === w) return;\n\n\t\t\tconst next = [...state.widths];\n\t\t\tnext[i] = w;\n\t\t\tstate.widths = next;\n\t\t\tonResize?.(columns[i], w);\n\t\t},\n\t\t[columns, onResize, resizable, state, wrapRef],\n\t);\n\n\tconst handleHeaderClick = useCallback(\n\t\t(column?: IColumn, e?: MouseEvent) => {\n\t\t\tif (column?.sorter) {\n\t\t\t\tconst [sortBy, sortType] = getNextSorter(\n\t\t\t\t\tstate.sortBy,\n\t\t\t\t\tstate.sortType,\n\t\t\t\t\tcolumn.id,\n\t\t\t\t);\n\n\t\t\t\tObject.assign(state, {\n\t\t\t\t\tsortBy,\n\t\t\t\t\tsortType,\n\t\t\t\t});\n\n\t\t\t\tonSort?.(sortBy, sortType);\n\t\t\t}\n\n\t\t\tonHeaderClick?.(column, e);\n\t\t},\n\t\t[onHeaderClick, onSort, state],\n\t);\n\n\tconst rows = useMemo(() => {\n\t\tconst { sortBy, sortType } = state;\n\n\t\tif (sortBy && !onSort) {\n\t\t\tconst sorter = columns.find((col) => col.id === sortBy)?.sorter;\n\t\t\tconst sortFn =\n\t\t\t\ttypeof sorter === \"function\"\n\t\t\t\t\t? sorter\n\t\t\t\t\t: (a: IData, b: IData) => b[sortBy] - a[sortBy];\n\t\t\tconst sorted = [...data].sort(sortFn);\n\n\t\t\treturn sortType === \"desc\" ? sorted : sorted.reverse();\n\t\t}\n\n\t\treturn data;\n\t}, [data, columns, state.sortBy, state.sortType]);\n\n\tconst useVirtual = useMemo(() => {\n\t\tif (!virtual) return false;\n\t\tconst rowHeight = virtual.rowHeight;\n\t\treturn !!rowHeight && rowHeight > 0;\n\t}, [virtual]);\n\n\tuseEffect(() => {\n\t\tif (!resizable) return;\n\t\tif (!container.current) return;\n\t\tif (\n\t\t\t!columns.some(\n\t\t\t\t(col, i) =>\n\t\t\t\t\tcol.width == null && typeof state.widths[i] !== \"number\",\n\t\t\t)\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet rafId: number | null = null;\n\t\tlet tries = 0;\n\n\t\tconst run = () => {\n\t\t\trafId = null;\n\t\t\tconst div = container.current;\n\t\t\tif (!div) return;\n\n\t\t\tconst headerRow = div.querySelector(\n\t\t\t\t\".i-datagrid-header.i-datagrid-row\",\n\t\t\t) as HTMLElement | null;\n\t\t\tconst bodyRow = div.querySelector(\n\t\t\t\t\".i-datagrid-row:not(.i-datagrid-header)\",\n\t\t\t) as HTMLElement | null;\n\n\t\t\tconst headerCells = headerRow ? Array.from(headerRow.children) : [];\n\t\t\tconst bodyCells = bodyRow ? Array.from(bodyRow.children) : [];\n\n\t\t\tconst cellCount = Math.max(headerCells.length, bodyCells.length);\n\t\t\tif (cellCount < 1) {\n\t\t\t\ttries++;\n\t\t\t\tif (tries < 10) rafId = requestAnimationFrame(run);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst measured = new Array<number | null>(cellCount).fill(null);\n\t\t\tfor (let i = 0; i < cellCount; i++) {\n\t\t\t\tconst hw = (headerCells[i] as HTMLElement | undefined)\n\t\t\t\t\t?.offsetWidth;\n\t\t\t\tconst bw = (bodyCells[i] as HTMLElement | undefined)\n\t\t\t\t\t?.offsetWidth;\n\t\t\t\tconst w = Math.max(hw ?? 0, bw ?? 0);\n\t\t\t\tmeasured[i] = w > 0 ? w : null;\n\t\t\t}\n\n\t\t\tconst next = columns.map((col, i) => {\n\t\t\t\tif (col.width != null) return col.width;\n\t\t\t\tconst cur = state.widths[i];\n\t\t\t\tif (typeof cur === \"number\") return cur;\n\t\t\t\treturn measured[i] ?? cur ?? \"min-content\";\n\t\t\t});\n\n\t\t\tlet changed = next.length !== state.widths.length;\n\t\t\tif (!changed) {\n\t\t\t\tfor (let i = 0; i < next.length; i++) {\n\t\t\t\t\tif (next[i] !== state.widths[i]) {\n\t\t\t\t\t\tchanged = true;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (changed) state.widths = next;\n\t\t};\n\n\t\trafId = requestAnimationFrame(run);\n\t\treturn () => {\n\t\t\tif (rafId != null) cancelAnimationFrame(rafId);\n\t\t};\n\t}, [columns, resizable, state, useVirtual]);\n\n\tuseEffect(() => {\n\t\tif (!loading) return;\n\t\tif (useVirtual) return;\n\t\tcontainer.current?.scrollTo({ top: 0, left: 0 });\n\t}, [loading, useVirtual]);\n\n\tconst mergedStyle = useMemo(\n\t\t() =>\n\t\t\t({\n\t\t\t\t\"--cell-padding\": cellPadding,\n\t\t\t\t...styles,\n\t\t\t}) as CSSProperties,\n\t\t[cellPadding, styles],\n\t);\n\n\tconst getRowKey = useMemo(() => {\n\t\tif (typeof rowKey === \"function\") return rowKey;\n\t\tif (typeof rowKey === \"string\") {\n\t\t\treturn (row: IData) => row?.[rowKey] as Key;\n\t\t}\n\n\t\treturn (_row: IData, index: number) => index as Key;\n\t}, [rowKey]);\n\n\treturn (\n\t\t<div\n\t\t\tref={wrapRef}\n\t\t\tstyle={{\n\t\t\t\tmaxHeight: height,\n\t\t\t\t...(useVirtual\n\t\t\t\t\t? { overflowX: \"visible\", overflowY: \"hidden\" }\n\t\t\t\t\t: null),\n\t\t\t\t...mergedStyle,\n\t\t\t}}\n\t\t\tclassName={classNames(\"i-datagrid-container\", className, {\n\t\t\t\t\"i-datagrid-bordered\": border,\n\t\t\t\t\"i-datagrid-striped\": striped,\n\t\t\t})}\n\t\t>\n\t\t\t{useVirtual && virtual ? (\n\t\t\t\t<VirtualDatagrid\n\t\t\t\t\tvirtual={virtual}\n\t\t\t\t\tcolumns={columns}\n\t\t\t\t\trows={rows}\n\t\t\t\t\theader={header}\n\t\t\t\t\tsortBy={state.sortBy}\n\t\t\t\t\tsortType={state.sortType}\n\t\t\t\t\theight={height}\n\t\t\t\t\tloading={loading}\n\t\t\t\t\tresizable={resizable}\n\t\t\t\t\tstriped={striped}\n\t\t\t\t\tcellEllipsis={cellEllipsis}\n\t\t\t\t\tempty={empty}\n\t\t\t\t\twrapRef={wrapRef}\n\t\t\t\t\tcontainerRef={container}\n\t\t\t\t\tgetRowKey={getRowKey}\n\t\t\t\t\tonHeaderClick={handleHeaderClick}\n\t\t\t\t\tonWidthChange={handleWidthChange}\n\t\t\t\t\tonRowClick={onRowClick}\n\t\t\t\t\tonCellClick={onCellClick}\n\t\t\t\t\tonCellDoubleClick={onCellDoubleClick}\n\t\t\t\t\tonScroll={onScroll}\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<div\n\t\t\t\t\tref={container}\n\t\t\t\t\tclassName={classNames(\"i-datagrid\", {\n\t\t\t\t\t\t\"i-datagrid-loading\": loading,\n\t\t\t\t\t})}\n\t\t\t\t\tonWheel={onScroll}\n\t\t\t\t>\n\t\t\t\t\t{header && (\n\t\t\t\t\t\t<Header\n\t\t\t\t\t\t\tcolumns={columns}\n\t\t\t\t\t\t\tresizable={resizable}\n\t\t\t\t\t\t\tsortType={state.sortType}\n\t\t\t\t\t\t\tsortBy={state.sortBy}\n\t\t\t\t\t\t\tcellEllipsis={cellEllipsis}\n\t\t\t\t\t\t\tonWidthChange={handleWidthChange}\n\t\t\t\t\t\t\tonHeaderClick={handleHeaderClick}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{rows.map((row, i) => (\n\t\t\t\t\t\t<Row\n\t\t\t\t\t\t\tkey={getRowKey(row, i) ?? i}\n\t\t\t\t\t\t\trow={i + (header ? 1 : 0)}\n\t\t\t\t\t\t\tdata={row}\n\t\t\t\t\t\t\tcellEllipsis={cellEllipsis}\n\t\t\t\t\t\t\tcolumns={columns}\n\t\t\t\t\t\t\tonCellClick={onCellClick}\n\t\t\t\t\t\t\tonRowClick={onRowClick}\n\t\t\t\t\t\t\tonCellDoubleClick={onCellDoubleClick}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\n\t\t\t\t\t{rows.length < 1 && empty}\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{loading && renderLoading()}\n\t\t</div>\n\t);\n};\n\nexport default Datagrid;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"datagrid.js","sources":["../../../../packages/components/datagrid/datagrid.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport {\n CSSProperties,\n Key,\n MouseEvent,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n} from \"react\";\nimport { useReactive } from \"../../js/hooks\";\nimport { getNextSorter } from \"../../js/utils\";\nimport Loading from \"../loading\";\nimport Empty from \"../utils/empty\";\nimport {\n applyFixedInsets,\n buildCssWidths,\n buildGridTemplateColumns,\n} from \"./helper\";\nimport \"./index.css\";\nimport Row, { Header } from \"./row\";\nimport type { IColumn, IData, IDatagrid, TDatagridState } from \"./type\";\nimport VirtualDatagrid from \"./virtual\";\n\nconst Datagrid = (props: IDatagrid) => {\n const {\n data = [],\n columns = [],\n border,\n striped,\n header = true,\n resizable,\n cellPadding = \".5em\",\n cellEllipsis,\n empty = <Empty />,\n loading,\n height = \"unset\",\n style,\n className,\n rowKey,\n virtual,\n renderLoading = () => <Loading className=\"color-3\" absolute />,\n onCellClick,\n onRowClick,\n onCellDoubleClick,\n onHeaderClick,\n onSort,\n onScroll,\n onResize,\n } = props;\n\n const container = useRef<HTMLDivElement>(null);\n const wrapRef = useRef<HTMLDivElement>(null);\n\n const state = useReactive<TDatagridState>({\n rows: data,\n widths: columns.map((col) => col.width ?? \"min-content\"),\n sortBy: \"\",\n sortType: \"\",\n });\n const previewRef = useRef({ index: -1, width: -1, template: \"\" });\n\n useEffect(() => {\n const next = columns.map((col, i) => {\n if (col.width != null) return col.width;\n return state.widths[i] ?? \"min-content\";\n });\n\n let changed = next.length !== state.widths.length;\n if (!changed) {\n for (let i = 0; i < next.length; i++) {\n if (next[i] !== state.widths[i]) {\n changed = true;\n break;\n }\n }\n }\n\n if (changed) state.widths = next;\n }, [columns, state]);\n\n const styles = useMemo(() => {\n const { widths } = state;\n\n const o = {\n ...style,\n \"--grid-template-columns\": buildGridTemplateColumns(widths),\n };\n\n if (!resizable) return o;\n\n const cssWidths = buildCssWidths(widths);\n applyFixedInsets(\n (k, v) => {\n (o as any)[k] = v;\n },\n columns,\n cssWidths,\n );\n\n return o;\n }, [columns, resizable, state.widths, style]);\n\n const handleWidthChange = useCallback(\n (i: number, w: number, phase: \"preview\" | \"commit\" = \"commit\") => {\n if (!resizable) return;\n if (phase === \"preview\") {\n const el = wrapRef.current;\n if (!el) return;\n if (\n previewRef.current.index === i &&\n previewRef.current.width === w\n ) {\n return;\n }\n\n const template = buildGridTemplateColumns(state.widths, i, w);\n if (previewRef.current.template !== template) {\n el.style.setProperty(\"--grid-template-columns\", template);\n const cssWidths = buildCssWidths(state.widths, i, w);\n applyFixedInsets(\n (k, v) => el.style.setProperty(k, v),\n columns,\n cssWidths,\n );\n previewRef.current.template = template;\n }\n previewRef.current.index = i;\n previewRef.current.width = w;\n return;\n }\n\n previewRef.current.index = -1;\n previewRef.current.width = -1;\n previewRef.current.template = \"\";\n\n if (state.widths[i] === w) return;\n\n const next = [...state.widths];\n next[i] = w;\n state.widths = next;\n onResize?.(columns[i], w);\n },\n [columns, onResize, resizable, state, wrapRef],\n );\n\n const handleHeaderClick = useCallback(\n (column?: IColumn, e?: MouseEvent) => {\n if (column?.sorter) {\n const [sortBy, sortType] = getNextSorter(\n state.sortBy,\n state.sortType,\n column.id,\n );\n\n Object.assign(state, {\n sortBy,\n sortType,\n });\n\n onSort?.(sortBy, sortType);\n }\n\n onHeaderClick?.(column, e);\n },\n [onHeaderClick, onSort, state],\n );\n\n const rows = useMemo(() => {\n const { sortBy, sortType } = state;\n\n if (sortBy && !onSort) {\n const sorter = columns.find((col) => col.id === sortBy)?.sorter;\n const sortFn =\n typeof sorter === \"function\"\n ? sorter\n : (a: IData, b: IData) => b[sortBy] - a[sortBy];\n const sorted = [...data].sort(sortFn);\n\n return sortType === \"desc\" ? sorted : sorted.reverse();\n }\n\n return data;\n }, [data, columns, state.sortBy, state.sortType]);\n\n const useVirtual = useMemo(() => {\n if (!virtual) return false;\n const rowHeight = virtual.rowHeight;\n return !!rowHeight && rowHeight > 0;\n }, [virtual]);\n\n useEffect(() => {\n if (!resizable) return;\n if (!container.current) return;\n if (\n !columns.some(\n (col, i) =>\n col.width == null && typeof state.widths[i] !== \"number\",\n )\n ) {\n return;\n }\n\n let rafId: number | null = null;\n let tries = 0;\n\n const run = () => {\n rafId = null;\n const div = container.current;\n if (!div) return;\n\n const headerRow = div.querySelector(\n \".i-datagrid-header.i-datagrid-row\",\n ) as HTMLElement | null;\n const bodyRow = div.querySelector(\n \".i-datagrid-row:not(.i-datagrid-header)\",\n ) as HTMLElement | null;\n\n const headerCells = headerRow ? Array.from(headerRow.children) : [];\n const bodyCells = bodyRow ? Array.from(bodyRow.children) : [];\n\n const cellCount = Math.max(headerCells.length, bodyCells.length);\n if (cellCount < 1) {\n tries++;\n if (tries < 10) rafId = requestAnimationFrame(run);\n return;\n }\n\n const measured = new Array<number | null>(cellCount).fill(null);\n for (let i = 0; i < cellCount; i++) {\n const hw = (headerCells[i] as HTMLElement | undefined)\n ?.offsetWidth;\n const bw = (bodyCells[i] as HTMLElement | undefined)\n ?.offsetWidth;\n const w = Math.max(hw ?? 0, bw ?? 0);\n measured[i] = w > 0 ? w : null;\n }\n\n const next = columns.map((col, i) => {\n if (col.width != null) return col.width;\n const cur = state.widths[i];\n if (typeof cur === \"number\") return cur;\n return measured[i] ?? cur ?? \"min-content\";\n });\n\n let changed = next.length !== state.widths.length;\n if (!changed) {\n for (let i = 0; i < next.length; i++) {\n if (next[i] !== state.widths[i]) {\n changed = true;\n break;\n }\n }\n }\n if (changed) state.widths = next;\n };\n\n rafId = requestAnimationFrame(run);\n return () => {\n if (rafId != null) cancelAnimationFrame(rafId);\n };\n }, [columns, resizable, state, useVirtual]);\n\n useEffect(() => {\n if (!loading) return;\n if (useVirtual) return;\n container.current?.scrollTo({ top: 0, left: 0 });\n }, [loading, useVirtual]);\n\n const mergedStyle = useMemo(\n () =>\n ({\n \"--cell-padding\": cellPadding,\n ...styles,\n }) as CSSProperties,\n [cellPadding, styles],\n );\n\n const getRowKey = useMemo(() => {\n if (typeof rowKey === \"function\") return rowKey;\n if (typeof rowKey === \"string\") {\n return (row: IData) => row?.[rowKey] as Key;\n }\n\n return (_row: IData, index: number) => index as Key;\n }, [rowKey]);\n\n return (\n <div\n ref={wrapRef}\n style={{\n maxHeight: height,\n ...(useVirtual\n ? { overflowX: \"visible\", overflowY: \"hidden\" }\n : null),\n ...mergedStyle,\n }}\n className={classNames(\"i-datagrid-container\", className, {\n \"i-datagrid-bordered\": border,\n \"i-datagrid-striped\": striped,\n })}\n >\n {useVirtual && virtual ? (\n <VirtualDatagrid\n virtual={virtual}\n columns={columns}\n rows={rows}\n header={header}\n sortBy={state.sortBy}\n sortType={state.sortType}\n height={height}\n loading={loading}\n resizable={resizable}\n striped={striped}\n cellEllipsis={cellEllipsis}\n empty={empty}\n wrapRef={wrapRef}\n containerRef={container}\n getRowKey={getRowKey}\n onHeaderClick={handleHeaderClick}\n onWidthChange={handleWidthChange}\n onRowClick={onRowClick}\n onCellClick={onCellClick}\n onCellDoubleClick={onCellDoubleClick}\n onScroll={onScroll}\n />\n ) : (\n <div\n ref={container}\n className={classNames(\"i-datagrid\", {\n \"i-datagrid-loading\": loading,\n })}\n onWheel={onScroll}\n >\n {header && (\n <Header\n columns={columns}\n resizable={resizable}\n sortType={state.sortType}\n sortBy={state.sortBy}\n cellEllipsis={cellEllipsis}\n onWidthChange={handleWidthChange}\n onHeaderClick={handleHeaderClick}\n />\n )}\n\n {rows.map((row, i) => (\n <Row\n key={getRowKey(row, i) ?? i}\n row={i + (header ? 1 : 0)}\n data={row}\n cellEllipsis={cellEllipsis}\n columns={columns}\n onCellClick={onCellClick}\n onRowClick={onRowClick}\n onCellDoubleClick={onCellDoubleClick}\n />\n ))}\n\n {rows.length < 1 && empty}\n </div>\n )}\n\n {loading && renderLoading()}\n </div>\n );\n};\n\nexport default Datagrid;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
@@ -57,9 +57,12 @@ function Drawer(props) {
|
|
|
57
57
|
});
|
|
58
58
|
if (!state.show)
|
|
59
59
|
return null;
|
|
60
|
+
const container = typeof document === "undefined" ? null : document.body;
|
|
61
|
+
if (!container)
|
|
62
|
+
return null;
|
|
60
63
|
return createPortal(jsx("div", { className: classNames("i-backdrop-drawer", className, {
|
|
61
64
|
"i-active": state.active,
|
|
62
|
-
}), onClick: handleBackdropClick, ...restProps, children: jsxs("div", { className: classNames("i-drawer", `i-drawer-${position}`), onClick: (e) => e.stopPropagation(), children: [header && (jsxs("header", { className: 'i-drawer-header', children: [header, !hideCloseButton && (jsx(Helpericon, { className: 'i-drawer-close', onClick: handleHide }))] })), jsx("div", { className: 'i-drawer-content', children: children }), footer && jsx("div", { className: 'i-drawer-footer', children: footer })] }) }),
|
|
65
|
+
}), onClick: handleBackdropClick, ...restProps, children: jsxs("div", { className: classNames("i-drawer", `i-drawer-${position}`), onClick: (e) => e.stopPropagation(), children: [header && (jsxs("header", { className: 'i-drawer-header', children: [header, !hideCloseButton && (jsx(Helpericon, { className: 'i-drawer-close', onClick: handleHide }))] })), jsx("div", { className: 'i-drawer-content', children: children }), footer && jsx("div", { className: 'i-drawer-footer', children: footer })] }) }), container);
|
|
63
66
|
}
|
|
64
67
|
|
|
65
68
|
export { Drawer as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drawer.js","sources":["../../../../packages/components/drawer/drawer.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { useEffect, useRef, useTransition } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useKeydown, useReactive } from \"../../js/hooks\";\nimport Helpericon from \"../utils/helpericon\";\nimport \"./index.css\";\nimport { IDrawer } from \"./type\";\n\nfunction Drawer(props: IDrawer) {\n\tconst {\n\t\tvisible,\n\t\tposition = \"left\",\n\t\theader,\n\t\tfooter,\n\t\tbackdropClosable = true,\n\t\thideCloseButton,\n\t\tkeepDOM,\n\t\tclassName,\n\t\tdisabledEsc,\n\t\tchildren,\n\t\tonVisibleChange,\n\t\tonClose,\n\t\t...restProps\n\t} = props;\n\n\tconst toggable = useRef(true);\n\tconst state = useReactive({\n\t\tshow: visible,\n\t\tactive: visible,\n\t});\n\tconst [isPending, startTransition] = useTransition();\n\n\tconst handleHide = () => {\n\t\tif (!toggable.current || isPending) return;\n\t\ttoggable.current = false;\n\n\t\tstartTransition(() => {\n\t\t\tstate.active = false;\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tif (!keepDOM) {\n\t\t\t\t\tstate.show = false;\n\t\t\t\t}\n\t\t\t\tonVisibleChange?.(false);\n\t\t\t\ttoggable.current = true;\n\t\t\t\tonClose?.();\n\t\t\t}, 240);\n\t\t});\n\t};\n\n\tconst handleShow = () => {\n\t\tif (!toggable.current || isPending) return;\n\n\t\tstate.show = true;\n\t\tonVisibleChange?.(true);\n\t\ttoggable.current = false;\n\n\t\tstartTransition(() => {\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tstate.active = true;\n\t\t\t\ttoggable.current = true;\n\t\t\t});\n\t\t});\n\t};\n\n\tuseEffect(() => {\n\t\tvisible ? handleShow() : handleHide();\n\t}, [visible]);\n\n\tconst handleBackdropClick = () => {\n\t\tbackdropClosable && handleHide();\n\t};\n\n\tuseKeydown(\n\t\t(e) => {\n\t\t\tif (e.code !== \"Escape\" || !visible) return;\n\t\t\thandleHide();\n\t\t},\n\t\t{\n\t\t\tdisabled: disabledEsc,\n\t\t}\n\t);\n\n\tif (!state.show) return null;\n\n\treturn createPortal(\n\t\t<div\n\t\t\tclassName={classNames(\"i-backdrop-drawer\", className, {\n\t\t\t\t\"i-active\": state.active,\n\t\t\t})}\n\t\t\tonClick={handleBackdropClick}\n\t\t\t{...restProps}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={classNames(\"i-drawer\", `i-drawer-${position}`)}\n\t\t\t\tonClick={(e) => e.stopPropagation()}\n\t\t\t>\n\t\t\t\t{header && (\n\t\t\t\t\t<header className='i-drawer-header'>\n\t\t\t\t\t\t{header}\n\n\t\t\t\t\t\t{!hideCloseButton && (\n\t\t\t\t\t\t\t<Helpericon\n\t\t\t\t\t\t\t\tclassName='i-drawer-close'\n\t\t\t\t\t\t\t\tonClick={handleHide}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</header>\n\t\t\t\t)}\n\n\t\t\t\t<div className='i-drawer-content'>{children}</div>\n\n\t\t\t\t{footer && <div className='i-drawer-footer'>{footer}</div>}\n\t\t\t</div>\n\t\t</div>,\n\t\
|
|
1
|
+
{"version":3,"file":"drawer.js","sources":["../../../../packages/components/drawer/drawer.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { useEffect, useRef, useTransition } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useKeydown, useReactive } from \"../../js/hooks\";\nimport Helpericon from \"../utils/helpericon\";\nimport \"./index.css\";\nimport { IDrawer } from \"./type\";\n\nfunction Drawer(props: IDrawer) {\n\tconst {\n\t\tvisible,\n\t\tposition = \"left\",\n\t\theader,\n\t\tfooter,\n\t\tbackdropClosable = true,\n\t\thideCloseButton,\n\t\tkeepDOM,\n\t\tclassName,\n\t\tdisabledEsc,\n\t\tchildren,\n\t\tonVisibleChange,\n\t\tonClose,\n\t\t...restProps\n\t} = props;\n\n\tconst toggable = useRef(true);\n\tconst state = useReactive({\n\t\tshow: visible,\n\t\tactive: visible,\n\t});\n\tconst [isPending, startTransition] = useTransition();\n\n\tconst handleHide = () => {\n\t\tif (!toggable.current || isPending) return;\n\t\ttoggable.current = false;\n\n\t\tstartTransition(() => {\n\t\t\tstate.active = false;\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tif (!keepDOM) {\n\t\t\t\t\tstate.show = false;\n\t\t\t\t}\n\t\t\t\tonVisibleChange?.(false);\n\t\t\t\ttoggable.current = true;\n\t\t\t\tonClose?.();\n\t\t\t}, 240);\n\t\t});\n\t};\n\n\tconst handleShow = () => {\n\t\tif (!toggable.current || isPending) return;\n\n\t\tstate.show = true;\n\t\tonVisibleChange?.(true);\n\t\ttoggable.current = false;\n\n\t\tstartTransition(() => {\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tstate.active = true;\n\t\t\t\ttoggable.current = true;\n\t\t\t});\n\t\t});\n\t};\n\n\tuseEffect(() => {\n\t\tvisible ? handleShow() : handleHide();\n\t}, [visible]);\n\n\tconst handleBackdropClick = () => {\n\t\tbackdropClosable && handleHide();\n\t};\n\n\tuseKeydown(\n\t\t(e) => {\n\t\t\tif (e.code !== \"Escape\" || !visible) return;\n\t\t\thandleHide();\n\t\t},\n\t\t{\n\t\t\tdisabled: disabledEsc,\n\t\t}\n\t);\n\n\tif (!state.show) return null;\n\n\tconst container =\n\t\ttypeof document === \"undefined\" ? null : document.body;\n\tif (!container) return null;\n\n\treturn createPortal(\n\t\t<div\n\t\t\tclassName={classNames(\"i-backdrop-drawer\", className, {\n\t\t\t\t\"i-active\": state.active,\n\t\t\t})}\n\t\t\tonClick={handleBackdropClick}\n\t\t\t{...restProps}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={classNames(\"i-drawer\", `i-drawer-${position}`)}\n\t\t\t\tonClick={(e) => e.stopPropagation()}\n\t\t\t>\n\t\t\t\t{header && (\n\t\t\t\t\t<header className='i-drawer-header'>\n\t\t\t\t\t\t{header}\n\n\t\t\t\t\t\t{!hideCloseButton && (\n\t\t\t\t\t\t\t<Helpericon\n\t\t\t\t\t\t\t\tclassName='i-drawer-close'\n\t\t\t\t\t\t\t\tonClick={handleHide}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</header>\n\t\t\t\t)}\n\n\t\t\t\t<div className='i-drawer-content'>{children}</div>\n\n\t\t\t\t{footer && <div className='i-drawer-footer'>{footer}</div>}\n\t\t\t</div>\n\t\t</div>,\n\t\tcontainer\n\t);\n}\n\nexport default Drawer;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
@@ -40,10 +40,10 @@ function Field(props) {
|
|
|
40
40
|
useEffect(() => {
|
|
41
41
|
if (!name)
|
|
42
42
|
return;
|
|
43
|
-
PubSub.subscribe(`${id}:set:${name}`, (
|
|
43
|
+
PubSub.subscribe(`${id}:set:${name}`, (_evt, v) => {
|
|
44
44
|
setFieldValue(v);
|
|
45
45
|
});
|
|
46
|
-
PubSub.subscribe(`${id}:invalid:${name}`, (
|
|
46
|
+
PubSub.subscribe(`${id}:invalid:${name}`, (_evt, v) => {
|
|
47
47
|
if (v?.value !== undefined)
|
|
48
48
|
setFieldValue(v.value);
|
|
49
49
|
if (v?.status)
|
|
@@ -52,14 +52,18 @@ function Field(props) {
|
|
|
52
52
|
setFieldMessage(v.message);
|
|
53
53
|
});
|
|
54
54
|
Promise.resolve().then(() => {
|
|
55
|
-
|
|
55
|
+
if (name in form.cacheData) {
|
|
56
|
+
form.set(name, form.cacheData[name]);
|
|
57
|
+
}
|
|
56
58
|
});
|
|
57
59
|
return () => {
|
|
58
60
|
PubSub.unsubscribe(`${id}:set:${name}`);
|
|
59
61
|
PubSub.unsubscribe(`${id}:invalid:${name}`);
|
|
60
|
-
|
|
62
|
+
if (name && !name.includes(".")) {
|
|
63
|
+
form.data[name] = undefined;
|
|
64
|
+
}
|
|
61
65
|
};
|
|
62
|
-
}, [name
|
|
66
|
+
}, [name]);
|
|
63
67
|
if (!name)
|
|
64
68
|
return children;
|
|
65
69
|
return hijackChildren;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field.js","sources":["../../../../packages/components/form/field.tsx"],"sourcesContent":["import PubSub from \"pubsub-js\";\nimport {\n\tChildren,\n\tcloneElement,\n\tisValidElement,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseState,\n} from \"react\";\nimport Context from \"./context\";\nimport { IField } from \"./type\";\n\nfunction Field(props: IField) {\n\tconst { name, required, children } = props;\n\tconst [fieldValue, setFieldValue] = useState<any>(undefined);\n\tconst [fieldStatus, setFieldStatus] = useState(\"normal\");\n\tconst [fieldMessage, setFieldMessage] = useState<any>(undefined);\n\tconst form = useContext(Context);\n\tconst { id } = form;\n\n\tconst handleChange = (v) => {\n\t\tif (!name) return;\n\n\t\tform.set(name, v);\n\t\tPubSub.publish(`${id}:change`, {\n\t\t\tname,\n\t\t\tvalue: v,\n\t\t});\n\t};\n\n\tconst hijackChildren = useMemo(() => {\n\t\treturn Children.map(children, (node) => {\n\t\t\tif (!isValidElement(node)) return null;\n\n\t\t\tconst { onChange } = node.props as any;\n\n\t\t\treturn cloneElement(node, {\n\t\t\t\tvalue: fieldValue,\n\t\t\t\tstatus: fieldStatus,\n\t\t\t\tmessage: fieldMessage,\n\t\t\t\trequired,\n\t\t\t\tonChange: (...args) => {\n\t\t\t\t\thandleChange(args[0]);\n\t\t\t\t\tonChange?.(...args);\n\t\t\t\t\tsetFieldStatus(\"normal\");\n\t\t\t\t\tsetFieldMessage(undefined);\n\t\t\t\t},\n\t\t\t} as any);\n\t\t});\n\t}, [children, fieldValue, fieldStatus, fieldMessage, required]);\n\n\tuseEffect(() => {\n\t\tif (!name) return;\n\n\t\tPubSub.subscribe(`${id}:set:${name}`, (
|
|
1
|
+
{"version":3,"file":"field.js","sources":["../../../../packages/components/form/field.tsx"],"sourcesContent":["import PubSub from \"pubsub-js\";\nimport {\n\tChildren,\n\tcloneElement,\n\tisValidElement,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseState,\n} from \"react\";\nimport Context from \"./context\";\nimport { IField } from \"./type\";\n\nfunction Field(props: IField) {\n\tconst { name, required, children } = props;\n\tconst [fieldValue, setFieldValue] = useState<any>(undefined);\n\tconst [fieldStatus, setFieldStatus] = useState(\"normal\");\n\tconst [fieldMessage, setFieldMessage] = useState<any>(undefined);\n\tconst form = useContext(Context);\n\tconst { id } = form;\n\n\tconst handleChange = (v) => {\n\t\tif (!name) return;\n\n\t\tform.set(name, v);\n\t\tPubSub.publish(`${id}:change`, {\n\t\t\tname,\n\t\t\tvalue: v,\n\t\t});\n\t};\n\n\tconst hijackChildren = useMemo(() => {\n\t\treturn Children.map(children, (node) => {\n\t\t\tif (!isValidElement(node)) return null;\n\n\t\t\tconst { onChange } = node.props as any;\n\n\t\t\treturn cloneElement(node, {\n\t\t\t\tvalue: fieldValue,\n\t\t\t\tstatus: fieldStatus,\n\t\t\t\tmessage: fieldMessage,\n\t\t\t\trequired,\n\t\t\t\tonChange: (...args) => {\n\t\t\t\t\thandleChange(args[0]);\n\t\t\t\t\tonChange?.(...args);\n\t\t\t\t\tsetFieldStatus(\"normal\");\n\t\t\t\t\tsetFieldMessage(undefined);\n\t\t\t\t},\n\t\t\t} as any);\n\t\t});\n\t}, [children, fieldValue, fieldStatus, fieldMessage, required]);\n\n\tuseEffect(() => {\n\t\tif (!name) return;\n\n\t\tPubSub.subscribe(`${id}:set:${name}`, (_evt, v) => {\n\t\t\tsetFieldValue(v);\n\t\t});\n\t\tPubSub.subscribe(`${id}:invalid:${name}`, (_evt, v) => {\n\t\t\tif (v?.value !== undefined) setFieldValue(v.value);\n\t\t\tif (v?.status) setFieldStatus(v.status);\n\t\t\tif (\"message\" in (v ?? {})) setFieldMessage(v.message);\n\t\t});\n\n\t\tPromise.resolve().then(() => {\n\t\t\tif (name in form.cacheData) {\n\t\t\t\tform.set(name, form.cacheData[name]);\n\t\t\t}\n\t\t});\n\n\t\treturn () => {\n\t\t\tPubSub.unsubscribe(`${id}:set:${name}`);\n\t\t\tPubSub.unsubscribe(`${id}:invalid:${name}`);\n\t\t\tif (name && !name.includes(\".\")) {\n\t\t\t\tform.data[name] = undefined;\n\t\t\t}\n\t\t};\n\t}, [name]);\n\n\tif (!name) return children;\n\n\treturn hijackChildren;\n}\n\nexport default Field;\n"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
import PubSub from 'pubsub-js';
|
|
4
|
-
import {
|
|
4
|
+
import { crush } from 'radash';
|
|
5
|
+
import { useMemo, useRef, useEffect } from 'react';
|
|
5
6
|
import Context from './context.js';
|
|
6
7
|
import Field from './field.js';
|
|
7
8
|
import useConfig from './useConfig.js';
|
|
@@ -26,20 +27,27 @@ const Form = (props) => {
|
|
|
26
27
|
}
|
|
27
28
|
return columns;
|
|
28
29
|
}, [columns]);
|
|
30
|
+
const initialAppliedRef = useRef(false);
|
|
29
31
|
useEffect(() => {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
32
|
+
if (!initialAppliedRef.current && initialValues) {
|
|
33
|
+
const flat = crush(initialValues);
|
|
34
|
+
Object.keys(flat).forEach((key) => {
|
|
35
|
+
form.set(key, flat[key]);
|
|
36
|
+
});
|
|
37
|
+
initialAppliedRef.current = true;
|
|
38
|
+
}
|
|
39
|
+
if (rules) {
|
|
40
|
+
form.rules = rules;
|
|
41
|
+
}
|
|
42
|
+
}, [initialValues, rules, form]);
|
|
35
43
|
useEffect(() => {
|
|
36
|
-
PubSub.subscribe(`${form.id}:change`, (
|
|
44
|
+
const token = PubSub.subscribe(`${form.id}:change`, (_evt, v) => {
|
|
37
45
|
onChange?.(v.name, v.value);
|
|
38
46
|
});
|
|
39
47
|
return () => {
|
|
40
|
-
PubSub.unsubscribe(
|
|
48
|
+
PubSub.unsubscribe(token);
|
|
41
49
|
};
|
|
42
|
-
}, []);
|
|
50
|
+
}, [form.id, onChange]);
|
|
43
51
|
return (jsx(Context, { value: form, children: jsx("form", { style: {
|
|
44
52
|
...style,
|
|
45
53
|
width,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form.js","sources":["../../../../packages/components/form/form.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport PubSub from \"pubsub-js\";\nimport { CSSProperties, useEffect, useMemo } from \"react\";\nimport Context from \"./context\";\nimport Field from \"./field\";\nimport \"./index.css\";\nimport { IForm } from \"./type\";\nimport useConfig from \"./useConfig\";\nimport useForm, { IFormInstance } from \"./useForm\";\n\nconst Form = (props: IForm) => {\n\tconst {\n\t\tform = {} as IFormInstance,\n\t\trules,\n\t\tinitialValues,\n\t\tstyle,\n\t\tclassName,\n\t\twidth,\n\t\tcolumns,\n\t\titemMaxWidth,\n\t\tgap = \"1em\",\n\t\tlabelInline,\n\t\tlabelWidth,\n\t\tlabelRight,\n\t\tchildren,\n\t\tonKeyDown,\n\t\tonEnter,\n\t\tonChange,\n\t\t...restProps\n\t} = props;\n\n\tconst handleKeyDown = (e) => {\n\t\tonKeyDown?.(e);\n\n\t\tif (e.keyCode !== 13) return;\n\n\t\tonEnter?.(e, form.data, form);\n\t};\n\n\tconst gridColumns = useMemo(() => {\n\t\tif (!columns && !itemMaxWidth) return;\n\n\t\tif (itemMaxWidth) {\n\t\t\treturn `repeat(auto-fill, minmax(${itemMaxWidth}, 1fr))`;\n\t\t}\n\n\t\tif (typeof columns === \"number\") {\n\t\t\treturn `minmax(0, 1fr) `.repeat(columns);\n\t\t}\n\n\t\treturn columns;\n\t}, [columns]);\n\n\tuseEffect(() => {\n\t\
|
|
1
|
+
{"version":3,"file":"form.js","sources":["../../../../packages/components/form/form.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport PubSub from \"pubsub-js\";\nimport { crush } from \"radash\";\nimport { CSSProperties, useEffect, useMemo, useRef } from \"react\";\nimport Context from \"./context\";\nimport Field from \"./field\";\nimport \"./index.css\";\nimport { IForm } from \"./type\";\nimport useConfig from \"./useConfig\";\nimport useForm, { IFormInstance } from \"./useForm\";\n\nconst Form = (props: IForm) => {\n\tconst {\n\t\tform = {} as IFormInstance,\n\t\trules,\n\t\tinitialValues,\n\t\tstyle,\n\t\tclassName,\n\t\twidth,\n\t\tcolumns,\n\t\titemMaxWidth,\n\t\tgap = \"1em\",\n\t\tlabelInline,\n\t\tlabelWidth,\n\t\tlabelRight,\n\t\tchildren,\n\t\tonKeyDown,\n\t\tonEnter,\n\t\tonChange,\n\t\t...restProps\n\t} = props;\n\n\tconst handleKeyDown = (e) => {\n\t\tonKeyDown?.(e);\n\n\t\tif (e.keyCode !== 13) return;\n\n\t\tonEnter?.(e, form.data, form);\n\t};\n\n\tconst gridColumns = useMemo(() => {\n\t\tif (!columns && !itemMaxWidth) return;\n\n\t\tif (itemMaxWidth) {\n\t\t\treturn `repeat(auto-fill, minmax(${itemMaxWidth}, 1fr))`;\n\t\t}\n\n\t\tif (typeof columns === \"number\") {\n\t\t\treturn `minmax(0, 1fr) `.repeat(columns);\n\t\t}\n\n\t\treturn columns;\n\t}, [columns]);\n\n\tconst initialAppliedRef = useRef(false);\n\n\tuseEffect(() => {\n\t\tif (!initialAppliedRef.current && initialValues) {\n\t\t\tconst flat = crush(initialValues);\n\t\t\tObject.keys(flat).forEach((key) => {\n\t\t\t\tform.set(key, flat[key]);\n\t\t\t});\n\t\t\tinitialAppliedRef.current = true;\n\t\t}\n\n\t\tif (rules) {\n\t\t\tform.rules = rules;\n\t\t}\n\t}, [initialValues, rules, form]);\n\n\tuseEffect(() => {\n\t\tconst token = PubSub.subscribe(`${form.id}:change`, (_evt, v) => {\n\t\t\tonChange?.(v.name, v.value);\n\t\t});\n\n\t\treturn () => {\n\t\t\tPubSub.unsubscribe(token);\n\t\t};\n\t}, [form.id, onChange]);\n\n\treturn (\n\t\t<Context value={form}>\n\t\t\t<form\n\t\t\t\tstyle={\n\t\t\t\t\t{\n\t\t\t\t\t\t...style,\n\t\t\t\t\t\twidth,\n\t\t\t\t\t\tgap,\n\t\t\t\t\t\tgridTemplateColumns: gridColumns as any,\n\t\t\t\t\t\t\"--label-width\": labelWidth,\n\t\t\t\t\t\t\"--label-align\": labelRight ? \"right\" : undefined,\n\t\t\t\t\t} as CSSProperties\n\t\t\t\t}\n\t\t\t\tclassName={classNames(\"i-form\", className, {\n\t\t\t\t\t\"i-form-inline\": labelInline,\n\t\t\t\t})}\n\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t{...restProps}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</form>\n\t\t</Context>\n\t);\n};\n\nForm.useForm = useForm;\nForm.Field = Field;\nForm.useConfig = useConfig;\n\nexport default Form;\n"],"names":["_jsx"],"mappings":"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"}
|
|
@@ -14,7 +14,7 @@ function useConfig(configs, formProps) {
|
|
|
14
14
|
};
|
|
15
15
|
const node = useMemo(() => {
|
|
16
16
|
return (jsx(Form, { ...formProps, onChange: handleChange, form: form, children: configs.map((config) => {
|
|
17
|
-
const { name, label, required, component: El, componentProps = {}, colspan = 1, render,
|
|
17
|
+
const { name, label, required, component: El, componentProps = {}, colspan = 1, render, shouldRender, } = config;
|
|
18
18
|
const { className, style } = componentProps;
|
|
19
19
|
if (shouldRender && !shouldRender(values, form)) {
|
|
20
20
|
return jsx(Fragment, {}, name);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useConfig.js","sources":["../../../../packages/components/form/useConfig.tsx"],"sourcesContent":["import { Fragment, useMemo, useState } from \"react\";\nimport Field from \"./field\";\nimport Form from \"./form\";\nimport { IForm, IFormItem } from \"./type\";\nimport useForm from \"./useForm\";\n\nexport default function useConfig(configs: IFormItem[], formProps?: IForm) {\n\tconst form = useForm();\n\tconst { onChange } = formProps ?? {};\n\tconst [values, setValues] = useState({});\n\n\tconst handleChange = (name, value) => {\n\t\tsetValues(() => ({ ...form.get() }));\n\t\tonChange?.(name, value);\n\t};\n\n\tconst node = useMemo(() => {\n\t\treturn (\n\t\t\t<Form {...formProps} onChange={handleChange} form={form}>\n\t\t\t\t{configs.map((config) => {\n\t\t\t\t\tconst {\n\t\t\t\t\t\tname,\n\t\t\t\t\t\tlabel,\n\t\t\t\t\t\trequired,\n\t\t\t\t\t\tcomponent: El,\n\t\t\t\t\t\tcomponentProps = {},\n\t\t\t\t\t\tcolspan = 1,\n\t\t\t\t\t\trender,\n\t\t\t\t\t\
|
|
1
|
+
{"version":3,"file":"useConfig.js","sources":["../../../../packages/components/form/useConfig.tsx"],"sourcesContent":["import { Fragment, useMemo, useState } from \"react\";\nimport Field from \"./field\";\nimport Form from \"./form\";\nimport { IForm, IFormItem } from \"./type\";\nimport useForm from \"./useForm\";\n\nexport default function useConfig(configs: IFormItem[], formProps?: IForm) {\n\tconst form = useForm();\n\tconst { onChange } = formProps ?? {};\n\tconst [values, setValues] = useState({});\n\n\tconst handleChange = (name, value) => {\n\t\tsetValues(() => ({ ...form.get() }));\n\t\tonChange?.(name, value);\n\t};\n\n\tconst node = useMemo(() => {\n\t\treturn (\n\t\t\t<Form {...formProps} onChange={handleChange} form={form}>\n\t\t\t\t{configs.map((config) => {\n\t\t\t\t\tconst {\n\t\t\t\t\t\tname,\n\t\t\t\t\t\tlabel,\n\t\t\t\t\t\trequired,\n\t\t\t\t\t\tcomponent: El,\n\t\t\t\t\t\tcomponentProps = {},\n\t\t\t\t\t\tcolspan = 1,\n\t\t\t\t\t\trender,\n\t\t\t\t\t\tshouldRender,\n\t\t\t\t\t} = config;\n\t\t\t\t\tconst { className, style } = componentProps;\n\n\t\t\t\t\tif (shouldRender && !shouldRender(values, form)) {\n\t\t\t\t\t\treturn <Fragment key={name} />;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Field key={name} name={name} required={required}>\n\t\t\t\t\t\t\t{render?.(config, values) ?? (\n\t\t\t\t\t\t\t\t<El\n\t\t\t\t\t\t\t\t\tlabel={label}\n\t\t\t\t\t\t\t\t\trequired={required}\n\t\t\t\t\t\t\t\t\t{...componentProps}\n\t\t\t\t\t\t\t\t\tclassName={`${className ?? \"\"} ${\n\t\t\t\t\t\t\t\t\t\tcolspan !== 1\n\t\t\t\t\t\t\t\t\t\t\t? `colspan-${colspan}`\n\t\t\t\t\t\t\t\t\t\t\t: \"\"\n\t\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</Field>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</Form>\n\t\t);\n\t}, [configs, values]);\n\n\treturn {\n\t\tform,\n\t\tnode,\n\t};\n}\n"],"names":["_jsx"],"mappings":";;;;;;AAMc,SAAU,SAAS,CAAC,OAAoB,EAAE,SAAiB,EAAA;AACxE,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;AACtB,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,IAAI,EAAE;IACpC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC;AAExC,IAAA,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,KAAK,KAAI;AACpC,QAAA,SAAS,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;AACpC,QAAA,QAAQ,GAAG,IAAI,EAAE,KAAK,CAAC;AACxB,IAAA,CAAC;AAED,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,MAAK;QACzB,QACCA,IAAC,IAAI,EAAA,EAAA,GAAK,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,YACrD,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI;gBACvB,MAAM,EACL,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,SAAS,EAAE,EAAE,EACb,cAAc,GAAG,EAAE,EACnB,OAAO,GAAG,CAAC,EACX,MAAM,EACN,YAAY,GACZ,GAAG,MAAM;AACV,gBAAA,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,cAAc;gBAE3C,IAAI,YAAY,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE;AAChD,oBAAA,OAAOA,GAAA,CAAC,QAAQ,EAAA,EAAA,EAAM,IAAI,CAAI;gBAC/B;AAEA,gBAAA,QACCA,GAAA,CAAC,KAAK,IAAY,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAA,QAAA,EAC9C,MAAM,GAAG,MAAM,EAAE,MAAM,CAAC,KACxBA,IAAC,EAAE,EAAA,EACF,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAAA,GACd,cAAc,EAClB,SAAS,EAAE,GAAG,SAAS,IAAI,EAAE,CAAA,CAAA,EAC5B,OAAO,KAAK;8BACT,CAAA,QAAA,EAAW,OAAO,CAAA;8BAClB,EACJ,CAAA,CAAE,EAAA,CACD,CACF,EAAA,EAZU,IAAI,CAaR;YAEV,CAAC,CAAC,EAAA,CACI;AAET,IAAA,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAErB,OAAO;QACN,IAAI;QACJ,IAAI;KACJ;AACF;;;;"}
|
|
@@ -1,109 +1,94 @@
|
|
|
1
1
|
import PubSub from 'pubsub-js';
|
|
2
2
|
import { uid } from 'radash';
|
|
3
3
|
import { useRef } from 'react';
|
|
4
|
+
import { getDeep, setDeep, deleteDeep } from './utils.js';
|
|
4
5
|
|
|
5
6
|
class IFormInstance {
|
|
6
7
|
id;
|
|
7
8
|
data = {};
|
|
8
9
|
cacheData = {};
|
|
9
|
-
rules
|
|
10
|
+
rules;
|
|
10
11
|
constructor() {
|
|
11
12
|
this.id = uid(8);
|
|
12
13
|
this.data = {};
|
|
13
14
|
}
|
|
14
15
|
get(field) {
|
|
15
|
-
return field ? this.data
|
|
16
|
+
return field ? getDeep(this.data, field) : this.data;
|
|
16
17
|
}
|
|
17
18
|
set(field, value) {
|
|
18
19
|
const id = this.id;
|
|
19
20
|
if (!this.data)
|
|
20
21
|
return;
|
|
21
22
|
if (typeof field === "string") {
|
|
22
|
-
|
|
23
|
+
if (field.includes(".")) {
|
|
24
|
+
const parts = field.split(".");
|
|
25
|
+
for (let i = 1; i < parts.length; i++) {
|
|
26
|
+
const ancestor = parts.slice(0, i).join(".");
|
|
27
|
+
if (ancestor in this.data) {
|
|
28
|
+
console.warn(`[ioca-form] Field "${field}" conflicts with "${ancestor}". ` +
|
|
29
|
+
"Nested representation in form.get() may be inconsistent.");
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
setDeep(this.data, field, value);
|
|
33
|
+
}
|
|
34
|
+
else {
|
|
35
|
+
this.data[field] = value;
|
|
36
|
+
}
|
|
23
37
|
this.cacheData[field] = value;
|
|
24
38
|
PubSub.publish(`${id}:set:${field}`, value);
|
|
25
39
|
return;
|
|
26
40
|
}
|
|
27
|
-
Object.keys(field).
|
|
28
|
-
|
|
41
|
+
Object.keys(field).forEach((name) => {
|
|
42
|
+
if (name.includes("."))
|
|
43
|
+
setDeep(this.data, name, field[name]);
|
|
44
|
+
else
|
|
45
|
+
this.data[name] = field[name];
|
|
29
46
|
this.cacheData[name] = field[name];
|
|
30
47
|
PubSub.publish(`${id}:set:${name}`, field[name]);
|
|
31
48
|
});
|
|
32
49
|
}
|
|
33
50
|
delete(field) {
|
|
34
|
-
delete this.
|
|
51
|
+
delete this.cacheData[field];
|
|
52
|
+
if (field.includes("."))
|
|
53
|
+
deleteDeep(this.data, field);
|
|
54
|
+
else
|
|
55
|
+
delete this.data[field];
|
|
35
56
|
}
|
|
36
57
|
clear() {
|
|
37
58
|
if (!this.data)
|
|
38
59
|
return;
|
|
60
|
+
const names = Object.keys(this.cacheData);
|
|
39
61
|
this.cacheData = {};
|
|
40
|
-
|
|
62
|
+
names.forEach((name) => {
|
|
63
|
+
if (name.includes("."))
|
|
64
|
+
deleteDeep(this.data, name);
|
|
65
|
+
else
|
|
66
|
+
this.data[name] = undefined;
|
|
41
67
|
PubSub.publish(`${this.id}:set:${name}`, undefined);
|
|
42
|
-
this.data[name] = undefined;
|
|
43
68
|
});
|
|
44
69
|
}
|
|
45
70
|
async validate(field) {
|
|
46
71
|
const { id, rules, data } = this;
|
|
47
72
|
if (!rules)
|
|
48
73
|
return data;
|
|
49
|
-
|
|
50
|
-
const o = rules[field];
|
|
51
|
-
const rule = {
|
|
52
|
-
validator: (v) => Array.isArray(v)
|
|
53
|
-
? v.length > 0
|
|
54
|
-
: ![undefined, null, ""].includes(v),
|
|
55
|
-
message: undefined,
|
|
56
|
-
};
|
|
57
|
-
if (typeof o === "function") {
|
|
58
|
-
rule.validator = o;
|
|
59
|
-
}
|
|
60
|
-
else if (o === true) {
|
|
61
|
-
rule.validator = (v) => ![undefined, null, ""].includes(v);
|
|
62
|
-
rule.message = "required";
|
|
63
|
-
}
|
|
64
|
-
else {
|
|
65
|
-
Object.assign(rule, o);
|
|
66
|
-
}
|
|
67
|
-
const isValid = rule.validator?.(data[field], this);
|
|
68
|
-
if (typeof isValid === "string") {
|
|
69
|
-
rule.message = isValid;
|
|
70
|
-
}
|
|
71
|
-
if (isValid !== true) {
|
|
72
|
-
PubSub.publish(`${id}:invalid:${field}`, {
|
|
73
|
-
message: rule.message,
|
|
74
|
-
status: "error",
|
|
75
|
-
});
|
|
76
|
-
return false;
|
|
77
|
-
}
|
|
78
|
-
PubSub.publish(`${id}:invalid:${name}`, {
|
|
79
|
-
message: null,
|
|
80
|
-
status: "normal",
|
|
81
|
-
});
|
|
82
|
-
return true;
|
|
83
|
-
}
|
|
74
|
+
const names = field ? [field] : Object.keys(this.cacheData);
|
|
84
75
|
let isAllValid = true;
|
|
85
|
-
|
|
76
|
+
names.forEach((name) => {
|
|
86
77
|
const o = rules[name];
|
|
87
|
-
if (o === undefined)
|
|
78
|
+
if (!field && o === undefined)
|
|
88
79
|
return;
|
|
89
80
|
const rule = {
|
|
90
|
-
validator: (v) =>
|
|
91
|
-
message: undefined,
|
|
81
|
+
validator: (v) => Array.isArray(v) ? v.length > 0 : ![undefined, null, ""].includes(v),
|
|
92
82
|
};
|
|
93
|
-
if (typeof o === "function")
|
|
83
|
+
if (typeof o === "function")
|
|
94
84
|
rule.validator = o;
|
|
95
|
-
|
|
96
|
-
else if (o === true) {
|
|
97
|
-
rule.validator = (v) => ![undefined, null, ""].includes(v);
|
|
85
|
+
else if (o === true)
|
|
98
86
|
rule.message = "required";
|
|
99
|
-
|
|
100
|
-
else {
|
|
87
|
+
else if (o)
|
|
101
88
|
Object.assign(rule, o);
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
if (typeof isValid === "string") {
|
|
89
|
+
const isValid = rule.validator?.(getDeep(data, name), this);
|
|
90
|
+
if (typeof isValid === "string")
|
|
105
91
|
rule.message = isValid;
|
|
106
|
-
}
|
|
107
92
|
if (isValid !== true) {
|
|
108
93
|
PubSub.publish(`${id}:invalid:${name}`, {
|
|
109
94
|
message: rule.message,
|
|
@@ -118,7 +103,7 @@ class IFormInstance {
|
|
|
118
103
|
});
|
|
119
104
|
}
|
|
120
105
|
});
|
|
121
|
-
return isAllValid ?
|
|
106
|
+
return field ? isAllValid : isAllValid ? data : false;
|
|
122
107
|
}
|
|
123
108
|
}
|
|
124
109
|
function useForm(form) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useForm.js","sources":["../../../../packages/components/form/useForm.ts"],"sourcesContent":["import PubSub from \"pubsub-js\";\nimport { uid } from \"radash\";\nimport { useRef } from \"react\";\nimport {
|
|
1
|
+
{"version":3,"file":"useForm.js","sources":["../../../../packages/components/form/useForm.ts"],"sourcesContent":["import PubSub from \"pubsub-js\";\nimport { uid } from \"radash\";\nimport { useRef } from \"react\";\nimport { TValidator, TRule } from \"./type\";\nimport { getDeep, setDeep, deleteDeep } from \"./utils\";\n\nexport class IFormInstance {\n\treadonly id?: string;\n\tdata: Record<string, any> = {};\n\tcacheData: Record<string, any> = {};\n\trules?: Record<string, boolean | TValidator | TRule>;\n\n\tconstructor() {\n\t\tthis.id = uid(8);\n\t\tthis.data = {};\n\t}\n\n\tget(field?: string) {\n\t\treturn field ? getDeep(this.data, field) : this.data;\n\t}\n\n\tset(field: any, value?: any) {\n\t\tconst id = this.id;\n\t\tif (!this.data) return;\n\n\t\tif (typeof field === \"string\") {\n\t\t\tif (field.includes(\".\")) {\n\t\t\t\tconst parts = field.split(\".\");\n\t\t\t\tfor (let i = 1; i < parts.length; i++) {\n\t\t\t\t\tconst ancestor = parts.slice(0, i).join(\".\");\n\t\t\t\t\tif (ancestor in this.data) {\n\t\t\t\t\t\tconsole.warn(\n\t\t\t\t\t\t\t`[ioca-form] Field \"${field}\" conflicts with \"${ancestor}\". ` +\n\t\t\t\t\t\t\t\t\"Nested representation in form.get() may be inconsistent.\",\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tsetDeep(this.data, field, value);\n\t\t\t} else {\n\t\t\t\tthis.data[field] = value;\n\t\t\t}\n\n\t\t\tthis.cacheData[field] = value;\n\t\t\tPubSub.publish(`${id}:set:${field}`, value);\n\t\t\treturn;\n\t\t}\n\n\t\tObject.keys(field).forEach((name) => {\n\t\t\tif (name.includes(\".\")) setDeep(this.data, name, field[name]);\n\t\t\telse this.data[name] = field[name];\n\n\t\t\tthis.cacheData[name] = field[name];\n\t\t\tPubSub.publish(`${id}:set:${name}`, field[name]);\n\t\t});\n\t}\n\n\tdelete(field: string) {\n\t\tdelete this.cacheData[field];\n\t\tif (field.includes(\".\")) deleteDeep(this.data, field);\n\t\telse delete this.data[field];\n\t}\n\n\tclear() {\n\t\tif (!this.data) return;\n\t\tconst names = Object.keys(this.cacheData);\n\t\tthis.cacheData = {};\n\n\t\tnames.forEach((name) => {\n\t\t\tif (name.includes(\".\")) deleteDeep(this.data, name);\n\t\t\telse this.data[name] = undefined;\n\n\t\t\tPubSub.publish(`${this.id}:set:${name}`, undefined);\n\t\t});\n\t}\n\n\tasync validate(field?: string) {\n\t\tconst { id, rules, data } = this;\n\t\tif (!rules) return data;\n\n\t\tconst names = field ? [field] : Object.keys(this.cacheData);\n\t\tlet isAllValid = true;\n\n\t\tnames.forEach((name) => {\n\t\t\tconst o = rules[name];\n\t\t\tif (!field && o === undefined) return;\n\n\t\t\tconst rule: TRule = {\n\t\t\t\tvalidator: (v) =>\n\t\t\t\t\tArray.isArray(v) ? v.length > 0 : ![undefined, null, \"\"].includes(v),\n\t\t\t};\n\n\t\t\tif (typeof o === \"function\") rule.validator = o;\n\t\t\telse if (o === true) rule.message = \"required\";\n\t\t\telse if (o) Object.assign(rule, o);\n\n\t\t\tconst isValid = rule.validator?.(getDeep(data, name), this);\n\t\t\tif (typeof isValid === \"string\") rule.message = isValid;\n\n\t\t\tif (isValid !== true) {\n\t\t\t\tPubSub.publish(`${id}:invalid:${name}`, {\n\t\t\t\t\tmessage: rule.message,\n\t\t\t\t\tstatus: \"error\",\n\t\t\t\t});\n\t\t\t\tisAllValid = false;\n\t\t\t} else {\n\t\t\t\tPubSub.publish(`${id}:invalid:${name}`, {\n\t\t\t\t\tmessage: null,\n\t\t\t\t\tstatus: \"normal\",\n\t\t\t\t});\n\t\t\t}\n\t\t});\n\n\t\treturn field ? isAllValid : isAllValid ? data : false;\n\t}\n}\n\nexport default function useForm(form?: IFormInstance) {\n\tconst formRef = useRef<IFormInstance>(null);\n\n\tif (!formRef.current) {\n\t\tformRef.current = form ?? new IFormInstance();\n\t}\n\n\treturn formRef.current;\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
function getDeep(obj, path) {
|
|
2
|
+
if (!path.includes("."))
|
|
3
|
+
return obj[path];
|
|
4
|
+
return path.split(".").reduce((acc, key) => (acc != null ? acc[key] : undefined), obj);
|
|
5
|
+
}
|
|
6
|
+
function setDeep(obj, path, value) {
|
|
7
|
+
const parts = path.split(".");
|
|
8
|
+
let current = obj;
|
|
9
|
+
for (let i = 0; i < parts.length - 1; i++) {
|
|
10
|
+
const key = parts[i];
|
|
11
|
+
if (current[key] == null || typeof current[key] !== "object") {
|
|
12
|
+
current[key] = {};
|
|
13
|
+
}
|
|
14
|
+
current = current[key];
|
|
15
|
+
}
|
|
16
|
+
current[parts[parts.length - 1]] = value;
|
|
17
|
+
}
|
|
18
|
+
function deleteDeep(obj, path) {
|
|
19
|
+
const parts = path.split(".");
|
|
20
|
+
const parent = parts
|
|
21
|
+
.slice(0, -1)
|
|
22
|
+
.reduce((acc, key) => (acc != null ? acc[key] : undefined), obj);
|
|
23
|
+
if (parent != null) {
|
|
24
|
+
delete parent[parts[parts.length - 1]];
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export { deleteDeep, getDeep, setDeep };
|
|
29
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../../packages/components/form/utils.ts"],"sourcesContent":["export function getDeep(obj: any, path: string): any {\n\tif (!path.includes(\".\")) return obj[path];\n\treturn path.split(\".\").reduce((acc, key) => (acc != null ? acc[key] : undefined), obj);\n}\n\nexport function setDeep(obj: any, path: string, value: any) {\n\tconst parts = path.split(\".\");\n\tlet current = obj;\n\tfor (let i = 0; i < parts.length - 1; i++) {\n\t\tconst key = parts[i];\n\t\tif (current[key] == null || typeof current[key] !== \"object\") {\n\t\t\tcurrent[key] = {};\n\t\t}\n\t\tcurrent = current[key];\n\t}\n\tcurrent[parts[parts.length - 1]] = value;\n}\n\nexport function deleteDeep(obj: any, path: string) {\n\tconst parts = path.split(\".\");\n\tconst parent = parts\n\t\t.slice(0, -1)\n\t\t.reduce((acc, key) => (acc != null ? acc[key] : undefined), obj);\n\tif (parent != null) {\n\t\tdelete parent[parts[parts.length - 1]];\n\t}\n}\n"],"names":[],"mappings":"AAAM,SAAU,OAAO,CAAC,GAAQ,EAAE,IAAY,EAAA;AAC7C,IAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC;AAAE,QAAA,OAAO,GAAG,CAAC,IAAI,CAAC;AACzC,IAAA,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,MAAM,GAAG,IAAI,IAAI,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC,EAAE,GAAG,CAAC;AACvF;SAEgB,OAAO,CAAC,GAAQ,EAAE,IAAY,EAAE,KAAU,EAAA;IACzD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;IAC7B,IAAI,OAAO,GAAG,GAAG;AACjB,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE;AAC1C,QAAA,MAAM,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC;AACpB,QAAA,IAAI,OAAO,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,OAAO,OAAO,CAAC,GAAG,CAAC,KAAK,QAAQ,EAAE;AAC7D,YAAA,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE;QAClB;AACA,QAAA,OAAO,GAAG,OAAO,CAAC,GAAG,CAAC;IACvB;AACA,IAAA,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK;AACzC;AAEM,SAAU,UAAU,CAAC,GAAQ,EAAE,IAAY,EAAA;IAChD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;IAC7B,MAAM,MAAM,GAAG;AACb,SAAA,KAAK,CAAC,CAAC,EAAE,EAAE;SACX,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,MAAM,GAAG,IAAI,IAAI,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC,EAAE,GAAG,CAAC;AACjE,IAAA,IAAI,MAAM,IAAI,IAAI,EAAE;QACnB,OAAO,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IACvC;AACD;;;;"}
|
package/lib/es/js/hooks.js
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import { useState, useRef, useEffect, useCallback } from 'react';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
3
|
+
if (typeof window !== "undefined" && typeof document !== "undefined") {
|
|
4
|
+
const os = window.navigator.platform;
|
|
5
|
+
if (os.toLowerCase().includes("mac")) {
|
|
6
|
+
document.documentElement.classList.add("os-mac");
|
|
7
|
+
}
|
|
8
|
+
else if (os.toLowerCase().includes("win")) {
|
|
9
|
+
document.documentElement.classList.add("os-windows");
|
|
10
|
+
}
|
|
9
11
|
}
|
|
10
12
|
const MouseMoveEvents = new Set();
|
|
11
13
|
const MouseUpEvents = new Set();
|