@ioca/react 1.4.73 → 1.4.75

package/lib/es/components/picker/colors/index.js

@@ -1,55 +1,57 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import ColorsPanel from '@rc-component/color-picker';
-import { useEffect } from 'react';
-import { useReactive } from '../../../js/hooks.js';
+import { useState, useEffect } from 'react';
 import Popup from '../../popup/popup.js';
 import Footer, { ColorMethods } from './footer.js';
 import Handle from './handle.js';
 
 function ColorPicker(props) {
     const { value, type = "HEX", disabledAlpha, children, usePanel, handle = "both", placeholder = "Colors", popupProps, onChange, } = props;
-    const state = useReactive({
-        type,
-        value,
-        syncValue: value,
-        visible: popupProps?.visible,
-    });
+    const [colorType, setColorType] = useState(type);
+    const [colorValue, setColorValue] = useState(value);
+    const [syncValue, setSyncValue] = useState(value);
+    const [visible, setVisible] = useState(popupProps?.visible);
     const handleChange = (target) => {
-        state.syncValue = target;
+        setSyncValue(target);
     };
     const handleComplete = (target) => {
-        const method = ColorMethods[state.type];
+        const method = ColorMethods[colorType];
         if (target.a !== 1) {
             target.a = parseFloat(target.a.toFixed(3));
         }
-        state.value = target[method]?.();
+        setColorValue(target[method]?.());
     };
     const handleVisibleChange = (v) => {
-        state.visible = v;
+        setVisible(v);
         popupProps?.onVisibleChange?.(v);
     };
     const handleTypeChange = (t) => {
         const method = ColorMethods[t];
-        state.type = t;
-        state.value = state.syncValue[method]?.();
+        setColorType(t);
+        setColorValue(syncValue?.[method]?.());
     };
     const handleValueChange = (v) => {
-        state.value = v;
-        state.syncValue = v;
+        setColorValue(v);
+        setSyncValue(v);
     };
     const handleOk = () => {
-        onChange?.(state.value);
-        state.visible = false;
+        onChange?.(colorValue);
+        setVisible(false);
     };
     useEffect(() => {
-        state.syncValue = value;
-        state.value = value;
+        setSyncValue(value);
+        setColorValue(value);
     }, [value]);
+    useEffect(() => {
+        if (popupProps?.visible !== undefined) {
+            setVisible(popupProps.visible);
+        }
+    }, [popupProps?.visible]);
     if (usePanel) {
         return jsx(ColorsPanel, { ...props });
     }
-    return (jsx(Popup, { trigger: 'click', touchable: true, position: 'bottom', ...popupProps, visible: state.visible, content: jsx(ColorsPanel, { value: state.syncValue, disabledAlpha: disabledAlpha, panelRender: (panel) => {
-                return (jsxs(Fragment, { children: [panel, jsx(Footer, { value: state.value, type: state.type, onTypeChange: handleTypeChange, onChange: handleValueChange, onOk: handleOk })] }));
+    return (jsx(Popup, { trigger: 'click', touchable: true, position: 'bottom', ...popupProps, visible: visible, content: jsx(ColorsPanel, { value: syncValue, disabledAlpha: disabledAlpha, panelRender: (panel) => {
+                return (jsxs(Fragment, { children: [panel, jsx(Footer, { value: colorValue, type: colorType, onTypeChange: handleTypeChange, onChange: handleValueChange, onOk: handleOk })] }));
             }, onChange: handleChange, onChangeComplete: handleComplete }), onVisibleChange: handleVisibleChange, children: children ?? (jsx(Handle, { color: value, handle: handle, placeholder: placeholder })) }));
 }
 

package/lib/es/components/picker/colors/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../packages/components/picker/colors/index.tsx"],"sourcesContent":["import ColorsPanel from \"@rc-component/color-picker\";\nimport { useEffect } from \"react\";\nimport { useReactive } from \"../../../js/hooks\";\nimport Popup from \"../../popup\";\nimport { IColorPicker } from \"../type\";\nimport Footer, { ColorMethods } from \"./footer\";\nimport Handle from \"./handle\";\nimport \"./index.css\";\n\nexport default function ColorPicker(props: IColorPicker) {\n\tconst {\n\t\tvalue,\n\t\ttype = \"HEX\",\n\t\tdisabledAlpha,\n\t\tchildren,\n\t\tusePanel,\n\t\thandle = \"both\",\n\t\tplaceholder = \"Colors\",\n\t\tpopupProps,\n\t\tonChange,\n\t} = props;\n\n\tconst state = useReactive({\n\t\ttype,\n\t\tvalue,\n\t\tsyncValue: value,\n\t\tvisible: popupProps?.visible,\n\t});\n\n\tconst handleChange = (target) => {\n\t\tstate.syncValue = target;\n\t};\n\n\tconst handleComplete = (target) => {\n\t\tconst method = ColorMethods[state.type];\n\n\t\tif (target.a !== 1) {\n\t\t\ttarget.a = parseFloat(target.a.toFixed(3));\n\t\t}\n\n\t\tstate.value = target[method]?.();\n\t};\n\n\tconst handleVisibleChange = (v: boolean) => {\n\t\tstate.visible = v;\n\t\tpopupProps?.onVisibleChange?.(v);\n\t};\n\n\tconst handleTypeChange = (t) => {\n\t\tconst method = ColorMethods[t];\n\n\t\tstate.type = t;\n\t\tstate.value = state.syncValue[method]?.();\n\t};\n\n\tconst handleValueChange = (v) => {\n\t\tstate.value = v;\n\t\tstate.syncValue = v;\n\t};\n\n\tconst handleOk = () => {\n\t\tonChange?.(state.value);\n\t\tstate.visible = false;\n\t};\n\n\tuseEffect(() => {\n\t\tstate.syncValue = value;\n\t\tstate.value = value;\n\t}, [value]);\n\n\tif (usePanel) {\n\t\treturn <ColorsPanel {...props} />;\n\t}\n\n\treturn (\n\t\t<Popup\n\t\t\ttrigger='click'\n\t\t\ttouchable\n\t\t\tposition='bottom'\n\t\t\t{...popupProps}\n\t\t\tvisible={state.visible}\n\t\t\tcontent={\n\t\t\t\t<ColorsPanel\n\t\t\t\t\tvalue={state.syncValue}\n\t\t\t\t\tdisabledAlpha={disabledAlpha}\n\t\t\t\t\tpanelRender={(panel) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{panel}\n\t\t\t\t\t\t\t\t<Footer\n\t\t\t\t\t\t\t\t\tvalue={state.value}\n\t\t\t\t\t\t\t\t\ttype={state.type}\n\t\t\t\t\t\t\t\t\tonTypeChange={handleTypeChange}\n\t\t\t\t\t\t\t\t\tonChange={handleValueChange}\n\t\t\t\t\t\t\t\t\tonOk={handleOk}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t);\n\t\t\t\t\t}}\n\t\t\t\t\tonChange={handleChange}\n\t\t\t\t\tonChangeComplete={handleComplete}\n\t\t\t\t/>\n\t\t\t}\n\t\t\tonVisibleChange={handleVisibleChange}\n\t\t>\n\t\t\t{children ?? (\n\t\t\t\t<Handle\n\t\t\t\t\tcolor={value}\n\t\t\t\t\thandle={handle}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</Popup>\n\t);\n}\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;;AASc,SAAU,WAAW,CAAC,KAAmB,EAAA;IACtD,MAAM,EACL,KAAK,EACL,IAAI,GAAG,KAAK,EACZ,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,MAAM,GAAG,MAAM,EACf,WAAW,GAAG,QAAQ,EACtB,UAAU,EACV,QAAQ,GACR,GAAG,KAAK;IAET,MAAM,KAAK,GAAG,WAAW,CAAC;QACzB,IAAI;QACJ,KAAK;AACL,QAAA,SAAS,EAAE,KAAK;QAChB,OAAO,EAAE,UAAU,EAAE,OAAO;AAC5B,KAAA,CAAC;AAEF,IAAA,MAAM,YAAY,GAAG,CAAC,MAAM,KAAI;AAC/B,QAAA,KAAK,CAAC,SAAS,GAAG,MAAM;AACzB,IAAA,CAAC;AAED,IAAA,MAAM,cAAc,GAAG,CAAC,MAAM,KAAI;QACjC,MAAM,MAAM,GAAG,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC;AAEvC,QAAA,IAAI,MAAM,CAAC,CAAC,KAAK,CAAC,EAAE;AACnB,YAAA,MAAM,CAAC,CAAC,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAC3C;QAEA,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI;AACjC,IAAA,CAAC;AAED,IAAA,MAAM,mBAAmB,GAAG,CAAC,CAAU,KAAI;AAC1C,QAAA,KAAK,CAAC,OAAO,GAAG,CAAC;AACjB,QAAA,UAAU,EAAE,eAAe,GAAG,CAAC,CAAC;AACjC,IAAA,CAAC;AAED,IAAA,MAAM,gBAAgB,GAAG,CAAC,CAAC,KAAI;AAC9B,QAAA,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,CAAC;AAE9B,QAAA,KAAK,CAAC,IAAI,GAAG,CAAC;QACd,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;AAC1C,IAAA,CAAC;AAED,IAAA,MAAM,iBAAiB,GAAG,CAAC,CAAC,KAAI;AAC/B,QAAA,KAAK,CAAC,KAAK,GAAG,CAAC;AACf,QAAA,KAAK,CAAC,SAAS,GAAG,CAAC;AACpB,IAAA,CAAC;IAED,MAAM,QAAQ,GAAG,MAAK;AACrB,QAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC;AACvB,QAAA,KAAK,CAAC,OAAO,GAAG,KAAK;AACtB,IAAA,CAAC;IAED,SAAS,CAAC,MAAK;AACd,QAAA,KAAK,CAAC,SAAS,GAAG,KAAK;AACvB,QAAA,KAAK,CAAC,KAAK,GAAG,KAAK;AACpB,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IAEX,IAAI,QAAQ,EAAE;AACb,QAAA,OAAOA,GAAA,CAAC,WAAW,EAAA,EAAA,GAAK,KAAK,GAAI;IAClC;AAEA,IAAA,QACCA,GAAA,CAAC,KAAK,IACL,OAAO,EAAC,OAAO,EACf,SAAS,QACT,QAAQ,EAAC,QAAQ,EAAA,GACb,UAAU,EACd,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,OAAO,EACNA,GAAA,CAAC,WAAW,IACX,KAAK,EAAE,KAAK,CAAC,SAAS,EACtB,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,CAAC,KAAK,KAAI;AACtB,gBAAA,QACCC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACE,KAAK,EACNF,IAAC,MAAM,EAAA,EACN,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,YAAY,EAAE,gBAAgB,EAC9B,QAAQ,EAAE,iBAAiB,EAC3B,IAAI,EAAE,QAAQ,EAAA,CACb,CAAA,EAAA,CACA;AAEL,YAAA,CAAC,EACD,QAAQ,EAAE,YAAY,EACtB,gBAAgB,EAAE,cAAc,EAAA,CAC/B,EAEH,eAAe,EAAE,mBAAmB,EAAA,QAAA,EAEnC,QAAQ,KACRA,GAAA,CAAC,MAAM,IACN,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EAAA,CACvB,CACF,EAAA,CACM;AAEV;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../packages/components/picker/colors/index.tsx"],"sourcesContent":["import ColorsPanel from \"@rc-component/color-picker\";\nimport { useEffect, useState } from \"react\";\nimport Popup from \"../../popup\";\nimport { IColorPicker } from \"../type\";\nimport Footer, { ColorMethods } from \"./footer\";\nimport Handle from \"./handle\";\nimport \"./index.css\";\n\nexport default function ColorPicker(props: IColorPicker) {\n\tconst {\n\t\tvalue,\n\t\ttype = \"HEX\",\n\t\tdisabledAlpha,\n\t\tchildren,\n\t\tusePanel,\n\t\thandle = \"both\",\n\t\tplaceholder = \"Colors\",\n\t\tpopupProps,\n\t\tonChange,\n\t} = props;\n\n\tconst [colorType, setColorType] = useState(type);\n\tconst [colorValue, setColorValue] = useState(value);\n\tconst [syncValue, setSyncValue] = useState(value);\n\tconst [visible, setVisible] = useState<boolean | undefined>(popupProps?.visible);\n\n\tconst handleChange = (target) => {\n\t\tsetSyncValue(target);\n\t};\n\n\tconst handleComplete = (target) => {\n\t\tconst method = ColorMethods[colorType];\n\n\t\tif (target.a !== 1) {\n\t\t\ttarget.a = parseFloat(target.a.toFixed(3));\n\t\t}\n\n\t\tsetColorValue(target[method]?.());\n\t};\n\n\tconst handleVisibleChange = (v: boolean) => {\n\t\tsetVisible(v);\n\t\tpopupProps?.onVisibleChange?.(v);\n\t};\n\n\tconst handleTypeChange = (t) => {\n\t\tconst method = ColorMethods[t];\n\n\t\tsetColorType(t);\n\t\tsetColorValue(syncValue?.[method]?.());\n\t};\n\n\tconst handleValueChange = (v) => {\n\t\tsetColorValue(v);\n\t\tsetSyncValue(v);\n\t};\n\n\tconst handleOk = () => {\n\t\tonChange?.(colorValue);\n\t\tsetVisible(false);\n\t};\n\n\tuseEffect(() => {\n\t\tsetSyncValue(value);\n\t\tsetColorValue(value);\n\t}, [value]);\n\n\tuseEffect(() => {\n\t\tif (popupProps?.visible !== undefined) {\n\t\t\tsetVisible(popupProps.visible);\n\t\t}\n\t}, [popupProps?.visible]);\n\n\tif (usePanel) {\n\t\treturn <ColorsPanel {...props} />;\n\t}\n\n\treturn (\n\t\t<Popup\n\t\t\ttrigger='click'\n\t\t\ttouchable\n\t\t\tposition='bottom'\n\t\t\t{...popupProps}\n\t\t\tvisible={visible}\n\t\t\tcontent={\n\t\t\t\t<ColorsPanel\n\t\t\t\t\tvalue={syncValue}\n\t\t\t\t\tdisabledAlpha={disabledAlpha}\n\t\t\t\t\tpanelRender={(panel) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{panel}\n\t\t\t\t\t\t\t\t<Footer\n\t\t\t\t\t\t\t\t\tvalue={colorValue}\n\t\t\t\t\t\t\t\t\ttype={colorType}\n\t\t\t\t\t\t\t\t\tonTypeChange={handleTypeChange}\n\t\t\t\t\t\t\t\t\tonChange={handleValueChange}\n\t\t\t\t\t\t\t\t\tonOk={handleOk}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t);\n\t\t\t\t\t}}\n\t\t\t\t\tonChange={handleChange}\n\t\t\t\t\tonChangeComplete={handleComplete}\n\t\t\t\t/>\n\t\t\t}\n\t\t\tonVisibleChange={handleVisibleChange}\n\t\t>\n\t\t\t{children ?? (\n\t\t\t\t<Handle\n\t\t\t\t\tcolor={value}\n\t\t\t\t\thandle={handle}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</Popup>\n\t);\n}\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/lib/es/components/picker/dates/index.js

@@ -4,7 +4,6 @@ import classNames from 'classnames';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat.js';
 import { useState, useMemo, useEffect } from 'react';
-import { useReactive } from '../../../js/hooks.js';
 import Icon from '../../icon/icon.js';
 import Input from '../../input/input.js';
 import Popup from '../../popup/popup.js';
@@ -15,29 +14,27 @@ const FORMATTYPES = ["YYYY-MM-DD", "YYYY-M-D", "YYYY/MM/DD", "YYYY/M/D"];
 const FORMAT = "YYYY-MM-DD";
 const Datepicker = (props) => {
     const { name, value, weeks, format = FORMAT, placeholder = props.format ?? FORMAT, className, renderDate, renderMonth, renderYear, popupProps, disabledDate, onDateClick, onChange, onBlur, ...restProps } = props;
-    const state = useReactive({
-        value,
-    });
+    const [inputValue, setInputValue] = useState(value);
     const [active, setActive] = useState(false);
     const dayJsValue = useMemo(() => {
-        if (!state.value)
+        if (!inputValue)
             return null;
-        const date = dayjs(state.value, format, true);
+        const date = dayjs(inputValue, format, true);
         if (date.isValid())
             return date;
         return null;
-    }, [state.value]);
+    }, [inputValue, format]);
     const handleDateClick = (date) => {
         handleChange(date.format(format));
     };
     const handleChange = (v) => {
-        state.value = v;
+        setInputValue(v);
         onChange?.(v);
     };
     const handleSetDate = () => {
-        if (!state.value)
+        if (!inputValue)
             return;
-        const date = dayjs(state.value, FORMATTYPES, true);
+        const date = dayjs(inputValue, FORMATTYPES, true);
         if (date.isValid()) {
             handleChange(date.format(format));
             return;
@@ -53,9 +50,9 @@ const Datepicker = (props) => {
         setActive(v);
     };
     useEffect(() => {
-        state.value = value;
+        setInputValue(value);
     }, [value]);
-    return (jsx(Popup, { visible: active, trigger: 'click', position: 'bottom', arrow: false, align: 'start', onVisibleChange: handleVisibleChange, watchResize: true, content: jsx(Panel, { value: dayJsValue, weeks: weeks, renderDate: renderDate, renderMonth: renderMonth, renderYear: renderYear, disabledDate: disabledDate, onDateClick: handleDateClick }), ...popupProps, children: jsx(Input, { value: state.value, append: jsx(Icon, { icon: jsx(CalendarMonthTwotone, {}), className: 'i-datepicker-icon', size: '1em' }), placeholder: placeholder, onChange: handleChange, onBlur: handleBlur, onEnter: handleSetDate, className: classNames("i-datepicker-label", className), ...restProps }) }));
+    return (jsx(Popup, { visible: active, trigger: 'click', position: 'bottom', arrow: false, align: 'start', onVisibleChange: handleVisibleChange, watchResize: true, content: jsx(Panel, { value: dayJsValue, weeks: weeks, renderDate: renderDate, renderMonth: renderMonth, renderYear: renderYear, disabledDate: disabledDate, onDateClick: handleDateClick }), ...popupProps, children: jsx(Input, { value: inputValue, append: jsx(Icon, { icon: jsx(CalendarMonthTwotone, {}), className: 'i-datepicker-icon', size: '1em' }), placeholder: placeholder, onChange: handleChange, onBlur: handleBlur, onEnter: handleSetDate, className: classNames("i-datepicker-label", className), ...restProps }) }));
 };
 
 export { Datepicker as default };

package/lib/es/components/picker/dates/index.js.map

@@ -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 { useReactive } from \"../../../js/hooks\";\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 state = useReactive({\n\t\tvalue,\n\t});\n\n\tconst [active, setActive] = useState<boolean>(false);\n\n\tconst dayJsValue = useMemo(() => {\n\t\tif (!state.value) return null;\n\n\t\tconst date = dayjs(state.value as string, format, true);\n\n\t\tif (date.isValid()) return date;\n\n\t\treturn null;\n\t}, [state.value]);\n\n\tconst handleDateClick = (date: Dayjs) => {\n\t\thandleChange(date.format(format));\n\t};\n\n\tconst handleChange = (v) => {\n\t\tstate.value = v;\n\t\tonChange?.(v);\n\t};\n\n\tconst handleSetDate = () => {\n\t\tif (!state.value) return;\n\n\t\tconst date = dayjs(state.value 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\tstate.value = 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\twatchResize\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={state.value}\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":["_jsx"],"mappings":"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"}
+{"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\twatchResize\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":["_jsx"],"mappings":";;;;;;;;;;;AAYA,KAAK,CAAC,MAAM,CAAC,iBAAiB,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;AACzC,IAAA,MAAM,EACL,IAAI,EACJ,KAAK,EACL,KAAK,EACL,MAAM,GAAG,MAAM,EACf,WAAW,GAAG,KAAK,CAAC,MAAM,IAAI,MAAM,EACpC,SAAS,EACT,UAAU,EACV,WAAW,EACX,UAAU,EACV,UAAU,EACV,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,MAAM,EACN,GAAG,SAAS,EACZ,GAAG,KAAK;IAET,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAEnD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC;AAEpD,IAAA,MAAM,UAAU,GAAG,OAAO,CAAC,MAAK;AAC/B,QAAA,IAAI,CAAC,UAAU;AAAE,YAAA,OAAO,IAAI;QAE5B,MAAM,IAAI,GAAG,KAAK,CAAC,UAAoB,EAAE,MAAM,EAAE,IAAI,CAAC;QAEtD,IAAI,IAAI,CAAC,OAAO,EAAE;AAAE,YAAA,OAAO,IAAI;AAE/B,QAAA,OAAO,IAAI;AACZ,IAAA,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;AAExB,IAAA,MAAM,eAAe,GAAG,CAAC,IAAW,KAAI;QACvC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AAClC,IAAA,CAAC;AAED,IAAA,MAAM,YAAY,GAAG,CAAC,CAAC,KAAI;QAC1B,aAAa,CAAC,CAAC,CAAC;AAChB,QAAA,QAAQ,GAAG,CAAC,CAAC;AACd,IAAA,CAAC;IAED,MAAM,aAAa,GAAG,MAAK;AAC1B,QAAA,IAAI,CAAC,UAAU;YAAE;QAEjB,MAAM,IAAI,GAAG,KAAK,CAAC,UAAoB,EAAE,WAAW,EAAE,IAAI,CAAC;AAE3D,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE;YACnB,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;YACjC;QACD;QAEA,YAAY,CAAC,EAAE,CAAC;AACjB,IAAA,CAAC;AAED,IAAA,MAAM,UAAU,GAAG,CAAC,CAAC,KAAI;AACxB,QAAA,MAAM,GAAG,CAAC,CAAC;AACX,QAAA,aAAa,EAAE;AAChB,IAAA,CAAC;AAED,IAAA,MAAM,mBAAmB,GAAG,CAAC,CAAC,KAAI;AACjC,QAAA,UAAU,EAAE,eAAe,GAAG,CAAC,CAAC;QAChC,SAAS,CAAC,CAAC,CAAC;AACb,IAAA,CAAC;IAED,SAAS,CAAC,MAAK;QACd,aAAa,CAAC,KAAK,CAAC;AACrB,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IAEX,QACCA,GAAA,CAAC,KAAK,EAAA,EACL,OAAO,EAAE,MAAM,EACf,OAAO,EAAC,OAAO,EACf,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAC,OAAO,EACb,eAAe,EAAE,mBAAmB,EACpC,WAAW,EAAA,IAAA,EACX,OAAO,EACNA,GAAA,CAAC,KAAK,EAAA,EACL,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,eAAe,EAAA,CAC3B,EAAA,GAEC,UAAU,EAAA,QAAA,EAEdA,GAAA,CAAC,KAAK,EAAA,EACL,KAAK,EAAE,UAAU,EACjB,MAAM,EACLA,GAAA,CAAC,IAAI,EAAA,EACJ,IAAI,EAAEA,GAAA,CAAC,oBAAoB,EAAA,EAAA,CAAG,EAC9B,SAAS,EAAC,mBAAmB,EAC7B,IAAI,EAAC,KAAK,EAAA,CACT,EAEH,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,aAAa,EACtB,SAAS,EAAE,UAAU,CAAC,oBAAoB,EAAE,SAAS,CAAC,EAAA,GAClD,SAAS,EAAA,CACZ,EAAA,CACK;AAEV;;;;"}

package/lib/es/components/picker/dates/panel.js

@@ -3,8 +3,7 @@ import { KeyboardArrowLeftRound, KeyboardArrowRightRound } from '@ricons/materia
 import classNames from 'classnames';
 import dayjs from 'dayjs';
 import { throttle } from 'radash';
-import { useRef, useEffect } from 'react';
-import { useReactive } from '../../../js/hooks.js';
+import { useState, useRef, useEffect } from 'react';
 import Icon from '../../icon/icon.js';
 import Helpericon from '../../utils/helpericon/helpericon.js';
 import Dates from './dates.js';
@@ -16,61 +15,56 @@ const YearMonth = (props) => {
 };
 const Panel = (props) => {
     const { value, unitYear, unitMonth, renderDate, renderMonth = (m) => m, renderYear = (y) => y, disabledDate, onDateClick, } = props;
-    const state = useReactive({
-        today: value,
-        month: value || dayjs(),
-        selectedYear: dayjs(),
-        years: [],
-        selectable: false,
-    });
+    const [today, setToday] = useState(value);
+    const [month, setMonth] = useState(value || dayjs());
+    const [selectedYear, setSelectedYear] = useState(dayjs());
+    const [years, setYears] = useState([]);
+    const [selectable, setSelectable] = useState(false);
     const $years = useRef(null);
     const handleOperateMonth = (next) => {
-        state.month = state.month[next ? "add" : "subtract"](1, "month");
+        setMonth((m) => m[next ? "add" : "subtract"](1, "month"));
     };
     const handleChangeDate = (date) => {
-        if (date.isSame(state.today, "day"))
+        if (date.isSame(today, "day"))
             return;
-        if (!date.isSame(state.month, "month")) {
-            state.month = date;
+        if (!date.isSame(month, "month")) {
+            setMonth(date);
         }
-        state.today = date;
+        setToday(date);
         onDateClick?.(date);
     };
     const handleChangeMonth = (month) => {
-        state.month = state.month
-            .year(state.selectedYear.year())
-            .month(month - 1);
-        state.selectable = false;
+        setMonth((m) => m.year(selectedYear.year()).month(month - 1));
+        setSelectable(false);
     };
     const getMoreYears = throttle({ interval: 100 }, (e) => {
         const isUp = e.deltaY < 0;
-        state.years = state.years.map((y) => (y += isUp ? -1 : 1));
+        setYears((ys) => ys.map((y) => y + (isUp ? -1 : 1)));
     });
     useEffect(() => {
-        if (!state.selectable)
+        if (!selectable)
             return;
-        state.selectedYear = state.month;
-        const y = state.selectedYear.year();
-        const years = Array.from({ length: 7 }).map((_, i) => y - 3 + i);
-        state.years = [...years];
-    }, [state.selectable]);
+        setSelectedYear(month);
+        const y = month.year();
+        const nextYears = Array.from({ length: 7 }).map((_, i) => y - 3 + i);
+        setYears([...nextYears]);
+    }, [selectable, month]);
     useEffect(() => {
-        state.today = value;
-        state.month = value || dayjs();
+        setToday(value);
+        setMonth(value || dayjs());
     }, [value]);
-    return (jsxs("div", { className: 'i-datepicker', children: [jsxs("div", { className: 'i-datepicker-units', children: [jsx(YearMonth, { value: state.month, unitYear: unitYear, unitMonth: unitMonth, renderMonth: renderMonth, renderYear: renderYear, onClick: () => (state.selectable = true) }), jsx("a", { className: 'ml-auto i-datepicker-action', "data-ripple": true, onClick: () => handleOperateMonth(false), children: jsx(Icon, { icon: jsx(KeyboardArrowLeftRound, {}) }) }), jsx("a", { className: 'i-datepicker-action', "data-ripple": true, onClick: () => handleOperateMonth(true), children: jsx(Icon, { icon: jsx(KeyboardArrowRightRound, {}) }) })] }), jsxs("div", { className: classNames("i-datepicker-ym", {
-                    "i-datepicker-active": state.selectable,
+    return (jsxs("div", { className: 'i-datepicker', children: [jsxs("div", { className: 'i-datepicker-units', children: [jsx(YearMonth, { value: month, unitYear: unitYear, unitMonth: unitMonth, renderMonth: renderMonth, renderYear: renderYear, onClick: () => setSelectable(true) }), jsx("a", { className: 'ml-auto i-datepicker-action', "data-ripple": true, onClick: () => handleOperateMonth(false), children: jsx(Icon, { icon: jsx(KeyboardArrowLeftRound, {}) }) }), jsx("a", { className: 'i-datepicker-action', "data-ripple": true, onClick: () => handleOperateMonth(true), children: jsx(Icon, { icon: jsx(KeyboardArrowRightRound, {}) }) })] }), jsxs("div", { className: classNames("i-datepicker-ym", {
+                    "i-datepicker-active": selectable,
                 }), children: [jsx(Helpericon, { active: true, className: 'i-datepicker-close', onClick: (e) => {
                             e.stopPropagation();
-                            state.selectable = false;
-                        } }), jsx("div", { ref: $years, className: 'i-datepicker-years', onWheel: getMoreYears, children: state.years.map((y) => (jsx("a", { className: classNames("i-datepicker-year", {
-                                "i-datepicker-active": y === state.selectedYear.year(),
-                            }), onClick: () => (state.selectedYear =
-                                state.selectedYear.year(y)), children: renderYear(y) }, y))) }), jsx("div", { className: 'i-datepicker-months', children: MONTHS.map((m) => {
+                            setSelectable(false);
+                        } }), jsx("div", { ref: $years, className: 'i-datepicker-years', onWheel: getMoreYears, children: years.map((y) => (jsx("a", { className: classNames("i-datepicker-year", {
+                                "i-datepicker-active": y === selectedYear.year(),
+                            }), onClick: () => setSelectedYear((sy) => sy.year(y)), children: renderYear(y) }, y))) }), jsx("div", { className: 'i-datepicker-months', children: MONTHS.map((m) => {
                             return (jsx("a", { className: classNames("i-datepicker-month", {
-                                    "i-datepicker-active": m === state.month.month() + 1,
+                                    "i-datepicker-active": m === month.month() + 1,
                                 }), onClick: () => handleChangeMonth(m), children: renderMonth(m) }, m));
-                        }) })] }), jsx(Dates, { value: state.today, month: state.month, disabledDate: disabledDate, onDateClick: handleChangeDate, renderDate: renderDate })] }));
+                        }) })] }), jsx(Dates, { value: today, month: month, disabledDate: disabledDate, onDateClick: handleChangeDate, renderDate: renderDate })] }));
 };
 
 export { Panel as default };

package/lib/es/components/picker/dates/panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel.js","sources":["../../../../../packages/components/picker/dates/panel.tsx"],"sourcesContent":["import {\n\tKeyboardArrowLeftRound,\n\tKeyboardArrowRightRound,\n} from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport dayjs, { Dayjs } from \"dayjs\";\nimport { throttle } from \"radash\";\nimport { ReactNode, useEffect, useRef } from \"react\";\nimport { useReactive } from \"../../../js/hooks\";\nimport Icon from \"../../icon\";\nimport Helpericon from \"../../utils/helpericon\";\nimport { IBaseDates } from \"../type\";\nimport Dates from \"./dates\";\n\nconst MONTHS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];\n\nconst YearMonth = (\n\tprops: IBaseDates & {\n\t\tonClick?: () => void;\n\t}\n) => {\n\tconst {\n\t\tvalue,\n\t\tunitMonth = \"月\",\n\t\tunitYear = \"年\",\n\t\trenderYear,\n\t\trenderMonth,\n\t\tonClick,\n\t} = props;\n\n\treturn (\n\t\t<a className='i-datepicker-action' data-ripple onClick={onClick}>\n\t\t\t<span>{renderYear?.(value.year())}</span>\n\t\t\t{unitYear}\n\t\t\t<span>{renderMonth?.(value.month() + 1)}</span>\n\t\t\t{unitMonth}\n\t\t</a>\n\t);\n};\n\nconst Panel = (props: IBaseDates) => {\n\tconst {\n\t\tvalue,\n\t\tunitYear,\n\t\tunitMonth,\n\t\trenderDate,\n\t\trenderMonth = (m: ReactNode) => m,\n\t\trenderYear = (y: ReactNode) => y,\n\t\tdisabledDate,\n\t\tonDateClick,\n\t} = props;\n\n\tconst state = useReactive({\n\t\ttoday: value,\n\t\tmonth: value || dayjs(),\n\t\tselectedYear: dayjs(),\n\t\tyears: [] as number[],\n\t\tselectable: false,\n\t});\n\n\tconst $years = useRef<HTMLDivElement>(null);\n\n\tconst handleOperateMonth = (next: boolean) => {\n\t\tstate.month = state.month[next ? \"add\" : \"subtract\"](1, \"month\");\n\t};\n\n\tconst handleChangeDate = (date: Dayjs) => {\n\t\tif (date.isSame(state.today, \"day\")) return;\n\n\t\tif (!date.isSame(state.month, \"month\")) {\n\t\t\tstate.month = date;\n\t\t}\n\n\t\tstate.today = date;\n\t\tonDateClick?.(date);\n\t};\n\n\tconst handleChangeMonth = (month: number) => {\n\t\tstate.month = state.month\n\t\t\t.year(state.selectedYear.year())\n\t\t\t.month(month - 1);\n\t\tstate.selectable = false;\n\t};\n\n\tconst getMoreYears = throttle({ interval: 100 }, (e) => {\n\t\tconst isUp = e.deltaY < 0;\n\n\t\tstate.years = state.years.map((y) => (y += isUp ? -1 : 1));\n\t});\n\n\tuseEffect(() => {\n\t\tif (!state.selectable) return;\n\n\t\tstate.selectedYear = state.month;\n\t\tconst y = state.selectedYear.year();\n\t\tconst years = Array.from({ length: 7 }).map((_, i) => y - 3 + i);\n\n\t\tstate.years = [...years];\n\t}, [state.selectable]);\n\n\tuseEffect(() => {\n\t\tstate.today = value;\n\t\tstate.month = value || dayjs();\n\t}, [value]);\n\n\treturn (\n\t\t<div className='i-datepicker'>\n\t\t\t<div className='i-datepicker-units'>\n\t\t\t\t<YearMonth\n\t\t\t\t\tvalue={state.month}\n\t\t\t\t\tunitYear={unitYear}\n\t\t\t\t\tunitMonth={unitMonth}\n\t\t\t\t\trenderMonth={renderMonth}\n\t\t\t\t\trenderYear={renderYear}\n\t\t\t\t\tonClick={() => (state.selectable = true)}\n\t\t\t\t/>\n\t\t\t\t<a\n\t\t\t\t\tclassName='ml-auto i-datepicker-action'\n\t\t\t\t\tdata-ripple\n\t\t\t\t\tonClick={() => handleOperateMonth(false)}\n\t\t\t\t>\n\t\t\t\t\t<Icon icon={<KeyboardArrowLeftRound />} />\n\t\t\t\t</a>\n\t\t\t\t<a\n\t\t\t\t\tclassName='i-datepicker-action'\n\t\t\t\t\tdata-ripple\n\t\t\t\t\tonClick={() => handleOperateMonth(true)}\n\t\t\t\t>\n\t\t\t\t\t<Icon icon={<KeyboardArrowRightRound />} />\n\t\t\t\t</a>\n\t\t\t</div>\n\n\t\t\t<div\n\t\t\t\tclassName={classNames(\"i-datepicker-ym\", {\n\t\t\t\t\t\"i-datepicker-active\": state.selectable,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<Helpericon\n\t\t\t\t\tactive\n\t\t\t\t\tclassName='i-datepicker-close'\n\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\tstate.selectable = false;\n\t\t\t\t\t}}\n\t\t\t\t/>\n\n\t\t\t\t<div\n\t\t\t\t\tref={$years}\n\t\t\t\t\tclassName='i-datepicker-years'\n\t\t\t\t\tonWheel={getMoreYears}\n\t\t\t\t>\n\t\t\t\t\t{state.years.map((y) => (\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\tkey={y}\n\t\t\t\t\t\t\tclassName={classNames(\"i-datepicker-year\", {\n\t\t\t\t\t\t\t\t\"i-datepicker-active\":\n\t\t\t\t\t\t\t\t\ty === state.selectedYear.year(),\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\t(state.selectedYear =\n\t\t\t\t\t\t\t\t\tstate.selectedYear.year(y))\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{renderYear(y)}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\n\t\t\t\t<div className='i-datepicker-months'>\n\t\t\t\t\t{MONTHS.map((m) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\tkey={m}\n\t\t\t\t\t\t\t\tclassName={classNames(\"i-datepicker-month\", {\n\t\t\t\t\t\t\t\t\t\"i-datepicker-active\":\n\t\t\t\t\t\t\t\t\t\tm === state.month.month() + 1,\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\tonClick={() => handleChangeMonth(m)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{renderMonth(m)}\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<Dates\n\t\t\t\tvalue={state.today}\n\t\t\t\tmonth={state.month}\n\t\t\t\tdisabledDate={disabledDate}\n\t\t\t\tonDateClick={handleChangeDate}\n\t\t\t\trenderDate={renderDate}\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\nexport default Panel;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"panel.js","sources":["../../../../../packages/components/picker/dates/panel.tsx"],"sourcesContent":["import {\n\tKeyboardArrowLeftRound,\n\tKeyboardArrowRightRound,\n} from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport dayjs, { Dayjs } from \"dayjs\";\nimport { throttle } from \"radash\";\nimport { ReactNode, useEffect, useRef, useState } from \"react\";\nimport Icon from \"../../icon\";\nimport Helpericon from \"../../utils/helpericon\";\nimport { IBaseDates } from \"../type\";\nimport Dates from \"./dates\";\n\nconst MONTHS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];\n\nconst YearMonth = (\n\tprops: IBaseDates & {\n\t\tonClick?: () => void;\n\t}\n) => {\n\tconst {\n\t\tvalue,\n\t\tunitMonth = \"月\",\n\t\tunitYear = \"年\",\n\t\trenderYear,\n\t\trenderMonth,\n\t\tonClick,\n\t} = props;\n\n\treturn (\n\t\t<a className='i-datepicker-action' data-ripple onClick={onClick}>\n\t\t\t<span>{renderYear?.(value.year())}</span>\n\t\t\t{unitYear}\n\t\t\t<span>{renderMonth?.(value.month() + 1)}</span>\n\t\t\t{unitMonth}\n\t\t</a>\n\t);\n};\n\nconst Panel = (props: IBaseDates) => {\n\tconst {\n\t\tvalue,\n\t\tunitYear,\n\t\tunitMonth,\n\t\trenderDate,\n\t\trenderMonth = (m: ReactNode) => m,\n\t\trenderYear = (y: ReactNode) => y,\n\t\tdisabledDate,\n\t\tonDateClick,\n\t} = props;\n\n\tconst [today, setToday] = useState(value);\n\tconst [month, setMonth] = useState(value || dayjs());\n\tconst [selectedYear, setSelectedYear] = useState(dayjs());\n\tconst [years, setYears] = useState<number[]>([]);\n\tconst [selectable, setSelectable] = useState(false);\n\n\tconst $years = useRef<HTMLDivElement>(null);\n\n\tconst handleOperateMonth = (next: boolean) => {\n\t\tsetMonth((m) => m[next ? \"add\" : \"subtract\"](1, \"month\"));\n\t};\n\n\tconst handleChangeDate = (date: Dayjs) => {\n\t\tif (date.isSame(today, \"day\")) return;\n\n\t\tif (!date.isSame(month, \"month\")) {\n\t\t\tsetMonth(date);\n\t\t}\n\n\t\tsetToday(date);\n\t\tonDateClick?.(date);\n\t};\n\n\tconst handleChangeMonth = (month: number) => {\n\t\tsetMonth((m) => m.year(selectedYear.year()).month(month - 1));\n\t\tsetSelectable(false);\n\t};\n\n\tconst getMoreYears = throttle({ interval: 100 }, (e) => {\n\t\tconst isUp = e.deltaY < 0;\n\n\t\tsetYears((ys) => ys.map((y) => y + (isUp ? -1 : 1)));\n\t});\n\n\tuseEffect(() => {\n\t\tif (!selectable) return;\n\n\t\tsetSelectedYear(month);\n\t\tconst y = month.year();\n\t\tconst nextYears = Array.from({ length: 7 }).map((_, i) => y - 3 + i);\n\n\t\tsetYears([...nextYears]);\n\t}, [selectable, month]);\n\n\tuseEffect(() => {\n\t\tsetToday(value);\n\t\tsetMonth(value || dayjs());\n\t}, [value]);\n\n\treturn (\n\t\t<div className='i-datepicker'>\n\t\t\t<div className='i-datepicker-units'>\n\t\t\t\t<YearMonth\n\t\t\t\t\tvalue={month}\n\t\t\t\t\tunitYear={unitYear}\n\t\t\t\t\tunitMonth={unitMonth}\n\t\t\t\t\trenderMonth={renderMonth}\n\t\t\t\t\trenderYear={renderYear}\n\t\t\t\t\tonClick={() => setSelectable(true)}\n\t\t\t\t/>\n\t\t\t\t<a\n\t\t\t\t\tclassName='ml-auto i-datepicker-action'\n\t\t\t\t\tdata-ripple\n\t\t\t\t\tonClick={() => handleOperateMonth(false)}\n\t\t\t\t>\n\t\t\t\t\t<Icon icon={<KeyboardArrowLeftRound />} />\n\t\t\t\t</a>\n\t\t\t\t<a\n\t\t\t\t\tclassName='i-datepicker-action'\n\t\t\t\t\tdata-ripple\n\t\t\t\t\tonClick={() => handleOperateMonth(true)}\n\t\t\t\t>\n\t\t\t\t\t<Icon icon={<KeyboardArrowRightRound />} />\n\t\t\t\t</a>\n\t\t\t</div>\n\n\t\t\t<div\n\t\t\t\tclassName={classNames(\"i-datepicker-ym\", {\n\t\t\t\t\t\"i-datepicker-active\": selectable,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<Helpericon\n\t\t\t\t\tactive\n\t\t\t\t\tclassName='i-datepicker-close'\n\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\tsetSelectable(false);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\n\t\t\t\t<div\n\t\t\t\t\tref={$years}\n\t\t\t\t\tclassName='i-datepicker-years'\n\t\t\t\t\tonWheel={getMoreYears}\n\t\t\t\t>\n\t\t\t\t\t{years.map((y) => (\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\tkey={y}\n\t\t\t\t\t\t\tclassName={classNames(\"i-datepicker-year\", {\n\t\t\t\t\t\t\t\t\"i-datepicker-active\":\n\t\t\t\t\t\t\t\t\ty === selectedYear.year(),\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\tonClick={() => setSelectedYear((sy) => sy.year(y))}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{renderYear(y)}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\n\t\t\t\t<div className='i-datepicker-months'>\n\t\t\t\t\t{MONTHS.map((m) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\tkey={m}\n\t\t\t\t\t\t\t\tclassName={classNames(\"i-datepicker-month\", {\n\t\t\t\t\t\t\t\t\t\"i-datepicker-active\":\n\t\t\t\t\t\t\t\t\t\tm === month.month() + 1,\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\tonClick={() => handleChangeMonth(m)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{renderMonth(m)}\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<Dates\n\t\t\t\tvalue={today}\n\t\t\t\tmonth={month}\n\t\t\t\tdisabledDate={disabledDate}\n\t\t\t\tonDateClick={handleChangeDate}\n\t\t\t\trenderDate={renderDate}\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\nexport default Panel;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;AAaA,MAAM,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;AAEtD,MAAM,SAAS,GAAG,CACjB,KAEC,KACE;AACH,IAAA,MAAM,EACL,KAAK,EACL,SAAS,GAAG,GAAG,EACf,QAAQ,GAAG,GAAG,EACd,UAAU,EACV,WAAW,EACX,OAAO,GACP,GAAG,KAAK;AAET,IAAA,QACCA,IAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,qBAAqB,uBAAa,OAAO,EAAE,OAAO,EAAA,QAAA,EAAA,CAC9DC,wBAAO,UAAU,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC,EAAA,CAAQ,EACxC,QAAQ,EACTA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAO,WAAW,GAAG,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,EAAA,CAAQ,EAC9C,SAAS,CAAA,EAAA,CACP;AAEN,CAAC;AAED,MAAM,KAAK,GAAG,CAAC,KAAiB,KAAI;AACnC,IAAA,MAAM,EACL,KAAK,EACL,QAAQ,EACR,SAAS,EACT,UAAU,EACV,WAAW,GAAG,CAAC,CAAY,KAAK,CAAC,EACjC,UAAU,GAAG,CAAC,CAAY,KAAK,CAAC,EAChC,YAAY,EACZ,WAAW,GACX,GAAG,KAAK;IAET,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AACzC,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,IAAI,KAAK,EAAE,CAAC;IACpD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,EAAE,CAAC;IACzD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC;IAChD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAEnD,IAAA,MAAM,MAAM,GAAG,MAAM,CAAiB,IAAI,CAAC;AAE3C,IAAA,MAAM,kBAAkB,GAAG,CAAC,IAAa,KAAI;QAC5C,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,GAAG,KAAK,GAAG,UAAU,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;AAC1D,IAAA,CAAC;AAED,IAAA,MAAM,gBAAgB,GAAG,CAAC,IAAW,KAAI;AACxC,QAAA,IAAI,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC;YAAE;QAE/B,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE;YACjC,QAAQ,CAAC,IAAI,CAAC;QACf;QAEA,QAAQ,CAAC,IAAI,CAAC;AACd,QAAA,WAAW,GAAG,IAAI,CAAC;AACpB,IAAA,CAAC;AAED,IAAA,MAAM,iBAAiB,GAAG,CAAC,KAAa,KAAI;QAC3C,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;QAC7D,aAAa,CAAC,KAAK,CAAC;AACrB,IAAA,CAAC;AAED,IAAA,MAAM,YAAY,GAAG,QAAQ,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,KAAI;AACtD,QAAA,MAAM,IAAI,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC;AAEzB,QAAA,QAAQ,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;AACrD,IAAA,CAAC,CAAC;IAEF,SAAS,CAAC,MAAK;AACd,QAAA,IAAI,CAAC,UAAU;YAAE;QAEjB,eAAe,CAAC,KAAK,CAAC;AACtB,QAAA,MAAM,CAAC,GAAG,KAAK,CAAC,IAAI,EAAE;AACtB,QAAA,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEpE,QAAA,QAAQ,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC;AACzB,IAAA,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;IAEvB,SAAS,CAAC,MAAK;QACd,QAAQ,CAAC,KAAK,CAAC;AACf,QAAA,QAAQ,CAAC,KAAK,IAAI,KAAK,EAAE,CAAC;AAC3B,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IAEX,QACCD,cAAK,SAAS,EAAC,cAAc,EAAA,QAAA,EAAA,CAC5BA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAA,CAClCC,IAAC,SAAS,EAAA,EACT,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,MAAM,aAAa,CAAC,IAAI,CAAC,EAAA,CACjC,EACFA,WACC,SAAS,EAAC,6BAA6B,EAAA,aAAA,EAAA,IAAA,EAEvC,OAAO,EAAE,MAAM,kBAAkB,CAAC,KAAK,CAAC,EAAA,QAAA,EAExCA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAEA,IAAC,sBAAsB,EAAA,EAAA,CAAG,EAAA,CAAI,EAAA,CACvC,EACJA,GAAA,CAAA,GAAA,EAAA,EACC,SAAS,EAAC,qBAAqB,EAAA,aAAA,EAAA,IAAA,EAE/B,OAAO,EAAE,MAAM,kBAAkB,CAAC,IAAI,CAAC,YAEvCA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAEA,GAAA,CAAC,uBAAuB,EAAA,EAAA,CAAG,EAAA,CAAI,EAAA,CACxC,CAAA,EAAA,CACC,EAEND,IAAA,CAAA,KAAA,EAAA,EACC,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE;AACxC,oBAAA,qBAAqB,EAAE,UAAU;AACjC,iBAAA,CAAC,EAAA,QAAA,EAAA,CAEFC,GAAA,CAAC,UAAU,EAAA,EACV,MAAM,EAAA,IAAA,EACN,SAAS,EAAC,oBAAoB,EAC9B,OAAO,EAAE,CAAC,CAAC,KAAI;4BACd,CAAC,CAAC,eAAe,EAAE;4BACnB,aAAa,CAAC,KAAK,CAAC;AACrB,wBAAA,CAAC,EAAA,CACA,EAEFA,GAAA,CAAA,KAAA,EAAA,EACC,GAAG,EAAE,MAAM,EACX,SAAS,EAAC,oBAAoB,EAC9B,OAAO,EAAE,YAAY,EAAA,QAAA,EAEpB,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,MACZA,GAAA,CAAA,GAAA,EAAA,EAEC,SAAS,EAAE,UAAU,CAAC,mBAAmB,EAAE;AAC1C,gCAAA,qBAAqB,EACpB,CAAC,KAAK,YAAY,CAAC,IAAI,EAAE;6BAC1B,CAAC,EACF,OAAO,EAAE,MAAM,eAAe,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAA,QAAA,EAEjD,UAAU,CAAC,CAAC,CAAC,IAPT,CAAC,CAQH,CACJ,CAAC,EAAA,CACG,EAENA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qBAAqB,EAAA,QAAA,EAClC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,KAAI;AACjB,4BAAA,QACCA,GAAA,CAAA,GAAA,EAAA,EAEC,SAAS,EAAE,UAAU,CAAC,oBAAoB,EAAE;oCAC3C,qBAAqB,EACpB,CAAC,KAAK,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC;AACxB,iCAAA,CAAC,EACF,OAAO,EAAE,MAAM,iBAAiB,CAAC,CAAC,CAAC,EAAA,QAAA,EAElC,WAAW,CAAC,CAAC,CAAC,IAPV,CAAC,CAQH;AAEN,wBAAA,CAAC,CAAC,EAAA,CACG,CAAA,EAAA,CACD,EAENA,GAAA,CAAC,KAAK,EAAA,EACL,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,gBAAgB,EAC7B,UAAU,EAAE,UAAU,EAAA,CACrB,CAAA,EAAA,CACG;AAER;;;;"}

package/lib/es/components/picker/time/index.js

@@ -2,7 +2,6 @@ import { jsx } from 'react/jsx-runtime';
 import { AccessTimeRound } from '@ricons/material';
 import classNames from 'classnames';
 import { useState, useEffect } from 'react';
-import { useReactive } from '../../../js/hooks.js';
 import Icon from '../../icon/icon.js';
 import Input from '../../input/input.js';
 import Popup from '../../popup/popup.js';
@@ -11,22 +10,19 @@ import Panel from './panel.js';
 const FORMAT = "hh:mm:ss";
 function TimePicker(props) {
     const { name, value, format = FORMAT, periods, placeholder = props.format ?? FORMAT, className, renderItem, onChange, onBlur, popupProps, ...restProps } = props;
-    const state = useReactive({
-        value,
-        safeValue: undefined,
-    });
+    const [timeValue, setTimeValue] = useState(value);
+    const [safeValue, setSafeValue] = useState(undefined);
     const [active, setActive] = useState(false);
     const handleChange = (v) => {
-        state.value = v;
+        setTimeValue(v);
     };
     const handleFallback = (v) => {
-        state.safeValue = v;
+        setSafeValue(v);
     };
     const handleValidTime = () => {
-        if (!state.value)
+        if (!timeValue)
             return;
-        state.value = state.safeValue;
-        handleChange(state.safeValue);
+        setTimeValue(safeValue);
     };
     const handleBlur = (e) => {
         onBlur?.(e);
@@ -37,9 +33,9 @@ function TimePicker(props) {
         setActive(v);
     };
     useEffect(() => {
-        state.value = value;
+        setTimeValue(value);
     }, [value]);
-    return (jsx(Popup, { visible: active, trigger: 'click', position: 'bottom', arrow: false, align: 'start', watchResize: true, ...popupProps, onVisibleChange: handleVisibleChange, content: jsx(Panel, { value: state.value, format: format, periods: periods, renderItem: renderItem, onChange: handleChange, onFallback: handleFallback }), children: jsx(Input, { value: state.value, placeholder: placeholder, append: jsx(Icon, { icon: jsx(AccessTimeRound, {}), className: 'i-timepicker-icon', size: '1em' }), onChange: handleChange, onBlur: handleBlur, className: classNames("i-timepicker-label", className), ...restProps }) }));
+    return (jsx(Popup, { visible: active, trigger: 'click', position: 'bottom', arrow: false, align: 'start', watchResize: true, ...popupProps, onVisibleChange: handleVisibleChange, content: jsx(Panel, { value: timeValue, format: format, periods: periods, renderItem: renderItem, onChange: handleChange, onFallback: handleFallback }), children: jsx(Input, { value: timeValue, placeholder: placeholder, append: jsx(Icon, { icon: jsx(AccessTimeRound, {}), className: 'i-timepicker-icon', size: '1em' }), onChange: handleChange, onBlur: handleBlur, className: classNames("i-timepicker-label", className), ...restProps }) }));
 }
 
 export { TimePicker as default };

package/lib/es/components/picker/time/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../packages/components/picker/time/index.tsx"],"sourcesContent":["import { AccessTimeRound } from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport { useEffect, useState } from \"react\";\nimport { useReactive } from \"../../../js/hooks\";\nimport Icon from \"../../icon\";\nimport Input from \"../../input\";\nimport Popup from \"../../popup\";\nimport { ITimePicker } from \"../type\";\nimport Panel from \"./panel\";\n\nconst FORMAT = \"hh:mm:ss\";\n\nexport default function TimePicker(props: ITimePicker) {\n\tconst {\n\t\tname,\n\t\tvalue,\n\t\tformat = FORMAT,\n\t\tperiods,\n\t\tplaceholder = props.format ?? FORMAT,\n\t\tclassName,\n\t\trenderItem,\n\t\tonChange,\n\t\tonBlur,\n\t\tpopupProps,\n\t\t...restProps\n\t} = props;\n\tconst state = useReactive({\n\t\tvalue,\n\t\tsafeValue: undefined,\n\t});\n\tconst [active, setActive] = useState<boolean>(false);\n\n\tconst handleChange = (v) => {\n\t\tstate.value = v;\n\t};\n\n\tconst handleFallback = (v) => {\n\t\tstate.safeValue = v;\n\t};\n\n\tconst handleValidTime = () => {\n\t\tif (!state.value) return;\n\n\t\tstate.value = state.safeValue;\n\t\thandleChange(state.safeValue);\n\t};\n\n\tconst handleBlur = (e) => {\n\t\tonBlur?.(e);\n\t\thandleValidTime();\n\t};\n\n\tconst handleVisibleChange = (v) => {\n\t\tpopupProps?.onVisibleChange?.(v);\n\t\tsetActive(v);\n\t};\n\n\tuseEffect(() => {\n\t\tstate.value = 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\twatchResize\n\t\t\t{...popupProps}\n\t\t\tonVisibleChange={handleVisibleChange}\n\t\t\tcontent={\n\t\t\t\t<Panel\n\t\t\t\t\tvalue={state.value}\n\t\t\t\t\tformat={format}\n\t\t\t\t\tperiods={periods}\n\t\t\t\t\trenderItem={renderItem}\n\t\t\t\t\tonChange={handleChange}\n\t\t\t\t\tonFallback={handleFallback}\n\t\t\t\t/>\n\t\t\t}\n\t\t>\n\t\t\t<Input\n\t\t\t\tvalue={state.value}\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\tappend={\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={<AccessTimeRound />}\n\t\t\t\t\t\tclassName='i-timepicker-icon'\n\t\t\t\t\t\tsize='1em'\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\tonChange={handleChange}\n\t\t\t\tonBlur={handleBlur}\n\t\t\t\tclassName={classNames(\"i-timepicker-label\", className)}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t</Popup>\n\t);\n}\n"],"names":["_jsx"],"mappings":";;;;;;;;;;AAUA,MAAM,MAAM,GAAG,UAAU;AAEX,SAAU,UAAU,CAAC,KAAkB,EAAA;AACpD,IAAA,MAAM,EACL,IAAI,EACJ,KAAK,EACL,MAAM,GAAG,MAAM,EACf,OAAO,EACP,WAAW,GAAG,KAAK,CAAC,MAAM,IAAI,MAAM,EACpC,SAAS,EACT,UAAU,EACV,QAAQ,EACR,MAAM,EACN,UAAU,EACV,GAAG,SAAS,EACZ,GAAG,KAAK;IACT,MAAM,KAAK,GAAG,WAAW,CAAC;QACzB,KAAK;AACL,QAAA,SAAS,EAAE,SAAS;AACpB,KAAA,CAAC;IACF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC;AAEpD,IAAA,MAAM,YAAY,GAAG,CAAC,CAAC,KAAI;AAC1B,QAAA,KAAK,CAAC,KAAK,GAAG,CAAC;AAChB,IAAA,CAAC;AAED,IAAA,MAAM,cAAc,GAAG,CAAC,CAAC,KAAI;AAC5B,QAAA,KAAK,CAAC,SAAS,GAAG,CAAC;AACpB,IAAA,CAAC;IAED,MAAM,eAAe,GAAG,MAAK;QAC5B,IAAI,CAAC,KAAK,CAAC,KAAK;YAAE;AAElB,QAAA,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,SAAS;AAC7B,QAAA,YAAY,CAAC,KAAK,CAAC,SAAS,CAAC;AAC9B,IAAA,CAAC;AAED,IAAA,MAAM,UAAU,GAAG,CAAC,CAAC,KAAI;AACxB,QAAA,MAAM,GAAG,CAAC,CAAC;AACX,QAAA,eAAe,EAAE;AAClB,IAAA,CAAC;AAED,IAAA,MAAM,mBAAmB,GAAG,CAAC,CAAC,KAAI;AACjC,QAAA,UAAU,EAAE,eAAe,GAAG,CAAC,CAAC;QAChC,SAAS,CAAC,CAAC,CAAC;AACb,IAAA,CAAC;IAED,SAAS,CAAC,MAAK;AACd,QAAA,KAAK,CAAC,KAAK,GAAG,KAAK;AACpB,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IAEX,QACCA,GAAA,CAAC,KAAK,EAAA,EACL,OAAO,EAAE,MAAM,EACf,OAAO,EAAC,OAAO,EACf,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAC,OAAO,EACb,WAAW,EAAA,IAAA,EAAA,GACP,UAAU,EACd,eAAe,EAAE,mBAAmB,EACpC,OAAO,EACNA,GAAA,CAAC,KAAK,EAAA,EACL,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,YAAY,EACtB,UAAU,EAAE,cAAc,EAAA,CACzB,EAAA,QAAA,EAGHA,GAAA,CAAC,KAAK,EAAA,EACL,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,WAAW,EAAE,WAAW,EACxB,MAAM,EACLA,GAAA,CAAC,IAAI,EAAA,EACJ,IAAI,EAAEA,GAAA,CAAC,eAAe,EAAA,EAAA,CAAG,EACzB,SAAS,EAAC,mBAAmB,EAC7B,IAAI,EAAC,KAAK,EAAA,CACT,EAEH,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,UAAU,CAAC,oBAAoB,EAAE,SAAS,CAAC,EAAA,GAClD,SAAS,EAAA,CACZ,EAAA,CACK;AAEV;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../packages/components/picker/time/index.tsx"],"sourcesContent":["import { AccessTimeRound } from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport { useEffect, useState } from \"react\";\nimport Icon from \"../../icon\";\nimport Input from \"../../input\";\nimport Popup from \"../../popup\";\nimport { ITimePicker } from \"../type\";\nimport Panel from \"./panel\";\n\nconst FORMAT = \"hh:mm:ss\";\n\nexport default function TimePicker(props: ITimePicker) {\n\tconst {\n\t\tname,\n\t\tvalue,\n\t\tformat = FORMAT,\n\t\tperiods,\n\t\tplaceholder = props.format ?? FORMAT,\n\t\tclassName,\n\t\trenderItem,\n\t\tonChange,\n\t\tonBlur,\n\t\tpopupProps,\n\t\t...restProps\n\t} = props;\n\tconst [timeValue, setTimeValue] = useState(value);\n\tconst [safeValue, setSafeValue] = useState(undefined);\n\tconst [active, setActive] = useState<boolean>(false);\n\n\tconst handleChange = (v) => {\n\t\tsetTimeValue(v);\n\t};\n\n\tconst handleFallback = (v) => {\n\t\tsetSafeValue(v);\n\t};\n\n\tconst handleValidTime = () => {\n\t\tif (!timeValue) return;\n\n\t\tsetTimeValue(safeValue);\n\t};\n\n\tconst handleBlur = (e) => {\n\t\tonBlur?.(e);\n\t\thandleValidTime();\n\t};\n\n\tconst handleVisibleChange = (v) => {\n\t\tpopupProps?.onVisibleChange?.(v);\n\t\tsetActive(v);\n\t};\n\n\tuseEffect(() => {\n\t\tsetTimeValue(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\twatchResize\n\t\t\t{...popupProps}\n\t\t\tonVisibleChange={handleVisibleChange}\n\t\t\tcontent={\n\t\t\t\t<Panel\n\t\t\t\t\tvalue={timeValue}\n\t\t\t\t\tformat={format}\n\t\t\t\t\tperiods={periods}\n\t\t\t\t\trenderItem={renderItem}\n\t\t\t\t\tonChange={handleChange}\n\t\t\t\t\tonFallback={handleFallback}\n\t\t\t\t/>\n\t\t\t}\n\t\t>\n\t\t\t<Input\n\t\t\t\tvalue={timeValue}\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\tappend={\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={<AccessTimeRound />}\n\t\t\t\t\t\tclassName='i-timepicker-icon'\n\t\t\t\t\t\tsize='1em'\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\tonChange={handleChange}\n\t\t\t\tonBlur={handleBlur}\n\t\t\t\tclassName={classNames(\"i-timepicker-label\", className)}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t</Popup>\n\t);\n}\n"],"names":["_jsx"],"mappings":";;;;;;;;;AASA,MAAM,MAAM,GAAG,UAAU;AAEX,SAAU,UAAU,CAAC,KAAkB,EAAA;AACpD,IAAA,MAAM,EACL,IAAI,EACJ,KAAK,EACL,MAAM,GAAG,MAAM,EACf,OAAO,EACP,WAAW,GAAG,KAAK,CAAC,MAAM,IAAI,MAAM,EACpC,SAAS,EACT,UAAU,EACV,QAAQ,EACR,MAAM,EACN,UAAU,EACV,GAAG,SAAS,EACZ,GAAG,KAAK;IACT,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IACjD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC;IACrD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC;AAEpD,IAAA,MAAM,YAAY,GAAG,CAAC,CAAC,KAAI;QAC1B,YAAY,CAAC,CAAC,CAAC;AAChB,IAAA,CAAC;AAED,IAAA,MAAM,cAAc,GAAG,CAAC,CAAC,KAAI;QAC5B,YAAY,CAAC,CAAC,CAAC;AAChB,IAAA,CAAC;IAED,MAAM,eAAe,GAAG,MAAK;AAC5B,QAAA,IAAI,CAAC,SAAS;YAAE;QAEhB,YAAY,CAAC,SAAS,CAAC;AACxB,IAAA,CAAC;AAED,IAAA,MAAM,UAAU,GAAG,CAAC,CAAC,KAAI;AACxB,QAAA,MAAM,GAAG,CAAC,CAAC;AACX,QAAA,eAAe,EAAE;AAClB,IAAA,CAAC;AAED,IAAA,MAAM,mBAAmB,GAAG,CAAC,CAAC,KAAI;AACjC,QAAA,UAAU,EAAE,eAAe,GAAG,CAAC,CAAC;QAChC,SAAS,CAAC,CAAC,CAAC;AACb,IAAA,CAAC;IAED,SAAS,CAAC,MAAK;QACd,YAAY,CAAC,KAAK,CAAC;AACpB,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IAEX,QACCA,GAAA,CAAC,KAAK,EAAA,EACL,OAAO,EAAE,MAAM,EACf,OAAO,EAAC,OAAO,EACf,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAC,OAAO,EACb,WAAW,EAAA,IAAA,EAAA,GACP,UAAU,EACd,eAAe,EAAE,mBAAmB,EACpC,OAAO,EACNA,GAAA,CAAC,KAAK,EAAA,EACL,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,YAAY,EACtB,UAAU,EAAE,cAAc,EAAA,CACzB,EAAA,QAAA,EAGHA,GAAA,CAAC,KAAK,IACL,KAAK,EAAE,SAAS,EAChB,WAAW,EAAE,WAAW,EACxB,MAAM,EACLA,GAAA,CAAC,IAAI,EAAA,EACJ,IAAI,EAAEA,GAAA,CAAC,eAAe,EAAA,EAAA,CAAG,EACzB,SAAS,EAAC,mBAAmB,EAC7B,IAAI,EAAC,KAAK,EAAA,CACT,EAEH,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,UAAU,CAAC,oBAAoB,EAAE,SAAS,CAAC,EAAA,GAClD,SAAS,EAAA,CACZ,EAAA,CACK;AAEV;;;;"}

