@pisell/date-picker 1.0.105 → 1.0.107
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/es/ActionBar/index.d.ts +4 -5
- package/es/ActionBar/index.js +25 -75
- package/es/ActionBar/index.less +0 -30
- package/es/DesktopDateRangePicker/DesktopDateRangePicker.js +2 -5
- package/es/MobileDateRangePicker/MobileDateRangePicker.js +2 -5
- package/es/PisellDateRangePicker/index.d.ts +10 -10
- package/es/PisellDateRangePicker/index.js +21 -33
- package/es/Toolbar/index.d.ts +1 -1
- package/es/Toolbar/index.js +1 -5
- package/lib/ActionBar/index.d.ts +4 -5
- package/lib/ActionBar/index.js +9 -64
- package/lib/ActionBar/index.less +0 -30
- package/lib/DesktopDateRangePicker/DesktopDateRangePicker.js +2 -6
- package/lib/MobileDateRangePicker/MobileDateRangePicker.js +2 -6
- package/lib/PisellDateRangePicker/index.d.ts +10 -10
- package/lib/PisellDateRangePicker/index.js +2 -12
- package/lib/Toolbar/index.d.ts +1 -1
- package/lib/Toolbar/index.js +1 -5
- package/package.json +2 -2
- package/es/CustomCalendarHeader/index.d.ts +0 -2
- package/es/Dialog/index.d.ts +0 -2
- package/es/Drawer/index.d.ts +0 -11
- package/es/PisellDateRangePicker/LocaleContext.d.ts +0 -2
- package/es/Shortcuts/index.d.ts +0 -15
- package/es/browserSelect/index.d.ts +0 -15
- package/es/hooks/useDocumentVisibility.d.ts +0 -2
- package/es/hooks/useNextDay.d.ts +0 -2
- package/es/hooks/useUpdateEffect.d.ts +0 -2
- package/es/icon/ChevronLeft.d.ts +0 -5
- package/es/icon/ChevronLeftDouble.d.ts +0 -5
- package/es/icon/ChevronRight.d.ts +0 -5
- package/es/icon/ChevronRightDouble.d.ts +0 -5
- package/es/icon/CloseCircle.d.ts +0 -5
- package/es/locales/en-US.d.ts +0 -26
- package/es/locales/zh-CN.d.ts +0 -26
- package/es/locales/zh-TW.d.ts +0 -26
- package/lib/CustomCalendarHeader/index.d.ts +0 -2
- package/lib/Dialog/index.d.ts +0 -2
- package/lib/Drawer/index.d.ts +0 -11
- package/lib/PisellDateRangePicker/LocaleContext.d.ts +0 -2
- package/lib/Shortcuts/index.d.ts +0 -15
- package/lib/browserSelect/index.d.ts +0 -15
- package/lib/hooks/useDocumentVisibility.d.ts +0 -2
- package/lib/hooks/useNextDay.d.ts +0 -2
- package/lib/hooks/useUpdateEffect.d.ts +0 -2
- package/lib/icon/ChevronLeft.d.ts +0 -5
- package/lib/icon/ChevronLeftDouble.d.ts +0 -5
- package/lib/icon/ChevronRight.d.ts +0 -5
- package/lib/icon/ChevronRightDouble.d.ts +0 -5
- package/lib/icon/CloseCircle.d.ts +0 -5
- package/lib/locales/en-US.d.ts +0 -26
- package/lib/locales/zh-CN.d.ts +0 -26
- package/lib/locales/zh-TW.d.ts +0 -26
package/es/ActionBar/index.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { ButtonProps } from
|
|
2
|
-
import { Dayjs } from
|
|
3
|
-
import
|
|
1
|
+
import { ButtonProps } from "antd";
|
|
2
|
+
import { Dayjs } from "dayjs";
|
|
3
|
+
import "./index.less";
|
|
4
4
|
interface ActionBarProps {
|
|
5
5
|
ownerState: any;
|
|
6
6
|
onCancel: () => void;
|
|
7
|
-
onChange: (val: any[], type?:
|
|
7
|
+
onChange: (val: any[], type?: "time") => void;
|
|
8
8
|
onOk: () => void;
|
|
9
9
|
value: any[];
|
|
10
10
|
showTime?: boolean | {
|
|
@@ -13,7 +13,6 @@ interface ActionBarProps {
|
|
|
13
13
|
}[];
|
|
14
14
|
okButtonProps?: ButtonProps;
|
|
15
15
|
cancelButtonProps?: ButtonProps;
|
|
16
|
-
isDesktop: boolean;
|
|
17
16
|
}
|
|
18
17
|
declare const ActionBar: (props: ActionBarProps) => JSX.Element;
|
|
19
18
|
export default ActionBar;
|
package/es/ActionBar/index.js
CHANGED
|
@@ -1,26 +1,25 @@
|
|
|
1
1
|
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
2
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
3
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
3
4
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
5
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
5
6
|
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
6
7
|
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
7
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
8
8
|
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
9
9
|
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
10
10
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
11
11
|
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
12
12
|
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
13
13
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
14
|
-
import React, { useMemo, useContext } from
|
|
15
|
-
import classNames from
|
|
16
|
-
import { Button
|
|
17
|
-
import { MuiPickersAdapterContext } from
|
|
18
|
-
import { isArr, isMobile } from
|
|
19
|
-
import dayjs from
|
|
14
|
+
import React, { useMemo, useContext } from "react";
|
|
15
|
+
import classNames from "classnames";
|
|
16
|
+
import { Button } from "antd";
|
|
17
|
+
import { MuiPickersAdapterContext } from "@mui/x-date-pickers";
|
|
18
|
+
import { isArr, isMobile } from "@pisell/utils";
|
|
19
|
+
import dayjs from "dayjs";
|
|
20
20
|
import { getText, pLocaleMap } from "../locales";
|
|
21
21
|
import "./index.less";
|
|
22
22
|
var ActionBar = function ActionBar(props) {
|
|
23
|
-
var _value$, _value$2;
|
|
24
23
|
var ownerState = props.ownerState,
|
|
25
24
|
onCancel = props.onCancel,
|
|
26
25
|
onOk = props.onOk,
|
|
@@ -29,11 +28,10 @@ var ActionBar = function ActionBar(props) {
|
|
|
29
28
|
_props$value = props.value,
|
|
30
29
|
value = _props$value === void 0 ? [] : _props$value,
|
|
31
30
|
okButtonProps = props.okButtonProps,
|
|
32
|
-
cancelButtonProps = props.cancelButtonProps
|
|
33
|
-
isDesktop = props.isDesktop;
|
|
31
|
+
cancelButtonProps = props.cancelButtonProps;
|
|
34
32
|
var local = useContext(MuiPickersAdapterContext);
|
|
35
33
|
var locale = useMemo(function () {
|
|
36
|
-
return local.utils.locale ||
|
|
34
|
+
return local.utils.locale || "en";
|
|
37
35
|
}, [local.utils.locale]);
|
|
38
36
|
var slotProps = ownerState.slotProps;
|
|
39
37
|
var _ref = (slotProps === null || slotProps === void 0 ? void 0 : slotProps.shortcuts) || {},
|
|
@@ -43,96 +41,48 @@ var ActionBar = function ActionBar(props) {
|
|
|
43
41
|
var _start$set, _start$set$set;
|
|
44
42
|
var newValue = _toConsumableArray(value);
|
|
45
43
|
var start = newValue[0] || dayjs();
|
|
46
|
-
newValue[0] = (start === null || start === void 0 ? void 0 : (_start$set = start.set(
|
|
47
|
-
onChange(newValue,
|
|
44
|
+
newValue[0] = (start === null || start === void 0 ? void 0 : (_start$set = start.set("hour", (val === null || val === void 0 ? void 0 : val.get("hour")) || 0)) === null || _start$set === void 0 ? void 0 : (_start$set$set = _start$set.set("minute", (val === null || val === void 0 ? void 0 : val.get("minute")) || 0)) === null || _start$set$set === void 0 ? void 0 : _start$set$set.set("second", (val === null || val === void 0 ? void 0 : val.get("second")) || 0)) || null;
|
|
45
|
+
onChange(newValue, "time");
|
|
48
46
|
};
|
|
49
47
|
var handleEndChange = function handleEndChange(val) {
|
|
50
48
|
var _end$set, _end$set$set;
|
|
51
49
|
var newValue = _toConsumableArray(value);
|
|
52
50
|
var end = newValue[1] || dayjs();
|
|
53
|
-
newValue[1] = (end === null || end === void 0 ? void 0 : (_end$set = end.set(
|
|
54
|
-
onChange(newValue,
|
|
51
|
+
newValue[1] = (end === null || end === void 0 ? void 0 : (_end$set = end.set("hour", (val === null || val === void 0 ? void 0 : val.get("hour")) || 0)) === null || _end$set === void 0 ? void 0 : (_end$set$set = _end$set.set("minute", (val === null || val === void 0 ? void 0 : val.get("minute")) || 0)) === null || _end$set$set === void 0 ? void 0 : _end$set$set.set("second", (val === null || val === void 0 ? void 0 : val.get("second")) || 0)) || null;
|
|
52
|
+
onChange(newValue, "time");
|
|
55
53
|
};
|
|
56
54
|
var spaceStyle = useMemo(function () {
|
|
57
55
|
return isMobile() ? {
|
|
58
|
-
display:
|
|
59
|
-
justifyContent:
|
|
56
|
+
display: "flex",
|
|
57
|
+
justifyContent: "end",
|
|
60
58
|
gap: 16
|
|
61
59
|
} : {
|
|
62
|
-
display:
|
|
60
|
+
display: "flex"
|
|
63
61
|
};
|
|
64
62
|
}, []);
|
|
65
63
|
var buttonStyle = useMemo(function () {
|
|
66
64
|
return isMobile() ? {
|
|
67
|
-
display:
|
|
68
|
-
justifyContent:
|
|
65
|
+
display: "flex",
|
|
66
|
+
justifyContent: "end",
|
|
69
67
|
marginBottom: 12
|
|
70
68
|
} : {
|
|
71
|
-
display:
|
|
69
|
+
display: "flex"
|
|
72
70
|
};
|
|
73
71
|
}, []);
|
|
74
72
|
var startTimeProps = useMemo(function () {
|
|
75
73
|
if (isArr(showTime) && showTime[0]) {
|
|
76
74
|
return showTime[0];
|
|
77
75
|
}
|
|
78
|
-
return {
|
|
79
|
-
format: 'HH:mm'
|
|
80
|
-
};
|
|
76
|
+
return {};
|
|
81
77
|
}, [showTime]);
|
|
82
78
|
var endTimeProps = useMemo(function () {
|
|
83
79
|
if (isArr(showTime) && showTime[1]) {
|
|
84
80
|
return showTime[1];
|
|
85
81
|
}
|
|
86
|
-
return {
|
|
87
|
-
format: 'HH:mm'
|
|
88
|
-
};
|
|
82
|
+
return {};
|
|
89
83
|
}, [showTime]);
|
|
90
|
-
return /*#__PURE__*/React.createElement(
|
|
91
|
-
className: "date-picker-action-
|
|
92
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
93
|
-
className: "date-picker-action-time-item"
|
|
94
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
95
|
-
className: "date-picker-action-time-item-label"
|
|
96
|
-
}, getText('action-bar-start.time', pLocaleMap[locale])), isDesktop ? /*#__PURE__*/React.createElement(TimePicker, _extends({
|
|
97
|
-
placeholder: getText('action-bar-start.time', pLocaleMap[locale])
|
|
98
|
-
}, startTimeProps, {
|
|
99
|
-
changeOnBlur: true,
|
|
100
|
-
value: value[0],
|
|
101
|
-
size: "large",
|
|
102
|
-
popupClassName: "date-picker-action-bar-time-picker-popup",
|
|
103
|
-
onChange: handleStartChange,
|
|
104
|
-
inputReadOnly: true
|
|
105
|
-
})) : /*#__PURE__*/React.createElement("input", {
|
|
106
|
-
type: "time",
|
|
107
|
-
onChange: function onChange(e) {
|
|
108
|
-
var val = e.target.value;
|
|
109
|
-
handleStartChange(dayjs(val, 'HH:mm'));
|
|
110
|
-
},
|
|
111
|
-
className: "date-picker-input-time",
|
|
112
|
-
value: (_value$ = value[0]) === null || _value$ === void 0 ? void 0 : _value$.format('HH:mm')
|
|
113
|
-
})), /*#__PURE__*/React.createElement("div", {
|
|
114
|
-
className: "date-picker-action-time-item"
|
|
115
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
116
|
-
className: "date-picker-action-time-item-label"
|
|
117
|
-
}, getText('action-bar-end.time', pLocaleMap[locale])), isDesktop ? /*#__PURE__*/React.createElement(TimePicker, _extends({
|
|
118
|
-
placeholder: getText('action-bar-end.time', pLocaleMap[locale])
|
|
119
|
-
}, endTimeProps, {
|
|
120
|
-
changeOnBlur: true,
|
|
121
|
-
value: value[1],
|
|
122
|
-
size: "large",
|
|
123
|
-
popupClassName: "date-picker-action-bar-time-picker-popup",
|
|
124
|
-
onChange: handleEndChange,
|
|
125
|
-
inputReadOnly: true
|
|
126
|
-
})) : /*#__PURE__*/React.createElement("input", {
|
|
127
|
-
type: "time",
|
|
128
|
-
onChange: function onChange(e) {
|
|
129
|
-
var val = e.target.value;
|
|
130
|
-
handleEndChange(dayjs(val, 'HH:mm'));
|
|
131
|
-
},
|
|
132
|
-
className: "date-picker-input-time",
|
|
133
|
-
value: (_value$2 = value[1]) === null || _value$2 === void 0 ? void 0 : _value$2.format('HH:mm')
|
|
134
|
-
}))) : null, /*#__PURE__*/React.createElement("div", {
|
|
135
|
-
className: classNames(props.className, 'date-picker-action-bar')
|
|
84
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
85
|
+
className: classNames(props.className, "date-picker-action-bar")
|
|
136
86
|
}, /*#__PURE__*/React.createElement("div", {
|
|
137
87
|
className: "date-picker-action-bar-right",
|
|
138
88
|
style: _objectSpread(_objectSpread({}, spaceStyle), {}, {
|
|
@@ -143,12 +93,12 @@ var ActionBar = function ActionBar(props) {
|
|
|
143
93
|
size: "large"
|
|
144
94
|
}, cancelButtonProps || {}, {
|
|
145
95
|
onClick: onCancel
|
|
146
|
-
}), getText(
|
|
96
|
+
}), getText("action-bar-cancel", pLocaleMap[locale])), /*#__PURE__*/React.createElement(Button, _extends({
|
|
147
97
|
type: "primary",
|
|
148
98
|
size: "large",
|
|
149
99
|
block: isMobile()
|
|
150
100
|
}, okButtonProps || {}, {
|
|
151
101
|
onClick: onOk
|
|
152
|
-
}), getText(
|
|
102
|
+
}), getText("action-bar-apply", pLocaleMap[locale]))));
|
|
153
103
|
};
|
|
154
104
|
export default ActionBar;
|
package/es/ActionBar/index.less
CHANGED
|
@@ -16,34 +16,4 @@
|
|
|
16
16
|
|
|
17
17
|
.date-picker-action-bar-time-picker-popup {
|
|
18
18
|
z-index: 1400;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.date-picker-action-time {
|
|
22
|
-
display: flex;
|
|
23
|
-
gap: 24px;
|
|
24
|
-
padding: 16px;
|
|
25
|
-
.date-picker-action-time-item {
|
|
26
|
-
display: flex;
|
|
27
|
-
flex-direction: column;
|
|
28
|
-
gap: 8px;
|
|
29
|
-
flex: 1;
|
|
30
|
-
.date-picker-input-time {
|
|
31
|
-
padding: 6.5px 11px 6.5px;
|
|
32
|
-
background: #ffffff;
|
|
33
|
-
border: 1px solid #D0D5DD;
|
|
34
|
-
border-radius: 8px;
|
|
35
|
-
height: 40px;
|
|
36
|
-
line-height: 40px;
|
|
37
|
-
width: 100%;
|
|
38
|
-
display: block;
|
|
39
|
-
min-width: 160px;
|
|
40
|
-
font-size: 16px;
|
|
41
|
-
}
|
|
42
|
-
.date-picker-action-time-item-label {
|
|
43
|
-
color: var(--Gray-700, #344054);
|
|
44
|
-
font-size: 14px;
|
|
45
|
-
font-weight: 600;
|
|
46
|
-
line-height: 20px; /* 142.857% */
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
19
|
}
|
|
@@ -15,7 +15,7 @@ import { MultiInputDateRangeField } from "../MultiInputDateRangeField";
|
|
|
15
15
|
import { useDesktopRangePicker } from "../internals/hooks/useDesktopRangePicker";
|
|
16
16
|
import { validateDateRange } from "../internals/utils/validation/validateDateRange";
|
|
17
17
|
var DesktopDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopDateRangePicker(inProps, ref) {
|
|
18
|
-
var _defaultizedProps$cal, _defaultizedProps$slo2
|
|
18
|
+
var _defaultizedProps$cal, _defaultizedProps$slo2;
|
|
19
19
|
// Props with the default values common to all date time pickers
|
|
20
20
|
var defaultizedProps = useDateRangePickerDefaultizedProps(inProps, 'MuiDesktopDateRangePicker');
|
|
21
21
|
var viewRenderers = _objectSpread({
|
|
@@ -36,12 +36,9 @@ var DesktopDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopDateR
|
|
|
36
36
|
ref: ref
|
|
37
37
|
});
|
|
38
38
|
},
|
|
39
|
-
actionBar: _objectSpread({
|
|
40
|
-
isDesktop: true
|
|
41
|
-
}, (_defaultizedProps$slo2 = defaultizedProps.slotProps) === null || _defaultizedProps$slo2 === void 0 ? void 0 : _defaultizedProps$slo2.actionBar),
|
|
42
39
|
toolbar: _objectSpread({
|
|
43
40
|
hidden: true
|
|
44
|
-
}, (_defaultizedProps$
|
|
41
|
+
}, (_defaultizedProps$slo2 = defaultizedProps.slotProps) === null || _defaultizedProps$slo2 === void 0 ? void 0 : _defaultizedProps$slo2.toolbar)
|
|
45
42
|
})
|
|
46
43
|
});
|
|
47
44
|
var _useDesktopRangePicke = useDesktopRangePicker({
|
|
@@ -18,7 +18,7 @@ import { MultiInputDateRangeField } from "../MultiInputDateRangeField";
|
|
|
18
18
|
import { useMobileRangePicker } from "../internals/hooks/useMobileRangePicker";
|
|
19
19
|
import { validateDateRange } from "../internals/utils/validation/validateDateRange";
|
|
20
20
|
var MobileDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileDateRangePicker(inProps, ref) {
|
|
21
|
-
var _defaultizedProps$slo2
|
|
21
|
+
var _defaultizedProps$slo2;
|
|
22
22
|
// Props with the default values common to all date time pickers
|
|
23
23
|
var _useDateRangePickerDe = useDateRangePickerDefaultizedProps(inProps, 'MuiMobileDateRangePicker'),
|
|
24
24
|
className = _useDateRangePickerDe.className,
|
|
@@ -42,12 +42,9 @@ var MobileDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileDateRan
|
|
|
42
42
|
ref: ref
|
|
43
43
|
});
|
|
44
44
|
},
|
|
45
|
-
actionBar: _objectSpread({
|
|
46
|
-
isDesktop: false
|
|
47
|
-
}, (_defaultizedProps$slo2 = defaultizedProps.slotProps) === null || _defaultizedProps$slo2 === void 0 ? void 0 : _defaultizedProps$slo2.actionBar),
|
|
48
45
|
toolbar: _objectSpread({
|
|
49
46
|
hidden: false
|
|
50
|
-
}, (_defaultizedProps$
|
|
47
|
+
}, (_defaultizedProps$slo2 = defaultizedProps.slotProps) === null || _defaultizedProps$slo2 === void 0 ? void 0 : _defaultizedProps$slo2.toolbar)
|
|
51
48
|
})
|
|
52
49
|
});
|
|
53
50
|
var _useMobileRangePicker = useMobileRangePicker({
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { Dayjs } from
|
|
2
|
-
import React from
|
|
3
|
-
import { ButtonProps } from
|
|
4
|
-
import { PopperPlacementType } from
|
|
5
|
-
import { PresetType } from
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
1
|
+
import { Dayjs } from "dayjs";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { ButtonProps } from "antd";
|
|
4
|
+
import { PopperPlacementType } from "@mui/base/Popper/Popper.types";
|
|
5
|
+
import { PresetType } from "../Shortcuts";
|
|
6
|
+
import "dayjs/locale/zh-cn";
|
|
7
|
+
import "dayjs/locale/en";
|
|
8
|
+
import "dayjs/locale/zh-tw";
|
|
9
|
+
import "./index.less";
|
|
10
10
|
export interface PisellDateRangePickerProps {
|
|
11
11
|
/** 再次选择日期时是否清除结束时间 */
|
|
12
12
|
clearEndOnSelection?: boolean;
|
|
@@ -30,7 +30,7 @@ export interface PisellDateRangePickerProps {
|
|
|
30
30
|
/** 占位符 */
|
|
31
31
|
placeholder?: string;
|
|
32
32
|
/** 是否禁用日期 */
|
|
33
|
-
disabledDate?: (day: Dayjs, position:
|
|
33
|
+
disabledDate?: (day: Dayjs, position: "start" | "end", value: Dayjs[]) => boolean;
|
|
34
34
|
/** 日期格式 */
|
|
35
35
|
format?: string;
|
|
36
36
|
/** 后缀图标 */
|
|
@@ -10,18 +10,18 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
|
10
10
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
11
11
|
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
12
12
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
13
|
-
import React, { useState, useEffect, useMemo, useContext, useRef } from
|
|
13
|
+
import React, { useState, useEffect, useMemo, useContext, useRef } from "react";
|
|
14
14
|
import { DateRangePicker } from "../DateRangePicker";
|
|
15
15
|
import ActionBar from "../ActionBar";
|
|
16
16
|
import Shortcuts from "../Shortcuts";
|
|
17
17
|
import { SingleInputDateRangeField } from "../SingleInputDateRangeField";
|
|
18
|
-
import classNames from
|
|
19
|
-
import { isArr, isBoolean, isString } from
|
|
18
|
+
import classNames from "classnames";
|
|
19
|
+
import { isArr, isBoolean, isString } from "@pisell/utils";
|
|
20
20
|
import useCssVariables from "./useCssVariables";
|
|
21
21
|
import CloseCircle from "../icon/CloseCircle";
|
|
22
|
-
import
|
|
23
|
-
import
|
|
24
|
-
import
|
|
22
|
+
import "dayjs/locale/zh-cn";
|
|
23
|
+
import "dayjs/locale/en";
|
|
24
|
+
import "dayjs/locale/zh-tw";
|
|
25
25
|
import "./index.less";
|
|
26
26
|
import { formatPresets, getCurrentLocale, getPresetLabel, getShortcutValue } from "../utils";
|
|
27
27
|
import { LocaleContext } from "./LocaleContext";
|
|
@@ -77,7 +77,7 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
|
|
|
77
77
|
allowClear = props.allowClear,
|
|
78
78
|
disablePortal = props.disablePortal,
|
|
79
79
|
_props$placement = props.placement,
|
|
80
|
-
placement = _props$placement === void 0 ?
|
|
80
|
+
placement = _props$placement === void 0 ? "auto" : _props$placement,
|
|
81
81
|
_props$inputReadOnly = props.inputReadOnly,
|
|
82
82
|
inputReadOnly = _props$inputReadOnly === void 0 ? true : _props$inputReadOnly,
|
|
83
83
|
_props$returnShortcut = props.returnShortcutString,
|
|
@@ -88,7 +88,7 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
|
|
|
88
88
|
setOpen = _useState2[1];
|
|
89
89
|
var _ref = useContext(LocaleContext) || {},
|
|
90
90
|
locale = _ref.locale;
|
|
91
|
-
var _useState3 = useState(
|
|
91
|
+
var _useState3 = useState(""),
|
|
92
92
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
93
93
|
currentShortcut = _useState4[0],
|
|
94
94
|
setCurrentShortcut = _useState4[1];
|
|
@@ -154,12 +154,12 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
|
|
|
154
154
|
};
|
|
155
155
|
var handleChange = function handleChange(val, type, shortcutValue) {
|
|
156
156
|
var newVal = val;
|
|
157
|
-
if (isString(shortcutValue) && type ===
|
|
157
|
+
if (isString(shortcutValue) && type === "shortcuts") {
|
|
158
158
|
setCurrentShortcut(shortcutValue);
|
|
159
159
|
} else {
|
|
160
160
|
setCurrentShortcut(null);
|
|
161
161
|
}
|
|
162
|
-
if (!clearEndOnSelection &&
|
|
162
|
+
if (!clearEndOnSelection && type !== "shortcuts" && type !== "write") {
|
|
163
163
|
if (rangePosition === 'start') {
|
|
164
164
|
newVal = [newVal[0], newVal[0]];
|
|
165
165
|
}
|
|
@@ -167,29 +167,17 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
|
|
|
167
167
|
newVal = [newVal[0], newVal[0]];
|
|
168
168
|
}
|
|
169
169
|
}
|
|
170
|
-
|
|
171
|
-
// 非时间类型更新时 开始时间默认为00:00:00 结束时间默认23:59:59
|
|
172
|
-
if (type !== 'time') {
|
|
173
|
-
newVal = newVal.map(function (item, index) {
|
|
174
|
-
if (index === 0) {
|
|
175
|
-
return (item === null || item === void 0 ? void 0 : item.set('hour', 0).set('minute', 0).set('second', 0)) || null;
|
|
176
|
-
} else if (index === 1) {
|
|
177
|
-
return (item === null || item === void 0 ? void 0 : item.set('hour', 23).set('minute', 59).set('second', 59)) || null;
|
|
178
|
-
}
|
|
179
|
-
return item;
|
|
180
|
-
});
|
|
181
|
-
}
|
|
182
|
-
if (isArr(showTime) && type !== 'time') {
|
|
170
|
+
if (isArr(showTime) && type !== "time") {
|
|
183
171
|
newVal = newVal.map(function (item, index) {
|
|
184
172
|
var _showTime$index;
|
|
185
173
|
if (showTime !== null && showTime !== void 0 && (_showTime$index = showTime[index]) !== null && _showTime$index !== void 0 && _showTime$index.defaultValue) {
|
|
186
174
|
var _showTime$index2, _showTime$index2$defa, _showTime$index3, _showTime$index3$defa, _showTime$index4, _showTime$index4$defa;
|
|
187
|
-
return (item === null || item === void 0 ? void 0 : item.set(
|
|
175
|
+
return (item === null || item === void 0 ? void 0 : item.set("hour", (_showTime$index2 = showTime[index]) === null || _showTime$index2 === void 0 ? void 0 : (_showTime$index2$defa = _showTime$index2.defaultValue) === null || _showTime$index2$defa === void 0 ? void 0 : _showTime$index2$defa.get("hour")).set("minute", (_showTime$index3 = showTime[index]) === null || _showTime$index3 === void 0 ? void 0 : (_showTime$index3$defa = _showTime$index3.defaultValue) === null || _showTime$index3$defa === void 0 ? void 0 : _showTime$index3$defa.get("minute")).set("second", (_showTime$index4 = showTime[index]) === null || _showTime$index4 === void 0 ? void 0 : (_showTime$index4$defa = _showTime$index4.defaultValue) === null || _showTime$index4$defa === void 0 ? void 0 : _showTime$index4$defa.get("second"))) || null;
|
|
188
176
|
}
|
|
189
177
|
return item || null;
|
|
190
178
|
});
|
|
191
179
|
}
|
|
192
|
-
if (clearEndOnSelection && type !==
|
|
180
|
+
if (clearEndOnSelection && type !== "set" && _value.filter(Boolean).length === 2) {
|
|
193
181
|
newVal = [newVal[0], null];
|
|
194
182
|
}
|
|
195
183
|
onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(newVal);
|
|
@@ -197,7 +185,7 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
|
|
|
197
185
|
};
|
|
198
186
|
useCssVariables({
|
|
199
187
|
variables: {
|
|
200
|
-
|
|
188
|
+
"--pisell-date-range-picker-popup-width": "".concat(popupWidth, "px")
|
|
201
189
|
},
|
|
202
190
|
dom: document.body
|
|
203
191
|
});
|
|
@@ -240,7 +228,7 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
|
|
|
240
228
|
if (!localeValue) {
|
|
241
229
|
localeValue = pLocaleMap[getCurrentLocale()];
|
|
242
230
|
}
|
|
243
|
-
return localeValue ===
|
|
231
|
+
return localeValue === "en" || localeValue === "en-US" ? "DD/MM/YYYY" : "YYYY/MM/DD";
|
|
244
232
|
}, [propsFormat, locale]);
|
|
245
233
|
var inputPropsObj = useMemo(function () {
|
|
246
234
|
var _value$every;
|
|
@@ -255,8 +243,8 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
|
|
|
255
243
|
return obj;
|
|
256
244
|
}, [_value, endAdornment, returnShortcutString, currentShortcut]);
|
|
257
245
|
return /*#__PURE__*/React.createElement("span", {
|
|
258
|
-
className: classNames(className,
|
|
259
|
-
|
|
246
|
+
className: classNames(className, "pisell-date-range-picker", {
|
|
247
|
+
"pisell-date-range-picker-no-border": !bordered
|
|
260
248
|
}),
|
|
261
249
|
style: style,
|
|
262
250
|
onClick: function onClick(e) {
|
|
@@ -309,7 +297,7 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
|
|
|
309
297
|
slotProps: {
|
|
310
298
|
shortcuts: {
|
|
311
299
|
items: [],
|
|
312
|
-
changeImportance:
|
|
300
|
+
changeImportance: "set",
|
|
313
301
|
onChange: handleChange
|
|
314
302
|
},
|
|
315
303
|
actionBar: {
|
|
@@ -322,7 +310,7 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
|
|
|
322
310
|
cancelButtonProps: cancelButtonProps
|
|
323
311
|
},
|
|
324
312
|
toolbar: {
|
|
325
|
-
hidden:
|
|
313
|
+
hidden: false,
|
|
326
314
|
presetItems: _presets,
|
|
327
315
|
format: format,
|
|
328
316
|
locale: locale,
|
|
@@ -333,11 +321,11 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
|
|
|
333
321
|
value: _value
|
|
334
322
|
},
|
|
335
323
|
layout: {
|
|
336
|
-
orientation:
|
|
324
|
+
orientation: "portrait"
|
|
337
325
|
},
|
|
338
326
|
field: _objectSpread({
|
|
339
327
|
value: _value,
|
|
340
|
-
size:
|
|
328
|
+
size: "small",
|
|
341
329
|
fullWidth: true,
|
|
342
330
|
// variant: "standard",
|
|
343
331
|
// hiddenLabel: true,
|
package/es/Toolbar/index.d.ts
CHANGED
package/es/Toolbar/index.js
CHANGED
|
@@ -26,8 +26,7 @@ var Toolbar = function Toolbar(props) {
|
|
|
26
26
|
onChange = props.onChange,
|
|
27
27
|
currentShortcut = props.currentShortcut,
|
|
28
28
|
setCurrentShortcut = props.setCurrentShortcut,
|
|
29
|
-
disabledDate = props.disabledDate
|
|
30
|
-
hidden = props.hidden;
|
|
29
|
+
disabledDate = props.disabledDate;
|
|
31
30
|
var format = locale === 'en' || locale === 'en-US' ? 'DD/MM/YYYY' : 'YYYY/MM/DD';
|
|
32
31
|
var _useState = useState(''),
|
|
33
32
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -128,9 +127,6 @@ var Toolbar = function Toolbar(props) {
|
|
|
128
127
|
}
|
|
129
128
|
return presetItems;
|
|
130
129
|
}, [presetItems, currentShortcut]);
|
|
131
|
-
if (hidden) {
|
|
132
|
-
return null;
|
|
133
|
-
}
|
|
134
130
|
return /*#__PURE__*/React.createElement("div", {
|
|
135
131
|
className: "date-picker-toolbar"
|
|
136
132
|
}, /*#__PURE__*/React.createElement("div", {
|
package/lib/ActionBar/index.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { ButtonProps } from
|
|
2
|
-
import { Dayjs } from
|
|
3
|
-
import
|
|
1
|
+
import { ButtonProps } from "antd";
|
|
2
|
+
import { Dayjs } from "dayjs";
|
|
3
|
+
import "./index.less";
|
|
4
4
|
interface ActionBarProps {
|
|
5
5
|
ownerState: any;
|
|
6
6
|
onCancel: () => void;
|
|
7
|
-
onChange: (val: any[], type?:
|
|
7
|
+
onChange: (val: any[], type?: "time") => void;
|
|
8
8
|
onOk: () => void;
|
|
9
9
|
value: any[];
|
|
10
10
|
showTime?: boolean | {
|
|
@@ -13,7 +13,6 @@ interface ActionBarProps {
|
|
|
13
13
|
}[];
|
|
14
14
|
okButtonProps?: ButtonProps;
|
|
15
15
|
cancelButtonProps?: ButtonProps;
|
|
16
|
-
isDesktop: boolean;
|
|
17
16
|
}
|
|
18
17
|
declare const ActionBar: (props: ActionBarProps) => JSX.Element;
|
|
19
18
|
export default ActionBar;
|
package/lib/ActionBar/index.js
CHANGED
|
@@ -41,7 +41,6 @@ var import_dayjs = __toESM(require("dayjs"));
|
|
|
41
41
|
var import_locales = require("../locales");
|
|
42
42
|
var import_index = require("./index.less");
|
|
43
43
|
var ActionBar = (props) => {
|
|
44
|
-
var _a, _b;
|
|
45
44
|
const {
|
|
46
45
|
ownerState,
|
|
47
46
|
onCancel,
|
|
@@ -50,8 +49,7 @@ var ActionBar = (props) => {
|
|
|
50
49
|
showTime,
|
|
51
50
|
value = [],
|
|
52
51
|
okButtonProps,
|
|
53
|
-
cancelButtonProps
|
|
54
|
-
isDesktop
|
|
52
|
+
cancelButtonProps
|
|
55
53
|
} = props;
|
|
56
54
|
const local = (0, import_react.useContext)(import_x_date_pickers.MuiPickersAdapterContext);
|
|
57
55
|
const locale = (0, import_react.useMemo)(() => {
|
|
@@ -61,17 +59,17 @@ var ActionBar = (props) => {
|
|
|
61
59
|
const { items } = (slotProps == null ? void 0 : slotProps.shortcuts) || {};
|
|
62
60
|
const hasShortcuts = !!items.length;
|
|
63
61
|
const handleStartChange = (val) => {
|
|
64
|
-
var
|
|
62
|
+
var _a, _b;
|
|
65
63
|
const newValue = [...value];
|
|
66
64
|
const start = newValue[0] || (0, import_dayjs.default)();
|
|
67
|
-
newValue[0] = ((
|
|
65
|
+
newValue[0] = ((_b = (_a = start == null ? void 0 : start.set("hour", (val == null ? void 0 : val.get("hour")) || 0)) == null ? void 0 : _a.set("minute", (val == null ? void 0 : val.get("minute")) || 0)) == null ? void 0 : _b.set("second", (val == null ? void 0 : val.get("second")) || 0)) || null;
|
|
68
66
|
onChange(newValue, "time");
|
|
69
67
|
};
|
|
70
68
|
const handleEndChange = (val) => {
|
|
71
|
-
var
|
|
69
|
+
var _a, _b;
|
|
72
70
|
const newValue = [...value];
|
|
73
71
|
const end = newValue[1] || (0, import_dayjs.default)();
|
|
74
|
-
newValue[1] = ((
|
|
72
|
+
newValue[1] = ((_b = (_a = end == null ? void 0 : end.set("hour", (val == null ? void 0 : val.get("hour")) || 0)) == null ? void 0 : _a.set("minute", (val == null ? void 0 : val.get("minute")) || 0)) == null ? void 0 : _b.set("second", (val == null ? void 0 : val.get("second")) || 0)) || null;
|
|
75
73
|
onChange(newValue, "time");
|
|
76
74
|
};
|
|
77
75
|
const spaceStyle = (0, import_react.useMemo)(() => {
|
|
@@ -96,68 +94,15 @@ var ActionBar = (props) => {
|
|
|
96
94
|
if ((0, import_utils.isArr)(showTime) && showTime[0]) {
|
|
97
95
|
return showTime[0];
|
|
98
96
|
}
|
|
99
|
-
return {
|
|
100
|
-
format: "HH:mm"
|
|
101
|
-
};
|
|
97
|
+
return {};
|
|
102
98
|
}, [showTime]);
|
|
103
99
|
const endTimeProps = (0, import_react.useMemo)(() => {
|
|
104
100
|
if ((0, import_utils.isArr)(showTime) && showTime[1]) {
|
|
105
101
|
return showTime[1];
|
|
106
102
|
}
|
|
107
|
-
return {
|
|
108
|
-
format: "HH:mm"
|
|
109
|
-
};
|
|
103
|
+
return {};
|
|
110
104
|
}, [showTime]);
|
|
111
|
-
return /* @__PURE__ */ import_react.default.createElement(
|
|
112
|
-
import_antd.TimePicker,
|
|
113
|
-
{
|
|
114
|
-
placeholder: (0, import_locales.getText)(
|
|
115
|
-
"action-bar-start.time",
|
|
116
|
-
import_locales.pLocaleMap[locale]
|
|
117
|
-
),
|
|
118
|
-
...startTimeProps,
|
|
119
|
-
changeOnBlur: true,
|
|
120
|
-
value: value[0],
|
|
121
|
-
size: "large",
|
|
122
|
-
popupClassName: "date-picker-action-bar-time-picker-popup",
|
|
123
|
-
onChange: handleStartChange,
|
|
124
|
-
inputReadOnly: true
|
|
125
|
-
}
|
|
126
|
-
) : /* @__PURE__ */ import_react.default.createElement(
|
|
127
|
-
"input",
|
|
128
|
-
{
|
|
129
|
-
type: "time",
|
|
130
|
-
onChange: (e) => {
|
|
131
|
-
const val = e.target.value;
|
|
132
|
-
handleStartChange((0, import_dayjs.default)(val, "HH:mm"));
|
|
133
|
-
},
|
|
134
|
-
className: "date-picker-input-time",
|
|
135
|
-
value: (_a = value[0]) == null ? void 0 : _a.format("HH:mm")
|
|
136
|
-
}
|
|
137
|
-
)), /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-action-time-item" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-action-time-item-label" }, (0, import_locales.getText)("action-bar-end.time", import_locales.pLocaleMap[locale])), isDesktop ? /* @__PURE__ */ import_react.default.createElement(
|
|
138
|
-
import_antd.TimePicker,
|
|
139
|
-
{
|
|
140
|
-
placeholder: (0, import_locales.getText)("action-bar-end.time", import_locales.pLocaleMap[locale]),
|
|
141
|
-
...endTimeProps,
|
|
142
|
-
changeOnBlur: true,
|
|
143
|
-
value: value[1],
|
|
144
|
-
size: "large",
|
|
145
|
-
popupClassName: "date-picker-action-bar-time-picker-popup",
|
|
146
|
-
onChange: handleEndChange,
|
|
147
|
-
inputReadOnly: true
|
|
148
|
-
}
|
|
149
|
-
) : /* @__PURE__ */ import_react.default.createElement(
|
|
150
|
-
"input",
|
|
151
|
-
{
|
|
152
|
-
type: "time",
|
|
153
|
-
onChange: (e) => {
|
|
154
|
-
const val = e.target.value;
|
|
155
|
-
handleEndChange((0, import_dayjs.default)(val, "HH:mm"));
|
|
156
|
-
},
|
|
157
|
-
className: "date-picker-input-time",
|
|
158
|
-
value: (_b = value[1]) == null ? void 0 : _b.format("HH:mm")
|
|
159
|
-
}
|
|
160
|
-
))) : null, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(props.className, "date-picker-action-bar") }, /* @__PURE__ */ import_react.default.createElement(
|
|
105
|
+
return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(props.className, "date-picker-action-bar") }, /* @__PURE__ */ import_react.default.createElement(
|
|
161
106
|
"div",
|
|
162
107
|
{
|
|
163
108
|
className: "date-picker-action-bar-right",
|
|
@@ -184,6 +129,6 @@ var ActionBar = (props) => {
|
|
|
184
129
|
},
|
|
185
130
|
(0, import_locales.getText)("action-bar-apply", import_locales.pLocaleMap[locale])
|
|
186
131
|
)
|
|
187
|
-
))
|
|
132
|
+
));
|
|
188
133
|
};
|
|
189
134
|
var ActionBar_default = ActionBar;
|