@bsol-oss/react-datatable5 12.0.0-beta.43 → 12.0.0-beta.45
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.d.ts
CHANGED
|
@@ -473,7 +473,7 @@ interface CustomJSONSchema7 extends JSONSchema7 {
|
|
|
473
473
|
displayDateFormat?: string;
|
|
474
474
|
timeFormat?: string;
|
|
475
475
|
displayTimeFormat?: string;
|
|
476
|
-
|
|
476
|
+
showLabel?: boolean;
|
|
477
477
|
}
|
|
478
478
|
|
|
479
479
|
interface FormRootProps<TData extends FieldValues> {
|
package/dist/index.js
CHANGED
|
@@ -3639,7 +3639,7 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
|
|
|
3639
3639
|
};
|
|
3640
3640
|
|
|
3641
3641
|
function removeIndex(str) {
|
|
3642
|
-
return str.replace(/\.\d+\./g,
|
|
3642
|
+
return str.replace(/\.\d+\./g, ".");
|
|
3643
3643
|
}
|
|
3644
3644
|
|
|
3645
3645
|
const ArrayRenderer = ({ schema, column, prefix, }) => {
|
|
@@ -3651,13 +3651,13 @@ const ArrayRenderer = ({ schema, column, prefix, }) => {
|
|
|
3651
3651
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
3652
3652
|
const { formState: { errors }, setValue, watch, } = reactHookForm.useFormContext();
|
|
3653
3653
|
const fields = (watch(colLabel) ?? []);
|
|
3654
|
-
return (jsxRuntime.jsxs(react.Flex, { gridRow, gridColumn, flexFlow: "column", gap: 2, children: [jsxRuntime.jsxs(react.Box, { as: "label", children: [`${translate.t(removeIndex(`${colLabel}.field_label`))}`, isRequired && jsxRuntime.jsx("span", { children: "*" })] }), jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: 2, children: fields.map((field, index) => (jsxRuntime.jsxs(react.
|
|
3654
|
+
return (jsxRuntime.jsxs(react.Flex, { gridRow, gridColumn, flexFlow: "column", gap: 2, children: [jsxRuntime.jsxs(react.Box, { as: "label", children: [`${translate.t(removeIndex(`${colLabel}.field_label`))}`, isRequired && jsxRuntime.jsx("span", { children: "*" })] }), jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: 2, children: fields.map((field, index) => (jsxRuntime.jsxs(react.Grid, { gridTemplateColumns: '1fr auto', gap: 2, bgColor: { base: "colorPalette.100", _dark: "colorPalette.900" }, p: 2, borderRadius: 4, borderWidth: 1, borderColor: {
|
|
3655
3655
|
base: "colorPalette.200",
|
|
3656
3656
|
_dark: "colorPalette.800",
|
|
3657
3657
|
}, children: [jsxRuntime.jsx(react.Grid, { gridTemplateColumns: "repeat(12, 1fr)", autoFlow: "row", children: jsxRuntime.jsx(SchemaRenderer, { column: `${index}`,
|
|
3658
3658
|
prefix: `${colLabel}.`,
|
|
3659
3659
|
// @ts-expect-error find suitable types
|
|
3660
|
-
schema: {
|
|
3660
|
+
schema: { showLabel: false, ...(items ?? {}) } }) }), jsxRuntime.jsx(react.Flex, { justifyContent: "end", children: jsxRuntime.jsx(react.Button, { variant: "ghost", onClick: () => {
|
|
3661
3661
|
setValue(colLabel, fields.filter((_, curIndex) => {
|
|
3662
3662
|
return curIndex !== index;
|
|
3663
3663
|
}));
|
|
@@ -4549,7 +4549,7 @@ const NumberInputField = ({ schema, column, prefix, }) => {
|
|
|
4549
4549
|
};
|
|
4550
4550
|
|
|
4551
4551
|
const ObjectInput = ({ schema, column, prefix }) => {
|
|
4552
|
-
const { properties, gridColumn = "span 12", gridRow = "span 1", required,
|
|
4552
|
+
const { properties, gridColumn = "span 12", gridRow = "span 1", required, showLabel = true, } = schema;
|
|
4553
4553
|
const { translate } = useSchemaContext();
|
|
4554
4554
|
const colLabel = `${prefix}${column}`;
|
|
4555
4555
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
@@ -4557,7 +4557,7 @@ const ObjectInput = ({ schema, column, prefix }) => {
|
|
|
4557
4557
|
if (properties === undefined) {
|
|
4558
4558
|
throw new Error(`properties is undefined when using ObjectInput`);
|
|
4559
4559
|
}
|
|
4560
|
-
return (jsxRuntime.jsxs(react.Box, { gridRow, gridColumn, children: [
|
|
4560
|
+
return (jsxRuntime.jsxs(react.Box, { gridRow, gridColumn, children: [showLabel && (jsxRuntime.jsxs(react.Box, { as: "label", children: [`${translate.t(removeIndex(`${colLabel}.field_label`))}`, isRequired && jsxRuntime.jsx("span", { children: "*" })] })), jsxRuntime.jsx(react.Grid, { bgColor: { base: "colorPalette.100", _dark: "colorPalette.900" }, p: 2, borderRadius: 4, borderWidth: 1, borderColor: {
|
|
4561
4561
|
base: "colorPalette.200",
|
|
4562
4562
|
_dark: "colorPalette.800",
|
|
4563
4563
|
}, gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)", autoFlow: "row", children: Object.keys(properties ?? {}).map((key) => {
|
|
@@ -4974,7 +4974,7 @@ const ArrayViewer = ({ schema, column, prefix }) => {
|
|
|
4974
4974
|
}, children: jsxRuntime.jsx(react.Grid, { gap: "4", gridTemplateColumns: "repeat(12, 1fr)", autoFlow: "row", children: jsxRuntime.jsx(SchemaViewer, { column: `${index}`,
|
|
4975
4975
|
prefix: `${colLabel}.`,
|
|
4976
4976
|
// @ts-expect-error find suitable types
|
|
4977
|
-
schema: {
|
|
4977
|
+
schema: { showLabel: false, ...(items ?? {}) } }) }) }, `form-${prefix}${column}.${index}`))) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
4978
4978
|
};
|
|
4979
4979
|
|
|
4980
4980
|
const BooleanViewer = ({ schema, column, prefix, }) => {
|
|
@@ -5014,6 +5014,10 @@ const DateViewer = ({ column, schema, prefix }) => {
|
|
|
5014
5014
|
gridRow, children: [jsxRuntime.jsxs(react.Text, { children: [" ", selectedDate !== undefined ? displayDate : ""] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(`${column}.field_required`) }))] }));
|
|
5015
5015
|
};
|
|
5016
5016
|
|
|
5017
|
+
function translateWrapper({ prefix, column, label, translate, }) {
|
|
5018
|
+
return translate.t(removeIndex(`${prefix}${column}.${label}`));
|
|
5019
|
+
}
|
|
5020
|
+
|
|
5017
5021
|
const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
5018
5022
|
const { watch, formState: { errors }, } = reactHookForm.useFormContext();
|
|
5019
5023
|
const { translate } = useSchemaContext();
|
|
@@ -5023,16 +5027,19 @@ const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
5023
5027
|
const colLabel = `${prefix}${column}`;
|
|
5024
5028
|
const watchEnum = watch(colLabel);
|
|
5025
5029
|
const watchEnums = (watch(colLabel) ?? []);
|
|
5026
|
-
|
|
5030
|
+
const customTranslate = (label) => {
|
|
5031
|
+
return translateWrapper({ prefix, column, label, translate });
|
|
5032
|
+
};
|
|
5033
|
+
return (jsxRuntime.jsxs(Field, { label: `${customTranslate(`field_label`)}`, required: isRequired, alignItems: "stretch", gridColumn,
|
|
5027
5034
|
gridRow, children: [isMultiple && (jsxRuntime.jsx(react.Flex, { flexFlow: "wrap", gap: 1, children: watchEnums.map((enumValue) => {
|
|
5028
5035
|
const item = enumValue;
|
|
5029
5036
|
if (item === undefined) {
|
|
5030
5037
|
return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "undefined" });
|
|
5031
5038
|
}
|
|
5032
|
-
return (jsxRuntime.jsx(Tag, {
|
|
5039
|
+
return (jsxRuntime.jsx(Tag, { children: !!renderDisplay === true
|
|
5033
5040
|
? renderDisplay(item)
|
|
5034
|
-
:
|
|
5035
|
-
}) })), !isMultiple &&
|
|
5041
|
+
: customTranslate(item) }));
|
|
5042
|
+
}) })), !isMultiple && jsxRuntime.jsx(react.Text, { children: customTranslate(watchEnum) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: customTranslate(`field_required`) }))] }));
|
|
5036
5043
|
};
|
|
5037
5044
|
|
|
5038
5045
|
const FileViewer = ({ column, schema, prefix }) => {
|
|
@@ -5089,7 +5096,7 @@ const NumberViewer = ({ schema, column, prefix, }) => {
|
|
|
5089
5096
|
};
|
|
5090
5097
|
|
|
5091
5098
|
const ObjectViewer = ({ schema, column, prefix }) => {
|
|
5092
|
-
const { properties, gridColumn = "span 12", gridRow = "span 1", required,
|
|
5099
|
+
const { properties, gridColumn = "span 12", gridRow = "span 1", required, showLabel = true, } = schema;
|
|
5093
5100
|
const { translate } = useSchemaContext();
|
|
5094
5101
|
const colLabel = `${prefix}${column}`;
|
|
5095
5102
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
@@ -5097,7 +5104,7 @@ const ObjectViewer = ({ schema, column, prefix }) => {
|
|
|
5097
5104
|
if (properties === undefined) {
|
|
5098
5105
|
throw new Error(`properties is undefined when using ObjectInput`);
|
|
5099
5106
|
}
|
|
5100
|
-
return (jsxRuntime.jsxs(react.Box, { gridRow, gridColumn, children: [
|
|
5107
|
+
return (jsxRuntime.jsxs(react.Box, { gridRow, gridColumn, children: [showLabel && (jsxRuntime.jsxs(react.Box, { as: "label", children: [`${translate.t(removeIndex(`${colLabel}.field_label`))}`, isRequired && jsxRuntime.jsx("span", { children: "*" })] })), jsxRuntime.jsx(react.Grid, { gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)", autoFlow: "row", bgColor: { base: "colorPalette.100", _dark: "colorPalette.900" }, p: "1", borderRadius: "md", borderWidth: "thin", borderColor: {
|
|
5101
5108
|
base: "colorPalette.200",
|
|
5102
5109
|
_dark: "colorPalette.800",
|
|
5103
5110
|
}, children: Object.keys(properties ?? {}).map((key) => {
|
package/dist/index.mjs
CHANGED
|
@@ -3619,7 +3619,7 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
|
|
|
3619
3619
|
};
|
|
3620
3620
|
|
|
3621
3621
|
function removeIndex(str) {
|
|
3622
|
-
return str.replace(/\.\d+\./g,
|
|
3622
|
+
return str.replace(/\.\d+\./g, ".");
|
|
3623
3623
|
}
|
|
3624
3624
|
|
|
3625
3625
|
const ArrayRenderer = ({ schema, column, prefix, }) => {
|
|
@@ -3631,13 +3631,13 @@ const ArrayRenderer = ({ schema, column, prefix, }) => {
|
|
|
3631
3631
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
3632
3632
|
const { formState: { errors }, setValue, watch, } = useFormContext();
|
|
3633
3633
|
const fields = (watch(colLabel) ?? []);
|
|
3634
|
-
return (jsxs(Flex, { gridRow, gridColumn, flexFlow: "column", gap: 2, children: [jsxs(Box, { as: "label", children: [`${translate.t(removeIndex(`${colLabel}.field_label`))}`, isRequired && jsx("span", { children: "*" })] }), jsx(Flex, { flexFlow: "column", gap: 2, children: fields.map((field, index) => (jsxs(
|
|
3634
|
+
return (jsxs(Flex, { gridRow, gridColumn, flexFlow: "column", gap: 2, children: [jsxs(Box, { as: "label", children: [`${translate.t(removeIndex(`${colLabel}.field_label`))}`, isRequired && jsx("span", { children: "*" })] }), jsx(Flex, { flexFlow: "column", gap: 2, children: fields.map((field, index) => (jsxs(Grid, { gridTemplateColumns: '1fr auto', gap: 2, bgColor: { base: "colorPalette.100", _dark: "colorPalette.900" }, p: 2, borderRadius: 4, borderWidth: 1, borderColor: {
|
|
3635
3635
|
base: "colorPalette.200",
|
|
3636
3636
|
_dark: "colorPalette.800",
|
|
3637
3637
|
}, children: [jsx(Grid, { gridTemplateColumns: "repeat(12, 1fr)", autoFlow: "row", children: jsx(SchemaRenderer, { column: `${index}`,
|
|
3638
3638
|
prefix: `${colLabel}.`,
|
|
3639
3639
|
// @ts-expect-error find suitable types
|
|
3640
|
-
schema: {
|
|
3640
|
+
schema: { showLabel: false, ...(items ?? {}) } }) }), jsx(Flex, { justifyContent: "end", children: jsx(Button$1, { variant: "ghost", onClick: () => {
|
|
3641
3641
|
setValue(colLabel, fields.filter((_, curIndex) => {
|
|
3642
3642
|
return curIndex !== index;
|
|
3643
3643
|
}));
|
|
@@ -4529,7 +4529,7 @@ const NumberInputField = ({ schema, column, prefix, }) => {
|
|
|
4529
4529
|
};
|
|
4530
4530
|
|
|
4531
4531
|
const ObjectInput = ({ schema, column, prefix }) => {
|
|
4532
|
-
const { properties, gridColumn = "span 12", gridRow = "span 1", required,
|
|
4532
|
+
const { properties, gridColumn = "span 12", gridRow = "span 1", required, showLabel = true, } = schema;
|
|
4533
4533
|
const { translate } = useSchemaContext();
|
|
4534
4534
|
const colLabel = `${prefix}${column}`;
|
|
4535
4535
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
@@ -4537,7 +4537,7 @@ const ObjectInput = ({ schema, column, prefix }) => {
|
|
|
4537
4537
|
if (properties === undefined) {
|
|
4538
4538
|
throw new Error(`properties is undefined when using ObjectInput`);
|
|
4539
4539
|
}
|
|
4540
|
-
return (jsxs(Box, { gridRow, gridColumn, children: [
|
|
4540
|
+
return (jsxs(Box, { gridRow, gridColumn, children: [showLabel && (jsxs(Box, { as: "label", children: [`${translate.t(removeIndex(`${colLabel}.field_label`))}`, isRequired && jsx("span", { children: "*" })] })), jsx(Grid, { bgColor: { base: "colorPalette.100", _dark: "colorPalette.900" }, p: 2, borderRadius: 4, borderWidth: 1, borderColor: {
|
|
4541
4541
|
base: "colorPalette.200",
|
|
4542
4542
|
_dark: "colorPalette.800",
|
|
4543
4543
|
}, gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)", autoFlow: "row", children: Object.keys(properties ?? {}).map((key) => {
|
|
@@ -4954,7 +4954,7 @@ const ArrayViewer = ({ schema, column, prefix }) => {
|
|
|
4954
4954
|
}, children: jsx(Grid, { gap: "4", gridTemplateColumns: "repeat(12, 1fr)", autoFlow: "row", children: jsx(SchemaViewer, { column: `${index}`,
|
|
4955
4955
|
prefix: `${colLabel}.`,
|
|
4956
4956
|
// @ts-expect-error find suitable types
|
|
4957
|
-
schema: {
|
|
4957
|
+
schema: { showLabel: false, ...(items ?? {}) } }) }) }, `form-${prefix}${column}.${index}`))) }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
4958
4958
|
};
|
|
4959
4959
|
|
|
4960
4960
|
const BooleanViewer = ({ schema, column, prefix, }) => {
|
|
@@ -4994,6 +4994,10 @@ const DateViewer = ({ column, schema, prefix }) => {
|
|
|
4994
4994
|
gridRow, children: [jsxs(Text, { children: [" ", selectedDate !== undefined ? displayDate : ""] }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(`${column}.field_required`) }))] }));
|
|
4995
4995
|
};
|
|
4996
4996
|
|
|
4997
|
+
function translateWrapper({ prefix, column, label, translate, }) {
|
|
4998
|
+
return translate.t(removeIndex(`${prefix}${column}.${label}`));
|
|
4999
|
+
}
|
|
5000
|
+
|
|
4997
5001
|
const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
4998
5002
|
const { watch, formState: { errors }, } = useFormContext();
|
|
4999
5003
|
const { translate } = useSchemaContext();
|
|
@@ -5003,16 +5007,19 @@ const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
5003
5007
|
const colLabel = `${prefix}${column}`;
|
|
5004
5008
|
const watchEnum = watch(colLabel);
|
|
5005
5009
|
const watchEnums = (watch(colLabel) ?? []);
|
|
5006
|
-
|
|
5010
|
+
const customTranslate = (label) => {
|
|
5011
|
+
return translateWrapper({ prefix, column, label, translate });
|
|
5012
|
+
};
|
|
5013
|
+
return (jsxs(Field, { label: `${customTranslate(`field_label`)}`, required: isRequired, alignItems: "stretch", gridColumn,
|
|
5007
5014
|
gridRow, children: [isMultiple && (jsx(Flex, { flexFlow: "wrap", gap: 1, children: watchEnums.map((enumValue) => {
|
|
5008
5015
|
const item = enumValue;
|
|
5009
5016
|
if (item === undefined) {
|
|
5010
5017
|
return jsx(Fragment, { children: "undefined" });
|
|
5011
5018
|
}
|
|
5012
|
-
return (jsx(Tag, {
|
|
5019
|
+
return (jsx(Tag, { children: !!renderDisplay === true
|
|
5013
5020
|
? renderDisplay(item)
|
|
5014
|
-
:
|
|
5015
|
-
}) })), !isMultiple &&
|
|
5021
|
+
: customTranslate(item) }));
|
|
5022
|
+
}) })), !isMultiple && jsx(Text, { children: customTranslate(watchEnum) }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: customTranslate(`field_required`) }))] }));
|
|
5016
5023
|
};
|
|
5017
5024
|
|
|
5018
5025
|
const FileViewer = ({ column, schema, prefix }) => {
|
|
@@ -5069,7 +5076,7 @@ const NumberViewer = ({ schema, column, prefix, }) => {
|
|
|
5069
5076
|
};
|
|
5070
5077
|
|
|
5071
5078
|
const ObjectViewer = ({ schema, column, prefix }) => {
|
|
5072
|
-
const { properties, gridColumn = "span 12", gridRow = "span 1", required,
|
|
5079
|
+
const { properties, gridColumn = "span 12", gridRow = "span 1", required, showLabel = true, } = schema;
|
|
5073
5080
|
const { translate } = useSchemaContext();
|
|
5074
5081
|
const colLabel = `${prefix}${column}`;
|
|
5075
5082
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
@@ -5077,7 +5084,7 @@ const ObjectViewer = ({ schema, column, prefix }) => {
|
|
|
5077
5084
|
if (properties === undefined) {
|
|
5078
5085
|
throw new Error(`properties is undefined when using ObjectInput`);
|
|
5079
5086
|
}
|
|
5080
|
-
return (jsxs(Box, { gridRow, gridColumn, children: [
|
|
5087
|
+
return (jsxs(Box, { gridRow, gridColumn, children: [showLabel && (jsxs(Box, { as: "label", children: [`${translate.t(removeIndex(`${colLabel}.field_label`))}`, isRequired && jsx("span", { children: "*" })] })), jsx(Grid, { gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)", autoFlow: "row", bgColor: { base: "colorPalette.100", _dark: "colorPalette.900" }, p: "1", borderRadius: "md", borderWidth: "thin", borderColor: {
|
|
5081
5088
|
base: "colorPalette.200",
|
|
5082
5089
|
_dark: "colorPalette.800",
|
|
5083
5090
|
}, children: Object.keys(properties ?? {}).map((key) => {
|