@tidbcloud/uikit 2.2.0 → 2.2.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.
Files changed (6) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/biz/SearchArea/index.cjs +24 -25
  3. package/dist/biz/SearchArea/index.d.cts +1 -0
  4. package/dist/biz/SearchArea/index.d.mts +1 -0
  5. package/dist/biz/SearchArea/index.mjs +24 -25
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @tidbcloud/uikit
2
2
 
3
+ ## 2.2.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Feat/search area i18n support ([#493](https://github.com/tidbcloud/tidbcloud-uikit/pull/493))
8
+
3
9
  ## 2.2.0
4
10
 
5
11
  ### Minor Changes
package/dist/biz/SearchArea/index.cjs CHANGED
@@ -16,6 +16,7 @@ const DatePicker = require("../Form/DatePicker.cjs");
16
16
  const FormTimeRangePicker = require("../Form/FormTimeRangePicker.cjs");
17
17
  const Box = 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/core/Box/Box.cjs");
18
18
  const Form = require("../Form/Form.cjs");
19
+ const useDebouncedValue = require("../../node_modules/.pnpm/@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-debounced-value/use-debounced-value.cjs");
19
20
  const MultiSelect = require("../Form/MultiSelect.cjs");
20
21
  const Select = require("../Form/Select.cjs");
21
22
  const TextInput = require("../Form/TextInput.cjs");
@@ -29,11 +30,17 @@ function FormItemRender(props) {
29
30
  resetSeed
30
31
  } = props;
31
32
  const [keyword, setKeyword] = React.useState(defaultValue);
33
+ const [debouncedKeyword] = useDebouncedValue.useDebouncedValue(keyword, 800);
32
34
  React.useEffect(() => {
33
35
  if (resetSeed > 0) {
34
36
  setKeyword(defaultValue);
35
37
  }
36
38
  }, [resetSeed]);
39
+ React.useEffect(() => {
40
+ if (type === "text") {
41
+ triggerSubmit();
42
+ }
43
+ }, [debouncedKeyword]);
37
44
  const triggerSubmit = () => onSubmit && onSubmit();
38
45
  function onKeyDownHandler(e) {
39
46
  if (e.key === "Enter") {
@@ -125,6 +132,7 @@ function FormItemRender(props) {
125
132
  name,
126
133
  value: keyword,
127
134
  clearable: true,
135
+ placeholder: placeholder ?? "",
128
136
  onChange: (val) => {
129
137
  setKeyword(val);
130
138
  triggerSubmit();
@@ -162,32 +170,23 @@ function SearchArea(props) {
162
170
  handleSubmit();
163
171
  }
164
172
  }, []);
165
- return /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(Form.Form, { onSubmit, ...rest, form, errorMessageProps: { mx: 16 }, withActions: false, children: [
166
- /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: /* @__PURE__ */ jsxRuntime.jsxs(Box.Box, { sx: { display: "flex", gap: 16, flexWrap: "wrap" }, children: [
167
- data.map((x) => /* @__PURE__ */ jsxRuntime.jsx(
168
- FormItemRender,
169
- {
170
- form,
171
- data: x,
172
- onSubmit: handleSubmit,
173
- defaultValue: state[x.name],
174
- resetSeed
175
- },
176
- x.name
177
- )),
178
- /* @__PURE__ */ jsxRuntime.jsxs(Box.Box, { sx: SX_Y_MID, children: [
179
- /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntime.jsx(index.Button, { variant: "subtle", onClick: handleReset, children: "Clear Filters" }) }),
180
- onRefresh && /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { ml: 16, sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntime.jsx(index.Button, { variant: "subtle", onClick: handleRefresh, children: /* @__PURE__ */ jsxRuntime.jsx(index$1.IconRefreshCw01, { size: 16 }) }) })
181
- ] })
182
- ] }) }),
183
- props.debugEnabled && /* @__PURE__ */ jsxRuntime.jsxs(Box.Box, { sx: { height: 320 }, children: [
184
- /* @__PURE__ */ jsxRuntime.jsxs("pre", { children: [
185
- "result = ",
186
- JSON.stringify(form.getValues(), null, 4)
187
- ] }),
188
- /* @__PURE__ */ jsxRuntime.jsx(index.Button, { variant: "light", onClick: () => window.location.reload(), children: "Refresh Page" })
173
+ return /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(Form.Form, { onSubmit, ...rest, form, errorMessageProps: { mx: 16 }, withActions: false, children: /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: /* @__PURE__ */ jsxRuntime.jsxs(Box.Box, { sx: { display: "flex", gap: 16, flexWrap: "wrap" }, children: [
174
+ data.map((x) => /* @__PURE__ */ jsxRuntime.jsx(
175
+ FormItemRender,
176
+ {
177
+ form,
178
+ data: x,
179
+ onSubmit: handleSubmit,
180
+ defaultValue: state[x.name],
181
+ resetSeed
182
+ },
183
+ x.name
184
+ )),
185
+ /* @__PURE__ */ jsxRuntime.jsxs(Box.Box, { sx: SX_Y_MID, children: [
186
+ /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntime.jsx(index.Button, { variant: "subtle", onClick: handleReset, children: props.clearFiltersText ?? "Clear Filters" }) }),
187
+ onRefresh && /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { ml: 16, sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntime.jsx(index.Button, { variant: "subtle", onClick: handleRefresh, children: /* @__PURE__ */ jsxRuntime.jsx(index$1.IconRefreshCw01, { size: 16 }) }) })
189
188
  ] })
190
- ] }) });
189
+ ] }) }) }) });
191
190
  }
