@akinon/ui-date-picker 1.5.5 → 1.5.7
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/dist/cjs/index.d.ts +1 -1
- package/dist/cjs/index.d.ts.map +1 -1
- package/dist/cjs/index.js +188 -77
- package/dist/cjs/types.d.ts +4 -2
- package/dist/esm/index.d.ts +1 -1
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +188 -77
- package/dist/esm/types.d.ts +4 -2
- package/package.json +2 -2
package/dist/cjs/index.d.ts
CHANGED
|
@@ -17,6 +17,6 @@ import type { IDatePickerGroupProps } from './types';
|
|
|
17
17
|
* The DatePicker component is designed to cater to both basic and advanced use cases, making it ideal for
|
|
18
18
|
* enterprise-level applications.
|
|
19
19
|
*/
|
|
20
|
-
export declare const DatePicker: ({ pickerType, suffixIconColor, suffixIcon, suffixIconSize, showTitle, inputTitle, ...restDatePickerProps }: IDatePickerGroupProps) => React.JSX.Element;
|
|
20
|
+
export declare const DatePicker: ({ pickerType, suffixIconColor, suffixIcon, suffixIconSize, showTitle, inputTitle, inputWidth, ...restDatePickerProps }: IDatePickerGroupProps) => React.JSX.Element;
|
|
21
21
|
export type { IDatePickerGroupProps };
|
|
22
22
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/cjs/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD;;;;;;;;;;;;;;;;GAgBG;AAEH,eAAO,MAAM,UAAU,GAAI,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD;;;;;;;;;;;;;;;;GAgBG;AAEH,eAAO,MAAM,UAAU,GAAI,wHASxB,qBAAqB,sBA+kBvB,CAAC;AAEF,YAAY,EAAE,qBAAqB,EAAE,CAAC"}
|
package/dist/cjs/index.js
CHANGED
|
@@ -36,13 +36,24 @@ const react_input_mask_1 = require("react-input-mask");
|
|
|
36
36
|
* enterprise-level applications.
|
|
37
37
|
*/
|
|
38
38
|
const DatePicker = (_a) => {
|
|
39
|
-
var { pickerType = 'date', suffixIconColor = 'var(--color-gray-500)', suffixIcon = 'chevron_down', suffixIconSize = '10px', showTitle = false, inputTitle = '' } = _a, restDatePickerProps = __rest(_a, ["pickerType", "suffixIconColor", "suffixIcon", "suffixIconSize", "showTitle", "inputTitle"]);
|
|
39
|
+
var { pickerType = 'date', suffixIconColor = 'var(--color-gray-500)', suffixIcon = 'chevron_down', suffixIconSize = '10px', showTitle = false, inputTitle = '', inputWidth } = _a, restDatePickerProps = __rest(_a, ["pickerType", "suffixIconColor", "suffixIcon", "suffixIconSize", "showTitle", "inputTitle", "inputWidth"]);
|
|
40
40
|
const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
|
|
41
41
|
const { token, hashId } = (0, ui_theme_1.useToken)();
|
|
42
42
|
const datePickerToken = token.DatePicker;
|
|
43
|
-
const
|
|
43
|
+
const rootPrefix = getPrefixCls();
|
|
44
|
+
const prefixWithoutHash = `${rootPrefix}-picker`;
|
|
44
45
|
const prefixClsWithoutHash = `.${prefixWithoutHash}`;
|
|
45
|
-
const
|
|
46
|
+
const blockWithoutHash = `${rootPrefix}-date-picker`;
|
|
47
|
+
const blockClsWithoutHash = `.${blockWithoutHash}`;
|
|
48
|
+
const rangeBlockClsWithoutHash = `${blockClsWithoutHash}-range`;
|
|
49
|
+
const inputWidthVar = `--${blockWithoutHash}-input-width`;
|
|
50
|
+
const rangeShownClsWithoutHash = `${blockWithoutHash}-range-shown`;
|
|
51
|
+
// antd styles these through the column, so match its selector depth
|
|
52
|
+
const timeCellCls = `${prefixClsWithoutHash}-time-panel ${prefixClsWithoutHash}-time-panel-column > li${prefixClsWithoutHash}-time-panel-cell ${prefixClsWithoutHash}-time-panel-cell-inner`;
|
|
53
|
+
const selectedTimeCellCls = `${prefixClsWithoutHash}-time-panel ${prefixClsWithoutHash}-time-panel-column > li${prefixClsWithoutHash}-time-panel-cell-selected ${prefixClsWithoutHash}-time-panel-cell-inner`;
|
|
54
|
+
const isRange = pickerType === 'range';
|
|
55
|
+
const [isSelectingRange, setIsSelectingRange] = React.useState(false);
|
|
56
|
+
const [hasRangeValue, setHasRangeValue] = React.useState(() => Boolean(restDatePickerProps.defaultValue));
|
|
46
57
|
const [startDate, setStartDate] = React.useState('');
|
|
47
58
|
const [startTime, setStartTime] = React.useState('');
|
|
48
59
|
const [endDate, setEndDate] = React.useState('');
|
|
@@ -55,27 +66,54 @@ const DatePicker = (_a) => {
|
|
|
55
66
|
}, () => {
|
|
56
67
|
const prefixCls = `:where(.${hashId})`;
|
|
57
68
|
const customTokens = (0, ui_theme_1.getSafeCustomTokens)(theme);
|
|
69
|
+
// antd sizes these vars from the shared control heights
|
|
70
|
+
const sizedPadding = (size) => `var(--${rootPrefix}-date-picker-padding-block${size}) var(--${rootPrefix}-date-picker-padding-inline${size})`;
|
|
71
|
+
// every panel the picker can switch to, so navigating between them keeps
|
|
72
|
+
// the same popup chrome
|
|
73
|
+
const panelContainers = [
|
|
74
|
+
'date',
|
|
75
|
+
'datetime',
|
|
76
|
+
'week',
|
|
77
|
+
'month',
|
|
78
|
+
'quarter',
|
|
79
|
+
'year',
|
|
80
|
+
'decade',
|
|
81
|
+
'time'
|
|
82
|
+
]
|
|
83
|
+
.map(panel => `${prefixClsWithoutHash}-${panel}-panel-container`)
|
|
84
|
+
.join(', ');
|
|
58
85
|
return {
|
|
59
86
|
[prefixCls]: {
|
|
60
|
-
[`&${prefixClsWithoutHash}`]: {
|
|
87
|
+
[`&${prefixClsWithoutHash}${blockClsWithoutHash}`]: {
|
|
61
88
|
width: customTokens.sizing.valueFull,
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
boxShadow: customTokens.layout.displayNone,
|
|
65
|
-
padding: customTokens.sizing.valueZero,
|
|
66
|
-
[`&:not(${prefixClsWithoutHash}-light)`]: {
|
|
67
|
-
background: datePickerToken.general.bgDarkBlue,
|
|
68
|
-
[`input`]: {
|
|
69
|
-
border: datePickerToken.general.wideBorder,
|
|
70
|
-
color: token.colorWhite
|
|
71
|
-
}
|
|
89
|
+
[`input`]: {
|
|
90
|
+
fontWeight: datePickerToken.fontWeight
|
|
72
91
|
},
|
|
73
92
|
[`&${prefixClsWithoutHash}-light`]: {
|
|
74
93
|
background: token.colorWhite,
|
|
75
94
|
border: datePickerToken.general.lightThemeBorder,
|
|
76
95
|
[`input`]: {
|
|
77
|
-
|
|
96
|
+
color: datePickerToken.title.lightColor
|
|
78
97
|
}
|
|
98
|
+
}
|
|
99
|
+
},
|
|
100
|
+
[`&${prefixClsWithoutHash}${rangeBlockClsWithoutHash}`]: {
|
|
101
|
+
background: customTokens.others.colorTransparent,
|
|
102
|
+
border: customTokens.border.borderNone,
|
|
103
|
+
boxShadow: customTokens.layout.displayNone,
|
|
104
|
+
padding: customTokens.sizing.valueZero,
|
|
105
|
+
[`${prefixClsWithoutHash}-input input`]: {
|
|
106
|
+
width: `var(${inputWidthVar}, ${customTokens.sizing.valueFull})`,
|
|
107
|
+
padding: sizedPadding(''),
|
|
108
|
+
background: datePickerToken.general.bgDarkBlue,
|
|
109
|
+
border: datePickerToken.general.wideBorder,
|
|
110
|
+
borderRadius: datePickerToken.pickerPanel.range.inputRadius
|
|
111
|
+
},
|
|
112
|
+
[`&${prefixClsWithoutHash}-large ${prefixClsWithoutHash}-input input`]: {
|
|
113
|
+
padding: sizedPadding('-lg')
|
|
114
|
+
},
|
|
115
|
+
[`&${prefixClsWithoutHash}-small ${prefixClsWithoutHash}-input input`]: {
|
|
116
|
+
padding: sizedPadding('-sm')
|
|
79
117
|
},
|
|
80
118
|
[`${prefixClsWithoutHash}-input > span`]: {
|
|
81
119
|
position: customTokens.layout.positionAbsolute,
|
|
@@ -86,40 +124,52 @@ const DatePicker = (_a) => {
|
|
|
86
124
|
pointerEvents: customTokens.layout.displayNone
|
|
87
125
|
}
|
|
88
126
|
},
|
|
89
|
-
[`${prefixClsWithoutHash}-
|
|
90
|
-
|
|
127
|
+
[`${prefixClsWithoutHash}-range-separator`]: {
|
|
128
|
+
content: customTokens.others.emptyContent,
|
|
129
|
+
width: datePickerToken.pickerPanel.separator.width,
|
|
130
|
+
height: datePickerToken.pickerPanel.separator.height,
|
|
131
|
+
background: datePickerToken.pickerPanel.separator.backgroundColor,
|
|
132
|
+
padding: customTokens.sizing.valueZero,
|
|
133
|
+
['svg']: {
|
|
134
|
+
display: customTokens.layout.displayNone
|
|
135
|
+
}
|
|
91
136
|
},
|
|
92
|
-
[`
|
|
93
|
-
|
|
94
|
-
padding: datePickerToken.general.inputPadding,
|
|
95
|
-
borderRadius: datePickerToken.pickerPanel.range.inputRadius,
|
|
96
|
-
width: `${restDatePickerProps.inputWidth} !important`,
|
|
97
|
-
outline: customTokens.layout.displayNone
|
|
137
|
+
[`${prefixClsWithoutHash}-suffix`]: {
|
|
138
|
+
display: customTokens.layout.displayNone
|
|
98
139
|
},
|
|
99
|
-
[
|
|
100
|
-
[`${prefixClsWithoutHash}-
|
|
101
|
-
|
|
102
|
-
width: datePickerToken.pickerPanel.separator.width,
|
|
103
|
-
height: datePickerToken.pickerPanel.separator.height,
|
|
104
|
-
background: datePickerToken.pickerPanel.separator.backgroundColor,
|
|
105
|
-
padding: customTokens.sizing.valueZero,
|
|
106
|
-
['svg']: {
|
|
107
|
-
display: customTokens.layout.displayNone
|
|
108
|
-
}
|
|
109
|
-
},
|
|
110
|
-
[`${prefixClsWithoutHash}-suffix`]: {
|
|
111
|
-
display: customTokens.layout.displayNone
|
|
140
|
+
[`&:hover:has(${prefixClsWithoutHash}-clear)`]: {
|
|
141
|
+
[`${prefixClsWithoutHash}-input ~ ${prefixClsWithoutHash}-input > span`]: {
|
|
142
|
+
opacity: customTokens.others.opacityNone
|
|
112
143
|
}
|
|
144
|
+
},
|
|
145
|
+
[`${prefixClsWithoutHash}-active-bar`]: {
|
|
146
|
+
display: customTokens.layout.displayNone
|
|
113
147
|
}
|
|
114
148
|
},
|
|
115
|
-
[`${prefixClsWithoutHash}-active-bar`]: {
|
|
116
|
-
display: customTokens.layout.displayNone
|
|
117
|
-
},
|
|
118
149
|
[`&${prefixClsWithoutHash}-dropdown`]: {
|
|
119
|
-
[
|
|
150
|
+
[panelContainers]: {
|
|
151
|
+
[`--${rootPrefix}-color-split`]: datePickerToken.pickerPanel.dividerColor,
|
|
152
|
+
[`--${rootPrefix}-line-width`]: customTokens.border.borderWidthThin,
|
|
120
153
|
background: datePickerToken.general.bgDarkBlue,
|
|
121
154
|
border: datePickerToken.general.wideBorder,
|
|
122
|
-
boxShadow: datePickerToken.pickerPanel.shadow
|
|
155
|
+
boxShadow: datePickerToken.pickerPanel.shadow
|
|
156
|
+
},
|
|
157
|
+
[`${prefixClsWithoutHash}-datetime-panel-container`]: {
|
|
158
|
+
[`${timeCellCls}`]: {
|
|
159
|
+
fontSize: datePickerToken.general.fontSize,
|
|
160
|
+
fontWeight: datePickerToken.pickerPanel.row.cellFontWeight,
|
|
161
|
+
color: datePickerToken.pickerPanel.row.cellTextColor,
|
|
162
|
+
paddingInline: customTokens.sizing.valueZero,
|
|
163
|
+
textAlign: customTokens.typography.textAlignCenter
|
|
164
|
+
},
|
|
165
|
+
[`${selectedTimeCellCls}`]: {
|
|
166
|
+
background: datePickerToken.pickerPanel.row.cellBg,
|
|
167
|
+
border: datePickerToken.pickerPanel.row.cellBorder,
|
|
168
|
+
borderRadius: datePickerToken.pickerPanel.row.cellBorderRadius
|
|
169
|
+
}
|
|
170
|
+
},
|
|
171
|
+
[`${prefixClsWithoutHash}-date-panel-container,
|
|
172
|
+
${prefixClsWithoutHash}-datetime-panel-container`]: {
|
|
123
173
|
[`${prefixClsWithoutHash}-date-panel`]: {
|
|
124
174
|
width: 'fit-content'
|
|
125
175
|
},
|
|
@@ -139,21 +189,23 @@ const DatePicker = (_a) => {
|
|
|
139
189
|
['button']: {
|
|
140
190
|
lineHeight: customTokens.others.lineHeightShort
|
|
141
191
|
},
|
|
142
|
-
['&-prev-btn, &-next-btn']: {
|
|
192
|
+
['&-prev-btn, &-next-btn, &-super-prev-btn, &-super-next-btn']: {
|
|
143
193
|
minWidth: datePickerToken.pickerPanel.header.arrawWidth,
|
|
144
194
|
width: datePickerToken.pickerPanel.header.arrawWidth
|
|
145
195
|
},
|
|
146
|
-
['&-prev-btn']: {
|
|
147
|
-
|
|
196
|
+
['&-super-prev-btn']: {
|
|
197
|
+
marginInlineEnd: datePickerToken.pickerPanel.header.arrowGap
|
|
148
198
|
},
|
|
149
|
-
['&-next-btn']: {
|
|
150
|
-
|
|
151
|
-
},
|
|
152
|
-
['&-super-prev-btn, &-super-next-btn']: {
|
|
153
|
-
minWidth: datePickerToken.pickerPanel.header.arrawWidth,
|
|
154
|
-
width: datePickerToken.pickerPanel.header.arrawWidth
|
|
199
|
+
['&-super-next-btn']: {
|
|
200
|
+
marginInlineStart: datePickerToken.pickerPanel.header.arrowGap
|
|
155
201
|
}
|
|
156
202
|
},
|
|
203
|
+
[`${prefixClsWithoutHash}-prev-icon,
|
|
204
|
+
${prefixClsWithoutHash}-next-icon,
|
|
205
|
+
${prefixClsWithoutHash}-super-prev-icon,
|
|
206
|
+
${prefixClsWithoutHash}-super-next-icon`]: {
|
|
207
|
+
display: customTokens.layout.displayInlineBlock
|
|
208
|
+
},
|
|
157
209
|
[`${prefixClsWithoutHash}-body`]: {
|
|
158
210
|
padding: datePickerToken.pickerPanel.body.padding
|
|
159
211
|
},
|
|
@@ -192,10 +244,11 @@ const DatePicker = (_a) => {
|
|
|
192
244
|
minWidth: datePickerToken.pickerPanel.content.tableHeaderWidth,
|
|
193
245
|
marginBottom: datePickerToken.pickerPanel.row.marginY
|
|
194
246
|
},
|
|
195
|
-
[`${prefixClsWithoutHash}-cell-today`]: {
|
|
247
|
+
[`${prefixClsWithoutHash}-cell-today:not(${prefixClsWithoutHash}-cell-in-range):not(${prefixClsWithoutHash}-cell-range-start):not(${prefixClsWithoutHash}-cell-range-end)`]: {
|
|
196
248
|
[`${prefixClsWithoutHash}-cell-inner`]: {
|
|
197
249
|
background: datePickerToken.pickerPanel.row.cellBg,
|
|
198
|
-
|
|
250
|
+
outline: datePickerToken.pickerPanel.row.cellBorder,
|
|
251
|
+
outlineOffset: `-${customTokens.border.borderWidthThick}`,
|
|
199
252
|
borderRadius: datePickerToken.pickerPanel.row.cellBorderRadius
|
|
200
253
|
}
|
|
201
254
|
},
|
|
@@ -248,21 +301,22 @@ const DatePicker = (_a) => {
|
|
|
248
301
|
${prefixClsWithoutHash}-cell-in-range`]: {
|
|
249
302
|
padding: customTokens.sizing.valueZero,
|
|
250
303
|
minWidth: datePickerToken.pickerPanel.content.tableHeaderWidth,
|
|
251
|
-
marginBottom: datePickerToken.pickerPanel.row.marginY
|
|
304
|
+
marginBottom: datePickerToken.pickerPanel.row.marginY,
|
|
305
|
+
// drop the line box around the cell so the range band can
|
|
306
|
+
// match the cell height exactly
|
|
307
|
+
lineHeight: customTokens.sizing.valueZero
|
|
252
308
|
},
|
|
253
|
-
[`${prefixClsWithoutHash}-cell-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
309
|
+
[`${prefixClsWithoutHash}-cell-inner`]: {
|
|
310
|
+
// the band paints instantly, so drop the fade on the cell or
|
|
311
|
+
// a hovered day fills in two steps
|
|
312
|
+
transition: customTokens.others.valueUnset
|
|
257
313
|
},
|
|
258
|
-
[`${prefixClsWithoutHash}-cell-
|
|
259
|
-
${prefixClsWithoutHash}-cell-range-start,
|
|
260
|
-
${prefixClsWithoutHash}-cell-range-end`]: {
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
borderRadius: datePickerToken.pickerPanel.row.cellBorderRadius
|
|
265
|
-
}
|
|
314
|
+
[`${prefixClsWithoutHash}-cell-in-range:not(${prefixClsWithoutHash}-cell-disabled)::before,
|
|
315
|
+
${prefixClsWithoutHash}-cell-range-start:not(${prefixClsWithoutHash}-cell-disabled)::before,
|
|
316
|
+
${prefixClsWithoutHash}-cell-range-end:not(${prefixClsWithoutHash}-cell-disabled)::before`]: {
|
|
317
|
+
// match the cell box so the band and the rounded ends line up
|
|
318
|
+
height: customTokens.sizing.valueFull,
|
|
319
|
+
background: token.colorPrimary
|
|
266
320
|
}
|
|
267
321
|
},
|
|
268
322
|
[`${prefixClsWithoutHash}-footer`]: {
|
|
@@ -271,6 +325,20 @@ const DatePicker = (_a) => {
|
|
|
271
325
|
}
|
|
272
326
|
}
|
|
273
327
|
},
|
|
328
|
+
// Until a start date is picked, rc-picker marks the cell under the
|
|
329
|
+
// cursor as both ends of the range. Keep that one on the plain hover
|
|
330
|
+
// background instead of painting it as a selection.
|
|
331
|
+
[`&${prefixClsWithoutHash}-dropdown-range:not(.${rangeShownClsWithoutHash})`]: {
|
|
332
|
+
[`${prefixClsWithoutHash}-date-panel-container ${prefixClsWithoutHash}-content ${prefixClsWithoutHash}-cell-range-start${prefixClsWithoutHash}-cell-range-end`]: {
|
|
333
|
+
['&::before']: {
|
|
334
|
+
background: customTokens.others.colorTransparent
|
|
335
|
+
},
|
|
336
|
+
[`${prefixClsWithoutHash}-cell-inner`]: {
|
|
337
|
+
background: token.controlItemBgHover,
|
|
338
|
+
color: datePickerToken.pickerPanel.row.cellTextColor
|
|
339
|
+
}
|
|
340
|
+
}
|
|
341
|
+
},
|
|
274
342
|
[`&${prefixClsWithoutHash}-input-title`]: {
|
|
275
343
|
display: customTokens.layout.displayBlock,
|
|
276
344
|
fontWeight: customTokens.typography.fontWeightBold,
|
|
@@ -300,7 +368,7 @@ const DatePicker = (_a) => {
|
|
|
300
368
|
border: datePickerToken.general.wideBorder,
|
|
301
369
|
backgroundColor: datePickerToken.general.bgDarkBlue,
|
|
302
370
|
textAlign: customTokens.typography.textAlignCenter,
|
|
303
|
-
|
|
371
|
+
boxSizing: 'content-box',
|
|
304
372
|
padding: datePickerToken.pickerPanel.footer.rangeInputPadding,
|
|
305
373
|
borderRadius: datePickerToken.pickerPanel.footer.rangeInputRadius,
|
|
306
374
|
fontWeight: customTokens.typography.fontWeightBold,
|
|
@@ -309,6 +377,12 @@ const DatePicker = (_a) => {
|
|
|
309
377
|
['&::placeholder']: {
|
|
310
378
|
color: datePickerToken.general.fontColor
|
|
311
379
|
}
|
|
380
|
+
},
|
|
381
|
+
['input:first-of-type']: {
|
|
382
|
+
width: '10ch'
|
|
383
|
+
},
|
|
384
|
+
['input:last-of-type']: {
|
|
385
|
+
width: '8ch'
|
|
312
386
|
}
|
|
313
387
|
}
|
|
314
388
|
};
|
|
@@ -316,7 +390,33 @@ const DatePicker = (_a) => {
|
|
|
316
390
|
const customPopupStyle = restDatePickerProps.placement === 'center'
|
|
317
391
|
? { left: '50%', transform: 'translateX(-50%)' }
|
|
318
392
|
: {};
|
|
319
|
-
const
|
|
393
|
+
const themeClassName = `${prefixWithoutHash}-${restDatePickerProps.theme}`;
|
|
394
|
+
const controlledRangeValue = restDatePickerProps
|
|
395
|
+
.value;
|
|
396
|
+
// the plain hover background only applies while the panel shows no range at
|
|
397
|
+
// all; once one is picked (or already set) every cell it covers stays blue
|
|
398
|
+
const showsRange = isSelectingRange ||
|
|
399
|
+
(controlledRangeValue
|
|
400
|
+
? Boolean(controlledRangeValue[0] && controlledRangeValue[1])
|
|
401
|
+
: hasRangeValue);
|
|
402
|
+
const rootClassName = isRange
|
|
403
|
+
? `${blockWithoutHash} ${blockWithoutHash}-range`
|
|
404
|
+
: `${blockWithoutHash} ${themeClassName}`;
|
|
405
|
+
const handleCalendarChange = (dates, dateStrings, info) => {
|
|
406
|
+
var _a, _b;
|
|
407
|
+
const [start, end] = dates !== null && dates !== void 0 ? dates : [null, null];
|
|
408
|
+
setIsSelectingRange(Boolean(start) !== Boolean(end));
|
|
409
|
+
(_b = (_a = restDatePickerProps).onCalendarChange) === null || _b === void 0 ? void 0 : _b.call(_a, dates, dateStrings, info);
|
|
410
|
+
};
|
|
411
|
+
const handleOpenChange = (open) => {
|
|
412
|
+
var _a, _b;
|
|
413
|
+
if (!open) {
|
|
414
|
+
setIsSelectingRange(false);
|
|
415
|
+
}
|
|
416
|
+
(_b = (_a = restDatePickerProps).onOpenChange) === null || _b === void 0 ? void 0 : _b.call(_a, open);
|
|
417
|
+
};
|
|
418
|
+
const handleDateChange = (dates, dateStrings) => {
|
|
419
|
+
var _a, _b;
|
|
320
420
|
const updateDateTime = (date, setDate, setTime) => {
|
|
321
421
|
if (date) {
|
|
322
422
|
setDate(date.format('MM/DD/YYYY'));
|
|
@@ -327,10 +427,12 @@ const DatePicker = (_a) => {
|
|
|
327
427
|
setTime('');
|
|
328
428
|
}
|
|
329
429
|
};
|
|
430
|
+
setHasRangeValue(Boolean((dates === null || dates === void 0 ? void 0 : dates[0]) && (dates === null || dates === void 0 ? void 0 : dates[1])));
|
|
330
431
|
if (dates) {
|
|
331
432
|
updateDateTime(dates[0], setStartDate, setStartTime);
|
|
332
433
|
updateDateTime(dates[1], setEndDate, setEndTime);
|
|
333
434
|
}
|
|
435
|
+
(_b = (_a = restDatePickerProps).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, dates, dateStrings);
|
|
334
436
|
};
|
|
335
437
|
const renderFooter = (panelType) => {
|
|
336
438
|
const renderInputMask = (mask, value, onChange, placeholder) => (React.createElement(react_input_mask_1.default, { mask: mask, value: value, onChange: onChange, placeholder: placeholder }));
|
|
@@ -346,20 +448,29 @@ const DatePicker = (_a) => {
|
|
|
346
448
|
? e => setStartTime(e.target.value)
|
|
347
449
|
: e => setEndTime(e.target.value), isStartPanel ? '00:00:00' : 'End Time')));
|
|
348
450
|
};
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
451
|
+
// A new component type on every render would make React remount the inputs
|
|
452
|
+
// and drop the focus rc-picker moves between them.
|
|
453
|
+
const RangePickerCustomInput = React.useMemo(() => {
|
|
454
|
+
const CustomInput = React.forwardRef((props, ref) => {
|
|
455
|
+
const _a = props, { value, onChange, placeholder } = _a, restProps = __rest(_a, ["value", "onChange", "placeholder"]);
|
|
456
|
+
return (React.createElement(React.Fragment, null,
|
|
457
|
+
React.createElement("input", Object.assign({}, restProps, { ref: ref, value: value, onChange: onChange, placeholder: placeholder })),
|
|
458
|
+
React.createElement("span", null,
|
|
459
|
+
React.createElement(icons_1.Icon, { icon: suffixIcon, size: suffixIconSize, style: { color: suffixIconColor } }))));
|
|
460
|
+
});
|
|
461
|
+
CustomInput.displayName = 'RangePickerCustomInput';
|
|
462
|
+
return CustomInput;
|
|
463
|
+
}, [suffixIcon, suffixIconSize, suffixIconColor]);
|
|
464
|
+
return useStyle(isRange ? (React.createElement(antd_1.DatePicker.RangePicker, Object.assign({}, restDatePickerProps, { className: rootClassName, style: { [inputWidthVar]: inputWidth }, styles: { popup: { root: customPopupStyle } }, classNames: {
|
|
465
|
+
popup: {
|
|
466
|
+
root: showsRange ? rangeShownClsWithoutHash : ''
|
|
467
|
+
}
|
|
468
|
+
}, onCalendarChange: handleCalendarChange, onOpenChange: handleOpenChange, onChange: handleDateChange, renderExtraFooter: () => (React.createElement("div", { className: "range-footer" },
|
|
358
469
|
renderFooter('start'),
|
|
359
470
|
renderFooter('end'))), components: {
|
|
360
471
|
input: RangePickerCustomInput
|
|
361
472
|
}, variant: "borderless" }))) : (React.createElement("div", null,
|
|
362
473
|
showTitle && (React.createElement(antd_1.Typography.Text, { className: `${prefixWithoutHash}-input-title ${themeClassName}` }, inputTitle)),
|
|
363
|
-
React.createElement(antd_1.DatePicker, Object.assign({ className:
|
|
474
|
+
React.createElement(antd_1.DatePicker, Object.assign({ className: rootClassName, style: { width: inputWidth }, suffixIcon: React.createElement(icons_1.Icon, { icon: suffixIcon, size: suffixIconSize, style: { color: suffixIconColor } }) }, restDatePickerProps)))));
|
|
364
475
|
};
|
|
365
476
|
exports.DatePicker = DatePicker;
|
package/dist/cjs/types.d.ts
CHANGED
|
@@ -183,7 +183,8 @@ export interface IDatePickerGroupProps
|
|
|
183
183
|
prevIcon?: ReactNode;
|
|
184
184
|
|
|
185
185
|
/**
|
|
186
|
-
* To determine the size of the
|
|
186
|
+
* To determine the size of the picker. Heights match the Input sizes: 40px
|
|
187
|
+
* for large and 26px for small, while the default middle size is 32px.
|
|
187
188
|
*/
|
|
188
189
|
size?: 'large' | 'middle' | 'small';
|
|
189
190
|
|
|
@@ -229,7 +230,8 @@ export interface IDatePickerGroupProps
|
|
|
229
230
|
showTitle?: boolean;
|
|
230
231
|
|
|
231
232
|
/**
|
|
232
|
-
* The width of the
|
|
233
|
+
* The width of the picker. On a `range` picker it sets the width of each
|
|
234
|
+
* input instead.
|
|
233
235
|
*/
|
|
234
236
|
inputWidth?: string;
|
|
235
237
|
|
package/dist/esm/index.d.ts
CHANGED
|
@@ -17,6 +17,6 @@ import type { IDatePickerGroupProps } from './types';
|
|
|
17
17
|
* The DatePicker component is designed to cater to both basic and advanced use cases, making it ideal for
|
|
18
18
|
* enterprise-level applications.
|
|
19
19
|
*/
|
|
20
|
-
export declare const DatePicker: ({ pickerType, suffixIconColor, suffixIcon, suffixIconSize, showTitle, inputTitle, ...restDatePickerProps }: IDatePickerGroupProps) => React.JSX.Element;
|
|
20
|
+
export declare const DatePicker: ({ pickerType, suffixIconColor, suffixIcon, suffixIconSize, showTitle, inputTitle, inputWidth, ...restDatePickerProps }: IDatePickerGroupProps) => React.JSX.Element;
|
|
21
21
|
export type { IDatePickerGroupProps };
|
|
22
22
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/esm/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD;;;;;;;;;;;;;;;;GAgBG;AAEH,eAAO,MAAM,UAAU,GAAI,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD;;;;;;;;;;;;;;;;GAgBG;AAEH,eAAO,MAAM,UAAU,GAAI,wHASxB,qBAAqB,sBA+kBvB,CAAC;AAEF,YAAY,EAAE,qBAAqB,EAAE,CAAC"}
|
package/dist/esm/index.js
CHANGED
|
@@ -33,13 +33,24 @@ import InputMask from 'react-input-mask';
|
|
|
33
33
|
* enterprise-level applications.
|
|
34
34
|
*/
|
|
35
35
|
export const DatePicker = (_a) => {
|
|
36
|
-
var { pickerType = 'date', suffixIconColor = 'var(--color-gray-500)', suffixIcon = 'chevron_down', suffixIconSize = '10px', showTitle = false, inputTitle = '' } = _a, restDatePickerProps = __rest(_a, ["pickerType", "suffixIconColor", "suffixIcon", "suffixIconSize", "showTitle", "inputTitle"]);
|
|
36
|
+
var { pickerType = 'date', suffixIconColor = 'var(--color-gray-500)', suffixIcon = 'chevron_down', suffixIconSize = '10px', showTitle = false, inputTitle = '', inputWidth } = _a, restDatePickerProps = __rest(_a, ["pickerType", "suffixIconColor", "suffixIcon", "suffixIconSize", "showTitle", "inputTitle", "inputWidth"]);
|
|
37
37
|
const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
|
|
38
38
|
const { token, hashId } = useToken();
|
|
39
39
|
const datePickerToken = token.DatePicker;
|
|
40
|
-
const
|
|
40
|
+
const rootPrefix = getPrefixCls();
|
|
41
|
+
const prefixWithoutHash = `${rootPrefix}-picker`;
|
|
41
42
|
const prefixClsWithoutHash = `.${prefixWithoutHash}`;
|
|
42
|
-
const
|
|
43
|
+
const blockWithoutHash = `${rootPrefix}-date-picker`;
|
|
44
|
+
const blockClsWithoutHash = `.${blockWithoutHash}`;
|
|
45
|
+
const rangeBlockClsWithoutHash = `${blockClsWithoutHash}-range`;
|
|
46
|
+
const inputWidthVar = `--${blockWithoutHash}-input-width`;
|
|
47
|
+
const rangeShownClsWithoutHash = `${blockWithoutHash}-range-shown`;
|
|
48
|
+
// antd styles these through the column, so match its selector depth
|
|
49
|
+
const timeCellCls = `${prefixClsWithoutHash}-time-panel ${prefixClsWithoutHash}-time-panel-column > li${prefixClsWithoutHash}-time-panel-cell ${prefixClsWithoutHash}-time-panel-cell-inner`;
|
|
50
|
+
const selectedTimeCellCls = `${prefixClsWithoutHash}-time-panel ${prefixClsWithoutHash}-time-panel-column > li${prefixClsWithoutHash}-time-panel-cell-selected ${prefixClsWithoutHash}-time-panel-cell-inner`;
|
|
51
|
+
const isRange = pickerType === 'range';
|
|
52
|
+
const [isSelectingRange, setIsSelectingRange] = React.useState(false);
|
|
53
|
+
const [hasRangeValue, setHasRangeValue] = React.useState(() => Boolean(restDatePickerProps.defaultValue));
|
|
43
54
|
const [startDate, setStartDate] = React.useState('');
|
|
44
55
|
const [startTime, setStartTime] = React.useState('');
|
|
45
56
|
const [endDate, setEndDate] = React.useState('');
|
|
@@ -52,27 +63,54 @@ export const DatePicker = (_a) => {
|
|
|
52
63
|
}, () => {
|
|
53
64
|
const prefixCls = `:where(.${hashId})`;
|
|
54
65
|
const customTokens = getSafeCustomTokens(theme);
|
|
66
|
+
// antd sizes these vars from the shared control heights
|
|
67
|
+
const sizedPadding = (size) => `var(--${rootPrefix}-date-picker-padding-block${size}) var(--${rootPrefix}-date-picker-padding-inline${size})`;
|
|
68
|
+
// every panel the picker can switch to, so navigating between them keeps
|
|
69
|
+
// the same popup chrome
|
|
70
|
+
const panelContainers = [
|
|
71
|
+
'date',
|
|
72
|
+
'datetime',
|
|
73
|
+
'week',
|
|
74
|
+
'month',
|
|
75
|
+
'quarter',
|
|
76
|
+
'year',
|
|
77
|
+
'decade',
|
|
78
|
+
'time'
|
|
79
|
+
]
|
|
80
|
+
.map(panel => `${prefixClsWithoutHash}-${panel}-panel-container`)
|
|
81
|
+
.join(', ');
|
|
55
82
|
return {
|
|
56
83
|
[prefixCls]: {
|
|
57
|
-
[`&${prefixClsWithoutHash}`]: {
|
|
84
|
+
[`&${prefixClsWithoutHash}${blockClsWithoutHash}`]: {
|
|
58
85
|
width: customTokens.sizing.valueFull,
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
boxShadow: customTokens.layout.displayNone,
|
|
62
|
-
padding: customTokens.sizing.valueZero,
|
|
63
|
-
[`&:not(${prefixClsWithoutHash}-light)`]: {
|
|
64
|
-
background: datePickerToken.general.bgDarkBlue,
|
|
65
|
-
[`input`]: {
|
|
66
|
-
border: datePickerToken.general.wideBorder,
|
|
67
|
-
color: token.colorWhite
|
|
68
|
-
}
|
|
86
|
+
[`input`]: {
|
|
87
|
+
fontWeight: datePickerToken.fontWeight
|
|
69
88
|
},
|
|
70
89
|
[`&${prefixClsWithoutHash}-light`]: {
|
|
71
90
|
background: token.colorWhite,
|
|
72
91
|
border: datePickerToken.general.lightThemeBorder,
|
|
73
92
|
[`input`]: {
|
|
74
|
-
|
|
93
|
+
color: datePickerToken.title.lightColor
|
|
75
94
|
}
|
|
95
|
+
}
|
|
96
|
+
},
|
|
97
|
+
[`&${prefixClsWithoutHash}${rangeBlockClsWithoutHash}`]: {
|
|
98
|
+
background: customTokens.others.colorTransparent,
|
|
99
|
+
border: customTokens.border.borderNone,
|
|
100
|
+
boxShadow: customTokens.layout.displayNone,
|
|
101
|
+
padding: customTokens.sizing.valueZero,
|
|
102
|
+
[`${prefixClsWithoutHash}-input input`]: {
|
|
103
|
+
width: `var(${inputWidthVar}, ${customTokens.sizing.valueFull})`,
|
|
104
|
+
padding: sizedPadding(''),
|
|
105
|
+
background: datePickerToken.general.bgDarkBlue,
|
|
106
|
+
border: datePickerToken.general.wideBorder,
|
|
107
|
+
borderRadius: datePickerToken.pickerPanel.range.inputRadius
|
|
108
|
+
},
|
|
109
|
+
[`&${prefixClsWithoutHash}-large ${prefixClsWithoutHash}-input input`]: {
|
|
110
|
+
padding: sizedPadding('-lg')
|
|
111
|
+
},
|
|
112
|
+
[`&${prefixClsWithoutHash}-small ${prefixClsWithoutHash}-input input`]: {
|
|
113
|
+
padding: sizedPadding('-sm')
|
|
76
114
|
},
|
|
77
115
|
[`${prefixClsWithoutHash}-input > span`]: {
|
|
78
116
|
position: customTokens.layout.positionAbsolute,
|
|
@@ -83,40 +121,52 @@ export const DatePicker = (_a) => {
|
|
|
83
121
|
pointerEvents: customTokens.layout.displayNone
|
|
84
122
|
}
|
|
85
123
|
},
|
|
86
|
-
[`${prefixClsWithoutHash}-
|
|
87
|
-
|
|
124
|
+
[`${prefixClsWithoutHash}-range-separator`]: {
|
|
125
|
+
content: customTokens.others.emptyContent,
|
|
126
|
+
width: datePickerToken.pickerPanel.separator.width,
|
|
127
|
+
height: datePickerToken.pickerPanel.separator.height,
|
|
128
|
+
background: datePickerToken.pickerPanel.separator.backgroundColor,
|
|
129
|
+
padding: customTokens.sizing.valueZero,
|
|
130
|
+
['svg']: {
|
|
131
|
+
display: customTokens.layout.displayNone
|
|
132
|
+
}
|
|
88
133
|
},
|
|
89
|
-
[`
|
|
90
|
-
|
|
91
|
-
padding: datePickerToken.general.inputPadding,
|
|
92
|
-
borderRadius: datePickerToken.pickerPanel.range.inputRadius,
|
|
93
|
-
width: `${restDatePickerProps.inputWidth} !important`,
|
|
94
|
-
outline: customTokens.layout.displayNone
|
|
134
|
+
[`${prefixClsWithoutHash}-suffix`]: {
|
|
135
|
+
display: customTokens.layout.displayNone
|
|
95
136
|
},
|
|
96
|
-
[
|
|
97
|
-
[`${prefixClsWithoutHash}-
|
|
98
|
-
|
|
99
|
-
width: datePickerToken.pickerPanel.separator.width,
|
|
100
|
-
height: datePickerToken.pickerPanel.separator.height,
|
|
101
|
-
background: datePickerToken.pickerPanel.separator.backgroundColor,
|
|
102
|
-
padding: customTokens.sizing.valueZero,
|
|
103
|
-
['svg']: {
|
|
104
|
-
display: customTokens.layout.displayNone
|
|
105
|
-
}
|
|
106
|
-
},
|
|
107
|
-
[`${prefixClsWithoutHash}-suffix`]: {
|
|
108
|
-
display: customTokens.layout.displayNone
|
|
137
|
+
[`&:hover:has(${prefixClsWithoutHash}-clear)`]: {
|
|
138
|
+
[`${prefixClsWithoutHash}-input ~ ${prefixClsWithoutHash}-input > span`]: {
|
|
139
|
+
opacity: customTokens.others.opacityNone
|
|
109
140
|
}
|
|
141
|
+
},
|
|
142
|
+
[`${prefixClsWithoutHash}-active-bar`]: {
|
|
143
|
+
display: customTokens.layout.displayNone
|
|
110
144
|
}
|
|
111
145
|
},
|
|
112
|
-
[`${prefixClsWithoutHash}-active-bar`]: {
|
|
113
|
-
display: customTokens.layout.displayNone
|
|
114
|
-
},
|
|
115
146
|
[`&${prefixClsWithoutHash}-dropdown`]: {
|
|
116
|
-
[
|
|
147
|
+
[panelContainers]: {
|
|
148
|
+
[`--${rootPrefix}-color-split`]: datePickerToken.pickerPanel.dividerColor,
|
|
149
|
+
[`--${rootPrefix}-line-width`]: customTokens.border.borderWidthThin,
|
|
117
150
|
background: datePickerToken.general.bgDarkBlue,
|
|
118
151
|
border: datePickerToken.general.wideBorder,
|
|
119
|
-
boxShadow: datePickerToken.pickerPanel.shadow
|
|
152
|
+
boxShadow: datePickerToken.pickerPanel.shadow
|
|
153
|
+
},
|
|
154
|
+
[`${prefixClsWithoutHash}-datetime-panel-container`]: {
|
|
155
|
+
[`${timeCellCls}`]: {
|
|
156
|
+
fontSize: datePickerToken.general.fontSize,
|
|
157
|
+
fontWeight: datePickerToken.pickerPanel.row.cellFontWeight,
|
|
158
|
+
color: datePickerToken.pickerPanel.row.cellTextColor,
|
|
159
|
+
paddingInline: customTokens.sizing.valueZero,
|
|
160
|
+
textAlign: customTokens.typography.textAlignCenter
|
|
161
|
+
},
|
|
162
|
+
[`${selectedTimeCellCls}`]: {
|
|
163
|
+
background: datePickerToken.pickerPanel.row.cellBg,
|
|
164
|
+
border: datePickerToken.pickerPanel.row.cellBorder,
|
|
165
|
+
borderRadius: datePickerToken.pickerPanel.row.cellBorderRadius
|
|
166
|
+
}
|
|
167
|
+
},
|
|
168
|
+
[`${prefixClsWithoutHash}-date-panel-container,
|
|
169
|
+
${prefixClsWithoutHash}-datetime-panel-container`]: {
|
|
120
170
|
[`${prefixClsWithoutHash}-date-panel`]: {
|
|
121
171
|
width: 'fit-content'
|
|
122
172
|
},
|
|
@@ -136,21 +186,23 @@ export const DatePicker = (_a) => {
|
|
|
136
186
|
['button']: {
|
|
137
187
|
lineHeight: customTokens.others.lineHeightShort
|
|
138
188
|
},
|
|
139
|
-
['&-prev-btn, &-next-btn']: {
|
|
189
|
+
['&-prev-btn, &-next-btn, &-super-prev-btn, &-super-next-btn']: {
|
|
140
190
|
minWidth: datePickerToken.pickerPanel.header.arrawWidth,
|
|
141
191
|
width: datePickerToken.pickerPanel.header.arrawWidth
|
|
142
192
|
},
|
|
143
|
-
['&-prev-btn']: {
|
|
144
|
-
|
|
193
|
+
['&-super-prev-btn']: {
|
|
194
|
+
marginInlineEnd: datePickerToken.pickerPanel.header.arrowGap
|
|
145
195
|
},
|
|
146
|
-
['&-next-btn']: {
|
|
147
|
-
|
|
148
|
-
},
|
|
149
|
-
['&-super-prev-btn, &-super-next-btn']: {
|
|
150
|
-
minWidth: datePickerToken.pickerPanel.header.arrawWidth,
|
|
151
|
-
width: datePickerToken.pickerPanel.header.arrawWidth
|
|
196
|
+
['&-super-next-btn']: {
|
|
197
|
+
marginInlineStart: datePickerToken.pickerPanel.header.arrowGap
|
|
152
198
|
}
|
|
153
199
|
},
|
|
200
|
+
[`${prefixClsWithoutHash}-prev-icon,
|
|
201
|
+
${prefixClsWithoutHash}-next-icon,
|
|
202
|
+
${prefixClsWithoutHash}-super-prev-icon,
|
|
203
|
+
${prefixClsWithoutHash}-super-next-icon`]: {
|
|
204
|
+
display: customTokens.layout.displayInlineBlock
|
|
205
|
+
},
|
|
154
206
|
[`${prefixClsWithoutHash}-body`]: {
|
|
155
207
|
padding: datePickerToken.pickerPanel.body.padding
|
|
156
208
|
},
|
|
@@ -189,10 +241,11 @@ export const DatePicker = (_a) => {
|
|
|
189
241
|
minWidth: datePickerToken.pickerPanel.content.tableHeaderWidth,
|
|
190
242
|
marginBottom: datePickerToken.pickerPanel.row.marginY
|
|
191
243
|
},
|
|
192
|
-
[`${prefixClsWithoutHash}-cell-today`]: {
|
|
244
|
+
[`${prefixClsWithoutHash}-cell-today:not(${prefixClsWithoutHash}-cell-in-range):not(${prefixClsWithoutHash}-cell-range-start):not(${prefixClsWithoutHash}-cell-range-end)`]: {
|
|
193
245
|
[`${prefixClsWithoutHash}-cell-inner`]: {
|
|
194
246
|
background: datePickerToken.pickerPanel.row.cellBg,
|
|
195
|
-
|
|
247
|
+
outline: datePickerToken.pickerPanel.row.cellBorder,
|
|
248
|
+
outlineOffset: `-${customTokens.border.borderWidthThick}`,
|
|
196
249
|
borderRadius: datePickerToken.pickerPanel.row.cellBorderRadius
|
|
197
250
|
}
|
|
198
251
|
},
|
|
@@ -245,21 +298,22 @@ export const DatePicker = (_a) => {
|
|
|
245
298
|
${prefixClsWithoutHash}-cell-in-range`]: {
|
|
246
299
|
padding: customTokens.sizing.valueZero,
|
|
247
300
|
minWidth: datePickerToken.pickerPanel.content.tableHeaderWidth,
|
|
248
|
-
marginBottom: datePickerToken.pickerPanel.row.marginY
|
|
301
|
+
marginBottom: datePickerToken.pickerPanel.row.marginY,
|
|
302
|
+
// drop the line box around the cell so the range band can
|
|
303
|
+
// match the cell height exactly
|
|
304
|
+
lineHeight: customTokens.sizing.valueZero
|
|
249
305
|
},
|
|
250
|
-
[`${prefixClsWithoutHash}-cell-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
306
|
+
[`${prefixClsWithoutHash}-cell-inner`]: {
|
|
307
|
+
// the band paints instantly, so drop the fade on the cell or
|
|
308
|
+
// a hovered day fills in two steps
|
|
309
|
+
transition: customTokens.others.valueUnset
|
|
254
310
|
},
|
|
255
|
-
[`${prefixClsWithoutHash}-cell-
|
|
256
|
-
${prefixClsWithoutHash}-cell-range-start,
|
|
257
|
-
${prefixClsWithoutHash}-cell-range-end`]: {
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
borderRadius: datePickerToken.pickerPanel.row.cellBorderRadius
|
|
262
|
-
}
|
|
311
|
+
[`${prefixClsWithoutHash}-cell-in-range:not(${prefixClsWithoutHash}-cell-disabled)::before,
|
|
312
|
+
${prefixClsWithoutHash}-cell-range-start:not(${prefixClsWithoutHash}-cell-disabled)::before,
|
|
313
|
+
${prefixClsWithoutHash}-cell-range-end:not(${prefixClsWithoutHash}-cell-disabled)::before`]: {
|
|
314
|
+
// match the cell box so the band and the rounded ends line up
|
|
315
|
+
height: customTokens.sizing.valueFull,
|
|
316
|
+
background: token.colorPrimary
|
|
263
317
|
}
|
|
264
318
|
},
|
|
265
319
|
[`${prefixClsWithoutHash}-footer`]: {
|
|
@@ -268,6 +322,20 @@ export const DatePicker = (_a) => {
|
|
|
268
322
|
}
|
|
269
323
|
}
|
|
270
324
|
},
|
|
325
|
+
// Until a start date is picked, rc-picker marks the cell under the
|
|
326
|
+
// cursor as both ends of the range. Keep that one on the plain hover
|
|
327
|
+
// background instead of painting it as a selection.
|
|
328
|
+
[`&${prefixClsWithoutHash}-dropdown-range:not(.${rangeShownClsWithoutHash})`]: {
|
|
329
|
+
[`${prefixClsWithoutHash}-date-panel-container ${prefixClsWithoutHash}-content ${prefixClsWithoutHash}-cell-range-start${prefixClsWithoutHash}-cell-range-end`]: {
|
|
330
|
+
['&::before']: {
|
|
331
|
+
background: customTokens.others.colorTransparent
|
|
332
|
+
},
|
|
333
|
+
[`${prefixClsWithoutHash}-cell-inner`]: {
|
|
334
|
+
background: token.controlItemBgHover,
|
|
335
|
+
color: datePickerToken.pickerPanel.row.cellTextColor
|
|
336
|
+
}
|
|
337
|
+
}
|
|
338
|
+
},
|
|
271
339
|
[`&${prefixClsWithoutHash}-input-title`]: {
|
|
272
340
|
display: customTokens.layout.displayBlock,
|
|
273
341
|
fontWeight: customTokens.typography.fontWeightBold,
|
|
@@ -297,7 +365,7 @@ export const DatePicker = (_a) => {
|
|
|
297
365
|
border: datePickerToken.general.wideBorder,
|
|
298
366
|
backgroundColor: datePickerToken.general.bgDarkBlue,
|
|
299
367
|
textAlign: customTokens.typography.textAlignCenter,
|
|
300
|
-
|
|
368
|
+
boxSizing: 'content-box',
|
|
301
369
|
padding: datePickerToken.pickerPanel.footer.rangeInputPadding,
|
|
302
370
|
borderRadius: datePickerToken.pickerPanel.footer.rangeInputRadius,
|
|
303
371
|
fontWeight: customTokens.typography.fontWeightBold,
|
|
@@ -306,6 +374,12 @@ export const DatePicker = (_a) => {
|
|
|
306
374
|
['&::placeholder']: {
|
|
307
375
|
color: datePickerToken.general.fontColor
|
|
308
376
|
}
|
|
377
|
+
},
|
|
378
|
+
['input:first-of-type']: {
|
|
379
|
+
width: '10ch'
|
|
380
|
+
},
|
|
381
|
+
['input:last-of-type']: {
|
|
382
|
+
width: '8ch'
|
|
309
383
|
}
|
|
310
384
|
}
|
|
311
385
|
};
|
|
@@ -313,7 +387,33 @@ export const DatePicker = (_a) => {
|
|
|
313
387
|
const customPopupStyle = restDatePickerProps.placement === 'center'
|
|
314
388
|
? { left: '50%', transform: 'translateX(-50%)' }
|
|
315
389
|
: {};
|
|
316
|
-
const
|
|
390
|
+
const themeClassName = `${prefixWithoutHash}-${restDatePickerProps.theme}`;
|
|
391
|
+
const controlledRangeValue = restDatePickerProps
|
|
392
|
+
.value;
|
|
393
|
+
// the plain hover background only applies while the panel shows no range at
|
|
394
|
+
// all; once one is picked (or already set) every cell it covers stays blue
|
|
395
|
+
const showsRange = isSelectingRange ||
|
|
396
|
+
(controlledRangeValue
|
|
397
|
+
? Boolean(controlledRangeValue[0] && controlledRangeValue[1])
|
|
398
|
+
: hasRangeValue);
|
|
399
|
+
const rootClassName = isRange
|
|
400
|
+
? `${blockWithoutHash} ${blockWithoutHash}-range`
|
|
401
|
+
: `${blockWithoutHash} ${themeClassName}`;
|
|
402
|
+
const handleCalendarChange = (dates, dateStrings, info) => {
|
|
403
|
+
var _a, _b;
|
|
404
|
+
const [start, end] = dates !== null && dates !== void 0 ? dates : [null, null];
|
|
405
|
+
setIsSelectingRange(Boolean(start) !== Boolean(end));
|
|
406
|
+
(_b = (_a = restDatePickerProps).onCalendarChange) === null || _b === void 0 ? void 0 : _b.call(_a, dates, dateStrings, info);
|
|
407
|
+
};
|
|
408
|
+
const handleOpenChange = (open) => {
|
|
409
|
+
var _a, _b;
|
|
410
|
+
if (!open) {
|
|
411
|
+
setIsSelectingRange(false);
|
|
412
|
+
}
|
|
413
|
+
(_b = (_a = restDatePickerProps).onOpenChange) === null || _b === void 0 ? void 0 : _b.call(_a, open);
|
|
414
|
+
};
|
|
415
|
+
const handleDateChange = (dates, dateStrings) => {
|
|
416
|
+
var _a, _b;
|
|
317
417
|
const updateDateTime = (date, setDate, setTime) => {
|
|
318
418
|
if (date) {
|
|
319
419
|
setDate(date.format('MM/DD/YYYY'));
|
|
@@ -324,10 +424,12 @@ export const DatePicker = (_a) => {
|
|
|
324
424
|
setTime('');
|
|
325
425
|
}
|
|
326
426
|
};
|
|
427
|
+
setHasRangeValue(Boolean((dates === null || dates === void 0 ? void 0 : dates[0]) && (dates === null || dates === void 0 ? void 0 : dates[1])));
|
|
327
428
|
if (dates) {
|
|
328
429
|
updateDateTime(dates[0], setStartDate, setStartTime);
|
|
329
430
|
updateDateTime(dates[1], setEndDate, setEndTime);
|
|
330
431
|
}
|
|
432
|
+
(_b = (_a = restDatePickerProps).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, dates, dateStrings);
|
|
331
433
|
};
|
|
332
434
|
const renderFooter = (panelType) => {
|
|
333
435
|
const renderInputMask = (mask, value, onChange, placeholder) => (React.createElement(InputMask, { mask: mask, value: value, onChange: onChange, placeholder: placeholder }));
|
|
@@ -343,19 +445,28 @@ export const DatePicker = (_a) => {
|
|
|
343
445
|
? e => setStartTime(e.target.value)
|
|
344
446
|
: e => setEndTime(e.target.value), isStartPanel ? '00:00:00' : 'End Time')));
|
|
345
447
|
};
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
448
|
+
// A new component type on every render would make React remount the inputs
|
|
449
|
+
// and drop the focus rc-picker moves between them.
|
|
450
|
+
const RangePickerCustomInput = React.useMemo(() => {
|
|
451
|
+
const CustomInput = React.forwardRef((props, ref) => {
|
|
452
|
+
const _a = props, { value, onChange, placeholder } = _a, restProps = __rest(_a, ["value", "onChange", "placeholder"]);
|
|
453
|
+
return (React.createElement(React.Fragment, null,
|
|
454
|
+
React.createElement("input", Object.assign({}, restProps, { ref: ref, value: value, onChange: onChange, placeholder: placeholder })),
|
|
455
|
+
React.createElement("span", null,
|
|
456
|
+
React.createElement(Icon, { icon: suffixIcon, size: suffixIconSize, style: { color: suffixIconColor } }))));
|
|
457
|
+
});
|
|
458
|
+
CustomInput.displayName = 'RangePickerCustomInput';
|
|
459
|
+
return CustomInput;
|
|
460
|
+
}, [suffixIcon, suffixIconSize, suffixIconColor]);
|
|
461
|
+
return useStyle(isRange ? (React.createElement(AntDatePicker.RangePicker, Object.assign({}, restDatePickerProps, { className: rootClassName, style: { [inputWidthVar]: inputWidth }, styles: { popup: { root: customPopupStyle } }, classNames: {
|
|
462
|
+
popup: {
|
|
463
|
+
root: showsRange ? rangeShownClsWithoutHash : ''
|
|
464
|
+
}
|
|
465
|
+
}, onCalendarChange: handleCalendarChange, onOpenChange: handleOpenChange, onChange: handleDateChange, renderExtraFooter: () => (React.createElement("div", { className: "range-footer" },
|
|
355
466
|
renderFooter('start'),
|
|
356
467
|
renderFooter('end'))), components: {
|
|
357
468
|
input: RangePickerCustomInput
|
|
358
469
|
}, variant: "borderless" }))) : (React.createElement("div", null,
|
|
359
470
|
showTitle && (React.createElement(Typography.Text, { className: `${prefixWithoutHash}-input-title ${themeClassName}` }, inputTitle)),
|
|
360
|
-
React.createElement(AntDatePicker, Object.assign({ className:
|
|
471
|
+
React.createElement(AntDatePicker, Object.assign({ className: rootClassName, style: { width: inputWidth }, suffixIcon: React.createElement(Icon, { icon: suffixIcon, size: suffixIconSize, style: { color: suffixIconColor } }) }, restDatePickerProps)))));
|
|
361
472
|
};
|
package/dist/esm/types.d.ts
CHANGED
|
@@ -183,7 +183,8 @@ export interface IDatePickerGroupProps
|
|
|
183
183
|
prevIcon?: ReactNode;
|
|
184
184
|
|
|
185
185
|
/**
|
|
186
|
-
* To determine the size of the
|
|
186
|
+
* To determine the size of the picker. Heights match the Input sizes: 40px
|
|
187
|
+
* for large and 26px for small, while the default middle size is 32px.
|
|
187
188
|
*/
|
|
188
189
|
size?: 'large' | 'middle' | 'small';
|
|
189
190
|
|
|
@@ -229,7 +230,8 @@ export interface IDatePickerGroupProps
|
|
|
229
230
|
showTitle?: boolean;
|
|
230
231
|
|
|
231
232
|
/**
|
|
232
|
-
* The width of the
|
|
233
|
+
* The width of the picker. On a `range` picker it sets the width of each
|
|
234
|
+
* input instead.
|
|
233
235
|
*/
|
|
234
236
|
inputWidth?: string;
|
|
235
237
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@akinon/ui-date-picker",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.7",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/esm/index.js",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"dayjs": "^1.11.13",
|
|
15
15
|
"react-input-mask": "^2.0.4",
|
|
16
16
|
"@akinon/icons": "1.5.0",
|
|
17
|
-
"@akinon/ui-theme": "1.3.
|
|
17
|
+
"@akinon/ui-theme": "1.3.3"
|
|
18
18
|
},
|
|
19
19
|
"devDependencies": {
|
|
20
20
|
"@types/react-input-mask": "^3.0.6",
|