@bsol-oss/react-datatable5 11.0.0-beta.7 → 11.0.0-beta.8

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.
Files changed (3) hide show
  1. package/dist/index.js +29 -4
  2. package/dist/index.mjs +30 -5
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -4258,13 +4258,38 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4258
4258
  const dataList = data?.data ?? [];
4259
4259
  const count = data?.count ?? 0;
4260
4260
  const isDirty = (searchText?.length ?? 0) > 0;
4261
+ const watchId = watch(colLabel);
4262
+ const watchIds = (watch(colLabel) ?? []);
4263
+ reactQuery.useQuery({
4264
+ queryKey: [`idpicker`, { column, searchText, limit, page }],
4265
+ queryFn: async () => {
4266
+ const data = await getTableData({
4267
+ serverUrl,
4268
+ searching: watchId,
4269
+ in_table: table,
4270
+ limit: limit,
4271
+ offset: page * 10,
4272
+ });
4273
+ const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
4274
+ return [
4275
+ item[column_ref],
4276
+ {
4277
+ ...item,
4278
+ },
4279
+ ];
4280
+ }));
4281
+ setIdMap((state) => {
4282
+ return { ...state, ...newMap };
4283
+ });
4284
+ return data;
4285
+ },
4286
+ staleTime: 300000,
4287
+ });
4261
4288
  const onSearchChange = async (event) => {
4262
4289
  setSearchText(event.target.value);
4263
4290
  setPage(0);
4264
4291
  setLimit(10);
4265
4292
  };
