@akinon/ui-date-picker 0.5.0 → 1.0.1
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 +20 -3
- package/dist/cjs/index.d.ts.map +1 -1
- package/dist/cjs/index.js +344 -2
- package/dist/cjs/types.d.ts +522 -0
- package/dist/esm/index.d.ts +20 -3
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +345 -3
- package/dist/esm/types.d.ts +522 -0
- package/package.json +8 -4
package/dist/cjs/index.d.ts
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
|
-
import type { DatePickerProps as AntDatePickerProps } from 'antd';
|
|
2
1
|
import * as React from 'react';
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
import { IDatePickerGroupProps } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* DatePicker component for Akinon UI.
|
|
5
|
+
*
|
|
6
|
+
* The DatePicker component provides a flexible and feature-rich solution for selecting dates, ranges, and times.
|
|
7
|
+
* It supports various configurations, including custom formats, localized options, and enhanced accessibility features.
|
|
8
|
+
* The component integrates seamlessly with the Akinon design system, offering a consistent user experience.
|
|
9
|
+
*
|
|
10
|
+
* Key Features:
|
|
11
|
+
* - Multiple picker types, including date, week, month, quarter, and year.
|
|
12
|
+
* - Customizable placeholder, size, and variant options for styling.
|
|
13
|
+
* - Flexible date and time range selection with validation support.
|
|
14
|
+
* - Event callbacks for value changes, focus, blur, and panel interactions.
|
|
15
|
+
* - Localization support for tailored user experiences.
|
|
16
|
+
*
|
|
17
|
+
* The DatePicker component is designed to cater to both basic and advanced use cases, making it ideal for
|
|
18
|
+
* enterprise-level applications.
|
|
19
|
+
*/
|
|
20
|
+
export declare const DatePicker: ({ pickerType, suffixIconColor, suffixIcon, suffixIconSize, showTitle, inputTitle, ...restDatePickerProps }: IDatePickerGroupProps) => React.JSX.Element;
|
|
21
|
+
export type { IDatePickerGroupProps };
|
|
5
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":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAEhD;;;;;;;;;;;;;;;;GAgBG;AAEH,eAAO,MAAM,UAAU,+GAQpB,qBAAqB,sBA4bvB,CAAC;AAEF,YAAY,EAAE,qBAAqB,EAAE,CAAC"}
|
package/dist/cjs/index.js
CHANGED
|
@@ -12,10 +12,352 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
12
12
|
};
|
|
13
13
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
14
|
exports.DatePicker = void 0;
|
|
15
|
+
const icons_1 = require("@akinon/icons");
|
|
16
|
+
const ui_theme_1 = require("@akinon/ui-theme");
|
|
17
|
+
const cssinjs_1 = require("@ant-design/cssinjs");
|
|
15
18
|
const antd_1 = require("antd");
|
|
16
19
|
const React = require("react");
|
|
20
|
+
const react_input_mask_1 = require("react-input-mask");
|
|
21
|
+
/**
|
|
22
|
+
* DatePicker component for Akinon UI.
|
|
23
|
+
*
|
|
24
|
+
* The DatePicker component provides a flexible and feature-rich solution for selecting dates, ranges, and times.
|
|
25
|
+
* It supports various configurations, including custom formats, localized options, and enhanced accessibility features.
|
|
26
|
+
* The component integrates seamlessly with the Akinon design system, offering a consistent user experience.
|
|
27
|
+
*
|
|
28
|
+
* Key Features:
|
|
29
|
+
* - Multiple picker types, including date, week, month, quarter, and year.
|
|
30
|
+
* - Customizable placeholder, size, and variant options for styling.
|
|
31
|
+
* - Flexible date and time range selection with validation support.
|
|
32
|
+
* - Event callbacks for value changes, focus, blur, and panel interactions.
|
|
33
|
+
* - Localization support for tailored user experiences.
|
|
34
|
+
*
|
|
35
|
+
* The DatePicker component is designed to cater to both basic and advanced use cases, making it ideal for
|
|
36
|
+
* enterprise-level applications.
|
|
37
|
+
*/
|
|
17
38
|
const DatePicker = (_a) => {
|
|
18
|
-
var restDatePickerProps = __rest(_a, []);
|
|
19
|
-
|
|
39
|
+
var { pickerType = 'date', suffixIconColor = '#788195', suffixIcon = 'chevron_down', suffixIconSize = '10px', showTitle = false, inputTitle = '' } = _a, restDatePickerProps = __rest(_a, ["pickerType", "suffixIconColor", "suffixIcon", "suffixIconSize", "showTitle", "inputTitle"]);
|
|
40
|
+
const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
|
|
41
|
+
const { token, hashId } = (0, ui_theme_1.useToken)();
|
|
42
|
+
const datePickerToken = token.DatePicker;
|
|
43
|
+
const prefixWithoutHash = `${getPrefixCls()}-picker`;
|
|
44
|
+
const prefixClsWithoutHash = `.${prefixWithoutHash}`;
|
|
45
|
+
const themeClassName = `${prefixWithoutHash}-${restDatePickerProps.theme}`;
|
|
46
|
+
const [startDate, setStartDate] = React.useState('');
|
|
47
|
+
const [startTime, setStartTime] = React.useState('');
|
|
48
|
+
const [endDate, setEndDate] = React.useState('');
|
|
49
|
+
const [endTime, setEndTime] = React.useState('');
|
|
50
|
+
const useStyle = (0, cssinjs_1.useStyleRegister)({
|
|
51
|
+
token: token,
|
|
52
|
+
path: ['DatePicker'],
|
|
53
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
54
|
+
theme: theme
|
|
55
|
+
}, () => {
|
|
56
|
+
const prefixCls = `:where(.${hashId})`;
|
|
57
|
+
const customTokens = theme.CustomTokens || {};
|
|
58
|
+
return {
|
|
59
|
+
[prefixCls]: {
|
|
60
|
+
[`&${prefixClsWithoutHash}`]: {
|
|
61
|
+
background: customTokens.others.colorTransparent,
|
|
62
|
+
border: customTokens.border.borderNone,
|
|
63
|
+
boxShadow: customTokens.layout.displayNone,
|
|
64
|
+
padding: customTokens.sizing.valueZero,
|
|
65
|
+
[`&:not(${prefixClsWithoutHash}-light)`]: {
|
|
66
|
+
background: datePickerToken.general.bgDarkBlue,
|
|
67
|
+
[`input`]: {
|
|
68
|
+
border: datePickerToken.general.wideBorder
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
[`&${prefixClsWithoutHash}-light`]: {
|
|
72
|
+
background: token.colorWhite,
|
|
73
|
+
border: datePickerToken.general.lightThemeBorder,
|
|
74
|
+
[`input`]: {
|
|
75
|
+
border: datePickerToken.general.lightThemeBorder
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
[`${prefixClsWithoutHash}-input > span`]: {
|
|
79
|
+
position: customTokens.layout.positionAbsolute,
|
|
80
|
+
right: datePickerToken.pickerPanel.range.iconPosition,
|
|
81
|
+
top: customTokens.sizing.valueHalf,
|
|
82
|
+
transform: datePickerToken.pickerPanel.range.iconTransform,
|
|
83
|
+
[`:not(${prefixClsWithoutHash}-clear)`]: {
|
|
84
|
+
pointerEvents: customTokens.layout.displayNone
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
[`${prefixClsWithoutHash}-input`]: {
|
|
88
|
+
color: datePickerToken.general.fontColor
|
|
89
|
+
},
|
|
90
|
+
[`input`]: {
|
|
91
|
+
fontWeight: customTokens.typography.fontWeightBold,
|
|
92
|
+
padding: datePickerToken.general.inputPadding,
|
|
93
|
+
borderRadius: datePickerToken.pickerPanel.range.inputRadius,
|
|
94
|
+
width: `${restDatePickerProps.inputWidth} !important`,
|
|
95
|
+
outline: customTokens.layout.displayNone
|
|
96
|
+
},
|
|
97
|
+
[`&${prefixClsWithoutHash}-range`]: {
|
|
98
|
+
[`${prefixClsWithoutHash}-range-separator`]: {
|
|
99
|
+
content: customTokens.others.emptyContent,
|
|
100
|
+
width: datePickerToken.pickerPanel.separator.width,
|
|
101
|
+
height: datePickerToken.pickerPanel.separator.height,
|
|
102
|
+
background: datePickerToken.pickerPanel.separator.backgroundColor,
|
|
103
|
+
padding: customTokens.sizing.valueZero,
|
|
104
|
+
['svg']: {
|
|
105
|
+
display: customTokens.layout.displayNone
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
[`${prefixClsWithoutHash}-suffix`]: {
|
|
109
|
+
display: customTokens.layout.displayNone
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
[`${prefixClsWithoutHash}-active-bar`]: {
|
|
114
|
+
display: customTokens.layout.displayNone
|
|
115
|
+
},
|
|
116
|
+
[`&${prefixClsWithoutHash}-dropdown`]: {
|
|
117
|
+
[`${prefixClsWithoutHash}-date-panel-container`]: {
|
|
118
|
+
background: datePickerToken.general.bgDarkBlue,
|
|
119
|
+
border: datePickerToken.general.wideBorder,
|
|
120
|
+
boxShadow: datePickerToken.pickerPanel.shadow,
|
|
121
|
+
[`${prefixClsWithoutHash}-date-panel`]: {
|
|
122
|
+
width: 'fit-content'
|
|
123
|
+
},
|
|
124
|
+
[`${prefixClsWithoutHash}-header`]: {
|
|
125
|
+
border: customTokens.border.borderNone,
|
|
126
|
+
alignItems: customTokens.layout.flexCenter,
|
|
127
|
+
marginBottom: datePickerToken.pickerPanel.header.marginY,
|
|
128
|
+
marginTop: datePickerToken.pickerPanel.header.marginY,
|
|
129
|
+
padding: datePickerToken.pickerPanel.header.padding,
|
|
130
|
+
[`&-view`]: {
|
|
131
|
+
fontSize: datePickerToken.pickerPanel.header.textSize,
|
|
132
|
+
fontWeight: customTokens.typography.fontWeightBold,
|
|
133
|
+
lineHeight: customTokens.others.lineHeightShort,
|
|
134
|
+
letterSpacing: '-0.1px !important',
|
|
135
|
+
color: datePickerToken.pickerPanel.header.textColor
|
|
136
|
+
},
|
|
137
|
+
['button']: {
|
|
138
|
+
lineHeight: customTokens.others.lineHeightShort
|
|
139
|
+
},
|
|
140
|
+
['&-prev-btn, &-next-btn']: {
|
|
141
|
+
minWidth: datePickerToken.pickerPanel.header.arrawWidth,
|
|
142
|
+
width: datePickerToken.pickerPanel.header.arrawWidth
|
|
143
|
+
},
|
|
144
|
+
['&-prev-btn']: {
|
|
145
|
+
paddingLeft: datePickerToken.pickerPanel.header.arrowPaddingLeft
|
|
146
|
+
},
|
|
147
|
+
['&-next-btn']: {
|
|
148
|
+
paddingRight: datePickerToken.pickerPanel.header.arrowPaddingRight
|
|
149
|
+
},
|
|
150
|
+
['&-super-prev-btn, &-super-next-btn']: {
|
|
151
|
+
minWidth: datePickerToken.pickerPanel.header.arrawWidth,
|
|
152
|
+
width: datePickerToken.pickerPanel.header.arrawWidth
|
|
153
|
+
}
|
|
154
|
+
},
|
|
155
|
+
[`${prefixClsWithoutHash}-body`]: {
|
|
156
|
+
padding: datePickerToken.pickerPanel.body.padding
|
|
157
|
+
},
|
|
158
|
+
[`${prefixClsWithoutHash}-content`]: {
|
|
159
|
+
width: 'max-content',
|
|
160
|
+
['thead']: {
|
|
161
|
+
borderBottom: datePickerToken.pickerPanel.content.tableHeaderBorder
|
|
162
|
+
},
|
|
163
|
+
['th']: {
|
|
164
|
+
fontSize: datePickerToken.pickerPanel.content.tableHeaderFontSize,
|
|
165
|
+
fontWeight: customTokens.typography.fontWeightBold,
|
|
166
|
+
lineHeight: customTokens.others.lineHeightShort,
|
|
167
|
+
minWidth: datePickerToken.pickerPanel.content.tableHeaderWidth,
|
|
168
|
+
color: datePickerToken.pickerPanel.content.tableHeaderFontColor,
|
|
169
|
+
textTransform: customTokens.typography.textTransformUppercase,
|
|
170
|
+
height: customTokens.sizing.sizeMaxContent,
|
|
171
|
+
paddingBottom: datePickerToken.pickerPanel.content.tableHeaderPaddingBottom
|
|
172
|
+
},
|
|
173
|
+
['tr']: {
|
|
174
|
+
display: customTokens.layout.displayBlock,
|
|
175
|
+
marginTop: datePickerToken.pickerPanel.row.marginY
|
|
176
|
+
},
|
|
177
|
+
[`:not(${prefixClsWithoutHash}-cell-in-view)${prefixClsWithoutHash}-cell`]: {
|
|
178
|
+
visibility: customTokens.others.valueHidden,
|
|
179
|
+
padding: customTokens.sizing.valueZero,
|
|
180
|
+
minWidth: datePickerToken.pickerPanel.row.previousCellWidth,
|
|
181
|
+
lineHeight: customTokens.sizing.valueZero,
|
|
182
|
+
height: customTokens.sizing.valueZero,
|
|
183
|
+
[`${prefixClsWithoutHash}-cell-inner`]: {
|
|
184
|
+
lineHeight: customTokens.sizing.valueZero,
|
|
185
|
+
height: customTokens.sizing.valueZero
|
|
186
|
+
}
|
|
187
|
+
},
|
|
188
|
+
[`${prefixClsWithoutHash}-cell-in-view`]: {
|
|
189
|
+
padding: customTokens.sizing.valueZero,
|
|
190
|
+
minWidth: datePickerToken.pickerPanel.content.tableHeaderWidth,
|
|
191
|
+
marginBottom: datePickerToken.pickerPanel.row.marginY
|
|
192
|
+
},
|
|
193
|
+
[`${prefixClsWithoutHash}-cell-today`]: {
|
|
194
|
+
[`${prefixClsWithoutHash}-cell-inner`]: {
|
|
195
|
+
background: datePickerToken.pickerPanel.row.cellBg,
|
|
196
|
+
border: datePickerToken.pickerPanel.row.cellBorder,
|
|
197
|
+
borderRadius: datePickerToken.pickerPanel.row.cellBorderRadius
|
|
198
|
+
}
|
|
199
|
+
},
|
|
200
|
+
[`${prefixClsWithoutHash}-cell-inner`]: {
|
|
201
|
+
fontSize: datePickerToken.general.fontSize,
|
|
202
|
+
fontWeight: datePickerToken.pickerPanel.row.cellFontWeight,
|
|
203
|
+
lineHeight: datePickerToken.pickerPanel.row.cellLineHeight,
|
|
204
|
+
color: datePickerToken.pickerPanel.row.cellTextColor,
|
|
205
|
+
height: customTokens.sizing.valueFull,
|
|
206
|
+
width: customTokens.sizing.valueFull,
|
|
207
|
+
[`&::before`]: {
|
|
208
|
+
display: customTokens.layout.displayNone
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
},
|
|
212
|
+
[`${prefixClsWithoutHash}-footer`]: {
|
|
213
|
+
borderTop: datePickerToken.pickerPanel.footer.datePickerBorderTop,
|
|
214
|
+
margin: datePickerToken.pickerPanel.footer.margin,
|
|
215
|
+
padding: datePickerToken.pickerPanel.footer.datePickerPadding,
|
|
216
|
+
['li']: {
|
|
217
|
+
lineHeight: datePickerToken.pickerPanel.footer.lineHeight,
|
|
218
|
+
['a']: {
|
|
219
|
+
fontSize: datePickerToken.pickerPanel.footer.fontSize,
|
|
220
|
+
fontWeight: customTokens.typography.fontWeightBold,
|
|
221
|
+
color: token.colorWhite,
|
|
222
|
+
padding: datePickerToken.pickerPanel.footer.padding,
|
|
223
|
+
border: datePickerToken.pickerPanel.footer.border,
|
|
224
|
+
borderRadius: datePickerToken.pickerPanel.footer.borderRadius
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
},
|
|
230
|
+
[`&${prefixClsWithoutHash}-dropdown-range`]: {
|
|
231
|
+
padding: customTokens.sizing.valueZero,
|
|
232
|
+
[`${prefixClsWithoutHash}-date-panel-container`]: {
|
|
233
|
+
[`${prefixClsWithoutHash}-panel-layout`]: {
|
|
234
|
+
width: 'min-content'
|
|
235
|
+
},
|
|
236
|
+
[`${prefixClsWithoutHash}-header`]: {
|
|
237
|
+
['&-super-prev-btn, &-super-next-btn']: {
|
|
238
|
+
display: customTokens.layout.displayNone
|
|
239
|
+
}
|
|
240
|
+
},
|
|
241
|
+
[`${prefixClsWithoutHash}-body`]: {
|
|
242
|
+
padding: '0 25px 0 20px !important'
|
|
243
|
+
},
|
|
244
|
+
[`${prefixClsWithoutHash}-content`]: {
|
|
245
|
+
[`${prefixClsWithoutHash}-cell-in-view,
|
|
246
|
+
${prefixClsWithoutHash}-cell-in-range`]: {
|
|
247
|
+
padding: customTokens.sizing.valueZero,
|
|
248
|
+
minWidth: datePickerToken.pickerPanel.content.tableHeaderWidth,
|
|
249
|
+
marginBottom: datePickerToken.pickerPanel.row.marginY
|
|
250
|
+
},
|
|
251
|
+
[`${prefixClsWithoutHash}-cell-in-range`]: {
|
|
252
|
+
['&:before']: {
|
|
253
|
+
background: customTokens.others.colorTransparent
|
|
254
|
+
}
|
|
255
|
+
},
|
|
256
|
+
[`${prefixClsWithoutHash}-cell-today,
|
|
257
|
+
${prefixClsWithoutHash}-cell-range-start,
|
|
258
|
+
${prefixClsWithoutHash}-cell-range-end`]: {
|
|
259
|
+
[`${prefixClsWithoutHash}-cell-inner`]: {
|
|
260
|
+
background: datePickerToken.pickerPanel.row.cellBg,
|
|
261
|
+
border: datePickerToken.pickerPanel.row.cellBorder,
|
|
262
|
+
borderRadius: datePickerToken.pickerPanel.row.cellBorderRadius
|
|
263
|
+
}
|
|
264
|
+
}
|
|
265
|
+
},
|
|
266
|
+
[`${prefixClsWithoutHash}-footer`]: {
|
|
267
|
+
borderTop: customTokens.border.borderNone,
|
|
268
|
+
padding: customTokens.sizing.valueZero
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
},
|
|
272
|
+
[`&${prefixClsWithoutHash}-input-title`]: {
|
|
273
|
+
display: customTokens.layout.displayBlock,
|
|
274
|
+
fontWeight: customTokens.typography.fontWeightBold,
|
|
275
|
+
marginBottom: datePickerToken.general.inputMarginBottom,
|
|
276
|
+
[`&:not(${prefixClsWithoutHash}-light)`]: {
|
|
277
|
+
color: token.colorWhite
|
|
278
|
+
},
|
|
279
|
+
[`&${prefixClsWithoutHash}-light`]: {
|
|
280
|
+
color: datePickerToken.title.lightColor
|
|
281
|
+
}
|
|
282
|
+
}
|
|
283
|
+
},
|
|
284
|
+
['.range-footer']: {
|
|
285
|
+
display: customTokens.layout.displayFlex,
|
|
286
|
+
flexDirection: customTokens.layout.flexDirectionRow,
|
|
287
|
+
alignItems: customTokens.layout.flexCenter,
|
|
288
|
+
columnGap: datePickerToken.pickerPanel.footer.rangeColGap,
|
|
289
|
+
['.range-footer-start, .range-footer-end']: {
|
|
290
|
+
display: customTokens.layout.displayFlex,
|
|
291
|
+
flexDirection: customTokens.layout.flexDirectionRow,
|
|
292
|
+
alignItems: customTokens.layout.flexCenter,
|
|
293
|
+
borderTop: datePickerToken.pickerPanel.footer.rangeBorder,
|
|
294
|
+
padding: datePickerToken.pickerPanel.footer.rangePadding,
|
|
295
|
+
columnGap: datePickerToken.pickerPanel.footer.rangeCol
|
|
296
|
+
},
|
|
297
|
+
['input']: {
|
|
298
|
+
border: datePickerToken.general.wideBorder,
|
|
299
|
+
backgroundColor: datePickerToken.general.bgDarkBlue,
|
|
300
|
+
textAlign: customTokens.typography.textAlignCenter,
|
|
301
|
+
width: customTokens.sizing.valueFull,
|
|
302
|
+
padding: datePickerToken.pickerPanel.footer.rangeInputPadding,
|
|
303
|
+
borderRadius: datePickerToken.pickerPanel.footer.rangeInputRadius,
|
|
304
|
+
fontWeight: customTokens.typography.fontWeightBold,
|
|
305
|
+
color: token.colorWhite,
|
|
306
|
+
outline: customTokens.layout.displayNone,
|
|
307
|
+
['&::placeholder']: {
|
|
308
|
+
color: datePickerToken.general.fontColor
|
|
309
|
+
}
|
|
310
|
+
}
|
|
311
|
+
}
|
|
312
|
+
};
|
|
313
|
+
});
|
|
314
|
+
const customPopupStyle = restDatePickerProps.placement === 'center'
|
|
315
|
+
? { left: '50%', transform: 'translateX(-50%)' }
|
|
316
|
+
: {};
|
|
317
|
+
const handleDateChange = (dates) => {
|
|
318
|
+
const updateDateTime = (date, setDate, setTime) => {
|
|
319
|
+
if (date) {
|
|
320
|
+
setDate(date.format('MM/DD/YYYY'));
|
|
321
|
+
setTime(date.format('HH:mm:ss'));
|
|
322
|
+
}
|
|
323
|
+
else {
|
|
324
|
+
setDate('');
|
|
325
|
+
setTime('');
|
|
326
|
+
}
|
|
327
|
+
};
|
|
328
|
+
if (dates) {
|
|
329
|
+
updateDateTime(dates[0], setStartDate, setStartTime);
|
|
330
|
+
updateDateTime(dates[1], setEndDate, setEndTime);
|
|
331
|
+
}
|
|
332
|
+
};
|
|
333
|
+
const renderFooter = (panelType) => {
|
|
334
|
+
const renderInputMask = (mask, value, onChange, placeholder) => (React.createElement(react_input_mask_1.default, { mask: mask, value: value, onChange: onChange, placeholder: placeholder }));
|
|
335
|
+
const isStartPanel = panelType === 'start';
|
|
336
|
+
const containerClass = isStartPanel
|
|
337
|
+
? 'range-footer-start'
|
|
338
|
+
: 'range-footer-end';
|
|
339
|
+
return (React.createElement("div", { className: containerClass },
|
|
340
|
+
renderInputMask('99/99/9999', isStartPanel ? startDate : endDate, isStartPanel
|
|
341
|
+
? e => setStartDate(e.target.value)
|
|
342
|
+
: e => setEndDate(e.target.value), isStartPanel ? '00/00/0000' : 'End Date'),
|
|
343
|
+
renderInputMask('99:99:99', isStartPanel ? startTime : endTime, isStartPanel
|
|
344
|
+
? e => setStartTime(e.target.value)
|
|
345
|
+
: e => setEndTime(e.target.value), isStartPanel ? '00:00:00' : 'End Time')));
|
|
346
|
+
};
|
|
347
|
+
const RangePickerCustomInput = React.forwardRef((props, ref) => {
|
|
348
|
+
const _a = props, { value, onChange, placeholder } = _a, restProps = __rest(_a, ["value", "onChange", "placeholder"]);
|
|
349
|
+
return (React.createElement(React.Fragment, null,
|
|
350
|
+
React.createElement("input", Object.assign({}, restProps, { ref: ref, value: value, onChange: onChange, placeholder: placeholder })),
|
|
351
|
+
React.createElement("span", null,
|
|
352
|
+
React.createElement(icons_1.Icon, { icon: suffixIcon, size: suffixIconSize, style: { color: suffixIconColor } }))));
|
|
353
|
+
});
|
|
354
|
+
RangePickerCustomInput.displayName = 'RangePickerCustomInput';
|
|
355
|
+
return useStyle(pickerType === 'range' ? (React.createElement(antd_1.DatePicker.RangePicker, Object.assign({}, restDatePickerProps, { popupStyle: customPopupStyle, onChange: handleDateChange, renderExtraFooter: () => (React.createElement("div", { className: "range-footer" },
|
|
356
|
+
renderFooter('start'),
|
|
357
|
+
renderFooter('end'))), components: {
|
|
358
|
+
input: RangePickerCustomInput
|
|
359
|
+
}, variant: "borderless" }))) : (React.createElement("div", null,
|
|
360
|
+
showTitle && (React.createElement(antd_1.Typography.Text, { className: `${prefixWithoutHash}-input-title ${themeClassName}` }, inputTitle)),
|
|
361
|
+
React.createElement(antd_1.DatePicker, Object.assign({ className: themeClassName, suffixIcon: React.createElement(icons_1.Icon, { icon: suffixIcon, size: suffixIconSize, style: { color: suffixIconColor } }) }, restDatePickerProps)))));
|
|
20
362
|
};
|
|
21
363
|
exports.DatePicker = DatePicker;
|