@bsol-oss/react-datatable5 12.0.0-beta.31 → 12.0.0-beta.32
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 +33 -33
- package/dist/index.mjs +33 -33
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -3651,7 +3651,7 @@ 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.Box, { gridRow, gridColumn, children: [jsxRuntime.jsxs(react.Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(removeIndex(`${colLabel}.field_label`))}`, isRequired && jsxRuntime.jsx("span", { children: "*" })] }), fields.map((field, index) => (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", children: [jsxRuntime.jsx(react.Grid, {
|
|
3654
|
+
return (jsxRuntime.jsxs(react.Box, { gridRow, gridColumn, children: [jsxRuntime.jsxs(react.Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(removeIndex(`${colLabel}.field_label`))}`, isRequired && jsxRuntime.jsx("span", { children: "*" })] }), fields.map((field, index) => (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", children: [jsxRuntime.jsx(react.Grid, { padding: "4", gridTemplateColumns: "repeat(12, 1fr)", gridAutoRows: `repeat("auto-fit", auto)`, children: jsxRuntime.jsx(SchemaRenderer, { column: `${index}`,
|
|
3655
3655
|
prefix: `${colLabel}.`,
|
|
3656
3656
|
schema: items }) }), jsxRuntime.jsx(react.Flex, { justifyContent: "end", children: jsxRuntime.jsx(react.Button, { variant: "ghost", onClick: () => {
|
|
3657
3657
|
setValue(colLabel, fields.filter((_, curIndex) => {
|
|
@@ -3682,7 +3682,7 @@ const Field = React__namespace.forwardRef(function Field(props, ref) {
|
|
|
3682
3682
|
const BooleanPicker = ({ schema, column, prefix }) => {
|
|
3683
3683
|
const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
|
|
3684
3684
|
const { translate } = useSchemaContext();
|
|
3685
|
-
const { required, gridColumn, gridRow } = schema;
|
|
3685
|
+
const { required, gridColumn = "span 4", gridRow = "span 1" } = schema;
|
|
3686
3686
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
3687
3687
|
const colLabel = `${prefix}${column}`;
|
|
3688
3688
|
const value = watch(colLabel);
|
|
@@ -3856,7 +3856,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
3856
3856
|
const { translate } = useSchemaContext();
|
|
3857
3857
|
const { required, variant } = schema;
|
|
3858
3858
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
3859
|
-
const { gridColumn, gridRow, renderDisplay } = schema;
|
|
3859
|
+
const { gridColumn = "span 4", gridRow = "span 1", renderDisplay } = schema;
|
|
3860
3860
|
const [searchText, setSearchText] = React.useState();
|
|
3861
3861
|
const [limit, setLimit] = React.useState(10);
|
|
3862
3862
|
const [openSearchResult, setOpenSearchResult] = React.useState();
|
|
@@ -4280,7 +4280,7 @@ const FileDropzone = ({ children = undefined, gridProps = {}, onDrop = () => { }
|
|
|
4280
4280
|
const FilePicker = ({ column, schema, prefix }) => {
|
|
4281
4281
|
const { setValue, formState: { errors }, watch, } = reactHookForm.useFormContext();
|
|
4282
4282
|
const { translate } = useSchemaContext();
|
|
4283
|
-
const { required, gridColumn, gridRow } = schema;
|
|
4283
|
+
const { required, gridColumn = "span 4", gridRow = "span 1", } = schema;
|
|
4284
4284
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4285
4285
|
const currentFiles = (watch(column) ?? []);
|
|
4286
4286
|
const colLabel = `${prefix}${column}`;
|
|
@@ -4327,7 +4327,7 @@ const getTableData = async ({ serverUrl, in_table, searching = "", where = [], l
|
|
|
4327
4327
|
const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
4328
4328
|
const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
|
|
4329
4329
|
const { serverUrl, idMap, setIdMap, translate, schema: parentSchema, } = useSchemaContext();
|
|
4330
|
-
const { required, gridColumn, gridRow, renderDisplay, foreign_key } = schema;
|
|
4330
|
+
const { required, gridColumn = "span 4", gridRow = "span 1", renderDisplay, foreign_key, } = schema;
|
|
4331
4331
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4332
4332
|
const { table, column: column_ref, display_column, } = foreign_key;
|
|
4333
4333
|
const [searchText, setSearchText] = React.useState();
|
|
@@ -4467,7 +4467,7 @@ react.NumberInput.Label;
|
|
|
4467
4467
|
const NumberInputField = ({ schema, column, prefix, }) => {
|
|
4468
4468
|
const { setValue, formState: { errors }, watch, } = reactHookForm.useFormContext();
|
|
4469
4469
|
const { translate } = useSchemaContext();
|
|
4470
|
-
const { required, gridColumn, gridRow } = schema;
|
|
4470
|
+
const { required, gridColumn = "span 4", gridRow = "span 1" } = schema;
|
|
4471
4471
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4472
4472
|
const colLabel = `${prefix}${column}`;
|
|
4473
4473
|
const value = watch(`${colLabel}`);
|
|
@@ -4477,7 +4477,7 @@ const NumberInputField = ({ schema, column, prefix, }) => {
|
|
|
4477
4477
|
};
|
|
4478
4478
|
|
|
4479
4479
|
const ObjectInput = ({ schema, column, prefix }) => {
|
|
4480
|
-
const { properties,
|
|
4480
|
+
const { properties, gridColumn = "span 4", gridRow = "span 1", required, } = schema;
|
|
4481
4481
|
const { translate } = useSchemaContext();
|
|
4482
4482
|
const colLabel = `${prefix}${column}`;
|
|
4483
4483
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
@@ -4497,7 +4497,7 @@ const ObjectInput = ({ schema, column, prefix }) => {
|
|
|
4497
4497
|
const RecordInput$1 = ({ column, schema, prefix }) => {
|
|
4498
4498
|
const { formState: { errors }, setValue, getValues, } = reactHookForm.useFormContext();
|
|
4499
4499
|
const { translate } = useSchemaContext();
|
|
4500
|
-
const { required, gridColumn, gridRow } = schema;
|
|
4500
|
+
const { required, gridColumn = "span 12", gridRow = "span 1" } = schema;
|
|
4501
4501
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4502
4502
|
const entries = Object.entries(getValues(column) ?? {});
|
|
4503
4503
|
const [showNewEntries, setShowNewEntries] = React.useState(false);
|
|
@@ -4549,10 +4549,10 @@ const RecordInput$1 = ({ column, schema, prefix }) => {
|
|
|
4549
4549
|
const StringInputField = ({ column, schema, prefix, }) => {
|
|
4550
4550
|
const { register, formState: { errors }, } = reactHookForm.useFormContext();
|
|
4551
4551
|
const { translate } = useSchemaContext();
|
|
4552
|
-
const { required, gridColumn, gridRow } = schema;
|
|
4552
|
+
const { required, gridColumn = "span 4", gridRow = "span 1" } = schema;
|
|
4553
4553
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4554
4554
|
const colLabel = `${prefix}${column}`;
|
|
4555
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn: gridColumn
|
|
4555
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn: gridColumn, gridRow: gridRow, children: [jsxRuntime.jsx(react.Input, { ...register(`${colLabel}`, { required: isRequired }), autoComplete: "off" }), errors[colLabel] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }) }));
|
|
4556
4556
|
};
|
|
4557
4557
|
|
|
4558
4558
|
const RadioCardItem = React__namespace.forwardRef(function RadioCardItem(props, ref) {
|
|
@@ -4653,7 +4653,7 @@ const TagPicker = ({ column, schema, prefix }) => {
|
|
|
4653
4653
|
const TextAreaInput = ({ column, schema, prefix, }) => {
|
|
4654
4654
|
const { register, formState: { errors }, } = reactHookForm.useFormContext();
|
|
4655
4655
|
const { translate } = useSchemaContext();
|
|
4656
|
-
const { required, gridColumn, gridRow } = schema;
|
|
4656
|
+
const { required, gridColumn = "span 4", gridRow = "span 1" } = schema;
|
|
4657
4657
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4658
4658
|
const colLabel = `${prefix}${column}`;
|
|
4659
4659
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", children: [jsxRuntime.jsx(react.Textarea, { ...register(`${colLabel}`, { required: isRequired }), autoComplete: "off" }), errors[colLabel] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }) }));
|
|
@@ -4688,22 +4688,22 @@ function TimePicker$1({ hour, setHour, minute, setMinute, meridiem, setMeridiem,
|
|
|
4688
4688
|
label: meridiemLabel[hour] ?? hour,
|
|
4689
4689
|
})),
|
|
4690
4690
|
});
|
|
4691
|
-
return (jsxRuntime.jsxs(react.Grid, {
|
|
4692
|
-
|
|
4693
|
-
|
|
4694
|
-
|
|
4695
|
-
|
|
4696
|
-
|
|
4697
|
-
|
|
4691
|
+
return (jsxRuntime.jsxs(react.Grid, { justifyContent: "center", alignItems: "center", templateColumns: "auto auto auto auto", gap: "4", children: [jsxRuntime.jsxs(react.Select.Root, { width: "4rem", value: [`${hour.toString().padStart(2, "0")}`], onValueChange: (e) => {
|
|
4692
|
+
setHour(parseInt(e.value[0]));
|
|
4693
|
+
onChange({ hour: parseInt(e.value[0]), minute, meridiem });
|
|
4694
|
+
}, collection: hoursCollection, children: [jsxRuntime.jsx(react.Select.HiddenSelect, {}), jsxRuntime.jsx(react.Select.Control, { children: jsxRuntime.jsx(react.Select.Trigger, { children: jsxRuntime.jsx(react.Select.ValueText, { placeholder: "Hour" }) }) }), jsxRuntime.jsx(react.Select.Positioner, { children: jsxRuntime.jsx(react.Select.Content, { children: hoursCollection.items.map(({ value: hour }) => (jsxRuntime.jsxs(react.Select.Item, { item: hour, children: [hour, jsxRuntime.jsx(react.Select.ItemIndicator, {})] }, hour))) }) })] }), jsxRuntime.jsx(react.Text, { children: ":" }), jsxRuntime.jsxs(react.Select.Root, { width: "4rem", value: [`${minute.toString().padStart(2, "0")}`], onValueChange: (e) => {
|
|
4695
|
+
setMinute(parseInt(e.value[0]));
|
|
4696
|
+
onChange({ hour, minute: parseInt(e.value[0]), meridiem });
|
|
4697
|
+
}, collection: minutesCollection, children: [jsxRuntime.jsx(react.Select.HiddenSelect, {}), jsxRuntime.jsx(react.Select.Control, { children: jsxRuntime.jsx(react.Select.Trigger, { children: jsxRuntime.jsx(react.Select.ValueText, { placeholder: "Minute" }) }) }), jsxRuntime.jsx(react.Select.Positioner, { children: jsxRuntime.jsx(react.Select.Content, { children: minutes.map((minute) => (jsxRuntime.jsxs(react.Select.Item, { item: minute, children: [minute, jsxRuntime.jsx(react.Select.ItemIndicator, {})] }, minute))) }) })] }), jsxRuntime.jsxs(react.Select.Root, { width: "8rem", value: [meridiem], onValueChange: (e) => {
|
|
4698
4698
|
setMeridiem(e.value[0]);
|
|
4699
4699
|
onChange({ hour, minute, meridiem: e.value[0] });
|
|
4700
|
-
}, collection: meridiemsCollection,
|
|
4700
|
+
}, collection: meridiemsCollection, children: [jsxRuntime.jsx(react.Select.HiddenSelect, {}), jsxRuntime.jsx(react.Select.Control, { children: jsxRuntime.jsx(react.Select.Trigger, { children: jsxRuntime.jsx(react.Select.ValueText, { placeholder: "am/pm" }) }) }), jsxRuntime.jsx(react.Select.Positioner, { children: jsxRuntime.jsx(react.Select.Content, { children: meridiemsCollection.items.map(({ value: hour, label }) => (jsxRuntime.jsxs(react.Select.Item, { item: hour, children: [label, jsxRuntime.jsx(react.Select.ItemIndicator, {})] }, hour))) }) })] })] }));
|
|
4701
4701
|
}
|
|
4702
4702
|
|
|
4703
4703
|
const TimePicker = ({ column, schema, prefix }) => {
|
|
4704
4704
|
const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
|
|
4705
4705
|
const { translate } = useSchemaContext();
|
|
4706
|
-
const { required, gridColumn, gridRow } = schema;
|
|
4706
|
+
const { required, gridColumn = "span 4", gridRow = "span 1" } = schema;
|
|
4707
4707
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4708
4708
|
const colLabel = `${prefix}${column}`;
|
|
4709
4709
|
const [open, setOpen] = React.useState(false);
|
|
@@ -4831,7 +4831,7 @@ const ColumnRenderer = ({ column, properties, prefix, }) => {
|
|
|
4831
4831
|
};
|
|
4832
4832
|
|
|
4833
4833
|
const ArrayViewer = ({ schema, column, prefix }) => {
|
|
4834
|
-
const {
|
|
4834
|
+
const { gridColumn = "span 4", gridRow = "span 1", required, items } = schema;
|
|
4835
4835
|
const { translate } = useSchemaContext();
|
|
4836
4836
|
const colLabel = `${prefix}${column}`;
|
|
4837
4837
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
@@ -4845,7 +4845,7 @@ const ArrayViewer = ({ schema, column, prefix }) => {
|
|
|
4845
4845
|
const BooleanViewer = ({ schema, column, prefix, }) => {
|
|
4846
4846
|
const { watch, formState: { errors }, } = reactHookForm.useFormContext();
|
|
4847
4847
|
const { translate } = useSchemaContext();
|
|
4848
|
-
const { required, gridColumn, gridRow } = schema;
|
|
4848
|
+
const { required, gridColumn = "span 4", gridRow = "span 1" } = schema;
|
|
4849
4849
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4850
4850
|
const colLabel = `${prefix}${column}`;
|
|
4851
4851
|
const value = watch(colLabel);
|
|
@@ -4884,7 +4884,7 @@ const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
4884
4884
|
const { translate } = useSchemaContext();
|
|
4885
4885
|
const { required } = schema;
|
|
4886
4886
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4887
|
-
const { gridColumn, gridRow, renderDisplay } = schema;
|
|
4887
|
+
const { gridColumn = "span 4", gridRow = "span 1", renderDisplay } = schema;
|
|
4888
4888
|
const colLabel = `${prefix}${column}`;
|
|
4889
4889
|
const watchEnum = watch(colLabel);
|
|
4890
4890
|
const watchEnums = (watch(colLabel) ?? []);
|
|
@@ -4903,11 +4903,11 @@ const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
4903
4903
|
const FileViewer = ({ column, schema, prefix }) => {
|
|
4904
4904
|
const { watch } = reactHookForm.useFormContext();
|
|
4905
4905
|
const { translate } = useSchemaContext();
|
|
4906
|
-
const { required, gridColumn, gridRow } = schema;
|
|
4906
|
+
const { required, gridColumn = "span 4", gridRow = "span 1", } = schema;
|
|
4907
4907
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4908
4908
|
const currentFiles = (watch(column) ?? []);
|
|
4909
4909
|
const colLabel = `${prefix}${column}`;
|
|
4910
|
-
return (jsxRuntime.jsx(Field, { label: `${translate.t(`${colLabel}.field_label`)}`, required: isRequired, gridColumn: gridColumn
|
|
4910
|
+
return (jsxRuntime.jsx(Field, { label: `${translate.t(`${colLabel}.field_label`)}`, required: isRequired, gridColumn: gridColumn, gridRow: gridRow, display: "grid", gridTemplateRows: "auto 1fr auto", alignItems: "stretch", children: jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: 1, children: currentFiles.map((file) => {
|
|
4911
4911
|
return (jsxRuntime.jsx(react.Card.Root, { variant: "subtle", children: jsxRuntime.jsxs(react.Card.Body, { gap: "2", display: "flex", flexFlow: "row", alignItems: "center", padding: "2", children: [file.type.startsWith("image/") && (jsxRuntime.jsx(react.Image, { src: URL.createObjectURL(file), alt: file.name, boxSize: "50px", objectFit: "cover", borderRadius: "md", marginRight: "2" })), jsxRuntime.jsx(react.Box, { children: file.name })] }) }, file.name));
|
|
4912
4912
|
}) }) }));
|
|
4913
4913
|
};
|
|
@@ -4915,7 +4915,7 @@ const FileViewer = ({ column, schema, prefix }) => {
|
|
|
4915
4915
|
const IdViewer = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
4916
4916
|
const { watch, formState: { errors }, } = reactHookForm.useFormContext();
|
|
4917
4917
|
const { idMap, translate } = useSchemaContext();
|
|
4918
|
-
const { required, gridColumn, gridRow, renderDisplay, foreign_key } = schema;
|
|
4918
|
+
const { required, gridColumn = "span 4", gridRow = "span 1", renderDisplay, foreign_key, } = schema;
|
|
4919
4919
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4920
4920
|
const { display_column } = foreign_key;
|
|
4921
4921
|
const colLabel = `${prefix}${column}`;
|
|
@@ -4946,7 +4946,7 @@ const IdViewer = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4946
4946
|
const NumberViewer = ({ schema, column, prefix, }) => {
|
|
4947
4947
|
const { watch, formState: { errors }, } = reactHookForm.useFormContext();
|
|
4948
4948
|
const { translate } = useSchemaContext();
|
|
4949
|
-
const { required, gridColumn, gridRow } = schema;
|
|
4949
|
+
const { required, gridColumn = "span 4", gridRow = "span 1" } = schema;
|
|
4950
4950
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4951
4951
|
const colLabel = `${prefix}${column}`;
|
|
4952
4952
|
const value = watch(colLabel);
|
|
@@ -4954,7 +4954,7 @@ const NumberViewer = ({ schema, column, prefix, }) => {
|
|
|
4954
4954
|
};
|
|
4955
4955
|
|
|
4956
4956
|
const ObjectViewer = ({ schema, column, prefix }) => {
|
|
4957
|
-
const { properties,
|
|
4957
|
+
const { properties, gridColumn = "span 4", gridRow = "span 1", required, } = schema;
|
|
4958
4958
|
const { translate } = useSchemaContext();
|
|
4959
4959
|
const colLabel = `${prefix}${column}`;
|
|
4960
4960
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
@@ -4974,7 +4974,7 @@ const ObjectViewer = ({ schema, column, prefix }) => {
|
|
|
4974
4974
|
const RecordInput = ({ column, schema, prefix }) => {
|
|
4975
4975
|
const { formState: { errors }, setValue, getValues, } = reactHookForm.useFormContext();
|
|
4976
4976
|
const { translate } = useSchemaContext();
|
|
4977
|
-
const { required, gridColumn, gridRow } = schema;
|
|
4977
|
+
const { required, gridColumn = "span 4", gridRow = "span 1" } = schema;
|
|
4978
4978
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4979
4979
|
const entries = Object.entries(getValues(column) ?? {});
|
|
4980
4980
|
const [showNewEntries, setShowNewEntries] = React.useState(false);
|
|
@@ -5026,7 +5026,7 @@ const RecordInput = ({ column, schema, prefix }) => {
|
|
|
5026
5026
|
const StringViewer = ({ column, schema, prefix, }) => {
|
|
5027
5027
|
const { watch, formState: { errors }, } = reactHookForm.useFormContext();
|
|
5028
5028
|
const { translate } = useSchemaContext();
|
|
5029
|
-
const { required, gridColumn, gridRow } = schema;
|
|
5029
|
+
const { required, gridColumn = "span 4", gridRow = "span 1" } = schema;
|
|
5030
5030
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
5031
5031
|
const colLabel = `${prefix}${column}`;
|
|
5032
5032
|
const value = watch(colLabel);
|
|
@@ -5121,17 +5121,17 @@ const TagViewer = ({ column, schema, prefix }) => {
|
|
|
5121
5121
|
const TextAreaViewer = ({ column, schema, prefix, }) => {
|
|
5122
5122
|
const { watch, formState: { errors }, } = reactHookForm.useFormContext();
|
|
5123
5123
|
const { translate } = useSchemaContext();
|
|
5124
|
-
const { required, gridColumn, gridRow } = schema;
|
|
5124
|
+
const { required, gridColumn = "span 4", gridRow = "span 1" } = schema;
|
|
5125
5125
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
5126
5126
|
const colLabel = `${prefix}${column}`;
|
|
5127
5127
|
const value = watch(colLabel);
|
|
5128
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn: gridColumn
|
|
5128
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn: gridColumn, gridRow: gridRow, children: [jsxRuntime.jsx(react.Text, { whiteSpace: "pre-wrap", children: value }), " ", errors[colLabel] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }) }));
|
|
5129
5129
|
};
|
|
5130
5130
|
|
|
5131
5131
|
const TimeViewer = ({ column, schema, prefix }) => {
|
|
5132
5132
|
const { watch, formState: { errors }, } = reactHookForm.useFormContext();
|
|
5133
5133
|
const { translate } = useSchemaContext();
|
|
5134
|
-
const { required, gridColumn, gridRow } = schema;
|
|
5134
|
+
const { required, gridColumn = "span 4", gridRow = "span 1" } = schema;
|
|
5135
5135
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
5136
5136
|
const colLabel = `${prefix}${column}`;
|
|
5137
5137
|
const selectedDate = watch(colLabel);
|
package/dist/index.mjs
CHANGED
|
@@ -3631,7 +3631,7 @@ 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(Box, { gridRow, gridColumn, children: [jsxs(Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(removeIndex(`${colLabel}.field_label`))}`, isRequired && jsx("span", { children: "*" })] }), fields.map((field, index) => (jsxs(Flex, { flexFlow: "column", children: [jsx(Grid, {
|
|
3634
|
+
return (jsxs(Box, { gridRow, gridColumn, children: [jsxs(Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(removeIndex(`${colLabel}.field_label`))}`, isRequired && jsx("span", { children: "*" })] }), fields.map((field, index) => (jsxs(Flex, { flexFlow: "column", children: [jsx(Grid, { padding: "4", gridTemplateColumns: "repeat(12, 1fr)", gridAutoRows: `repeat("auto-fit", auto)`, children: jsx(SchemaRenderer, { column: `${index}`,
|
|
3635
3635
|
prefix: `${colLabel}.`,
|
|
3636
3636
|
schema: items }) }), jsx(Flex, { justifyContent: "end", children: jsx(Button$1, { variant: "ghost", onClick: () => {
|
|
3637
3637
|
setValue(colLabel, fields.filter((_, curIndex) => {
|
|
@@ -3662,7 +3662,7 @@ const Field = React.forwardRef(function Field(props, ref) {
|
|
|
3662
3662
|
const BooleanPicker = ({ schema, column, prefix }) => {
|
|
3663
3663
|
const { watch, formState: { errors }, setValue, } = useFormContext();
|
|
3664
3664
|
const { translate } = useSchemaContext();
|
|
3665
|
-
const { required, gridColumn, gridRow } = schema;
|
|
3665
|
+
const { required, gridColumn = "span 4", gridRow = "span 1" } = schema;
|
|
3666
3666
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
3667
3667
|
const colLabel = `${prefix}${column}`;
|
|
3668
3668
|
const value = watch(colLabel);
|
|
@@ -3836,7 +3836,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
3836
3836
|
const { translate } = useSchemaContext();
|
|
3837
3837
|
const { required, variant } = schema;
|
|
3838
3838
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
3839
|
-
const { gridColumn, gridRow, renderDisplay } = schema;
|
|
3839
|
+
const { gridColumn = "span 4", gridRow = "span 1", renderDisplay } = schema;
|
|
3840
3840
|
const [searchText, setSearchText] = useState();
|
|
3841
3841
|
const [limit, setLimit] = useState(10);
|
|
3842
3842
|
const [openSearchResult, setOpenSearchResult] = useState();
|
|
@@ -4260,7 +4260,7 @@ const FileDropzone = ({ children = undefined, gridProps = {}, onDrop = () => { }
|
|
|
4260
4260
|
const FilePicker = ({ column, schema, prefix }) => {
|
|
4261
4261
|
const { setValue, formState: { errors }, watch, } = useFormContext();
|
|
4262
4262
|
const { translate } = useSchemaContext();
|
|
4263
|
-
const { required, gridColumn, gridRow } = schema;
|
|
4263
|
+
const { required, gridColumn = "span 4", gridRow = "span 1", } = schema;
|
|
4264
4264
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4265
4265
|
const currentFiles = (watch(column) ?? []);
|
|
4266
4266
|
const colLabel = `${prefix}${column}`;
|
|
@@ -4307,7 +4307,7 @@ const getTableData = async ({ serverUrl, in_table, searching = "", where = [], l
|
|
|
4307
4307
|
const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
4308
4308
|
const { watch, formState: { errors }, setValue, } = useFormContext();
|
|
4309
4309
|
const { serverUrl, idMap, setIdMap, translate, schema: parentSchema, } = useSchemaContext();
|
|
4310
|
-
const { required, gridColumn, gridRow, renderDisplay, foreign_key } = schema;
|
|
4310
|
+
const { required, gridColumn = "span 4", gridRow = "span 1", renderDisplay, foreign_key, } = schema;
|
|
4311
4311
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4312
4312
|
const { table, column: column_ref, display_column, } = foreign_key;
|
|
4313
4313
|
const [searchText, setSearchText] = useState();
|
|
@@ -4447,7 +4447,7 @@ NumberInput.Label;
|
|
|
4447
4447
|
const NumberInputField = ({ schema, column, prefix, }) => {
|
|
4448
4448
|
const { setValue, formState: { errors }, watch, } = useFormContext();
|
|
4449
4449
|
const { translate } = useSchemaContext();
|
|
4450
|
-
const { required, gridColumn, gridRow } = schema;
|
|
4450
|
+
const { required, gridColumn = "span 4", gridRow = "span 1" } = schema;
|
|
4451
4451
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4452
4452
|
const colLabel = `${prefix}${column}`;
|
|
4453
4453
|
const value = watch(`${colLabel}`);
|
|
@@ -4457,7 +4457,7 @@ const NumberInputField = ({ schema, column, prefix, }) => {
|
|
|
4457
4457
|
};
|
|
4458
4458
|
|
|
4459
4459
|
const ObjectInput = ({ schema, column, prefix }) => {
|
|
4460
|
-
const { properties,
|
|
4460
|
+
const { properties, gridColumn = "span 4", gridRow = "span 1", required, } = schema;
|
|
4461
4461
|
const { translate } = useSchemaContext();
|
|
4462
4462
|
const colLabel = `${prefix}${column}`;
|
|
4463
4463
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
@@ -4477,7 +4477,7 @@ const ObjectInput = ({ schema, column, prefix }) => {
|
|
|
4477
4477
|
const RecordInput$1 = ({ column, schema, prefix }) => {
|
|
4478
4478
|
const { formState: { errors }, setValue, getValues, } = useFormContext();
|
|
4479
4479
|
const { translate } = useSchemaContext();
|
|
4480
|
-
const { required, gridColumn, gridRow } = schema;
|
|
4480
|
+
const { required, gridColumn = "span 12", gridRow = "span 1" } = schema;
|
|
4481
4481
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4482
4482
|
const entries = Object.entries(getValues(column) ?? {});
|
|
4483
4483
|
const [showNewEntries, setShowNewEntries] = useState(false);
|
|
@@ -4529,10 +4529,10 @@ const RecordInput$1 = ({ column, schema, prefix }) => {
|
|
|
4529
4529
|
const StringInputField = ({ column, schema, prefix, }) => {
|
|
4530
4530
|
const { register, formState: { errors }, } = useFormContext();
|
|
4531
4531
|
const { translate } = useSchemaContext();
|
|
4532
|
-
const { required, gridColumn, gridRow } = schema;
|
|
4532
|
+
const { required, gridColumn = "span 4", gridRow = "span 1" } = schema;
|
|
4533
4533
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4534
4534
|
const colLabel = `${prefix}${column}`;
|
|
4535
|
-
return (jsx(Fragment, { children: jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn: gridColumn
|
|
4535
|
+
return (jsx(Fragment, { children: jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn: gridColumn, gridRow: gridRow, children: [jsx(Input, { ...register(`${colLabel}`, { required: isRequired }), autoComplete: "off" }), errors[colLabel] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }) }));
|
|
4536
4536
|
};
|
|
4537
4537
|
|
|
4538
4538
|
const RadioCardItem = React.forwardRef(function RadioCardItem(props, ref) {
|
|
@@ -4633,7 +4633,7 @@ const TagPicker = ({ column, schema, prefix }) => {
|
|
|
4633
4633
|
const TextAreaInput = ({ column, schema, prefix, }) => {
|
|
4634
4634
|
const { register, formState: { errors }, } = useFormContext();
|
|
4635
4635
|
const { translate } = useSchemaContext();
|
|
4636
|
-
const { required, gridColumn, gridRow } = schema;
|
|
4636
|
+
const { required, gridColumn = "span 4", gridRow = "span 1" } = schema;
|
|
4637
4637
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4638
4638
|
const colLabel = `${prefix}${column}`;
|
|
4639
4639
|
return (jsx(Fragment, { children: jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", children: [jsx(Textarea, { ...register(`${colLabel}`, { required: isRequired }), autoComplete: "off" }), errors[colLabel] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }) }));
|
|
@@ -4668,22 +4668,22 @@ function TimePicker$1({ hour, setHour, minute, setMinute, meridiem, setMeridiem,
|
|
|
4668
4668
|
label: meridiemLabel[hour] ?? hour,
|
|
4669
4669
|
})),
|
|
4670
4670
|
});
|
|
4671
|
-
return (jsxs(Grid, {
|
|
4672
|
-
|
|
4673
|
-
|
|
4674
|
-
|
|
4675
|
-
|
|
4676
|
-
|
|
4677
|
-
|
|
4671
|
+
return (jsxs(Grid, { justifyContent: "center", alignItems: "center", templateColumns: "auto auto auto auto", gap: "4", children: [jsxs(Select.Root, { width: "4rem", value: [`${hour.toString().padStart(2, "0")}`], onValueChange: (e) => {
|
|
4672
|
+
setHour(parseInt(e.value[0]));
|
|
4673
|
+
onChange({ hour: parseInt(e.value[0]), minute, meridiem });
|
|
4674
|
+
}, collection: hoursCollection, children: [jsx(Select.HiddenSelect, {}), jsx(Select.Control, { children: jsx(Select.Trigger, { children: jsx(Select.ValueText, { placeholder: "Hour" }) }) }), jsx(Select.Positioner, { children: jsx(Select.Content, { children: hoursCollection.items.map(({ value: hour }) => (jsxs(Select.Item, { item: hour, children: [hour, jsx(Select.ItemIndicator, {})] }, hour))) }) })] }), jsx(Text, { children: ":" }), jsxs(Select.Root, { width: "4rem", value: [`${minute.toString().padStart(2, "0")}`], onValueChange: (e) => {
|
|
4675
|
+
setMinute(parseInt(e.value[0]));
|
|
4676
|
+
onChange({ hour, minute: parseInt(e.value[0]), meridiem });
|
|
4677
|
+
}, collection: minutesCollection, children: [jsx(Select.HiddenSelect, {}), jsx(Select.Control, { children: jsx(Select.Trigger, { children: jsx(Select.ValueText, { placeholder: "Minute" }) }) }), jsx(Select.Positioner, { children: jsx(Select.Content, { children: minutes.map((minute) => (jsxs(Select.Item, { item: minute, children: [minute, jsx(Select.ItemIndicator, {})] }, minute))) }) })] }), jsxs(Select.Root, { width: "8rem", value: [meridiem], onValueChange: (e) => {
|
|
4678
4678
|
setMeridiem(e.value[0]);
|
|
4679
4679
|
onChange({ hour, minute, meridiem: e.value[0] });
|
|
4680
|
-
}, collection: meridiemsCollection,
|
|
4680
|
+
}, collection: meridiemsCollection, children: [jsx(Select.HiddenSelect, {}), jsx(Select.Control, { children: jsx(Select.Trigger, { children: jsx(Select.ValueText, { placeholder: "am/pm" }) }) }), jsx(Select.Positioner, { children: jsx(Select.Content, { children: meridiemsCollection.items.map(({ value: hour, label }) => (jsxs(Select.Item, { item: hour, children: [label, jsx(Select.ItemIndicator, {})] }, hour))) }) })] })] }));
|
|
4681
4681
|
}
|
|
4682
4682
|
|
|
4683
4683
|
const TimePicker = ({ column, schema, prefix }) => {
|
|
4684
4684
|
const { watch, formState: { errors }, setValue, } = useFormContext();
|
|
4685
4685
|
const { translate } = useSchemaContext();
|
|
4686
|
-
const { required, gridColumn, gridRow } = schema;
|
|
4686
|
+
const { required, gridColumn = "span 4", gridRow = "span 1" } = schema;
|
|
4687
4687
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4688
4688
|
const colLabel = `${prefix}${column}`;
|
|
4689
4689
|
const [open, setOpen] = useState(false);
|
|
@@ -4811,7 +4811,7 @@ const ColumnRenderer = ({ column, properties, prefix, }) => {
|
|
|
4811
4811
|
};
|
|
4812
4812
|
|
|
4813
4813
|
const ArrayViewer = ({ schema, column, prefix }) => {
|
|
4814
|
-
const {
|
|
4814
|
+
const { gridColumn = "span 4", gridRow = "span 1", required, items } = schema;
|
|
4815
4815
|
const { translate } = useSchemaContext();
|
|
4816
4816
|
const colLabel = `${prefix}${column}`;
|
|
4817
4817
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
@@ -4825,7 +4825,7 @@ const ArrayViewer = ({ schema, column, prefix }) => {
|
|
|
4825
4825
|
const BooleanViewer = ({ schema, column, prefix, }) => {
|
|
4826
4826
|
const { watch, formState: { errors }, } = useFormContext();
|
|
4827
4827
|
const { translate } = useSchemaContext();
|
|
4828
|
-
const { required, gridColumn, gridRow } = schema;
|
|
4828
|
+
const { required, gridColumn = "span 4", gridRow = "span 1" } = schema;
|
|
4829
4829
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4830
4830
|
const colLabel = `${prefix}${column}`;
|
|
4831
4831
|
const value = watch(colLabel);
|
|
@@ -4864,7 +4864,7 @@ const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
4864
4864
|
const { translate } = useSchemaContext();
|
|
4865
4865
|
const { required } = schema;
|
|
4866
4866
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4867
|
-
const { gridColumn, gridRow, renderDisplay } = schema;
|
|
4867
|
+
const { gridColumn = "span 4", gridRow = "span 1", renderDisplay } = schema;
|
|
4868
4868
|
const colLabel = `${prefix}${column}`;
|
|
4869
4869
|
const watchEnum = watch(colLabel);
|
|
4870
4870
|
const watchEnums = (watch(colLabel) ?? []);
|
|
@@ -4883,11 +4883,11 @@ const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
4883
4883
|
const FileViewer = ({ column, schema, prefix }) => {
|
|
4884
4884
|
const { watch } = useFormContext();
|
|
4885
4885
|
const { translate } = useSchemaContext();
|
|
4886
|
-
const { required, gridColumn, gridRow } = schema;
|
|
4886
|
+
const { required, gridColumn = "span 4", gridRow = "span 1", } = schema;
|
|
4887
4887
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4888
4888
|
const currentFiles = (watch(column) ?? []);
|
|
4889
4889
|
const colLabel = `${prefix}${column}`;
|
|
4890
|
-
return (jsx(Field, { label: `${translate.t(`${colLabel}.field_label`)}`, required: isRequired, gridColumn: gridColumn
|
|
4890
|
+
return (jsx(Field, { label: `${translate.t(`${colLabel}.field_label`)}`, required: isRequired, gridColumn: gridColumn, gridRow: gridRow, display: "grid", gridTemplateRows: "auto 1fr auto", alignItems: "stretch", children: jsx(Flex, { flexFlow: "column", gap: 1, children: currentFiles.map((file) => {
|
|
4891
4891
|
return (jsx(Card.Root, { variant: "subtle", children: jsxs(Card.Body, { gap: "2", display: "flex", flexFlow: "row", alignItems: "center", padding: "2", children: [file.type.startsWith("image/") && (jsx(Image, { src: URL.createObjectURL(file), alt: file.name, boxSize: "50px", objectFit: "cover", borderRadius: "md", marginRight: "2" })), jsx(Box, { children: file.name })] }) }, file.name));
|
|
4892
4892
|
}) }) }));
|
|
4893
4893
|
};
|
|
@@ -4895,7 +4895,7 @@ const FileViewer = ({ column, schema, prefix }) => {
|
|
|
4895
4895
|
const IdViewer = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
4896
4896
|
const { watch, formState: { errors }, } = useFormContext();
|
|
4897
4897
|
const { idMap, translate } = useSchemaContext();
|
|
4898
|
-
const { required, gridColumn, gridRow, renderDisplay, foreign_key } = schema;
|
|
4898
|
+
const { required, gridColumn = "span 4", gridRow = "span 1", renderDisplay, foreign_key, } = schema;
|
|
4899
4899
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4900
4900
|
const { display_column } = foreign_key;
|
|
4901
4901
|
const colLabel = `${prefix}${column}`;
|
|
@@ -4926,7 +4926,7 @@ const IdViewer = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4926
4926
|
const NumberViewer = ({ schema, column, prefix, }) => {
|
|
4927
4927
|
const { watch, formState: { errors }, } = useFormContext();
|
|
4928
4928
|
const { translate } = useSchemaContext();
|
|
4929
|
-
const { required, gridColumn, gridRow } = schema;
|
|
4929
|
+
const { required, gridColumn = "span 4", gridRow = "span 1" } = schema;
|
|
4930
4930
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4931
4931
|
const colLabel = `${prefix}${column}`;
|
|
4932
4932
|
const value = watch(colLabel);
|
|
@@ -4934,7 +4934,7 @@ const NumberViewer = ({ schema, column, prefix, }) => {
|
|
|
4934
4934
|
};
|
|
4935
4935
|
|
|
4936
4936
|
const ObjectViewer = ({ schema, column, prefix }) => {
|
|
4937
|
-
const { properties,
|
|
4937
|
+
const { properties, gridColumn = "span 4", gridRow = "span 1", required, } = schema;
|
|
4938
4938
|
const { translate } = useSchemaContext();
|
|
4939
4939
|
const colLabel = `${prefix}${column}`;
|
|
4940
4940
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
@@ -4954,7 +4954,7 @@ const ObjectViewer = ({ schema, column, prefix }) => {
|
|
|
4954
4954
|
const RecordInput = ({ column, schema, prefix }) => {
|
|
4955
4955
|
const { formState: { errors }, setValue, getValues, } = useFormContext();
|
|
4956
4956
|
const { translate } = useSchemaContext();
|
|
4957
|
-
const { required, gridColumn, gridRow } = schema;
|
|
4957
|
+
const { required, gridColumn = "span 4", gridRow = "span 1" } = schema;
|
|
4958
4958
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4959
4959
|
const entries = Object.entries(getValues(column) ?? {});
|
|
4960
4960
|
const [showNewEntries, setShowNewEntries] = useState(false);
|
|
@@ -5006,7 +5006,7 @@ const RecordInput = ({ column, schema, prefix }) => {
|
|
|
5006
5006
|
const StringViewer = ({ column, schema, prefix, }) => {
|
|
5007
5007
|
const { watch, formState: { errors }, } = useFormContext();
|
|
5008
5008
|
const { translate } = useSchemaContext();
|
|
5009
|
-
const { required, gridColumn, gridRow } = schema;
|
|
5009
|
+
const { required, gridColumn = "span 4", gridRow = "span 1" } = schema;
|
|
5010
5010
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
5011
5011
|
const colLabel = `${prefix}${column}`;
|
|
5012
5012
|
const value = watch(colLabel);
|
|
@@ -5101,17 +5101,17 @@ const TagViewer = ({ column, schema, prefix }) => {
|
|
|
5101
5101
|
const TextAreaViewer = ({ column, schema, prefix, }) => {
|
|
5102
5102
|
const { watch, formState: { errors }, } = useFormContext();
|
|
5103
5103
|
const { translate } = useSchemaContext();
|
|
5104
|
-
const { required, gridColumn, gridRow } = schema;
|
|
5104
|
+
const { required, gridColumn = "span 4", gridRow = "span 1" } = schema;
|
|
5105
5105
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
5106
5106
|
const colLabel = `${prefix}${column}`;
|
|
5107
5107
|
const value = watch(colLabel);
|
|
5108
|
-
return (jsx(Fragment, { children: jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn: gridColumn
|
|
5108
|
+
return (jsx(Fragment, { children: jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn: gridColumn, gridRow: gridRow, children: [jsx(Text, { whiteSpace: "pre-wrap", children: value }), " ", errors[colLabel] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }) }));
|
|
5109
5109
|
};
|
|
5110
5110
|
|
|
5111
5111
|
const TimeViewer = ({ column, schema, prefix }) => {
|
|
5112
5112
|
const { watch, formState: { errors }, } = useFormContext();
|
|
5113
5113
|
const { translate } = useSchemaContext();
|
|
5114
|
-
const { required, gridColumn, gridRow } = schema;
|
|
5114
|
+
const { required, gridColumn = "span 4", gridRow = "span 1" } = schema;
|
|
5115
5115
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
5116
5116
|
const colLabel = `${prefix}${column}`;
|
|
5117
5117
|
const selectedDate = watch(colLabel);
|