@tidbcloud/uikit 2.5.6 → 2.5.8
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 +12 -0
- package/dist/biz/Form/SegmentControl.cjs +17 -2
- package/dist/biz/Form/SegmentControl.d.cts +1 -1
- package/dist/biz/Form/SegmentControl.d.mts +1 -1
- package/dist/biz/Form/SegmentControl.mjs +17 -2
- package/dist/biz/PropertyCard/index.cjs +21 -22
- package/dist/biz/PropertyCard/index.d.cts +1 -1
- package/dist/biz/PropertyCard/index.d.mts +1 -1
- package/dist/biz/PropertyCard/index.mjs +22 -23
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @tidbcloud/uikit
|
|
2
2
|
|
|
3
|
+
## 2.5.8
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- fix: refactor PropertyCard to use context for props management ([#606](https://github.com/tidbcloud/tidbcloud-uikit/pull/606))
|
|
8
|
+
|
|
9
|
+
## 2.5.7
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- feat: enhance FormSegmentedControl to support external onChange handler ([#603](https://github.com/tidbcloud/tidbcloud-uikit/pull/603))
|
|
14
|
+
|
|
3
15
|
## 2.5.6
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -8,7 +8,12 @@ const reactHookForm = require("react-hook-form");
|
|
|
8
8
|
;/* empty css */
|
|
9
9
|
;/* empty css */
|
|
10
10
|
const SegmentedControl = 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/SegmentedControl/SegmentedControl.cjs");
|
|
11
|
-
const FormSegmentedControl = ({
|
|
11
|
+
const FormSegmentedControl = ({
|
|
12
|
+
name,
|
|
13
|
+
rules,
|
|
14
|
+
onChange: formOnChange,
|
|
15
|
+
...restProps
|
|
16
|
+
}) => {
|
|
12
17
|
const { control } = reactHookForm.useFormContext();
|
|
13
18
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
14
19
|
reactHookForm.Controller,
|
|
@@ -17,7 +22,17 @@ const FormSegmentedControl = ({ name, rules, ...restProps }) => {
|
|
|
17
22
|
control,
|
|
18
23
|
rules,
|
|
19
24
|
render: ({ field: { onChange, value } }) => {
|
|
20
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
25
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
26
|
+
SegmentedControl.SegmentedControl,
|
|
27
|
+
{
|
|
28
|
+
value,
|
|
29
|
+
onChange: (val) => {
|
|
30
|
+
onChange(val);
|
|
31
|
+
formOnChange == null ? void 0 : formOnChange(val);
|
|
32
|
+
},
|
|
33
|
+
...restProps
|
|
34
|
+
}
|
|
35
|
+
);
|
|
21
36
|
}
|
|
22
37
|
}
|
|
23
38
|
);
|
|
@@ -4,4 +4,4 @@ export interface FormSegmentedControlProps extends SegmentedControlProps {
|
|
|
4
4
|
name: string;
|
|
5
5
|
rules?: RegisterOptions;
|
|
6
6
|
}
|
|
7
|
-
export declare const FormSegmentedControl: ({ name, rules, ...restProps }: FormSegmentedControlProps) => import("react/jsx-runtime.js").JSX.Element;
|
|
7
|
+
export declare const FormSegmentedControl: ({ name, rules, onChange: formOnChange, ...restProps }: FormSegmentedControlProps) => import("react/jsx-runtime.js").JSX.Element;
|
|
@@ -4,4 +4,4 @@ export interface FormSegmentedControlProps extends SegmentedControlProps {
|
|
|
4
4
|
name: string;
|
|
5
5
|
rules?: RegisterOptions;
|
|
6
6
|
}
|
|
7
|
-
export declare const FormSegmentedControl: ({ name, rules, ...restProps }: FormSegmentedControlProps) => import("react/jsx-runtime.js").JSX.Element;
|
|
7
|
+
export declare const FormSegmentedControl: ({ name, rules, onChange: formOnChange, ...restProps }: FormSegmentedControlProps) => import("react/jsx-runtime.js").JSX.Element;
|
|
@@ -6,7 +6,12 @@ import { useFormContext, Controller } from "react-hook-form";
|
|
|
6
6
|
/* empty css */
|
|
7
7
|
/* empty css */
|
|
8
8
|
import { SegmentedControl } 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/SegmentedControl/SegmentedControl.mjs";
|
|
9
|
-
const FormSegmentedControl = ({
|
|
9
|
+
const FormSegmentedControl = ({
|
|
10
|
+
name,
|
|
11
|
+
rules,
|
|
12
|
+
onChange: formOnChange,
|
|
13
|
+
...restProps
|
|
14
|
+
}) => {
|
|
10
15
|
const { control } = useFormContext();
|
|
11
16
|
return /* @__PURE__ */ jsx(
|
|
12
17
|
Controller,
|
|
@@ -15,7 +20,17 @@ const FormSegmentedControl = ({ name, rules, ...restProps }) => {
|
|
|
15
20
|
control,
|
|
16
21
|
rules,
|
|
17
22
|
render: ({ field: { onChange, value } }) => {
|
|
18
|
-
return /* @__PURE__ */ jsx(
|
|
23
|
+
return /* @__PURE__ */ jsx(
|
|
24
|
+
SegmentedControl,
|
|
25
|
+
{
|
|
26
|
+
value,
|
|
27
|
+
onChange: (val) => {
|
|
28
|
+
onChange(val);
|
|
29
|
+
formOnChange == null ? void 0 : formOnChange(val);
|
|
30
|
+
},
|
|
31
|
+
...restProps
|
|
32
|
+
}
|
|
33
|
+
);
|
|
19
34
|
}
|
|
20
35
|
}
|
|
21
36
|
);
|
|
@@ -12,34 +12,33 @@ const Card = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_j
|
|
|
12
12
|
const Stack = 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/Stack/Stack.cjs");
|
|
13
13
|
const Group = 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/Group/Group.cjs");
|
|
14
14
|
const Divider$1 = 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/Divider/Divider.cjs");
|
|
15
|
+
const PropertyCardContext = React.createContext(void 0);
|
|
15
16
|
const PropertyCard = ({ title, children, labelProps, valueProps, ...rest }) => {
|
|
16
|
-
const
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
labelProps: {
|
|
24
|
-
...labelProps,
|
|
25
|
-
...child.props.labelProps
|
|
26
|
-
},
|
|
27
|
-
valueProps: {
|
|
28
|
-
...valueProps,
|
|
29
|
-
...child.props.valueProps
|
|
30
|
-
}
|
|
31
|
-
});
|
|
32
|
-
});
|
|
33
|
-
};
|
|
17
|
+
const contextValue = React.useMemo(
|
|
18
|
+
() => ({
|
|
19
|
+
labelProps,
|
|
20
|
+
valueProps
|
|
21
|
+
}),
|
|
22
|
+
[labelProps, valueProps]
|
|
23
|
+
);
|
|
34
24
|
return /* @__PURE__ */ jsxRuntime.jsxs(Card.Card, { p: "xl", ...rest, children: [
|
|
35
|
-
/* @__PURE__ */ jsxRuntime.jsx(index.Typography, { variant: "headline-sm", mb: 16, children: title }),
|
|
36
|
-
/* @__PURE__ */ jsxRuntime.jsx(Stack.Stack, { gap: 16, children
|
|
25
|
+
title && /* @__PURE__ */ jsxRuntime.jsx(index.Typography, { variant: "headline-sm", mb: 16, children: title }),
|
|
26
|
+
/* @__PURE__ */ jsxRuntime.jsx(PropertyCardContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(Stack.Stack, { gap: 16, children }) })
|
|
37
27
|
] });
|
|
38
28
|
};
|
|
39
29
|
const Item = ({ label, children, labelProps, valueProps, ...rest }) => {
|
|
30
|
+
const context = React.useContext(PropertyCardContext);
|
|
31
|
+
const mergedLabelProps = {
|
|
32
|
+
...context == null ? void 0 : context.labelProps,
|
|
33
|
+
...labelProps
|
|
34
|
+
};
|
|
35
|
+
const mergedValueProps = {
|
|
36
|
+
...context == null ? void 0 : context.valueProps,
|
|
37
|
+
...valueProps
|
|
38
|
+
};
|
|
40
39
|
return /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { gap: "md", wrap: "nowrap", ...rest, children: [
|
|
41
|
-
/* @__PURE__ */ jsxRuntime.jsx(index.Typography, { variant: "label-lg", miw: 128, ...
|
|
42
|
-
/* @__PURE__ */ jsxRuntime.jsx(index.Typography, { variant: "body-lg", sx: { wordBreak: "break-all" }, ...
|
|
40
|
+
/* @__PURE__ */ jsxRuntime.jsx(index.Typography, { variant: "label-lg", miw: 128, ...mergedLabelProps, children: label }),
|
|
41
|
+
/* @__PURE__ */ jsxRuntime.jsx(index.Typography, { variant: "body-lg", sx: { wordBreak: "break-all" }, ...mergedValueProps, children })
|
|
43
42
|
] });
|
|
44
43
|
};
|
|
45
44
|
const Divider = (props) => {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { createContext, useMemo, useContext } from "react";
|
|
3
3
|
/* empty css */
|
|
4
4
|
/* empty css */
|
|
5
5
|
/* empty css */
|
|
@@ -10,34 +10,33 @@ import { Card } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_j
|
|
|
10
10
|
import { Stack } 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/Stack/Stack.mjs";
|
|
11
11
|
import { Group } 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/Group/Group.mjs";
|
|
12
12
|
import { Divider as Divider$1 } 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/Divider/Divider.mjs";
|
|
13
|
+
const PropertyCardContext = createContext(void 0);
|
|
13
14
|
const PropertyCard = ({ title, children, labelProps, valueProps, ...rest }) => {
|
|
14
|
-
const
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
labelProps: {
|
|
22
|
-
...labelProps,
|
|
23
|
-
...child.props.labelProps
|
|
24
|
-
},
|
|
25
|
-
valueProps: {
|
|
26
|
-
...valueProps,
|
|
27
|
-
...child.props.valueProps
|
|
28
|
-
}
|
|
29
|
-
});
|
|
30
|
-
});
|
|
31
|
-
};
|
|
15
|
+
const contextValue = useMemo(
|
|
16
|
+
() => ({
|
|
17
|
+
labelProps,
|
|
18
|
+
valueProps
|
|
19
|
+
}),
|
|
20
|
+
[labelProps, valueProps]
|
|
21
|
+
);
|
|
32
22
|
return /* @__PURE__ */ jsxs(Card, { p: "xl", ...rest, children: [
|
|
33
|
-
/* @__PURE__ */ jsx(Typography, { variant: "headline-sm", mb: 16, children: title }),
|
|
34
|
-
/* @__PURE__ */ jsx(Stack, { gap: 16, children
|
|
23
|
+
title && /* @__PURE__ */ jsx(Typography, { variant: "headline-sm", mb: 16, children: title }),
|
|
24
|
+
/* @__PURE__ */ jsx(PropertyCardContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(Stack, { gap: 16, children }) })
|
|
35
25
|
] });
|
|
36
26
|
};
|
|
37
27
|
const Item = ({ label, children, labelProps, valueProps, ...rest }) => {
|
|
28
|
+
const context = useContext(PropertyCardContext);
|
|
29
|
+
const mergedLabelProps = {
|
|
30
|
+
...context == null ? void 0 : context.labelProps,
|
|
31
|
+
...labelProps
|
|
32
|
+
};
|
|
33
|
+
const mergedValueProps = {
|
|
34
|
+
...context == null ? void 0 : context.valueProps,
|
|
35
|
+
...valueProps
|
|
36
|
+
};
|
|
38
37
|
return /* @__PURE__ */ jsxs(Group, { gap: "md", wrap: "nowrap", ...rest, children: [
|
|
39
|
-
/* @__PURE__ */ jsx(Typography, { variant: "label-lg", miw: 128, ...
|
|
40
|
-
/* @__PURE__ */ jsx(Typography, { variant: "body-lg", sx: { wordBreak: "break-all" }, ...
|
|
38
|
+
/* @__PURE__ */ jsx(Typography, { variant: "label-lg", miw: 128, ...mergedLabelProps, children: label }),
|
|
39
|
+
/* @__PURE__ */ jsx(Typography, { variant: "body-lg", sx: { wordBreak: "break-all" }, ...mergedValueProps, children })
|
|
41
40
|
] });
|
|
42
41
|
};
|
|
43
42
|
const Divider = (props) => {
|