@akinon/ui-date-picker 1.0.0 → 1.1.0

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 (7) hide show
  1. package/dist/cjs/index.d.ts.map +1 -1
  2. package/dist/cjs/index.js +17 -38
  3. package/dist/cjs/types.d.ts +6 -0
  4. package/dist/esm/index.d.ts.map +1 -1
  5. package/dist/esm/index.js +17 -38
  6. package/dist/esm/types.d.ts +6 -0
  7. package/package.json +4 -4
package/dist/cjs/index.d.ts.map CHANGED
@@ -1 +1 @@
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,sBAidvB,CAAC;AAEF,YAAY,EAAE,qBAAqB,EAAE,CAAC"}
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
@@ -54,8 +54,7 @@ const DatePicker = (_a) => {
54
54
  theme: theme
55
55
  }, () => {
56
56
  const prefixCls = `:where(.${hashId})`;
57
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
58
- const customTokens = theme.customTokens || {};
57
+ const customTokens = theme.CustomTokens || {};
59
58
  return {
60
59
  [prefixCls]: {
61
60
  [`&${prefixClsWithoutHash}`]: {
@@ -76,18 +75,20 @@ const DatePicker = (_a) => {
76
75
  border: datePickerToken.general.lightThemeBorder
77
76
  }
78
77
  },
79
- [`${prefixClsWithoutHash}-input span`]: {
78
+ [`${prefixClsWithoutHash}-input > span`]: {
80
79
  position: customTokens.layout.positionAbsolute,
81
80
  right: datePickerToken.pickerPanel.range.iconPosition,
82
81
  top: customTokens.sizing.valueHalf,
83
82
  transform: datePickerToken.pickerPanel.range.iconTransform,
84
- pointerEvents: customTokens.layout.displayNone
83
+ [`:not(${prefixClsWithoutHash}-clear)`]: {
84
+ pointerEvents: customTokens.layout.displayNone
85
+ }
85
86
  },
86
87
  [`${prefixClsWithoutHash}-input`]: {
87
88
  color: datePickerToken.general.fontColor
88
89
  },
89
90
  [`input`]: {
90
- fontWeight: datePickerToken.general.fontWeight,
91
+ fontWeight: customTokens.typography.fontWeightBold,
91
92
  padding: datePickerToken.general.inputPadding,
92
93
  borderRadius: datePickerToken.pickerPanel.range.inputRadius,
93
94
  width: `${restDatePickerProps.inputWidth} !important`,
@@ -113,28 +114,6 @@ const DatePicker = (_a) => {
113
114
  display: customTokens.layout.displayNone
114
115
  },
115
116
  [`&${prefixClsWithoutHash}-dropdown`]: {
116
- ['&::before']: {
117
- content: customTokens.others.emptyContent,
118
- position: customTokens.layout.positionAbsolute,
119
- top: datePickerToken.pickerTriangle.beforeTop,
120
- left: customTokens.layout.valueHalf,
121
- transform: datePickerToken.pickerTriangle.transform,
122
- borderLeft: datePickerToken.pickerTriangle.beforeBorderX,
123
- borderRight: datePickerToken.pickerTriangle.beforeBorderX,
124
- borderBottom: datePickerToken.pickerTriangle.beforeBorderBottom,
125
- zIndex: datePickerToken.pickerTriangle.beforeZIndex
126
- },
127
- ['&::after']: {
128
- content: customTokens.others.emptyContent,
129
- position: customTokens.layout.positionAbsolute,
130
- top: datePickerToken.pickerTriangle.afterTop,
131
- left: customTokens.layout.valueHalf,
132
- transform: datePickerToken.pickerTriangle.transform,
133
- borderLeft: datePickerToken.pickerTriangle.afterBorderX,
134
- borderRight: datePickerToken.pickerTriangle.afterBorderX,
135
- borderBottom: datePickerToken.pickerTriangle.afterBorderBottom,
136
- zIndex: datePickerToken.pickerTriangle.afterZIndex
137
- },
138
117
  [`${prefixClsWithoutHash}-date-panel-container`]: {
139
118
  background: datePickerToken.general.bgDarkBlue,
140
119
  border: datePickerToken.general.wideBorder,
@@ -144,13 +123,13 @@ const DatePicker = (_a) => {
144
123
  },
145
124
  [`${prefixClsWithoutHash}-header`]: {
146
125
  border: customTokens.border.borderNone,
147
- alignItems: datePickerToken.general.itemCenter,
126
+ alignItems: customTokens.layout.flexCenter,
148
127
  marginBottom: datePickerToken.pickerPanel.header.marginY,
149
128
  marginTop: datePickerToken.pickerPanel.header.marginY,
150
129
  padding: datePickerToken.pickerPanel.header.padding,
151
130
  [`&-view`]: {
152
131
  fontSize: datePickerToken.pickerPanel.header.textSize,
153
- fontWeight: datePickerToken.general.fontWeight,
132
+ fontWeight: customTokens.typography.fontWeightBold,
154
133
  lineHeight: customTokens.others.lineHeightShort,
155
134
  letterSpacing: '-0.1px !important',
156
135
  color: datePickerToken.pickerPanel.header.textColor
@@ -183,7 +162,7 @@ const DatePicker = (_a) => {
183
162
  },
184
163
  ['th']: {
185
164
  fontSize: datePickerToken.pickerPanel.content.tableHeaderFontSize,
186
- fontWeight: datePickerToken.general.fontWeight,
165
+ fontWeight: customTokens.typography.fontWeightBold,
187
166
  lineHeight: customTokens.others.lineHeightShort,
188
167
  minWidth: datePickerToken.pickerPanel.content.tableHeaderWidth,
189
168
  color: datePickerToken.pickerPanel.content.tableHeaderFontColor,
@@ -238,7 +217,7 @@ const DatePicker = (_a) => {
238
217
  lineHeight: datePickerToken.pickerPanel.footer.lineHeight,
239
218
  ['a']: {
240
219
  fontSize: datePickerToken.pickerPanel.footer.fontSize,
241
- fontWeight: datePickerToken.general.fontWeight,
220
+ fontWeight: customTokens.typography.fontWeightBold,
242
221
  color: token.colorWhite,
243
222
  padding: datePickerToken.pickerPanel.footer.padding,
244
223
  border: datePickerToken.pickerPanel.footer.border,
@@ -292,7 +271,7 @@ const DatePicker = (_a) => {
292
271
  },
293
272
  [`&${prefixClsWithoutHash}-input-title`]: {
294
273
  display: customTokens.layout.displayBlock,
295
- fontWeight: datePickerToken.general.fontWeight,
274
+ fontWeight: customTokens.typography.fontWeightBold,
296
275
  marginBottom: datePickerToken.general.inputMarginBottom,
297
276
  [`&:not(${prefixClsWithoutHash}-light)`]: {
298
277
  color: token.colorWhite
@@ -304,13 +283,13 @@ const DatePicker = (_a) => {
304
283
  },
305
284
  ['.range-footer']: {
306
285
  display: customTokens.layout.displayFlex,
307
- flexDirection: datePickerToken.pickerPanel.footer.rangeDirection,
308
- alignItems: datePickerToken.general.itemCenter,
286
+ flexDirection: customTokens.layout.flexDirectionRow,
287
+ alignItems: customTokens.layout.flexCenter,
309
288
  columnGap: datePickerToken.pickerPanel.footer.rangeColGap,
310
289
  ['.range-footer-start, .range-footer-end']: {
311
290
  display: customTokens.layout.displayFlex,
312
- flexDirection: datePickerToken.pickerPanel.footer.rangeDirection,
313
- alignItems: datePickerToken.general.itemCenter,
291
+ flexDirection: customTokens.layout.flexDirectionRow,
292
+ alignItems: customTokens.layout.flexCenter,
314
293
  borderTop: datePickerToken.pickerPanel.footer.rangeBorder,
315
294
  padding: datePickerToken.pickerPanel.footer.rangePadding,
316
295
  columnGap: datePickerToken.pickerPanel.footer.rangeCol
@@ -318,11 +297,11 @@ const DatePicker = (_a) => {
318
297
  ['input']: {
319
298
  border: datePickerToken.general.wideBorder,
320
299
  backgroundColor: datePickerToken.general.bgDarkBlue,
321
- textAlign: datePickerToken.general.itemCenter,
300
+ textAlign: customTokens.typography.textAlignCenter,
322
301
  width: customTokens.sizing.valueFull,
323
302
  padding: datePickerToken.pickerPanel.footer.rangeInputPadding,
324
303
  borderRadius: datePickerToken.pickerPanel.footer.rangeInputRadius,
325
- fontWeight: datePickerToken.general.fontWeight,
304
+ fontWeight: customTokens.typography.fontWeightBold,
326
305
  color: token.colorWhite,
327
306
  outline: customTokens.layout.displayNone,
328
307
  ['&::placeholder']: {
package/dist/cjs/types.d.ts CHANGED
@@ -435,6 +435,12 @@ interface DatePickerGeneralProps {
435
435
  subType?: 'hour' | 'minute' | 'second' | 'meridiem';
436
436
  }
437
437
  ) => React.ReactNode;
438
+
439
+ /**
440
+ * Show time picker.
441
+ * @default false
442
+ */
443
+ showTime?: boolean;
438
444
  }
439
445
 
440
446
  interface PickerValuesProps {
package/dist/esm/index.d.ts.map CHANGED
@@ -1 +1 @@
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,sBAidvB,CAAC;AAEF,YAAY,EAAE,qBAAqB,EAAE,CAAC"}
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/esm/index.js CHANGED
@@ -51,8 +51,7 @@ export const DatePicker = (_a) => {
51
51
  theme: theme
52
52
  }, () => {
53
53
  const prefixCls = `:where(.${hashId})`;
54
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
55
- const customTokens = theme.customTokens || {};
54
+ const customTokens = theme.CustomTokens || {};
56
55
  return {
57
56
  [prefixCls]: {
58
57
  [`&${prefixClsWithoutHash}`]: {
@@ -73,18 +72,20 @@ export const DatePicker = (_a) => {
73
72
  border: datePickerToken.general.lightThemeBorder
74
73
  }
75
74
  },
76
- [`${prefixClsWithoutHash}-input span`]: {
75
+ [`${prefixClsWithoutHash}-input > span`]: {
77
76
  position: customTokens.layout.positionAbsolute,
78
77
  right: datePickerToken.pickerPanel.range.iconPosition,
79
78
  top: customTokens.sizing.valueHalf,
80
79
  transform: datePickerToken.pickerPanel.range.iconTransform,
81
- pointerEvents: customTokens.layout.displayNone
80
+ [`:not(${prefixClsWithoutHash}-clear)`]: {
81
+ pointerEvents: customTokens.layout.displayNone
82
+ }
82
83
  },
83
84
  [`${prefixClsWithoutHash}-input`]: {
84
85
  color: datePickerToken.general.fontColor
85
86
  },
86
87
  [`input`]: {
87
- fontWeight: datePickerToken.general.fontWeight,
88
+ fontWeight: customTokens.typography.fontWeightBold,
88
89
  padding: datePickerToken.general.inputPadding,
89
90
  borderRadius: datePickerToken.pickerPanel.range.inputRadius,
90
91
  width: `${restDatePickerProps.inputWidth} !important`,
@@ -110,28 +111,6 @@ export const DatePicker = (_a) => {
110
111
  display: customTokens.layout.displayNone
111
112
  },
112
113
  [`&${prefixClsWithoutHash}-dropdown`]: {
113
- ['&::before']: {
114
- content: customTokens.others.emptyContent,
115
- position: customTokens.layout.positionAbsolute,
116
- top: datePickerToken.pickerTriangle.beforeTop,
117
- left: customTokens.layout.valueHalf,
118
- transform: datePickerToken.pickerTriangle.transform,
119
- borderLeft: datePickerToken.pickerTriangle.beforeBorderX,
120
- borderRight: datePickerToken.pickerTriangle.beforeBorderX,
121
- borderBottom: datePickerToken.pickerTriangle.beforeBorderBottom,
122
- zIndex: datePickerToken.pickerTriangle.beforeZIndex
123
- },
124
- ['&::after']: {
125
- content: customTokens.others.emptyContent,
126
- position: customTokens.layout.positionAbsolute,
127
- top: datePickerToken.pickerTriangle.afterTop,
128
- left: customTokens.layout.valueHalf,
129
- transform: datePickerToken.pickerTriangle.transform,
130
- borderLeft: datePickerToken.pickerTriangle.afterBorderX,
131
- borderRight: datePickerToken.pickerTriangle.afterBorderX,
132
- borderBottom: datePickerToken.pickerTriangle.afterBorderBottom,
133
- zIndex: datePickerToken.pickerTriangle.afterZIndex
134
- },
135
114
  [`${prefixClsWithoutHash}-date-panel-container`]: {
136
115
  background: datePickerToken.general.bgDarkBlue,
137
116
  border: datePickerToken.general.wideBorder,
@@ -141,13 +120,13 @@ export const DatePicker = (_a) => {
141
120
  },
142
121
  [`${prefixClsWithoutHash}-header`]: {
143
122
  border: customTokens.border.borderNone,
144
- alignItems: datePickerToken.general.itemCenter,
123
+ alignItems: customTokens.layout.flexCenter,
145
124
  marginBottom: datePickerToken.pickerPanel.header.marginY,
146
125
  marginTop: datePickerToken.pickerPanel.header.marginY,
147
126
  padding: datePickerToken.pickerPanel.header.padding,
148
127
  [`&-view`]: {
149
128
  fontSize: datePickerToken.pickerPanel.header.textSize,
150
- fontWeight: datePickerToken.general.fontWeight,
129
+ fontWeight: customTokens.typography.fontWeightBold,
151
130
  lineHeight: customTokens.others.lineHeightShort,
152
131
  letterSpacing: '-0.1px !important',
153
132
  color: datePickerToken.pickerPanel.header.textColor
@@ -180,7 +159,7 @@ export const DatePicker = (_a) => {
180
159
  },
181
160
  ['th']: {
182
161
  fontSize: datePickerToken.pickerPanel.content.tableHeaderFontSize,
183
- fontWeight: datePickerToken.general.fontWeight,
162
+ fontWeight: customTokens.typography.fontWeightBold,
184
163
  lineHeight: customTokens.others.lineHeightShort,
185
164
  minWidth: datePickerToken.pickerPanel.content.tableHeaderWidth,
186
165
  color: datePickerToken.pickerPanel.content.tableHeaderFontColor,
@@ -235,7 +214,7 @@ export const DatePicker = (_a) => {
235
214
  lineHeight: datePickerToken.pickerPanel.footer.lineHeight,
236
215
  ['a']: {
237
216
  fontSize: datePickerToken.pickerPanel.footer.fontSize,
238
- fontWeight: datePickerToken.general.fontWeight,
217
+ fontWeight: customTokens.typography.fontWeightBold,
239
218
  color: token.colorWhite,
240
219
  padding: datePickerToken.pickerPanel.footer.padding,
241
220
  border: datePickerToken.pickerPanel.footer.border,
@@ -289,7 +268,7 @@ export const DatePicker = (_a) => {
289
268
  },
290
269
  [`&${prefixClsWithoutHash}-input-title`]: {
291
270
  display: customTokens.layout.displayBlock,
292
- fontWeight: datePickerToken.general.fontWeight,
271
+ fontWeight: customTokens.typography.fontWeightBold,
293
272
  marginBottom: datePickerToken.general.inputMarginBottom,
294
273
  [`&:not(${prefixClsWithoutHash}-light)`]: {
295
274
  color: token.colorWhite
@@ -301,13 +280,13 @@ export const DatePicker = (_a) => {
301
280
  },
302
281
  ['.range-footer']: {
303
282
  display: customTokens.layout.displayFlex,
304
- flexDirection: datePickerToken.pickerPanel.footer.rangeDirection,
305
- alignItems: datePickerToken.general.itemCenter,
283
+ flexDirection: customTokens.layout.flexDirectionRow,
284
+ alignItems: customTokens.layout.flexCenter,
306
285
  columnGap: datePickerToken.pickerPanel.footer.rangeColGap,
307
286
  ['.range-footer-start, .range-footer-end']: {
308
287
  display: customTokens.layout.displayFlex,
309
- flexDirection: datePickerToken.pickerPanel.footer.rangeDirection,
310
- alignItems: datePickerToken.general.itemCenter,
288
+ flexDirection: customTokens.layout.flexDirectionRow,
289
+ alignItems: customTokens.layout.flexCenter,
311
290
  borderTop: datePickerToken.pickerPanel.footer.rangeBorder,
312
291
  padding: datePickerToken.pickerPanel.footer.rangePadding,
313
292
  columnGap: datePickerToken.pickerPanel.footer.rangeCol
@@ -315,11 +294,11 @@ export const DatePicker = (_a) => {
315
294
  ['input']: {
316
295
  border: datePickerToken.general.wideBorder,
317
296
  backgroundColor: datePickerToken.general.bgDarkBlue,
318
- textAlign: datePickerToken.general.itemCenter,
297
+ textAlign: customTokens.typography.textAlignCenter,
319
298
  width: customTokens.sizing.valueFull,
320
299
  padding: datePickerToken.pickerPanel.footer.rangeInputPadding,
321
300
  borderRadius: datePickerToken.pickerPanel.footer.rangeInputRadius,
322
- fontWeight: datePickerToken.general.fontWeight,
301
+ fontWeight: customTokens.typography.fontWeightBold,
323
302
  color: token.colorWhite,
324
303
  outline: customTokens.layout.displayNone,
325
304
  ['&::placeholder']: {
package/dist/esm/types.d.ts CHANGED
@@ -435,6 +435,12 @@ interface DatePickerGeneralProps {
435
435
  subType?: 'hour' | 'minute' | 'second' | 'meridiem';
436
436
  }
437
437
  ) => React.ReactNode;
438
+
439
+ /**
440
+ * Show time picker.
441
+ * @default false
442
+ */
443
+ showTime?: boolean;
438
444
  }
439
445
 
440
446
  interface PickerValuesProps {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@akinon/ui-date-picker",
3
- "version": "1.0.0",
3
+ "version": "1.1.0",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "main": "dist/esm/index.js",
@@ -11,7 +11,8 @@
11
11
  "dependencies": {
12
12
  "antd": "5.22.6",
13
13
  "react-input-mask": "^2.0.4",
14
- "@akinon/icons": "1.0.0"
14
+ "@akinon/ui-theme": "1.0.1",
15
+ "@akinon/icons": "1.0.1"
15
16
  },
16
17
  "devDependencies": {
17
18
  "@types/react-input-mask": "^3.0.6",
@@ -19,8 +20,7 @@
19
20
  "copyfiles": "^2.4.1",
20
21
  "rimraf": "^5.0.5",
21
22
  "typescript": "*",
22
- "@akinon/typescript-config": "1.0.0",
23
- "@akinon/ui-theme": "1.0.0"
23
+ "@akinon/typescript-config": "1.0.1"
24
24
  },
25
25
  "peerDependencies": {
26
26
  "react": ">=18",