@ioca/react 1.3.4 → 1.3.5

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

@@ -0,0 +1,77 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { KeyboardArrowLeftRound, KeyboardArrowRightRound } from '@ricons/material';
+import { useReactive } from 'ahooks';
+import classNames from 'classnames';
+import dayjs from 'dayjs';
+import { throttle } from 'radash';
+import { useRef, useEffect } from 'react';
+import Icon from '../../icon/icon.js';
+import Helpericon from '../../utils/helpericon/helpericon.js';
+import Dates from './dates.js';
+
+const MONTHS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+const YearMonth = (props) => {
+    const { value, unitMonth = "月", unitYear = "年", renderYear, renderMonth, onClick, } = props;
+    return (jsxs("a", { className: 'i-datepicker-action', "data-ripple": true, onClick: onClick, children: [jsx("span", { children: renderYear?.(value.year()) }), unitYear, jsx("span", { children: renderMonth?.(value.month() + 1) }), unitMonth] }));
+};
+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 $years = useRef(null);
+    const handleOperateMonth = (next) => {
+        state.month = state.month[next ? "add" : "subtract"](1, "month");
+    };
+    const handleChangeDate = (date) => {
+        if (date.isSame(state.today, "day"))
+            return;
+        if (!date.isSame(state.month, "month")) {
+            state.month = date;
+        }
+        state.today = date;
+        onDateClick?.(date);
+    };
+    const handleChangeMonth = (month) => {
+        state.month = state.month
+            .year(state.selectedYear.year())
+            .month(month - 1);
+        state.selectable = false;
+    };
+    const getMoreYears = throttle({ interval: 100 }, (e) => {
+        const isUp = e.deltaY < 0;
+        state.years = state.years.map((y) => (y += isUp ? -1 : 1));
+    });
+    useEffect(() => {
+        if (!state.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]);
+    useEffect(() => {
+        state.today = value;
+        state.month = 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,
+                }), 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) => {
+                            return (jsx("a", { className: classNames("i-datepicker-month", {
+                                    "i-datepicker-active": m === state.month.month() + 1,
+                                }), onClick: () => handleChangeMonth(m), children: renderMonth(m) }, m));
+                        }) })] }), jsx(Dates, { value: state.today, month: state.month, disabledDate: disabledDate, onDateClick: handleChangeDate, renderDate: renderDate })] }));
+};
+
+export { Panel as default };
+//# sourceMappingURL=panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"panel.js","sources":["../../../../../packages/components/picker/dates/panel.tsx"],"sourcesContent":["import {\n\tKeyboardArrowLeftRound,\n\tKeyboardArrowRightRound,\n} from \"@ricons/material\";\nimport { useReactive } from \"ahooks\";\nimport classNames from \"classnames\";\nimport dayjs, { Dayjs } from \"dayjs\";\nimport { throttle } from \"radash\";\nimport { ReactNode, useEffect, useRef } 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 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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"}

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

