@pisell/date-picker 3.0.9 → 3.0.10

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.
Files changed (9) hide show
  1. package/es/ActionBar/index.d.ts +12 -0
  2. package/es/ActionBar/index.js +26 -21
  3. package/es/PisellDateRangePicker/index.d.ts +9 -0
  4. package/es/PisellDateRangePicker/index.js +9 -2
  5. package/lib/ActionBar/index.d.ts +12 -0
  6. package/lib/ActionBar/index.js +42 -27
  7. package/lib/PisellDateRangePicker/index.d.ts +9 -0
  8. package/lib/PisellDateRangePicker/index.js +9 -2
  9. package/package.json +2 -2
package/es/ActionBar/index.d.ts CHANGED
@@ -2,6 +2,16 @@ import React from 'react';
2
2
  import { ButtonProps } from 'antd';
3
3
  import { Dayjs } from 'dayjs';
4
4
  import './index.less';
5
+ export interface DateRangeTimeInputProps {
6
+ value?: string;
7
+ onChange?: (value: string) => void;
8
+ slice?: number;
9
+ theme?: 'light' | 'dark';
10
+ className?: string;
11
+ popoverClassName?: string;
12
+ popupContainerClassName?: string;
13
+ [key: string]: any;
14
+ }
5
15
  interface ActionBarProps {
6
16
  ownerState: any;
7
17
  onCancel: () => void;
@@ -15,6 +25,8 @@ interface ActionBarProps {
15
25
  okButtonProps?: ButtonProps;
16
26
  cancelButtonProps?: ButtonProps;
17
27
  isDesktop: boolean;
28
+ timeInputComponent?: React.ComponentType<DateRangeTimeInputProps>;
29
+ timeInputProps?: Omit<DateRangeTimeInputProps, 'value' | 'onChange'>;
18
30
  }
19
31
  declare const ActionBar: (props: ActionBarProps) => React.JSX.Element;
20
32
  export default ActionBar;
package/es/ActionBar/index.js CHANGED
@@ -30,7 +30,9 @@ var ActionBar = function ActionBar(props) {
30
30
  value = _props$value === void 0 ? [] : _props$value,
31
31
  okButtonProps = props.okButtonProps,
32
32
  cancelButtonProps = props.cancelButtonProps,
33
- isDesktop = props.isDesktop;
33
+ isDesktop = props.isDesktop,
34
+ TimeInputComponent = props.timeInputComponent,
35
+ timeInputProps = props.timeInputProps;
34
36
  var local = useContext(MuiPickersAdapterContext);
35
37
  var locale = useMemo(function () {
36
38
  return local.utils.locale || 'en';
@@ -87,22 +89,34 @@ var ActionBar = function ActionBar(props) {
87
89
  format: 'HH:mm'
88
90
  };
89
91
  }, [showTime]);
92
+ var renderTimeInput = function renderTimeInput(currentValue, onTimeChange, pickerProps, placeholder, popupClassName) {
93
+ if (TimeInputComponent) {
94
+ return /*#__PURE__*/React.createElement(TimeInputComponent, _extends({}, timeInputProps, {
95
+ value: currentValue === null || currentValue === void 0 ? void 0 : currentValue.format('HH:mm'),
96
+ onChange: function onChange(nextTime) {
97
+ if (!nextTime) return;
98
+ onTimeChange(dayjs(nextTime, 'HH:mm'));
99
+ }
100
+ }));
101
+ }
102
+ return /*#__PURE__*/React.createElement(TimePicker, _extends({
103
+ placeholder: placeholder
104
+ }, pickerProps, {
105
+ changeOnBlur: true,
106
+ value: currentValue,
107
+ size: "large",
108
+ popupClassName: popupClassName,
109
+ onChange: onTimeChange,
110
+ inputReadOnly: true
111
+ }));
112
+ };
90
113
  return /*#__PURE__*/React.createElement(React.Fragment, null, showTime ? /*#__PURE__*/React.createElement("div", {
91
114
  className: "date-picker-action-time"
92
115
  }, /*#__PURE__*/React.createElement("div", {
93
116
  className: "date-picker-action-time-item"
94
117
  }, /*#__PURE__*/React.createElement("div", {
95
118
  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("div", {
119
+ }, getText('action-bar-start.time', pLocaleMap[locale])), isDesktop ? renderTimeInput(value[0], handleStartChange, startTimeProps, getText('action-bar-start.time', pLocaleMap[locale]), 'date-picker-action-bar-time-picker-popup') : /*#__PURE__*/React.createElement("div", {
106
120
  className: "date-picker-time-wrapper"
107
121
  }, /*#__PURE__*/React.createElement("div", {
108
122
  className: "date-picker-time-display"
@@ -118,16 +132,7 @@ var ActionBar = function ActionBar(props) {
118
132
  className: "date-picker-action-time-item"
119
133
  }, /*#__PURE__*/React.createElement("div", {
120
134
  className: "date-picker-action-time-item-label"
121
- }, getText('action-bar-end.time', pLocaleMap[locale])), isDesktop ? /*#__PURE__*/React.createElement(TimePicker, _extends({
122
- placeholder: getText('action-bar-end.time', pLocaleMap[locale])
123
- }, endTimeProps, {
124
- changeOnBlur: true,
125
- value: value[1],
126
- size: "large",
127
- popupClassName: "date-picker-action-bar-time-picker-popup",
128
- onChange: handleEndChange,
129
- inputReadOnly: true
130
- })) : /*#__PURE__*/React.createElement("div", {
135
+ }, getText('action-bar-end.time', pLocaleMap[locale])), isDesktop ? renderTimeInput(value[1], handleEndChange, endTimeProps, getText('action-bar-end.time', pLocaleMap[locale]), 'date-picker-action-bar-time-picker-popup') : /*#__PURE__*/React.createElement("div", {
131
136
  className: "date-picker-time-wrapper"
132
137
  }, /*#__PURE__*/React.createElement("div", {
133
138
  className: "date-picker-time-display"
package/es/PisellDateRangePicker/index.d.ts CHANGED
@@ -2,6 +2,7 @@ import { Dayjs } from 'dayjs';
2
2
  import React from 'react';
3
3
  import { ButtonProps } from 'antd';
4
4
  import { PopperPlacementType } from '@mui/base/Popper/Popper.types';
5
+ import type { DateRangeTimeInputProps } from '../ActionBar';
5
6
  import { PresetType } from '../Shortcuts';
6
7
  import 'dayjs/locale/zh-cn';
7
8
  import 'dayjs/locale/en';
@@ -65,6 +66,14 @@ export interface PisellDateRangePickerProps {
65
66
  * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
66
67
  */
67
68
  desktopModeMediaQuery?: string;
69
+ /** 桌面端展示的日历数量：单日 1 个，多日 2 个 */
70
+ calendars?: 1 | 2 | 3;
71
+ /** 自定义弹层底部时间输入组件；不传则使用默认 antd TimePicker */
72
+ timeInputComponent?: React.ComponentType<DateRangeTimeInputProps>;
73
+ /** 自定义时间输入组件 props */
74
+ timeInputProps?: Omit<DateRangeTimeInputProps, 'value' | 'onChange'>;
75
+ /** showTime 模式下是否仍展示弹层顶部 Starting/Ending 日期输入区 */
76
+ showToolbarWhenShowTime?: boolean;
68
77
  style?: React.CSSProperties;
69
78
  /** 是否展示清除按钮 */
70
79
  allowClear?: boolean;
package/es/PisellDateRangePicker/index.js CHANGED
@@ -74,6 +74,10 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
74
74
  cancelButtonProps = props.cancelButtonProps,
75
75
  onDateChange = props.onDateChange,
76
76
  desktopModeMediaQuery = props.desktopModeMediaQuery,
77
+ calendars = props.calendars,
78
+ timeInputComponent = props.timeInputComponent,
79
+ timeInputProps = props.timeInputProps,
80
+ showToolbarWhenShowTime = props.showToolbarWhenShowTime,
77
81
  style = props.style,
78
82
  allowClear = props.allowClear,
79
83
  disablePortal = props.disablePortal,
@@ -285,6 +289,7 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
285
289
  onMonthChange: onMonthChange,
286
290
  minDate: minDate,
287
291
  maxDate: maxDate,
292
+ calendars: calendars,
288
293
  format: format,
289
294
  label: placeholder,
290
295
  value: _value,
@@ -329,10 +334,12 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
329
334
  onChange: handleChange,
330
335
  value: _value,
331
336
  okButtonProps: okButtonProps,
332
- cancelButtonProps: cancelButtonProps
337
+ cancelButtonProps: cancelButtonProps,
338
+ timeInputComponent: timeInputComponent,
339
+ timeInputProps: timeInputProps
333
340
  },
334
341
  toolbar: {
335
- hidden: showTime,
342
+ hidden: showTime && !showToolbarWhenShowTime,
336
343
  presetItems: _presets,
337
344
  format: format,
338
345
  locale: locale,
package/lib/ActionBar/index.d.ts CHANGED
@@ -2,6 +2,16 @@ import React from 'react';
2
2
  import { ButtonProps } from 'antd';
3
3
  import { Dayjs } from 'dayjs';
4
4
  import './index.less';
5
+ export interface DateRangeTimeInputProps {
6
+ value?: string;
7
+ onChange?: (value: string) => void;
8
+ slice?: number;
9
+ theme?: 'light' | 'dark';
10
+ className?: string;
11
+ popoverClassName?: string;
12
+ popupContainerClassName?: string;
13
+ [key: string]: any;
14
+ }
5
15
  interface ActionBarProps {
6
16
  ownerState: any;
7
17
  onCancel: () => void;
@@ -15,6 +25,8 @@ interface ActionBarProps {
15
25
  okButtonProps?: ButtonProps;
16
26
  cancelButtonProps?: ButtonProps;
17
27
  isDesktop: boolean;
28
+ timeInputComponent?: React.ComponentType<DateRangeTimeInputProps>;
29
+ timeInputProps?: Omit<DateRangeTimeInputProps, 'value' | 'onChange'>;
18
30
  }
19
31
  declare const ActionBar: (props: ActionBarProps) => React.JSX.Element;
20
32
  export default ActionBar;
package/lib/ActionBar/index.js CHANGED
@@ -51,7 +51,9 @@ var ActionBar = (props) => {
51
51
  value = [],
52
52
  okButtonProps,
53
53
  cancelButtonProps,
54
- isDesktop
54
+ isDesktop,
55
+ timeInputComponent: TimeInputComponent,
56
+ timeInputProps
55
57
  } = props;
56
58
  const local = (0, import_react.useContext)(import_x_date_pickers.MuiPickersAdapterContext);
57
59
  const locale = (0, import_react.useMemo)(() => {
@@ -108,21 +110,40 @@ var ActionBar = (props) => {
108
110
  format: "HH:mm"
109
111
  };
110
112
  }, [showTime]);
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
113
+ const renderTimeInput = (currentValue, onTimeChange, pickerProps, placeholder, popupClassName) => {
114
+ if (TimeInputComponent) {
115
+ return /* @__PURE__ */ import_react.default.createElement(
116
+ TimeInputComponent,
117
+ {
118
+ ...timeInputProps,
119
+ value: currentValue == null ? void 0 : currentValue.format("HH:mm"),
120
+ onChange: (nextTime) => {
121
+ if (!nextTime) return;
122
+ onTimeChange((0, import_dayjs.default)(nextTime, "HH:mm"));
123
+ }
124
+ }
125
+ );
125
126
  }
127
+ return /* @__PURE__ */ import_react.default.createElement(
128
+ import_antd.TimePicker,
129
+ {
130
+ placeholder,
131
+ ...pickerProps,
132
+ changeOnBlur: true,
133
+ value: currentValue,
134
+ size: "large",
135
+ popupClassName,
136
+ onChange: onTimeChange,
137
+ inputReadOnly: true
138
+ }
139
+ );
140
+ };
141
+ 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 ? renderTimeInput(
142
+ value[0],
143
+ handleStartChange,
144
+ startTimeProps,
145
+ (0, import_locales.getText)("action-bar-start.time", import_locales.pLocaleMap[locale]),
146
+ "date-picker-action-bar-time-picker-popup"
126
147
  ) : /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-time-wrapper" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-time-display" }, ((_a = value[0]) == null ? void 0 : _a.format("HH:mm")) || "--:--"), /* @__PURE__ */ import_react.default.createElement(
127
148
  "input",
128
149
  {
@@ -134,18 +155,12 @@ var ActionBar = (props) => {
134
155
  className: "date-picker-input-time-native",
135
156
  value: (_b = value[0]) == null ? void 0 : _b.format("HH:mm")
136
157
  }
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
- }
158
+ ))), /* @__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 ? renderTimeInput(
159
+ value[1],
160
+ handleEndChange,
161
+ endTimeProps,
162
+ (0, import_locales.getText)("action-bar-end.time", import_locales.pLocaleMap[locale]),
163
+ "date-picker-action-bar-time-picker-popup"
149
164
  ) : /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-time-wrapper" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-time-display" }, ((_c = value[1]) == null ? void 0 : _c.format("HH:mm")) || "--:--"), /* @__PURE__ */ import_react.default.createElement(
150
165
  "input",
151
166
  {
package/lib/PisellDateRangePicker/index.d.ts CHANGED
@@ -2,6 +2,7 @@ import { Dayjs } from 'dayjs';
2
2
  import React from 'react';
3
3
  import { ButtonProps } from 'antd';
4
4
  import { PopperPlacementType } from '@mui/base/Popper/Popper.types';
5
+ import type { DateRangeTimeInputProps } from '../ActionBar';
5
6
  import { PresetType } from '../Shortcuts';
6
7
  import 'dayjs/locale/zh-cn';
7
8
  import 'dayjs/locale/en';
@@ -65,6 +66,14 @@ export interface PisellDateRangePickerProps {
65
66
  * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
66
67
  */
67
68
  desktopModeMediaQuery?: string;
69
+ /** 桌面端展示的日历数量：单日 1 个，多日 2 个 */
70
+ calendars?: 1 | 2 | 3;
71
+ /** 自定义弹层底部时间输入组件；不传则使用默认 antd TimePicker */
72
+ timeInputComponent?: React.ComponentType<DateRangeTimeInputProps>;
73
+ /** 自定义时间输入组件 props */
74
+ timeInputProps?: Omit<DateRangeTimeInputProps, 'value' | 'onChange'>;
75
+ /** showTime 模式下是否仍展示弹层顶部 Starting/Ending 日期输入区 */
76
+ showToolbarWhenShowTime?: boolean;
68
77
  style?: React.CSSProperties;
69
78
  /** 是否展示清除按钮 */
70
79
  allowClear?: boolean;
package/lib/PisellDateRangePicker/index.js CHANGED
@@ -92,6 +92,10 @@ var PisellDateRangePicker = (props) => {
92
92
  cancelButtonProps,
93
93
  onDateChange,
94
94
  desktopModeMediaQuery,
95
+ calendars,
96
+ timeInputComponent,
97
+ timeInputProps,
98
+ showToolbarWhenShowTime,
95
99
  style,
96
100
  allowClear,
97
101
  disablePortal,
@@ -276,6 +280,7 @@ var PisellDateRangePicker = (props) => {
276
280
  onMonthChange,
277
281
  minDate,
278
282
  maxDate,
283
+ calendars,
279
284
  format,
280
285
  label: placeholder,
281
286
  value: _value,
@@ -316,10 +321,12 @@ var PisellDateRangePicker = (props) => {
316
321
  onChange: handleChange,
317
322
  value: _value,
318
323
  okButtonProps,
319
- cancelButtonProps
324
+ cancelButtonProps,
325
+ timeInputComponent,
326
+ timeInputProps
320
327
  },
321
328
  toolbar: {
322
- hidden: showTime,
329
+ hidden: showTime && !showToolbarWhenShowTime,
323
330
  presetItems: _presets,
324
331
  format,
325
332
  locale,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pisell/date-picker",
3
- "version": "3.0.9",
3
+ "version": "3.0.10",
4
4
  "sideEffects": [
5
5
  "*.less"
6
6
  ],
@@ -26,7 +26,7 @@
26
26
  "antd": "^5.10.1",
27
27
  "react": "^18.0.0",
28
28
  "react-dom": "^18.0.0",
29
- "@pisell/utils": "3.0.3"
29
+ "@pisell/utils": "3.0.4"
30
30
  },
31
31
  "files": [
32
32
  "es",