@bsol-oss/react-datatable5 12.0.0-beta.36 → 12.0.0-beta.37
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 +14 -8
- package/dist/index.mjs +14 -8
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -4353,7 +4353,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4353
4353
|
const { required, gridColumn = "span 4", gridRow = "span 1", renderDisplay, foreign_key, } = schema;
|
|
4354
4354
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4355
4355
|
const { table, column: column_ref, display_column, } = foreign_key;
|
|
4356
|
-
const [searchText, setSearchText] = React.useState();
|
|
4356
|
+
const [searchText, setSearchText] = React.useState("");
|
|
4357
4357
|
const [limit, setLimit] = React.useState(10);
|
|
4358
4358
|
const [openSearchResult, setOpenSearchResult] = React.useState();
|
|
4359
4359
|
const [page, setPage] = React.useState(0);
|
|
@@ -4382,13 +4382,12 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4382
4382
|
});
|
|
4383
4383
|
return data;
|
|
4384
4384
|
},
|
|
4385
|
-
enabled:
|
|
4385
|
+
enabled: openSearchResult === true,
|
|
4386
4386
|
staleTime: 300000,
|
|
4387
4387
|
});
|
|
4388
4388
|
const { isLoading, isFetching, data, isPending, isError } = query;
|
|
4389
4389
|
const dataList = data?.data ?? [];
|
|
4390
4390
|
const count = data?.count ?? 0;
|
|
4391
|
-
const isDirty = (searchText?.length ?? 0) > 0;
|
|
4392
4391
|
const watchId = watch(colLabel);
|
|
4393
4392
|
const watchIds = (watch(colLabel) ?? []);
|
|
4394
4393
|
const queryDefault = reactQuery.useQuery({
|
|
@@ -4433,6 +4432,13 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4433
4432
|
}
|
|
4434
4433
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
4435
4434
|
}, []);
|
|
4435
|
+
// Effect to trigger initial data fetch when popover opens
|
|
4436
|
+
React.useEffect(() => {
|
|
4437
|
+
if (openSearchResult) {
|
|
4438
|
+
query.refetch();
|
|
4439
|
+
}
|
|
4440
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
4441
|
+
}, [openSearchResult]);
|
|
4436
4442
|
const onSearchChange = async (event) => {
|
|
4437
4443
|
setSearchText(event.target.value);
|
|
4438
4444
|
setPage(0);
|
|
@@ -4444,9 +4450,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4444
4450
|
// Reset to first page when changing limit
|
|
4445
4451
|
setPage(0);
|
|
4446
4452
|
// Trigger a new search with the updated limit
|
|
4447
|
-
|
|
4448
|
-
query.refetch();
|
|
4449
|
-
}
|
|
4453
|
+
query.refetch();
|
|
4450
4454
|
};
|
|
4451
4455
|
const getPickedValue = () => {
|
|
4452
4456
|
if (Object.keys(idMap).length <= 0) {
|
|
@@ -4479,7 +4483,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4479
4483
|
}, 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) => {
|
|
4480
4484
|
onSearchChange(event);
|
|
4481
4485
|
setOpenSearchResult(true);
|
|
4482
|
-
}, autoComplete: "off", ref: ref }), jsxRuntime.jsx(PopoverTitle, {}),
|
|
4486
|
+
}, autoComplete: "off", ref: ref, value: searchText }), jsxRuntime.jsx(PopoverTitle, {}), openSearchResult && (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: ["/ ", count > 0 ? `${page * limit + 1}-${Math.min((page + 1) * limit, count)}` : '0'] })] })] }), jsxRuntime.jsx(react.Box, { children: jsxRuntime.jsxs("select", { value: limit, onChange: handleLimitChange, style: {
|
|
4483
4487
|
padding: "4px 8px",
|
|
4484
4488
|
borderRadius: "4px",
|
|
4485
4489
|
border: "1px solid #ccc",
|
|
@@ -4504,7 +4508,9 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4504
4508
|
: {}), children: !!renderDisplay === true
|
|
4505
4509
|
? renderDisplay(item)
|
|
4506
4510
|
: item[display_column] }, item[column_ref]));
|
|
4507
|
-
}) }),
|
|
4511
|
+
}) }), dataList.length <= 0 && (jsxRuntime.jsx(react.Text, { children: searchText
|
|
4512
|
+
? translate.t(removeIndex(`${colLabel}.empty_search_result`))
|
|
4513
|
+
: translate.t(removeIndex(`${colLabel}.initial_results`)) }))] }), 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`)) }))] }));
|
|
4508
4514
|
};
|
|
4509
4515
|
|
|
4510
4516
|
const NumberInputRoot = React__namespace.forwardRef(function NumberInput(props, ref) {
|
package/dist/index.mjs
CHANGED
|
@@ -4333,7 +4333,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4333
4333
|
const { required, gridColumn = "span 4", gridRow = "span 1", renderDisplay, foreign_key, } = schema;
|
|
4334
4334
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4335
4335
|
const { table, column: column_ref, display_column, } = foreign_key;
|
|
4336
|
-
const [searchText, setSearchText] = useState();
|
|
4336
|
+
const [searchText, setSearchText] = useState("");
|
|
4337
4337
|
const [limit, setLimit] = useState(10);
|
|
4338
4338
|
const [openSearchResult, setOpenSearchResult] = useState();
|
|
4339
4339
|
const [page, setPage] = useState(0);
|
|
@@ -4362,13 +4362,12 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4362
4362
|
});
|
|
4363
4363
|
return data;
|
|
4364
4364
|
},
|
|
4365
|
-
enabled:
|
|
4365
|
+
enabled: openSearchResult === true,
|
|
4366
4366
|
staleTime: 300000,
|
|
4367
4367
|
});
|
|
4368
4368
|
const { isLoading, isFetching, data, isPending, isError } = query;
|
|
4369
4369
|
const dataList = data?.data ?? [];
|
|
4370
4370
|
const count = data?.count ?? 0;
|
|
4371
|
-
const isDirty = (searchText?.length ?? 0) > 0;
|
|
4372
4371
|
const watchId = watch(colLabel);
|
|
4373
4372
|
const watchIds = (watch(colLabel) ?? []);
|
|
4374
4373
|
const queryDefault = useQuery({
|
|
@@ -4413,6 +4412,13 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4413
4412
|
}
|
|
4414
4413
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
4415
4414
|
}, []);
|
|
4415
|
+
// Effect to trigger initial data fetch when popover opens
|
|
4416
|
+
useEffect(() => {
|
|
4417
|
+
if (openSearchResult) {
|
|
4418
|
+
query.refetch();
|
|
4419
|
+
}
|
|
4420
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
4421
|
+
}, [openSearchResult]);
|
|
4416
4422
|
const onSearchChange = async (event) => {
|
|
4417
4423
|
setSearchText(event.target.value);
|
|
4418
4424
|
setPage(0);
|
|
@@ -4424,9 +4430,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4424
4430
|
// Reset to first page when changing limit
|
|
4425
4431
|
setPage(0);
|
|
4426
4432
|
// Trigger a new search with the updated limit
|
|
4427
|
-
|
|
4428
|
-
query.refetch();
|
|
4429
|
-
}
|
|
4433
|
+
query.refetch();
|
|
4430
4434
|
};
|
|
4431
4435
|
const getPickedValue = () => {
|
|
4432
4436
|
if (Object.keys(idMap).length <= 0) {
|
|
@@ -4459,7 +4463,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4459
4463
|
}, 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) => {
|
|
4460
4464
|
onSearchChange(event);
|
|
4461
4465
|
setOpenSearchResult(true);
|
|
4462
|
-
}, autoComplete: "off", ref: ref }), jsx(PopoverTitle, {}),
|
|
4466
|
+
}, autoComplete: "off", ref: ref, value: searchText }), jsx(PopoverTitle, {}), openSearchResult && (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: ["/ ", count > 0 ? `${page * limit + 1}-${Math.min((page + 1) * limit, count)}` : '0'] })] })] }), jsx(Box, { children: jsxs("select", { value: limit, onChange: handleLimitChange, style: {
|
|
4463
4467
|
padding: "4px 8px",
|
|
4464
4468
|
borderRadius: "4px",
|
|
4465
4469
|
border: "1px solid #ccc",
|
|
@@ -4484,7 +4488,9 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
|
|
|
4484
4488
|
: {}), children: !!renderDisplay === true
|
|
4485
4489
|
? renderDisplay(item)
|
|
4486
4490
|
: item[display_column] }, item[column_ref]));
|
|
4487
|
-
}) }),
|
|
4491
|
+
}) }), dataList.length <= 0 && (jsx(Text, { children: searchText
|
|
4492
|
+
? translate.t(removeIndex(`${colLabel}.empty_search_result`))
|
|
4493
|
+
: translate.t(removeIndex(`${colLabel}.initial_results`)) }))] }), 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`)) }))] }));
|
|
4488
4494
|
};
|
|
4489
4495
|
|
|
4490
4496
|
const NumberInputRoot = React.forwardRef(function NumberInput$1(props, ref) {
|