@@ -0,0 +1,46 @@
+import { jsx } from 'react/jsx-runtime';
+import { AccessTimeRound } from '@ricons/material';
+import { useReactive } from 'ahooks';
+import { useState, useEffect } from 'react';
+import Icon from '../../icon/icon.js';
+import '../../input/index.js';
+import Popup from '../../popup/popup.js';
+import Panel from './panel.js';
+import Input from '../../input/input.js';
+
+const FORMAT = "hh:mm:ss";
+function TimePicker(props) {
+    const { name, value, format = FORMAT, periods, placeholder = props.format ?? FORMAT, renderItem, onChange, onBlur, popupProps, ...restProps } = props;
+    const state = useReactive({
+        value,
+        safeValue: undefined,
+    });
+    const [active, setActive] = useState(false);
+    const handleChange = (v) => {
+        state.value = v;
+    };
+    const handleFallback = (v) => {
+        state.safeValue = v;
+    };
+    const handleValidTime = () => {
+        if (!state.value)
+            return;
+        state.value = state.safeValue;
+        handleChange(state.safeValue);
+    };
+    const handleBlur = (e) => {
+        onBlur?.(e);
+        handleValidTime();
+    };
+    const handleVisibleChange = (v) => {
+        popupProps?.onVisibleChange?.(v);
+        setActive(v);
+    };
+    useEffect(() => {
+        state.value = 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, ...restProps }) }));
+}
+
+export { TimePicker as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../packages/components/picker/time/index.tsx"],"sourcesContent":["import { AccessTimeRound } from \"@ricons/material\";\nimport { useReactive } from \"ahooks\";\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\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\t{...restProps}\n\t\t\t/>\n\t\t</Popup>\n\t);\n}\n"],"names":["_jsx"],"mappings":";;;;;;;;;;AASA,MAAM,MAAM,GAAG,UAAU;AAED,SAAA,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,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,KAAC;AAED,IAAA,MAAM,cAAc,GAAG,CAAC,CAAC,KAAI;AAC5B,QAAA,KAAK,CAAC,SAAS,GAAG,CAAC;AACpB,KAAC;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,KAAC;AAED,IAAA,MAAM,UAAU,GAAG,CAAC,CAAC,KAAI;AACxB,QAAA,MAAM,GAAG,CAAC,CAAC;AACX,QAAA,eAAe,EAAE;AAClB,KAAC;AAED,IAAA,MAAM,mBAAmB,GAAG,CAAC,CAAC,KAAI;AACjC,QAAA,UAAU,EAAE,eAAe,GAAG,CAAC,CAAC;QAChC,SAAS,CAAC,CAAC,CAAC;AACb,KAAC;IAED,SAAS,CAAC,MAAK;AACd,QAAA,KAAK,CAAC,KAAK,GAAG,KAAK;AACpB,KAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IAEX,QACCA,GAAC,CAAA,KAAK,EACL,EAAA,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,GAAC,CAAA,KAAK,EACL,EAAA,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,EACzB,CAAA,EAAA,QAAA,EAGHA,GAAC,CAAA,KAAK,EACL,EAAA,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,EAAA,GACd,SAAS,EAAA,CACZ,EACK,CAAA;AAEV;;;;"}

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

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+
+function Items(props) {
+    const { items = [], active, renderItem, unit, onClick } = props;
+    return items.map((n) => {
+        const isActive = n === active;
+        return (jsx("a", { className: classNames("i-timepicker-item", {
+                "i-timepicker-item-active": isActive,
+            }), onClick: () => onClick(n), children: renderItem?.(n, isActive, unit) ?? (n < 10 ? `0${n}` : n) }, n));
+    });
+}
+
+export { Items as default };
+//# sourceMappingURL=item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"item.js","sources":["../../../../../packages/components/picker/time/item.tsx"],"sourcesContent":["import classNames from \"classnames\";\n\nexport default function Items(props) {\n\tconst { items = [], active, renderItem, unit, onClick } = props;\n\n\treturn items.map((n) => {\n\t\tconst isActive = n === active;\n\n\t\treturn (\n\t\t\t<a\n\t\t\t\tkey={n}\n\t\t\t\tclassName={classNames(\"i-timepicker-item\", {\n\t\t\t\t\t\"i-timepicker-item-active\": isActive,\n\t\t\t\t})}\n\t\t\t\tonClick={() => onClick(n)}\n\t\t\t>\n\t\t\t\t{renderItem?.(n, isActive, unit) ?? (n < 10 ? `0${n}` : n)}\n\t\t\t</a>\n\t\t);\n\t});\n}\n"],"names":["_jsx"],"mappings":";;;AAEwB,SAAA,KAAK,CAAC,KAAK,EAAA;AAClC,IAAA,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK;AAE/D,IAAA,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,KAAI;AACtB,QAAA,MAAM,QAAQ,GAAG,CAAC,KAAK,MAAM;AAE7B,QAAA,QACCA,GAEC,CAAA,GAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,mBAAmB,EAAE;AAC1C,gBAAA,0BAA0B,EAAE,QAAQ;AACpC,aAAA,CAAC,EACF,OAAO,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,EAAA,QAAA,EAExB,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,CAAA,CAAE,GAAG,CAAC,CAAC,IANrD,CAAC,CAOH;AAEN,KAAC,CAAC;AACH;;;;"}

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