package/lib/es/components/picker/time/panel.js

@@ -1,6 +1,5 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useMemo, useEffect } from 'react';
-import { useReactive } from '../../../js/hooks.js';
+import { useState, useMemo, useEffect } from 'react';
 import Items from './item.js';
 
 const UnitMaps = {
@@ -13,12 +12,10 @@ const UnitMaps = {
 };
 function Panel(props) {
     const { value, stepH = 1, stepM = 1, stepS = 1, format, periods, renderItem, onChange, onFallback, } = props;
-    const state = useReactive({
-        period: undefined,
-        hour: undefined,
-        minute: undefined,
-        second: undefined,
-    });
+    const [period, setPeriod] = useState(undefined);
+    const [hour, setHour] = useState(undefined);
+    const [minute, setMinute] = useState(undefined);
+    const [second, setSecond] = useState(undefined);
     const [hours, minutes, seconds] = useMemo(() => {
         const hasH = format.includes("h");
         const hasM = format.includes("m");
@@ -34,29 +31,45 @@ function Panel(props) {
             : [];
         return [hours, minutes, seconds];
     }, [stepH, stepM, stepS, format, periods]);
-    const updateValue = () => {
+    const updateValue = (next) => {
+        const nextPeriod = next?.period ?? period;
+        const nextHour = next?.hour ?? hour;
+        const nextMinute = next?.minute ?? minute;
+        const nextSecond = next?.second ?? second;
         const reg = /(hh|h){1}|(mm|m){1}|(ss|s){1}/gi;
         let result = format.replace(reg, (pattern) => {
             const p = pattern.toLowerCase();
             const u = UnitMaps[p];
-            const n = state[u] ?? 0;
+            const n = u === "hour"
+                ? (nextHour ?? 0)
+                : u === "minute"
+                    ? (nextMinute ?? 0)
+                    : (nextSecond ?? 0);
             return p.length > 1 && n < 10 ? `0${n ?? 0}` : n ?? 0;
         });
         if (periods && hours.length > 0) {
-            result = `${state.period ?? periods[0]} ${result}`;
+            result = `${nextPeriod ?? periods[0]} ${result}`;
         }
         onChange(result);
     };
     const handleSetTime = (v, unit) => {
-        state[unit] = v;
-        updateValue();
+        const next = { period, hour, minute, second, [unit]: v };
+        if (unit === "period")
+            setPeriod(v);
+        if (unit === "hour")
+            setHour(v);
+        if (unit === "minute")
+            setMinute(v);
+        if (unit === "second")
+            setSecond(v);
+        updateValue(next);
     };
     useEffect(() => {
         let time = value ?? "";
         if (periods && hours.length > 0 && value) {
             const [p, t] = value.split(" ");
             time = t ?? "";
-            state.period = periods.includes(p) ? p : undefined;
+            setPeriod(periods.includes(p) ? p : undefined);
         }
         const nums = time.match(/\d+/g) ?? [];
         if (!nums.length) {
@@ -64,19 +77,23 @@ function Panel(props) {
             return;
         }
         let i = 0;
+        const parsed = {
+            hour: undefined,
+            minute: undefined,
+            second: undefined,
+        };
         const r = format.replace(/(hh|h)+|(mm|m)+|(ss|s)+/gi, (p) => {
             const n = nums[i++] ?? 0;
-            let o = p;
-            if (UnitMaps[p] === "hour") {
-                o = Math.min(periods ? 11 : 23, n);
-            }
-            o = Math.min(59, n);
-            state[UnitMaps[p]] = o;
+            const o = Math.min(59, n);
+            parsed[UnitMaps[p]] = o;
             return p.length > 1 && o < 10 ? `0${o}` : o;
         });
+        setHour(parsed.hour);
+        setMinute(parsed.minute);
+        setSecond(parsed.second);
         onFallback(r);
-    }, [value]);
-    return (jsxs("div", { className: 'i-timepicker', children: [hours.length > 0 && (jsxs(Fragment, { children: [periods && (jsx("div", { className: 'i-timepicker-list', children: jsx(Items, { items: periods, active: state.period, onClick: (p) => handleSetTime(p, "period") }) })), jsx("div", { className: 'i-timepicker-list', children: jsx(Items, { items: hours, active: state.hour, unit: 'hour', renderItem: renderItem, onClick: (h) => handleSetTime(h, "hour") }) })] })), minutes.length > 0 && (jsx("div", { className: 'i-timepicker-list', children: jsx(Items, { items: minutes, active: state.minute, unit: 'minute', renderItem: renderItem, onClick: (m) => handleSetTime(m, "minute") }) })), seconds.length > 0 && (jsx("div", { className: 'i-timepicker-list', children: jsx(Items, { items: seconds, active: state.second, unit: 'second', renderItem: renderItem, onClick: (s) => handleSetTime(s, "second") }) }))] }));
+    }, [value, format, hours.length, periods]);
+    return (jsxs("div", { className: 'i-timepicker', children: [hours.length > 0 && (jsxs(Fragment, { children: [periods && (jsx("div", { className: 'i-timepicker-list', children: jsx(Items, { items: periods, active: period, onClick: (p) => handleSetTime(p, "period") }) })), jsx("div", { className: 'i-timepicker-list', children: jsx(Items, { items: hours, active: hour, unit: 'hour', renderItem: renderItem, onClick: (h) => handleSetTime(h, "hour") }) })] })), minutes.length > 0 && (jsx("div", { className: 'i-timepicker-list', children: jsx(Items, { items: minutes, active: minute, unit: 'minute', renderItem: renderItem, onClick: (m) => handleSetTime(m, "minute") }) })), seconds.length > 0 && (jsx("div", { className: 'i-timepicker-list', children: jsx(Items, { items: seconds, active: second, unit: 'second', renderItem: renderItem, onClick: (s) => handleSetTime(s, "second") }) }))] }));
 }
 
 export { Panel as default };

package/lib/es/components/picker/time/panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel.js","sources":["../../../../../packages/components/picker/time/panel.tsx"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport { useReactive } from \"../../../js/hooks\";\nimport \"./index.css\";\nimport Items from \"./item\";\n\nconst UnitMaps = {\n\th: \"hour\",\n\thh: \"hour\",\n\tm: \"minute\",\n\tmm: \"minute\",\n\ts: \"second\",\n\tss: \"second\",\n};\n\nexport default function Panel(props) {\n\tconst {\n\t\tvalue,\n\t\tstepH = 1,\n\t\tstepM = 1,\n\t\tstepS = 1,\n\t\tformat,\n\t\tperiods,\n\t\trenderItem,\n\t\tonChange,\n\t\tonFallback,\n\t} = props;\n\tconst state = useReactive<any>({\n\t\tperiod: undefined,\n\t\thour: undefined,\n\t\tminute: undefined,\n\t\tsecond: undefined,\n\t});\n\n\tconst [hours, minutes, seconds] = useMemo(() => {\n\t\tconst hasH = format.includes(\"h\");\n\t\tconst hasM = format.includes(\"m\");\n\t\tconst hasS = format.includes(\"s\");\n\t\tconst hours = hasH\n\t\t\t? Array.from(\n\t\t\t\t\t{ length: (periods ? 12 : 24) / stepH },\n\t\t\t\t\t(_, i) => i * stepH\n\t\t\t  )\n\t\t\t: [];\n\t\tconst minutes = hasM\n\t\t\t? Array.from({ length: 60 / stepM }, (_, i) => i * stepM)\n\t\t\t: [];\n\t\tconst seconds = hasS\n\t\t\t? Array.from({ length: 60 / stepS }, (_, i) => i * stepS)\n\t\t\t: [];\n\n\t\treturn [hours, minutes, seconds];\n\t}, [stepH, stepM, stepS, format, periods]);\n\n\tconst updateValue = () => {\n\t\tconst reg = /(hh|h){1}|(mm|m){1}|(ss|s){1}/gi;\n\t\tlet result = format.replace(reg, (pattern) => {\n\t\t\tconst p = pattern.toLowerCase();\n\t\t\tconst u = UnitMaps[p];\n\t\t\tconst n = state[u] ?? 0;\n\n\t\t\treturn p.length > 1 && n < 10 ? `0${n ?? 0}` : n ?? 0;\n\t\t});\n\n\t\tif (periods && hours.length > 0) {\n\t\t\tresult = `${state.period ?? periods[0]} ${result}`;\n\t\t}\n\n\t\tonChange(result);\n\t};\n\n\tconst handleSetTime = (v, unit) => {\n\t\tstate[unit] = v;\n\t\tupdateValue();\n\t};\n\n\tuseEffect(() => {\n\t\tlet time = value ?? \"\";\n\n\t\tif (periods && hours.length > 0 && value) {\n\t\t\tconst [p, t] = value.split(\" \");\n\t\t\ttime = t ?? \"\";\n\t\t\tstate.period = periods.includes(p) ? p : undefined;\n\t\t}\n\n\t\tconst nums = time.match(/\\d+/g) ?? [];\n\n\t\tif (!nums.length) {\n\t\t\tonFallback(\"\");\n\t\t\treturn;\n\t\t}\n\n\t\tlet i = 0;\n\t\tconst r = format.replace(/(hh|h)+|(mm|m)+|(ss|s)+/gi, (p) => {\n\t\t\tconst n = nums[i++] ?? 0;\n\t\t\tlet o = p;\n\n\t\t\tif (UnitMaps[p] === \"hour\") {\n\t\t\t\to = Math.min(periods ? 11 : 23, n);\n\t\t\t}\n\n\t\t\to = Math.min(59, n);\n\n\t\t\tstate[UnitMaps[p]] = o;\n\t\t\treturn p.length > 1 && o < 10 ? `0${o}` : o;\n\t\t});\n\n\t\tonFallback(r);\n\t}, [value]);\n\n\treturn (\n\t\t<div className='i-timepicker'>\n\t\t\t{hours.length > 0 && (\n\t\t\t\t<>\n\t\t\t\t\t{periods && (\n\t\t\t\t\t\t<div className='i-timepicker-list'>\n\t\t\t\t\t\t\t<Items\n\t\t\t\t\t\t\t\titems={periods}\n\t\t\t\t\t\t\t\tactive={state.period}\n\t\t\t\t\t\t\t\tonClick={(p) => handleSetTime(p, \"period\")}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<div className='i-timepicker-list'>\n\t\t\t\t\t\t<Items\n\t\t\t\t\t\t\titems={hours}\n\t\t\t\t\t\t\tactive={state.hour}\n\t\t\t\t\t\t\tunit='hour'\n\t\t\t\t\t\t\trenderItem={renderItem}\n\t\t\t\t\t\t\tonClick={(h) => handleSetTime(h, \"hour\")}\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\t{minutes.length > 0 && (\n\t\t\t\t<div className='i-timepicker-list'>\n\t\t\t\t\t<Items\n\t\t\t\t\t\titems={minutes}\n\t\t\t\t\t\tactive={state.minute}\n\t\t\t\t\t\tunit='minute'\n\t\t\t\t\t\trenderItem={renderItem}\n\t\t\t\t\t\tonClick={(m) => handleSetTime(m, \"minute\")}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{seconds.length > 0 && (\n\t\t\t\t<div className='i-timepicker-list'>\n\t\t\t\t\t<Items\n\t\t\t\t\t\titems={seconds}\n\t\t\t\t\t\tactive={state.second}\n\t\t\t\t\t\tunit='second'\n\t\t\t\t\t\trenderItem={renderItem}\n\t\t\t\t\t\tonClick={(s) => handleSetTime(s, \"second\")}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAKA,MAAM,QAAQ,GAAG;AAChB,IAAA,CAAC,EAAE,MAAM;AACT,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,CAAC,EAAE,QAAQ;AACX,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,CAAC,EAAE,QAAQ;AACX,IAAA,EAAE,EAAE,QAAQ;CACZ;AAEa,SAAU,KAAK,CAAC,KAAK,EAAA;IAClC,MAAM,EACL,KAAK,EACL,KAAK,GAAG,CAAC,EACT,KAAK,GAAG,CAAC,EACT,KAAK,GAAG,CAAC,EACT,MAAM,EACN,OAAO,EACP,UAAU,EACV,QAAQ,EACR,UAAU,GACV,GAAG,KAAK;IACT,MAAM,KAAK,GAAG,WAAW,CAAM;AAC9B,QAAA,MAAM,EAAE,SAAS;AACjB,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,MAAM,EAAE,SAAS;AACjB,QAAA,MAAM,EAAE,SAAS;AACjB,KAAA,CAAC;IAEF,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,MAAK;QAC9C,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC;QACjC,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC;QACjC,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC;QACjC,MAAM,KAAK,GAAG;AACb,cAAE,KAAK,CAAC,IAAI,CACV,EAAE,MAAM,EAAE,CAAC,OAAO,GAAG,EAAE,GAAG,EAAE,IAAI,KAAK,EAAE,EACvC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,KAAK;cAEnB,EAAE;QACL,MAAM,OAAO,GAAG;cACb,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,KAAK;cACtD,EAAE;QACL,MAAM,OAAO,GAAG;cACb,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,KAAK;cACtD,EAAE;AAEL,QAAA,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC;AACjC,IAAA,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;IAE1C,MAAM,WAAW,GAAG,MAAK;QACxB,MAAM,GAAG,GAAG,iCAAiC;QAC7C,IAAI,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,OAAO,KAAI;AAC5C,YAAA,MAAM,CAAC,GAAG,OAAO,CAAC,WAAW,EAAE;AAC/B,YAAA,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;YACrB,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;YAEvB,OAAO,CAAC,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CAAA,CAAA,EAAI,CAAC,IAAI,CAAC,CAAA,CAAE,GAAG,CAAC,IAAI,CAAC;AACtD,QAAA,CAAC,CAAC;QAEF,IAAI,OAAO,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;AAChC,YAAA,MAAM,GAAG,CAAA,EAAG,KAAK,CAAC,MAAM,IAAI,OAAO,CAAC,CAAC,CAAC,CAAA,CAAA,EAAI,MAAM,EAAE;QACnD;QAEA,QAAQ,CAAC,MAAM,CAAC;AACjB,IAAA,CAAC;AAED,IAAA,MAAM,aAAa,GAAG,CAAC,CAAC,EAAE,IAAI,KAAI;AACjC,QAAA,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;AACf,QAAA,WAAW,EAAE;AACd,IAAA,CAAC;IAED,SAAS,CAAC,MAAK;AACd,QAAA,IAAI,IAAI,GAAG,KAAK,IAAI,EAAE;QAEtB,IAAI,OAAO,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,KAAK,EAAE;AACzC,YAAA,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;AAC/B,YAAA,IAAI,GAAG,CAAC,IAAI,EAAE;AACd,YAAA,KAAK,CAAC,MAAM,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,SAAS;QACnD;QAEA,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE;AAErC,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YACjB,UAAU,CAAC,EAAE,CAAC;YACd;QACD;QAEA,IAAI,CAAC,GAAG,CAAC;QACT,MAAM,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,2BAA2B,EAAE,CAAC,CAAC,KAAI;YAC3D,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC;YACxB,IAAI,CAAC,GAAG,CAAC;AAET,YAAA,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,MAAM,EAAE;AAC3B,gBAAA,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC;YACnC;YAEA,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC;YAEnB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;AACtB,YAAA,OAAO,CAAC,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,CAAA,CAAE,GAAG,CAAC;AAC5C,QAAA,CAAC,CAAC;QAEF,UAAU,CAAC,CAAC,CAAC;AACd,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IAEX,QACCA,cAAK,SAAS,EAAC,cAAc,EAAA,QAAA,EAAA,CAC3B,KAAK,CAAC,MAAM,GAAG,CAAC,KAChBA,4BACE,OAAO,KACPC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mBAAmB,EAAA,QAAA,EACjCA,GAAA,CAAC,KAAK,EAAA,EACL,KAAK,EAAE,OAAO,EACd,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,OAAO,EAAE,CAAC,CAAC,KAAK,aAAa,CAAC,CAAC,EAAE,QAAQ,CAAC,GACzC,EAAA,CACG,CACN,EACDA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mBAAmB,EAAA,QAAA,EACjCA,IAAC,KAAK,EAAA,EACL,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,KAAK,CAAC,IAAI,EAClB,IAAI,EAAC,MAAM,EACX,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,CAAC,CAAC,KAAK,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC,GACvC,EAAA,CACG,CAAA,EAAA,CACJ,CACH,EACA,OAAO,CAAC,MAAM,GAAG,CAAC,KAClBA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mBAAmB,YACjCA,GAAA,CAAC,KAAK,IACL,KAAK,EAAE,OAAO,EACd,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,IAAI,EAAC,QAAQ,EACb,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,CAAC,CAAC,KAAK,aAAa,CAAC,CAAC,EAAE,QAAQ,CAAC,EAAA,CACzC,EAAA,CACG,CACN,EACA,OAAO,CAAC,MAAM,GAAG,CAAC,KAClBA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mBAAmB,YACjCA,GAAA,CAAC,KAAK,IACL,KAAK,EAAE,OAAO,EACd,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,IAAI,EAAC,QAAQ,EACb,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,CAAC,CAAC,KAAK,aAAa,CAAC,CAAC,EAAE,QAAQ,CAAC,GACzC,EAAA,CACG,CACN,CAAA,EAAA,CACI;AAER;;;;"}
+{"version":3,"file":"panel.js","sources":["../../../../../packages/components/picker/time/panel.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport \"./index.css\";\nimport Items from \"./item\";\n\nconst UnitMaps = {\n\th: \"hour\",\n\thh: \"hour\",\n\tm: \"minute\",\n\tmm: \"minute\",\n\ts: \"second\",\n\tss: \"second\",\n};\n\nexport default function Panel(props) {\n\tconst {\n\t\tvalue,\n\t\tstepH = 1,\n\t\tstepM = 1,\n\t\tstepS = 1,\n\t\tformat,\n\t\tperiods,\n\t\trenderItem,\n\t\tonChange,\n\t\tonFallback,\n\t} = props;\n\tconst [period, setPeriod] = useState<any>(undefined);\n\tconst [hour, setHour] = useState<any>(undefined);\n\tconst [minute, setMinute] = useState<any>(undefined);\n\tconst [second, setSecond] = useState<any>(undefined);\n\n\tconst [hours, minutes, seconds] = useMemo(() => {\n\t\tconst hasH = format.includes(\"h\");\n\t\tconst hasM = format.includes(\"m\");\n\t\tconst hasS = format.includes(\"s\");\n\t\tconst hours = hasH\n\t\t\t? Array.from(\n\t\t\t\t\t{ length: (periods ? 12 : 24) / stepH },\n\t\t\t\t\t(_, i) => i * stepH\n\t\t\t  )\n\t\t\t: [];\n\t\tconst minutes = hasM\n\t\t\t? Array.from({ length: 60 / stepM }, (_, i) => i * stepM)\n\t\t\t: [];\n\t\tconst seconds = hasS\n\t\t\t? Array.from({ length: 60 / stepS }, (_, i) => i * stepS)\n\t\t\t: [];\n\n\t\treturn [hours, minutes, seconds];\n\t}, [stepH, stepM, stepS, format, periods]);\n\n\tconst updateValue = (next?: {\n\t\tperiod?: any;\n\t\thour?: any;\n\t\tminute?: any;\n\t\tsecond?: any;\n\t}) => {\n\t\tconst nextPeriod = next?.period ?? period;\n\t\tconst nextHour = next?.hour ?? hour;\n\t\tconst nextMinute = next?.minute ?? minute;\n\t\tconst nextSecond = next?.second ?? second;\n\n\t\tconst reg = /(hh|h){1}|(mm|m){1}|(ss|s){1}/gi;\n\t\tlet result = format.replace(reg, (pattern) => {\n\t\t\tconst p = pattern.toLowerCase();\n\t\t\tconst u = UnitMaps[p];\n\t\t\tconst n =\n\t\t\t\tu === \"hour\"\n\t\t\t\t\t? (nextHour ?? 0)\n\t\t\t\t\t: u === \"minute\"\n\t\t\t\t\t\t? (nextMinute ?? 0)\n\t\t\t\t\t\t: (nextSecond ?? 0);\n\n\t\t\treturn p.length > 1 && n < 10 ? `0${n ?? 0}` : n ?? 0;\n\t\t});\n\n\t\tif (periods && hours.length > 0) {\n\t\t\tresult = `${nextPeriod ?? periods[0]} ${result}`;\n\t\t}\n\n\t\tonChange(result);\n\t};\n\n\tconst handleSetTime = (v, unit) => {\n\t\tconst next = { period, hour, minute, second, [unit]: v };\n\n\t\tif (unit === \"period\") setPeriod(v);\n\t\tif (unit === \"hour\") setHour(v);\n\t\tif (unit === \"minute\") setMinute(v);\n\t\tif (unit === \"second\") setSecond(v);\n\n\t\tupdateValue(next);\n\t};\n\n\tuseEffect(() => {\n\t\tlet time = value ?? \"\";\n\n\t\tif (periods && hours.length > 0 && value) {\n\t\t\tconst [p, t] = value.split(\" \");\n\t\t\ttime = t ?? \"\";\n\t\t\tsetPeriod(periods.includes(p) ? p : undefined);\n\t\t}\n\n\t\tconst nums = time.match(/\\d+/g) ?? [];\n\n\t\tif (!nums.length) {\n\t\t\tonFallback(\"\");\n\t\t\treturn;\n\t\t}\n\n\t\tlet i = 0;\n\t\tconst parsed = {\n\t\t\thour: undefined,\n\t\t\tminute: undefined,\n\t\t\tsecond: undefined,\n\t\t};\n\t\tconst r = format.replace(/(hh|h)+|(mm|m)+|(ss|s)+/gi, (p) => {\n\t\t\tconst n = nums[i++] ?? 0;\n\t\t\tconst o = Math.min(59, n);\n\t\t\tparsed[UnitMaps[p]] = o;\n\t\t\treturn p.length > 1 && o < 10 ? `0${o}` : o;\n\t\t});\n\n\t\tsetHour(parsed.hour);\n\t\tsetMinute(parsed.minute);\n\t\tsetSecond(parsed.second);\n\t\tonFallback(r);\n\t}, [value, format, hours.length, periods]);\n\n\treturn (\n\t\t<div className='i-timepicker'>\n\t\t\t{hours.length > 0 && (\n\t\t\t\t<>\n\t\t\t\t\t{periods && (\n\t\t\t\t\t\t<div className='i-timepicker-list'>\n\t\t\t\t\t\t\t<Items\n\t\t\t\t\t\t\t\titems={periods}\n\t\t\t\t\t\t\t\tactive={period}\n\t\t\t\t\t\t\t\tonClick={(p) => handleSetTime(p, \"period\")}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<div className='i-timepicker-list'>\n\t\t\t\t\t\t<Items\n\t\t\t\t\t\t\titems={hours}\n\t\t\t\t\t\t\tactive={hour}\n\t\t\t\t\t\t\tunit='hour'\n\t\t\t\t\t\t\trenderItem={renderItem}\n\t\t\t\t\t\t\tonClick={(h) => handleSetTime(h, \"hour\")}\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\t{minutes.length > 0 && (\n\t\t\t\t<div className='i-timepicker-list'>\n\t\t\t\t\t<Items\n\t\t\t\t\t\titems={minutes}\n\t\t\t\t\t\tactive={minute}\n\t\t\t\t\t\tunit='minute'\n\t\t\t\t\t\trenderItem={renderItem}\n\t\t\t\t\t\tonClick={(m) => handleSetTime(m, \"minute\")}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{seconds.length > 0 && (\n\t\t\t\t<div className='i-timepicker-list'>\n\t\t\t\t\t<Items\n\t\t\t\t\t\titems={seconds}\n\t\t\t\t\t\tactive={second}\n\t\t\t\t\t\tunit='second'\n\t\t\t\t\t\trenderItem={renderItem}\n\t\t\t\t\t\tonClick={(s) => handleSetTime(s, \"second\")}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}