@pisell/date-picker 1.0.95 → 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/DesktopDateRangePicker/DesktopDateRangePicker.js +5 -2
- package/es/MobileDateRangePicker/MobileDateRangePicker.js +5 -2
- package/es/OldActionBar/index.d.ts +18 -0
- package/es/OldPisellDateRangePicker/index.d.ts +79 -0
- package/es/PisellDateRangePicker/index.d.ts +81 -0
- package/es/PisellDateRangePicker/index.js +32 -21
- package/es/PisellDateRangePicker/index.less +4 -0
- package/es/Toolbar/index.d.ts +4 -0
- package/es/Toolbar/index.js +5 -1
- package/es/index.d.ts +26 -0
- 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/DesktopDateRangePicker/DesktopDateRangePicker.js +6 -2
- package/lib/MobileDateRangePicker/MobileDateRangePicker.js +6 -2
- package/lib/OldActionBar/index.d.ts +18 -0
- package/lib/OldPisellDateRangePicker/index.d.ts +79 -0
- package/lib/PisellDateRangePicker/index.d.ts +81 -0
- package/lib/PisellDateRangePicker/index.js +13 -2
- package/lib/PisellDateRangePicker/index.less +4 -0
- package/lib/Toolbar/index.d.ts +4 -0
- package/lib/Toolbar/index.js +5 -1
- package/lib/index.d.ts +26 -0
- package/lib/internals/utils/date-fields-utils.d.ts +1 -1
- 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,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({
|
|
@@ -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({
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ButtonProps } from "antd";
|
|
2
|
+
import { Dayjs } from "dayjs";
|
|
3
|
+
import "./index.less";
|
|
4
|
+
interface ActionBarProps {
|
|
5
|
+
ownerState: any;
|
|
6
|
+
onCancel: () => void;
|
|
7
|
+
onChange: (val: any[], type?: "time") => void;
|
|
8
|
+
onOk: () => void;
|
|
9
|
+
value: any[];
|
|
10
|
+
showTime?: boolean | {
|
|
11
|
+
defaultValue: Dayjs;
|
|
12
|
+
[key: string]: any;
|
|
13
|
+
}[];
|
|
14
|
+
okButtonProps?: ButtonProps;
|
|
15
|
+
cancelButtonProps?: ButtonProps;
|
|
16
|
+
}
|
|
17
|
+
declare const ActionBar: (props: ActionBarProps) => JSX.Element;
|
|
18
|
+
export default ActionBar;
|
|
@@ -0,0 +1,79 @@
|
|
|
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
|
+
export interface PisellDateRangePickerProps {
|
|
11
|
+
/** 再次选择日期时是否清除结束时间 */
|
|
12
|
+
clearEndOnSelection?: boolean;
|
|
13
|
+
/** 日期选择确认回调 */
|
|
14
|
+
onChange?: (day: (Dayjs | null)[]) => void;
|
|
15
|
+
/** 日期改变回调 此处只为了组件外拿到当前日期项进行状态操作 通常情况下只使用onChange来拿value */
|
|
16
|
+
onDateChange?: (day: (Dayjs | null)[]) => void;
|
|
17
|
+
/** 日期选择值 */
|
|
18
|
+
value?: Dayjs[];
|
|
19
|
+
/** 日期选择默认值 */
|
|
20
|
+
defaultValue?: Dayjs[];
|
|
21
|
+
/** 快捷选择项 */
|
|
22
|
+
presets?: PresetType[];
|
|
23
|
+
/** 类名 */
|
|
24
|
+
className?: string;
|
|
25
|
+
/** 是否显示时间选择 这里参数为antd TimePickerProps */
|
|
26
|
+
showTime?: boolean | {
|
|
27
|
+
defaultValue: Dayjs;
|
|
28
|
+
[key: string]: any;
|
|
29
|
+
}[];
|
|
30
|
+
/** 占位符 */
|
|
31
|
+
placeholder?: string;
|
|
32
|
+
/** 是否禁用日期 */
|
|
33
|
+
disabledDate?: (day: Dayjs, position: 'start' | 'end', value: Dayjs[]) => boolean;
|
|
34
|
+
/** 日期格式 */
|
|
35
|
+
format?: string;
|
|
36
|
+
/** 后缀图标 */
|
|
37
|
+
suffixIcon?: React.ReactNode;
|
|
38
|
+
/** 是否显示边框 */
|
|
39
|
+
bordered?: boolean;
|
|
40
|
+
/** 是否打开日期选择 */
|
|
41
|
+
open?: boolean;
|
|
42
|
+
/** 关闭回调 */
|
|
43
|
+
onClose?: () => void;
|
|
44
|
+
/** 打开回调 */
|
|
45
|
+
onOpen?: () => void;
|
|
46
|
+
/** 弹窗宽度 */
|
|
47
|
+
popupWidth?: number;
|
|
48
|
+
/** 最小日期 */
|
|
49
|
+
minDate?: Dayjs;
|
|
50
|
+
/** 最大日期 */
|
|
51
|
+
maxDate?: Dayjs;
|
|
52
|
+
/** 月份切换事件 */
|
|
53
|
+
onMonthChange?: (value: Dayjs) => void;
|
|
54
|
+
/** 额外的弹出日历 className */
|
|
55
|
+
popupClassName?: string;
|
|
56
|
+
/** 默认显示月份 */
|
|
57
|
+
defaultCalendarMonth?: Dayjs;
|
|
58
|
+
/** ok 按钮 props */
|
|
59
|
+
okButtonProps?: ButtonProps;
|
|
60
|
+
/** cancel 按钮 props */
|
|
61
|
+
cancelButtonProps?: ButtonProps;
|
|
62
|
+
/**
|
|
63
|
+
* CSS media query when `Mobile` mode will be changed to `Desktop`.
|
|
64
|
+
* @default '@media (pointer: fine)'
|
|
65
|
+
* @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
|
|
66
|
+
*/
|
|
67
|
+
desktopModeMediaQuery?: string;
|
|
68
|
+
style?: React.CSSProperties;
|
|
69
|
+
/** 是否展示清除按钮 */
|
|
70
|
+
allowClear?: boolean;
|
|
71
|
+
/** true 将弹窗当前DOM层次结构下 false 追加到body */
|
|
72
|
+
disablePortal?: boolean;
|
|
73
|
+
/** 弹窗放置位置 */
|
|
74
|
+
placement?: PopperPlacementType;
|
|
75
|
+
/** 输入框只读 */
|
|
76
|
+
inputReadOnly: boolean;
|
|
77
|
+
}
|
|
78
|
+
declare const PisellDateRangePicker: (props: PisellDateRangePickerProps) => JSX.Element;
|
|
79
|
+
export default PisellDateRangePicker;
|
|
@@ -0,0 +1,81 @@
|
|
|
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
|
+
export interface PisellDateRangePickerProps {
|
|
11
|
+
/** 再次选择日期时是否清除结束时间 */
|
|
12
|
+
clearEndOnSelection?: boolean;
|
|
13
|
+
/** 日期选择确认回调 */
|
|
14
|
+
onChange?: (day: (Dayjs | null)[] | string) => void;
|
|
15
|
+
/** 日期改变回调 此处只为了组件外拿到当前日期项进行状态操作 通常情况下只使用onChange来拿value */
|
|
16
|
+
onDateChange?: (day: (Dayjs | null)[]) => void;
|
|
17
|
+
/** 日期选择值 */
|
|
18
|
+
value?: Dayjs[] | string;
|
|
19
|
+
/** 日期选择默认值 */
|
|
20
|
+
defaultValue?: Dayjs[];
|
|
21
|
+
/** 快捷选择项 */
|
|
22
|
+
presets?: PresetType[];
|
|
23
|
+
/** 类名 */
|
|
24
|
+
className?: string;
|
|
25
|
+
/** 是否显示时间选择 这里参数为antd TimePickerProps */
|
|
26
|
+
showTime?: boolean | {
|
|
27
|
+
defaultValue: Dayjs;
|
|
28
|
+
[key: string]: any;
|
|
29
|
+
}[];
|
|
30
|
+
/** 占位符 */
|
|
31
|
+
placeholder?: string;
|
|
32
|
+
/** 是否禁用日期 */
|
|
33
|
+
disabledDate?: (day: Dayjs, position: 'start' | 'end', value: Dayjs[]) => boolean;
|
|
34
|
+
/** 日期格式 */
|
|
35
|
+
format?: string;
|
|
36
|
+
/** 后缀图标 */
|
|
37
|
+
suffixIcon?: React.ReactNode;
|
|
38
|
+
/** 是否显示边框 */
|
|
39
|
+
bordered?: boolean;
|
|
40
|
+
/** 是否打开日期选择 */
|
|
41
|
+
open?: boolean;
|
|
42
|
+
/** 关闭回调 */
|
|
43
|
+
onClose?: () => void;
|
|
44
|
+
/** 打开回调 */
|
|
45
|
+
onOpen?: () => void;
|
|
46
|
+
/** 弹窗宽度 */
|
|
47
|
+
popupWidth?: number;
|
|
48
|
+
/** 最小日期 */
|
|
49
|
+
minDate?: Dayjs;
|
|
50
|
+
/** 最大日期 */
|
|
51
|
+
maxDate?: Dayjs;
|
|
52
|
+
/** 月份切换事件 */
|
|
53
|
+
onMonthChange?: (value: Dayjs) => void;
|
|
54
|
+
/** 额外的弹出日历 className */
|
|
55
|
+
popupClassName?: string;
|
|
56
|
+
/** 默认显示月份 */
|
|
57
|
+
defaultCalendarMonth?: Dayjs;
|
|
58
|
+
/** ok 按钮 props */
|
|
59
|
+
okButtonProps?: ButtonProps;
|
|
60
|
+
/** cancel 按钮 props */
|
|
61
|
+
cancelButtonProps?: ButtonProps;
|
|
62
|
+
/**
|
|
63
|
+
* CSS media query when `Mobile` mode will be changed to `Desktop`.
|
|
64
|
+
* @default '@media (pointer: fine)'
|
|
65
|
+
* @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
|
|
66
|
+
*/
|
|
67
|
+
desktopModeMediaQuery?: string;
|
|
68
|
+
style?: React.CSSProperties;
|
|
69
|
+
/** 是否展示清除按钮 */
|
|
70
|
+
allowClear?: boolean;
|
|
71
|
+
/** true 将弹窗当前DOM层次结构下 false 追加到body */
|
|
72
|
+
disablePortal?: boolean;
|
|
73
|
+
/** 弹窗放置位置 */
|
|
74
|
+
placement?: PopperPlacementType;
|
|
75
|
+
/** 输入框只读 */
|
|
76
|
+
inputReadOnly: boolean;
|
|
77
|
+
/** 使用快捷筛选时返回快捷字符串 */
|
|
78
|
+
returnShortcutString?: boolean;
|
|
79
|
+
}
|
|
80
|
+
declare const PisellDateRangePicker: (props: PisellDateRangePickerProps) => JSX.Element;
|
|
81
|
+
export default PisellDateRangePicker;
|
|
@@ -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/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", {
|
package/es/index.d.ts
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { ConfigProvider } from 'antd';
|
|
2
|
+
import PisellDateRangePicker from "./PisellDateRangePicker";
|
|
3
|
+
import OldPisellDateRangePicker from "./OldPisellDateRangePicker";
|
|
4
|
+
import { LocaleContext, LocaleProvider } from "./PisellDateRangePicker/LocaleContext";
|
|
5
|
+
export * from "@mui/x-date-pickers";
|
|
6
|
+
export * from "@mui/material/styles";
|
|
7
|
+
export * from "./DateRangePickerDay";
|
|
8
|
+
export * from "./MultiInputDateRangeField";
|
|
9
|
+
export * from "./MultiInputTimeRangeField";
|
|
10
|
+
export * from "./MultiInputDateTimeRangeField";
|
|
11
|
+
export * from "./SingleInputDateRangeField";
|
|
12
|
+
export * from "./SingleInputTimeRangeField";
|
|
13
|
+
export * from "./SingleInputDateTimeRangeField";
|
|
14
|
+
export type { RangeFieldSection, BaseMultiInputFieldProps, MultiInputFieldSlotTextFieldProps, } from "./internals/models/fields";
|
|
15
|
+
export * from "./DateRangeCalendar";
|
|
16
|
+
export * from "./DesktopDateRangePicker";
|
|
17
|
+
export * from "./MobileDateRangePicker";
|
|
18
|
+
export * from "./StaticDateRangePicker";
|
|
19
|
+
export * from "./dateRangeViewRenderers";
|
|
20
|
+
export type { DateRange, RangePosition } from "./internals/models/range";
|
|
21
|
+
export type { UseDateRangeFieldProps } from "./internals/models/dateRange";
|
|
22
|
+
export { PisellDateRangePicker as RangePicker };
|
|
23
|
+
export { OldPisellDateRangePicker };
|
|
24
|
+
export { LocaleContext, LocaleProvider, ConfigProvider };
|
|
25
|
+
export { getDatePickerValueByShortcut, formatPresets, getShortcutValue, getPresetLabel, getDatePickerValue, } from "./utils/index";
|
|
26
|
+
export * from "./models";
|
|
@@ -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
|
};
|
|
@@ -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
|
};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ButtonProps } from "antd";
|
|
2
|
+
import { Dayjs } from "dayjs";
|
|
3
|
+
import "./index.less";
|
|
4
|
+
interface ActionBarProps {
|
|
5
|
+
ownerState: any;
|
|
6
|
+
onCancel: () => void;
|
|
7
|
+
onChange: (val: any[], type?: "time") => void;
|
|
8
|
+
onOk: () => void;
|
|
9
|
+
value: any[];
|
|
10
|
+
showTime?: boolean | {
|
|
11
|
+
defaultValue: Dayjs;
|
|
12
|
+
[key: string]: any;
|
|
13
|
+
}[];
|
|
14
|
+
okButtonProps?: ButtonProps;
|
|
15
|
+
cancelButtonProps?: ButtonProps;
|
|
16
|
+
}
|
|
17
|
+
declare const ActionBar: (props: ActionBarProps) => JSX.Element;
|
|
18
|
+
export default ActionBar;
|
|
@@ -0,0 +1,79 @@
|
|
|
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
|
+
export interface PisellDateRangePickerProps {
|
|
11
|
+
/** 再次选择日期时是否清除结束时间 */
|
|
12
|
+
clearEndOnSelection?: boolean;
|
|
13
|
+
/** 日期选择确认回调 */
|
|
14
|
+
onChange?: (day: (Dayjs | null)[]) => void;
|
|
15
|
+
/** 日期改变回调 此处只为了组件外拿到当前日期项进行状态操作 通常情况下只使用onChange来拿value */
|
|
16
|
+
onDateChange?: (day: (Dayjs | null)[]) => void;
|
|
17
|
+
/** 日期选择值 */
|
|
18
|
+
value?: Dayjs[];
|
|
19
|
+
/** 日期选择默认值 */
|
|
20
|
+
defaultValue?: Dayjs[];
|
|
21
|
+
/** 快捷选择项 */
|
|
22
|
+
presets?: PresetType[];
|
|
23
|
+
/** 类名 */
|
|
24
|
+
className?: string;
|
|
25
|
+
/** 是否显示时间选择 这里参数为antd TimePickerProps */
|
|
26
|
+
showTime?: boolean | {
|
|
27
|
+
defaultValue: Dayjs;
|
|
28
|
+
[key: string]: any;
|
|
29
|
+
}[];
|
|
30
|
+
/** 占位符 */
|
|
31
|
+
placeholder?: string;
|
|
32
|
+
/** 是否禁用日期 */
|
|
33
|
+
disabledDate?: (day: Dayjs, position: 'start' | 'end', value: Dayjs[]) => boolean;
|
|
34
|
+
/** 日期格式 */
|
|
35
|
+
format?: string;
|
|
36
|
+
/** 后缀图标 */
|
|
37
|
+
suffixIcon?: React.ReactNode;
|
|
38
|
+
/** 是否显示边框 */
|
|
39
|
+
bordered?: boolean;
|
|
40
|
+
/** 是否打开日期选择 */
|
|
41
|
+
open?: boolean;
|
|
42
|
+
/** 关闭回调 */
|
|
43
|
+
onClose?: () => void;
|
|
44
|
+
/** 打开回调 */
|
|
45
|
+
onOpen?: () => void;
|
|
46
|
+
/** 弹窗宽度 */
|
|
47
|
+
popupWidth?: number;
|
|
48
|
+
/** 最小日期 */
|
|
49
|
+
minDate?: Dayjs;
|
|
50
|
+
/** 最大日期 */
|
|
51
|
+
maxDate?: Dayjs;
|
|
52
|
+
/** 月份切换事件 */
|
|
53
|
+
onMonthChange?: (value: Dayjs) => void;
|
|
54
|
+
/** 额外的弹出日历 className */
|
|
55
|
+
popupClassName?: string;
|
|
56
|
+
/** 默认显示月份 */
|
|
57
|
+
defaultCalendarMonth?: Dayjs;
|
|
58
|
+
/** ok 按钮 props */
|
|
59
|
+
okButtonProps?: ButtonProps;
|
|
60
|
+
/** cancel 按钮 props */
|
|
61
|
+
cancelButtonProps?: ButtonProps;
|
|
62
|
+
/**
|
|
63
|
+
* CSS media query when `Mobile` mode will be changed to `Desktop`.
|
|
64
|
+
* @default '@media (pointer: fine)'
|
|
65
|
+
* @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
|
|
66
|
+
*/
|
|
67
|
+
desktopModeMediaQuery?: string;
|
|
68
|
+
style?: React.CSSProperties;
|
|
69
|
+
/** 是否展示清除按钮 */
|
|
70
|
+
allowClear?: boolean;
|
|
71
|
+
/** true 将弹窗当前DOM层次结构下 false 追加到body */
|
|
72
|
+
disablePortal?: boolean;
|
|
73
|
+
/** 弹窗放置位置 */
|
|
74
|
+
placement?: PopperPlacementType;
|
|
75
|
+
/** 输入框只读 */
|
|
76
|
+
inputReadOnly: boolean;
|
|
77
|
+
}
|
|
78
|
+
declare const PisellDateRangePicker: (props: PisellDateRangePickerProps) => JSX.Element;
|
|
79
|
+
export default PisellDateRangePicker;
|
|
@@ -0,0 +1,81 @@
|
|
|
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
|
+
export interface PisellDateRangePickerProps {
|
|
11
|
+
/** 再次选择日期时是否清除结束时间 */
|
|
12
|
+
clearEndOnSelection?: boolean;
|
|
13
|
+
/** 日期选择确认回调 */
|
|
14
|
+
onChange?: (day: (Dayjs | null)[] | string) => void;
|
|
15
|
+
/** 日期改变回调 此处只为了组件外拿到当前日期项进行状态操作 通常情况下只使用onChange来拿value */
|
|
16
|
+
onDateChange?: (day: (Dayjs | null)[]) => void;
|
|
17
|
+
/** 日期选择值 */
|
|
18
|
+
value?: Dayjs[] | string;
|
|
19
|
+
/** 日期选择默认值 */
|
|
20
|
+
defaultValue?: Dayjs[];
|
|
21
|
+
/** 快捷选择项 */
|
|
22
|
+
presets?: PresetType[];
|
|
23
|
+
/** 类名 */
|
|
24
|
+
className?: string;
|
|
25
|
+
/** 是否显示时间选择 这里参数为antd TimePickerProps */
|
|
26
|
+
showTime?: boolean | {
|
|
27
|
+
defaultValue: Dayjs;
|
|
28
|
+
[key: string]: any;
|
|
29
|
+
}[];
|
|
30
|
+
/** 占位符 */
|
|
31
|
+
placeholder?: string;
|
|
32
|
+
/** 是否禁用日期 */
|
|
33
|
+
disabledDate?: (day: Dayjs, position: 'start' | 'end', value: Dayjs[]) => boolean;
|
|
34
|
+
/** 日期格式 */
|
|
35
|
+
format?: string;
|
|
36
|
+
/** 后缀图标 */
|
|
37
|
+
suffixIcon?: React.ReactNode;
|
|
38
|
+
/** 是否显示边框 */
|
|
39
|
+
bordered?: boolean;
|
|
40
|
+
/** 是否打开日期选择 */
|
|
41
|
+
open?: boolean;
|
|
42
|
+
/** 关闭回调 */
|
|
43
|
+
onClose?: () => void;
|
|
44
|
+
/** 打开回调 */
|
|
45
|
+
onOpen?: () => void;
|
|
46
|
+
/** 弹窗宽度 */
|
|
47
|
+
popupWidth?: number;
|
|
48
|
+
/** 最小日期 */
|
|
49
|
+
minDate?: Dayjs;
|
|
50
|
+
/** 最大日期 */
|
|
51
|
+
maxDate?: Dayjs;
|
|
52
|
+
/** 月份切换事件 */
|
|
53
|
+
onMonthChange?: (value: Dayjs) => void;
|
|
54
|
+
/** 额外的弹出日历 className */
|
|
55
|
+
popupClassName?: string;
|
|
56
|
+
/** 默认显示月份 */
|
|
57
|
+
defaultCalendarMonth?: Dayjs;
|
|
58
|
+
/** ok 按钮 props */
|
|
59
|
+
okButtonProps?: ButtonProps;
|
|
60
|
+
/** cancel 按钮 props */
|
|
61
|
+
cancelButtonProps?: ButtonProps;
|
|
62
|
+
/**
|
|
63
|
+
* CSS media query when `Mobile` mode will be changed to `Desktop`.
|
|
64
|
+
* @default '@media (pointer: fine)'
|
|
65
|
+
* @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
|
|
66
|
+
*/
|
|
67
|
+
desktopModeMediaQuery?: string;
|
|
68
|
+
style?: React.CSSProperties;
|
|
69
|
+
/** 是否展示清除按钮 */
|
|
70
|
+
allowClear?: boolean;
|
|
71
|
+
/** true 将弹窗当前DOM层次结构下 false 追加到body */
|
|
72
|
+
disablePortal?: boolean;
|
|
73
|
+
/** 弹窗放置位置 */
|
|
74
|
+
placement?: PopperPlacementType;
|
|
75
|
+
/** 输入框只读 */
|
|
76
|
+
inputReadOnly: boolean;
|
|
77
|
+
/** 使用快捷筛选时返回快捷字符串 */
|
|
78
|
+
returnShortcutString?: boolean;
|
|
79
|
+
}
|
|
80
|
+
declare const PisellDateRangePicker: (props: PisellDateRangePickerProps) => JSX.Element;
|
|
81
|
+
export default PisellDateRangePicker;
|
|
@@ -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/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]
|
package/lib/index.d.ts
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { ConfigProvider } from 'antd';
|
|
2
|
+
import PisellDateRangePicker from "./PisellDateRangePicker";
|
|
3
|
+
import OldPisellDateRangePicker from "./OldPisellDateRangePicker";
|
|
4
|
+
import { LocaleContext, LocaleProvider } from "./PisellDateRangePicker/LocaleContext";
|
|
5
|
+
export * from "@mui/x-date-pickers";
|
|
6
|
+
export * from "@mui/material/styles";
|
|
7
|
+
export * from "./DateRangePickerDay";
|
|
8
|
+
export * from "./MultiInputDateRangeField";
|
|
9
|
+
export * from "./MultiInputTimeRangeField";
|
|
10
|
+
export * from "./MultiInputDateTimeRangeField";
|
|
11
|
+
export * from "./SingleInputDateRangeField";
|
|
12
|
+
export * from "./SingleInputTimeRangeField";
|
|
13
|
+
export * from "./SingleInputDateTimeRangeField";
|
|
14
|
+
export type { RangeFieldSection, BaseMultiInputFieldProps, MultiInputFieldSlotTextFieldProps, } from "./internals/models/fields";
|
|
15
|
+
export * from "./DateRangeCalendar";
|
|
16
|
+
export * from "./DesktopDateRangePicker";
|
|
17
|
+
export * from "./MobileDateRangePicker";
|
|
18
|
+
export * from "./StaticDateRangePicker";
|
|
19
|
+
export * from "./dateRangeViewRenderers";
|
|
20
|
+
export type { DateRange, RangePosition } from "./internals/models/range";
|
|
21
|
+
export type { UseDateRangeFieldProps } from "./internals/models/dateRange";
|
|
22
|
+
export { PisellDateRangePicker as RangePicker };
|
|
23
|
+
export { OldPisellDateRangePicker };
|
|
24
|
+
export { LocaleContext, LocaleProvider, ConfigProvider };
|
|
25
|
+
export { getDatePickerValueByShortcut, formatPresets, getShortcutValue, getPresetLabel, getDatePickerValue, } from "./utils/index";
|
|
26
|
+
export * from "./models";
|
|
@@ -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;
|