@@ -0,0 +1,83 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useReactive } from 'ahooks';
+import { useMemo, useEffect } from 'react';
+import Items from './item.js';
+
+const UnitMaps = {
+    h: "hour",
+    hh: "hour",
+    m: "minute",
+    mm: "minute",
+    s: "second",
+    ss: "second",
+};
+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 [hours, minutes, seconds] = useMemo(() => {
+        const hasH = format.includes("h");
+        const hasM = format.includes("m");
+        const hasS = format.includes("s");
+        const hours = hasH
+            ? Array.from({ length: (periods ? 12 : 24) / stepH }, (_, i) => i * stepH)
+            : [];
+        const minutes = hasM
+            ? Array.from({ length: 60 / stepM }, (_, i) => i * stepM)
+            : [];
+        const seconds = hasS
+            ? Array.from({ length: 60 / stepS }, (_, i) => i * stepS)
+            : [];
+        return [hours, minutes, seconds];
+    }, [stepH, stepM, stepS, format, periods]);
+    const updateValue = () => {
+        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;
+            return p.length > 1 && n < 10 ? `0${n ?? 0}` : n ?? 0;
+        });
+        if (periods && hours.length > 0) {
+            result = `${state.period ?? periods[0]} ${result}`;
+        }
+        onChange(result);
+    };
+    const handleSetTime = (v, unit) => {
+        state[unit] = v;
+        updateValue();
+    };
+    useEffect(() => {
+        let time = value ?? "";
+        if (periods && hours.length > 0 && value) {
+            const [p, t] = value.split(" ");
+            time = t ?? "";
+            state.period = periods.includes(p) ? p : undefined;
+        }
+        const nums = time.match(/\d+/g) ?? [];
+        if (!nums.length) {
+            onFallback("");
+            return;
+        }
+        let i = 0;
+        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;
+            return p.length > 1 && o < 10 ? `0${o}` : o;
+        });
+        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") }) }))] }));
+}
+
+export { Panel as default };
+//# sourceMappingURL=panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"panel.js","sources":["../../../../../packages/components/picker/time/panel.tsx"],"sourcesContent":["import { useReactive } from \"ahooks\";\nimport { useEffect, useMemo } 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 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":"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"}

package/lib/es/components/popconfirm/index.js

@@ -0,0 +1,6 @@
+import Popconfirm from './popconfirm.js';
+
+
+
+export { Popconfirm as default };
+//# sourceMappingURL=index.js.map

