@bsol-oss/react-datatable5 12.0.0-beta.33 → 12.0.0-beta.35
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
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",
|
|
3654
|
+
return (jsxRuntime.jsxs(react.Box, { gridRow, gridColumn, children: [jsxRuntime.jsxs(react.Box, { as: "label", 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.Box, { children: index + 1 }), jsxRuntime.jsx(react.Grid, { gridTemplateColumns: "repeat(12, 1fr)", autoFlow: "row", 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) => {
|
|
@@ -3851,7 +3851,7 @@ function filterArray(array, searchTerm) {
|
|
|
3851
3851
|
});
|
|
3852
3852
|
}
|
|
3853
3853
|
|
|
3854
|
-
const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
3854
|
+
const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLimit = false, }) => {
|
|
3855
3855
|
const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
|
|
3856
3856
|
const { translate } = useSchemaContext();
|
|
3857
3857
|
const { required, variant } = schema;
|
|
@@ -3872,7 +3872,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
3872
3872
|
setLimit(10);
|
|
3873
3873
|
};
|
|
3874
3874
|
if (variant === "radio") {
|
|
3875
|
-
return (jsxRuntime.jsx(Field, { label: `${translate.t(removeIndex(`${
|
|
3875
|
+
return (jsxRuntime.jsx(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
|
|
3876
3876
|
gridRow, children: jsxRuntime.jsx(react.RadioGroup.Root, { defaultValue: "1", children: jsxRuntime.jsx(react.HStack, { gap: "6", children: filterArray(dataList, searchText ?? "").map((item) => {
|
|
3877
3877
|
return (jsxRuntime.jsxs(react.RadioGroup.Item, { onClick: () => {
|
|
3878
3878
|
if (!isMultiple) {
|
|
@@ -3887,7 +3887,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
3887
3887
|
: translate.t(removeIndex(`${colLabel}.${item}`)) })] }, `${colLabel}-${item}`));
|
|
3888
3888
|
}) }) }) }));
|
|
3889
3889
|
}
|
|
3890
|
-
return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${
|
|
3890
|
+
return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
|
|
3891
3891
|
gridRow, children: [isMultiple && (jsxRuntime.jsxs(react.Flex, { flexFlow: "wrap", gap: 1, children: [watchEnums.map((enumValue) => {
|
|
3892
3892
|
const item = enumValue;
|
|
3893
3893
|
if (item === undefined) {
|
|
@@ -3904,10 +3904,24 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
3904
3904
|
setOpenSearchResult(true);
|
|
3905
3905
|
}, justifyContent: "start", children: watchEnum === undefined
|
|
3906
3906
|
? ""
|
|
3907
|
-
: translate.t(removeIndex(`${colLabel}.${watchEnum}`)) })), jsxRuntime.jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start" }, children: [jsxRuntime.jsx(PopoverTrigger, {}), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsxRuntime.jsx(react.Input, { placeholder: translate.t(`${
|
|
3907
|
+
: translate.t(removeIndex(`${colLabel}.${watchEnum}`)) })), jsxRuntime.jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start" }, children: [jsxRuntime.jsx(PopoverTrigger, {}), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsxRuntime.jsx(react.Input, { placeholder: translate.t(`${colLabel}.type_to_search`), onChange: (event) => {
|
|
3908
3908
|
onSearchChange(event);
|
|
3909
3909
|
setOpenSearchResult(true);
|
|
3910
|
-
}, autoComplete: "off", ref: ref }), jsxRuntime.jsx(PopoverTitle, {}), jsxRuntime.jsx(react.Text, { children: `${translate.t(`${
|
|
3910
|
+
}, autoComplete: "off", ref: ref }), jsxRuntime.jsx(PopoverTitle, {}), showTotalAndLimit && (jsxRuntime.jsx(react.Text, { children: `${translate.t(`${colLabel}.total`)}: ${count}, ${translate.t(`${colLabel}.showing`)} ${limit}` })), jsxRuntime.jsxs(react.Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsxRuntime.jsx(react.Flex, { flexFlow: "column wrap", children: dataList.filter((item) => {
|
|
3911
|
+
const searchTerm = (searchText || "").toLowerCase();
|
|
3912
|
+
if (!searchTerm)
|
|
3913
|
+
return true;
|
|
3914
|
+
// Check if the original enum value contains the search text
|
|
3915
|
+
const enumValueMatch = item.toLowerCase().includes(searchTerm);
|
|
3916
|
+
// Check if the display value (translation) contains the search text
|
|
3917
|
+
const displayValue = !!renderDisplay === true
|
|
3918
|
+
? renderDisplay(item)
|
|
3919
|
+
: translate.t(removeIndex(`${colLabel}.${item}`));
|
|
3920
|
+
// Convert to string and check if it includes the search term
|
|
3921
|
+
const displayValueString = String(displayValue).toLowerCase();
|
|
3922
|
+
const displayValueMatch = displayValueString.includes(searchTerm);
|
|
3923
|
+
return enumValueMatch || displayValueMatch;
|
|
3924
|
+
}).map((item) => {
|
|
3911
3925
|
const selected = isMultiple
|
|
3912
3926
|
? watchEnums.some((enumValue) => item === enumValue)
|
|
3913
3927
|
: watchEnum == item;
|
|
@@ -3922,7 +3936,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
3922
3936
|
}, ...(selected ? { color: "colorPalette.400/50" } : {}), children: !!renderDisplay === true
|
|
3923
3937
|
? renderDisplay(item)
|
|
3924
3938
|
: translate.t(removeIndex(`${colLabel}.${item}`)) }, `${colLabel}-${item}`));
|
|
3925
|
-
}) }), isDirty && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: dataList.length <= 0 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: translate.t(removeIndex(`${colLabel}.empty_search_result`)) })) }))] })] }) })] }), errors[`${
|
|
3939
|
+
}) }), isDirty && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: dataList.length <= 0 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: translate.t(removeIndex(`${colLabel}.empty_search_result`)) })) }))] })] }) })] }), errors[`${colLabel}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
3926
3940
|
};
|
|
3927
3941
|
|
|
3928
3942
|
function isEnteringWindow(_ref) {
|
|
@@ -4296,6 +4310,15 @@ const FilePicker = ({ column, schema, prefix }) => {
|
|
|
4296
4310
|
}) }), errors[`${colLabel}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
4297
4311
|
};
|
|
4298
4312
|
|
|
4313
|
+
const ToggleTip = React__namespace.forwardRef(function ToggleTip(props, ref) {
|
|
4314
|
+
const { showArrow, children, portalled = true, content, portalRef, ...rest } = props;
|
|
4315
|
+
return (jsxRuntime.jsxs(react.Popover.Root, { ...rest, positioning: { ...rest.positioning, gutter: 4 }, children: [jsxRuntime.jsx(react.Popover.Trigger, { asChild: true, children: children }), jsxRuntime.jsx(react.Portal, { disabled: !portalled, container: portalRef, children: jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsxs(react.Popover.Content, { width: "auto", px: "2", py: "1", textStyle: "xs", rounded: "sm", ref: ref, children: [showArrow && (jsxRuntime.jsx(react.Popover.Arrow, { children: jsxRuntime.jsx(react.Popover.ArrowTip, {}) })), content] }) }) })] }));
|
|
4316
|
+
});
|
|
4317
|
+
const InfoTip = React__namespace.forwardRef(function InfoTip(props, ref) {
|
|
4318
|
+
const { children, ...rest } = props;
|
|
4319
|
+
return (jsxRuntime.jsx(ToggleTip, { content: children, ...rest, ref: ref, children: jsxRuntime.jsx(react.IconButton, { variant: "ghost", "aria-label": "info", size: "2xs", colorPalette: "colorPalette", children: jsxRuntime.jsx(hi.HiOutlineInformationCircle, {}) }) }));
|
|
4320
|
+
});
|
|
4321
|
+
|
|
4299
4322
|
const getTableData = async ({ serverUrl, in_table, searching = "", where = [], limit = 10, offset = 0, }) => {
|
|
4300
4323
|
if (serverUrl === undefined || serverUrl.length == 0) {
|
|
4301
4324
|
throw new Error("The serverUrl is missing");
|
|
@@ -4344,7 +4367,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4344
4367
|
searching: searchText ?? "",
|
|
4345
4368
|
in_table: table,
|
|
4346
4369
|
limit: limit,
|
|
4347
|
-
offset: page *
|
|
4370
|
+
offset: page * limit,
|
|
4348
4371
|
});
|
|
4349
4372
|
const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
|
|
4350
4373
|
return [
|
|
@@ -4368,18 +4391,23 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4368
4391
|
const isDirty = (searchText?.length ?? 0) > 0;
|
|
4369
4392
|
const watchId = watch(colLabel);
|
|
4370
4393
|
const watchIds = (watch(colLabel) ?? []);
|
|
4371
|
-
reactQuery.useQuery({
|
|
4394
|
+
const queryDefault = reactQuery.useQuery({
|
|
4372
4395
|
queryKey: [
|
|
4373
|
-
`idpicker`,
|
|
4374
|
-
{ form: parentSchema.title, column,
|
|
4396
|
+
`idpicker-default`,
|
|
4397
|
+
{ form: parentSchema.title, column, id: isMultiple ? watchIds : watchId },
|
|
4375
4398
|
],
|
|
4376
4399
|
queryFn: async () => {
|
|
4400
|
+
if (!watchId && (!watchIds || watchIds.length === 0)) {
|
|
4401
|
+
return { data: [] };
|
|
4402
|
+
}
|
|
4403
|
+
const searchValue = isMultiple ? watchIds.join(",") : watchId;
|
|
4377
4404
|
const data = await getTableData({
|
|
4378
4405
|
serverUrl,
|
|
4379
|
-
searching:
|
|
4406
|
+
searching: searchValue,
|
|
4380
4407
|
in_table: table,
|
|
4381
|
-
|
|
4382
|
-
|
|
4408
|
+
where: [{ id: column_ref, value: isMultiple ? watchIds : [watchId] }],
|
|
4409
|
+
limit: isMultiple ? watchIds.length : 1,
|
|
4410
|
+
offset: 0,
|
|
4383
4411
|
});
|
|
4384
4412
|
const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
|
|
4385
4413
|
return [
|
|
@@ -4394,12 +4422,32 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4394
4422
|
});
|
|
4395
4423
|
return data;
|
|
4396
4424
|
},
|
|
4425
|
+
enabled: isMultiple
|
|
4426
|
+
? Array.isArray(watchIds) && watchIds.length > 0
|
|
4427
|
+
: !!watchId,
|
|
4397
4428
|
});
|
|
4429
|
+
// Effect to trigger the default query when the component mounts
|
|
4430
|
+
React.useEffect(() => {
|
|
4431
|
+
if (isMultiple ? watchIds.length > 0 : !!watchId) {
|
|
4432
|
+
queryDefault.refetch();
|
|
4433
|
+
}
|
|
4434
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
4435
|
+
}, []);
|
|
4398
4436
|
const onSearchChange = async (event) => {
|
|
4399
4437
|
setSearchText(event.target.value);
|
|
4400
4438
|
setPage(0);
|
|
4401
4439
|
setLimit(10);
|
|
4402
4440
|
};
|
|
4441
|
+
const handleLimitChange = (event) => {
|
|
4442
|
+
const newLimit = Number(event.target.value);
|
|
4443
|
+
setLimit(newLimit);
|
|
4444
|
+
// Reset to first page when changing limit
|
|
4445
|
+
setPage(0);
|
|
4446
|
+
// Trigger a new search with the updated limit
|
|
4447
|
+
if (searchText?.length) {
|
|
4448
|
+
query.refetch();
|
|
4449
|
+
}
|
|
4450
|
+
};
|
|
4403
4451
|
const getPickedValue = () => {
|
|
4404
4452
|
if (Object.keys(idMap).length <= 0) {
|
|
4405
4453
|
return "";
|
|
@@ -4420,7 +4468,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4420
4468
|
return (jsxRuntime.jsx(react.Text, { children: translate.t(removeIndex(`${colLabel}.undefined`)) }, id));
|
|
4421
4469
|
}
|
|
4422
4470
|
return (jsxRuntime.jsx(Tag, { closable: true, onClick: () => {
|
|
4423
|
-
setValue(
|
|
4471
|
+
setValue(colLabel, watchIds.filter((itemId) => itemId !== item[column_ref]));
|
|
4424
4472
|
}, children: !!renderDisplay === true
|
|
4425
4473
|
? renderDisplay(item)
|
|
4426
4474
|
: item[display_column] }, id));
|
|
@@ -4428,12 +4476,15 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4428
4476
|
setOpenSearchResult(true);
|
|
4429
4477
|
}, children: translate.t(removeIndex(`${colLabel}.add_more`)) })] })), !isMultiple && (jsxRuntime.jsx(Button, { variant: "outline", onClick: () => {
|
|
4430
4478
|
setOpenSearchResult(true);
|
|
4431
|
-
}, justifyContent: "start", children: getPickedValue() })), jsxRuntime.jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start", strategy: "fixed" }, children: [jsxRuntime.jsx(PopoverTrigger, {}), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsxRuntime.jsx(react.Input, { placeholder: translate.t(removeIndex(`${colLabel}.type_to_search`)), onChange: (event) => {
|
|
4479
|
+
}, justifyContent: "start", children: queryDefault.isLoading ? jsxRuntime.jsx(react.Spinner, { size: "sm" }) : getPickedValue() })), jsxRuntime.jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start", strategy: "fixed" }, children: [jsxRuntime.jsx(PopoverTrigger, {}), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsxRuntime.jsx(react.Input, { placeholder: translate.t(removeIndex(`${colLabel}.type_to_search`)), onChange: (event) => {
|
|
4432
4480
|
onSearchChange(event);
|
|
4433
4481
|
setOpenSearchResult(true);
|
|
4434
|
-
}, autoComplete: "off", ref: ref }), jsxRuntime.jsx(PopoverTitle, {}), (searchText?.length ?? 0) > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isFetching && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isFetching" }), isLoading && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isLoading" }), isPending && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isPending" }), (isFetching || isLoading || isPending) && jsxRuntime.jsx(react.Spinner, {}), isError && (jsxRuntime.jsx(react.Icon, { color: "red.400", children: jsxRuntime.jsx(bi.BiError, {}) })), jsxRuntime.
|
|
4435
|
-
|
|
4436
|
-
|
|
4482
|
+
}, autoComplete: "off", ref: ref }), jsxRuntime.jsx(PopoverTitle, {}), (searchText?.length ?? 0) > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isFetching && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isFetching" }), isLoading && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isLoading" }), isPending && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isPending" }), (isFetching || isLoading || isPending) && jsxRuntime.jsx(react.Spinner, {}), isError && (jsxRuntime.jsx(react.Icon, { color: "red.400", children: jsxRuntime.jsx(bi.BiError, {}) })), jsxRuntime.jsxs(react.Flex, { justifyContent: "space-between", alignItems: "center", children: [jsxRuntime.jsxs(react.Flex, { alignItems: "center", gap: "2", children: [jsxRuntime.jsx(InfoTip, { children: `${translate.t(removeIndex(`${colLabel}.total`))} ${count}, ${translate.t(removeIndex(`${colLabel}.showing`))} ${limit} ${translate.t(removeIndex(`${colLabel}.per_page`), "per page")}` }), jsxRuntime.jsxs(react.Text, { fontSize: "sm", fontWeight: "bold", children: [count, jsxRuntime.jsxs(react.Text, { as: "span", fontSize: "xs", ml: "1", color: "gray.500", children: ["/ ", page * limit + 1, "-", Math.min((page + 1) * limit, count)] })] })] }), jsxRuntime.jsx(react.Box, { children: jsxRuntime.jsxs("select", { value: limit, onChange: handleLimitChange, style: {
|
|
4483
|
+
padding: "4px 8px",
|
|
4484
|
+
borderRadius: "4px",
|
|
4485
|
+
border: "1px solid #ccc",
|
|
4486
|
+
fontSize: "14px",
|
|
4487
|
+
}, children: [jsxRuntime.jsx("option", { value: "5", children: "5" }), jsxRuntime.jsx("option", { value: "10", children: "10" }), jsxRuntime.jsx("option", { value: "20", children: "20" }), jsxRuntime.jsx("option", { value: "50", children: "50" })] }) })] }), jsxRuntime.jsxs(react.Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsxRuntime.jsx(react.Flex, { flexFlow: "column wrap", children: dataList.map((item) => {
|
|
4437
4488
|
const selected = isMultiple
|
|
4438
4489
|
? watchIds.some((id) => item[column_ref] === id)
|
|
4439
4490
|
: watchId === item[column_ref];
|
|
@@ -4453,7 +4504,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4453
4504
|
: {}), children: !!renderDisplay === true
|
|
4454
4505
|
? renderDisplay(item)
|
|
4455
4506
|
: item[display_column] }, item[column_ref]));
|
|
4456
|
-
}) }), isDirty && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: dataList.length <= 0 && (jsxRuntime.jsx(react.Text, { children: translate.t(removeIndex(`${colLabel}.empty_search_result`)) })) }))] }), jsxRuntime.jsx(PaginationRoot, { justifySelf: "center", count: count, pageSize:
|
|
4507
|
+
}) }), isDirty && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: dataList.length <= 0 && (jsxRuntime.jsx(react.Text, { children: translate.t(removeIndex(`${colLabel}.empty_search_result`)) })) }))] }), jsxRuntime.jsx(PaginationRoot, { justifySelf: "center", count: count, pageSize: limit, defaultPage: 1, page: page + 1, onPageChange: (e) => setPage(e.page - 1), children: jsxRuntime.jsxs(react.HStack, { gap: "4", children: [jsxRuntime.jsx(PaginationPrevTrigger, {}), count > 0 && jsxRuntime.jsx(PaginationPageText, {}), jsxRuntime.jsx(PaginationNextTrigger, {})] }) })] }))] }) })] }), errors[`${colLabel}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
4457
4508
|
};
|
|
4458
4509
|
|
|
4459
4510
|
const NumberInputRoot = React__namespace.forwardRef(function NumberInput(props, ref) {
|
|
@@ -4477,7 +4528,7 @@ const NumberInputField = ({ schema, column, prefix, }) => {
|
|
|
4477
4528
|
};
|
|
4478
4529
|
|
|
4479
4530
|
const ObjectInput = ({ schema, column, prefix }) => {
|
|
4480
|
-
const { properties, gridColumn = "span
|
|
4531
|
+
const { properties, gridColumn = "span 12", gridRow = "span 1", required, } = schema;
|
|
4481
4532
|
const { translate } = useSchemaContext();
|
|
4482
4533
|
const colLabel = `${prefix}${column}`;
|
|
4483
4534
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
@@ -4485,7 +4536,7 @@ const ObjectInput = ({ schema, column, prefix }) => {
|
|
|
4485
4536
|
if (properties === undefined) {
|
|
4486
4537
|
throw new Error(`properties is undefined when using ObjectInput`);
|
|
4487
4538
|
}
|
|
4488
|
-
return (jsxRuntime.jsxs(react.Box, { gridRow, gridColumn, children: [jsxRuntime.jsxs(react.Box, { as: "label",
|
|
4539
|
+
return (jsxRuntime.jsxs(react.Box, { gridRow, gridColumn, children: [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", children: Object.keys(properties ?? {}).map((key) => {
|
|
4489
4540
|
return (
|
|
4490
4541
|
// @ts-expect-error find suitable types
|
|
4491
4542
|
jsxRuntime.jsx(ColumnRenderer, { column: `${key}`,
|
|
@@ -4837,7 +4888,7 @@ const ArrayViewer = ({ schema, column, prefix }) => {
|
|
|
4837
4888
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4838
4889
|
const { watch, formState: { errors }, } = reactHookForm.useFormContext();
|
|
4839
4890
|
const values = watch(colLabel) ?? [];
|
|
4840
|
-
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: "*" })] }), values.map((field, index) => (jsxRuntime.jsx(react.Flex, { flexFlow: "column", children: jsxRuntime.jsx(react.Grid, { gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)",
|
|
4891
|
+
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: "*" })] }), values.map((field, index) => (jsxRuntime.jsx(react.Flex, { flexFlow: "column", children: jsxRuntime.jsx(react.Grid, { gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)", autoFlow: "row", children: jsxRuntime.jsx(SchemaViewer, { column: `${index}`,
|
|
4841
4892
|
prefix: `${colLabel}.`,
|
|
4842
4893
|
schema: items }) }) }, `form-${prefix}${column}.${index}`))), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
4843
4894
|
};
|
|
@@ -5297,7 +5348,7 @@ const FormBody = () => {
|
|
|
5297
5348
|
}, formNoValidate: true, children: translate.t("submit_again") }) })] }));
|
|
5298
5349
|
}
|
|
5299
5350
|
if (isConfirming) {
|
|
5300
|
-
return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "2", children: [jsxRuntime.jsx(react.Grid, { gap: 4, gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows:
|
|
5351
|
+
return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "2", children: [jsxRuntime.jsx(react.Grid, { gap: 4, gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: "repeat(12, max-content)", autoFlow: "row", children: ordered.map((column) => {
|
|
5301
5352
|
return (jsxRuntime.jsx(ColumnViewer
|
|
5302
5353
|
// @ts-expect-error find suitable types
|
|
5303
5354
|
, {
|
|
@@ -5309,7 +5360,7 @@ const FormBody = () => {
|
|
|
5309
5360
|
onFormSubmit(validatedData);
|
|
5310
5361
|
}, 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: [], children: jsxRuntime.jsxs(AccordionItem, { value: "b", children: [jsxRuntime.jsxs(AccordionItemTrigger, { children: [jsxRuntime.jsx(react.Alert.Indicator, {}), `${error}`] }), jsxRuntime.jsx(AccordionItemContent, { children: `${JSON.stringify(error)}` })] }) }) }) }) }))] }));
|
|
5311
5362
|
}
|
|
5312
|
-
return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "2", children: [jsxRuntime.jsx(react.Grid, { gap: "4", gridTemplateColumns: "repeat(12, 1fr)",
|
|
5363
|
+
return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "2", children: [jsxRuntime.jsx(react.Grid, { gap: "4", gridTemplateColumns: "repeat(12, 1fr)", autoFlow: "row", children: ordered.map((column) => {
|
|
5313
5364
|
return (jsxRuntime.jsx(ColumnRenderer
|
|
5314
5365
|
// @ts-expect-error find suitable types
|
|
5315
5366
|
, {
|
package/dist/index.mjs
CHANGED
|
@@ -17,7 +17,7 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
|
17
17
|
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
|
|
18
18
|
import rafSchd from 'raf-schd';
|
|
19
19
|
import invariant from 'tiny-invariant';
|
|
20
|
-
import { HiColorSwatch } from 'react-icons/hi';
|
|
20
|
+
import { HiColorSwatch, HiOutlineInformationCircle } from 'react-icons/hi';
|
|
21
21
|
import { flexRender, makeStateUpdater, functionalUpdate, useReactTable, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getPaginationRowModel, createColumnHelper } from '@tanstack/react-table';
|
|
22
22
|
import { rankItem } from '@tanstack/match-sorter-utils';
|
|
23
23
|
import { BsExclamationCircleFill } from 'react-icons/bs';
|
|
@@ -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",
|
|
3634
|
+
return (jsxs(Box, { gridRow, gridColumn, children: [jsxs(Box, { as: "label", children: [`${translate.t(removeIndex(`${colLabel}.field_label`))}`, isRequired && jsx("span", { children: "*" })] }), fields.map((field, index) => (jsxs(Flex, { flexFlow: "column", children: [jsx(Box, { children: index + 1 }), jsx(Grid, { gridTemplateColumns: "repeat(12, 1fr)", autoFlow: "row", 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) => {
|
|
@@ -3831,7 +3831,7 @@ function filterArray(array, searchTerm) {
|
|
|
3831
3831
|
});
|
|
3832
3832
|
}
|
|
3833
3833
|
|
|
3834
|
-
const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
3834
|
+
const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLimit = false, }) => {
|
|
3835
3835
|
const { watch, formState: { errors }, setValue, } = useFormContext();
|
|
3836
3836
|
const { translate } = useSchemaContext();
|
|
3837
3837
|
const { required, variant } = schema;
|
|
@@ -3852,7 +3852,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
3852
3852
|
setLimit(10);
|
|
3853
3853
|
};
|
|
3854
3854
|
if (variant === "radio") {
|
|
3855
|
-
return (jsx(Field, { label: `${translate.t(removeIndex(`${
|
|
3855
|
+
return (jsx(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
|
|
3856
3856
|
gridRow, children: jsx(RadioGroup$1.Root, { defaultValue: "1", children: jsx(HStack, { gap: "6", children: filterArray(dataList, searchText ?? "").map((item) => {
|
|
3857
3857
|
return (jsxs(RadioGroup$1.Item, { onClick: () => {
|
|
3858
3858
|
if (!isMultiple) {
|
|
@@ -3867,7 +3867,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
3867
3867
|
: translate.t(removeIndex(`${colLabel}.${item}`)) })] }, `${colLabel}-${item}`));
|
|
3868
3868
|
}) }) }) }));
|
|
3869
3869
|
}
|
|
3870
|
-
return (jsxs(Field, { label: `${translate.t(removeIndex(`${
|
|
3870
|
+
return (jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
|
|
3871
3871
|
gridRow, children: [isMultiple && (jsxs(Flex, { flexFlow: "wrap", gap: 1, children: [watchEnums.map((enumValue) => {
|
|
3872
3872
|
const item = enumValue;
|
|
3873
3873
|
if (item === undefined) {
|
|
@@ -3884,10 +3884,24 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
3884
3884
|
setOpenSearchResult(true);
|
|
3885
3885
|
}, justifyContent: "start", children: watchEnum === undefined
|
|
3886
3886
|
? ""
|
|
3887
|
-
: translate.t(removeIndex(`${colLabel}.${watchEnum}`)) })), jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start" }, children: [jsx(PopoverTrigger, {}), jsx(PopoverContent, { children: jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsx(Input, { placeholder: translate.t(`${
|
|
3887
|
+
: translate.t(removeIndex(`${colLabel}.${watchEnum}`)) })), jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start" }, children: [jsx(PopoverTrigger, {}), jsx(PopoverContent, { children: jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsx(Input, { placeholder: translate.t(`${colLabel}.type_to_search`), onChange: (event) => {
|
|
3888
3888
|
onSearchChange(event);
|
|
3889
3889
|
setOpenSearchResult(true);
|
|
3890
|
-
}, autoComplete: "off", ref: ref }), jsx(PopoverTitle, {}), jsx(Text, { children: `${translate.t(`${
|
|
3890
|
+
}, autoComplete: "off", ref: ref }), jsx(PopoverTitle, {}), showTotalAndLimit && (jsx(Text, { children: `${translate.t(`${colLabel}.total`)}: ${count}, ${translate.t(`${colLabel}.showing`)} ${limit}` })), jsxs(Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsx(Flex, { flexFlow: "column wrap", children: dataList.filter((item) => {
|
|
3891
|
+
const searchTerm = (searchText || "").toLowerCase();
|
|
3892
|
+
if (!searchTerm)
|
|
3893
|
+
return true;
|
|
3894
|
+
// Check if the original enum value contains the search text
|
|
3895
|
+
const enumValueMatch = item.toLowerCase().includes(searchTerm);
|
|
3896
|
+
// Check if the display value (translation) contains the search text
|
|
3897
|
+
const displayValue = !!renderDisplay === true
|
|
3898
|
+
? renderDisplay(item)
|
|
3899
|
+
: translate.t(removeIndex(`${colLabel}.${item}`));
|
|
3900
|
+
// Convert to string and check if it includes the search term
|
|
3901
|
+
const displayValueString = String(displayValue).toLowerCase();
|
|
3902
|
+
const displayValueMatch = displayValueString.includes(searchTerm);
|
|
3903
|
+
return enumValueMatch || displayValueMatch;
|
|
3904
|
+
}).map((item) => {
|
|
3891
3905
|
const selected = isMultiple
|
|
3892
3906
|
? watchEnums.some((enumValue) => item === enumValue)
|
|
3893
3907
|
: watchEnum == item;
|
|
@@ -3902,7 +3916,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
|
|
|
3902
3916
|
}, ...(selected ? { color: "colorPalette.400/50" } : {}), children: !!renderDisplay === true
|
|
3903
3917
|
? renderDisplay(item)
|
|
3904
3918
|
: translate.t(removeIndex(`${colLabel}.${item}`)) }, `${colLabel}-${item}`));
|
|
3905
|
-
}) }), isDirty && (jsx(Fragment, { children: dataList.length <= 0 && (jsx(Fragment, { children: translate.t(removeIndex(`${colLabel}.empty_search_result`)) })) }))] })] }) })] }), errors[`${
|
|
3919
|
+
}) }), isDirty && (jsx(Fragment, { children: dataList.length <= 0 && (jsx(Fragment, { children: translate.t(removeIndex(`${colLabel}.empty_search_result`)) })) }))] })] }) })] }), errors[`${colLabel}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
3906
3920
|
};
|
|
3907
3921
|
|
|
3908
3922
|
function isEnteringWindow(_ref) {
|
|
@@ -4276,6 +4290,15 @@ const FilePicker = ({ column, schema, prefix }) => {
|
|
|
4276
4290
|
}) }), errors[`${colLabel}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
4277
4291
|
};
|
|
4278
4292
|
|
|
4293
|
+
const ToggleTip = React.forwardRef(function ToggleTip(props, ref) {
|
|
4294
|
+
const { showArrow, children, portalled = true, content, portalRef, ...rest } = props;
|
|
4295
|
+
return (jsxs(Popover.Root, { ...rest, positioning: { ...rest.positioning, gutter: 4 }, children: [jsx(Popover.Trigger, { asChild: true, children: children }), jsx(Portal, { disabled: !portalled, container: portalRef, children: jsx(Popover.Positioner, { children: jsxs(Popover.Content, { width: "auto", px: "2", py: "1", textStyle: "xs", rounded: "sm", ref: ref, children: [showArrow && (jsx(Popover.Arrow, { children: jsx(Popover.ArrowTip, {}) })), content] }) }) })] }));
|
|
4296
|
+
});
|
|
4297
|
+
const InfoTip = React.forwardRef(function InfoTip(props, ref) {
|
|
4298
|
+
const { children, ...rest } = props;
|
|
4299
|
+
return (jsx(ToggleTip, { content: children, ...rest, ref: ref, children: jsx(IconButton, { variant: "ghost", "aria-label": "info", size: "2xs", colorPalette: "colorPalette", children: jsx(HiOutlineInformationCircle, {}) }) }));
|
|
4300
|
+
});
|
|
4301
|
+
|
|
4279
4302
|
const getTableData = async ({ serverUrl, in_table, searching = "", where = [], limit = 10, offset = 0, }) => {
|
|
4280
4303
|
if (serverUrl === undefined || serverUrl.length == 0) {
|
|
4281
4304
|
throw new Error("The serverUrl is missing");
|
|
@@ -4324,7 +4347,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4324
4347
|
searching: searchText ?? "",
|
|
4325
4348
|
in_table: table,
|
|
4326
4349
|
limit: limit,
|
|
4327
|
-
offset: page *
|
|
4350
|
+
offset: page * limit,
|
|
4328
4351
|
});
|
|
4329
4352
|
const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
|
|
4330
4353
|
return [
|
|
@@ -4348,18 +4371,23 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4348
4371
|
const isDirty = (searchText?.length ?? 0) > 0;
|
|
4349
4372
|
const watchId = watch(colLabel);
|
|
4350
4373
|
const watchIds = (watch(colLabel) ?? []);
|
|
4351
|
-
useQuery({
|
|
4374
|
+
const queryDefault = useQuery({
|
|
4352
4375
|
queryKey: [
|
|
4353
|
-
`idpicker`,
|
|
4354
|
-
{ form: parentSchema.title, column,
|
|
4376
|
+
`idpicker-default`,
|
|
4377
|
+
{ form: parentSchema.title, column, id: isMultiple ? watchIds : watchId },
|
|
4355
4378
|
],
|
|
4356
4379
|
queryFn: async () => {
|
|
4380
|
+
if (!watchId && (!watchIds || watchIds.length === 0)) {
|
|
4381
|
+
return { data: [] };
|
|
4382
|
+
}
|
|
4383
|
+
const searchValue = isMultiple ? watchIds.join(",") : watchId;
|
|
4357
4384
|
const data = await getTableData({
|
|
4358
4385
|
serverUrl,
|
|
4359
|
-
searching:
|
|
4386
|
+
searching: searchValue,
|
|
4360
4387
|
in_table: table,
|
|
4361
|
-
|
|
4362
|
-
|
|
4388
|
+
where: [{ id: column_ref, value: isMultiple ? watchIds : [watchId] }],
|
|
4389
|
+
limit: isMultiple ? watchIds.length : 1,
|
|
4390
|
+
offset: 0,
|
|
4363
4391
|
});
|
|
4364
4392
|
const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
|
|
4365
4393
|
return [
|
|
@@ -4374,12 +4402,32 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4374
4402
|
});
|
|
4375
4403
|
return data;
|
|
4376
4404
|
},
|
|
4405
|
+
enabled: isMultiple
|
|
4406
|
+
? Array.isArray(watchIds) && watchIds.length > 0
|
|
4407
|
+
: !!watchId,
|
|
4377
4408
|
});
|
|
4409
|
+
// Effect to trigger the default query when the component mounts
|
|
4410
|
+
useEffect(() => {
|
|
4411
|
+
if (isMultiple ? watchIds.length > 0 : !!watchId) {
|
|
4412
|
+
queryDefault.refetch();
|
|
4413
|
+
}
|
|
4414
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
4415
|
+
}, []);
|
|
4378
4416
|
const onSearchChange = async (event) => {
|
|
4379
4417
|
setSearchText(event.target.value);
|
|
4380
4418
|
setPage(0);
|
|
4381
4419
|
setLimit(10);
|
|
4382
4420
|
};
|
|
4421
|
+
const handleLimitChange = (event) => {
|
|
4422
|
+
const newLimit = Number(event.target.value);
|
|
4423
|
+
setLimit(newLimit);
|
|
4424
|
+
// Reset to first page when changing limit
|
|
4425
|
+
setPage(0);
|
|
4426
|
+
// Trigger a new search with the updated limit
|
|
4427
|
+
if (searchText?.length) {
|
|
4428
|
+
query.refetch();
|
|
4429
|
+
}
|
|
4430
|
+
};
|
|
4383
4431
|
const getPickedValue = () => {
|
|
4384
4432
|
if (Object.keys(idMap).length <= 0) {
|
|
4385
4433
|
return "";
|
|
@@ -4400,7 +4448,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4400
4448
|
return (jsx(Text, { children: translate.t(removeIndex(`${colLabel}.undefined`)) }, id));
|
|
4401
4449
|
}
|
|
4402
4450
|
return (jsx(Tag, { closable: true, onClick: () => {
|
|
4403
|
-
setValue(
|
|
4451
|
+
setValue(colLabel, watchIds.filter((itemId) => itemId !== item[column_ref]));
|
|
4404
4452
|
}, children: !!renderDisplay === true
|
|
4405
4453
|
? renderDisplay(item)
|
|
4406
4454
|
: item[display_column] }, id));
|
|
@@ -4408,12 +4456,15 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4408
4456
|
setOpenSearchResult(true);
|
|
4409
4457
|
}, children: translate.t(removeIndex(`${colLabel}.add_more`)) })] })), !isMultiple && (jsx(Button, { variant: "outline", onClick: () => {
|
|
4410
4458
|
setOpenSearchResult(true);
|
|
4411
|
-
}, justifyContent: "start", children: getPickedValue() })), jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start", strategy: "fixed" }, children: [jsx(PopoverTrigger, {}), jsx(PopoverContent, { children: jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsx(Input, { placeholder: translate.t(removeIndex(`${colLabel}.type_to_search`)), onChange: (event) => {
|
|
4459
|
+
}, justifyContent: "start", children: queryDefault.isLoading ? jsx(Spinner, { size: "sm" }) : getPickedValue() })), jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start", strategy: "fixed" }, children: [jsx(PopoverTrigger, {}), jsx(PopoverContent, { children: jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsx(Input, { placeholder: translate.t(removeIndex(`${colLabel}.type_to_search`)), onChange: (event) => {
|
|
4412
4460
|
onSearchChange(event);
|
|
4413
4461
|
setOpenSearchResult(true);
|
|
4414
|
-
}, autoComplete: "off", ref: ref }), jsx(PopoverTitle, {}), (searchText?.length ?? 0) > 0 && (jsxs(Fragment, { children: [isFetching && jsx(Fragment, { children: "isFetching" }), isLoading && jsx(Fragment, { children: "isLoading" }), isPending && jsx(Fragment, { children: "isPending" }), (isFetching || isLoading || isPending) && jsx(Spinner, {}), isError && (jsx(Icon, { color: "red.400", children: jsx(BiError, {}) })),
|
|
4415
|
-
|
|
4416
|
-
|
|
4462
|
+
}, autoComplete: "off", ref: ref }), jsx(PopoverTitle, {}), (searchText?.length ?? 0) > 0 && (jsxs(Fragment, { children: [isFetching && jsx(Fragment, { children: "isFetching" }), isLoading && jsx(Fragment, { children: "isLoading" }), isPending && jsx(Fragment, { children: "isPending" }), (isFetching || isLoading || isPending) && jsx(Spinner, {}), isError && (jsx(Icon, { color: "red.400", children: jsx(BiError, {}) })), jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [jsxs(Flex, { alignItems: "center", gap: "2", children: [jsx(InfoTip, { children: `${translate.t(removeIndex(`${colLabel}.total`))} ${count}, ${translate.t(removeIndex(`${colLabel}.showing`))} ${limit} ${translate.t(removeIndex(`${colLabel}.per_page`), "per page")}` }), jsxs(Text, { fontSize: "sm", fontWeight: "bold", children: [count, jsxs(Text, { as: "span", fontSize: "xs", ml: "1", color: "gray.500", children: ["/ ", page * limit + 1, "-", Math.min((page + 1) * limit, count)] })] })] }), jsx(Box, { children: jsxs("select", { value: limit, onChange: handleLimitChange, style: {
|
|
4463
|
+
padding: "4px 8px",
|
|
4464
|
+
borderRadius: "4px",
|
|
4465
|
+
border: "1px solid #ccc",
|
|
4466
|
+
fontSize: "14px",
|
|
4467
|
+
}, children: [jsx("option", { value: "5", children: "5" }), jsx("option", { value: "10", children: "10" }), jsx("option", { value: "20", children: "20" }), jsx("option", { value: "50", children: "50" })] }) })] }), jsxs(Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsx(Flex, { flexFlow: "column wrap", children: dataList.map((item) => {
|
|
4417
4468
|
const selected = isMultiple
|
|
4418
4469
|
? watchIds.some((id) => item[column_ref] === id)
|
|
4419
4470
|
: watchId === item[column_ref];
|
|
@@ -4433,7 +4484,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4433
4484
|
: {}), children: !!renderDisplay === true
|
|
4434
4485
|
? renderDisplay(item)
|
|
4435
4486
|
: item[display_column] }, item[column_ref]));
|
|
4436
|
-
}) }), isDirty && (jsx(Fragment, { children: dataList.length <= 0 && (jsx(Text, { children: translate.t(removeIndex(`${colLabel}.empty_search_result`)) })) }))] }), jsx(PaginationRoot, { justifySelf: "center", count: count, pageSize:
|
|
4487
|
+
}) }), isDirty && (jsx(Fragment, { children: dataList.length <= 0 && (jsx(Text, { children: translate.t(removeIndex(`${colLabel}.empty_search_result`)) })) }))] }), jsx(PaginationRoot, { justifySelf: "center", count: count, pageSize: limit, defaultPage: 1, page: page + 1, onPageChange: (e) => setPage(e.page - 1), children: jsxs(HStack, { gap: "4", children: [jsx(PaginationPrevTrigger, {}), count > 0 && jsx(PaginationPageText, {}), jsx(PaginationNextTrigger, {})] }) })] }))] }) })] }), errors[`${colLabel}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
4437
4488
|
};
|
|
4438
4489
|
|
|
4439
4490
|
const NumberInputRoot = React.forwardRef(function NumberInput$1(props, ref) {
|
|
@@ -4457,7 +4508,7 @@ const NumberInputField = ({ schema, column, prefix, }) => {
|
|
|
4457
4508
|
};
|
|
4458
4509
|
|
|
4459
4510
|
const ObjectInput = ({ schema, column, prefix }) => {
|
|
4460
|
-
const { properties, gridColumn = "span
|
|
4511
|
+
const { properties, gridColumn = "span 12", gridRow = "span 1", required, } = schema;
|
|
4461
4512
|
const { translate } = useSchemaContext();
|
|
4462
4513
|
const colLabel = `${prefix}${column}`;
|
|
4463
4514
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
@@ -4465,7 +4516,7 @@ const ObjectInput = ({ schema, column, prefix }) => {
|
|
|
4465
4516
|
if (properties === undefined) {
|
|
4466
4517
|
throw new Error(`properties is undefined when using ObjectInput`);
|
|
4467
4518
|
}
|
|
4468
|
-
return (jsxs(Box, { gridRow, gridColumn, children: [jsxs(Box, { as: "label",
|
|
4519
|
+
return (jsxs(Box, { gridRow, gridColumn, children: [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", children: Object.keys(properties ?? {}).map((key) => {
|
|
4469
4520
|
return (
|
|
4470
4521
|
// @ts-expect-error find suitable types
|
|
4471
4522
|
jsx(ColumnRenderer, { column: `${key}`,
|
|
@@ -4817,7 +4868,7 @@ const ArrayViewer = ({ schema, column, prefix }) => {
|
|
|
4817
4868
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4818
4869
|
const { watch, formState: { errors }, } = useFormContext();
|
|
4819
4870
|
const values = watch(colLabel) ?? [];
|
|
4820
|
-
return (jsxs(Box, { gridRow, gridColumn, children: [jsxs(Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(removeIndex(`${colLabel}.field_label`))}`, isRequired && jsx("span", { children: "*" })] }), values.map((field, index) => (jsx(Flex, { flexFlow: "column", children: jsx(Grid, { gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)",
|
|
4871
|
+
return (jsxs(Box, { gridRow, gridColumn, children: [jsxs(Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(removeIndex(`${colLabel}.field_label`))}`, isRequired && jsx("span", { children: "*" })] }), values.map((field, index) => (jsx(Flex, { flexFlow: "column", children: jsx(Grid, { gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)", autoFlow: "row", children: jsx(SchemaViewer, { column: `${index}`,
|
|
4821
4872
|
prefix: `${colLabel}.`,
|
|
4822
4873
|
schema: items }) }) }, `form-${prefix}${column}.${index}`))), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
4823
4874
|
};
|
|
@@ -5277,7 +5328,7 @@ const FormBody = () => {
|
|
|
5277
5328
|
}, formNoValidate: true, children: translate.t("submit_again") }) })] }));
|
|
5278
5329
|
}
|
|
5279
5330
|
if (isConfirming) {
|
|
5280
|
-
return (jsxs(Flex, { flexFlow: "column", gap: "2", children: [jsx(Grid, { gap: 4, gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows:
|
|
5331
|
+
return (jsxs(Flex, { flexFlow: "column", gap: "2", children: [jsx(Grid, { gap: 4, gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: "repeat(12, max-content)", autoFlow: "row", children: ordered.map((column) => {
|
|
5281
5332
|
return (jsx(ColumnViewer
|
|
5282
5333
|
// @ts-expect-error find suitable types
|
|
5283
5334
|
, {
|
|
@@ -5289,7 +5340,7 @@ const FormBody = () => {
|
|
|
5289
5340
|
onFormSubmit(validatedData);
|
|
5290
5341
|
}, 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: [], children: jsxs(AccordionItem, { value: "b", children: [jsxs(AccordionItemTrigger, { children: [jsx(Alert.Indicator, {}), `${error}`] }), jsx(AccordionItemContent, { children: `${JSON.stringify(error)}` })] }) }) }) }) }))] }));
|
|
5291
5342
|
}
|
|
5292
|
-
return (jsxs(Flex, { flexFlow: "column", gap: "2", children: [jsx(Grid, { gap: "4", gridTemplateColumns: "repeat(12, 1fr)",
|
|
5343
|
+
return (jsxs(Flex, { flexFlow: "column", gap: "2", children: [jsx(Grid, { gap: "4", gridTemplateColumns: "repeat(12, 1fr)", autoFlow: "row", children: ordered.map((column) => {
|
|
5293
5344
|
return (jsx(ColumnRenderer
|
|
5294
5345
|
// @ts-expect-error find suitable types
|
|
5295
5346
|
, {
|
|
@@ -4,5 +4,6 @@ export interface IdPickerProps {
|
|
|
4
4
|
isMultiple?: boolean;
|
|
5
5
|
schema: CustomJSONSchema7;
|
|
6
6
|
prefix: string;
|
|
7
|
+
showTotalAndLimit?: boolean;
|
|
7
8
|
}
|
|
8
|
-
export declare const EnumPicker: ({ column, isMultiple, schema, prefix, }: IdPickerProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export declare const EnumPicker: ({ column, isMultiple, schema, prefix, showTotalAndLimit, }: IdPickerProps) => import("react/jsx-runtime").JSX.Element;
|