@ioca/react 1.5.9 → 1.5.11
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/LICENSE +20 -20
- package/README.md +33 -31
- package/lib/cjs/components/affix/affix.js.map +1 -1
- package/lib/cjs/components/affix/totop.js.map +1 -1
- package/lib/cjs/components/badge/badge.js.map +1 -1
- package/lib/cjs/components/button/button.js.map +1 -1
- package/lib/cjs/components/button/confirm.js.map +1 -1
- package/lib/cjs/components/button/group.js.map +1 -1
- package/lib/cjs/components/button/toggle.js.map +1 -1
- package/lib/cjs/components/card/card.js.map +1 -1
- package/lib/cjs/components/checkbox/checkbox.js +1 -1
- package/lib/cjs/components/checkbox/checkbox.js.map +1 -1
- package/lib/cjs/components/checkbox/item.js.map +1 -1
- package/lib/cjs/components/collapse/collapse.js.map +1 -1
- package/lib/cjs/components/collapse/item.js.map +1 -1
- package/lib/cjs/components/datagrid/cell.js +5 -2
- package/lib/cjs/components/datagrid/cell.js.map +1 -1
- package/lib/cjs/components/datagrid/datagrid.js +148 -50
- package/lib/cjs/components/datagrid/datagrid.js.map +1 -1
- package/lib/cjs/components/datagrid/helper.js +83 -0
- package/lib/cjs/components/datagrid/helper.js.map +1 -0
- package/lib/cjs/components/datagrid/resize.js +35 -7
- package/lib/cjs/components/datagrid/resize.js.map +1 -1
- package/lib/cjs/components/datagrid/row.js +17 -3
- package/lib/cjs/components/datagrid/row.js.map +1 -1
- package/lib/cjs/components/datagrid/sorter.js.map +1 -1
- package/lib/cjs/components/datagrid/virtual.js +283 -0
- package/lib/cjs/components/datagrid/virtual.js.map +1 -0
- package/lib/cjs/components/description/description.js.map +1 -1
- package/lib/cjs/components/drawer/drawer.js.map +1 -1
- package/lib/cjs/components/dropdown/dropdown.js.map +1 -1
- package/lib/cjs/components/dropdown/item.js.map +1 -1
- package/lib/cjs/components/editor/controls.js.map +1 -1
- package/lib/cjs/components/editor/editor.js +5 -0
- package/lib/cjs/components/editor/editor.js.map +1 -1
- package/lib/cjs/components/editor/memtion.js.map +1 -1
- package/lib/cjs/components/flex/flex.js.map +1 -1
- package/lib/cjs/components/form/context.js.map +1 -1
- package/lib/cjs/components/form/field.js.map +1 -1
- package/lib/cjs/components/form/form.js.map +1 -1
- package/lib/cjs/components/form/useConfig.js.map +1 -1
- package/lib/cjs/components/form/useForm.js.map +1 -1
- package/lib/cjs/components/icon/icon.js.map +1 -1
- package/lib/cjs/components/image/image.js.map +1 -1
- package/lib/cjs/components/image/list.js.map +1 -1
- package/lib/cjs/components/input/container.js.map +1 -1
- package/lib/cjs/components/input/input.js.map +1 -1
- package/lib/cjs/components/input/number.js.map +1 -1
- package/lib/cjs/components/input/range.js.map +1 -1
- package/lib/cjs/components/input/textarea.js.map +1 -1
- package/lib/cjs/components/list/item.js.map +1 -1
- package/lib/cjs/components/list/list.js.map +1 -1
- package/lib/cjs/components/loading/loading.js.map +1 -1
- package/lib/cjs/components/message/message.js.map +1 -1
- package/lib/cjs/components/modal/content.js.map +1 -1
- package/lib/cjs/components/modal/context.js.map +1 -1
- package/lib/cjs/components/modal/hookModal.js.map +1 -1
- package/lib/cjs/components/modal/modal.js.map +1 -1
- package/lib/cjs/components/modal/useModal.js.map +1 -1
- package/lib/cjs/components/pagination/page.js.map +1 -1
- package/lib/cjs/components/pagination/pagination.js.map +1 -1
- package/lib/cjs/components/picker/colors/footer.js.map +1 -1
- package/lib/cjs/components/picker/colors/handle.js.map +1 -1
- package/lib/cjs/components/picker/colors/index.js.map +1 -1
- package/lib/cjs/components/picker/dates/dates.js.map +1 -1
- package/lib/cjs/components/picker/dates/index.js.map +1 -1
- package/lib/cjs/components/picker/dates/panel.js.map +1 -1
- package/lib/cjs/components/picker/time/index.js.map +1 -1
- package/lib/cjs/components/picker/time/item.js.map +1 -1
- package/lib/cjs/components/picker/time/panel.js.map +1 -1
- package/lib/cjs/components/popconfirm/popconfirm.js.map +1 -1
- package/lib/cjs/components/popup/content.js.map +1 -1
- package/lib/cjs/components/popup/popup.js.map +1 -1
- package/lib/cjs/components/progress/circle.js.map +1 -1
- package/lib/cjs/components/progress/line.js.map +1 -1
- package/lib/cjs/components/progress/progress.js.map +1 -1
- package/lib/cjs/components/radio/item.js.map +1 -1
- package/lib/cjs/components/radio/radio.js +2 -2
- package/lib/cjs/components/radio/radio.js.map +1 -1
- package/lib/cjs/components/resizable/resizable.js.map +1 -1
- package/lib/cjs/components/river/river.js.map +1 -1
- package/lib/cjs/components/select/options.js.map +1 -1
- package/lib/cjs/components/select/select.js.map +1 -1
- package/lib/cjs/components/step/divider.js.map +1 -1
- package/lib/cjs/components/step/item.js.map +1 -1
- package/lib/cjs/components/step/step.js.map +1 -1
- package/lib/cjs/components/swiper/item.js.map +1 -1
- package/lib/cjs/components/swiper/swiper.js.map +1 -1
- package/lib/cjs/components/tabs/item.js.map +1 -1
- package/lib/cjs/components/tabs/tabs.js.map +1 -1
- package/lib/cjs/components/tag/tag.js.map +1 -1
- package/lib/cjs/components/text/highlight.js.map +1 -1
- package/lib/cjs/components/text/number.js.map +1 -1
- package/lib/cjs/components/text/text.js.map +1 -1
- package/lib/cjs/components/text/time.js.map +1 -1
- package/lib/cjs/components/tree/item.js.map +1 -1
- package/lib/cjs/components/tree/tree.js.map +1 -1
- package/lib/cjs/components/upload/dropbox.js +54 -0
- package/lib/cjs/components/upload/dropbox.js.map +1 -0
- package/lib/cjs/components/upload/renderFile.js +33 -36
- package/lib/cjs/components/upload/renderFile.js.map +1 -1
- package/lib/cjs/components/upload/upload.js +100 -69
- package/lib/cjs/components/upload/upload.js.map +1 -1
- package/lib/cjs/components/utils/empty/index.js.map +1 -1
- package/lib/cjs/components/utils/helpericon/helpericon.js.map +1 -1
- package/lib/cjs/components/video/video.js.map +1 -1
- package/lib/cjs/js/hooks.js +7 -0
- package/lib/cjs/js/hooks.js.map +1 -1
- package/lib/cjs/js/usePreview/content.js.map +1 -1
- package/lib/cjs/js/usePreview/index.js.map +1 -1
- package/lib/cjs/js/usePreview/renderFile.js +1 -1
- package/lib/cjs/js/usePreview/renderFile.js.map +1 -1
- package/lib/cjs/js/usePreview/type.js.map +1 -1
- package/lib/cjs/js/useRipple/index.js +6 -6
- package/lib/cjs/js/useRipple/index.js.map +1 -1
- package/lib/cjs/js/useTheme/index.js.map +1 -1
- package/lib/cjs/js/utils.js.map +1 -1
- package/lib/css/colors.css +784 -779
- package/lib/css/index.css +1 -2
- package/lib/css/index.css.map +1 -1
- package/lib/css/reset.css +59 -69
- package/lib/es/components/affix/affix.js.map +1 -1
- package/lib/es/components/affix/totop.js.map +1 -1
- package/lib/es/components/badge/badge.js.map +1 -1
- package/lib/es/components/button/button.js.map +1 -1
- package/lib/es/components/button/confirm.js.map +1 -1
- package/lib/es/components/button/group.js.map +1 -1
- package/lib/es/components/button/toggle.js.map +1 -1
- package/lib/es/components/card/card.js.map +1 -1
- package/lib/es/components/checkbox/checkbox.js +1 -1
- package/lib/es/components/checkbox/checkbox.js.map +1 -1
- package/lib/es/components/checkbox/item.js.map +1 -1
- package/lib/es/components/collapse/collapse.js.map +1 -1
- package/lib/es/components/collapse/item.js.map +1 -1
- package/lib/es/components/datagrid/cell.js +5 -2
- package/lib/es/components/datagrid/cell.js.map +1 -1
- package/lib/es/components/datagrid/datagrid.js +149 -51
- package/lib/es/components/datagrid/datagrid.js.map +1 -1
- package/lib/es/components/datagrid/helper.js +79 -0
- package/lib/es/components/datagrid/helper.js.map +1 -0
- package/lib/es/components/datagrid/resize.js +35 -7
- package/lib/es/components/datagrid/resize.js.map +1 -1
- package/lib/es/components/datagrid/row.js +17 -3
- package/lib/es/components/datagrid/row.js.map +1 -1
- package/lib/es/components/datagrid/sorter.js.map +1 -1
- package/lib/es/components/datagrid/virtual.js +275 -0
- package/lib/es/components/datagrid/virtual.js.map +1 -0
- package/lib/es/components/description/description.js.map +1 -1
- package/lib/es/components/drawer/drawer.js.map +1 -1
- package/lib/es/components/dropdown/dropdown.js.map +1 -1
- package/lib/es/components/dropdown/item.js.map +1 -1
- package/lib/es/components/editor/controls.js.map +1 -1
- package/lib/es/components/editor/editor.js +5 -0
- package/lib/es/components/editor/editor.js.map +1 -1
- package/lib/es/components/editor/memtion.js.map +1 -1
- package/lib/es/components/flex/flex.js.map +1 -1
- package/lib/es/components/form/context.js.map +1 -1
- package/lib/es/components/form/field.js.map +1 -1
- package/lib/es/components/form/form.js.map +1 -1
- package/lib/es/components/form/useConfig.js.map +1 -1
- package/lib/es/components/form/useForm.js.map +1 -1
- package/lib/es/components/icon/icon.js.map +1 -1
- package/lib/es/components/image/image.js.map +1 -1
- package/lib/es/components/image/list.js.map +1 -1
- package/lib/es/components/input/container.js.map +1 -1
- package/lib/es/components/input/input.js.map +1 -1
- package/lib/es/components/input/number.js.map +1 -1
- package/lib/es/components/input/range.js.map +1 -1
- package/lib/es/components/input/textarea.js.map +1 -1
- package/lib/es/components/list/item.js.map +1 -1
- package/lib/es/components/list/list.js.map +1 -1
- package/lib/es/components/loading/loading.js.map +1 -1
- package/lib/es/components/message/message.js.map +1 -1
- package/lib/es/components/modal/content.js.map +1 -1
- package/lib/es/components/modal/context.js.map +1 -1
- package/lib/es/components/modal/hookModal.js.map +1 -1
- package/lib/es/components/modal/modal.js.map +1 -1
- package/lib/es/components/modal/useModal.js.map +1 -1
- package/lib/es/components/pagination/page.js.map +1 -1
- package/lib/es/components/pagination/pagination.js.map +1 -1
- package/lib/es/components/picker/colors/footer.js.map +1 -1
- package/lib/es/components/picker/colors/handle.js.map +1 -1
- package/lib/es/components/picker/colors/index.js.map +1 -1
- package/lib/es/components/picker/dates/dates.js.map +1 -1
- package/lib/es/components/picker/dates/index.js.map +1 -1
- package/lib/es/components/picker/dates/panel.js.map +1 -1
- package/lib/es/components/picker/time/index.js.map +1 -1
- package/lib/es/components/picker/time/item.js.map +1 -1
- package/lib/es/components/picker/time/panel.js.map +1 -1
- package/lib/es/components/popconfirm/popconfirm.js.map +1 -1
- package/lib/es/components/popup/content.js.map +1 -1
- package/lib/es/components/popup/popup.js.map +1 -1
- package/lib/es/components/progress/circle.js.map +1 -1
- package/lib/es/components/progress/line.js.map +1 -1
- package/lib/es/components/progress/progress.js.map +1 -1
- package/lib/es/components/radio/item.js.map +1 -1
- package/lib/es/components/radio/radio.js +2 -2
- package/lib/es/components/radio/radio.js.map +1 -1
- package/lib/es/components/resizable/resizable.js.map +1 -1
- package/lib/es/components/river/river.js.map +1 -1
- package/lib/es/components/select/options.js.map +1 -1
- package/lib/es/components/select/select.js.map +1 -1
- package/lib/es/components/step/divider.js.map +1 -1
- package/lib/es/components/step/item.js.map +1 -1
- package/lib/es/components/step/step.js.map +1 -1
- package/lib/es/components/swiper/item.js.map +1 -1
- package/lib/es/components/swiper/swiper.js.map +1 -1
- package/lib/es/components/tabs/item.js.map +1 -1
- package/lib/es/components/tabs/tabs.js.map +1 -1
- package/lib/es/components/tag/tag.js.map +1 -1
- package/lib/es/components/text/highlight.js.map +1 -1
- package/lib/es/components/text/number.js.map +1 -1
- package/lib/es/components/text/text.js.map +1 -1
- package/lib/es/components/text/time.js.map +1 -1
- package/lib/es/components/tree/item.js.map +1 -1
- package/lib/es/components/tree/tree.js.map +1 -1
- package/lib/es/components/upload/dropbox.js +46 -0
- package/lib/es/components/upload/dropbox.js.map +1 -0
- package/lib/es/components/upload/renderFile.js +34 -37
- package/lib/es/components/upload/renderFile.js.map +1 -1
- package/lib/es/components/upload/upload.js +101 -70
- package/lib/es/components/upload/upload.js.map +1 -1
- package/lib/es/components/utils/empty/index.js.map +1 -1
- package/lib/es/components/utils/helpericon/helpericon.js.map +1 -1
- package/lib/es/components/video/video.js.map +1 -1
- package/lib/es/js/hooks.js +8 -1
- package/lib/es/js/hooks.js.map +1 -1
- package/lib/es/js/usePreview/content.js.map +1 -1
- package/lib/es/js/usePreview/index.js.map +1 -1
- package/lib/es/js/usePreview/renderFile.js +1 -1
- package/lib/es/js/usePreview/renderFile.js.map +1 -1
- package/lib/es/js/usePreview/type.js.map +1 -1
- package/lib/es/js/useRipple/index.js +6 -6
- package/lib/es/js/useRipple/index.js.map +1 -1
- package/lib/es/js/useTheme/index.js.map +1 -1
- package/lib/es/js/utils.js.map +1 -1
- package/lib/index.js +734 -177
- package/lib/types/components/datagrid/type.d.ts +10 -1
- package/lib/types/components/upload/type.d.ts +3 -8
- package/package.json +97 -98
|
@@ -1,13 +1,34 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { memo, useRef, useEffect, useCallback } from 'react';
|
|
2
3
|
import { useReactive, useMouseMove, useMouseUp } from '../../js/hooks.js';
|
|
3
4
|
|
|
4
|
-
function Resize(props) {
|
|
5
|
+
const Resize = memo(function Resize(props) {
|
|
5
6
|
const { index, onWidthChange } = props;
|
|
6
7
|
const state = useReactive({
|
|
7
8
|
resizing: false,
|
|
8
9
|
x: 0,
|
|
9
10
|
width: 0,
|
|
10
11
|
});
|
|
12
|
+
const rafId = useRef(null);
|
|
13
|
+
const nextWidth = useRef(null);
|
|
14
|
+
useEffect(() => {
|
|
15
|
+
return () => {
|
|
16
|
+
if (rafId.current != null)
|
|
17
|
+
cancelAnimationFrame(rafId.current);
|
|
18
|
+
};
|
|
19
|
+
}, []);
|
|
20
|
+
const flush = useCallback(() => {
|
|
21
|
+
rafId.current = null;
|
|
22
|
+
if (nextWidth.current == null)
|
|
23
|
+
return;
|
|
24
|
+
onWidthChange(index, nextWidth.current, "preview");
|
|
25
|
+
}, [index, onWidthChange]);
|
|
26
|
+
const schedule = useCallback((w) => {
|
|
27
|
+
nextWidth.current = w;
|
|
28
|
+
if (rafId.current != null)
|
|
29
|
+
return;
|
|
30
|
+
rafId.current = requestAnimationFrame(flush);
|
|
31
|
+
}, [flush]);
|
|
11
32
|
const handleMouseDown = (e) => {
|
|
12
33
|
const tar = e.target;
|
|
13
34
|
const width = tar.offsetParent.offsetWidth;
|
|
@@ -17,24 +38,31 @@ function Resize(props) {
|
|
|
17
38
|
width,
|
|
18
39
|
});
|
|
19
40
|
};
|
|
20
|
-
const handleMouseMove = (e) => {
|
|
41
|
+
const handleMouseMove = useCallback((e) => {
|
|
21
42
|
if (!state.resizing)
|
|
22
43
|
return;
|
|
23
44
|
e.preventDefault();
|
|
24
45
|
const after = state.width + e.pageX - state.x;
|
|
25
46
|
if (after <= 24)
|
|
26
47
|
return;
|
|
27
|
-
|
|
28
|
-
};
|
|
29
|
-
const handleMouseUp = () => {
|
|
48
|
+
schedule(after);
|
|
49
|
+
}, [index, schedule, state]);
|
|
50
|
+
const handleMouseUp = useCallback(() => {
|
|
30
51
|
if (!state.resizing)
|
|
31
52
|
return;
|
|
32
53
|
state.resizing = false;
|
|
33
|
-
|
|
54
|
+
const w = nextWidth.current;
|
|
55
|
+
if (rafId.current != null)
|
|
56
|
+
cancelAnimationFrame(rafId.current);
|
|
57
|
+
rafId.current = null;
|
|
58
|
+
if (w != null)
|
|
59
|
+
onWidthChange(index, w, "commit");
|
|
60
|
+
nextWidth.current = null;
|
|
61
|
+
}, [index, onWidthChange, state]);
|
|
34
62
|
useMouseMove(handleMouseMove);
|
|
35
63
|
useMouseUp(handleMouseUp);
|
|
36
64
|
return (jsx("i", { className: 'i-datagrid-resizor', onMouseDown: handleMouseDown, onClick: (e) => e.stopPropagation() }));
|
|
37
|
-
}
|
|
65
|
+
});
|
|
38
66
|
|
|
39
67
|
export { Resize as default };
|
|
40
68
|
//# sourceMappingURL=resize.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"resize.js","sources":["../../../../packages/components/datagrid/resize.tsx"],"sourcesContent":["import { useMouseMove, useMouseUp, useReactive } from \"../../js/hooks\";\
|
|
1
|
+
{"version":3,"file":"resize.js","sources":["../../../../packages/components/datagrid/resize.tsx"],"sourcesContent":["import { memo, useCallback, useEffect, useRef } from \"react\";\nimport { useMouseMove, useMouseUp, useReactive } from \"../../js/hooks\";\n\ntype ResizeProps = {\n\tindex: number;\n\tonWidthChange: (\n\t\tindex: number,\n\t\twidth: number,\n\t\tphase?: \"preview\" | \"commit\",\n\t) => void;\n};\n\nconst Resize = memo(function Resize(props: ResizeProps) {\n\tconst { index, onWidthChange } = props;\n\tconst state = useReactive({\n\t\tresizing: false,\n\t\tx: 0,\n\t\twidth: 0,\n\t});\n\n\tconst rafId = useRef<number | null>(null);\n\tconst nextWidth = useRef<number | null>(null);\n\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tif (rafId.current != null) cancelAnimationFrame(rafId.current);\n\t\t};\n\t}, []);\n\n\tconst flush = useCallback(() => {\n\t\trafId.current = null;\n\t\tif (nextWidth.current == null) return;\n\t\tonWidthChange(index, nextWidth.current, \"preview\");\n\t}, [index, onWidthChange]);\n\n\tconst schedule = useCallback(\n\t\t(w: number) => {\n\t\t\tnextWidth.current = w;\n\t\t\tif (rafId.current != null) return;\n\t\t\trafId.current = requestAnimationFrame(flush);\n\t\t},\n\t\t[flush],\n\t);\n\n\tconst handleMouseDown = (e: any) => {\n\t\tconst tar = e.target as HTMLElement;\n\t\tconst width = (tar.offsetParent as HTMLElement).offsetWidth;\n\n\t\tObject.assign(state, {\n\t\t\tx: e.pageX,\n\t\t\tresizing: true,\n\t\t\twidth,\n\t\t});\n\t};\n\n\tconst handleMouseMove = useCallback(\n\t\t(e: any) => {\n\t\t\tif (!state.resizing) return;\n\n\t\t\te.preventDefault();\n\n\t\t\tconst after = state.width + e.pageX - state.x;\n\t\t\tif (after <= 24) return;\n\n\t\t\tschedule(after);\n\t\t},\n\t\t[index, schedule, state],\n\t);\n\n\tconst handleMouseUp = useCallback(() => {\n\t\tif (!state.resizing) return;\n\n\t\tstate.resizing = false;\n\t\tconst w = nextWidth.current;\n\t\tif (rafId.current != null) cancelAnimationFrame(rafId.current);\n\t\trafId.current = null;\n\t\tif (w != null) onWidthChange(index, w, \"commit\");\n\t\tnextWidth.current = null;\n\t}, [index, onWidthChange, state]);\n\n\tuseMouseMove(handleMouseMove);\n\tuseMouseUp(handleMouseUp);\n\n\treturn (\n\t\t<i\n\t\t\tclassName='i-datagrid-resizor'\n\t\t\tonMouseDown={handleMouseDown}\n\t\t\tonClick={(e) => e.stopPropagation()}\n\t\t/>\n\t);\n});\n\nexport default Resize;\n"],"names":["_jsx"],"mappings":"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"}
|
|
@@ -1,16 +1,30 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
|
+
import { useCallback, useMemo } from 'react';
|
|
3
4
|
import { Cell, getCellStyle } from './cell.js';
|
|
4
5
|
import Resize from './resize.js';
|
|
5
6
|
import Sorter from './sorter.js';
|
|
6
7
|
|
|
7
8
|
function Row(props) {
|
|
8
9
|
const { row, data, columns, cellEllipsis, onRowClick, onCellClick, onCellDoubleClick, } = props;
|
|
9
|
-
|
|
10
|
+
const handleRowClick = useCallback(() => {
|
|
11
|
+
onRowClick?.(data, row);
|
|
12
|
+
}, [data, onRowClick, row]);
|
|
13
|
+
return (jsx("div", { className: 'i-datagrid-row', onClick: handleRowClick, children: columns.map((col, i) => (jsx(Cell, { column: col, col: i, row: row, data: data, cellEllipsis: cellEllipsis, onCellClick: onCellClick, onCellDoubleClick: onCellDoubleClick }, i))) }));
|
|
10
14
|
}
|
|
11
15
|
function Header(props) {
|
|
12
16
|
const { columns, resizable, cellEllipsis, sortBy, sortType, onWidthChange, onHeaderClick, } = props;
|
|
13
|
-
|
|
17
|
+
const columnById = useMemo(() => {
|
|
18
|
+
const map = new Map();
|
|
19
|
+
columns.forEach((c) => map.set(c.id, c));
|
|
20
|
+
return map;
|
|
21
|
+
}, [columns]);
|
|
22
|
+
const handleClick = useCallback((e) => {
|
|
23
|
+
const el = e.target?.closest?.(".i-datagrid-cell[data-col]");
|
|
24
|
+
const id = el?.dataset?.col;
|
|
25
|
+
onHeaderClick?.(id ? columnById.get(id) : undefined, e);
|
|
26
|
+
}, [columnById, onHeaderClick]);
|
|
27
|
+
return (jsx("div", { className: 'i-datagrid-header i-datagrid-row', onClick: handleClick, children: columns.map((column, col) => {
|
|
14
28
|
const { id, title, fixed, colSpan, sorter, justify, renderHeader, } = column;
|
|
15
29
|
const style = getCellStyle({
|
|
16
30
|
justify,
|
|
@@ -22,7 +36,7 @@ function Header(props) {
|
|
|
22
36
|
return (jsxs("div", { "data-col": id, className: classNames("i-datagrid-cell", {
|
|
23
37
|
"i-datagrid-has-sorter": sorter,
|
|
24
38
|
"i-datagrid-cell-fixed": fixed,
|
|
25
|
-
}), style: { ...style, insetBlockStart: 0 },
|
|
39
|
+
}), style: { ...style, insetBlockStart: 0 }, children: [renderHeader?.(column, col) ?? (jsx("div", { className: classNames("i-datagrid-cell-content", {
|
|
26
40
|
"i-datagrid-cell-content-ellipsis": cellEllipsis,
|
|
27
41
|
}), children: title || id })), sorter && jsx(Sorter, { type: order }), resizable && (jsx(Resize, { index: col, onWidthChange: onWidthChange }))] }, col));
|
|
28
42
|
}) }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"row.js","sources":["../../../../packages/components/datagrid/row.tsx"],"sourcesContent":["import classNames from \"classnames\";\
|
|
1
|
+
{"version":3,"file":"row.js","sources":["../../../../packages/components/datagrid/row.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { useCallback, useMemo } from \"react\";\nimport { Cell, getCellStyle } from \"./cell\";\nimport Resize from \"./resize\";\nimport Sorter from \"./sorter\";\nimport { IHeader, IRow } from \"./type\";\n\nexport default function Row(props: IRow) {\n\tconst {\n\t\trow,\n\t\tdata,\n\t\tcolumns,\n\t\tcellEllipsis,\n\t\tonRowClick,\n\t\tonCellClick,\n\t\tonCellDoubleClick,\n\t} = props;\n\n\tconst handleRowClick = useCallback(() => {\n\t\tonRowClick?.(data, row);\n\t}, [data, onRowClick, row]);\n\n\treturn (\n\t\t<div className='i-datagrid-row' onClick={handleRowClick}>\n\t\t\t{columns.map((col, i) => (\n\t\t\t\t<Cell\n\t\t\t\t\tkey={i}\n\t\t\t\t\tcolumn={col}\n\t\t\t\t\tcol={i}\n\t\t\t\t\trow={row}\n\t\t\t\t\tdata={data}\n\t\t\t\t\tcellEllipsis={cellEllipsis}\n\t\t\t\t\tonCellClick={onCellClick}\n\t\t\t\t\tonCellDoubleClick={onCellDoubleClick}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</div>\n\t);\n}\n\nexport function Header(props: IHeader) {\n\tconst {\n\t\tcolumns,\n\t\tresizable,\n\t\tcellEllipsis,\n\t\tsortBy,\n\t\tsortType,\n\t\tonWidthChange,\n\t\tonHeaderClick,\n\t} = props;\n\n\tconst columnById = useMemo(() => {\n\t\tconst map = new Map<string, IHeader[\"columns\"][number]>();\n\t\tcolumns.forEach((c) => map.set(c.id, c));\n\t\treturn map;\n\t}, [columns]);\n\n\tconst handleClick = useCallback(\n\t\t(e: any) => {\n\t\t\tconst el = (e.target as HTMLElement | null)?.closest?.(\n\t\t\t\t\".i-datagrid-cell[data-col]\",\n\t\t\t) as HTMLElement | null;\n\t\t\tconst id = el?.dataset?.col;\n\t\t\tonHeaderClick?.(id ? columnById.get(id) : undefined, e);\n\t\t},\n\t\t[columnById, onHeaderClick],\n\t);\n\n\treturn (\n\t\t<div className='i-datagrid-header i-datagrid-row' onClick={handleClick}>\n\t\t\t{columns.map((column, col) => {\n\t\t\t\tconst {\n\t\t\t\t\tid,\n\t\t\t\t\ttitle,\n\t\t\t\t\tfixed,\n\t\t\t\t\tcolSpan,\n\t\t\t\t\tsorter,\n\t\t\t\t\tjustify,\n\t\t\t\t\trenderHeader,\n\t\t\t\t} = column;\n\t\t\t\tconst style = getCellStyle({\n\t\t\t\t\tjustify,\n\t\t\t\t\trow: 0,\n\t\t\t\t\tcol,\n\t\t\t\t\tcolSpan,\n\t\t\t\t});\n\n\t\t\t\tconst order = sortBy === id ? sortType : \"\";\n\n\t\t\t\treturn (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={col}\n\t\t\t\t\t\tdata-col={id}\n\t\t\t\t\t\tclassName={classNames(\"i-datagrid-cell\", {\n\t\t\t\t\t\t\t\"i-datagrid-has-sorter\": sorter,\n\t\t\t\t\t\t\t\"i-datagrid-cell-fixed\": fixed,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\tstyle={{ ...style, insetBlockStart: 0 }}\n\t\t\t\t\t>\n\t\t\t\t\t\t{renderHeader?.(column, col) ?? (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t\t\t\t\"i-datagrid-cell-content\",\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\"i-datagrid-cell-content-ellipsis\":\n\t\t\t\t\t\t\t\t\t\t\tcellEllipsis,\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\t\t{title || id}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{sorter && <Sorter type={order} />}\n\n\t\t\t\t\t\t{resizable && (\n\t\t\t\t\t\t\t<Resize index={col} onWidthChange={onWidthChange} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t})}\n\t\t</div>\n\t);\n}\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sorter.js","sources":["../../../../packages/components/datagrid/sorter.tsx"],"sourcesContent":["import classNames from \"classnames\";\
|
|
1
|
+
{"version":3,"file":"sorter.js","sources":["../../../../packages/components/datagrid/sorter.tsx"],"sourcesContent":["import classNames from \"classnames\";\n\nconst Arrow = (props) => (\n\t<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>\n\t\t<g fill='none'>\n\t\t\t<path\n\t\t\t\td='M9 17.898c0 1.074 1.265 1.648 2.073.941l6.31-5.522a1.75 1.75 0 0 0 0-2.634l-6.31-5.522C10.265 4.454 9 5.028 9 6.102v11.796z'\n\t\t\t\tfill='currentColor'\n\t\t\t></path>\n\t\t</g>\n\t</svg>\n);\n\nexport default function Sorter(props) {\n\tconst { type } = props;\n\n\treturn (\n\t\t<a\n\t\t\tclassName={classNames(\"i-datagrid-sorter\", {\n\t\t\t\t[`i-datagrid-sorter-${type}`]: type,\n\t\t\t})}\n\t\t>\n\t\t\t<Arrow className='i-datagrid-sorter-caret' />\n\t\t\t<Arrow className='i-datagrid-sorter-caret' />\n\t\t</a>\n\t);\n}\n"],"names":["_jsx","_jsxs"],"mappings":";;;AAEA,MAAM,KAAK,GAAG,CAAC,KAAK,MACnBA,GAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAA,GAAK,KAAK,EAAA,QAAA,EACpEA,GAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAC,MAAM,EAAA,QAAA,EACbA,GAAA,CAAA,MAAA,EAAA,EACC,CAAC,EAAC,6HAA6H,EAC/H,IAAI,EAAC,cAAc,EAAA,CACZ,EAAA,CACL,EAAA,CACC,CACN;AAEa,SAAU,MAAM,CAAC,KAAK,EAAA;AACnC,IAAA,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK;AAEtB,IAAA,QACCC,IAAA,CAAA,GAAA,EAAA,EACC,SAAS,EAAE,UAAU,CAAC,mBAAmB,EAAE;AAC1C,YAAA,CAAC,CAAA,kBAAA,EAAqB,IAAI,CAAA,CAAE,GAAG,IAAI;AACnC,SAAA,CAAC,aAEFD,GAAA,CAAC,KAAK,IAAC,SAAS,EAAC,yBAAyB,EAAA,CAAG,EAC7CA,GAAA,CAAC,KAAK,IAAC,SAAS,EAAC,yBAAyB,EAAA,CAAG,CAAA,EAAA,CAC1C;AAEN;;;;"}
|
|
@@ -0,0 +1,275 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
import { useRef, useState, useMemo, useCallback, useEffect } from 'react';
|
|
4
|
+
import { getScrollbarSize, List } from 'react-window';
|
|
5
|
+
import { useResizeObserver } from '../../js/hooks.js';
|
|
6
|
+
import Loading from '../loading/loading.js';
|
|
7
|
+
import Resize from './resize.js';
|
|
8
|
+
import Sorter from './sorter.js';
|
|
9
|
+
|
|
10
|
+
function VirtualDatagrid(props) {
|
|
11
|
+
const { virtual, columns, rows, header, sortBy, sortType, height, loading, resizable, striped, cellEllipsis, empty, wrapRef, containerRef, onHeaderClick, onWidthChange, onRowClick, onCellClick, onCellDoubleClick, onScroll, } = props;
|
|
12
|
+
const headerRef = useRef(null);
|
|
13
|
+
const headerInnerRef = useRef(null);
|
|
14
|
+
const listRef = useRef(null);
|
|
15
|
+
const ro = useResizeObserver();
|
|
16
|
+
const triggerRef = useRef({ rowCount: -1 });
|
|
17
|
+
const [viewport, setViewport] = useState({ width: 0, height: 0 });
|
|
18
|
+
const [contentWidth, setContentWidth] = useState(0);
|
|
19
|
+
const rafRef = useRef({
|
|
20
|
+
viewport: 0,
|
|
21
|
+
contentWidth: 0,
|
|
22
|
+
});
|
|
23
|
+
const columnById = useMemo(() => {
|
|
24
|
+
const map = new Map();
|
|
25
|
+
columns.forEach((c) => map.set(c.id, c));
|
|
26
|
+
return map;
|
|
27
|
+
}, [columns]);
|
|
28
|
+
const columnIndexById = useMemo(() => {
|
|
29
|
+
const map = new Map();
|
|
30
|
+
columns.forEach((c, i) => map.set(c.id, i));
|
|
31
|
+
return map;
|
|
32
|
+
}, [columns]);
|
|
33
|
+
const getVirtualCellStyle = useCallback(({ justify, col, colSpan = 1, }) => {
|
|
34
|
+
return {
|
|
35
|
+
"--datagrid-justify": justify,
|
|
36
|
+
gridColumn: `${col + 1} / span ${colSpan}`,
|
|
37
|
+
insetInline: `var(--datagrid-cell-inset-${col})`,
|
|
38
|
+
};
|
|
39
|
+
}, []);
|
|
40
|
+
const renderVirtualCell = useCallback(({ column, data, row, col, isHeader, }) => {
|
|
41
|
+
const { id, fixed, justify, colSpan, render, title, sorter, renderHeader, } = column;
|
|
42
|
+
const style = {
|
|
43
|
+
...getVirtualCellStyle({ justify, col, colSpan }),
|
|
44
|
+
...(isHeader ? { insetBlockStart: 0 } : null),
|
|
45
|
+
};
|
|
46
|
+
const order = isHeader && sortBy === id ? sortType : "";
|
|
47
|
+
return (jsxs("div", { "data-col": id, className: classNames("i-datagrid-cell", {
|
|
48
|
+
[`i-datagrid-cell-fixed-${fixed}`]: fixed,
|
|
49
|
+
"i-datagrid-has-sorter": isHeader && sorter,
|
|
50
|
+
}), style: style, children: [isHeader
|
|
51
|
+
? (renderHeader?.(column, col) ?? (jsx("div", { className: classNames("i-datagrid-cell-content", {
|
|
52
|
+
"i-datagrid-cell-content-ellipsis": cellEllipsis,
|
|
53
|
+
}), children: title || id })))
|
|
54
|
+
: (render?.(data?.[id], data, row, col) ?? (jsx("div", { className: classNames("i-datagrid-cell-content", {
|
|
55
|
+
"i-datagrid-cell-content-ellipsis": cellEllipsis,
|
|
56
|
+
}), children: data?.[id] }))), isHeader && sorter && jsx(Sorter, { type: order }), isHeader && resizable && (jsx(Resize, { index: col, onWidthChange: onWidthChange }))] }, id));
|
|
57
|
+
}, [
|
|
58
|
+
cellEllipsis,
|
|
59
|
+
getVirtualCellStyle,
|
|
60
|
+
onWidthChange,
|
|
61
|
+
resizable,
|
|
62
|
+
sortBy,
|
|
63
|
+
sortType,
|
|
64
|
+
]);
|
|
65
|
+
const handleHeaderClick = useCallback((e) => {
|
|
66
|
+
const el = e.target?.closest?.(".i-datagrid-cell[data-col]");
|
|
67
|
+
const id = el?.dataset?.col;
|
|
68
|
+
onHeaderClick(id ? columnById.get(id) : undefined, e);
|
|
69
|
+
}, [columnById, onHeaderClick]);
|
|
70
|
+
const handleBodyScroll = useCallback((e) => {
|
|
71
|
+
const el = e.currentTarget;
|
|
72
|
+
if (!el)
|
|
73
|
+
return;
|
|
74
|
+
if (headerRef.current &&
|
|
75
|
+
headerRef.current.scrollLeft !== el.scrollLeft) {
|
|
76
|
+
headerRef.current.scrollLeft = el.scrollLeft;
|
|
77
|
+
}
|
|
78
|
+
}, []);
|
|
79
|
+
const handleReachEnd = useCallback(() => {
|
|
80
|
+
if (virtual.onReachEnd) {
|
|
81
|
+
virtual.onReachEnd();
|
|
82
|
+
return;
|
|
83
|
+
}
|
|
84
|
+
onScroll?.(undefined);
|
|
85
|
+
}, [onScroll, virtual.onReachEnd]);
|
|
86
|
+
const handleRowsRendered = useCallback((_visible, overscan) => {
|
|
87
|
+
if (!virtual.hasMore)
|
|
88
|
+
return;
|
|
89
|
+
const threshold = virtual.threshold ?? 8;
|
|
90
|
+
const stopIndex = overscan?.stopIndex ?? -1;
|
|
91
|
+
if (stopIndex < rows.length - 1 - threshold)
|
|
92
|
+
return;
|
|
93
|
+
if (triggerRef.current.rowCount === rows.length)
|
|
94
|
+
return;
|
|
95
|
+
triggerRef.current.rowCount = rows.length;
|
|
96
|
+
handleReachEnd();
|
|
97
|
+
}, [handleReachEnd, rows.length, virtual.hasMore, virtual.threshold]);
|
|
98
|
+
const handleHeaderScroll = useCallback((e) => {
|
|
99
|
+
const el = e.currentTarget;
|
|
100
|
+
if (!el)
|
|
101
|
+
return;
|
|
102
|
+
const listEl = listRef.current?.element;
|
|
103
|
+
if (listEl && listEl.scrollLeft !== el.scrollLeft) {
|
|
104
|
+
listEl.scrollLeft = el.scrollLeft;
|
|
105
|
+
}
|
|
106
|
+
}, []);
|
|
107
|
+
const handleBodyClickCapture = useCallback((e, rowData, rowNum) => {
|
|
108
|
+
if (!onCellClick)
|
|
109
|
+
return;
|
|
110
|
+
const el = e.target?.closest?.(".i-datagrid-cell[data-col]");
|
|
111
|
+
const id = el?.dataset?.col;
|
|
112
|
+
if (!id)
|
|
113
|
+
return;
|
|
114
|
+
const column = columnById.get(id);
|
|
115
|
+
const col = columnIndexById.get(id);
|
|
116
|
+
if (!column || col == null)
|
|
117
|
+
return;
|
|
118
|
+
onCellClick(rowData, column, rowNum, col, e);
|
|
119
|
+
}, [columnById, columnIndexById, onCellClick]);
|
|
120
|
+
const handleBodyDoubleClickCapture = useCallback((e, rowData, rowNum) => {
|
|
121
|
+
if (!onCellDoubleClick)
|
|
122
|
+
return;
|
|
123
|
+
const el = e.target?.closest?.(".i-datagrid-cell[data-col]");
|
|
124
|
+
const id = el?.dataset?.col;
|
|
125
|
+
if (!id)
|
|
126
|
+
return;
|
|
127
|
+
const column = columnById.get(id);
|
|
128
|
+
const col = columnIndexById.get(id);
|
|
129
|
+
if (!column || col == null)
|
|
130
|
+
return;
|
|
131
|
+
onCellDoubleClick(rowData, column, rowNum, col, e);
|
|
132
|
+
}, [columnById, columnIndexById, onCellDoubleClick]);
|
|
133
|
+
useEffect(() => {
|
|
134
|
+
const el = wrapRef.current;
|
|
135
|
+
if (!el)
|
|
136
|
+
return;
|
|
137
|
+
const update = () => {
|
|
138
|
+
if (rafRef.current.viewport)
|
|
139
|
+
cancelAnimationFrame(rafRef.current.viewport);
|
|
140
|
+
rafRef.current.viewport = requestAnimationFrame(() => {
|
|
141
|
+
rafRef.current.viewport = 0;
|
|
142
|
+
const r = el.getBoundingClientRect();
|
|
143
|
+
const w = Math.round(r.width);
|
|
144
|
+
const h = Math.round(r.height);
|
|
145
|
+
setViewport((prev) => {
|
|
146
|
+
if (prev.width === w && prev.height === h)
|
|
147
|
+
return prev;
|
|
148
|
+
return { width: w, height: h };
|
|
149
|
+
});
|
|
150
|
+
});
|
|
151
|
+
};
|
|
152
|
+
update();
|
|
153
|
+
ro.observe?.(el, update);
|
|
154
|
+
return () => {
|
|
155
|
+
ro.unobserve?.(el);
|
|
156
|
+
if (rafRef.current.viewport)
|
|
157
|
+
cancelAnimationFrame(rafRef.current.viewport);
|
|
158
|
+
rafRef.current.viewport = 0;
|
|
159
|
+
};
|
|
160
|
+
}, [ro, wrapRef]);
|
|
161
|
+
useEffect(() => {
|
|
162
|
+
const el = headerInnerRef.current;
|
|
163
|
+
if (!el)
|
|
164
|
+
return;
|
|
165
|
+
const update = () => {
|
|
166
|
+
if (rafRef.current.contentWidth) {
|
|
167
|
+
cancelAnimationFrame(rafRef.current.contentWidth);
|
|
168
|
+
}
|
|
169
|
+
rafRef.current.contentWidth = requestAnimationFrame(() => {
|
|
170
|
+
rafRef.current.contentWidth = 0;
|
|
171
|
+
const w = Math.ceil(el.scrollWidth);
|
|
172
|
+
setContentWidth((prev) => (prev === w ? prev : w));
|
|
173
|
+
});
|
|
174
|
+
};
|
|
175
|
+
update();
|
|
176
|
+
ro.observe?.(el, update);
|
|
177
|
+
return () => {
|
|
178
|
+
ro.unobserve?.(el);
|
|
179
|
+
if (rafRef.current.contentWidth) {
|
|
180
|
+
cancelAnimationFrame(rafRef.current.contentWidth);
|
|
181
|
+
}
|
|
182
|
+
rafRef.current.contentWidth = 0;
|
|
183
|
+
};
|
|
184
|
+
}, [ro]);
|
|
185
|
+
useEffect(() => {
|
|
186
|
+
triggerRef.current.rowCount = -1;
|
|
187
|
+
}, [rows.length, virtual.hasMore]);
|
|
188
|
+
useEffect(() => {
|
|
189
|
+
if (!loading)
|
|
190
|
+
return;
|
|
191
|
+
const listEl = listRef.current?.element;
|
|
192
|
+
listEl?.scrollTo({ top: 0, left: 0 });
|
|
193
|
+
headerRef.current?.scrollTo({ top: 0, left: 0 });
|
|
194
|
+
}, [loading]);
|
|
195
|
+
const listHeight = Math.max(0, (typeof height === "number" ? height : viewport.height || 360) -
|
|
196
|
+
(header ? virtual.rowHeight : 0));
|
|
197
|
+
const hasVerticalScrollbar = rows.length * virtual.rowHeight > listHeight + 1;
|
|
198
|
+
const scrollbarSize = hasVerticalScrollbar ? getScrollbarSize() : 0;
|
|
199
|
+
const measuredContentWidth = Math.max(contentWidth, viewport.width || 0);
|
|
200
|
+
const contentWidthPx = measuredContentWidth
|
|
201
|
+
? `${measuredContentWidth}px`
|
|
202
|
+
: "fit-content";
|
|
203
|
+
const headerCells = useMemo(() => columns.map((c, col) => renderVirtualCell({
|
|
204
|
+
column: c,
|
|
205
|
+
row: 0,
|
|
206
|
+
col,
|
|
207
|
+
isHeader: true,
|
|
208
|
+
})), [columns, renderVirtualCell]);
|
|
209
|
+
const headerInnerStyle = useMemo(() => ({
|
|
210
|
+
display: "grid",
|
|
211
|
+
gridTemplateColumns: "var(--grid-template-columns)",
|
|
212
|
+
height: virtual.rowHeight,
|
|
213
|
+
width: contentWidthPx,
|
|
214
|
+
minWidth: "100%",
|
|
215
|
+
}), [contentWidthPx, virtual.rowHeight]);
|
|
216
|
+
const listStyle = useMemo(() => ({
|
|
217
|
+
height: listHeight,
|
|
218
|
+
width: "100%",
|
|
219
|
+
overflow: "auto",
|
|
220
|
+
}), [listHeight]);
|
|
221
|
+
const headerWrapStyle = useMemo(() => scrollbarSize > 0
|
|
222
|
+
? {
|
|
223
|
+
paddingRight: scrollbarSize,
|
|
224
|
+
boxSizing: "content-box",
|
|
225
|
+
}
|
|
226
|
+
: undefined, [scrollbarSize]);
|
|
227
|
+
const loaderNode = useMemo(() => virtual.loader ?? jsx(Loading, { className: 'my-12' }), [virtual.loader]);
|
|
228
|
+
const rowComponent = useCallback(({ index, style: itemStyle }) => {
|
|
229
|
+
if (index >= rows.length) {
|
|
230
|
+
return (jsx("div", { style: {
|
|
231
|
+
...itemStyle,
|
|
232
|
+
width: contentWidthPx,
|
|
233
|
+
minWidth: "100%",
|
|
234
|
+
display: "flex",
|
|
235
|
+
alignItems: "center",
|
|
236
|
+
justifyContent: "center",
|
|
237
|
+
}, children: loaderNode }));
|
|
238
|
+
}
|
|
239
|
+
const rowData = rows[index];
|
|
240
|
+
const rowNum = index + (header ? 1 : 0);
|
|
241
|
+
const bg = striped && index % 2 === 0 ? "var(--background-1)" : undefined;
|
|
242
|
+
return (jsx("div", { style: {
|
|
243
|
+
...itemStyle,
|
|
244
|
+
width: contentWidthPx,
|
|
245
|
+
minWidth: "100%",
|
|
246
|
+
display: "grid",
|
|
247
|
+
gridTemplateColumns: "var(--grid-template-columns)",
|
|
248
|
+
height: virtual.rowHeight,
|
|
249
|
+
"--datagrid-cell-background": bg,
|
|
250
|
+
}, className: 'i-datagrid-row', onClickCapture: (e) => handleBodyClickCapture(e, rowData, rowNum), onDoubleClickCapture: (e) => handleBodyDoubleClickCapture(e, rowData, rowNum), onClick: () => onRowClick?.(rowData, rowNum), children: columns.map((c, col) => renderVirtualCell({
|
|
251
|
+
column: c,
|
|
252
|
+
data: rowData,
|
|
253
|
+
row: rowNum,
|
|
254
|
+
col,
|
|
255
|
+
})) }));
|
|
256
|
+
}, [
|
|
257
|
+
columns,
|
|
258
|
+
contentWidthPx,
|
|
259
|
+
handleBodyClickCapture,
|
|
260
|
+
handleBodyDoubleClickCapture,
|
|
261
|
+
header,
|
|
262
|
+
loaderNode,
|
|
263
|
+
onRowClick,
|
|
264
|
+
renderVirtualCell,
|
|
265
|
+
rows,
|
|
266
|
+
striped,
|
|
267
|
+
virtual.rowHeight,
|
|
268
|
+
]);
|
|
269
|
+
return (jsxs("div", { ref: containerRef, className: classNames("i-datagrid", {
|
|
270
|
+
"i-datagrid-loading": loading,
|
|
271
|
+
}), style: { display: "block", width: "100%", maxWidth: "100%" }, children: [header && (jsx("div", { ref: headerRef, className: 'i-datagrid-virtual-header', onScroll: handleHeaderScroll, style: headerWrapStyle, children: jsx("div", { ref: headerInnerRef, className: 'i-datagrid-header i-datagrid-row', style: headerInnerStyle, onClick: handleHeaderClick, children: headerCells }) })), jsx(List, { listRef: listRef, rowCount: rows.length + (virtual.hasMore ? 1 : 0), rowHeight: virtual.rowHeight, overscanCount: Math.max(3, virtual.threshold ?? 8), rowProps: {}, style: listStyle, onScroll: handleBodyScroll, onRowsRendered: handleRowsRendered, rowComponent: rowComponent }), rows.length < 1 && !virtual.hasMore && empty] }));
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
export { VirtualDatagrid as default };
|
|
275
|
+
//# sourceMappingURL=virtual.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"virtual.js","sources":["../../../../packages/components/datagrid/virtual.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport type { ReactNode } from \"react\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n// @ts-ignore\nimport { List as VirtualList, getScrollbarSize } from \"react-window\";\nimport { useResizeObserver } from \"../../js/hooks\";\nimport Loading from \"../loading\";\nimport Resize from \"./resize\";\nimport Sorter from \"./sorter\";\nimport type { IColumn, IData, VirtualDatagridProps } from \"./type\";\n\nexport default function VirtualDatagrid(props: VirtualDatagridProps) {\n\tconst {\n\t\tvirtual,\n\t\tcolumns,\n\t\trows,\n\t\theader,\n\t\tsortBy,\n\t\tsortType,\n\t\theight,\n\t\tloading,\n\t\tresizable,\n\t\tstriped,\n\t\tcellEllipsis,\n\t\tempty,\n\t\twrapRef,\n\t\tcontainerRef,\n\t\tonHeaderClick,\n\t\tonWidthChange,\n\t\tonRowClick,\n\t\tonCellClick,\n\t\tonCellDoubleClick,\n\t\tonScroll,\n\t} = props;\n\n\tconst headerRef = useRef<HTMLDivElement>(null);\n\tconst headerInnerRef = useRef<HTMLDivElement>(null);\n\tconst listRef = useRef<any>(null);\n\tconst ro = useResizeObserver();\n\tconst triggerRef = useRef({ rowCount: -1 });\n\tconst [viewport, setViewport] = useState({ width: 0, height: 0 });\n\tconst [contentWidth, setContentWidth] = useState(0);\n\tconst rafRef = useRef({\n\t\tviewport: 0 as number | 0,\n\t\tcontentWidth: 0 as number | 0,\n\t});\n\n\tconst columnById = useMemo(() => {\n\t\tconst map = new Map<string, IColumn>();\n\t\tcolumns.forEach((c) => map.set(c.id, c));\n\t\treturn map;\n\t}, [columns]);\n\n\tconst columnIndexById = useMemo(() => {\n\t\tconst map = new Map<string, number>();\n\t\tcolumns.forEach((c, i) => map.set(c.id, i));\n\t\treturn map;\n\t}, [columns]);\n\n\tconst getVirtualCellStyle = useCallback(\n\t\t({\n\t\t\tjustify,\n\t\t\tcol,\n\t\t\tcolSpan = 1,\n\t\t}: Pick<IColumn, \"justify\"> & { col: number; colSpan?: number }) => {\n\t\t\treturn {\n\t\t\t\t\"--datagrid-justify\": justify,\n\t\t\t\tgridColumn: `${col + 1} / span ${colSpan}`,\n\t\t\t\tinsetInline: `var(--datagrid-cell-inset-${col})`,\n\t\t\t} as any;\n\t\t},\n\t\t[],\n\t);\n\n\tconst renderVirtualCell = useCallback(\n\t\t({\n\t\t\tcolumn,\n\t\t\tdata,\n\t\t\trow,\n\t\t\tcol,\n\t\t\tisHeader,\n\t\t}: {\n\t\t\tcolumn: IColumn;\n\t\t\tdata?: IData;\n\t\t\trow: number;\n\t\t\tcol: number;\n\t\t\tisHeader?: boolean;\n\t\t}) => {\n\t\t\tconst {\n\t\t\t\tid,\n\t\t\t\tfixed,\n\t\t\t\tjustify,\n\t\t\t\tcolSpan,\n\t\t\t\trender,\n\t\t\t\ttitle,\n\t\t\t\tsorter,\n\t\t\t\trenderHeader,\n\t\t\t} = column;\n\n\t\t\tconst style = {\n\t\t\t\t...getVirtualCellStyle({ justify, col, colSpan }),\n\t\t\t\t...(isHeader ? { insetBlockStart: 0 } : null),\n\t\t\t};\n\n\t\t\tconst order = isHeader && sortBy === id ? sortType : \"\";\n\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tkey={id}\n\t\t\t\t\tdata-col={id}\n\t\t\t\t\tclassName={classNames(\"i-datagrid-cell\", {\n\t\t\t\t\t\t[`i-datagrid-cell-fixed-${fixed}`]: fixed,\n\t\t\t\t\t\t\"i-datagrid-has-sorter\": isHeader && sorter,\n\t\t\t\t\t})}\n\t\t\t\t\tstyle={style}\n\t\t\t\t>\n\t\t\t\t\t{isHeader\n\t\t\t\t\t\t? (renderHeader?.(column, col) ?? (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t\t\t\t\t\"i-datagrid-cell-content\",\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\"i-datagrid-cell-content-ellipsis\":\n\t\t\t\t\t\t\t\t\t\t\t\tcellEllipsis,\n\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\t\t{title || id}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t))\n\t\t\t\t\t\t: (render?.(data?.[id], data, row, col) ?? (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t\t\t\t\t\"i-datagrid-cell-content\",\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\"i-datagrid-cell-content-ellipsis\":\n\t\t\t\t\t\t\t\t\t\t\t\tcellEllipsis,\n\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\t\t{data?.[id]}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t))}\n\n\t\t\t\t\t{isHeader && sorter && <Sorter type={order} />}\n\t\t\t\t\t{isHeader && resizable && (\n\t\t\t\t\t\t<Resize index={col} onWidthChange={onWidthChange} />\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t);\n\t\t},\n\t\t[\n\t\t\tcellEllipsis,\n\t\t\tgetVirtualCellStyle,\n\t\t\tonWidthChange,\n\t\t\tresizable,\n\t\t\tsortBy,\n\t\t\tsortType,\n\t\t],\n\t);\n\n\tconst handleHeaderClick = useCallback(\n\t\t(e: any) => {\n\t\t\tconst el = (e.target as HTMLElement | null)?.closest?.(\n\t\t\t\t\".i-datagrid-cell[data-col]\",\n\t\t\t) as HTMLElement | null;\n\t\t\tconst id = el?.dataset?.col;\n\t\t\tonHeaderClick(id ? columnById.get(id) : undefined, e);\n\t\t},\n\t\t[columnById, onHeaderClick],\n\t);\n\n\tconst handleBodyScroll = useCallback((e: any) => {\n\t\tconst el = e.currentTarget as HTMLDivElement | null;\n\t\tif (!el) return;\n\n\t\tif (\n\t\t\theaderRef.current &&\n\t\t\theaderRef.current.scrollLeft !== el.scrollLeft\n\t\t) {\n\t\t\theaderRef.current.scrollLeft = el.scrollLeft;\n\t\t}\n\t}, []);\n\n\tconst handleReachEnd = useCallback(() => {\n\t\tif (virtual.onReachEnd) {\n\t\t\tvirtual.onReachEnd();\n\t\t\treturn;\n\t\t}\n\t\tonScroll?.(undefined as any);\n\t}, [onScroll, virtual.onReachEnd]);\n\n\tconst handleRowsRendered = useCallback(\n\t\t(_visible: any, overscan: any) => {\n\t\t\tif (!virtual.hasMore) return;\n\t\t\tconst threshold = virtual.threshold ?? 8;\n\t\t\tconst stopIndex = overscan?.stopIndex ?? -1;\n\t\t\tif (stopIndex < rows.length - 1 - threshold) return;\n\t\t\tif (triggerRef.current.rowCount === rows.length) return;\n\t\t\ttriggerRef.current.rowCount = rows.length;\n\t\t\thandleReachEnd();\n\t\t},\n\t\t[handleReachEnd, rows.length, virtual.hasMore, virtual.threshold],\n\t);\n\n\tconst handleHeaderScroll = useCallback((e: any) => {\n\t\tconst el = e.currentTarget as HTMLDivElement | null;\n\t\tif (!el) return;\n\t\tconst listEl = listRef.current?.element as HTMLDivElement | null;\n\t\tif (listEl && listEl.scrollLeft !== el.scrollLeft) {\n\t\t\tlistEl.scrollLeft = el.scrollLeft;\n\t\t}\n\t}, []);\n\n\tconst handleBodyClickCapture = useCallback(\n\t\t(e: any, rowData: IData, rowNum: number) => {\n\t\t\tif (!onCellClick) return;\n\t\t\tconst el = (e.target as HTMLElement | null)?.closest?.(\n\t\t\t\t\".i-datagrid-cell[data-col]\",\n\t\t\t) as HTMLElement | null;\n\t\t\tconst id = el?.dataset?.col;\n\t\t\tif (!id) return;\n\t\t\tconst column = columnById.get(id);\n\t\t\tconst col = columnIndexById.get(id);\n\t\t\tif (!column || col == null) return;\n\t\t\tonCellClick(rowData, column, rowNum, col, e);\n\t\t},\n\t\t[columnById, columnIndexById, onCellClick],\n\t);\n\n\tconst handleBodyDoubleClickCapture = useCallback(\n\t\t(e: any, rowData: IData, rowNum: number) => {\n\t\t\tif (!onCellDoubleClick) return;\n\t\t\tconst el = (e.target as HTMLElement | null)?.closest?.(\n\t\t\t\t\".i-datagrid-cell[data-col]\",\n\t\t\t) as HTMLElement | null;\n\t\t\tconst id = el?.dataset?.col;\n\t\t\tif (!id) return;\n\t\t\tconst column = columnById.get(id);\n\t\t\tconst col = columnIndexById.get(id);\n\t\t\tif (!column || col == null) return;\n\t\t\tonCellDoubleClick(rowData, column, rowNum, col, e);\n\t\t},\n\t\t[columnById, columnIndexById, onCellDoubleClick],\n\t);\n\n\tuseEffect(() => {\n\t\tconst el = wrapRef.current;\n\t\tif (!el) return;\n\n\t\tconst update = () => {\n\t\t\tif (rafRef.current.viewport)\n\t\t\t\tcancelAnimationFrame(rafRef.current.viewport);\n\t\t\trafRef.current.viewport = requestAnimationFrame(() => {\n\t\t\t\trafRef.current.viewport = 0;\n\t\t\t\tconst r = el.getBoundingClientRect();\n\t\t\t\tconst w = Math.round(r.width);\n\t\t\t\tconst h = Math.round(r.height);\n\t\t\t\tsetViewport((prev) => {\n\t\t\t\t\tif (prev.width === w && prev.height === h) return prev;\n\t\t\t\t\treturn { width: w, height: h };\n\t\t\t\t});\n\t\t\t});\n\t\t};\n\n\t\tupdate();\n\t\tro.observe?.(el, update);\n\t\treturn () => {\n\t\t\tro.unobserve?.(el);\n\t\t\tif (rafRef.current.viewport)\n\t\t\t\tcancelAnimationFrame(rafRef.current.viewport);\n\t\t\trafRef.current.viewport = 0;\n\t\t};\n\t}, [ro, wrapRef]);\n\n\tuseEffect(() => {\n\t\tconst el = headerInnerRef.current;\n\t\tif (!el) return;\n\n\t\tconst update = () => {\n\t\t\tif (rafRef.current.contentWidth) {\n\t\t\t\tcancelAnimationFrame(rafRef.current.contentWidth);\n\t\t\t}\n\t\t\trafRef.current.contentWidth = requestAnimationFrame(() => {\n\t\t\t\trafRef.current.contentWidth = 0;\n\t\t\t\tconst w = Math.ceil(el.scrollWidth);\n\t\t\t\tsetContentWidth((prev) => (prev === w ? prev : w));\n\t\t\t});\n\t\t};\n\n\t\tupdate();\n\t\tro.observe?.(el, update);\n\t\treturn () => {\n\t\t\tro.unobserve?.(el);\n\t\t\tif (rafRef.current.contentWidth) {\n\t\t\t\tcancelAnimationFrame(rafRef.current.contentWidth);\n\t\t\t}\n\t\t\trafRef.current.contentWidth = 0;\n\t\t};\n\t}, [ro]);\n\n\tuseEffect(() => {\n\t\ttriggerRef.current.rowCount = -1;\n\t}, [rows.length, virtual.hasMore]);\n\n\tuseEffect(() => {\n\t\tif (!loading) return;\n\t\tconst listEl = listRef.current?.element as HTMLDivElement | null;\n\t\tlistEl?.scrollTo({ top: 0, left: 0 });\n\t\theaderRef.current?.scrollTo({ top: 0, left: 0 });\n\t}, [loading]);\n\n\tconst listHeight = Math.max(\n\t\t0,\n\t\t(typeof height === \"number\" ? height : viewport.height || 360) -\n\t\t\t(header ? virtual.rowHeight : 0),\n\t);\n\tconst hasVerticalScrollbar =\n\t\trows.length * virtual.rowHeight > listHeight + 1;\n\tconst scrollbarSize = hasVerticalScrollbar ? getScrollbarSize() : 0;\n\tconst measuredContentWidth = Math.max(contentWidth, viewport.width || 0);\n\tconst contentWidthPx = measuredContentWidth\n\t\t? `${measuredContentWidth}px`\n\t\t: \"fit-content\";\n\n\tconst headerCells = useMemo(\n\t\t() =>\n\t\t\tcolumns.map((c, col) =>\n\t\t\t\trenderVirtualCell({\n\t\t\t\t\tcolumn: c,\n\t\t\t\t\trow: 0,\n\t\t\t\t\tcol,\n\t\t\t\t\tisHeader: true,\n\t\t\t\t}),\n\t\t\t),\n\t\t[columns, renderVirtualCell],\n\t);\n\n\tconst headerInnerStyle = useMemo(\n\t\t() => ({\n\t\t\tdisplay: \"grid\",\n\t\t\tgridTemplateColumns: \"var(--grid-template-columns)\",\n\t\t\theight: virtual.rowHeight,\n\t\t\twidth: contentWidthPx,\n\t\t\tminWidth: \"100%\",\n\t\t}),\n\t\t[contentWidthPx, virtual.rowHeight],\n\t);\n\n\tconst listStyle = useMemo(\n\t\t() => ({\n\t\t\theight: listHeight,\n\t\t\twidth: \"100%\",\n\t\t\toverflow: \"auto\",\n\t\t}),\n\t\t[listHeight],\n\t);\n\n\tconst headerWrapStyle = useMemo(\n\t\t() =>\n\t\t\tscrollbarSize > 0\n\t\t\t\t? {\n\t\t\t\t\t\tpaddingRight: scrollbarSize,\n\t\t\t\t\t\tboxSizing: \"content-box\" as const,\n\t\t\t\t\t}\n\t\t\t\t: undefined,\n\t\t[scrollbarSize],\n\t);\n\n\tconst loaderNode = useMemo<ReactNode>(\n\t\t() => virtual.loader ?? <Loading className='my-12' />,\n\t\t[virtual.loader],\n\t);\n\n\tconst rowComponent = useCallback(\n\t\t({ index, style: itemStyle }: any) => {\n\t\t\tif (index >= rows.length) {\n\t\t\t\treturn (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t...itemStyle,\n\t\t\t\t\t\t\twidth: contentWidthPx,\n\t\t\t\t\t\t\tminWidth: \"100%\",\n\t\t\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\t\t\talignItems: \"center\",\n\t\t\t\t\t\t\tjustifyContent: \"center\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{loaderNode}\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tconst rowData = rows[index];\n\t\t\tconst rowNum = index + (header ? 1 : 0);\n\t\t\tconst bg =\n\t\t\t\tstriped && index % 2 === 0 ? \"var(--background-1)\" : undefined;\n\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\t...itemStyle,\n\t\t\t\t\t\twidth: contentWidthPx,\n\t\t\t\t\t\tminWidth: \"100%\",\n\t\t\t\t\t\tdisplay: \"grid\",\n\t\t\t\t\t\tgridTemplateColumns: \"var(--grid-template-columns)\",\n\t\t\t\t\t\theight: virtual.rowHeight,\n\t\t\t\t\t\t\"--datagrid-cell-background\": bg,\n\t\t\t\t\t}}\n\t\t\t\t\tclassName='i-datagrid-row'\n\t\t\t\t\tonClickCapture={(e) =>\n\t\t\t\t\t\thandleBodyClickCapture(e, rowData, rowNum)\n\t\t\t\t\t}\n\t\t\t\t\tonDoubleClickCapture={(e) =>\n\t\t\t\t\t\thandleBodyDoubleClickCapture(e, rowData, rowNum)\n\t\t\t\t\t}\n\t\t\t\t\tonClick={() => onRowClick?.(rowData, rowNum)}\n\t\t\t\t>\n\t\t\t\t\t{columns.map((c, col) =>\n\t\t\t\t\t\trenderVirtualCell({\n\t\t\t\t\t\t\tcolumn: c,\n\t\t\t\t\t\t\tdata: rowData,\n\t\t\t\t\t\t\trow: rowNum,\n\t\t\t\t\t\t\tcol,\n\t\t\t\t\t\t}),\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t);\n\t\t},\n\t\t[\n\t\t\tcolumns,\n\t\t\tcontentWidthPx,\n\t\t\thandleBodyClickCapture,\n\t\t\thandleBodyDoubleClickCapture,\n\t\t\theader,\n\t\t\tloaderNode,\n\t\t\tonRowClick,\n\t\t\trenderVirtualCell,\n\t\t\trows,\n\t\t\tstriped,\n\t\t\tvirtual.rowHeight,\n\t\t],\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tref={containerRef}\n\t\t\tclassName={classNames(\"i-datagrid\", {\n\t\t\t\t\"i-datagrid-loading\": loading,\n\t\t\t})}\n\t\t\tstyle={{ display: \"block\", width: \"100%\", maxWidth: \"100%\" }}\n\t\t>\n\t\t\t{header && (\n\t\t\t\t<div\n\t\t\t\t\tref={headerRef}\n\t\t\t\t\tclassName='i-datagrid-virtual-header'\n\t\t\t\t\tonScroll={handleHeaderScroll}\n\t\t\t\t\tstyle={headerWrapStyle}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tref={headerInnerRef}\n\t\t\t\t\t\tclassName='i-datagrid-header i-datagrid-row'\n\t\t\t\t\t\tstyle={headerInnerStyle}\n\t\t\t\t\t\tonClick={handleHeaderClick}\n\t\t\t\t\t>\n\t\t\t\t\t\t{headerCells}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t<VirtualList\n\t\t\t\tlistRef={listRef}\n\t\t\t\trowCount={rows.length + (virtual.hasMore ? 1 : 0)}\n\t\t\t\trowHeight={virtual.rowHeight}\n\t\t\t\toverscanCount={Math.max(3, virtual.threshold ?? 8)}\n\t\t\t\trowProps={{}}\n\t\t\t\tstyle={listStyle}\n\t\t\t\tonScroll={handleBodyScroll}\n\t\t\t\tonRowsRendered={handleRowsRendered}\n\t\t\t\trowComponent={rowComponent}\n\t\t\t/>\n\t\t\t{rows.length < 1 && !virtual.hasMore && empty}\n\t\t</div>\n\t);\n}\n"],"names":["_jsxs","_jsx","VirtualList"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"description.js","sources":["../../../../packages/components/description/description.tsx"],"sourcesContent":["import classNames from \"classnames\";\
|
|
1
|
+
{"version":3,"file":"description.js","sources":["../../../../packages/components/description/description.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { CSSProperties, Fragment } from \"react\";\nimport \"./index.css\";\nimport { IDescription } from \"./type\";\n\nconst Description = (props: IDescription) => {\n\tconst {\n\t\tdata,\n\t\tcolon,\n\t\tcolumns = 1,\n\t\tgap = \".5em\",\n\t\talign,\n\t\tlabelWidth,\n\t\tlabelAlign,\n\t\tvertical,\n\t\tequally,\n\t\tstyle,\n\t\tclassName,\n\t} = props;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(\"i-description\", className)}\n\t\t\tstyle={\n\t\t\t\t{\n\t\t\t\t\t[\"--description-label-width\"]: labelWidth,\n\t\t\t\t\tgridTemplateColumns: `repeat(${columns}, ${\n\t\t\t\t\t\tequally ? \"1fr\" : \"auto\"\n\t\t\t\t\t})`,\n\t\t\t\t\tgap,\n\t\t\t\t\ttextAlign: align,\n\t\t\t\t\t...style,\n\t\t\t\t} as CSSProperties\n\t\t\t}\n\t\t>\n\t\t\t{data.map((item, i) => {\n\t\t\t\tconst {\n\t\t\t\t\tlabel,\n\t\t\t\t\tvalue,\n\t\t\t\t\tstyle,\n\t\t\t\t\thidden,\n\t\t\t\t\trowSpan = 1,\n\t\t\t\t\tcolSpan = 1,\n\t\t\t\t} = item;\n\n\t\t\t\tif (hidden) return <Fragment key={i} />;\n\n\t\t\t\treturn (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\tclassName={classNames(\"i-description-item\", {\n\t\t\t\t\t\t\t\"i-description-item-vertical\": vertical,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tgridColumn: `span ${colSpan}`,\n\t\t\t\t\t\t\tgridRow: `span ${rowSpan}`,\n\t\t\t\t\t\t\t...style,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{label && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName='i-description-label'\n\t\t\t\t\t\t\t\tstyle={{ textAlign: labelAlign }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t\t{colon}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div className='i-description-value'>{value}</div>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t})}\n\t\t</div>\n\t);\n};\n\nexport default Description;\n"],"names":["_jsx","_jsxs"],"mappings":";;;;AAKA,MAAM,WAAW,GAAG,CAAC,KAAmB,KAAI;AAC3C,IAAA,MAAM,EACL,IAAI,EACJ,KAAK,EACL,OAAO,GAAG,CAAC,EACX,GAAG,GAAG,MAAM,EACZ,KAAK,EACL,UAAU,EACV,UAAU,EACV,QAAQ,EACR,OAAO,EACP,KAAK,EACL,SAAS,GACT,GAAG,KAAK;AAET,IAAA,QACCA,GAAA,CAAA,KAAA,EAAA,EACC,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE,SAAS,CAAC,EACjD,KAAK,EACJ;YACC,CAAC,2BAA2B,GAAG,UAAU;AACzC,YAAA,mBAAmB,EAAE,CAAA,OAAA,EAAU,OAAO,CAAA,EAAA,EACrC,OAAO,GAAG,KAAK,GAAG,MACnB,CAAA,CAAA,CAAG;YACH,GAAG;AACH,YAAA,SAAS,EAAE,KAAK;AAChB,YAAA,GAAG,KAAK;SACS,EAAA,QAAA,EAGlB,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAI;AACrB,YAAA,MAAM,EACL,KAAK,EACL,KAAK,EACL,KAAK,EACL,MAAM,EACN,OAAO,GAAG,CAAC,EACX,OAAO,GAAG,CAAC,GACX,GAAG,IAAI;AAER,YAAA,IAAI,MAAM;AAAE,gBAAA,OAAOA,GAAA,CAAC,QAAQ,EAAA,EAAA,EAAM,CAAC,CAAI;AAEvC,YAAA,QACCC,IAAA,CAAA,KAAA,EAAA,EAEC,SAAS,EAAE,UAAU,CAAC,oBAAoB,EAAE;AAC3C,oBAAA,6BAA6B,EAAE,QAAQ;iBACvC,CAAC,EACF,KAAK,EAAE;oBACN,UAAU,EAAE,CAAA,KAAA,EAAQ,OAAO,CAAA,CAAE;oBAC7B,OAAO,EAAE,CAAA,KAAA,EAAQ,OAAO,CAAA,CAAE;AAC1B,oBAAA,GAAG,KAAK;AACR,iBAAA,EAAA,QAAA,EAAA,CAEA,KAAK,KACLA,IAAA,CAAA,KAAA,EAAA,EACC,SAAS,EAAC,qBAAqB,EAC/B,KAAK,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,EAAA,QAAA,EAAA,CAE/B,KAAK,EACL,KAAK,CAAA,EAAA,CACD,CACN,EACDD,aAAK,SAAS,EAAC,qBAAqB,EAAA,QAAA,EAAE,KAAK,EAAA,CAAO,CAAA,EAAA,EAnB7C,CAAC,CAoBD;QAER,CAAC,CAAC,EAAA,CACG;AAER;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drawer.js","sources":["../../../../packages/components/drawer/drawer.tsx"],"sourcesContent":["import classNames from \"classnames\";\
|
|
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\tdocument.body\n\t);\n}\n\nexport default Drawer;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.js","sources":["../../../../packages/components/dropdown/dropdown.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\
|
|
1
|
+
{"version":3,"file":"dropdown.js","sources":["../../../../packages/components/dropdown/dropdown.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport List from \"../list\";\nimport Popup from \"../popup\";\nimport \"./index.css\";\nimport Item from \"./item\";\nimport { IDropdown } from \"./type\";\n\nconst Dropdown = (props: IDropdown) => {\n\tconst { visible, width, content, children, ...restProps } = props;\n\tconst [active, setActive] = useState(visible);\n\n\tif (!content) {\n\t\treturn children;\n\t}\n\n\tconst handleVisibleChange = (v: boolean) => {\n\t\tsetActive(v);\n\t\tif (props.onVisibleChange) {\n\t\t\tprops.onVisibleChange(v);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tsetActive(visible);\n\t}, [visible]);\n\n\treturn (\n\t\t<Popup\n\t\t\ttrigger='click'\n\t\t\tposition='bottom'\n\t\t\tcontent={\n\t\t\t\t<List\n\t\t\t\t\tclassName='i-dropdown-content'\n\t\t\t\t\tstyle={{ minWidth: width }}\n\t\t\t\t>\n\t\t\t\t\t{typeof content === \"function\"\n\t\t\t\t\t\t? content(() => setActive(false))\n\t\t\t\t\t\t: content}\n\t\t\t\t</List>\n\t\t\t}\n\t\t\t{...restProps}\n\t\t\ttouchable\n\t\t\tvisible={active}\n\t\t\tonVisibleChange={handleVisibleChange}\n\t\t>\n\t\t\t{children}\n\t\t</Popup>\n\t);\n};\n\nDropdown.Item = Item;\n\nexport default Dropdown;\n"],"names":["_jsx"],"mappings":";;;;;;AAOA,MAAM,QAAQ,GAAG,CAAC,KAAgB,KAAI;AACrC,IAAA,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK;IACjE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC;IAE7C,IAAI,CAAC,OAAO,EAAE;AACb,QAAA,OAAO,QAAQ;IAChB;AAEA,IAAA,MAAM,mBAAmB,GAAG,CAAC,CAAU,KAAI;QAC1C,SAAS,CAAC,CAAC,CAAC;AACZ,QAAA,IAAI,KAAK,CAAC,eAAe,EAAE;AAC1B,YAAA,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC;QACzB;AACD,IAAA,CAAC;IAED,SAAS,CAAC,MAAK;QACd,SAAS,CAAC,OAAO,CAAC;AACnB,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;AAEb,IAAA,QACCA,GAAA,CAAC,KAAK,EAAA,EACL,OAAO,EAAC,OAAO,EACf,QAAQ,EAAC,QAAQ,EACjB,OAAO,EACNA,GAAA,CAAC,IAAI,EAAA,EACJ,SAAS,EAAC,oBAAoB,EAC9B,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAA,QAAA,EAEzB,OAAO,OAAO,KAAK;kBACjB,OAAO,CAAC,MAAM,SAAS,CAAC,KAAK,CAAC;AAChC,kBAAE,OAAO,EAAA,CACJ,KAEJ,SAAS,EACb,SAAS,EAAA,IAAA,EACT,OAAO,EAAE,MAAM,EACf,eAAe,EAAE,mBAAmB,YAEnC,QAAQ,EAAA,CACF;AAEV;AAEA,QAAQ,CAAC,IAAI,GAAG,IAAI;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item.js","sources":["../../../../packages/components/dropdown/item.tsx"],"sourcesContent":["import List from \"../list\";\
|
|
1
|
+
{"version":3,"file":"item.js","sources":["../../../../packages/components/dropdown/item.tsx"],"sourcesContent":["import List from \"../list\";\nimport Popup from \"../popup\";\nimport { IDropItem } from \"./type\";\n\nconst { Item: ListItem } = List;\n\nconst Item = (props: IDropItem) => {\n\tconst { more, moreProps, onClick, ...restProps } = props;\n\tconst Li = (\n\t\t<ListItem\n\t\t\tonClick={(e) => {\n\t\t\t\te.stopPropagation();\n\t\t\t\tonClick?.(e);\n\t\t\t}}\n\t\t\t{...restProps}\n\t\t/>\n\t);\n\n\tif (!more) return Li;\n\n\treturn (\n\t\t<Popup\n\t\t\tposition='right'\n\t\t\ttouchable\n\t\t\tarrow={false}\n\t\t\talign='start'\n\t\t\toffset={10}\n\t\t\thideDelay={240}\n\t\t\t{...moreProps}\n\t\t\tcontent={\n\t\t\t\t<List\n\t\t\t\t\tclassName='i-dropdown-content'\n\t\t\t\t\tonClick={(e) => e.stopPropagation()}\n\t\t\t\t>\n\t\t\t\t\t{more}\n\t\t\t\t</List>\n\t\t\t}\n\t\t>\n\t\t\t{Li}\n\t\t</Popup>\n\t);\n};\n\nexport default Item;\n"],"names":["_jsx"],"mappings":";;;;AAIA,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI;AAE/B,MAAM,IAAI,GAAG,CAAC,KAAgB,KAAI;AACjC,IAAA,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK;IACxD,MAAM,EAAE,IACPA,GAAA,CAAC,QAAQ,EAAA,EACR,OAAO,EAAE,CAAC,CAAC,KAAI;YACd,CAAC,CAAC,eAAe,EAAE;AACnB,YAAA,OAAO,GAAG,CAAC,CAAC;AACb,QAAA,CAAC,EAAA,GACG,SAAS,EAAA,CACZ,CACF;AAED,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,EAAE;IAEpB,QACCA,GAAA,CAAC,KAAK,EAAA,EACL,QAAQ,EAAC,OAAO,EAChB,SAAS,EAAA,IAAA,EACT,KAAK,EAAE,KAAK,EACZ,KAAK,EAAC,OAAO,EACb,MAAM,EAAE,EAAE,EACV,SAAS,EAAE,GAAG,EAAA,GACV,SAAS,EACb,OAAO,EACNA,GAAA,CAAC,IAAI,EAAA,EACJ,SAAS,EAAC,oBAAoB,EAC9B,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,eAAe,EAAE,EAAA,QAAA,EAElC,IAAI,EAAA,CACC,EAAA,QAAA,EAGP,EAAE,EAAA,CACI;AAEV;;;;"}
|