package/lib/es/components/popconfirm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/lib/es/components/popconfirm/popconfirm.js

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { InfoOutlined } from '@ricons/material';
+import { useReactive } from 'ahooks';
+import '../button/index.js';
+import Flex from '../flex/flex.js';
+import Icon from '../icon/icon.js';
+import Popup from '../popup/popup.js';
+import Button from '../button/button.js';
+
+const defaultOk = {
+    children: "确定",
+};
+const defaultCancel = {
+    children: "取消",
+    secondary: true,
+};
+const Popconfirm = (props) => {
+    const { trigger = "click", visible, icon = jsx(Icon, { icon: jsx(InfoOutlined, {}), className: 'error' }), content, okButtonProps, cancelButtonProps, children, align = "end", position = "top", offset = 12, extra, onOk, onClose, ...restProps } = props;
+    const state = useReactive({
+        loading: false,
+        visible,
+    });
+    const ok = okButtonProps
+        ? Object.assign({}, defaultOk, okButtonProps)
+        : defaultOk;
+    const cancel = cancelButtonProps
+        ? Object.assign({}, defaultCancel, cancelButtonProps)
+        : defaultCancel;
+    const handleVisibleChange = (v) => {
+        state.visible = v;
+        restProps.onVisibleChange?.(v);
+    };
+    const handleOk = async (e) => {
+        state.loading = true;
+        ok.onClick?.(e);
+        onOk?.()
+            ?.then(() => {
+            state.visible = false;
+        })
+            .finally(() => {
+            state.loading = false;
+        });
+    };
+    const handleCancel = async (e) => {
+        cancel.onClick?.(e);
+        await onClose?.();
+        state.visible = false;
+    };
+    const popconfirmContent = (jsxs("div", { className: 'i-popconfirm', children: [jsxs(Flex, { gap: 12, children: [icon, jsx("div", { className: 'i-popconfirm-content', children: content })] }), jsxs(Flex, { gap: 12, justify: 'flex-end', className: 'mt-8 i-popconfirm-footer', children: [cancelButtonProps !== null && (jsx(Button, { ...cancel, onClick: handleCancel })), extra, okButtonProps !== null && (jsx(Button, { loading: state.loading, ...ok, onClick: handleOk }))] })] }));
+    return (jsx(Popup, { content: popconfirmContent, ...restProps, trigger: trigger, visible: state.visible, align: align, offset: offset, position: position, onVisibleChange: handleVisibleChange, children: children }));
+};
+
+export { Popconfirm as default };
+//# sourceMappingURL=popconfirm.js.map

