@pisell/date-picker 1.0.109 → 1.0.111
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 +5 -4
- package/es/ActionBar/index.js +75 -25
- package/es/ActionBar/index.less +30 -0
- package/es/CustomCalendarHeader/index.d.ts +2 -0
- package/es/DesktopDateRangePicker/DesktopDateRangePicker.js +5 -2
- package/es/Dialog/index.d.ts +2 -0
- package/es/Drawer/index.d.ts +11 -0
- package/es/MobileDateRangePicker/MobileDateRangePicker.js +5 -2
- package/es/OldActionBar/index.d.ts +0 -1
- package/es/PisellDateRangePicker/LocaleContext.d.ts +2 -0
- package/es/PisellDateRangePicker/index.d.ts +10 -10
- package/es/PisellDateRangePicker/index.js +34 -22
- package/es/Shortcuts/index.d.ts +15 -0
- package/es/Toolbar/index.d.ts +1 -1
- package/es/Toolbar/index.js +5 -1
- package/es/browserSelect/index.d.ts +15 -0
- package/es/hooks/useDocumentVisibility.d.ts +2 -0
- package/es/hooks/useNextDay.d.ts +2 -0
- package/es/hooks/useUpdateEffect.d.ts +2 -0
- package/es/icon/ChevronLeft.d.ts +5 -0
- package/es/icon/ChevronLeftDouble.d.ts +5 -0
- package/es/icon/ChevronRight.d.ts +5 -0
- package/es/icon/ChevronRightDouble.d.ts +5 -0
- package/es/icon/CloseCircle.d.ts +5 -0
- package/es/internals/utils/date-fields-utils.d.ts +1 -1
- package/es/locales/en-US.d.ts +26 -0
- package/es/locales/zh-CN.d.ts +26 -0
- package/es/locales/zh-TW.d.ts +26 -0
- package/lib/ActionBar/index.d.ts +5 -4
- package/lib/ActionBar/index.js +64 -9
- package/lib/ActionBar/index.less +30 -0
- package/lib/CustomCalendarHeader/index.d.ts +2 -0
- package/lib/DesktopDateRangePicker/DesktopDateRangePicker.js +6 -2
- package/lib/Dialog/index.d.ts +2 -0
- package/lib/Drawer/index.d.ts +11 -0
- package/lib/MobileDateRangePicker/MobileDateRangePicker.js +6 -2
- package/lib/OldActionBar/index.d.ts +0 -1
- package/lib/PisellDateRangePicker/LocaleContext.d.ts +2 -0
- package/lib/PisellDateRangePicker/index.d.ts +10 -10
- package/lib/PisellDateRangePicker/index.js +13 -3
- package/lib/Shortcuts/index.d.ts +15 -0
- package/lib/Toolbar/index.d.ts +1 -1
- package/lib/Toolbar/index.js +5 -1
- package/lib/browserSelect/index.d.ts +15 -0
- package/lib/hooks/useDocumentVisibility.d.ts +2 -0
- package/lib/hooks/useNextDay.d.ts +2 -0
- package/lib/hooks/useUpdateEffect.d.ts +2 -0
- package/lib/icon/ChevronLeft.d.ts +5 -0
- package/lib/icon/ChevronLeftDouble.d.ts +5 -0
- package/lib/icon/ChevronRight.d.ts +5 -0
- package/lib/icon/ChevronRightDouble.d.ts +5 -0
- package/lib/icon/CloseCircle.d.ts +5 -0
- package/lib/internals/utils/date-fields-utils.d.ts +1 -1
- package/lib/locales/en-US.d.ts +26 -0
- package/lib/locales/zh-CN.d.ts +26 -0
- package/lib/locales/zh-TW.d.ts +26 -0
- package/package.json +1 -1
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,6 +13,7 @@ interface ActionBarProps {
|
|
|
13
13
|
}[];
|
|
14
14
|
okButtonProps?: ButtonProps;
|
|
15
15
|
cancelButtonProps?: ButtonProps;
|
|
16
|
+
isDesktop: boolean;
|
|
16
17
|
}
|
|
17
18
|
declare const ActionBar: (props: ActionBarProps) => JSX.Element;
|
|
18
19
|
export default ActionBar;
|
package/es/ActionBar/index.js
CHANGED
|
@@ -1,25 +1,26 @@
|
|
|
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); }
|
|
3
2
|
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; }
|
|
4
3
|
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; }
|
|
5
4
|
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; }
|
|
6
5
|
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
7
6
|
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 } from
|
|
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, TimePicker } 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;
|
|
23
24
|
var ownerState = props.ownerState,
|
|
24
25
|
onCancel = props.onCancel,
|
|
25
26
|
onOk = props.onOk,
|
|
@@ -28,10 +29,11 @@ var ActionBar = function ActionBar(props) {
|
|
|
28
29
|
_props$value = props.value,
|
|
29
30
|
value = _props$value === void 0 ? [] : _props$value,
|
|
30
31
|
okButtonProps = props.okButtonProps,
|
|
31
|
-
cancelButtonProps = props.cancelButtonProps
|
|
32
|
+
cancelButtonProps = props.cancelButtonProps,
|
|
33
|
+
isDesktop = props.isDesktop;
|
|
32
34
|
var local = useContext(MuiPickersAdapterContext);
|
|
33
35
|
var locale = useMemo(function () {
|
|
34
|
-
return local.utils.locale ||
|
|
36
|
+
return local.utils.locale || 'en';
|
|
35
37
|
}, [local.utils.locale]);
|
|
36
38
|
var slotProps = ownerState.slotProps;
|
|
37
39
|
var _ref = (slotProps === null || slotProps === void 0 ? void 0 : slotProps.shortcuts) || {},
|
|
@@ -41,48 +43,96 @@ var ActionBar = function ActionBar(props) {
|
|
|
41
43
|
var _start$set, _start$set$set;
|
|
42
44
|
var newValue = _toConsumableArray(value);
|
|
43
45
|
var start = newValue[0] || dayjs();
|
|
44
|
-
newValue[0] = (start === null || start === void 0 ? void 0 : (_start$set = start.set(
|
|
45
|
-
onChange(newValue,
|
|
46
|
+
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;
|
|
47
|
+
onChange(newValue, 'time');
|
|
46
48
|
};
|
|
47
49
|
var handleEndChange = function handleEndChange(val) {
|
|
48
50
|
var _end$set, _end$set$set;
|
|
49
51
|
var newValue = _toConsumableArray(value);
|
|
50
52
|
var end = newValue[1] || dayjs();
|
|
51
|
-
newValue[1] = (end === null || end === void 0 ? void 0 : (_end$set = end.set(
|
|
52
|
-
onChange(newValue,
|
|
53
|
+
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;
|
|
54
|
+
onChange(newValue, 'time');
|
|
53
55
|
};
|
|
54
56
|
var spaceStyle = useMemo(function () {
|
|
55
57
|
return isMobile() ? {
|
|
56
|
-
display:
|
|
57
|
-
justifyContent:
|
|
58
|
+
display: 'flex',
|
|
59
|
+
justifyContent: 'end',
|
|
58
60
|
gap: 16
|
|
59
61
|
} : {
|
|
60
|
-
display:
|
|
62
|
+
display: 'flex'
|
|
61
63
|
};
|
|
62
64
|
}, []);
|
|
63
65
|
var buttonStyle = useMemo(function () {
|
|
64
66
|
return isMobile() ? {
|
|
65
|
-
display:
|
|
66
|
-
justifyContent:
|
|
67
|
+
display: 'flex',
|
|
68
|
+
justifyContent: 'end',
|
|
67
69
|
marginBottom: 12
|
|
68
70
|
} : {
|
|
69
|
-
display:
|
|
71
|
+
display: 'flex'
|
|
70
72
|
};
|
|
71
73
|
}, []);
|
|
72
74
|
var startTimeProps = useMemo(function () {
|
|
73
75
|
if (isArr(showTime) && showTime[0]) {
|
|
74
76
|
return showTime[0];
|
|
75
77
|
}
|
|
76
|
-
return {
|
|
78
|
+
return {
|
|
79
|
+
format: 'HH:mm'
|
|
80
|
+
};
|
|
77
81
|
}, [showTime]);
|
|
78
82
|
var endTimeProps = useMemo(function () {
|
|
79
83
|
if (isArr(showTime) && showTime[1]) {
|
|
80
84
|
return showTime[1];
|
|
81
85
|
}
|
|
82
|
-
return {
|
|
86
|
+
return {
|
|
87
|
+
format: 'HH:mm'
|
|
88
|
+
};
|
|
83
89
|
}, [showTime]);
|
|
84
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
85
|
-
className:
|
|
90
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, showTime ? /*#__PURE__*/React.createElement("div", {
|
|
91
|
+
className: "date-picker-action-time"
|
|
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')
|
|
86
136
|
}, /*#__PURE__*/React.createElement("div", {
|
|
87
137
|
className: "date-picker-action-bar-right",
|
|
88
138
|
style: _objectSpread(_objectSpread({}, spaceStyle), {}, {
|
|
@@ -93,12 +143,12 @@ var ActionBar = function ActionBar(props) {
|
|
|
93
143
|
size: "large"
|
|
94
144
|
}, cancelButtonProps || {}, {
|
|
95
145
|
onClick: onCancel
|
|
96
|
-
}), getText(
|
|
146
|
+
}), getText('action-bar-cancel', pLocaleMap[locale])), /*#__PURE__*/React.createElement(Button, _extends({
|
|
97
147
|
type: "primary",
|
|
98
148
|
size: "large",
|
|
99
149
|
block: isMobile()
|
|
100
150
|
}, okButtonProps || {}, {
|
|
101
151
|
onClick: onOk
|
|
102
|
-
}), getText(
|
|
152
|
+
}), getText('action-bar-apply', pLocaleMap[locale])))));
|
|
103
153
|
};
|
|
104
154
|
export default ActionBar;
|
package/es/ActionBar/index.less
CHANGED
|
@@ -16,4 +16,34 @@
|
|
|
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
|
+
}
|
|
19
49
|
}
|
|
@@ -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, _defaultizedProps$slo3;
|
|
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,9 +36,12 @@ 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),
|
|
39
42
|
toolbar: _objectSpread({
|
|
40
43
|
hidden: true
|
|
41
|
-
}, (_defaultizedProps$
|
|
44
|
+
}, (_defaultizedProps$slo3 = defaultizedProps.slotProps) === null || _defaultizedProps$slo3 === void 0 ? void 0 : _defaultizedProps$slo3.toolbar)
|
|
42
45
|
})
|
|
43
46
|
});
|
|
44
47
|
var _useDesktopRangePicke = useDesktopRangePicker({
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./index.less";
|
|
3
|
+
interface DrawerProps {
|
|
4
|
+
open: boolean;
|
|
5
|
+
className?: string;
|
|
6
|
+
height?: number;
|
|
7
|
+
children: React.ReactNode;
|
|
8
|
+
onClose: () => void;
|
|
9
|
+
}
|
|
10
|
+
declare const Drawer: (props: DrawerProps) => JSX.Element | null;
|
|
11
|
+
export default Drawer;
|
|
@@ -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, _defaultizedProps$slo3;
|
|
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,9 +42,12 @@ 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),
|
|
45
48
|
toolbar: _objectSpread({
|
|
46
49
|
hidden: false
|
|
47
|
-
}, (_defaultizedProps$
|
|
50
|
+
}, (_defaultizedProps$slo3 = defaultizedProps.slotProps) === null || _defaultizedProps$slo3 === void 0 ? void 0 : _defaultizedProps$slo3.toolbar)
|
|
48
51
|
})
|
|
49
52
|
});
|
|
50
53
|
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 && !['time', 'write', 'shortcuts'].includes(type)) {
|
|
163
163
|
if (rangePosition === 'start') {
|
|
164
164
|
newVal = [newVal[0], newVal[0]];
|
|
165
165
|
}
|
|
@@ -167,17 +167,29 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
|
|
|
167
167
|
newVal = [newVal[0], newVal[0]];
|
|
168
168
|
}
|
|
169
169
|
}
|
|
170
|
-
|
|
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') {
|
|
171
183
|
newVal = newVal.map(function (item, index) {
|
|
172
184
|
var _showTime$index;
|
|
173
185
|
if (showTime !== null && showTime !== void 0 && (_showTime$index = showTime[index]) !== null && _showTime$index !== void 0 && _showTime$index.defaultValue) {
|
|
174
186
|
var _showTime$index2, _showTime$index2$defa, _showTime$index3, _showTime$index3$defa, _showTime$index4, _showTime$index4$defa;
|
|
175
|
-
return (item === null || item === void 0 ? void 0 : item.set(
|
|
187
|
+
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;
|
|
176
188
|
}
|
|
177
189
|
return item || null;
|
|
178
190
|
});
|
|
179
191
|
}
|
|
180
|
-
if (clearEndOnSelection && type !==
|
|
192
|
+
if (clearEndOnSelection && type !== 'set' && _value.filter(Boolean).length === 2) {
|
|
181
193
|
newVal = [newVal[0], null];
|
|
182
194
|
}
|
|
183
195
|
onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(newVal);
|
|
@@ -185,7 +197,7 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
|
|
|
185
197
|
};
|
|
186
198
|
useCssVariables({
|
|
187
199
|
variables: {
|
|
188
|
-
|
|
200
|
+
'--pisell-date-range-picker-popup-width': "".concat(popupWidth, "px")
|
|
189
201
|
},
|
|
190
202
|
dom: document.body
|
|
191
203
|
});
|
|
@@ -228,7 +240,7 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
|
|
|
228
240
|
if (!localeValue) {
|
|
229
241
|
localeValue = pLocaleMap[getCurrentLocale()];
|
|
230
242
|
}
|
|
231
|
-
return localeValue ===
|
|
243
|
+
return localeValue === 'en' || localeValue === 'en-US' ? 'DD/MM/YYYY' : 'YYYY/MM/DD';
|
|
232
244
|
}, [propsFormat, locale]);
|
|
233
245
|
var inputPropsObj = useMemo(function () {
|
|
234
246
|
var _value$every;
|
|
@@ -243,8 +255,8 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
|
|
|
243
255
|
return obj;
|
|
244
256
|
}, [_value, endAdornment, returnShortcutString, currentShortcut]);
|
|
245
257
|
return /*#__PURE__*/React.createElement("span", {
|
|
246
|
-
className: classNames(className,
|
|
247
|
-
|
|
258
|
+
className: classNames(className, 'pisell-date-range-picker', {
|
|
259
|
+
'pisell-date-range-picker-no-border': !bordered
|
|
248
260
|
}),
|
|
249
261
|
style: style,
|
|
250
262
|
onClick: function onClick(e) {
|
|
@@ -297,7 +309,7 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
|
|
|
297
309
|
slotProps: {
|
|
298
310
|
shortcuts: {
|
|
299
311
|
items: [],
|
|
300
|
-
changeImportance:
|
|
312
|
+
changeImportance: 'set',
|
|
301
313
|
onChange: handleChange
|
|
302
314
|
},
|
|
303
315
|
actionBar: {
|
|
@@ -310,7 +322,7 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
|
|
|
310
322
|
cancelButtonProps: cancelButtonProps
|
|
311
323
|
},
|
|
312
324
|
toolbar: {
|
|
313
|
-
hidden:
|
|
325
|
+
hidden: showTime,
|
|
314
326
|
presetItems: _presets,
|
|
315
327
|
format: format,
|
|
316
328
|
locale: locale,
|
|
@@ -321,11 +333,11 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
|
|
|
321
333
|
value: _value
|
|
322
334
|
},
|
|
323
335
|
layout: {
|
|
324
|
-
orientation:
|
|
336
|
+
orientation: 'portrait'
|
|
325
337
|
},
|
|
326
338
|
field: _objectSpread({
|
|
327
339
|
value: _value,
|
|
328
|
-
size:
|
|
340
|
+
size: 'small',
|
|
329
341
|
fullWidth: true,
|
|
330
342
|
// variant: "standard",
|
|
331
343
|
// hiddenLabel: true,
|
|
@@ -348,7 +360,7 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
|
|
|
348
360
|
enabled: true,
|
|
349
361
|
options: {
|
|
350
362
|
altAxis: true,
|
|
351
|
-
altBoundary:
|
|
363
|
+
altBoundary: false,
|
|
352
364
|
tether: true,
|
|
353
365
|
rootBoundary: 'viewport',
|
|
354
366
|
padding: 8
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import "./index.less";
|
|
2
|
+
import { Dayjs } from "dayjs";
|
|
3
|
+
export declare type PresetType = {
|
|
4
|
+
label?: string;
|
|
5
|
+
getValue?: () => [Dayjs, Dayjs];
|
|
6
|
+
value: [Dayjs, Dayjs] | "today" | "yesterday" | "last_3_days" | "last_7_days" | "last_30_days" | "last_90_days" | "last_180_days" | "tomorrow" | "next_3_days" | "next_7_days" | "next_30_days" | "next_90_days" | "next_180_days";
|
|
7
|
+
key?: string;
|
|
8
|
+
};
|
|
9
|
+
interface ShortcutsProps {
|
|
10
|
+
items: PresetType[];
|
|
11
|
+
onChange: (day: [Dayjs, Dayjs], changeImportance?: "accept" | "set") => void;
|
|
12
|
+
changeImportance?: "accept" | "set";
|
|
13
|
+
}
|
|
14
|
+
declare const Shortcuts: (props: ShortcutsProps) => JSX.Element | null;
|
|
15
|
+
export default Shortcuts;
|
package/es/Toolbar/index.d.ts
CHANGED
package/es/Toolbar/index.js
CHANGED
|
@@ -26,7 +26,8 @@ var Toolbar = function Toolbar(props) {
|
|
|
26
26
|
onChange = props.onChange,
|
|
27
27
|
currentShortcut = props.currentShortcut,
|
|
28
28
|
setCurrentShortcut = props.setCurrentShortcut,
|
|
29
|
-
disabledDate = props.disabledDate
|
|
29
|
+
disabledDate = props.disabledDate,
|
|
30
|
+
hidden = props.hidden;
|
|
30
31
|
var format = locale === 'en' || locale === 'en-US' ? 'DD/MM/YYYY' : 'YYYY/MM/DD';
|
|
31
32
|
var _useState = useState(''),
|
|
32
33
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -127,6 +128,9 @@ var Toolbar = function Toolbar(props) {
|
|
|
127
128
|
}
|
|
128
129
|
return presetItems;
|
|
129
130
|
}, [presetItems, currentShortcut]);
|
|
131
|
+
if (hidden) {
|
|
132
|
+
return null;
|
|
133
|
+
}
|
|
130
134
|
return /*#__PURE__*/React.createElement("div", {
|
|
131
135
|
className: "date-picker-toolbar"
|
|
132
136
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./index.less";
|
|
3
|
+
interface BrowserSelectProps extends React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement> {
|
|
4
|
+
options: any[];
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* @title: 系统级别的下拉框
|
|
8
|
+
* @description:
|
|
9
|
+
* @param {BrowserSelectProps} props
|
|
10
|
+
* @return {*}
|
|
11
|
+
* @Author: zhiwei.Wang
|
|
12
|
+
* @Date: 2024-01-30 16:43
|
|
13
|
+
*/
|
|
14
|
+
declare const BrowserSelect: (props: BrowserSelectProps) => JSX.Element;
|
|
15
|
+
export default BrowserSelect;
|
|
@@ -5,7 +5,7 @@ export declare const splitDateRangeSections: (sections: RangeFieldSection[]) =>
|
|
|
5
5
|
};
|
|
6
6
|
export declare const removeLastSeparator: (dateSections: RangeFieldSection[]) => (RangeFieldSection | {
|
|
7
7
|
separator: null;
|
|
8
|
-
dateName: "
|
|
8
|
+
dateName: "start" | "end";
|
|
9
9
|
value: string;
|
|
10
10
|
format: string;
|
|
11
11
|
maxLength: number | null;
|