@ioca/react 1.3.87 → 1.3.89
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components/button/button.js +2 -0
- package/lib/cjs/components/button/button.js.map +1 -1
- package/lib/cjs/components/button/confirm.js +58 -0
- package/lib/cjs/components/button/confirm.js.map +1 -0
- package/lib/cjs/components/drawer/drawer.js +33 -27
- package/lib/cjs/components/drawer/drawer.js.map +1 -1
- package/lib/cjs/components/dropdown/dropdown.js +6 -2
- package/lib/cjs/components/dropdown/dropdown.js.map +1 -1
- package/lib/cjs/components/input/input.js +1 -1
- package/lib/cjs/components/input/input.js.map +1 -1
- package/lib/cjs/components/input/number.js +1 -1
- package/lib/cjs/components/input/number.js.map +1 -1
- package/lib/cjs/components/input/range.js +8 -9
- package/lib/cjs/components/input/range.js.map +1 -1
- package/lib/cjs/components/input/textarea.js +1 -1
- package/lib/cjs/components/input/textarea.js.map +1 -1
- package/lib/cjs/components/modal/hookModal.js +2 -2
- package/lib/cjs/components/modal/hookModal.js.map +1 -1
- package/lib/cjs/components/modal/modal.js +14 -8
- package/lib/cjs/components/modal/modal.js.map +1 -1
- package/lib/cjs/components/picker/dates/index.js +4 -2
- package/lib/cjs/components/picker/dates/index.js.map +1 -1
- package/lib/cjs/components/picker/time/index.js +7 -2
- package/lib/cjs/components/picker/time/index.js.map +1 -1
- package/lib/cjs/components/progress/progress.js +3 -3
- package/lib/cjs/components/progress/progress.js.map +1 -1
- package/lib/css/index.css +1 -1
- package/lib/css/index.css.map +1 -1
- package/lib/es/components/button/button.js +2 -0
- package/lib/es/components/button/button.js.map +1 -1
- package/lib/es/components/button/confirm.js +54 -0
- package/lib/es/components/button/confirm.js.map +1 -0
- package/lib/es/components/drawer/drawer.js +34 -28
- package/lib/es/components/drawer/drawer.js.map +1 -1
- package/lib/es/components/dropdown/dropdown.js +6 -2
- package/lib/es/components/dropdown/dropdown.js.map +1 -1
- package/lib/es/components/input/input.js +1 -1
- package/lib/es/components/input/input.js.map +1 -1
- package/lib/es/components/input/number.js +1 -1
- package/lib/es/components/input/number.js.map +1 -1
- package/lib/es/components/input/range.js +8 -9
- package/lib/es/components/input/range.js.map +1 -1
- package/lib/es/components/input/textarea.js +1 -1
- package/lib/es/components/input/textarea.js.map +1 -1
- package/lib/es/components/modal/hookModal.js +2 -2
- package/lib/es/components/modal/hookModal.js.map +1 -1
- package/lib/es/components/modal/modal.js +14 -8
- package/lib/es/components/modal/modal.js.map +1 -1
- package/lib/es/components/picker/dates/index.js +3 -2
- package/lib/es/components/picker/dates/index.js.map +1 -1
- package/lib/es/components/picker/time/index.js +3 -2
- package/lib/es/components/picker/time/index.js.map +1 -1
- package/lib/es/components/progress/progress.js +4 -4
- package/lib/es/components/progress/progress.js.map +1 -1
- package/lib/index.js +128 -65
- package/lib/types/components/button/confirm.d.ts +6 -0
- package/lib/types/components/button/type.d.ts +9 -1
- package/lib/types/components/dropdown/type.d.ts +2 -1
- package/lib/types/type/index.d.ts +0 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.js","sources":["../../../../packages/components/modal/modal.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useKeydown } from \"../../js/hooks\";\nimport Content from \"./content\";\nimport \"./index.css\";\nimport { CompositionModal, IModal } from \"./type\";\nimport useModal from \"./useModal\";\n\nfunction Modal(props: IModal) {\n\tconst {\n\t\tvisible,\n\t\ttitle,\n\t\tfooter,\n\t\tokButtonProps,\n\t\tcancelButtonProps,\n\t\tclosable = true,\n\t\thideBackdrop,\n\t\tbackdropClosable = true,\n\t\thideCloseButton,\n\t\tdisableEsc,\n\t\twidth,\n\t\theight,\n\t\tcustomized,\n\t\tfixed,\n\t\thideShadow,\n\t\tchildren,\n\t\tstyle,\n\t\tclassName,\n\t\tkeepDOM,\n\t\tfooterLeft,\n\t\tonClick,\n\t\tonVisibleChange,\n\t\tonClose,\n\t\tonOk,\n\t\t...restProps\n\t} = props;\n\tconst [show, setShow] = useState(visible);\n\tconst [active, setActive] = useState(false);\n\tconst [bounced, setBounced] = useState(false);\n\tconst toggable = useRef(true);\n\n\tconst handleShow = async () => {\n\t\tif (!toggable.current) return;\n\n\t\t(!keepDOM || !show) && setShow(true);\n\t\ttoggable.current = false;\n\n\t\
|
|
1
|
+
{"version":3,"file":"modal.js","sources":["../../../../packages/components/modal/modal.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useKeydown } from \"../../js/hooks\";\nimport Content from \"./content\";\nimport \"./index.css\";\nimport { CompositionModal, IModal } from \"./type\";\nimport useModal from \"./useModal\";\n\nfunction Modal(props: IModal) {\n\tconst {\n\t\tvisible,\n\t\ttitle,\n\t\tfooter,\n\t\tokButtonProps,\n\t\tcancelButtonProps,\n\t\tclosable = true,\n\t\thideBackdrop,\n\t\tbackdropClosable = true,\n\t\thideCloseButton,\n\t\tdisableEsc,\n\t\twidth,\n\t\theight,\n\t\tcustomized,\n\t\tfixed,\n\t\thideShadow,\n\t\tchildren,\n\t\tstyle,\n\t\tclassName,\n\t\tkeepDOM,\n\t\tfooterLeft,\n\t\tonClick,\n\t\tonVisibleChange,\n\t\tonClose,\n\t\tonOk,\n\t\t...restProps\n\t} = props;\n\n\tconst [show, setShow] = useState(visible);\n\tconst [active, setActive] = useState(false);\n\tconst [bounced, setBounced] = useState(false);\n\tconst [mounted, setMounted] = useState(false);\n\tconst toggable = useRef(true);\n\n\tconst handleShow = async () => {\n\t\tif (!toggable.current) return;\n\n\t\t(!keepDOM || !show) && setShow(true);\n\t\ttoggable.current = false;\n\n\t\tconst timer = setTimeout(() => {\n\t\t\tsetActive(true);\n\t\t\tonVisibleChange?.(true);\n\t\t\ttoggable.current = true;\n\t\t}, 24);\n\n\t\treturn () => clearTimeout(timer);\n\t};\n\n\tconst handleHide = () => {\n\t\tif (!toggable.current) return;\n\t\ttoggable.current = false;\n\n\t\tif (!closable) {\n\t\t\tsetBounced(true);\n\t\t\tconst timer = setTimeout(() => {\n\t\t\t\tsetBounced(false);\n\t\t\t\ttoggable.current = true;\n\t\t\t}, 400);\n\t\t\treturn () => clearTimeout(timer);\n\t\t}\n\n\t\tsetActive(false);\n\t\tconst timer = setTimeout(() => {\n\t\t\t!keepDOM && setShow(false);\n\t\t\ttoggable.current = true;\n\t\t\tonVisibleChange?.(false);\n\t\t\tonClose?.();\n\t\t}, 240);\n\n\t\treturn () => clearTimeout(timer);\n\t};\n\n\tconst handleBackdropClick = () => {\n\t\tbackdropClosable && handleHide();\n\t};\n\n\tuseKeydown(\n\t\t(e) => {\n\t\t\tif (e.code !== \"Escape\" || !visible) return;\n\t\t\thandleHide();\n\t\t},\n\t\t{ disabled: disableEsc }\n\t);\n\n\tuseEffect(() => {\n\t\tvisible ? handleShow() : handleHide();\n\t}, [visible]);\n\n\tuseEffect(() => {\n\t\tsetMounted(true);\n\t}, []);\n\n\tconst handleClick = () => {\n\t\tif (typeof document === \"undefined\") return;\n\t\tdocument.documentElement.click();\n\t};\n\n\tif (!show || !mounted) return null;\n\n\treturn createPortal(\n\t\t<div\n\t\t\tclassName={classNames(\n\t\t\t\t\"i-modal-container\",\n\t\t\t\t{\n\t\t\t\t\t\"i-modal-backdrop\": !hideBackdrop,\n\t\t\t\t\t\"i-modal-customized\": customized,\n\t\t\t\t\t\"i-modal-active\": active,\n\t\t\t\t\tfixed,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tstyle={style}\n\t\t\tonClick={handleBackdropClick}\n\t\t\taria-modal='true'\n\t\t\taria-hidden={!active}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={classNames(\"i-modal\", {\n\t\t\t\t\tbounced,\n\t\t\t\t\tshadow: !hideShadow,\n\t\t\t\t})}\n\t\t\t\tstyle={{\n\t\t\t\t\twidth,\n\t\t\t\t\theight,\n\t\t\t\t}}\n\t\t\t\tonClick={(e) => {\n\t\t\t\t\te.stopPropagation();\n\t\t\t\t\thandleClick();\n\t\t\t\t\tonClick?.(e);\n\t\t\t\t}}\n\t\t\t\trole='dialog'\n\t\t\t\taria-labelledby={title ? \"modal-title\" : undefined}\n\t\t\t\t{...restProps}\n\t\t\t>\n\t\t\t\t{customized && children}\n\n\t\t\t\t{!customized && (\n\t\t\t\t\t<Content\n\t\t\t\t\t\ttitle={title}\n\t\t\t\t\t\thideCloseButton={hideCloseButton}\n\t\t\t\t\t\tfooter={footer}\n\t\t\t\t\t\tokButtonProps={okButtonProps}\n\t\t\t\t\t\tcancelButtonProps={cancelButtonProps}\n\t\t\t\t\t\tchildren={children}\n\t\t\t\t\t\tfooterLeft={footerLeft}\n\t\t\t\t\t\tonOk={onOk}\n\t\t\t\t\t\tonClose={handleHide}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>,\n\t\tdocument?.body ?? null\n\t);\n}\n\nModal.useModal = useModal;\n\nexport default Modal as CompositionModal;\n"],"names":["useState","useRef","useKeydown","useEffect","createPortal","_jsx","classNames","_jsxs","Content","useModal"],"mappings":"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"}
|
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var material = require('@ricons/material');
|
|
7
7
|
var ahooks = require('ahooks');
|
|
8
|
+
var classNames = require('classnames');
|
|
8
9
|
var dayjs = require('dayjs');
|
|
9
10
|
var customParseFormat = require('dayjs/plugin/customParseFormat.js');
|
|
10
11
|
var react = require('react');
|
|
@@ -15,6 +16,7 @@ var panel = require('./panel.js');
|
|
|
15
16
|
|
|
16
17
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
|
|
17
18
|
|
|
19
|
+
var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
|
|
18
20
|
var dayjs__default = /*#__PURE__*/_interopDefaultCompat(dayjs);
|
|
19
21
|
var customParseFormat__default = /*#__PURE__*/_interopDefaultCompat(customParseFormat);
|
|
20
22
|
|
|
@@ -22,7 +24,7 @@ dayjs__default.extend(customParseFormat__default);
|
|
|
22
24
|
const FORMATTYPES = ["YYYY-MM-DD", "YYYY-M-D", "YYYY/MM/DD", "YYYY/M/D"];
|
|
23
25
|
const FORMAT = "YYYY-MM-DD";
|
|
24
26
|
const Datepicker = (props) => {
|
|
25
|
-
const { name, value, weeks, format = FORMAT, placeholder = props.format ?? FORMAT, renderDate, renderMonth, renderYear, popupProps, disabledDate, onDateClick, onChange, onBlur, ...restProps } = props;
|
|
27
|
+
const { name, value, weeks, format = FORMAT, placeholder = props.format ?? FORMAT, className, renderDate, renderMonth, renderYear, popupProps, disabledDate, onDateClick, onChange, onBlur, ...restProps } = props;
|
|
26
28
|
const state = ahooks.useReactive({
|
|
27
29
|
value,
|
|
28
30
|
});
|
|
@@ -63,7 +65,7 @@ const Datepicker = (props) => {
|
|
|
63
65
|
react.useEffect(() => {
|
|
64
66
|
state.value = value;
|
|
65
67
|
}, [value]);
|
|
66
|
-
return (jsxRuntime.jsx(popup.default, { visible: active, trigger: 'click', position: 'bottom', arrow: false, align: 'start', onVisibleChange: handleVisibleChange, watchResize: true, content: jsxRuntime.jsx(panel.default, { value: dayJsValue, weeks: weeks, renderDate: renderDate, renderMonth: renderMonth, renderYear: renderYear, disabledDate: disabledDate, onDateClick: handleDateClick }), ...popupProps, children: jsxRuntime.jsx(input.default, { value: state.value, append: jsxRuntime.jsx(icon.default, { icon: jsxRuntime.jsx(material.CalendarMonthTwotone, {}), className: 'i-datepicker-icon', size: '1em' }), placeholder: placeholder, onChange: handleChange, onBlur: handleBlur, onEnter: handleSetDate, ...restProps }) }));
|
|
68
|
+
return (jsxRuntime.jsx(popup.default, { visible: active, trigger: 'click', position: 'bottom', arrow: false, align: 'start', onVisibleChange: handleVisibleChange, watchResize: true, content: jsxRuntime.jsx(panel.default, { value: dayJsValue, weeks: weeks, renderDate: renderDate, renderMonth: renderMonth, renderYear: renderYear, disabledDate: disabledDate, onDateClick: handleDateClick }), ...popupProps, children: jsxRuntime.jsx(input.default, { value: state.value, append: jsxRuntime.jsx(icon.default, { icon: jsxRuntime.jsx(material.CalendarMonthTwotone, {}), className: 'i-datepicker-icon', size: '1em' }), placeholder: placeholder, onChange: handleChange, onBlur: handleBlur, onEnter: handleSetDate, className: classNames__default("i-datepicker-label", className), ...restProps }) }));
|
|
67
69
|
};
|
|
68
70
|
|
|
69
71
|
exports.default = Datepicker;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../packages/components/picker/dates/index.tsx"],"sourcesContent":["import { CalendarMonthTwotone } from \"@ricons/material\";\nimport { useReactive } from \"ahooks\";\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\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\t{...restProps}\n\t\t\t/>\n\t\t</Popup>\n\t);\n};\n\nexport default Datepicker;\n"],"names":["dayjs","customParseFormat","useReactive","useState","useMemo","useEffect","_jsx","Popup","Panel","Input","Icon","CalendarMonthTwotone"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../packages/components/picker/dates/index.tsx"],"sourcesContent":["import { CalendarMonthTwotone } from \"@ricons/material\";\nimport { useReactive } from \"ahooks\";\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 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":["dayjs","customParseFormat","useReactive","useState","useMemo","useEffect","_jsx","Popup","Panel","Input","Icon","CalendarMonthTwotone","classNames"],"mappings":"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"}
|
|
@@ -5,15 +5,20 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var material = require('@ricons/material');
|
|
7
7
|
var ahooks = require('ahooks');
|
|
8
|
+
var classNames = require('classnames');
|
|
8
9
|
var react = require('react');
|
|
9
10
|
var icon = require('../../icon/icon.js');
|
|
10
11
|
var input = require('../../input/input.js');
|
|
11
12
|
var popup = require('../../popup/popup.js');
|
|
12
13
|
var panel = require('./panel.js');
|
|
13
14
|
|
|
15
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
|
|
16
|
+
|
|
17
|
+
var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
|
|
18
|
+
|
|
14
19
|
const FORMAT = "hh:mm:ss";
|
|
15
20
|
function TimePicker(props) {
|
|
16
|
-
const { name, value, format = FORMAT, periods, placeholder = props.format ?? FORMAT, renderItem, onChange, onBlur, popupProps, ...restProps } = props;
|
|
21
|
+
const { name, value, format = FORMAT, periods, placeholder = props.format ?? FORMAT, className, renderItem, onChange, onBlur, popupProps, ...restProps } = props;
|
|
17
22
|
const state = ahooks.useReactive({
|
|
18
23
|
value,
|
|
19
24
|
safeValue: undefined,
|
|
@@ -42,7 +47,7 @@ function TimePicker(props) {
|
|
|
42
47
|
react.useEffect(() => {
|
|
43
48
|
state.value = value;
|
|
44
49
|
}, [value]);
|
|
45
|
-
return (jsxRuntime.jsx(popup.default, { visible: active, trigger: 'click', position: 'bottom', arrow: false, align: 'start', watchResize: true, ...popupProps, onVisibleChange: handleVisibleChange, content: jsxRuntime.jsx(panel.default, { value: state.value, format: format, periods: periods, renderItem: renderItem, onChange: handleChange, onFallback: handleFallback }), children: jsxRuntime.jsx(input.default, { value: state.value, placeholder: placeholder, append: jsxRuntime.jsx(icon.default, { icon: jsxRuntime.jsx(material.AccessTimeRound, {}), className: 'i-timepicker-icon', size: '1em' }), onChange: handleChange, onBlur: handleBlur, ...restProps }) }));
|
|
50
|
+
return (jsxRuntime.jsx(popup.default, { visible: active, trigger: 'click', position: 'bottom', arrow: false, align: 'start', watchResize: true, ...popupProps, onVisibleChange: handleVisibleChange, content: jsxRuntime.jsx(panel.default, { value: state.value, format: format, periods: periods, renderItem: renderItem, onChange: handleChange, onFallback: handleFallback }), children: jsxRuntime.jsx(input.default, { value: state.value, placeholder: placeholder, append: jsxRuntime.jsx(icon.default, { icon: jsxRuntime.jsx(material.AccessTimeRound, {}), className: 'i-timepicker-icon', size: '1em' }), onChange: handleChange, onBlur: handleBlur, className: classNames__default("i-timepicker-label", className), ...restProps }) }));
|
|
46
51
|
}
|
|
47
52
|
|
|
48
53
|
exports.default = TimePicker;
|
|
@@ -1 +1 @@
|
|
|
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":["useReactive","useState","useEffect","_jsx","Popup","Panel","Input","Icon","AccessTimeRound"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../packages/components/picker/time/index.tsx"],"sourcesContent":["import { AccessTimeRound } from \"@ricons/material\";\nimport { useReactive } from \"ahooks\";\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 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":["useReactive","useState","useEffect","_jsx","Popup","Panel","Input","Icon","AccessTimeRound","classNames"],"mappings":";;;;;;;;;;;;;;;;;;AAUA,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,SAAS,EACT,UAAU,EACV,QAAQ,EACR,MAAM,EACN,UAAU,EACV,GAAG,SAAS,EACZ,GAAG,KAAK;IACT,MAAM,KAAK,GAAGA,kBAAW,CAAC;QACzB,KAAK;AACL,QAAA,SAAS,EAAE,SAAS;AACpB,KAAA,CAAC;IACF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAGC,cAAQ,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;IAEDC,eAAS,CAAC,MAAK;AACd,QAAA,KAAK,CAAC,KAAK,GAAG,KAAK;AACpB,KAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IAEX,QACCC,cAAC,CAAAC,aAAK,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,EACND,cAAA,CAACE,aAAK,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,EACzB,CAAA,EAAA,QAAA,EAGHF,cAAC,CAAAG,aAAK,EACL,EAAA,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,WAAW,EAAE,WAAW,EACxB,MAAM,EACLH,cAAC,CAAAI,YAAI,EACJ,EAAA,IAAI,EAAEJ,cAAA,CAACK,wBAAe,EAAA,EAAA,CAAG,EACzB,SAAS,EAAC,mBAAmB,EAC7B,IAAI,EAAC,KAAK,EAAA,CACT,EAEH,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAEC,mBAAU,CAAC,oBAAoB,EAAE,SAAS,CAAC,EAAA,GAClD,SAAS,EAAA,CACZ,EACK,CAAA;AAEV;;;;"}
|
|
@@ -26,12 +26,12 @@ const Progress = (props) => {
|
|
|
26
26
|
const pageXY = vertical ? "pageY" : "pageX";
|
|
27
27
|
const rectTL = vertical ? "top" : "left";
|
|
28
28
|
const rectWH = vertical ? "height" : "width";
|
|
29
|
-
const
|
|
29
|
+
const getFixedValue = () => {
|
|
30
30
|
let value = +state.value.toFixed(precision);
|
|
31
31
|
value = Math.min(100, value);
|
|
32
32
|
value = Math.max(0, value);
|
|
33
33
|
return value;
|
|
34
|
-
}
|
|
34
|
+
};
|
|
35
35
|
const handleMouseDown = (e) => {
|
|
36
36
|
if (!ref.current || !draggable)
|
|
37
37
|
return;
|
|
@@ -65,7 +65,7 @@ const Progress = (props) => {
|
|
|
65
65
|
const handleMouseUp = () => {
|
|
66
66
|
if (!state.dragging || !draggable)
|
|
67
67
|
return;
|
|
68
|
-
onChange?.(
|
|
68
|
+
onChange?.(getFixedValue());
|
|
69
69
|
state.dragging = false;
|
|
70
70
|
onDraggingChange?.(false);
|
|
71
71
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress.js","sources":["../../../../packages/components/progress/progress.tsx"],"sourcesContent":["import { useReactive } from \"ahooks\";\nimport classNames from \"classnames\";\nimport { useEffect,
|
|
1
|
+
{"version":3,"file":"progress.js","sources":["../../../../packages/components/progress/progress.tsx"],"sourcesContent":["import { useReactive } from \"ahooks\";\nimport classNames from \"classnames\";\nimport { useEffect, useRef } from \"react\";\nimport \"../../css/input.css\";\nimport { useMouseMove, useMouseUp } from \"../../js/hooks\";\nimport Circle from \"./circle\";\nimport \"./index.css\";\nimport Line from \"./line\";\nimport { IProgress } from \"./type\";\n\nconst Progress = (props: IProgress) => {\n\tconst {\n\t\tvalue = 0,\n\t\tlineWidth = 8,\n\t\tcircleSize = 40,\n\t\tprecision = 0,\n\t\tstyle,\n\t\tdraggable = true,\n\t\ttype = \"line\",\n\t\tbarClass,\n\t\tvertical,\n\t\tlabel,\n\t\tlabelInline,\n\t\tclassName,\n\t\trenderCursor,\n\t\tonChange,\n\t\tonDraggingChange,\n\t} = props;\n\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst state = useReactive({\n\t\tvalue,\n\t\tdragging: false,\n\t\tsize: 0,\n\t\tstart: 0,\n\t});\n\n\tconst pageXY = vertical ? \"pageY\" : \"pageX\";\n\tconst rectTL = vertical ? \"top\" : \"left\";\n\tconst rectWH = vertical ? \"height\" : \"width\";\n\n\tconst getFixedValue = () => {\n\t\tlet value = +state.value.toFixed(precision);\n\t\tvalue = Math.min(100, value);\n\t\tvalue = Math.max(0, value);\n\n\t\treturn value;\n\t};\n\n\tconst handleMouseDown = (e) => {\n\t\tif (!ref.current || !draggable) return;\n\n\t\tif (e.touches) {\n\t\t\te = e.touches[0];\n\t\t}\n\n\t\tconst rect = ref.current.getBoundingClientRect();\n\t\tconst value = ((e[pageXY] - rect[rectTL]) * 100) / rect[rectWH];\n\n\t\tObject.assign(state, {\n\t\t\tvalue: vertical ? 100 - value : value,\n\t\t\tsize: rect[rectWH],\n\t\t\tstart: rect[rectTL],\n\t\t\tdragging: true,\n\t\t});\n\t\tonDraggingChange?.(true);\n\t};\n\n\tconst handleMouseMove = (e) => {\n\t\tif (!state.dragging || !draggable) return;\n\t\te.preventDefault();\n\n\t\tif (e.touches) {\n\t\t\te = e.touches[0];\n\t\t}\n\n\t\tconst { start, size } = state;\n\t\tconst offset = e[pageXY] - start;\n\n\t\tif (offset < 0 || offset > size) return;\n\n\t\tconst value = ((e[pageXY] - start) * 100) / size;\n\t\tstate.value = vertical ? 100 - value : value;\n\t};\n\n\tconst handleMouseUp = () => {\n\t\tif (!state.dragging || !draggable) return;\n\n\t\tonChange?.(getFixedValue());\n\t\tstate.dragging = false;\n\t\tonDraggingChange?.(false);\n\t};\n\n\tuseMouseMove(handleMouseMove);\n\tuseMouseUp(handleMouseUp);\n\n\tuseEffect(() => {\n\t\tif (value > 100) {\n\t\t\tstate.value = 100;\n\t\t\treturn;\n\t\t}\n\n\t\tif (value < 0) {\n\t\t\tstate.value = 0;\n\t\t\treturn;\n\t\t}\n\n\t\tstate.value = value;\n\t}, [value]);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(\"i-input-label\", className, {\n\t\t\t\t\"i-input-inline\": labelInline,\n\t\t\t})}\n\t\t\tstyle={style}\n\t\t>\n\t\t\t{label && <span className='i-input-label-text'>{label}</span>}\n\n\t\t\t{type === \"line\" && (\n\t\t\t\t<Line\n\t\t\t\t\tref={ref}\n\t\t\t\t\tvertical={vertical}\n\t\t\t\t\tlineWidth={lineWidth}\n\t\t\t\t\tbarClass={barClass}\n\t\t\t\t\tdragging={state.dragging}\n\t\t\t\t\tvalue={state.value}\n\t\t\t\t\trenderCursor={renderCursor}\n\t\t\t\t\tonMouseDown={handleMouseDown}\n\t\t\t\t\tonTouchStart={handleMouseDown}\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t{type === \"circle\" && (\n\t\t\t\t<Circle\n\t\t\t\t\tvalue={state.value}\n\t\t\t\t\tcircleSize={circleSize}\n\t\t\t\t\tlineWidth={lineWidth}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport default Progress;\n"],"names":["useRef","useReactive","useMouseMove","useMouseUp","useEffect","_jsxs","classNames","_jsx","Line","Circle"],"mappings":"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"}
|