package/lib/es/components/popconfirm/popconfirm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popconfirm.js","sources":["../../../../packages/components/popconfirm/popconfirm.tsx"],"sourcesContent":["import { InfoOutlined } from \"@ricons/material\";\nimport { useReactive } from \"ahooks\";\nimport { MouseEvent } from \"react\";\nimport Button from \"../button\";\nimport { IButton } from \"../button/type\";\nimport Flex from \"../flex\";\nimport Icon from \"../icon\";\nimport Popup from \"../popup\";\nimport \"./index.css\";\nimport { IPopconfirm } from \"./type\";\n\nconst defaultOk = {\n\tchildren: \"确定\",\n};\n\nconst defaultCancel = {\n\tchildren: \"取消\",\n\tsecondary: true,\n};\n\nconst Popconfirm = (props: IPopconfirm) => {\n\tconst {\n\t\ttrigger = \"click\",\n\t\tvisible,\n\t\ticon = <Icon icon={<InfoOutlined />} className='error' />,\n\t\tcontent,\n\t\tokButtonProps,\n\t\tcancelButtonProps,\n\t\tchildren,\n\t\talign = \"end\",\n\t\tposition = \"top\",\n\t\toffset = 12,\n\t\textra,\n\t\tonOk,\n\t\tonClose,\n\t\t...restProps\n\t} = props;\n\n\tconst state = useReactive({\n\t\tloading: false,\n\t\tvisible,\n\t});\n\n\tconst ok: IButton = okButtonProps\n\t\t? Object.assign({}, defaultOk, okButtonProps)\n\t\t: defaultOk;\n\tconst cancel: IButton = cancelButtonProps\n\t\t? Object.assign({}, defaultCancel, cancelButtonProps)\n\t\t: defaultCancel;\n\n\tconst handleVisibleChange = (v: boolean) => {\n\t\tstate.visible = v;\n\t\trestProps.onVisibleChange?.(v);\n\t};\n\n\tconst handleOk = async (e: MouseEvent<HTMLElement>) => {\n\t\tstate.loading = true;\n\t\tok.onClick?.(e);\n\n\t\tonOk?.()\n\t\t\t?.then(() => {\n\t\t\t\tstate.visible = false;\n\t\t\t})\n\t\t\t.finally(() => {\n\t\t\t\tstate.loading = false;\n\t\t\t});\n\t};\n\n\tconst handleCancel = async (e: MouseEvent<HTMLElement>) => {\n\t\tcancel.onClick?.(e);\n\t\tawait onClose?.();\n\t\tstate.visible = false;\n\t};\n\n\tconst popconfirmContent = (\n\t\t<div className='i-popconfirm'>\n\t\t\t<Flex gap={12}>\n\t\t\t\t{icon}\n\t\t\t\t<div className='i-popconfirm-content'>{content}</div>\n\t\t\t</Flex>\n\n\t\t\t<Flex\n\t\t\t\tgap={12}\n\t\t\t\tjustify='flex-end'\n\t\t\t\tclassName='mt-8 i-popconfirm-footer'\n\t\t\t>\n\t\t\t\t{cancelButtonProps !== null && (\n\t\t\t\t\t<Button {...cancel} onClick={handleCancel} />\n\t\t\t\t)}\n\t\t\t\t{extra}\n\t\t\t\t{okButtonProps !== null && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tloading={state.loading}\n\t\t\t\t\t\t{...ok}\n\t\t\t\t\t\tonClick={handleOk}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</Flex>\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<Popup\n\t\t\tcontent={popconfirmContent}\n\t\t\t{...restProps}\n\t\t\ttrigger={trigger}\n\t\t\tvisible={state.visible}\n\t\t\talign={align}\n\t\t\toffset={offset}\n\t\t\tposition={position}\n\t\t\tonVisibleChange={handleVisibleChange}\n\t\t>\n\t\t\t{children}\n\t\t</Popup>\n\t);\n};\n\nexport default Popconfirm;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/lib/es/components/popup/content.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import { useMemo } from 'react';
+import { createPortal } from 'react-dom';
+
+const Content = (props) => {
+    const { ref, getContainer = (trigger) => trigger?.offsetParent ?? document.body, trigger, arrow, arrowProps = {}, className, children, ...restProps } = props;
+    const arrowCSS = useMemo(() => {
+        let { left, top, pos } = arrowProps;
+        let transform = "";
+        switch (pos) {
+            case "left":
+                left += 2;
+                transform = `translate(-100%, -50%) rotate(180deg)`;
+                break;
+            case "right":
+                left -= 2;
+                transform = `translate(0, -50%)`;
+                break;
+            case "top":
+                top -= 2;
+                transform = `translate(-50%, -50%) rotate(-90deg)`;
+                break;
+            case "bottom":
+                top += 2;
+                transform = `translate(-50%, -50%) rotate(90deg)`;
+                break;
+        }
+        return {
+            left,
+            top,
+            transform,
+        };
+    }, [arrowProps]);
+    const content = (jsxs("div", { ref: ref, className: classNames("i-popup", className), ...restProps, children: [arrow && (jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', className: 'i-popup-arrow', style: arrowCSS, children: jsx("path", { d: 'M0.5 0L1.5 0C1.5 4, 3 5.5, 5 7.5S8,10 8,12S7 14.5, 5 16.5S1.5,20 1.5,24L0.5 24L0.5 0z' }) })), children] }));
+    return createPortal(content, getContainer(trigger));
+};
+
+export { Content as default };
+//# sourceMappingURL=content.js.map

package/lib/es/components/popup/content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content.js","sources":["../../../../packages/components/popup/content.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { useMemo } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { IPopupContent } from \"./type\";\n\nconst Content = (props: IPopupContent) => {\n\tconst {\n\t\tref,\n\t\tgetContainer = (trigger) => trigger?.offsetParent ?? document.body,\n\t\ttrigger,\n\t\tarrow,\n\t\tarrowProps = {},\n\t\tclassName,\n\t\tchildren,\n\t\t...restProps\n\t} = props;\n\n\tconst arrowCSS = useMemo(() => {\n\t\tlet { left, top, pos } = arrowProps;\n\t\tlet transform = \"\";\n\n\t\tswitch (pos) {\n\t\t\tcase \"left\":\n\t\t\t\tleft += 2;\n\t\t\t\ttransform = `translate(-100%, -50%) rotate(180deg)`;\n\t\t\t\tbreak;\n\t\t\tcase \"right\":\n\t\t\t\tleft -= 2;\n\t\t\t\ttransform = `translate(0, -50%)`;\n\t\t\t\tbreak;\n\t\t\tcase \"top\":\n\t\t\t\ttop -= 2;\n\t\t\t\ttransform = `translate(-50%, -50%) rotate(-90deg)`;\n\t\t\t\tbreak;\n\t\t\tcase \"bottom\":\n\t\t\t\ttop += 2;\n\t\t\t\ttransform = `translate(-50%, -50%) rotate(90deg)`;\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\n\t\treturn {\n\t\t\tleft,\n\t\t\ttop,\n\t\t\ttransform,\n\t\t};\n\t}, [arrowProps]);\n\n\tconst content = (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={classNames(\"i-popup\", className)}\n\t\t\t{...restProps}\n\t\t>\n\t\t\t{arrow && (\n\t\t\t\t<svg\n\t\t\t\t\txmlns='http://www.w3.org/2000/svg'\n\t\t\t\t\tclassName='i-popup-arrow'\n\t\t\t\t\tstyle={arrowCSS}\n\t\t\t\t>\n\t\t\t\t\t<path d='M0.5 0L1.5 0C1.5 4, 3 5.5, 5 7.5S8,10 8,12S7 14.5, 5 16.5S1.5,20 1.5,24L0.5 24L0.5 0z' />\n\t\t\t\t</svg>\n\t\t\t)}\n\n\t\t\t{children}\n\t\t</div>\n\t);\n\n\treturn createPortal(content, getContainer(trigger));\n};\n\nexport default Content;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAKA,MAAM,OAAO,GAAG,CAAC,KAAoB,KAAI;AACxC,IAAA,MAAM,EACL,GAAG,EACH,YAAY,GAAG,CAAC,OAAO,KAAK,OAAO,EAAE,YAAY,IAAI,QAAQ,CAAC,IAAI,EAClE,OAAO,EACP,KAAK,EACL,UAAU,GAAG,EAAE,EACf,SAAS,EACT,QAAQ,EACR,GAAG,SAAS,EACZ,GAAG,KAAK;AAET,IAAA,MAAM,QAAQ,GAAG,OAAO,CAAC,MAAK;QAC7B,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,UAAU;QACnC,IAAI,SAAS,GAAG,EAAE;QAElB,QAAQ,GAAG;AACV,YAAA,KAAK,MAAM;gBACV,IAAI,IAAI,CAAC;gBACT,SAAS,GAAG,uCAAuC;gBACnD;AACD,YAAA,KAAK,OAAO;gBACX,IAAI,IAAI,CAAC;gBACT,SAAS,GAAG,oBAAoB;gBAChC;AACD,YAAA,KAAK,KAAK;gBACT,GAAG,IAAI,CAAC;gBACR,SAAS,GAAG,sCAAsC;gBAClD;AACD,YAAA,KAAK,QAAQ;gBACZ,GAAG,IAAI,CAAC;gBACR,SAAS,GAAG,qCAAqC;gBACjD;;QAKF,OAAO;YACN,IAAI;YACJ,GAAG;YACH,SAAS;SACT;AACF,KAAC,EAAE,CAAC,UAAU,CAAC,CAAC;IAEhB,MAAM,OAAO,IACZA,IAAA,CAAA,KAAA,EAAA,EACC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,SAAS,CAAC,KACvC,SAAS,EAAA,QAAA,EAAA,CAEZ,KAAK,KACLC,GAAA,CAAA,KAAA,EAAA,EACC,KAAK,EAAC,4BAA4B,EAClC,SAAS,EAAC,eAAe,EACzB,KAAK,EAAE,QAAQ,EAAA,QAAA,EAEfA,cAAM,CAAC,EAAC,uFAAuF,EAAG,CAAA,EAAA,CAC7F,CACN,EAEA,QAAQ,CACJ,EAAA,CAAA,CACN;IAED,OAAO,YAAY,CAAC,OAAO,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;AACpD;;;;"}

package/lib/es/components/popup/index.js

@@ -0,0 +1,6 @@
+import Popup from './popup.js';
+
+
+
+export { Popup as default };
+//# sourceMappingURL=index.js.map

package/lib/es/components/popup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/lib/es/components/popup/popup.js

@@ -0,0 +1,219 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useReactive, useCreation } from 'ahooks';
+import { useRef, useMemo, useEffect, useLayoutEffect, Children, isValidElement, cloneElement } from 'react';
+import { useMouseUp, useResizeObserver } from '../../js/hooks.js';
+import { getPointPosition, getPosition } from '../../js/utils.js';
+import Content from './content.js';
+
+function Popup(props) {
+    const { visible = false, content, trigger = "hover", gap = 12, offset = 8, fixed, position = "top", showDelay = 16, hideDelay = 12, touchable, arrow = true, align, fitSize, watchResize, clickOutside = true, disabled, referToWindow, style, className, getContainer, children, onVisibleChange, } = props;
+    const triggerRef = useRef(null);
+    const contentRef = useRef(null);
+    const timerRef = useRef(null);
+    const statusRef = useRef("");
+    const state = useReactive({
+        show: false,
+        style: { position: fixed ? "fixed" : "absolute" },
+        arrowProps: {},
+    });
+    useMouseUp((e) => {
+        if (!triggerRef.current || !contentRef.current || !clickOutside)
+            return;
+        const tar = e.target;
+        const isContain = triggerRef.current.contains(tar) ||
+            contentRef.current.contains(tar);
+        if (!state.show || isContain)
+            return;
+        handleToggle(false);
+    });
+    const clearTimer = () => {
+        if (!timerRef.current)
+            return;
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+    };
+    const handleShow = () => {
+        if (disabled)
+            return;
+        if (state.show &&
+            (trigger !== "hover" || (trigger === "hover" && !touchable))) {
+            return;
+        }
+        state.show = true;
+        statusRef.current = "showing";
+        timerRef.current = setTimeout(() => {
+            if (statusRef.current !== "showing") {
+                return;
+            }
+            const [left, top, { arrowX, arrowY, arrowPos }] = getPosition(triggerRef.current, contentRef.current, {
+                position,
+                gap,
+                offset,
+                align,
+                refWindow: referToWindow,
+            });
+            state.style = {
+                ...state.style,
+                opacity: 1,
+                transform: "none",
+                left,
+                top,
+            };
+            state.arrowProps = {
+                left: arrowX,
+                top: arrowY,
+                pos: arrowPos,
+            };
+            onVisibleChange?.(true);
+            clearTimer();
+            statusRef.current = "";
+        }, showDelay);
+    };
+    const handleHide = () => {
+        if (!state.show)
+            return;
+        statusRef.current = "hiding";
+        timerRef.current = setTimeout(() => {
+            if (statusRef.current !== "hiding") {
+                clearTimer();
+                return;
+            }
+            state.style = {
+                ...state.style,
+                opacity: 0,
+                transform: "translate(0, 2px)",
+            };
+            setTimeout(() => {
+                state.show = false;
+                clearTimer();
+                onVisibleChange?.(false);
+                statusRef.current = "";
+            }, 160);
+        }, hideDelay);
+    };
+    const handleToggle = (action) => {
+        if (action !== undefined) {
+            action ? handleShow() : handleHide();
+            return;
+        }
+        state.show ? handleHide() : handleShow();
+    };
+    const eventMaps = useCreation(() => ({
+        click: {
+            onClick: () => handleToggle(true),
+        },
+        hover: {
+            onMouseEnter: () => handleToggle(true),
+            onMouseLeave: () => handleToggle(false),
+        },
+        focus: {
+            onFocus: () => handleToggle(true),
+            onBlur: () => handleToggle(false),
+        },
+        contextmenu: {
+            onContextMenu: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (state.show) {
+                    const [left, top] = getPointPosition(e, contentRef.current);
+                    state.style = {
+                        ...state.style,
+                        left,
+                        top,
+                    };
+                    return;
+                }
+                state.show = true;
+                timerRef.current = setTimeout(() => {
+                    const [left, top] = getPointPosition(e, contentRef.current);
+                    state.style = {
+                        ...state.style,
+                        opacity: 1,
+                        transform: "none",
+                        left,
+                        top,
+                    };
+                    clearTimer();
+                    onVisibleChange?.(true);
+                }, showDelay);
+            },
+        },
+        none: {},
+    }), []);
+    const contentTouch = useMemo(() => {
+        if (!touchable)
+            return {};
+        const events = {};
+        if (trigger === "hover") {
+            events["onMouseEnter"] = () => {
+                clearTimer();
+            };
+            events["onMouseLeave"] = () => handleToggle(false);
+        }
+        return events;
+    }, [touchable, trigger]);
+    const computePosition = () => {
+        if (!state.show)
+            return;
+        const [left, top, { arrowX, arrowY, arrowPos }] = getPosition(triggerRef.current, contentRef.current, {
+            position,
+            gap,
+            offset,
+            align,
+            refWindow: referToWindow,
+        });
+        Object.assign(state, {
+            style: { ...state.style, left, top },
+            arrowProps: { left: arrowX, top: arrowY, pos: arrowPos },
+        });
+    };
+    useEffect(() => {
+        if (trigger === "contextmenu")
+            return;
+        const { observe, unobserve, disconnect } = useResizeObserver();
+        triggerRef.current && observe(triggerRef.current, computePosition);
+        if (!watchResize || !contentRef.current)
+            return;
+        observe(contentRef.current, computePosition);
+        return () => {
+            if (!watchResize || !contentRef.current)
+                return;
+            unobserve(contentRef.current);
+            triggerRef.current && unobserve(triggerRef.current);
+            disconnect();
+        };
+    }, [watchResize, contentRef.current, triggerRef.current]);
+    useLayoutEffect(() => {
+        if (!fitSize || !state.show)
+            return;
+        const vertical = ["top", "bottom"].includes(position);
+        const size = triggerRef.current?.[vertical ? "offsetWidth" : "offsetHeight"];
+        state.style = { ...state.style, [vertical ? "width" : "height"]: size };
+    }, [state.show, fitSize]);
+    useLayoutEffect(() => {
+        handleToggle(visible);
+    }, [visible]);
+    return (jsxs(Fragment, { children: [Children.map(children, (child) => {
+                if (!isValidElement(child))
+                    return;
+                const { className, ...restProps } = child.props;
+                Object.keys(eventMaps[trigger]).map((evt) => {
+                    if (!restProps[evt])
+                        return;
+                    const fn = eventMaps[trigger][evt];
+                    eventMaps[trigger][evt] = (e) => {
+                        fn();
+                        restProps[evt](e);
+                    };
+                });
+                return cloneElement(child, {
+                    ref: triggerRef,
+                    className,
+                    ...restProps,
+                    ...eventMaps[trigger],
+                });
+            }), state.show && (jsx(Content, { ref: contentRef, arrow: arrow && trigger !== "contextmenu", style: { ...style, ...state.style }, arrowProps: state.arrowProps, className: className, ...contentTouch, trigger: triggerRef.current, getContainer: getContainer, children: content }))] }));
+}
+
+export { Popup as default };
+//# sourceMappingURL=popup.js.map