@bsol-oss/react-datatable5 11.0.0-beta.3 → 11.0.0-beta.4
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/dist/index.js +26 -24
- package/dist/index.mjs +26 -24
- package/dist/types/components/Form/components/TagPicker.d.ts +4 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -4433,13 +4433,13 @@ const RadioCardRoot = react.RadioCard.Root;
|
|
|
4433
4433
|
react.RadioCard.Label;
|
|
4434
4434
|
react.RadioCard.ItemIndicator;
|
|
4435
4435
|
|
|
4436
|
-
const TagPicker = ({ column }) => {
|
|
4436
|
+
const TagPicker = ({ column, schema, prefix }) => {
|
|
4437
4437
|
const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
|
|
4438
|
-
const {
|
|
4438
|
+
const { serverUrl } = useSchemaContext();
|
|
4439
4439
|
if (schema.properties == undefined) {
|
|
4440
4440
|
throw new Error("schema properties undefined when using DatePicker");
|
|
4441
4441
|
}
|
|
4442
|
-
const { gridColumn, gridRow, in_table, object_id_column } = schema
|
|
4442
|
+
const { gridColumn, gridRow, in_table, object_id_column } = schema;
|
|
4443
4443
|
if (in_table === undefined) {
|
|
4444
4444
|
throw new Error("in_table is undefined when using TagPicker");
|
|
4445
4445
|
}
|
|
@@ -4465,7 +4465,7 @@ const TagPicker = ({ column }) => {
|
|
|
4465
4465
|
});
|
|
4466
4466
|
const object_id = watch(object_id_column);
|
|
4467
4467
|
const existingTagsQuery = reactQuery.useQuery({
|
|
4468
|
-
queryKey: [`existing`, in_table, object_id_column, object_id],
|
|
4468
|
+
queryKey: [`existing`, { in_table, object_id_column }, object_id],
|
|
4469
4469
|
queryFn: async () => {
|
|
4470
4470
|
return await getTableData({
|
|
4471
4471
|
serverUrl,
|
|
@@ -4522,9 +4522,7 @@ const ColumnRenderer = ({ column, properties, prefix, }) => {
|
|
|
4522
4522
|
if (properties === undefined) {
|
|
4523
4523
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
4524
4524
|
}
|
|
4525
|
-
console.log(`${column} does not exist when using ColumnRenderer`, { properties,
|
|
4526
|
-
column,
|
|
4527
|
-
prefix, }, "fdpok");
|
|
4525
|
+
console.log(`${column} does not exist when using ColumnRenderer`, { properties, column, prefix }, "fdpok");
|
|
4528
4526
|
const colSchema = properties[column];
|
|
4529
4527
|
if (colSchema === undefined) {
|
|
4530
4528
|
throw new Error(`${column} does not exist when using ColumnRenderer`);
|
|
@@ -4666,14 +4664,14 @@ const FormInternal = () => {
|
|
|
4666
4664
|
};
|
|
4667
4665
|
};
|
|
4668
4666
|
if (isSuccess) {
|
|
4669
|
-
return (jsxRuntime.jsxs(react.Grid, { gap: 2, children: [jsxRuntime.jsx(react.Heading, { children: translate.t("title") }), jsxRuntime.jsxs(react.Alert.Root, { status: "success", children: [jsxRuntime.jsx(react.Alert.Indicator, {}), jsxRuntime.jsx(react.Alert.Title, { children: translate.t("submitSuccess") })] }), jsxRuntime.jsx(Button, { onClick: () => {
|
|
4670
|
-
|
|
4671
|
-
|
|
4672
|
-
|
|
4673
|
-
|
|
4674
|
-
|
|
4675
|
-
|
|
4676
|
-
|
|
4667
|
+
return (jsxRuntime.jsxs(react.Grid, { gap: 2, children: [jsxRuntime.jsx(react.Heading, { children: translate.t("title") }), jsxRuntime.jsxs(react.Alert.Root, { status: "success", children: [jsxRuntime.jsx(react.Alert.Indicator, {}), jsxRuntime.jsx(react.Alert.Title, { children: translate.t("submitSuccess") })] }), jsxRuntime.jsx(react.Flex, { justifyContent: 'end', children: jsxRuntime.jsx(Button, { onClick: () => {
|
|
4668
|
+
setIsError(false);
|
|
4669
|
+
setIsSubmiting(false);
|
|
4670
|
+
setIsSuccess(false);
|
|
4671
|
+
setIsConfirming(false);
|
|
4672
|
+
setValidatedData(undefined);
|
|
4673
|
+
methods.reset();
|
|
4674
|
+
}, formNoValidate: true, children: translate.t("submitAgain") }) })] }));
|
|
4677
4675
|
}
|
|
4678
4676
|
if (isConfirming) {
|
|
4679
4677
|
return (jsxRuntime.jsxs(react.Grid, { gap: 2, children: [jsxRuntime.jsxs(react.Heading, { children: [" ", translate.t("title")] }), jsxRuntime.jsx(DataListRoot, { orientation: "horizontal", gap: 4, display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat(${rowNumber ?? "auto-fit"}, auto)`, children: ordered.map((column) => {
|
|
@@ -4754,11 +4752,11 @@ const FormInternal = () => {
|
|
|
4754
4752
|
return jsxRuntime.jsx(jsxRuntime.Fragment, { children: `null ${column}` });
|
|
4755
4753
|
}
|
|
4756
4754
|
return jsxRuntime.jsx(jsxRuntime.Fragment, { children: `unknown type ${column}` });
|
|
4757
|
-
}) }), jsxRuntime.jsx(Button, { onClick: () => {
|
|
4758
|
-
|
|
4759
|
-
|
|
4760
|
-
|
|
4761
|
-
|
|
4755
|
+
}) }), jsxRuntime.jsxs(react.Flex, { justifyContent: "end", gap: "2", children: [jsxRuntime.jsx(Button, { onClick: () => {
|
|
4756
|
+
setIsConfirming(false);
|
|
4757
|
+
}, variant: "subtle", children: translate.t("cancel") }), jsxRuntime.jsx(Button, { onClick: () => {
|
|
4758
|
+
onFormSubmit(validatedData);
|
|
4759
|
+
}, children: translate.t("confirm") })] }), isSubmiting && (jsxRuntime.jsx(react.Box, { pos: "absolute", inset: "0", bg: "bg/80", children: jsxRuntime.jsx(react.Center, { h: "full", children: jsxRuntime.jsx(react.Spinner, { color: "teal.500" }) }) })), isError && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(react.Alert.Root, { status: "error", children: jsxRuntime.jsx(react.Alert.Title, { children: jsxRuntime.jsx(AccordionRoot, { collapsible: true, defaultValue: ["b"], children: jsxRuntime.jsxs(AccordionItem, { value: "b", children: [jsxRuntime.jsxs(AccordionItemTrigger, { children: [jsxRuntime.jsx(react.Alert.Indicator, {}), `${error}`] }), jsxRuntime.jsx(AccordionItemContent, { children: `${JSON.stringify(error)}` })] }) }) }) }) }))] }));
|
|
4762
4760
|
}
|
|
4763
4761
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(react.Grid, { gap: 2, children: [jsxRuntime.jsxs(react.Heading, { children: [" ", translate.t("title")] }), jsxRuntime.jsx(react.Grid, { gap: 4, gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat(${rowNumber ?? "auto-fit"}, auto)`, children: ordered.map((column) => {
|
|
4764
4762
|
return (jsxRuntime.jsx(ColumnRenderer
|
|
@@ -4766,9 +4764,11 @@ const FormInternal = () => {
|
|
|
4766
4764
|
, {
|
|
4767
4765
|
// @ts-expect-error find suitable types
|
|
4768
4766
|
properties: properties, prefix: ``, column }, `form-${column}`));
|
|
4769
|
-
}) }), jsxRuntime.jsx(Button, { onClick: () => {
|
|
4770
|
-
|
|
4771
|
-
|
|
4767
|
+
}) }), jsxRuntime.jsxs(react.Flex, { justifyContent: "end", gap: "2", children: [jsxRuntime.jsx(Button, { onClick: () => {
|
|
4768
|
+
methods.reset();
|
|
4769
|
+
}, variant: "subtle", children: translate.t("reset") }), jsxRuntime.jsx(Button, { onClick: () => {
|
|
4770
|
+
methods.handleSubmit(onValid)();
|
|
4771
|
+
}, formNoValidate: true, children: translate.t("submit") })] })] }), isError && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["isError", jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [" ", `${error}`] })] }))] }));
|
|
4772
4772
|
};
|
|
4773
4773
|
const Form = ({ schema, idMap, setIdMap, form, serverUrl, translate, order = [], ignore = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, }) => {
|
|
4774
4774
|
const { properties } = schema;
|
|
@@ -4790,7 +4790,9 @@ const Form = ({ schema, idMap, setIdMap, form, serverUrl, translate, order = [],
|
|
|
4790
4790
|
};
|
|
4791
4791
|
|
|
4792
4792
|
const useForm = ({ preLoadedValues, keyPrefix }) => {
|
|
4793
|
-
const form = reactHookForm.useForm({
|
|
4793
|
+
const form = reactHookForm.useForm({
|
|
4794
|
+
values: preLoadedValues,
|
|
4795
|
+
});
|
|
4794
4796
|
const [idMap, setIdMap] = React.useState({});
|
|
4795
4797
|
const translate = reactI18next.useTranslation("", { keyPrefix });
|
|
4796
4798
|
return {
|
package/dist/index.mjs
CHANGED
|
@@ -4413,13 +4413,13 @@ const RadioCardRoot = RadioCard.Root;
|
|
|
4413
4413
|
RadioCard.Label;
|
|
4414
4414
|
RadioCard.ItemIndicator;
|
|
4415
4415
|
|
|
4416
|
-
const TagPicker = ({ column }) => {
|
|
4416
|
+
const TagPicker = ({ column, schema, prefix }) => {
|
|
4417
4417
|
const { watch, formState: { errors }, setValue, } = useFormContext();
|
|
4418
|
-
const {
|
|
4418
|
+
const { serverUrl } = useSchemaContext();
|
|
4419
4419
|
if (schema.properties == undefined) {
|
|
4420
4420
|
throw new Error("schema properties undefined when using DatePicker");
|
|
4421
4421
|
}
|
|
4422
|
-
const { gridColumn, gridRow, in_table, object_id_column } = schema
|
|
4422
|
+
const { gridColumn, gridRow, in_table, object_id_column } = schema;
|
|
4423
4423
|
if (in_table === undefined) {
|
|
4424
4424
|
throw new Error("in_table is undefined when using TagPicker");
|
|
4425
4425
|
}
|
|
@@ -4445,7 +4445,7 @@ const TagPicker = ({ column }) => {
|
|
|
4445
4445
|
});
|
|
4446
4446
|
const object_id = watch(object_id_column);
|
|
4447
4447
|
const existingTagsQuery = useQuery({
|
|
4448
|
-
queryKey: [`existing`, in_table, object_id_column, object_id],
|
|
4448
|
+
queryKey: [`existing`, { in_table, object_id_column }, object_id],
|
|
4449
4449
|
queryFn: async () => {
|
|
4450
4450
|
return await getTableData({
|
|
4451
4451
|
serverUrl,
|
|
@@ -4502,9 +4502,7 @@ const ColumnRenderer = ({ column, properties, prefix, }) => {
|
|
|
4502
4502
|
if (properties === undefined) {
|
|
4503
4503
|
return jsx(Fragment, {});
|
|
4504
4504
|
}
|
|
4505
|
-
console.log(`${column} does not exist when using ColumnRenderer`, { properties,
|
|
4506
|
-
column,
|
|
4507
|
-
prefix, }, "fdpok");
|
|
4505
|
+
console.log(`${column} does not exist when using ColumnRenderer`, { properties, column, prefix }, "fdpok");
|
|
4508
4506
|
const colSchema = properties[column];
|
|
4509
4507
|
if (colSchema === undefined) {
|
|
4510
4508
|
throw new Error(`${column} does not exist when using ColumnRenderer`);
|
|
@@ -4646,14 +4644,14 @@ const FormInternal = () => {
|
|
|
4646
4644
|
};
|
|
4647
4645
|
};
|
|
4648
4646
|
if (isSuccess) {
|
|
4649
|
-
return (jsxs(Grid, { gap: 2, children: [jsx(Heading, { children: translate.t("title") }), jsxs(Alert.Root, { status: "success", children: [jsx(Alert.Indicator, {}), jsx(Alert.Title, { children: translate.t("submitSuccess") })] }), jsx(Button, { onClick: () => {
|
|
4650
|
-
|
|
4651
|
-
|
|
4652
|
-
|
|
4653
|
-
|
|
4654
|
-
|
|
4655
|
-
|
|
4656
|
-
|
|
4647
|
+
return (jsxs(Grid, { gap: 2, children: [jsx(Heading, { children: translate.t("title") }), jsxs(Alert.Root, { status: "success", children: [jsx(Alert.Indicator, {}), jsx(Alert.Title, { children: translate.t("submitSuccess") })] }), jsx(Flex, { justifyContent: 'end', children: jsx(Button, { onClick: () => {
|
|
4648
|
+
setIsError(false);
|
|
4649
|
+
setIsSubmiting(false);
|
|
4650
|
+
setIsSuccess(false);
|
|
4651
|
+
setIsConfirming(false);
|
|
4652
|
+
setValidatedData(undefined);
|
|
4653
|
+
methods.reset();
|
|
4654
|
+
}, formNoValidate: true, children: translate.t("submitAgain") }) })] }));
|
|
4657
4655
|
}
|
|
4658
4656
|
if (isConfirming) {
|
|
4659
4657
|
return (jsxs(Grid, { gap: 2, children: [jsxs(Heading, { children: [" ", translate.t("title")] }), jsx(DataListRoot, { orientation: "horizontal", gap: 4, display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat(${rowNumber ?? "auto-fit"}, auto)`, children: ordered.map((column) => {
|
|
@@ -4734,11 +4732,11 @@ const FormInternal = () => {
|
|
|
4734
4732
|
return jsx(Fragment, { children: `null ${column}` });
|
|
4735
4733
|
}
|
|
4736
4734
|
return jsx(Fragment, { children: `unknown type ${column}` });
|
|
4737
|
-
}) }), jsx(Button, { onClick: () => {
|
|
4738
|
-
|
|
4739
|
-
|
|
4740
|
-
|
|
4741
|
-
|
|
4735
|
+
}) }), jsxs(Flex, { justifyContent: "end", gap: "2", children: [jsx(Button, { onClick: () => {
|
|
4736
|
+
setIsConfirming(false);
|
|
4737
|
+
}, variant: "subtle", children: translate.t("cancel") }), jsx(Button, { onClick: () => {
|
|
4738
|
+
onFormSubmit(validatedData);
|
|
4739
|
+
}, children: translate.t("confirm") })] }), isSubmiting && (jsx(Box, { pos: "absolute", inset: "0", bg: "bg/80", children: jsx(Center, { h: "full", children: jsx(Spinner, { color: "teal.500" }) }) })), isError && (jsx(Fragment, { children: jsx(Alert.Root, { status: "error", children: jsx(Alert.Title, { children: jsx(AccordionRoot, { collapsible: true, defaultValue: ["b"], children: jsxs(AccordionItem, { value: "b", children: [jsxs(AccordionItemTrigger, { children: [jsx(Alert.Indicator, {}), `${error}`] }), jsx(AccordionItemContent, { children: `${JSON.stringify(error)}` })] }) }) }) }) }))] }));
|
|
4742
4740
|
}
|
|
4743
4741
|
return (jsxs(Fragment, { children: [jsxs(Grid, { gap: 2, children: [jsxs(Heading, { children: [" ", translate.t("title")] }), jsx(Grid, { gap: 4, gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat(${rowNumber ?? "auto-fit"}, auto)`, children: ordered.map((column) => {
|
|
4744
4742
|
return (jsx(ColumnRenderer
|
|
@@ -4746,9 +4744,11 @@ const FormInternal = () => {
|
|
|
4746
4744
|
, {
|
|
4747
4745
|
// @ts-expect-error find suitable types
|
|
4748
4746
|
properties: properties, prefix: ``, column }, `form-${column}`));
|
|
4749
|
-
}) }), jsx(Button, { onClick: () => {
|
|
4750
|
-
|
|
4751
|
-
|
|
4747
|
+
}) }), jsxs(Flex, { justifyContent: "end", gap: "2", children: [jsx(Button, { onClick: () => {
|
|
4748
|
+
methods.reset();
|
|
4749
|
+
}, variant: "subtle", children: translate.t("reset") }), jsx(Button, { onClick: () => {
|
|
4750
|
+
methods.handleSubmit(onValid)();
|
|
4751
|
+
}, formNoValidate: true, children: translate.t("submit") })] })] }), isError && (jsxs(Fragment, { children: ["isError", jsxs(Fragment, { children: [" ", `${error}`] })] }))] }));
|
|
4752
4752
|
};
|
|
4753
4753
|
const Form = ({ schema, idMap, setIdMap, form, serverUrl, translate, order = [], ignore = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, }) => {
|
|
4754
4754
|
const { properties } = schema;
|
|
@@ -4770,7 +4770,9 @@ const Form = ({ schema, idMap, setIdMap, form, serverUrl, translate, order = [],
|
|
|
4770
4770
|
};
|
|
4771
4771
|
|
|
4772
4772
|
const useForm = ({ preLoadedValues, keyPrefix }) => {
|
|
4773
|
-
const form = useForm$1({
|
|
4773
|
+
const form = useForm$1({
|
|
4774
|
+
values: preLoadedValues,
|
|
4775
|
+
});
|
|
4774
4776
|
const [idMap, setIdMap] = useState({});
|
|
4775
4777
|
const translate = useTranslation("", { keyPrefix });
|
|
4776
4778
|
return {
|
|
@@ -1,5 +1,8 @@
|
|
|
1
|
+
import { CustomJSONSchema7 } from "./StringInputField";
|
|
1
2
|
export interface TagPickerProps {
|
|
2
3
|
column: string;
|
|
4
|
+
schema: CustomJSONSchema7;
|
|
5
|
+
prefix: string;
|
|
3
6
|
}
|
|
4
7
|
export interface Tag {
|
|
5
8
|
id: string;
|
|
@@ -24,4 +27,4 @@ export interface TagData {
|
|
|
24
27
|
export interface TagResponse {
|
|
25
28
|
data: TagData[];
|
|
26
29
|
}
|
|
27
|
-
export declare const TagPicker: ({ column }: TagPickerProps) => import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
export declare const TagPicker: ({ column, schema, prefix }: TagPickerProps) => import("react/jsx-runtime").JSX.Element;
|