@pisell/date-picker 1.0.96 → 1.0.97
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 +25 -0
- package/es/CustomCalendarHeader/index.d.ts +0 -1
- package/es/DesktopDateRangePicker/DesktopDateRangePicker.js +5 -2
- package/es/Dialog/index.d.ts +0 -1
- package/es/MobileDateRangePicker/MobileDateRangePicker.js +5 -2
- package/es/PisellDateRangePicker/index.d.ts +10 -10
- package/es/PisellDateRangePicker/index.js +32 -21
- package/es/Shortcuts/index.d.ts +0 -1
- package/es/Toolbar/index.d.ts +1 -1
- package/es/Toolbar/index.js +5 -1
- package/es/dateRangeViewRenderers/dateRangeViewRenderers.d.ts +0 -1
- package/es/icon/ChevronLeft.d.ts +0 -1
- package/es/icon/ChevronLeftDouble.d.ts +0 -1
- package/es/icon/ChevronRight.d.ts +0 -1
- package/es/icon/ChevronRightDouble.d.ts +0 -1
- package/es/icon/CloseCircle.d.ts +0 -1
- package/es/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.d.ts +0 -1
- package/es/internals/hooks/useMobileRangePicker/useMobileRangePicker.d.ts +0 -1
- package/es/internals/hooks/useStaticRangePicker/useStaticRangePicker.d.ts +0 -1
- package/es/internals/utils/date-fields-utils.d.ts +1 -1
- package/lib/ActionBar/index.d.ts +5 -4
- package/lib/ActionBar/index.js +64 -9
- package/lib/ActionBar/index.less +25 -0
- package/lib/CustomCalendarHeader/index.d.ts +0 -1
- package/lib/DesktopDateRangePicker/DesktopDateRangePicker.js +6 -2
- package/lib/Dialog/index.d.ts +0 -1
- package/lib/MobileDateRangePicker/MobileDateRangePicker.js +6 -2
- package/lib/PisellDateRangePicker/index.d.ts +10 -10
- package/lib/PisellDateRangePicker/index.js +13 -2
- package/lib/Shortcuts/index.d.ts +0 -1
- package/lib/Toolbar/index.d.ts +1 -1
- package/lib/Toolbar/index.js +5 -1
- package/lib/dateRangeViewRenderers/dateRangeViewRenderers.d.ts +0 -1
- package/lib/icon/ChevronLeft.d.ts +0 -1
- package/lib/icon/ChevronLeftDouble.d.ts +0 -1
- package/lib/icon/ChevronRight.d.ts +0 -1
- package/lib/icon/ChevronRightDouble.d.ts +0 -1
- package/lib/icon/CloseCircle.d.ts +0 -1
- package/lib/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.d.ts +0 -1
- package/lib/internals/hooks/useMobileRangePicker/useMobileRangePicker.d.ts +0 -1
- package/lib/internals/hooks/useStaticRangePicker/useStaticRangePicker.d.ts +0 -1
- package/lib/internals/utils/date-fields-utils.d.ts +1 -1
- package/package.json +2 -2
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,29 @@
|
|
|
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
|
+
}
|
|
37
|
+
.date-picker-action-time-item-label {
|
|
38
|
+
color: var(--Gray-700, #344054);
|
|
39
|
+
font-size: 14px;
|
|
40
|
+
font-weight: 600;
|
|
41
|
+
line-height: 20px; /* 142.857% */
|
|
42
|
+
}
|
|
43
|
+
}
|
|
19
44
|
}
|
|
@@ -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({
|
package/es/Dialog/index.d.ts
CHANGED
|
@@ -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];
|
|
@@ -153,13 +153,14 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
|
|
|
153
153
|
lastConfirmShortcut.current = currentShortcut;
|
|
154
154
|
};
|
|
155
155
|
var handleChange = function handleChange(val, type, shortcutValue) {
|
|
156
|
+
console.log(type, 'typeeee');
|
|
156
157
|
var newVal = val;
|
|
157
|
-
if (isString(shortcutValue) && type ===
|
|
158
|
+
if (isString(shortcutValue) && type === 'shortcuts') {
|
|
158
159
|
setCurrentShortcut(shortcutValue);
|
|
159
160
|
} else {
|
|
160
161
|
setCurrentShortcut(null);
|
|
161
162
|
}
|
|
162
|
-
if (!clearEndOnSelection &&
|
|
163
|
+
if (!clearEndOnSelection && !['time', 'write', 'shortcuts'].includes(type)) {
|
|
163
164
|
if (rangePosition === 'start') {
|
|
164
165
|
newVal = [newVal[0], newVal[0]];
|
|
165
166
|
}
|
|
@@ -167,17 +168,27 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
|
|
|
167
168
|
newVal = [newVal[0], newVal[0]];
|
|
168
169
|
}
|
|
169
170
|
}
|
|
170
|
-
if (
|
|
171
|
+
if (isBoolean(showTime) && type !== 'time') {
|
|
172
|
+
newVal = newVal.map(function (item, index) {
|
|
173
|
+
if (index === 0) {
|
|
174
|
+
return (item === null || item === void 0 ? void 0 : item.set('hour', 0).set('minute', 0).set('second', 0)) || null;
|
|
175
|
+
} else if (index === 1) {
|
|
176
|
+
return (item === null || item === void 0 ? void 0 : item.set('hour', 23).set('minute', 59).set('second', 59)) || null;
|
|
177
|
+
}
|
|
178
|
+
return item;
|
|
179
|
+
});
|
|
180
|
+
}
|
|
181
|
+
if (isArr(showTime) && type !== 'time') {
|
|
171
182
|
newVal = newVal.map(function (item, index) {
|
|
172
183
|
var _showTime$index;
|
|
173
184
|
if (showTime !== null && showTime !== void 0 && (_showTime$index = showTime[index]) !== null && _showTime$index !== void 0 && _showTime$index.defaultValue) {
|
|
174
185
|
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(
|
|
186
|
+
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
187
|
}
|
|
177
188
|
return item || null;
|
|
178
189
|
});
|
|
179
190
|
}
|
|
180
|
-
if (clearEndOnSelection && type !==
|
|
191
|
+
if (clearEndOnSelection && type !== 'set' && _value.filter(Boolean).length === 2) {
|
|
181
192
|
newVal = [newVal[0], null];
|
|
182
193
|
}
|
|
183
194
|
onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(newVal);
|
|
@@ -185,7 +196,7 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
|
|
|
185
196
|
};
|
|
186
197
|
useCssVariables({
|
|
187
198
|
variables: {
|
|
188
|
-
|
|
199
|
+
'--pisell-date-range-picker-popup-width': "".concat(popupWidth, "px")
|
|
189
200
|
},
|
|
190
201
|
dom: document.body
|
|
191
202
|
});
|
|
@@ -228,7 +239,7 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
|
|
|
228
239
|
if (!localeValue) {
|
|
229
240
|
localeValue = pLocaleMap[getCurrentLocale()];
|
|
230
241
|
}
|
|
231
|
-
return localeValue ===
|
|
242
|
+
return localeValue === 'en' || localeValue === 'en-US' ? 'DD/MM/YYYY' : 'YYYY/MM/DD';
|
|
232
243
|
}, [propsFormat, locale]);
|
|
233
244
|
var inputPropsObj = useMemo(function () {
|
|
234
245
|
var _value$every;
|
|
@@ -243,8 +254,8 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
|
|
|
243
254
|
return obj;
|
|
244
255
|
}, [_value, endAdornment, returnShortcutString, currentShortcut]);
|
|
245
256
|
return /*#__PURE__*/React.createElement("span", {
|
|
246
|
-
className: classNames(className,
|
|
247
|
-
|
|
257
|
+
className: classNames(className, 'pisell-date-range-picker', {
|
|
258
|
+
'pisell-date-range-picker-no-border': !bordered
|
|
248
259
|
}),
|
|
249
260
|
style: style,
|
|
250
261
|
onClick: function onClick(e) {
|
|
@@ -297,7 +308,7 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
|
|
|
297
308
|
slotProps: {
|
|
298
309
|
shortcuts: {
|
|
299
310
|
items: [],
|
|
300
|
-
changeImportance:
|
|
311
|
+
changeImportance: 'set',
|
|
301
312
|
onChange: handleChange
|
|
302
313
|
},
|
|
303
314
|
actionBar: {
|
|
@@ -310,7 +321,7 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
|
|
|
310
321
|
cancelButtonProps: cancelButtonProps
|
|
311
322
|
},
|
|
312
323
|
toolbar: {
|
|
313
|
-
hidden:
|
|
324
|
+
hidden: showTime,
|
|
314
325
|
presetItems: _presets,
|
|
315
326
|
format: format,
|
|
316
327
|
locale: locale,
|
|
@@ -321,11 +332,11 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
|
|
|
321
332
|
value: _value
|
|
322
333
|
},
|
|
323
334
|
layout: {
|
|
324
|
-
orientation:
|
|
335
|
+
orientation: 'portrait'
|
|
325
336
|
},
|
|
326
337
|
field: _objectSpread({
|
|
327
338
|
value: _value,
|
|
328
|
-
size:
|
|
339
|
+
size: 'small',
|
|
329
340
|
fullWidth: true,
|
|
330
341
|
// variant: "standard",
|
|
331
342
|
// hiddenLabel: true,
|
package/es/Shortcuts/index.d.ts
CHANGED
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", {
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals/models';
|
|
3
2
|
import { DateRangeCalendarProps } from '../DateRangeCalendar';
|
|
4
3
|
export interface DateRangeViewRendererProps<TDate, TView extends DateOrTimeViewWithMeridiem> extends DateRangeCalendarProps<TDate> {
|
package/es/icon/ChevronLeft.d.ts
CHANGED
package/es/icon/CloseCircle.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals/models';
|
|
3
2
|
import { UseDesktopRangePickerParams, UseDesktopRangePickerProps } from './useDesktopRangePicker.types';
|
|
4
3
|
export declare const useDesktopRangePicker: <TDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseDesktopRangePickerProps<TDate, TView, any, TExternalProps>>({ props, ...pickerParams }: UseDesktopRangePickerParams<TDate, TView, TExternalProps>) => {
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals/models';
|
|
3
2
|
import { UseMobileRangePickerParams, UseMobileRangePickerProps } from './useMobileRangePicker.types';
|
|
4
3
|
export declare const useMobileRangePicker: <TDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseMobileRangePickerProps<TDate, TView, any, TExternalProps>>({ props, ...pickerParams }: UseMobileRangePickerParams<TDate, TView, TExternalProps>) => {
|
|
@@ -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: "end" | "start";
|
|
9
9
|
value: string;
|
|
10
10
|
format: string;
|
|
11
11
|
maxLength: number | null;
|
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,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/lib/ActionBar/index.js
CHANGED
|
@@ -41,6 +41,7 @@ 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;
|
|
44
45
|
const {
|
|
45
46
|
ownerState,
|
|
46
47
|
onCancel,
|
|
@@ -49,7 +50,8 @@ var ActionBar = (props) => {
|
|
|
49
50
|
showTime,
|
|
50
51
|
value = [],
|
|
51
52
|
okButtonProps,
|
|
52
|
-
cancelButtonProps
|
|
53
|
+
cancelButtonProps,
|
|
54
|
+
isDesktop
|
|
53
55
|
} = props;
|
|
54
56
|
const local = (0, import_react.useContext)(import_x_date_pickers.MuiPickersAdapterContext);
|
|
55
57
|
const locale = (0, import_react.useMemo)(() => {
|
|
@@ -59,17 +61,17 @@ var ActionBar = (props) => {
|
|
|
59
61
|
const { items } = (slotProps == null ? void 0 : slotProps.shortcuts) || {};
|
|
60
62
|
const hasShortcuts = !!items.length;
|
|
61
63
|
const handleStartChange = (val) => {
|
|
62
|
-
var
|
|
64
|
+
var _a2, _b2;
|
|
63
65
|
const newValue = [...value];
|
|
64
66
|
const start = newValue[0] || (0, import_dayjs.default)();
|
|
65
|
-
newValue[0] = ((
|
|
67
|
+
newValue[0] = ((_b2 = (_a2 = start == null ? void 0 : start.set("hour", (val == null ? void 0 : val.get("hour")) || 0)) == null ? void 0 : _a2.set("minute", (val == null ? void 0 : val.get("minute")) || 0)) == null ? void 0 : _b2.set("second", (val == null ? void 0 : val.get("second")) || 0)) || null;
|
|
66
68
|
onChange(newValue, "time");
|
|
67
69
|
};
|
|
68
70
|
const handleEndChange = (val) => {
|
|
69
|
-
var
|
|
71
|
+
var _a2, _b2;
|
|
70
72
|
const newValue = [...value];
|
|
71
73
|
const end = newValue[1] || (0, import_dayjs.default)();
|
|
72
|
-
newValue[1] = ((
|
|
74
|
+
newValue[1] = ((_b2 = (_a2 = end == null ? void 0 : end.set("hour", (val == null ? void 0 : val.get("hour")) || 0)) == null ? void 0 : _a2.set("minute", (val == null ? void 0 : val.get("minute")) || 0)) == null ? void 0 : _b2.set("second", (val == null ? void 0 : val.get("second")) || 0)) || null;
|
|
73
75
|
onChange(newValue, "time");
|
|
74
76
|
};
|
|
75
77
|
const spaceStyle = (0, import_react.useMemo)(() => {
|
|
@@ -94,15 +96,68 @@ var ActionBar = (props) => {
|
|
|
94
96
|
if ((0, import_utils.isArr)(showTime) && showTime[0]) {
|
|
95
97
|
return showTime[0];
|
|
96
98
|
}
|
|
97
|
-
return {
|
|
99
|
+
return {
|
|
100
|
+
format: "HH:mm"
|
|
101
|
+
};
|
|
98
102
|
}, [showTime]);
|
|
99
103
|
const endTimeProps = (0, import_react.useMemo)(() => {
|
|
100
104
|
if ((0, import_utils.isArr)(showTime) && showTime[1]) {
|
|
101
105
|
return showTime[1];
|
|
102
106
|
}
|
|
103
|
-
return {
|
|
107
|
+
return {
|
|
108
|
+
format: "HH:mm"
|
|
109
|
+
};
|
|
104
110
|
}, [showTime]);
|
|
105
|
-
return /* @__PURE__ */ import_react.default.createElement("div", { className:
|
|
111
|
+
return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, showTime ? /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-action-time" }, /* @__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-start.time", import_locales.pLocaleMap[locale])), isDesktop ? /* @__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(
|
|
106
161
|
"div",
|
|
107
162
|
{
|
|
108
163
|
className: "date-picker-action-bar-right",
|
|
@@ -129,6 +184,6 @@ var ActionBar = (props) => {
|
|
|
129
184
|
},
|
|
130
185
|
(0, import_locales.getText)("action-bar-apply", import_locales.pLocaleMap[locale])
|
|
131
186
|
)
|
|
132
|
-
));
|
|
187
|
+
)));
|
|
133
188
|
};
|
|
134
189
|
var ActionBar_default = ActionBar;
|
package/lib/ActionBar/index.less
CHANGED
|
@@ -16,4 +16,29 @@
|
|
|
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
|
+
}
|
|
37
|
+
.date-picker-action-time-item-label {
|
|
38
|
+
color: var(--Gray-700, #344054);
|
|
39
|
+
font-size: 14px;
|
|
40
|
+
font-weight: 600;
|
|
41
|
+
line-height: 20px; /* 142.857% */
|
|
42
|
+
}
|
|
43
|
+
}
|
|
19
44
|
}
|
|
@@ -43,7 +43,7 @@ var import_MultiInputDateRangeField = require("../MultiInputDateRangeField");
|
|
|
43
43
|
var import_useDesktopRangePicker = require("../internals/hooks/useDesktopRangePicker");
|
|
44
44
|
var import_validateDateRange = require("../internals/utils/validation/validateDateRange");
|
|
45
45
|
var DesktopDateRangePicker = React.forwardRef(function DesktopDateRangePicker2(inProps, ref) {
|
|
46
|
-
var _a;
|
|
46
|
+
var _a, _b;
|
|
47
47
|
const defaultizedProps = (0, import_shared.useDateRangePickerDefaultizedProps)(inProps, "MuiDesktopDateRangePicker");
|
|
48
48
|
const viewRenderers = {
|
|
49
49
|
day: import_dateRangeViewRenderers.renderDateRangeViewCalendar,
|
|
@@ -69,9 +69,13 @@ var DesktopDateRangePicker = React.forwardRef(function DesktopDateRangePicker2(i
|
|
|
69
69
|
ref
|
|
70
70
|
};
|
|
71
71
|
},
|
|
72
|
+
actionBar: {
|
|
73
|
+
isDesktop: true,
|
|
74
|
+
...(_a = defaultizedProps.slotProps) == null ? void 0 : _a.actionBar
|
|
75
|
+
},
|
|
72
76
|
toolbar: {
|
|
73
77
|
hidden: true,
|
|
74
|
-
...(
|
|
78
|
+
...(_b = defaultizedProps.slotProps) == null ? void 0 : _b.toolbar
|
|
75
79
|
}
|
|
76
80
|
}
|
|
77
81
|
};
|
package/lib/Dialog/index.d.ts
CHANGED
|
@@ -43,7 +43,7 @@ var import_MultiInputDateRangeField = require("../MultiInputDateRangeField");
|
|
|
43
43
|
var import_useMobileRangePicker = require("../internals/hooks/useMobileRangePicker");
|
|
44
44
|
var import_validateDateRange = require("../internals/utils/validation/validateDateRange");
|
|
45
45
|
var MobileDateRangePicker = React.forwardRef(function MobileDateRangePicker2(inProps, ref) {
|
|
46
|
-
var _a;
|
|
46
|
+
var _a, _b;
|
|
47
47
|
const { className, sx, ...defaultizedProps } = (0, import_shared.useDateRangePickerDefaultizedProps)(inProps, "MuiMobileDateRangePicker");
|
|
48
48
|
const viewRenderers = {
|
|
49
49
|
day: import_dateRangeViewRenderers.renderDateRangeViewCalendar,
|
|
@@ -69,9 +69,13 @@ var MobileDateRangePicker = React.forwardRef(function MobileDateRangePicker2(inP
|
|
|
69
69
|
ref
|
|
70
70
|
};
|
|
71
71
|
},
|
|
72
|
+
actionBar: {
|
|
73
|
+
isDesktop: false,
|
|
74
|
+
...(_a = defaultizedProps.slotProps) == null ? void 0 : _a.actionBar
|
|
75
|
+
},
|
|
72
76
|
toolbar: {
|
|
73
77
|
hidden: false,
|
|
74
|
-
...(
|
|
78
|
+
...(_b = defaultizedProps.slotProps) == null ? void 0 : _b.toolbar
|
|
75
79
|
}
|
|
76
80
|
}
|
|
77
81
|
};
|
|
@@ -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
|
/** 后缀图标 */
|
|
@@ -154,13 +154,14 @@ var PisellDateRangePicker = (props) => {
|
|
|
154
154
|
lastConfirmShortcut.current = currentShortcut;
|
|
155
155
|
};
|
|
156
156
|
const handleChange = (val, type, shortcutValue) => {
|
|
157
|
+
console.log(type, "typeeee");
|
|
157
158
|
let newVal = val;
|
|
158
159
|
if ((0, import_utils.isString)(shortcutValue) && type === "shortcuts") {
|
|
159
160
|
setCurrentShortcut(shortcutValue);
|
|
160
161
|
} else {
|
|
161
162
|
setCurrentShortcut(null);
|
|
162
163
|
}
|
|
163
|
-
if (!clearEndOnSelection &&
|
|
164
|
+
if (!clearEndOnSelection && !["time", "write", "shortcuts"].includes(type)) {
|
|
164
165
|
if (rangePosition === "start") {
|
|
165
166
|
newVal = [newVal[0], newVal[0]];
|
|
166
167
|
}
|
|
@@ -168,6 +169,16 @@ var PisellDateRangePicker = (props) => {
|
|
|
168
169
|
newVal = [newVal[0], newVal[0]];
|
|
169
170
|
}
|
|
170
171
|
}
|
|
172
|
+
if ((0, import_utils.isBoolean)(showTime) && type !== "time") {
|
|
173
|
+
newVal = newVal.map((item, index) => {
|
|
174
|
+
if (index === 0) {
|
|
175
|
+
return (item == null ? void 0 : item.set("hour", 0).set("minute", 0).set("second", 0)) || null;
|
|
176
|
+
} else if (index === 1) {
|
|
177
|
+
return (item == null ? void 0 : item.set("hour", 23).set("minute", 59).set("second", 59)) || null;
|
|
178
|
+
}
|
|
179
|
+
return item;
|
|
180
|
+
});
|
|
181
|
+
}
|
|
171
182
|
if ((0, import_utils.isArr)(showTime) && type !== "time") {
|
|
172
183
|
newVal = newVal.map((item, index) => {
|
|
173
184
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
@@ -303,7 +314,7 @@ var PisellDateRangePicker = (props) => {
|
|
|
303
314
|
cancelButtonProps
|
|
304
315
|
},
|
|
305
316
|
toolbar: {
|
|
306
|
-
hidden:
|
|
317
|
+
hidden: showTime,
|
|
307
318
|
presetItems: _presets,
|
|
308
319
|
format,
|
|
309
320
|
locale,
|
package/lib/Shortcuts/index.d.ts
CHANGED
package/lib/Toolbar/index.d.ts
CHANGED
package/lib/Toolbar/index.js
CHANGED
|
@@ -50,7 +50,8 @@ var Toolbar = (props) => {
|
|
|
50
50
|
onChange,
|
|
51
51
|
currentShortcut,
|
|
52
52
|
setCurrentShortcut,
|
|
53
|
-
disabledDate
|
|
53
|
+
disabledDate,
|
|
54
|
+
hidden
|
|
54
55
|
} = props;
|
|
55
56
|
const format = locale === "en" || locale === "en-US" ? "DD/MM/YYYY" : "YYYY/MM/DD";
|
|
56
57
|
const [startStr, setStartStr] = (0, import_react.useState)("");
|
|
@@ -149,6 +150,9 @@ var Toolbar = (props) => {
|
|
|
149
150
|
}
|
|
150
151
|
return presetItems;
|
|
151
152
|
}, [presetItems, currentShortcut]);
|
|
153
|
+
if (hidden) {
|
|
154
|
+
return null;
|
|
155
|
+
}
|
|
152
156
|
return /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-toolbar" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-content-top" }, /* @__PURE__ */ import_react.default.createElement("span", null, (0, import_locales.getText)(
|
|
153
157
|
"toolbar-date-range-shortcut-date-range",
|
|
154
158
|
import_locales.pLocaleMap[locale]
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals/models';
|
|
3
2
|
import { DateRangeCalendarProps } from '../DateRangeCalendar';
|
|
4
3
|
export interface DateRangeViewRendererProps<TDate, TView extends DateOrTimeViewWithMeridiem> extends DateRangeCalendarProps<TDate> {
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals/models';
|
|
3
2
|
import { UseDesktopRangePickerParams, UseDesktopRangePickerProps } from './useDesktopRangePicker.types';
|
|
4
3
|
export declare const useDesktopRangePicker: <TDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseDesktopRangePickerProps<TDate, TView, any, TExternalProps>>({ props, ...pickerParams }: UseDesktopRangePickerParams<TDate, TView, TExternalProps>) => {
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals/models';
|
|
3
2
|
import { UseMobileRangePickerParams, UseMobileRangePickerProps } from './useMobileRangePicker.types';
|
|
4
3
|
export declare const useMobileRangePicker: <TDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseMobileRangePickerProps<TDate, TView, any, TExternalProps>>({ props, ...pickerParams }: UseMobileRangePickerParams<TDate, TView, TExternalProps>) => {
|
|
@@ -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: "end" | "start";
|
|
9
9
|
value: string;
|
|
10
10
|
format: string;
|
|
11
11
|
maxLength: number | null;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pisell/date-picker",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.97",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.less"
|
|
6
6
|
],
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"antd": "^5.5.0",
|
|
27
27
|
"react": "^18.0.0",
|
|
28
28
|
"react-dom": "^18.0.0",
|
|
29
|
-
"@pisell/utils": "1.0.
|
|
29
|
+
"@pisell/utils": "1.0.33"
|
|
30
30
|
},
|
|
31
31
|
"files": [
|
|
32
32
|
"es",
|