4266
- const watchId = watch(colLabel);
4267
- const watchIds = (watch(colLabel) ?? []);
4268
4293
  const getPickedValue = () => {
4269
4294
  if (Object.keys(idMap).length <= 0) {
4270
4295
  return "";
@@ -4293,7 +4318,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4293
4318
  }, 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}.typeToSearch`)), onChange: (event) => {
4294
4319
  onSearchChange(event);
4295
4320
  setOpenSearchResult(true);
4296
- }, 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" }), isError && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isError" }), jsxRuntime.jsx(react.Text, { justifySelf: "center", children: `${translate.t(removeIndex(`${colLabel}.total`))} ${count}, ${translate.t(removeIndex(`${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:
4321
+ }, 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.jsx(react.Text, { justifySelf: "center", children: `${translate.t(removeIndex(`${colLabel}.total`))} ${count}, ${translate.t(removeIndex(`${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:
4297
4322
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
4298
4323
  dataList.map((item) => {
4299
4324
  const selected = isMultiple
@@ -4313,7 +4338,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4313
4338
  }, opacity: 0.7, _hover: { opacity: 1 }, ...(selected ? { color: "gray.400/50" } : {}), children: !!renderDisplay === true
4314
4339
  ? renderDisplay(item)
4315
4340
  : item[display_column] }, item[column_ref]));
4316
- }) }), isDirty && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: dataList.length <= 0 && (jsxRuntime.jsx(react.Text, { children: translate.t(removeIndex(`${colLabel}.emptySearchResult`)) })) }))] }), jsxRuntime.jsx(PaginationRoot, { justifySelf: "center", count: query?.data?.count ?? 0, pageSize: 10, defaultPage: 1, page: page + 1, onPageChange: (e) => setPage(e.page - 1), children: jsxRuntime.jsxs(react.HStack, { gap: "4", children: [jsxRuntime.jsx(PaginationPrevTrigger, {}), jsxRuntime.jsx(PaginationPageText, {}), jsxRuntime.jsx(PaginationNextTrigger, {})] }) })] }))] }) })] }), errors[`${colLabel}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }));
4341
+ }) }), isDirty && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: dataList.length <= 0 && (jsxRuntime.jsx(react.Text, { children: translate.t(removeIndex(`${colLabel}.emptySearchResult`)) })) }))] }), jsxRuntime.jsx(PaginationRoot, { justifySelf: "center", count: count, pageSize: 10, 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}.fieldRequired`)) }))] }));
4317
4342
  };
4318
4343
 
4319
4344
  const NumberInputRoot = React__namespace.forwardRef(function NumberInput(props, ref) {
package/dist/index.mjs CHANGED
@@ -7,7 +7,7 @@ import { MdFilterAlt, MdArrowUpward, MdArrowDownward, MdOutlineMoveDown, MdOutli
7
7
  import { LuX, LuCheck, LuChevronRight, LuChevronDown } from 'react-icons/lu';
8
8
  import Dayzed from '@bsol-oss/dayzed-react19';
9
9
  import { FaUpDown, FaGripLinesVertical } from 'react-icons/fa6';
10
- import { BiDownArrow, BiUpArrow } from 'react-icons/bi';
10
+ import { BiDownArrow, BiUpArrow, BiError } from 'react-icons/bi';
11
11
  import { CgClose } from 'react-icons/cg';
12
12
  import { IoMdEye, IoMdCheckbox } from 'react-icons/io';
13
13
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
@@ -4238,13 +4238,38 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4238
4238
  const dataList = data?.data ?? [];
4239
4239
  const count = data?.count ?? 0;
4240
4240
  const isDirty = (searchText?.length ?? 0) > 0;
4241
+ const watchId = watch(colLabel);
4242
+ const watchIds = (watch(colLabel) ?? []);
4243
+ useQuery({
4244
+ queryKey: [`idpicker`, { column, searchText, limit, page }],
4245
+ queryFn: async () => {
4246
+ const data = await getTableData({
4247
+ serverUrl,
4248
+ searching: watchId,
4249
+ in_table: table,
4250
+ limit: limit,
4251
+ offset: page * 10,
4252
+ });
4253
+ const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
4254
+ return [
4255
+ item[column_ref],
4256
+ {
4257
+ ...item,
4258
+ },
4259
+ ];
4260
+ }));
4261
+ setIdMap((state) => {
4262
+ return { ...state, ...newMap };
4263
+ });
4264
+ return data;
4265
+ },
4266
+ staleTime: 300000,
4267
+ });
4241
4268
  const onSearchChange = async (event) => {
4242
4269
  setSearchText(event.target.value);
4243
4270
  setPage(0);
4244
4271
  setLimit(10);
4245
4272
  };
4246
- const watchId = watch(colLabel);
4247
- const watchIds = (watch(colLabel) ?? []);
4248
4273
  const getPickedValue = () => {
4249
4274
  if (Object.keys(idMap).length <= 0) {
4250
4275
  return "";
@@ -4273,7 +4298,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4273
4298
  }, 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}.typeToSearch`)), onChange: (event) => {
4274
4299
  onSearchChange(event);
4275
4300
  setOpenSearchResult(true);
4276
- }, 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" }), isError && jsx(Fragment, { children: "isError" }), jsx(Text, { justifySelf: "center", children: `${translate.t(removeIndex(`${colLabel}.total`))} ${count}, ${translate.t(removeIndex(`${colLabel}.showing`))} ${limit}` }), jsxs(Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsx(Flex, { flexFlow: "column wrap", children:
4301
+ }, 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, {}) })), jsx(Text, { justifySelf: "center", children: `${translate.t(removeIndex(`${colLabel}.total`))} ${count}, ${translate.t(removeIndex(`${colLabel}.showing`))} ${limit}` }), jsxs(Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsx(Flex, { flexFlow: "column wrap", children:
4277
4302
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
4278
4303
  dataList.map((item) => {
4279
4304
  const selected = isMultiple
@@ -4293,7 +4318,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4293
4318
  }, opacity: 0.7, _hover: { opacity: 1 }, ...(selected ? { color: "gray.400/50" } : {}), children: !!renderDisplay === true
4294
4319
  ? renderDisplay(item)
4295
4320
  : item[display_column] }, item[column_ref]));
4296
- }) }), isDirty && (jsx(Fragment, { children: dataList.length <= 0 && (jsx(Text, { children: translate.t(removeIndex(`${colLabel}.emptySearchResult`)) })) }))] }), jsx(PaginationRoot, { justifySelf: "center", count: query?.data?.count ?? 0, pageSize: 10, defaultPage: 1, page: page + 1, onPageChange: (e) => setPage(e.page - 1), children: jsxs(HStack, { gap: "4", children: [jsx(PaginationPrevTrigger, {}), jsx(PaginationPageText, {}), jsx(PaginationNextTrigger, {})] }) })] }))] }) })] }), errors[`${colLabel}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }));
4321
+ }) }), isDirty && (jsx(Fragment, { children: dataList.length <= 0 && (jsx(Text, { children: translate.t(removeIndex(`${colLabel}.emptySearchResult`)) })) }))] }), jsx(PaginationRoot, { justifySelf: "center", count: count, pageSize: 10, 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}.fieldRequired`)) }))] }));
4297
4322
  };
4298
4323
 
4299
4324
  const NumberInputRoot = React.forwardRef(function NumberInput$1(props, ref) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bsol-oss/react-datatable5",
3
- "version": "11.0.0-beta.7",
3
+ "version": "11.0.0-beta.8",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",