@tidbcloud/uikit 2.4.4 → 2.4.5

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/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @tidbcloud/uikit
2
2
 
3
+ ## 2.4.5
4
+
5
+ ### Patch Changes
6
+
7
+ - fix(biz): enhance DateTimePicker with formatter prop and update storybook demo ([#551](https://github.com/tidbcloud/tidbcloud-uikit/pull/551))
8
+
3
9
  ## 2.4.4
4
10
 
5
11
  ### Patch Changes
@@ -28,6 +28,7 @@ const Flex = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_j
28
28
  const DateTimePicker = ({
29
29
  placeholder = "Select time",
30
30
  format = helpers.DEFAULT_TIME_FORMAT,
31
+ formatter,
31
32
  defaultValue,
32
33
  value,
33
34
  startDate = dayjs.dayjs().subtract(10, "year").toDate(),
@@ -68,7 +69,7 @@ const DateTimePicker = ({
68
69
  setCurrentValueChangedBy(null);
69
70
  }, 20);
70
71
  });
71
- const inputStr = currentValue.format(format);
72
+ const inputStr = formatter ? formatter(currentValue.utcOffset(utcOffset).toDate()) : currentValue.utcOffset(utcOffset).format(format);
72
73
  const utcStr = React.useMemo(() => {
73
74
  const h = Math.floor(utcOffset / 60);
74
75
  const m = utcOffset % 60;
@@ -1,7 +1,24 @@
1
- import { MantineSize, TextInputProps, TimeInputProps, PopoverProps } from '../../primitive/index.cjs';
1
+ import { MantineSize, PopoverProps, TextInputProps, TimeInputProps } from '../../primitive/index.cjs';
2
2
  export interface DateTimePickerProps extends Omit<TextInputProps, 'value' | 'onChange' | 'defaultValue'> {
3
+ /**
4
+ * The placeholder of the input.
5
+ * @default 'Select time'
6
+ */
3
7
  placeholder?: string;
8
+ /**
9
+ * The format of the date string.
10
+ * @default 'YYYY-MM-DD HH:mm:ss'
11
+ */
4
12
  format?: string;
13
+ /**
14
+ * A function to format the date in the input
15
+ * If provided, `format` prop will be ignored.
16
+ */
17
+ formatter?: (val: Date) => string;
18
+ /**
19
+ * The UTC offset in minutes.
20
+ * See https://day.js.org/docs/en/manipulate/utc-offset
21
+ */
5
22
  utcOffset?: number;
6
23
  defaultValue?: Date;
7
24
  value?: Date;
@@ -13,7 +30,7 @@ export interface DateTimePickerProps extends Omit<TextInputProps, 'value' | 'onC
13
30
  loading?: boolean;
14
31
  size?: MantineSize;
15
32
  }
16
- export declare const DateTimePicker: ({ placeholder, format, defaultValue, value, startDate, endDate, onChange, disable, utcOffset, withinPortal, sx, loading, size }: DateTimePickerProps) => import("react/jsx-runtime.js").JSX.Element;
33
+ export declare const DateTimePicker: ({ placeholder, format, formatter, defaultValue, value, startDate, endDate, onChange, disable, utcOffset, withinPortal, sx, loading, size }: DateTimePickerProps) => import("react/jsx-runtime.js").JSX.Element;
17
34
  export interface TimePickerProps extends Omit<TimeInputProps, 'value' | 'onChange' | 'defaultValue'>, Pick<PopoverProps, 'withinPortal' | 'withArrow' | 'position' | 'shadow'> {
18
35
  defaultValue?: string;
19
36
  /**
@@ -1,7 +1,24 @@
1
- import { MantineSize, TextInputProps, TimeInputProps, PopoverProps } from '../../primitive/index.mjs';
1
+ import { MantineSize, PopoverProps, TextInputProps, TimeInputProps } from '../../primitive/index.mjs';
2
2
  export interface DateTimePickerProps extends Omit<TextInputProps, 'value' | 'onChange' | 'defaultValue'> {
3
+ /**
4
+ * The placeholder of the input.
5
+ * @default 'Select time'
6
+ */
3
7
  placeholder?: string;
8
+ /**
9
+ * The format of the date string.
10
+ * @default 'YYYY-MM-DD HH:mm:ss'
11
+ */
4
12
  format?: string;
13
+ /**
14
+ * A function to format the date in the input
15
+ * If provided, `format` prop will be ignored.
16
+ */
17
+ formatter?: (val: Date) => string;
18
+ /**
19
+ * The UTC offset in minutes.
20
+ * See https://day.js.org/docs/en/manipulate/utc-offset
21
+ */
5
22
  utcOffset?: number;
6
23
  defaultValue?: Date;
7
24
  value?: Date;
@@ -13,7 +30,7 @@ export interface DateTimePickerProps extends Omit<TextInputProps, 'value' | 'onC
13
30
  loading?: boolean;
14
31
  size?: MantineSize;
15
32
  }
16
- export declare const DateTimePicker: ({ placeholder, format, defaultValue, value, startDate, endDate, onChange, disable, utcOffset, withinPortal, sx, loading, size }: DateTimePickerProps) => import("react/jsx-runtime.js").JSX.Element;
33
+ export declare const DateTimePicker: ({ placeholder, format, formatter, defaultValue, value, startDate, endDate, onChange, disable, utcOffset, withinPortal, sx, loading, size }: DateTimePickerProps) => import("react/jsx-runtime.js").JSX.Element;
17
34
  export interface TimePickerProps extends Omit<TimeInputProps, 'value' | 'onChange' | 'defaultValue'>, Pick<PopoverProps, 'withinPortal' | 'withArrow' | 'position' | 'shadow'> {
18
35
  defaultValue?: string;
19
36
  /**
@@ -26,6 +26,7 @@ import { Flex } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_j
26
26
  const DateTimePicker = ({
27
27
  placeholder = "Select time",
28
28
  format = DEFAULT_TIME_FORMAT,
29
+ formatter,
29
30
  defaultValue,
30
31
  value,
31
32
  startDate = dayjs().subtract(10, "year").toDate(),
@@ -66,7 +67,7 @@ const DateTimePicker = ({
66
67
  setCurrentValueChangedBy(null);
67
68
  }, 20);
68
69
  });
69
- const inputStr = currentValue.format(format);
70
+ const inputStr = formatter ? formatter(currentValue.utcOffset(utcOffset).toDate()) : currentValue.utcOffset(utcOffset).format(format);
70
71
  const utcStr = useMemo(() => {
71
72
  const h = Math.floor(utcOffset / 60);
72
73
  const m = utcOffset % 60;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tidbcloud/uikit",
3
- "version": "2.4.4",
3
+ "version": "2.4.5",
4
4
  "description": "tidbcloud uikit",
5
5
  "type": "module",
6
6
  "main": "dist/primitive/index.cjs",