@ioca/react 1.5.17 → 1.5.19
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/lib/cjs/components/editor/editor.js +4 -2
- package/lib/cjs/components/editor/editor.js.map +1 -1
- package/lib/cjs/components/input/input.js +3 -1
- package/lib/cjs/components/input/input.js.map +1 -1
- package/lib/cjs/components/input/textarea.js +1 -1
- package/lib/cjs/components/input/textarea.js.map +1 -1
- package/lib/cjs/components/message/index.js +3 -2
- package/lib/cjs/components/message/index.js.map +1 -1
- package/lib/cjs/components/message/message.js +93 -50
- package/lib/cjs/components/message/message.js.map +1 -1
- package/lib/cjs/components/modal/content.js +16 -8
- package/lib/cjs/components/modal/content.js.map +1 -1
- package/lib/cjs/components/modal/modal.js +60 -19
- package/lib/cjs/components/modal/modal.js.map +1 -1
- package/lib/cjs/components/modal/modalManager.js +83 -0
- package/lib/cjs/components/modal/modalManager.js.map +1 -0
- package/lib/cjs/components/picker/daterange/daterange.js +60 -0
- package/lib/cjs/components/picker/daterange/daterange.js.map +1 -0
- package/lib/cjs/components/picker/daterange/index.js +11 -0
- package/lib/cjs/components/picker/daterange/index.js.map +1 -0
- package/lib/cjs/components/picker/daterange/panel.js +55 -0
- package/lib/cjs/components/picker/daterange/panel.js.map +1 -0
- package/lib/cjs/components/picker/dates/dates.js +12 -4
- package/lib/cjs/components/picker/dates/dates.js.map +1 -1
- package/lib/cjs/components/picker/dates/index.js +6 -2
- package/lib/cjs/components/picker/dates/index.js.map +1 -1
- package/lib/cjs/components/picker/dates/panel.js +22 -9
- package/lib/cjs/components/picker/dates/panel.js.map +1 -1
- package/lib/cjs/components/picker/time/index.js +6 -2
- package/lib/cjs/components/picker/time/index.js.map +1 -1
- package/lib/cjs/components/popconfirm/popconfirm.js +2 -4
- package/lib/cjs/components/popconfirm/popconfirm.js.map +1 -1
- package/lib/cjs/index.js +10 -8
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/js/hooks.js +5 -2
- package/lib/cjs/js/hooks.js.map +1 -1
- package/lib/css/colors.css +2 -2
- package/lib/css/index.css +1 -1
- package/lib/css/index.css.map +1 -1
- package/lib/css/input.css +17 -1
- package/lib/es/components/editor/editor.js +4 -2
- package/lib/es/components/editor/editor.js.map +1 -1
- package/lib/es/components/input/input.js +3 -1
- package/lib/es/components/input/input.js.map +1 -1
- package/lib/es/components/input/textarea.js +1 -1
- package/lib/es/components/input/textarea.js.map +1 -1
- package/lib/es/components/message/index.js +3 -3
- package/lib/es/components/message/index.js.map +1 -1
- package/lib/es/components/message/message.js +93 -51
- package/lib/es/components/message/message.js.map +1 -1
- package/lib/es/components/modal/content.js +18 -10
- package/lib/es/components/modal/content.js.map +1 -1
- package/lib/es/components/modal/modal.js +61 -20
- package/lib/es/components/modal/modal.js.map +1 -1
- package/lib/es/components/modal/modalManager.js +76 -0
- package/lib/es/components/modal/modalManager.js.map +1 -0
- package/lib/es/components/picker/daterange/daterange.js +50 -0
- package/lib/es/components/picker/daterange/daterange.js.map +1 -0
- package/lib/es/components/picker/daterange/index.js +6 -0
- package/lib/es/components/picker/daterange/index.js.map +1 -0
- package/lib/es/components/picker/daterange/panel.js +47 -0
- package/lib/es/components/picker/daterange/panel.js.map +1 -0
- package/lib/es/components/picker/dates/dates.js +12 -4
- package/lib/es/components/picker/dates/dates.js.map +1 -1
- package/lib/es/components/picker/dates/index.js +6 -2
- package/lib/es/components/picker/dates/index.js.map +1 -1
- package/lib/es/components/picker/dates/panel.js +22 -9
- package/lib/es/components/picker/dates/panel.js.map +1 -1
- package/lib/es/components/picker/time/index.js +6 -2
- package/lib/es/components/picker/time/index.js.map +1 -1
- package/lib/es/components/popconfirm/popconfirm.js +2 -4
- package/lib/es/components/popconfirm/popconfirm.js.map +1 -1
- package/lib/es/index.js +2 -1
- package/lib/es/index.js.map +1 -1
- package/lib/es/js/hooks.js +5 -2
- package/lib/es/js/hooks.js.map +1 -1
- package/lib/index.js +384 -104
- package/lib/types/components/input/type.d.ts +1 -0
- package/lib/types/components/message/index.d.ts +5 -3
- package/lib/types/components/message/message.d.ts +5 -4
- package/lib/types/components/message/type.d.ts +25 -12
- package/lib/types/components/picker/daterange/daterange.d.ts +6 -0
- package/lib/types/components/picker/daterange/index.d.ts +5 -0
- package/lib/types/components/picker/type.d.ts +11 -2
- package/lib/types/index.d.ts +2 -1
- package/package.json +1 -1
|
@@ -9,32 +9,48 @@ var reactDom = require('react-dom');
|
|
|
9
9
|
var hooks = require('../../js/hooks.js');
|
|
10
10
|
var content = require('./content.js');
|
|
11
11
|
var context = require('./context.js');
|
|
12
|
+
var modalManager = require('./modalManager.js');
|
|
12
13
|
var useModal = require('./useModal.js');
|
|
13
14
|
|
|
14
15
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
|
|
15
16
|
|
|
16
17
|
var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
|
|
17
18
|
|
|
19
|
+
let midCounter = 0;
|
|
18
20
|
function Modal(props) {
|
|
19
21
|
const { visible, title, footer, okButtonProps, cancelButtonProps, closable = true, hideBackdrop, backdropClosable = true, hideCloseButton, disableEsc, width, height, customized, fixed, hideShadow, children, style, className, keepDOM, footerLeft, onClick, onVisibleChange, onClose, onOk, ...restProps } = props;
|
|
22
|
+
const midRef = react.useRef(`modal-${++midCounter}`);
|
|
23
|
+
const mid = midRef.current;
|
|
20
24
|
const [show, setShow] = react.useState(visible);
|
|
21
25
|
const [active, setActive] = react.useState(false);
|
|
22
26
|
const [bounced, setBounced] = react.useState(false);
|
|
23
27
|
const [mounted, setMounted] = react.useState(false);
|
|
28
|
+
const [top, setTop] = react.useState(false);
|
|
24
29
|
const toggable = react.useRef(true);
|
|
25
|
-
const
|
|
30
|
+
const layerRef = react.useRef(null);
|
|
31
|
+
const handleShow = react.useCallback(() => {
|
|
26
32
|
if (!toggable.current)
|
|
27
33
|
return;
|
|
28
|
-
(!keepDOM || !show)
|
|
34
|
+
if (!keepDOM || !show)
|
|
35
|
+
setShow(true);
|
|
29
36
|
toggable.current = false;
|
|
30
|
-
|
|
37
|
+
modalManager.updateVisible(mid, true);
|
|
38
|
+
const raf = requestAnimationFrame(() => {
|
|
39
|
+
if (!layerRef.current) {
|
|
40
|
+
requestAnimationFrame(() => {
|
|
41
|
+
setActive(true);
|
|
42
|
+
onVisibleChange?.(true);
|
|
43
|
+
toggable.current = true;
|
|
44
|
+
});
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
31
47
|
setActive(true);
|
|
32
48
|
onVisibleChange?.(true);
|
|
33
49
|
toggable.current = true;
|
|
34
|
-
}
|
|
35
|
-
return () =>
|
|
36
|
-
};
|
|
37
|
-
const handleHide = () => {
|
|
50
|
+
});
|
|
51
|
+
return () => cancelAnimationFrame(raf);
|
|
52
|
+
}, [keepDOM, show, onVisibleChange]);
|
|
53
|
+
const handleHide = react.useCallback(() => {
|
|
38
54
|
if (!toggable.current)
|
|
39
55
|
return;
|
|
40
56
|
toggable.current = false;
|
|
@@ -47,28 +63,53 @@ function Modal(props) {
|
|
|
47
63
|
return () => clearTimeout(timer);
|
|
48
64
|
}
|
|
49
65
|
setActive(false);
|
|
66
|
+
modalManager.updateVisible(mid, false);
|
|
50
67
|
const timer = setTimeout(() => {
|
|
51
|
-
!keepDOM
|
|
68
|
+
if (!keepDOM)
|
|
69
|
+
setShow(false);
|
|
52
70
|
toggable.current = true;
|
|
53
71
|
onVisibleChange?.(false);
|
|
54
72
|
onClose?.();
|
|
55
73
|
}, 240);
|
|
56
74
|
return () => clearTimeout(timer);
|
|
57
|
-
};
|
|
75
|
+
}, [closable, keepDOM, onClose, onVisibleChange]);
|
|
58
76
|
const handleBackdropClick = () => {
|
|
59
77
|
backdropClosable && handleHide();
|
|
60
78
|
};
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
79
|
+
react.useEffect(() => {
|
|
80
|
+
const unsub = modalManager.subscribe(() => {
|
|
81
|
+
setTop(modalManager.isTop(mid));
|
|
82
|
+
});
|
|
83
|
+
return unsub;
|
|
84
|
+
}, []);
|
|
85
|
+
react.useEffect(() => {
|
|
86
|
+
const unregister = modalManager.register({
|
|
87
|
+
mid,
|
|
88
|
+
visible: !!visible,
|
|
89
|
+
hideBackdrop: !!hideBackdrop,
|
|
90
|
+
closable: !!closable,
|
|
91
|
+
});
|
|
92
|
+
return unregister;
|
|
93
|
+
}, []);
|
|
66
94
|
react.useEffect(() => {
|
|
67
95
|
visible ? handleShow() : handleHide();
|
|
68
96
|
}, [visible]);
|
|
97
|
+
react.useEffect(() => {
|
|
98
|
+
if (!show)
|
|
99
|
+
return;
|
|
100
|
+
const raf = requestAnimationFrame(() => {
|
|
101
|
+
setActive(top);
|
|
102
|
+
});
|
|
103
|
+
return () => cancelAnimationFrame(raf);
|
|
104
|
+
}, [top]);
|
|
69
105
|
react.useEffect(() => {
|
|
70
106
|
setMounted(true);
|
|
71
107
|
}, []);
|
|
108
|
+
hooks.useKeydown((e) => {
|
|
109
|
+
if (e.code !== "Escape" || !visible || !top)
|
|
110
|
+
return;
|
|
111
|
+
handleHide();
|
|
112
|
+
}, { disabled: disableEsc });
|
|
72
113
|
const handleClick = () => {
|
|
73
114
|
if (typeof document === "undefined")
|
|
74
115
|
return;
|
|
@@ -76,12 +117,12 @@ function Modal(props) {
|
|
|
76
117
|
};
|
|
77
118
|
if (!show || !mounted)
|
|
78
119
|
return null;
|
|
79
|
-
return reactDom.createPortal(jsxRuntime.jsx("div", { className: classNames__default("i-modal-
|
|
80
|
-
"i-modal-backdrop": !hideBackdrop,
|
|
81
|
-
"i-modal-customized": customized,
|
|
120
|
+
return reactDom.createPortal(jsxRuntime.jsx("div", { ref: layerRef, className: classNames__default("i-modal-layer", {
|
|
82
121
|
"i-modal-active": active,
|
|
122
|
+
"i-modal-customized": customized,
|
|
123
|
+
"i-modal-hide-backdrop": hideBackdrop,
|
|
83
124
|
fixed,
|
|
84
|
-
}, className), style: style, onClick: handleBackdropClick,
|
|
125
|
+
}, className), style: style, onClick: handleBackdropClick, children: jsxRuntime.jsx("div", { className: classNames__default("i-modal", {
|
|
85
126
|
bounced,
|
|
86
127
|
shadow: !hideShadow,
|
|
87
128
|
}), style: {
|
|
@@ -91,7 +132,7 @@ function Modal(props) {
|
|
|
91
132
|
e.stopPropagation();
|
|
92
133
|
handleClick();
|
|
93
134
|
onClick?.(e);
|
|
94
|
-
}, role:
|
|
135
|
+
}, role: "dialog", "aria-modal": top, "data-mid": mid, ...restProps, children: jsxRuntime.jsxs(context.default.Provider, { value: true, children: [customized && children, !customized && (jsxRuntime.jsx(content.default, { title: title, hideCloseButton: hideCloseButton, footer: footer, okButtonProps: okButtonProps, cancelButtonProps: cancelButtonProps, children: children, footerLeft: footerLeft, onOk: onOk, onClose: handleHide }))] }) }) }), modalManager.getContainer());
|
|
95
136
|
}
|
|
96
137
|
Modal.useModal = useModal.default;
|
|
97
138
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.js","sources":["../../../../packages/components/modal/modal.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useKeydown } from \"../../js/hooks\";\nimport Content from \"./content\";\nimport ModalContext from \"./context\";\nimport \"./index.css\";\nimport { CompositionModal, IModal } from \"./type\";\nimport useModal from \"./useModal\";\n\nfunction Modal(props: IModal) {\n\tconst {\n\t\tvisible,\n\t\ttitle,\n\t\tfooter,\n\t\tokButtonProps,\n\t\tcancelButtonProps,\n\t\tclosable = true,\n\t\thideBackdrop,\n\t\tbackdropClosable = true,\n\t\thideCloseButton,\n\t\tdisableEsc,\n\t\twidth,\n\t\theight,\n\t\tcustomized,\n\t\tfixed,\n\t\thideShadow,\n\t\tchildren,\n\t\tstyle,\n\t\tclassName,\n\t\tkeepDOM,\n\t\tfooterLeft,\n\t\tonClick,\n\t\tonVisibleChange,\n\t\tonClose,\n\t\tonOk,\n\t\t...restProps\n\t} = props;\n\n\tconst [show, setShow] = useState(visible);\n\tconst [active, setActive] = useState(false);\n\tconst [bounced, setBounced] = useState(false);\n\tconst [mounted, setMounted] = useState(false);\n\tconst toggable = useRef(true);\n\n\tconst handleShow = async () => {\n\t\tif (!toggable.current) return;\n\n\t\t(!keepDOM || !show) && setShow(true);\n\t\ttoggable.current = false;\n\n\t\tconst timer = setTimeout(() => {\n\t\t\tsetActive(true);\n\t\t\tonVisibleChange?.(true);\n\t\t\ttoggable.current = true;\n\t\t}, 64);\n\n\t\treturn () => clearTimeout(timer);\n\t};\n\n\tconst handleHide = () => {\n\t\tif (!toggable.current) return;\n\t\ttoggable.current = false;\n\n\t\tif (!closable) {\n\t\t\tsetBounced(true);\n\t\t\tconst timer = setTimeout(() => {\n\t\t\t\tsetBounced(false);\n\t\t\t\ttoggable.current = true;\n\t\t\t}, 400);\n\t\t\treturn () => clearTimeout(timer);\n\t\t}\n\n\t\tsetActive(false);\n\t\tconst timer = setTimeout(() => {\n\t\t\t!keepDOM && setShow(false);\n\t\t\ttoggable.current = true;\n\t\t\tonVisibleChange?.(false);\n\t\t\tonClose?.();\n\t\t}, 240);\n\n\t\treturn () => clearTimeout(timer);\n\t};\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{ disabled: disableEsc }\n\t);\n\n\tuseEffect(() => {\n\t\tvisible ? handleShow() : handleHide();\n\t}, [visible]);\n\n\tuseEffect(() => {\n\t\tsetMounted(true);\n\t}, []);\n\n\tconst handleClick = () => {\n\t\tif (typeof document === \"undefined\") return;\n\t\tdocument.documentElement.click();\n\t};\n\n\tif (!show || !mounted) return null;\n\n\treturn createPortal(\n\t\t<div\n\t\t\tclassName={classNames(\n\t\t\t\t\"i-modal-container\",\n\t\t\t\t{\n\t\t\t\t\t\"i-modal-backdrop\": !hideBackdrop,\n\t\t\t\t\t\"i-modal-customized\": customized,\n\t\t\t\t\t\"i-modal-active\": active,\n\t\t\t\t\tfixed,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tstyle={style}\n\t\t\tonClick={handleBackdropClick}\n\t\t\taria-modal='true'\n\t\t\tinert={!active}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={classNames(\"i-modal\", {\n\t\t\t\t\tbounced,\n\t\t\t\t\tshadow: !hideShadow,\n\t\t\t\t})}\n\t\t\t\tstyle={{\n\t\t\t\t\twidth,\n\t\t\t\t\theight,\n\t\t\t\t}}\n\t\t\t\tonClick={(e) => {\n\t\t\t\t\te.stopPropagation();\n\t\t\t\t\thandleClick();\n\t\t\t\t\tonClick?.(e);\n\t\t\t\t}}\n\t\t\t\trole='dialog'\n\t\t\t\taria-labelledby={title ? \"modal-title\" : undefined}\n\t\t\t\t{...restProps}\n\t\t\t>\n\t\t\t\t<ModalContext.Provider value={true}>\n\t\t\t\t\t{customized && children}\n\n\t\t\t\t\t{!customized && (\n\t\t\t\t\t\t<Content\n\t\t\t\t\t\t\ttitle={title}\n\t\t\t\t\t\t\thideCloseButton={hideCloseButton}\n\t\t\t\t\t\t\tfooter={footer}\n\t\t\t\t\t\t\tokButtonProps={okButtonProps}\n\t\t\t\t\t\t\tcancelButtonProps={cancelButtonProps}\n\t\t\t\t\t\t\tchildren={children}\n\t\t\t\t\t\t\tfooterLeft={footerLeft}\n\t\t\t\t\t\t\tonOk={onOk}\n\t\t\t\t\t\t\tonClose={handleHide}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</ModalContext.Provider>\n\t\t\t</div>\n\t\t</div>,\n\t\tdocument?.body ?? null\n\t);\n}\n\nModal.useModal = useModal;\n\nexport default Modal as CompositionModal;\n"],"names":["useState","useRef","useKeydown","useEffect","createPortal","_jsx","classNames","_jsxs","ModalContext","Content","useModal"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"modal.js","sources":["../../../../packages/components/modal/modal.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useKeydown } from \"../../js/hooks\";\nimport Content from \"./content\";\nimport ModalContext from \"./context\";\nimport \"./index.css\";\nimport {\n getContainer,\n isTop,\n register,\n subscribe,\n updateVisible,\n} from \"./modalManager\";\nimport { CompositionModal, IModal } from \"./type\";\nimport useModal from \"./useModal\";\n\nlet midCounter = 0;\n\nfunction Modal(props: IModal) {\n const {\n visible,\n title,\n footer,\n okButtonProps,\n cancelButtonProps,\n closable = true,\n hideBackdrop,\n backdropClosable = true,\n hideCloseButton,\n disableEsc,\n width,\n height,\n customized,\n fixed,\n hideShadow,\n children,\n style,\n className,\n keepDOM,\n footerLeft,\n onClick,\n onVisibleChange,\n onClose,\n onOk,\n ...restProps\n } = props;\n\n const midRef = useRef(`modal-${++midCounter}`);\n const mid = midRef.current;\n\n const [show, setShow] = useState(visible);\n const [active, setActive] = useState(false);\n const [bounced, setBounced] = useState(false);\n const [mounted, setMounted] = useState(false);\n const [top, setTop] = useState(false);\n const toggable = useRef(true);\n const layerRef = useRef(null);\n\n const handleShow = useCallback(() => {\n if (!toggable.current) return;\n\n if (!keepDOM || !show) setShow(true);\n toggable.current = false;\n\n updateVisible(mid, true);\n\n const raf = requestAnimationFrame(() => {\n if (!layerRef.current) {\n requestAnimationFrame(() => {\n setActive(true);\n onVisibleChange?.(true);\n toggable.current = true;\n });\n return;\n }\n setActive(true);\n onVisibleChange?.(true);\n toggable.current = true;\n });\n\n return () => cancelAnimationFrame(raf);\n }, [keepDOM, show, onVisibleChange]);\n\n const handleHide = useCallback(() => {\n if (!toggable.current) return;\n toggable.current = false;\n\n if (!closable) {\n setBounced(true);\n const timer = setTimeout(() => {\n setBounced(false);\n toggable.current = true;\n }, 400);\n return () => clearTimeout(timer);\n }\n\n setActive(false);\n updateVisible(mid, false);\n const timer = setTimeout(() => {\n if (!keepDOM) setShow(false);\n toggable.current = true;\n onVisibleChange?.(false);\n onClose?.();\n }, 240);\n\n return () => clearTimeout(timer);\n }, [closable, keepDOM, onClose, onVisibleChange]);\n\n const handleBackdropClick = () => {\n backdropClosable && handleHide();\n };\n\n useEffect(() => {\n const unsub = subscribe(() => {\n setTop(isTop(mid));\n });\n return unsub;\n }, []);\n\n useEffect(() => {\n const unregister = register({\n mid,\n visible: !!visible,\n hideBackdrop: !!hideBackdrop,\n closable: !!closable,\n });\n return unregister;\n }, []);\n\n useEffect(() => {\n visible ? handleShow() : handleHide();\n }, [visible]);\n\n useEffect(() => {\n if (!show) return;\n const raf = requestAnimationFrame(() => {\n setActive(top);\n });\n return () => cancelAnimationFrame(raf);\n }, [top]);\n\n useEffect(() => {\n setMounted(true);\n }, []);\n\n useKeydown(\n (e) => {\n if (e.code !== \"Escape\" || !visible || !top) return;\n handleHide();\n },\n { disabled: disableEsc },\n );\n\n const handleClick = () => {\n if (typeof document === \"undefined\") return;\n document.documentElement.click();\n };\n\n if (!show || !mounted) return null;\n\n return createPortal(\n <div\n ref={layerRef}\n className={classNames(\n \"i-modal-layer\",\n {\n \"i-modal-active\": active,\n \"i-modal-customized\": customized,\n \"i-modal-hide-backdrop\": hideBackdrop,\n fixed,\n },\n className,\n )}\n style={style}\n onClick={handleBackdropClick}\n >\n <div\n className={classNames(\"i-modal\", {\n bounced,\n shadow: !hideShadow,\n })}\n style={{\n width,\n height,\n }}\n onClick={(e) => {\n e.stopPropagation();\n handleClick();\n onClick?.(e);\n }}\n role=\"dialog\"\n aria-modal={top}\n data-mid={mid}\n {...restProps}\n >\n <ModalContext.Provider value={true}>\n {customized && children}\n\n {!customized && (\n <Content\n title={title}\n hideCloseButton={hideCloseButton}\n footer={footer}\n okButtonProps={okButtonProps}\n cancelButtonProps={cancelButtonProps}\n children={children}\n footerLeft={footerLeft}\n onOk={onOk}\n onClose={handleHide}\n />\n )}\n </ModalContext.Provider>\n </div>\n </div>,\n getContainer(),\n );\n}\n\nModal.useModal = useModal;\n\nexport default Modal as CompositionModal;\n"],"names":["useRef","useState","useCallback","updateVisible","useEffect","subscribe","isTop","register","useKeydown","createPortal","_jsx","classNames","_jsxs","ModalContext","Content","getContainer","useModal"],"mappings":"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"}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
const CONTAINER_ID = "i-modal-container";
|
|
4
|
+
const BACKDROP_ID = "i-modal-backdrop";
|
|
5
|
+
let containerEl = null;
|
|
6
|
+
let backdropEl = null;
|
|
7
|
+
const stack = [];
|
|
8
|
+
const listeners = new Set();
|
|
9
|
+
function ensureContainer() {
|
|
10
|
+
if (containerEl)
|
|
11
|
+
return containerEl;
|
|
12
|
+
containerEl = document.createElement("div");
|
|
13
|
+
containerEl.id = CONTAINER_ID;
|
|
14
|
+
containerEl.className = "i-modal-container";
|
|
15
|
+
document.body.append(containerEl);
|
|
16
|
+
backdropEl = document.createElement("div");
|
|
17
|
+
backdropEl.id = BACKDROP_ID;
|
|
18
|
+
backdropEl.className = "i-modal-backdrop";
|
|
19
|
+
containerEl.prepend(backdropEl);
|
|
20
|
+
return containerEl;
|
|
21
|
+
}
|
|
22
|
+
function syncBackdrop() {
|
|
23
|
+
if (!backdropEl)
|
|
24
|
+
return;
|
|
25
|
+
const show = stack.some((e) => e.visible && !e.hideBackdrop);
|
|
26
|
+
backdropEl.classList.toggle("i-modal-backdrop-active", show);
|
|
27
|
+
}
|
|
28
|
+
function notify() {
|
|
29
|
+
listeners.forEach((fn) => fn());
|
|
30
|
+
}
|
|
31
|
+
function register(entry) {
|
|
32
|
+
ensureContainer();
|
|
33
|
+
stack.push(entry);
|
|
34
|
+
syncBackdrop();
|
|
35
|
+
notify();
|
|
36
|
+
return () => {
|
|
37
|
+
const idx = stack.findIndex((e) => e.mid === entry.mid);
|
|
38
|
+
if (idx !== -1)
|
|
39
|
+
stack.splice(idx, 1);
|
|
40
|
+
syncBackdrop();
|
|
41
|
+
notify();
|
|
42
|
+
if (stack.length === 0) {
|
|
43
|
+
backdropEl?.remove();
|
|
44
|
+
backdropEl = null;
|
|
45
|
+
containerEl?.remove();
|
|
46
|
+
containerEl = null;
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
function updateVisible(mid, visible) {
|
|
51
|
+
const entry = stack.find((e) => e.mid === mid);
|
|
52
|
+
if (entry) {
|
|
53
|
+
entry.visible = visible;
|
|
54
|
+
syncBackdrop();
|
|
55
|
+
notify();
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
function isTop(mid) {
|
|
59
|
+
const top = getTopVisible();
|
|
60
|
+
return top?.mid === mid;
|
|
61
|
+
}
|
|
62
|
+
function getTopVisible() {
|
|
63
|
+
for (let i = stack.length - 1; i >= 0; i--) {
|
|
64
|
+
if (stack[i].visible)
|
|
65
|
+
return stack[i];
|
|
66
|
+
}
|
|
67
|
+
return undefined;
|
|
68
|
+
}
|
|
69
|
+
function getContainer() {
|
|
70
|
+
return ensureContainer();
|
|
71
|
+
}
|
|
72
|
+
function subscribe(fn) {
|
|
73
|
+
listeners.add(fn);
|
|
74
|
+
return () => listeners.delete(fn);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
exports.getContainer = getContainer;
|
|
78
|
+
exports.getTopVisible = getTopVisible;
|
|
79
|
+
exports.isTop = isTop;
|
|
80
|
+
exports.register = register;
|
|
81
|
+
exports.subscribe = subscribe;
|
|
82
|
+
exports.updateVisible = updateVisible;
|
|
83
|
+
//# sourceMappingURL=modalManager.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"modalManager.js","sources":["../../../../packages/components/modal/modalManager.ts"],"sourcesContent":["export type StackEntry = {\n\tmid: string;\n\tvisible: boolean;\n\thideBackdrop: boolean;\n\tclosable: boolean;\n};\n\ntype Listener = () => void;\n\nconst CONTAINER_ID = \"i-modal-container\";\nconst BACKDROP_ID = \"i-modal-backdrop\";\nlet containerEl: HTMLDivElement | null = null;\nlet backdropEl: HTMLDivElement | null = null;\nconst stack: StackEntry[] = [];\nconst listeners = new Set<Listener>();\n\nfunction ensureContainer(): HTMLDivElement {\n\tif (containerEl) return containerEl;\n\n\tcontainerEl = document.createElement(\"div\");\n\tcontainerEl.id = CONTAINER_ID;\n\tcontainerEl.className = \"i-modal-container\";\n\tdocument.body.append(containerEl);\n\n\tbackdropEl = document.createElement(\"div\");\n\tbackdropEl.id = BACKDROP_ID;\n\tbackdropEl.className = \"i-modal-backdrop\";\n\tcontainerEl.prepend(backdropEl);\n\n\treturn containerEl;\n}\n\nfunction syncBackdrop() {\n\tif (!backdropEl) return;\n\tconst show = stack.some((e) => e.visible && !e.hideBackdrop);\n\tbackdropEl.classList.toggle(\"i-modal-backdrop-active\", show);\n}\n\nfunction notify() {\n\tlisteners.forEach((fn) => fn());\n}\n\nexport function register(entry: StackEntry): () => void {\n\tensureContainer();\n\tstack.push(entry);\n\tsyncBackdrop();\n\tnotify();\n\n\treturn () => {\n\t\tconst idx = stack.findIndex((e) => e.mid === entry.mid);\n\t\tif (idx !== -1) stack.splice(idx, 1);\n\t\tsyncBackdrop();\n\t\tnotify();\n\n\t\tif (stack.length === 0) {\n\t\t\tbackdropEl?.remove();\n\t\t\tbackdropEl = null;\n\t\t\tcontainerEl?.remove();\n\t\t\tcontainerEl = null;\n\t\t}\n\t};\n}\n\nexport function updateVisible(mid: string, visible: boolean) {\n\tconst entry = stack.find((e) => e.mid === mid);\n\tif (entry) {\n\t\tentry.visible = visible;\n\t\tsyncBackdrop();\n\t\tnotify();\n\t}\n}\n\nexport function isTop(mid: string): boolean {\n\tconst top = getTopVisible();\n\treturn top?.mid === mid;\n}\n\nexport function getTopVisible(): StackEntry | undefined {\n\tfor (let i = stack.length - 1; i >= 0; i--) {\n\t\tif (stack[i].visible) return stack[i];\n\t}\n\treturn undefined;\n}\n\nexport function getContainer(): HTMLDivElement {\n\treturn ensureContainer();\n}\n\nexport function subscribe(fn: Listener): () => void {\n\tlisteners.add(fn);\n\treturn () => listeners.delete(fn);\n}\n\nexport function shouldShowBackdrop(): boolean {\n\treturn stack.some((e) => e.visible && !e.hideBackdrop);\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var material = require('@ricons/material');
|
|
7
|
+
var classNames = require('classnames');
|
|
8
|
+
var dayjs = require('dayjs');
|
|
9
|
+
var customParseFormat = require('dayjs/plugin/customParseFormat.js');
|
|
10
|
+
var react = require('react');
|
|
11
|
+
var icon = require('../../icon/icon.js');
|
|
12
|
+
var input = require('../../input/input.js');
|
|
13
|
+
var popup = require('../../popup/popup.js');
|
|
14
|
+
var panel = require('./panel.js');
|
|
15
|
+
|
|
16
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
|
|
17
|
+
|
|
18
|
+
var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
|
|
19
|
+
var dayjs__default = /*#__PURE__*/_interopDefaultCompat(dayjs);
|
|
20
|
+
var customParseFormat__default = /*#__PURE__*/_interopDefaultCompat(customParseFormat);
|
|
21
|
+
|
|
22
|
+
dayjs__default.extend(customParseFormat__default);
|
|
23
|
+
const DateRange = (props) => {
|
|
24
|
+
const { value, format = "YYYY-MM-DD", placeholder = "选择日期范围", className, disabledDate, onChange, clear, onClear: onClearProp, weeks, unitYear, unitMonth, renderDate, renderMonth, renderYear, ...restProps } = props;
|
|
25
|
+
const [active, setActive] = react.useState(false);
|
|
26
|
+
const inputValue = react.useMemo(() => {
|
|
27
|
+
if (value?.[0] && value?.[1]) {
|
|
28
|
+
return `${value[0]} ~ ${value[1]}`;
|
|
29
|
+
}
|
|
30
|
+
if (value?.[0]) {
|
|
31
|
+
return `${value[0]} ~ `;
|
|
32
|
+
}
|
|
33
|
+
return "";
|
|
34
|
+
}, [value]);
|
|
35
|
+
const dayJsValue = react.useMemo(() => {
|
|
36
|
+
const start = value?.[0] ? dayjs__default(value[0], format, true) : null;
|
|
37
|
+
const end = value?.[1] ? dayjs__default(value[1], format, true) : null;
|
|
38
|
+
if (start?.isValid() || end?.isValid()) {
|
|
39
|
+
return [start?.isValid() ? start : null, end?.isValid() ? end : null];
|
|
40
|
+
}
|
|
41
|
+
return null;
|
|
42
|
+
}, [value, format]);
|
|
43
|
+
const handleSelected = (dates) => {
|
|
44
|
+
const formatted = dates.map((d) => d.format(format));
|
|
45
|
+
onChange?.([formatted[0], formatted[1]]);
|
|
46
|
+
setActive(false);
|
|
47
|
+
};
|
|
48
|
+
const handleVisibleChange = (v) => {
|
|
49
|
+
setActive(v);
|
|
50
|
+
};
|
|
51
|
+
const handleClear = () => {
|
|
52
|
+
onChange?.([undefined, undefined]);
|
|
53
|
+
setActive(false);
|
|
54
|
+
onClearProp?.();
|
|
55
|
+
};
|
|
56
|
+
return (jsxRuntime.jsx(popup.default, { visible: active, trigger: 'click', position: 'bottom', arrow: false, align: 'start', onVisibleChange: handleVisibleChange, content: jsxRuntime.jsx(panel.default, { value: dayJsValue, weeks: weeks, unitYear: unitYear, unitMonth: unitMonth, renderDate: renderDate, renderMonth: renderMonth, renderYear: renderYear, disabledDate: disabledDate, onSelected: handleSelected }), children: jsxRuntime.jsx(input.default, { value: inputValue, placeholder: placeholder, readOnly: true, clear: clear, onClear: handleClear, append: jsxRuntime.jsx(icon.default, { icon: jsxRuntime.jsx(material.CalendarMonthTwotone, {}), className: 'i-datepicker-icon', size: '1em' }), className: classNames__default("i-datepicker-label", className), ...restProps }) }));
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
exports.default = DateRange;
|
|
60
|
+
//# sourceMappingURL=daterange.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"daterange.js","sources":["../../../../../packages/components/picker/daterange/daterange.tsx"],"sourcesContent":["import { CalendarMonthTwotone } from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport dayjs, { Dayjs } from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat.js\";\nimport { useMemo, useState } from \"react\";\nimport Icon from \"../../icon\";\nimport Input from \"../../input\";\nimport Popup from \"../../popup\";\nimport type { IDateRange } from \"../type\";\nimport \"../dates/index.css\";\nimport \"./index.css\";\nimport DoublePanel from \"./panel\";\n\ndayjs.extend(customParseFormat);\n\nconst DateRange = (props: IDateRange) => {\n\tconst {\n\t\tvalue,\n\t\tformat = \"YYYY-MM-DD\",\n\t\tplaceholder = \"选择日期范围\",\n\t\tclassName,\n\t\tdisabledDate,\n\t\tonChange,\n\t\tclear,\n\t\tonClear: onClearProp,\n\t\tweeks,\n\t\tunitYear,\n\t\tunitMonth,\n\t\trenderDate,\n\t\trenderMonth,\n\t\trenderYear,\n\t\t...restProps\n\t} = props;\n\n\tconst [active, setActive] = useState(false);\n\n\n\tconst inputValue = useMemo(() => {\n\t\tif (value?.[0] && value?.[1]) {\n\t\t\treturn `${value[0]} ~ ${value[1]}`;\n\t\t}\n\t\tif (value?.[0]) {\n\t\t\treturn `${value[0]} ~ `;\n\t\t}\n\t\treturn \"\";\n\t}, [value]);\n\n\tconst dayJsValue = useMemo(() => {\n\t\tconst start = value?.[0] ? dayjs(value[0] as string, format, true) : null;\n\t\tconst end = value?.[1] ? dayjs(value[1] as string, format, true) : null;\n\t\tif (start?.isValid() || end?.isValid()) {\n\t\t\treturn [start?.isValid() ? start : null, end?.isValid() ? end : null] as [\n\t\t\t\tDayjs | null,\n\t\t\t\tDayjs | null,\n\t\t\t];\n\t\t}\n\t\treturn null;\n\t}, [value, format]);\n\n\tconst handleSelected = (dates: [Dayjs, Dayjs]) => {\n\t\tconst formatted = dates.map((d) => d.format(format));\n\t\tonChange?.([formatted[0], formatted[1]]);\n\t\tsetActive(false);\n\t};\n\n\tconst handleVisibleChange = (v: boolean) => {\n\t\tsetActive(v);\n\t};\n\n\tconst handleClear = () => {\n\t\tonChange?.([undefined, undefined]);\n\t\tsetActive(false);\n\t\tonClearProp?.();\n\t};\n\n\treturn (\n\t\t<Popup\n\t\t\tvisible={active}\n\t\t\ttrigger='click'\n\t\t\tposition='bottom'\n\t\t\tarrow={false}\n\t\t\talign='start'\n\t\t\tonVisibleChange={handleVisibleChange}\n\t\t\tcontent={\n\t\t\t\t<DoublePanel\n\t\t\t\t\tvalue={dayJsValue}\n\t\t\t\t\tweeks={weeks}\n\t\t\t\t\tunitYear={unitYear}\n\t\t\t\t\tunitMonth={unitMonth}\n\t\t\t\t\trenderDate={renderDate}\n\t\t\t\t\trenderMonth={renderMonth}\n\t\t\t\t\trenderYear={renderYear}\n\t\t\t\t\tdisabledDate={disabledDate}\n\t\t\t\t\tonSelected={handleSelected}\n\t\t\t\t/>\n\t\t\t}\n\t\t>\n\t\t\t<Input\n\t\t\t\tvalue={inputValue}\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\treadOnly\n\t\t\t\tclear={clear}\n\t\t\t\tonClear={handleClear}\n\t\t\t\tappend={\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={<CalendarMonthTwotone />}\n\t\t\t\t\t\tclassName='i-datepicker-icon'\n\t\t\t\t\t\tsize='1em'\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\tclassName={classNames(\"i-datepicker-label\", className)}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t</Popup>\n\t);\n};\n\nexport default DateRange;\n"],"names":["dayjs","customParseFormat","useState","useMemo","_jsx","Popup","DoublePanel","Input","Icon","CalendarMonthTwotone","classNames"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var dayjs = require('dayjs');
|
|
7
|
+
var react = require('react');
|
|
8
|
+
var panel = require('../dates/panel.js');
|
|
9
|
+
|
|
10
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
|
|
11
|
+
|
|
12
|
+
var dayjs__default = /*#__PURE__*/_interopDefaultCompat(dayjs);
|
|
13
|
+
|
|
14
|
+
const DoublePanel = (props) => {
|
|
15
|
+
const { value, weeks, unitYear, unitMonth, renderDate, renderMonth, renderYear, disabledDate, onSelected, } = props;
|
|
16
|
+
const [baseMonth, setBaseMonth] = react.useState(value?.[0] || dayjs__default());
|
|
17
|
+
const [startDate, setStartDate] = react.useState(value?.[0] || null);
|
|
18
|
+
const [endDate, setEndDate] = react.useState(value?.[1] || null);
|
|
19
|
+
const [selecting, setSelecting] = react.useState("start");
|
|
20
|
+
const [hoverDate, setHoverDate] = react.useState(null);
|
|
21
|
+
const nextMonth = react.useMemo(() => baseMonth.add(1, "month"), [baseMonth]);
|
|
22
|
+
react.useEffect(() => {
|
|
23
|
+
setStartDate(value?.[0] || null);
|
|
24
|
+
setEndDate(value?.[1] || null);
|
|
25
|
+
setBaseMonth(value?.[0] || dayjs__default());
|
|
26
|
+
}, [value]);
|
|
27
|
+
const handleDateClick = (date) => {
|
|
28
|
+
if (selecting === "start") {
|
|
29
|
+
setStartDate(date);
|
|
30
|
+
setSelecting("end");
|
|
31
|
+
}
|
|
32
|
+
else {
|
|
33
|
+
let start = startDate || date;
|
|
34
|
+
let end = date;
|
|
35
|
+
if (start.isAfter(end)) {
|
|
36
|
+
[start, end] = [end, start];
|
|
37
|
+
}
|
|
38
|
+
setEndDate(end);
|
|
39
|
+
setSelecting("start");
|
|
40
|
+
onSelected?.([start, end]);
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
const handleDateHover = (date) => {
|
|
44
|
+
if (selecting === "end" && startDate) {
|
|
45
|
+
setHoverDate(date);
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
const handleOperateMonth = (next) => {
|
|
49
|
+
setBaseMonth((m) => m[next ? "add" : "subtract"](1, "month"));
|
|
50
|
+
};
|
|
51
|
+
return (jsxRuntime.jsxs("div", { className: 'i-daterange-panel i-daterange-grids', children: [jsxRuntime.jsx("div", { className: 'i-daterange-col', children: jsxRuntime.jsx(panel.default, { value: startDate, month: baseMonth, rangeEnd: endDate, hoverDate: hoverDate, onDateHover: handleDateHover, weeks: weeks, unitYear: unitYear, unitMonth: unitMonth, renderDate: renderDate, renderMonth: renderMonth, renderYear: renderYear, disabledDate: disabledDate, onDateClick: handleDateClick, onOperateMonth: handleOperateMonth }) }), jsxRuntime.jsx("div", { className: 'i-daterange-col', children: jsxRuntime.jsx(panel.default, { value: startDate, month: nextMonth, rangeEnd: endDate, hoverDate: hoverDate, onDateHover: handleDateHover, weeks: weeks, unitYear: unitYear, unitMonth: unitMonth, renderDate: renderDate, renderMonth: renderMonth, renderYear: renderYear, disabledDate: disabledDate, onDateClick: handleDateClick, onOperateMonth: handleOperateMonth }) })] }));
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
exports.default = DoublePanel;
|
|
55
|
+
//# sourceMappingURL=panel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"panel.js","sources":["../../../../../packages/components/picker/daterange/panel.tsx"],"sourcesContent":["import dayjs, { Dayjs } from \"dayjs\";\nimport { ReactNode, useEffect, useMemo, useState } from \"react\";\nimport Panel from \"../dates/panel\";\n\ninterface IDoublePanel {\n\tvalue?: [Dayjs | null, Dayjs | null] | null;\n\tweeks?: ReactNode[];\n\tunitYear?: ReactNode;\n\tunitMonth?: ReactNode;\n\trenderDate?: (date: Dayjs) => ReactNode;\n\trenderMonth?: (m: number) => ReactNode;\n\trenderYear?: (y: number) => ReactNode;\n\tdisabledDate?: (date: Dayjs) => boolean;\n\tonSelected?: (dates: [Dayjs, Dayjs]) => void;\n}\n\nconst DoublePanel = (props: IDoublePanel) => {\n\tconst {\n\t\tvalue,\n\t\tweeks,\n\t\tunitYear,\n\t\tunitMonth,\n\t\trenderDate,\n\t\trenderMonth,\n\t\trenderYear,\n\t\tdisabledDate,\n\t\tonSelected,\n\t} = props;\n\n\tconst [baseMonth, setBaseMonth] = useState(value?.[0] || dayjs());\n\tconst [startDate, setStartDate] = useState<Dayjs | null>(\n\t\tvalue?.[0] || null\n\t);\n\tconst [endDate, setEndDate] = useState<Dayjs | null>(\n\t\tvalue?.[1] || null\n\t);\n\tconst [selecting, setSelecting] = useState<\"start\" | \"end\">(\"start\");\n\tconst [hoverDate, setHoverDate] = useState<Dayjs | null>(null);\n\n\tconst nextMonth = useMemo(() => baseMonth.add(1, \"month\"), [baseMonth]);\n\n\tuseEffect(() => {\n\t\tsetStartDate(value?.[0] || null);\n\t\tsetEndDate(value?.[1] || null);\n\t\tsetBaseMonth(value?.[0] || dayjs());\n\t}, [value]);\n\n\tconst handleDateClick = (date: Dayjs) => {\n\t\tif (selecting === \"start\") {\n\t\t\tsetStartDate(date);\n\t\t\tsetSelecting(\"end\");\n\t\t} else {\n\t\t\tlet start = startDate || date;\n\t\t\tlet end = date;\n\t\t\tif (start.isAfter(end)) {\n\t\t\t\t[start, end] = [end, start];\n\t\t\t}\n\t\t\tsetEndDate(end);\n\t\t\tsetSelecting(\"start\");\n\t\t\tonSelected?.([start, end]);\n\t\t}\n\t};\n\n\tconst handleDateHover = (date: Dayjs | null) => {\n\t\tif (selecting === \"end\" && startDate) {\n\t\t\tsetHoverDate(date);\n\t\t}\n\t};\n\n\tconst handleOperateMonth = (next: boolean) => {\n\t\tsetBaseMonth((m) => m[next ? \"add\" : \"subtract\"](1, \"month\"));\n\t};\n\n\treturn (\n\t\t<div className='i-daterange-panel i-daterange-grids'>\n\t\t\t<div className='i-daterange-col'>\n\t\t\t\t<Panel\n\t\t\t\t\tvalue={startDate}\n\t\t\t\t\tmonth={baseMonth}\n\t\t\t\t\trangeEnd={endDate}\n\t\t\t\t\thoverDate={hoverDate}\n\t\t\t\t\tonDateHover={handleDateHover}\n\t\t\t\t\tweeks={weeks}\n\t\t\t\t\tunitYear={unitYear}\n\t\t\t\t\tunitMonth={unitMonth}\n\t\t\t\t\trenderDate={renderDate}\n\t\t\t\t\trenderMonth={renderMonth}\n\t\t\t\t\trenderYear={renderYear}\n\t\t\t\t\tdisabledDate={disabledDate}\n\t\t\t\t\tonDateClick={handleDateClick}\n\t\t\t\t\tonOperateMonth={handleOperateMonth}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div className='i-daterange-col'>\n\t\t\t\t<Panel\n\t\t\t\t\tvalue={startDate}\n\t\t\t\t\tmonth={nextMonth}\n\t\t\t\t\trangeEnd={endDate}\n\t\t\t\t\thoverDate={hoverDate}\n\t\t\t\t\tonDateHover={handleDateHover}\n\t\t\t\t\tweeks={weeks}\n\t\t\t\t\tunitYear={unitYear}\n\t\t\t\t\tunitMonth={unitMonth}\n\t\t\t\t\trenderDate={renderDate}\n\t\t\t\t\trenderMonth={renderMonth}\n\t\t\t\t\trenderYear={renderYear}\n\t\t\t\t\tdisabledDate={disabledDate}\n\t\t\t\t\tonDateClick={handleDateClick}\n\t\t\t\t\tonOperateMonth={handleOperateMonth}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default DoublePanel;\n"],"names":["useState","dayjs","useMemo","useEffect","_jsxs","_jsx","Panel"],"mappings":"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"}
|
|
@@ -13,7 +13,7 @@ var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
|
|
|
13
13
|
var dayjs__default = /*#__PURE__*/_interopDefaultCompat(dayjs);
|
|
14
14
|
|
|
15
15
|
const Dates = (props) => {
|
|
16
|
-
const { value, month, weeks = ["一", "二", "三", "四", "五", "六", "日"], renderDate = (date) => date.date(), disabledDate, onDateClick, } = props;
|
|
16
|
+
const { value, month, rangeEnd, hoverDate, weeks = ["一", "二", "三", "四", "五", "六", "日"], renderDate = (date) => date.date(), disabledDate, onDateClick, onDateHover, } = props;
|
|
17
17
|
const today = dayjs__default();
|
|
18
18
|
const dates = react.useMemo(() => {
|
|
19
19
|
const dates = [];
|
|
@@ -37,17 +37,25 @@ const Dates = (props) => {
|
|
|
37
37
|
return;
|
|
38
38
|
onDateClick?.(date);
|
|
39
39
|
};
|
|
40
|
-
|
|
41
|
-
|
|
40
|
+
const handleMouseEnter = (date) => {
|
|
41
|
+
if (disabledDate?.(date))
|
|
42
|
+
return;
|
|
43
|
+
onDateHover?.(date);
|
|
44
|
+
};
|
|
45
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: 'i-datepicker-weeks', children: weeks.map((week, i) => (jsxRuntime.jsx("span", { className: 'i-datepicker-week', children: week }, i))) }), jsxRuntime.jsx("div", { className: 'i-datepicker-dates', onMouseLeave: () => onDateHover?.(null), children: dates.map((date, i) => {
|
|
46
|
+
const active = date.isSame(value, "day") || (rangeEnd && date.isSame(rangeEnd, "day"));
|
|
42
47
|
const isSameMonth = date.isSame(month, "month");
|
|
43
48
|
const isToday = date.isSame(today, "day");
|
|
44
49
|
const disabled = disabledDate?.(date);
|
|
50
|
+
const isBetween = hoverDate && value && ((date.isAfter(value, "day") && date.isBefore(hoverDate, "day")) ||
|
|
51
|
+
(date.isAfter(hoverDate, "day") && date.isBefore(value, "day")));
|
|
45
52
|
return (jsxRuntime.jsx("div", { className: classNames__default("i-datepicker-item", {
|
|
46
53
|
"i-datepicker-active": active,
|
|
47
54
|
"i-datepicker-same-month": isSameMonth,
|
|
48
55
|
"i-datepicker-today": isToday,
|
|
49
56
|
"i-datepicker-disabled": disabled,
|
|
50
|
-
|
|
57
|
+
"i-daterange-between": isBetween,
|
|
58
|
+
}), onMouseEnter: () => handleMouseEnter(date), onClick: () => handleDateClick(date), children: renderDate(date) }, i));
|
|
51
59
|
}) })] }));
|
|
52
60
|
};
|
|
53
61
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dates.js","sources":["../../../../../packages/components/picker/dates/dates.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport dayjs, { Dayjs } from \"dayjs\";\nimport { ReactNode, useMemo } from \"react\";\nimport { IBaseDates } from \"../type\";\n\nconst Dates = (\n\tprops: IBaseDates & {\n\t\tmonth: any;\n\t}\n) => {\n\tconst {\n\t\tvalue,\n\t\tmonth,\n\t\tweeks = [\"一\", \"二\", \"三\", \"四\", \"五\", \"六\", \"日\"],\n\t\trenderDate = (date: Dayjs) => date.date(),\n\t\tdisabledDate,\n\t\tonDateClick,\n\t} = props;\n\tconst today = dayjs();\n\n\tconst dates = useMemo(() => {\n\t\tconst dates: Dayjs[] = [];\n\n\t\tconst lastDateOfLastMonth = month.add(-1, \"month\").endOf(\"month\");\n\t\tlet { $W, $D } = lastDateOfLastMonth;\n\n\t\tif ($W !== 0) {\n\t\t\tconst lastMonthDates = Array.from({ length: $W }).map(\n\t\t\t\t(whatever, i) => lastDateOfLastMonth.add(i + 1 - $W, \"day\")\n\t\t\t);\n\t\t\tdates.push(...lastMonthDates);\n\t\t}\n\n\t\tconst lastDate = month.endOf(\"month\");\n\t\t$D = lastDate.$D;\n\t\t$W = lastDate.$W;\n\t\tdates.push(\n\t\t\t...Array.from({ length: $D }).map((whatever, i) =>\n\t\t\t\tlastDate.add(i + 1 - $D, \"day\")\n\t\t\t)\n\t\t);\n\n\t\tif ($W !== 0) {\n\t\t\tdates.push(\n\t\t\t\t...Array.from({ length: 7 - $W }).map((whatever, i) =>\n\t\t\t\t\tlastDate.add(i + 1, \"day\")\n\t\t\t\t)\n\t\t\t);\n\t\t}\n\n\t\treturn dates;\n\t}, [month]);\n\n\tconst handleDateClick = (date: Dayjs) => {\n\t\tif (disabledDate?.(date)) return;\n\n\t\tonDateClick?.(date);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<div className='i-datepicker-weeks'>\n\t\t\t\t{weeks.map((week: ReactNode, i: number) => (\n\t\t\t\t\t<span key={i} className='i-datepicker-week'>\n\t\t\t\t\t\t{week}\n\t\t\t\t\t</span>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t\t<div
|
|
1
|
+
{"version":3,"file":"dates.js","sources":["../../../../../packages/components/picker/dates/dates.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport dayjs, { Dayjs } from \"dayjs\";\nimport { ReactNode, useMemo } from \"react\";\nimport { IBaseDates } from \"../type\";\n\nconst Dates = (\n\tprops: IBaseDates & {\n\t\tmonth: any;\n\t\trangeEnd?: Dayjs | null;\n\t\thoverDate?: Dayjs | null;\n\t\tonDateHover?: (date: Dayjs | null) => void;\n\t}\n) => {\n\tconst {\n\t\tvalue,\n\t\tmonth,\n\t\trangeEnd,\n\t\thoverDate,\n\t\tweeks = [\"一\", \"二\", \"三\", \"四\", \"五\", \"六\", \"日\"],\n\t\trenderDate = (date: Dayjs) => date.date(),\n\t\tdisabledDate,\n\t\tonDateClick,\n\t\tonDateHover,\n\t} = props;\n\tconst today = dayjs();\n\n\tconst dates = useMemo(() => {\n\t\tconst dates: Dayjs[] = [];\n\n\t\tconst lastDateOfLastMonth = month.add(-1, \"month\").endOf(\"month\");\n\t\tlet { $W, $D } = lastDateOfLastMonth;\n\n\t\tif ($W !== 0) {\n\t\t\tconst lastMonthDates = Array.from({ length: $W }).map(\n\t\t\t\t(whatever, i) => lastDateOfLastMonth.add(i + 1 - $W, \"day\")\n\t\t\t);\n\t\t\tdates.push(...lastMonthDates);\n\t\t}\n\n\t\tconst lastDate = month.endOf(\"month\");\n\t\t$D = lastDate.$D;\n\t\t$W = lastDate.$W;\n\t\tdates.push(\n\t\t\t...Array.from({ length: $D }).map((whatever, i) =>\n\t\t\t\tlastDate.add(i + 1 - $D, \"day\")\n\t\t\t)\n\t\t);\n\n\t\tif ($W !== 0) {\n\t\t\tdates.push(\n\t\t\t\t...Array.from({ length: 7 - $W }).map((whatever, i) =>\n\t\t\t\t\tlastDate.add(i + 1, \"day\")\n\t\t\t\t)\n\t\t\t);\n\t\t}\n\n\t\treturn dates;\n\t}, [month]);\n\n\tconst handleDateClick = (date: Dayjs) => {\n\t\tif (disabledDate?.(date)) return;\n\n\t\tonDateClick?.(date);\n\t};\n\n\tconst handleMouseEnter = (date: Dayjs) => {\n\t\tif (disabledDate?.(date)) return;\n\t\tonDateHover?.(date);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<div className='i-datepicker-weeks'>\n\t\t\t\t{weeks.map((week: ReactNode, i: number) => (\n\t\t\t\t\t<span key={i} className='i-datepicker-week'>\n\t\t\t\t\t\t{week}\n\t\t\t\t\t</span>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tclassName='i-datepicker-dates'\n\t\t\t\tonMouseLeave={() => onDateHover?.(null)}\n\t\t\t>\n\t\t\t\t{dates.map((date, i: number) => {\n\t\t\t\t\tconst active = date.isSame(value, \"day\") || (rangeEnd && date.isSame(rangeEnd, \"day\"));\n\t\t\t\t\tconst isSameMonth = date.isSame(month, \"month\");\n\t\t\t\t\tconst isToday = date.isSame(today, \"day\");\n\t\t\t\t\tconst disabled = disabledDate?.(date);\n\t\t\t\t\tconst isBetween = hoverDate && value && (\n\t\t\t\t\t\t(date.isAfter(value, \"day\") && date.isBefore(hoverDate, \"day\")) ||\n\t\t\t\t\t\t(date.isAfter(hoverDate, \"day\") && date.isBefore(value, \"day\"))\n\t\t\t\t\t);\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\tclassName={classNames(\"i-datepicker-item\", {\n\t\t\t\t\t\t\t\t\"i-datepicker-active\": active,\n\t\t\t\t\t\t\t\t\"i-datepicker-same-month\": isSameMonth,\n\t\t\t\t\t\t\t\t\"i-datepicker-today\": isToday,\n\t\t\t\t\t\t\t\t\"i-datepicker-disabled\": disabled,\n\t\t\t\t\t\t\t\t\"i-daterange-between\": isBetween,\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\tonMouseEnter={() => handleMouseEnter(date)}\n\t\t\t\t\t\t\tonClick={() => handleDateClick(date)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{renderDate(date)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t</>\n\t);\n};\n\nexport default Dates;\n"],"names":["dayjs","useMemo","_jsxs","_Fragment","_jsx","classNames"],"mappings":"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"}
|
|
@@ -23,7 +23,7 @@ dayjs__default.extend(customParseFormat__default);
|
|
|
23
23
|
const FORMATTYPES = ["YYYY-MM-DD", "YYYY-M-D", "YYYY/MM/DD", "YYYY/M/D"];
|
|
24
24
|
const FORMAT = "YYYY-MM-DD";
|
|
25
25
|
const Datepicker = (props) => {
|
|
26
|
-
const { name, value, weeks, format = FORMAT, placeholder = props.format ?? FORMAT, className, renderDate, renderMonth, renderYear, popupProps, disabledDate, onDateClick, onChange, onBlur, ...restProps } = props;
|
|
26
|
+
const { name, value, weeks, format = FORMAT, placeholder = props.format ?? FORMAT, className, renderDate, renderMonth, renderYear, popupProps, disabledDate, onDateClick, onChange, onBlur, clear, onClear: onClearProp, ...restProps } = props;
|
|
27
27
|
const [inputValue, setInputValue] = react.useState(value);
|
|
28
28
|
const [active, setActive] = react.useState(false);
|
|
29
29
|
const dayJsValue = react.useMemo(() => {
|
|
@@ -59,10 +59,14 @@ const Datepicker = (props) => {
|
|
|
59
59
|
popupProps?.onVisibleChange?.(v);
|
|
60
60
|
setActive(v);
|
|
61
61
|
};
|
|
62
|
+
const handleClear = () => {
|
|
63
|
+
setActive(false);
|
|
64
|
+
onClearProp?.();
|
|
65
|
+
};
|
|
62
66
|
react.useEffect(() => {
|
|
63
67
|
setInputValue(value);
|
|
64
68
|
}, [value]);
|
|
65
|
-
return (jsxRuntime.jsx(popup.default, { visible: active, trigger: 'click', position: 'bottom', arrow: false, align: 'start', onVisibleChange: handleVisibleChange, content: jsxRuntime.jsx(panel.default, { value: dayJsValue, weeks: weeks, renderDate: renderDate, renderMonth: renderMonth, renderYear: renderYear, disabledDate: disabledDate, onDateClick: handleDateClick }), ...popupProps, children: jsxRuntime.jsx(input.default, { value: inputValue, append: jsxRuntime.jsx(icon.default, { icon: jsxRuntime.jsx(material.CalendarMonthTwotone, {}), className: 'i-datepicker-icon', size: '1em' }), placeholder: placeholder, onChange: handleChange, onBlur: handleBlur, onEnter: handleSetDate, className: classNames__default("i-datepicker-label", className), ...restProps }) }));
|
|
69
|
+
return (jsxRuntime.jsx(popup.default, { visible: active, trigger: 'click', position: 'bottom', arrow: false, align: 'start', onVisibleChange: handleVisibleChange, content: jsxRuntime.jsx(panel.default, { value: dayJsValue, weeks: weeks, renderDate: renderDate, renderMonth: renderMonth, renderYear: renderYear, disabledDate: disabledDate, onDateClick: handleDateClick }), ...popupProps, children: jsxRuntime.jsx(input.default, { value: inputValue, append: jsxRuntime.jsx(icon.default, { icon: jsxRuntime.jsx(material.CalendarMonthTwotone, {}), className: 'i-datepicker-icon', size: '1em' }), placeholder: placeholder, clear: clear, onClear: handleClear, onChange: handleChange, onBlur: handleBlur, onEnter: handleSetDate, className: classNames__default("i-datepicker-label", className), ...restProps }) }));
|
|
66
70
|
};
|
|
67
71
|
|
|
68
72
|
exports.default = Datepicker;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../packages/components/picker/dates/index.tsx"],"sourcesContent":["import { CalendarMonthTwotone } from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport dayjs, { Dayjs } from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat.js\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport Icon from \"../../icon\";\nimport Input from \"../../input\";\nimport Popup from \"../../popup\";\nimport { IDatePicker } from \"../type\";\nimport \"./index.css\";\nimport Panel from \"./panel\";\n\ndayjs.extend(customParseFormat);\n\nconst FORMATTYPES = [\"YYYY-MM-DD\", \"YYYY-M-D\", \"YYYY/MM/DD\", \"YYYY/M/D\"];\nconst FORMAT = \"YYYY-MM-DD\";\n\nconst Datepicker = (props: IDatePicker) => {\n\tconst {\n\t\tname,\n\t\tvalue,\n\t\tweeks,\n\t\tformat = FORMAT,\n\t\tplaceholder = props.format ?? FORMAT,\n\t\tclassName,\n\t\trenderDate,\n\t\trenderMonth,\n\t\trenderYear,\n\t\tpopupProps,\n\t\tdisabledDate,\n\t\tonDateClick,\n\t\tonChange,\n\t\tonBlur,\n\t\t...restProps\n\t} = props;\n\n\tconst [inputValue, setInputValue] = useState(value);\n\n\tconst [active, setActive] = useState<boolean>(false);\n\n\tconst dayJsValue = useMemo(() => {\n\t\tif (!inputValue) return null;\n\n\t\tconst date = dayjs(inputValue as string, format, true);\n\n\t\tif (date.isValid()) return date;\n\n\t\treturn null;\n\t}, [inputValue, format]);\n\n\tconst handleDateClick = (date: Dayjs) => {\n\t\thandleChange(date.format(format));\n\t};\n\n\tconst handleChange = (v) => {\n\t\tsetInputValue(v);\n\t\tonChange?.(v);\n\t};\n\n\tconst handleSetDate = () => {\n\t\tif (!inputValue) return;\n\n\t\tconst date = dayjs(inputValue as string, FORMATTYPES, true);\n\n\t\tif (date.isValid()) {\n\t\t\thandleChange(date.format(format));\n\t\t\treturn;\n\t\t}\n\n\t\thandleChange(\"\");\n\t};\n\n\tconst handleBlur = (e) => {\n\t\tonBlur?.(e);\n\t\thandleSetDate();\n\t};\n\n\tconst handleVisibleChange = (v) => {\n\t\tpopupProps?.onVisibleChange?.(v);\n\t\tsetActive(v);\n\t};\n\n\tuseEffect(() => {\n\t\tsetInputValue(value);\n\t}, [value]);\n\n\treturn (\n\t\t<Popup\n\t\t\tvisible={active}\n\t\t\ttrigger='click'\n\t\t\tposition='bottom'\n\t\t\tarrow={false}\n\t\t\talign='start'\n\t\t\tonVisibleChange={handleVisibleChange}\n\t\t\tcontent={\n\t\t\t\t<Panel\n\t\t\t\t\tvalue={dayJsValue}\n\t\t\t\t\tweeks={weeks}\n\t\t\t\t\trenderDate={renderDate}\n\t\t\t\t\trenderMonth={renderMonth}\n\t\t\t\t\trenderYear={renderYear}\n\t\t\t\t\tdisabledDate={disabledDate}\n\t\t\t\t\tonDateClick={handleDateClick}\n\t\t\t\t/>\n\t\t\t}\n\t\t\t{...popupProps}\n\t\t>\n\t\t\t<Input\n\t\t\t\tvalue={inputValue}\n\t\t\t\tappend={\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={<CalendarMonthTwotone />}\n\t\t\t\t\t\tclassName='i-datepicker-icon'\n\t\t\t\t\t\tsize='1em'\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\tonChange={handleChange}\n\t\t\t\tonBlur={handleBlur}\n\t\t\t\tonEnter={handleSetDate}\n\t\t\t\tclassName={classNames(\"i-datepicker-label\", className)}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t</Popup>\n\t);\n};\n\nexport default Datepicker;\n"],"names":["dayjs","customParseFormat","useState","useMemo","useEffect","_jsx","Popup","Panel","Input","Icon","CalendarMonthTwotone","classNames"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAYAA,cAAK,CAAC,MAAM,CAACC,0BAAiB,CAAC;AAE/B,MAAM,WAAW,GAAG,CAAC,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,CAAC;AACxE,MAAM,MAAM,GAAG,YAAY;AAE3B,MAAM,UAAU,GAAG,CAAC,KAAkB,KAAI;
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../packages/components/picker/dates/index.tsx"],"sourcesContent":["import { CalendarMonthTwotone } from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport dayjs, { Dayjs } from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat.js\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport Icon from \"../../icon\";\nimport Input from \"../../input\";\nimport Popup from \"../../popup\";\nimport { IDatePicker } from \"../type\";\nimport \"./index.css\";\nimport Panel from \"./panel\";\n\ndayjs.extend(customParseFormat);\n\nconst FORMATTYPES = [\"YYYY-MM-DD\", \"YYYY-M-D\", \"YYYY/MM/DD\", \"YYYY/M/D\"];\nconst FORMAT = \"YYYY-MM-DD\";\n\nconst Datepicker = (props: IDatePicker) => {\n\tconst {\n\t\tname,\n\t\tvalue,\n\t\tweeks,\n\t\tformat = FORMAT,\n\t\tplaceholder = props.format ?? FORMAT,\n\t\tclassName,\n\t\trenderDate,\n\t\trenderMonth,\n\t\trenderYear,\n\t\tpopupProps,\n\t\tdisabledDate,\n\t\tonDateClick,\n\t\tonChange,\n\t\tonBlur,\n\t\tclear,\n\t\tonClear: onClearProp,\n\t\t...restProps\n\t} = props;\n\n\tconst [inputValue, setInputValue] = useState(value);\n\n\tconst [active, setActive] = useState<boolean>(false);\n\n\n\tconst dayJsValue = useMemo(() => {\n\t\tif (!inputValue) return null;\n\n\t\tconst date = dayjs(inputValue as string, format, true);\n\n\t\tif (date.isValid()) return date;\n\n\t\treturn null;\n\t}, [inputValue, format]);\n\n\tconst handleDateClick = (date: Dayjs) => {\n\t\thandleChange(date.format(format));\n\t};\n\n\tconst handleChange = (v) => {\n\t\tsetInputValue(v);\n\t\tonChange?.(v);\n\t};\n\n\tconst handleSetDate = () => {\n\t\tif (!inputValue) return;\n\n\t\tconst date = dayjs(inputValue as string, FORMATTYPES, true);\n\n\t\tif (date.isValid()) {\n\t\t\thandleChange(date.format(format));\n\t\t\treturn;\n\t\t}\n\n\t\thandleChange(\"\");\n\t};\n\n\tconst handleBlur = (e) => {\n\t\tonBlur?.(e);\n\t\thandleSetDate();\n\t};\n\n\tconst handleVisibleChange = (v) => {\n\t\tpopupProps?.onVisibleChange?.(v);\n\t\tsetActive(v);\n\t};\n\n\tconst handleClear = () => {\n\t\tsetActive(false);\n\t\tonClearProp?.();\n\t};\n\n\tuseEffect(() => {\n\t\tsetInputValue(value);\n\t}, [value]);\n\n\treturn (\n\t\t<Popup\n\t\t\tvisible={active}\n\t\t\ttrigger='click'\n\t\t\tposition='bottom'\n\t\t\tarrow={false}\n\t\t\talign='start'\n\t\t\tonVisibleChange={handleVisibleChange}\n\t\t\tcontent={\n\t\t\t\t<Panel\n\t\t\t\t\tvalue={dayJsValue}\n\t\t\t\t\tweeks={weeks}\n\t\t\t\t\trenderDate={renderDate}\n\t\t\t\t\trenderMonth={renderMonth}\n\t\t\t\t\trenderYear={renderYear}\n\t\t\t\t\tdisabledDate={disabledDate}\n\t\t\t\t\tonDateClick={handleDateClick}\n\t\t\t\t/>\n\t\t\t}\n\t\t\t{...popupProps}\n\t\t>\n\t\t\t<Input\n\t\t\t\tvalue={inputValue}\n\t\t\t\tappend={\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={<CalendarMonthTwotone />}\n\t\t\t\t\t\tclassName='i-datepicker-icon'\n\t\t\t\t\t\tsize='1em'\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\tclear={clear}\n\t\t\t\tonClear={handleClear}\n\t\t\t\tonChange={handleChange}\n\t\t\t\tonBlur={handleBlur}\n\t\t\t\tonEnter={handleSetDate}\n\t\t\t\tclassName={classNames(\"i-datepicker-label\", className)}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t</Popup>\n\t);\n};\n\nexport default Datepicker;\n"],"names":["dayjs","customParseFormat","useState","useMemo","useEffect","_jsx","Popup","Panel","Input","Icon","CalendarMonthTwotone","classNames"],"mappings":"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"}
|