192
191
  exports.DEFAULT_FORM_STATE_KEY = DEFAULT_FORM_STATE_KEY;
193
192
  exports.SearchArea = SearchArea;
package/dist/biz/SearchArea/index.d.cts CHANGED
@@ -42,6 +42,7 @@ export interface SearchAreaProps<T extends FieldValues> extends FormProps<T> {
42
42
  * CAUTIONS: must be set to different keys when using multiple SearchArea in the same page!!!
43
43
  */
44
44
  formStateQueryKey?: string;
45
+ clearFiltersText?: string;
45
46
  }
46
47
  /**
47
48
  * Please use `formStateQueryKey` instead if you have multiple <SearchArea /> components in the same page
package/dist/biz/SearchArea/index.d.mts CHANGED
@@ -42,6 +42,7 @@ export interface SearchAreaProps<T extends FieldValues> extends FormProps<T> {
42
42
  * CAUTIONS: must be set to different keys when using multiple SearchArea in the same page!!!
43
43
  */
44
44
  formStateQueryKey?: string;
45
+ clearFiltersText?: string;
45
46
  }
46
47
  /**
47
48
  * Please use `formStateQueryKey` instead if you have multiple <SearchArea /> components in the same page
package/dist/biz/SearchArea/index.mjs CHANGED
@@ -14,6 +14,7 @@ import { FormDatePicker } from "../Form/DatePicker.mjs";
14
14
  import { FormTimeRangePicker } from "../Form/FormTimeRangePicker.mjs";
15
15
  import { Box } 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/core/Box/Box.mjs";
16
16
  import { Form } from "../Form/Form.mjs";
17
+ import { useDebouncedValue } from "../../node_modules/.pnpm/@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-debounced-value/use-debounced-value.mjs";
17
18
  import { FormMultiSelect } from "../Form/MultiSelect.mjs";
18
19
  import { FormSelect } from "../Form/Select.mjs";
19
20
  import { FormTextInput } from "../Form/TextInput.mjs";
@@ -27,11 +28,17 @@ function FormItemRender(props) {
27
28
  resetSeed
28
29
  } = props;
29
30
  const [keyword, setKeyword] = useState(defaultValue);
31
+ const [debouncedKeyword] = useDebouncedValue(keyword, 800);
30
32
  useEffect(() => {
31
33
  if (resetSeed > 0) {
32
34
  setKeyword(defaultValue);
33
35
  }
34
36
  }, [resetSeed]);
37
+ useEffect(() => {
38
+ if (type === "text") {
39
+ triggerSubmit();
40
+ }
41
+ }, [debouncedKeyword]);
35
42
  const triggerSubmit = () => onSubmit && onSubmit();
36
43
  function onKeyDownHandler(e) {
37
44
  if (e.key === "Enter") {
@@ -123,6 +130,7 @@ function FormItemRender(props) {
123
130
  name,
124
131
  value: keyword,
125
132
  clearable: true,
133
+ placeholder: placeholder ?? "",
126
134
  onChange: (val) => {
127
135
  setKeyword(val);
128
136
  triggerSubmit();
@@ -160,32 +168,23 @@ function SearchArea(props) {
160
168
  handleSubmit();
161
169
  }
162
170
  }, []);
163
- return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Form, { onSubmit, ...rest, form, errorMessageProps: { mx: 16 }, withActions: false, children: [
164
- /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 16, flexWrap: "wrap" }, children: [
165
- data.map((x) => /* @__PURE__ */ jsx(
166
- FormItemRender,
167
- {
168
- form,
169
- data: x,
170
- onSubmit: handleSubmit,
171
- defaultValue: state[x.name],
172
- resetSeed
173
- },
174
- x.name
175
- )),
176
- /* @__PURE__ */ jsxs(Box, { sx: SX_Y_MID, children: [
177
- /* @__PURE__ */ jsx(Box, { sx: SX_Y_MID, children: /* @__PURE__ */ jsx(Button, { variant: "subtle", onClick: handleReset, children: "Clear Filters" }) }),
178
- onRefresh && /* @__PURE__ */ jsx(Box, { ml: 16, sx: SX_Y_MID, children: /* @__PURE__ */ jsx(Button, { variant: "subtle", onClick: handleRefresh, children: /* @__PURE__ */ jsx(IconRefreshCw01, { size: 16 }) }) })
179
- ] })
180
- ] }) }),
181
- props.debugEnabled && /* @__PURE__ */ jsxs(Box, { sx: { height: 320 }, children: [
182
- /* @__PURE__ */ jsxs("pre", { children: [
183
- "result = ",
184
- JSON.stringify(form.getValues(), null, 4)
185
- ] }),
186
- /* @__PURE__ */ jsx(Button, { variant: "light", onClick: () => window.location.reload(), children: "Refresh Page" })
171
+ return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Form, { onSubmit, ...rest, form, errorMessageProps: { mx: 16 }, withActions: false, children: /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 16, flexWrap: "wrap" }, children: [
172
+ data.map((x) => /* @__PURE__ */ jsx(
173
+ FormItemRender,
174
+ {
175
+ form,
176
+ data: x,
177
+ onSubmit: handleSubmit,
178
+ defaultValue: state[x.name],
179
+ resetSeed
180
+ },
181
+ x.name
182
+ )),
183
+ /* @__PURE__ */ jsxs(Box, { sx: SX_Y_MID, children: [
184
+ /* @__PURE__ */ jsx(Box, { sx: SX_Y_MID, children: /* @__PURE__ */ jsx(Button, { variant: "subtle", onClick: handleReset, children: props.clearFiltersText ?? "Clear Filters" }) }),
185
+ onRefresh && /* @__PURE__ */ jsx(Box, { ml: 16, sx: SX_Y_MID, children: /* @__PURE__ */ jsx(Button, { variant: "subtle", onClick: handleRefresh, children: /* @__PURE__ */ jsx(IconRefreshCw01, { size: 16 }) }) })
187
186
  ] })
188
- ] }) });
187
+ ] }) }) }) });
189
188
  }
190
189
  export {
191
190
  DEFAULT_FORM_STATE_KEY,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tidbcloud/uikit",
3
- "version": "2.2.0",
3
+ "version": "2.2.1",
4
4
  "description": "tidbcloud uikit",
5
5
  "type": "module",
6
6
  "main": "dist/primitive/index.cjs",