@tidbcloud/uikit 2.1.4 → 2.1.6
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 +13 -0
- package/dist/_virtual/customParseFormat.cjs +4 -0
- package/dist/_virtual/customParseFormat.mjs +4 -0
- package/dist/_virtual/duration.cjs +4 -0
- package/dist/_virtual/duration.mjs +4 -0
- package/dist/_virtual/minMax.cjs +4 -0
- package/dist/_virtual/minMax.mjs +4 -0
- package/dist/biz/DateTimePicker/TimeScollerPicker.cjs +6 -8
- package/dist/biz/DateTimePicker/TimeScollerPicker.mjs +1 -3
- package/dist/biz/DateTimePicker/index.cjs +143 -126
- package/dist/biz/DateTimePicker/index.mjs +135 -118
- package/dist/biz/TimeRangePicker/AbsoluteTimeRangePicker.cjs +7 -9
- package/dist/biz/TimeRangePicker/AbsoluteTimeRangePicker.mjs +1 -3
- package/dist/biz/TimeRangePicker/helpers.cjs +3 -5
- package/dist/biz/TimeRangePicker/helpers.mjs +1 -3
- package/dist/node_modules/.pnpm/dayjs@1.11.13/node_modules/dayjs/plugin/customParseFormat.cjs +129 -0
- package/dist/node_modules/.pnpm/dayjs@1.11.13/node_modules/dayjs/plugin/customParseFormat.mjs +129 -0
- package/dist/node_modules/.pnpm/dayjs@1.11.13/node_modules/dayjs/plugin/duration.cjs +136 -0
- package/dist/node_modules/.pnpm/dayjs@1.11.13/node_modules/dayjs/plugin/duration.mjs +136 -0
- package/dist/node_modules/.pnpm/dayjs@1.11.13/node_modules/dayjs/plugin/minMax.cjs +32 -0
- package/dist/node_modules/.pnpm/dayjs@1.11.13/node_modules/dayjs/plugin/minMax.mjs +32 -0
- package/dist/utils/dayjs.cjs +15 -0
- package/dist/utils/dayjs.d.cts +2 -2
- package/dist/utils/dayjs.d.mts +2 -2
- package/dist/utils/dayjs.mjs +15 -0
- package/dist/utils/index.cjs +2 -2
- package/dist/utils/index.d.cts +1 -1
- package/dist/utils/index.d.mts +1 -1
- package/dist/utils/index.mjs +2 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @tidbcloud/uikit
|
|
2
2
|
|
|
3
|
+
## 2.1.6
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- fix(uikit): update dayjs import and export strategy ([#482](https://github.com/tidbcloud/tidbcloud-uikit/pull/482))
|
|
8
|
+
- chore(deps): upgrade Storybook and Vite to latest versions ([#481](https://github.com/tidbcloud/tidbcloud-uikit/pull/481))
|
|
9
|
+
|
|
10
|
+
## 2.1.5
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- fix(DateTimePicker): improve popover and input interaction ([#479](https://github.com/tidbcloud/tidbcloud-uikit/pull/479))
|
|
15
|
+
|
|
3
16
|
## 2.1.4
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
|
@@ -9,9 +9,7 @@ const React = require("react");
|
|
|
9
9
|
;/* empty css */
|
|
10
10
|
;/* empty css */
|
|
11
11
|
;/* empty css */
|
|
12
|
-
const dayjs = require("dayjs");
|
|
13
|
-
require("../../node_modules/.pnpm/dayjs@1.11.13/node_modules/dayjs/plugin/timezone.cjs");
|
|
14
|
-
require("../../node_modules/.pnpm/dayjs@1.11.13/node_modules/dayjs/plugin/utc.cjs");
|
|
12
|
+
const dayjs = require("../../utils/dayjs.cjs");
|
|
15
13
|
const constant = require("./constant.cjs");
|
|
16
14
|
const Flex = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Flex/Flex.cjs");
|
|
17
15
|
const useUncontrolled = require("../../node_modules/.pnpm/@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-uncontrolled/use-uncontrolled.cjs");
|
|
@@ -37,12 +35,12 @@ const getTimeRange = ({
|
|
|
37
35
|
type,
|
|
38
36
|
start,
|
|
39
37
|
end,
|
|
40
|
-
utcOffset = dayjs().utcOffset()
|
|
38
|
+
utcOffset = dayjs.dayjs().utcOffset()
|
|
41
39
|
}) => {
|
|
42
40
|
const map = {
|
|
43
41
|
year: {
|
|
44
|
-
min: dayjs().year(),
|
|
45
|
-
max: dayjs().year() + 100
|
|
42
|
+
min: dayjs.dayjs().year(),
|
|
43
|
+
max: dayjs.dayjs().year() + 100
|
|
46
44
|
},
|
|
47
45
|
month: {
|
|
48
46
|
min: 1,
|
|
@@ -66,8 +64,8 @@ const getTimeRange = ({
|
|
|
66
64
|
}
|
|
67
65
|
};
|
|
68
66
|
let { min, max } = map[type];
|
|
69
|
-
const s1 = start ? dayjs(start).utcOffset(utcOffset) : null;
|
|
70
|
-
const s2 = end ? dayjs(end).utcOffset(utcOffset) : null;
|
|
67
|
+
const s1 = start ? dayjs.dayjs(start).utcOffset(utcOffset) : null;
|
|
68
|
+
const s2 = end ? dayjs.dayjs(end).utcOffset(utcOffset) : null;
|
|
71
69
|
switch (type) {
|
|
72
70
|
case "year": {
|
|
73
71
|
if (s1) {
|
|
@@ -7,9 +7,7 @@ import { useMemo, useRef, useEffect } from "react";
|
|
|
7
7
|
/* empty css */
|
|
8
8
|
/* empty css */
|
|
9
9
|
/* empty css */
|
|
10
|
-
import dayjs from "dayjs";
|
|
11
|
-
import "../../node_modules/.pnpm/dayjs@1.11.13/node_modules/dayjs/plugin/timezone.mjs";
|
|
12
|
-
import "../../node_modules/.pnpm/dayjs@1.11.13/node_modules/dayjs/plugin/utc.mjs";
|
|
10
|
+
import { dayjs } from "../../utils/dayjs.mjs";
|
|
13
11
|
import { CellHeight, CellStyle } from "./constant.mjs";
|
|
14
12
|
import { Flex } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Flex/Flex.mjs";
|
|
15
13
|
import { useUncontrolled } from "../../node_modules/.pnpm/@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-uncontrolled/use-uncontrolled.mjs";
|
|
@@ -10,9 +10,7 @@ const index = require("../../icons/index.cjs");
|
|
|
10
10
|
;/* empty css */
|
|
11
11
|
;/* empty css */
|
|
12
12
|
const index$1 = require("../../primitive/Typography/index.cjs");
|
|
13
|
-
const dayjs = require("dayjs");
|
|
14
|
-
require("../../node_modules/.pnpm/dayjs@1.11.13/node_modules/dayjs/plugin/timezone.cjs");
|
|
15
|
-
require("../../node_modules/.pnpm/dayjs@1.11.13/node_modules/dayjs/plugin/utc.cjs");
|
|
13
|
+
const dayjs = require("../../utils/dayjs.cjs");
|
|
16
14
|
const helpers = require("../TimeRangePicker/helpers.cjs");
|
|
17
15
|
const TimeScollerPicker = require("./TimeScollerPicker.cjs");
|
|
18
16
|
const useDisclosure = require("../../node_modules/.pnpm/@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-disclosure/use-disclosure.cjs");
|
|
@@ -32,11 +30,11 @@ const DateTimePicker = ({
|
|
|
32
30
|
format = helpers.DEFAULT_TIME_FORMAT,
|
|
33
31
|
defaultValue,
|
|
34
32
|
value,
|
|
35
|
-
startDate = dayjs().subtract(10, "year").toDate(),
|
|
36
|
-
endDate = dayjs().add(10, "year").toDate(),
|
|
33
|
+
startDate = dayjs.dayjs().subtract(10, "year").toDate(),
|
|
34
|
+
endDate = dayjs.dayjs().add(10, "year").toDate(),
|
|
37
35
|
onChange,
|
|
38
36
|
disable = false,
|
|
39
|
-
utcOffset = dayjs().utcOffset(),
|
|
37
|
+
utcOffset = dayjs.dayjs().utcOffset(),
|
|
40
38
|
withinPortal = true,
|
|
41
39
|
sx,
|
|
42
40
|
loading = false,
|
|
@@ -44,8 +42,8 @@ const DateTimePicker = ({
|
|
|
44
42
|
}) => {
|
|
45
43
|
const [opened, { close, open }] = useDisclosure.useDisclosure(false);
|
|
46
44
|
const [currentValue, setCurrentValue] = useUncontrolled.useUncontrolled({
|
|
47
|
-
value: value ? dayjs(value) : void 0,
|
|
48
|
-
defaultValue: defaultValue ? dayjs(defaultValue) : dayjs(),
|
|
45
|
+
value: value ? dayjs.dayjs(value) : void 0,
|
|
46
|
+
defaultValue: defaultValue ? dayjs.dayjs(defaultValue) : dayjs.dayjs(),
|
|
49
47
|
onChange: (v) => {
|
|
50
48
|
onChange == null ? void 0 : onChange(v.toDate());
|
|
51
49
|
}
|
|
@@ -53,13 +51,16 @@ const DateTimePicker = ({
|
|
|
53
51
|
const [currentValueChangedBy, setCurrentValueChangedBy] = React.useState(null);
|
|
54
52
|
const updateCurrentValue = ahooks.useMemoizedFn((val, from) => {
|
|
55
53
|
let next = val;
|
|
54
|
+
if (!next.isValid()) {
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
56
57
|
if ((currentValue == null ? void 0 : currentValue.unix()) === next.unix()) {
|
|
57
58
|
return;
|
|
58
59
|
}
|
|
59
|
-
if (startDate && next.
|
|
60
|
-
next = dayjs(startDate);
|
|
61
|
-
} else if (endDate && next.
|
|
62
|
-
next = dayjs(endDate);
|
|
60
|
+
if (startDate && next.isBefore(startDate)) {
|
|
61
|
+
next = dayjs.dayjs(startDate);
|
|
62
|
+
} else if (endDate && next.isAfter(endDate)) {
|
|
63
|
+
next = dayjs.dayjs(endDate);
|
|
63
64
|
}
|
|
64
65
|
setCurrentValue(next);
|
|
65
66
|
setCurrentValueChangedBy(from);
|
|
@@ -80,7 +81,7 @@ const DateTimePicker = ({
|
|
|
80
81
|
});
|
|
81
82
|
const timeInputChange = ahooks.useMemoizedFn((e) => {
|
|
82
83
|
const originVal = e.currentTarget.value;
|
|
83
|
-
const v = dayjs(originVal, "HH:mm:ss").toDate();
|
|
84
|
+
const v = dayjs.dayjs(originVal, "HH:mm:ss").toDate();
|
|
84
85
|
let next = currentValue;
|
|
85
86
|
next = next.utcOffset(utcOffset).hour(v.getHours()).minute(v.getMinutes()).second(v.getSeconds());
|
|
86
87
|
updateCurrentValue(next, "timeInput");
|
|
@@ -91,123 +92,139 @@ const DateTimePicker = ({
|
|
|
91
92
|
next = next.utcOffset(utcOffset).hour(h).minute(m).second(s);
|
|
92
93
|
updateCurrentValue(next, "timeScroller");
|
|
93
94
|
});
|
|
94
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
DatePicker.DatePicker,
|
|
95
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
96
|
+
Popover.Popover,
|
|
97
|
+
{
|
|
98
|
+
position: "bottom-end",
|
|
99
|
+
opened,
|
|
100
|
+
withinPortal,
|
|
101
|
+
shadow: "md",
|
|
102
|
+
closeOnClickOutside: true,
|
|
103
|
+
onChange: (opened2) => {
|
|
104
|
+
if (opened2) {
|
|
105
|
+
open();
|
|
106
|
+
} else {
|
|
107
|
+
close();
|
|
108
|
+
}
|
|
109
|
+
},
|
|
110
|
+
children: [
|
|
111
|
+
/* @__PURE__ */ jsxRuntime.jsx(Popover.Popover.Target, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
112
|
+
TextInput.TextInput,
|
|
113
113
|
{
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
114
|
+
readOnly: true,
|
|
115
|
+
disabled: disable,
|
|
116
|
+
placeholder,
|
|
117
|
+
value: inputStr,
|
|
118
|
+
rightSection: loading ? /* @__PURE__ */ jsxRuntime.jsx(Loader.Loader, { size: "xs" }) : /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { component: index.IconClock, size: 18, c: "carbon.6" }),
|
|
119
|
+
sx,
|
|
120
|
+
size,
|
|
121
|
+
onClick: open
|
|
120
122
|
}
|
|
121
|
-
),
|
|
122
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
input: {
|
|
134
|
-
height: 30
|
|
135
|
-
}
|
|
123
|
+
) }),
|
|
124
|
+
/* @__PURE__ */ jsxRuntime.jsx(Popover.Popover.Dropdown, { children: /* @__PURE__ */ jsxRuntime.jsxs(Stack.Stack, { children: [
|
|
125
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { align: "flex-start", children: [
|
|
126
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
127
|
+
DatePicker.DatePicker,
|
|
128
|
+
{
|
|
129
|
+
minDate: startDate,
|
|
130
|
+
maxDate: endDate,
|
|
131
|
+
value: currentValue.toDate(),
|
|
132
|
+
onChange: calendarChange,
|
|
133
|
+
withCellSpacing: false,
|
|
134
|
+
size: "md"
|
|
136
135
|
}
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
{
|
|
152
|
-
bg: "carbon.3",
|
|
153
|
-
pos: "absolute",
|
|
154
|
-
top: 0,
|
|
155
|
-
left: 0,
|
|
156
|
-
h: 32,
|
|
157
|
-
w: 32,
|
|
158
|
-
sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
|
|
159
|
-
}
|
|
160
|
-
),
|
|
161
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
162
|
-
Box.Box,
|
|
163
|
-
{
|
|
164
|
-
bg: "carbon.3",
|
|
165
|
-
pos: "absolute",
|
|
166
|
-
top: 0,
|
|
167
|
-
left: 40,
|
|
168
|
-
h: 32,
|
|
169
|
-
w: 32,
|
|
170
|
-
sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
|
|
136
|
+
),
|
|
137
|
+
/* @__PURE__ */ jsxRuntime.jsx(Divider.Divider, { orientation: "vertical", mt: -12, mb: -16 }),
|
|
138
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Stack.Stack, { justify: "flex-start", children: [
|
|
139
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
140
|
+
TimeInput.TimeInput,
|
|
141
|
+
{
|
|
142
|
+
withSeconds: true,
|
|
143
|
+
value: currentValue.format("HH:mm:ss"),
|
|
144
|
+
onChange: timeInputChange,
|
|
145
|
+
size: "sm",
|
|
146
|
+
w: 112,
|
|
147
|
+
styles: {
|
|
148
|
+
input: {
|
|
149
|
+
height: 30
|
|
171
150
|
}
|
|
172
|
-
),
|
|
173
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
174
|
-
Box.Box,
|
|
175
|
-
{
|
|
176
|
-
bg: "carbon.3",
|
|
177
|
-
pos: "absolute",
|
|
178
|
-
top: 0,
|
|
179
|
-
left: 80,
|
|
180
|
-
h: 32,
|
|
181
|
-
w: 32,
|
|
182
|
-
sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
|
|
183
|
-
}
|
|
184
|
-
)
|
|
185
|
-
] }),
|
|
186
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
187
|
-
TimeScollerPicker.TimeScollerPicker,
|
|
188
|
-
{
|
|
189
|
-
currentValue,
|
|
190
|
-
currentValueChangedBy,
|
|
191
|
-
onChange: timeScrollPickerChange,
|
|
192
|
-
start: startDate,
|
|
193
|
-
end: endDate,
|
|
194
|
-
utcOffset
|
|
195
151
|
}
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
152
|
+
}
|
|
153
|
+
),
|
|
154
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
155
|
+
Box.Box,
|
|
156
|
+
{
|
|
157
|
+
pos: "relative",
|
|
158
|
+
fz: 14,
|
|
159
|
+
fw: 400,
|
|
160
|
+
h: 224,
|
|
161
|
+
sx: (theme) => ({ color: theme.colors.carbon[8], overflow: "hidden", zIndex: 9999 }),
|
|
162
|
+
children: [
|
|
163
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Flex.Flex, { mah: "100%", gap: 8, children: [
|
|
164
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
165
|
+
Box.Box,
|
|
166
|
+
{
|
|
167
|
+
bg: "carbon.3",
|
|
168
|
+
pos: "absolute",
|
|
169
|
+
top: 0,
|
|
170
|
+
left: 0,
|
|
171
|
+
h: 32,
|
|
172
|
+
w: 32,
|
|
173
|
+
sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
|
|
174
|
+
}
|
|
175
|
+
),
|
|
176
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
177
|
+
Box.Box,
|
|
178
|
+
{
|
|
179
|
+
bg: "carbon.3",
|
|
180
|
+
pos: "absolute",
|
|
181
|
+
top: 0,
|
|
182
|
+
left: 40,
|
|
183
|
+
h: 32,
|
|
184
|
+
w: 32,
|
|
185
|
+
sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
|
|
186
|
+
}
|
|
187
|
+
),
|
|
188
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
189
|
+
Box.Box,
|
|
190
|
+
{
|
|
191
|
+
bg: "carbon.3",
|
|
192
|
+
pos: "absolute",
|
|
193
|
+
top: 0,
|
|
194
|
+
left: 80,
|
|
195
|
+
h: 32,
|
|
196
|
+
w: 32,
|
|
197
|
+
sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
|
|
198
|
+
}
|
|
199
|
+
)
|
|
200
|
+
] }),
|
|
201
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
202
|
+
TimeScollerPicker.TimeScollerPicker,
|
|
203
|
+
{
|
|
204
|
+
currentValue,
|
|
205
|
+
currentValueChangedBy,
|
|
206
|
+
onChange: timeScrollPickerChange,
|
|
207
|
+
start: startDate,
|
|
208
|
+
end: endDate,
|
|
209
|
+
utcOffset
|
|
210
|
+
}
|
|
211
|
+
)
|
|
212
|
+
]
|
|
213
|
+
}
|
|
214
|
+
)
|
|
215
|
+
] })
|
|
216
|
+
] }),
|
|
217
|
+
/* @__PURE__ */ jsxRuntime.jsx(Divider.Divider, { mx: -16 }),
|
|
218
|
+
/* @__PURE__ */ jsxRuntime.jsx(Group.Group, { children: /* @__PURE__ */ jsxRuntime.jsxs(index$1.Typography, { size: "sm", children: [
|
|
219
|
+
"Use",
|
|
220
|
+
" ",
|
|
221
|
+
/* @__PURE__ */ jsxRuntime.jsx(index$1.Typography, { fw: 600, component: "span", children: utcStr }),
|
|
222
|
+
" ",
|
|
223
|
+
"from your local time zone"
|
|
224
|
+
] }) })
|
|
225
|
+
] }) })
|
|
226
|
+
]
|
|
227
|
+
}
|
|
228
|
+
);
|
|
212
229
|
};
|
|
213
230
|
exports.DateTimePicker = DateTimePicker;
|