@bsol-oss/react-datatable5 7.3.4 → 7.3.6

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 +45 -43
  2. package/dist/index.mjs +45 -43
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1660,25 +1660,49 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
1660
1660
  const query = reactQuery.useQuery({
1661
1661
  queryKey: [`idpicker`, searchText, in_table, limit],
1662
1662
  queryFn: async () => {
1663
- return await getTableData({
1663
+ const data = await getTableData({
1664
1664
  serverUrl,
1665
1665
  searching: searchText ?? "",
1666
1666
  in_table: in_table,
1667
1667
  limit: limit,
1668
1668
  });
1669
+ const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
1670
+ return [
1671
+ item[column_ref],
1672
+ {
1673
+ ...item,
1674
+ },
1675
+ ];
1676
+ }));
1677
+ setIdMap((state) => {
1678
+ return { ...state, ...newMap };
1679
+ });
1680
+ return data;
1669
1681
  },
1670
1682
  enabled: (searchText ?? "")?.length > 0,
1671
1683
  staleTime: 10000,
1672
1684
  });
1673
- const idQuery = reactQuery.useQuery({
1685
+ reactQuery.useQuery({
1674
1686
  queryKey: [`idpicker`, ...selectedIds],
1675
1687
  queryFn: async () => {
1676
- return await getTableData({
1688
+ const data = await getTableData({
1677
1689
  serverUrl,
1678
- searching: searchText ?? "",
1679
1690
  in_table: in_table,
1680
1691
  limit: limit,
1692
+ where: [{ id: column_ref, value: watchId }],
1693
+ });
1694
+ const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
1695
+ return [
1696
+ item[column_ref],
1697
+ {
1698
+ ...item,
1699
+ },
1700
+ ];
1701
+ }));
1702
+ setIdMap((state) => {
1703
+ return { ...state, ...newMap };
1681
1704
  });
1705
+ return data;
1682
1706
  },
1683
1707
  enabled: (selectedIds ?? []).length > 0,
1684
1708
  staleTime: 10000,
@@ -1691,45 +1715,18 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
1691
1715
  setSearchText(event.target.value);
1692
1716
  setLimit(10);
1693
1717
  };
1694
- const ids = (watch(column) ?? []);
1695
- const newIdMap = React.useMemo(() => {
1696
- if (dataList === undefined)
1697
- return;
1698
- return Object.fromEntries(dataList.map((item) => {
1699
- return [
1700
- item[column_ref],
1701
- {
1702
- ...item,
1703
- },
1704
- ];
1705
- }));
1706
- }, [dataList, column_ref]);
1707
- const existingIds = React.useMemo(() => Object.fromEntries((idQuery?.data ?? { data: [] }).data.map((item) => {
1708
- return [
1709
- item[column_ref],
1710
- {
1711
- ...item,
1712
- },
1713
- ];
1714
- })), [idQuery, column_ref]);
1718
+ const watchId = watch(column);
1719
+ const watchIds = (watch(column) ?? []);
1715
1720
  const getPickedValue = () => {
1716
- if (selectedIds.length <= 0) {
1717
- return "";
1718
- }
1719
1721
  if (Object.keys(idMap).length <= 0) {
1720
1722
  return "";
1721
1723
  }
1722
- const record = idMap[selectedIds[0]];
1724
+ const record = idMap[watchId];
1723
1725
  if (record === undefined) {
1724
1726
  return "";
1725
1727
  }
1726
1728
  return record[display_column];
1727
1729
  };
1728
- React.useEffect(() => {
1729
- setIdMap((state) => {
1730
- return { ...state, ...newIdMap, ...existingIds };
1731
- });
1732
- }, [newIdMap, existingIds]);
1733
1730
  return (jsxRuntime.jsxs(Field, { label: `${title ?? snakeToLabel(column)}`, required: isRequired, alignItems: "stretch", gridColumn,
1734
1731
  gridRow, children: [isMultiple && (jsxRuntime.jsxs(react.Flex, { flexFlow: "wrap", gap: 1, children: [selectedIds.map((id) => {
1735
1732
  const item = idMap[id];
@@ -1737,7 +1734,7 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
1737
1734
  return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "undefined" });
1738
1735
  }
1739
1736
  return (jsxRuntime.jsx(Tag, { closable: true, onClick: () => {
1740
- setValue(column, ids.filter((id) => id != item[column_ref]));
1737
+ setValue(column, watchIds.filter((id) => id != item[column_ref]));
1741
1738
  }, children: !!renderDisplay === true
1742
1739
  ? renderDisplay(item)
1743
1740
  : item[display_column] }));
@@ -1753,15 +1750,17 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
1753
1750
  }, children: close ?? "Close" }), jsxRuntime.jsx(react.Flex, { flexFlow: "column wrap", children:
1754
1751
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
1755
1752
  dataList.map((item) => {
1756
- const selected = ids.some((id) => item[column_ref] === id);
1753
+ const selected = isMultiple
1754
+ ? watchIds.some((id) => item[column_ref] === id)
1755
+ : watchId === item[column_ref];
1757
1756
  return (jsxRuntime.jsx(react.Box, { cursor: "pointer", onClick: () => {
1758
1757
  if (!isMultiple) {
1759
1758
  setOpenSearchResult(false);
1760
- setValue(column, [item[column_ref]]);
1759
+ setValue(column, item[column_ref]);
1761
1760
  return;
1762
1761
  }
1763
1762
  const newSet = new Set([
1764
- ...(ids ?? []),
1763
+ ...(watchIds ?? []),
1765
1764
  item[column_ref],
1766
1765
  ]);
1767
1766
  setValue(column, [...newSet]);
@@ -2223,6 +2222,7 @@ const EnumPicker = ({ column, isMultiple = false }) => {
2223
2222
  const [limit, setLimit] = React.useState(10);
2224
2223
  const [openSearchResult, setOpenSearchResult] = React.useState();
2225
2224
  const ref = React.useRef(null);
2225
+ const watchEnum = watch(column);
2226
2226
  const watchEnums = (watch(column) ?? []);
2227
2227
  const properties = (schema.properties[column] ?? {});
2228
2228
  const dataList = properties.enum ?? [];
@@ -2246,17 +2246,19 @@ const EnumPicker = ({ column, isMultiple = false }) => {
2246
2246
  setOpenSearchResult(true);
2247
2247
  }, children: "Add" })] })), !isMultiple && (jsxRuntime.jsx(Button, { variant: "outline", onClick: () => {
2248
2248
  setOpenSearchResult(true);
2249
- }, children: watchEnums[0] })), 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, { children: [jsxRuntime.jsx(react.Input, { placeholder: "Type to search", onChange: (event) => {
2249
+ }, children: 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, { children: [jsxRuntime.jsx(react.Input, { placeholder: "Type to search", onChange: (event) => {
2250
2250
  onSearchChange(event);
2251
2251
  setOpenSearchResult(true);
2252
2252
  }, autoComplete: "off", ref: ref }), jsxRuntime.jsx(PopoverTitle, {}), jsxRuntime.jsxs(react.Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsxRuntime.jsx(react.Text, { children: `Search Result: ${count}, Showing ${limit}` }), jsxRuntime.jsx(Button, { onClick: async () => {
2253
2253
  setOpenSearchResult(false);
2254
2254
  }, children: "close" }), jsxRuntime.jsx(react.Flex, { flexFlow: "column wrap", children: dataList.map((item) => {
2255
- const selected = watchEnums.some((enumValue) => item === enumValue);
2255
+ const selected = isMultiple
2256
+ ? watchEnums.some((enumValue) => item === enumValue)
2257
+ : watchEnum == item;
2256
2258
  return (jsxRuntime.jsx(react.Box, { cursor: "pointer", onClick: () => {
2257
2259
  if (!isMultiple) {
2258
2260
  setOpenSearchResult(false);
2259
- setValue(column, [item]);
2261
+ setValue(column, item);
2260
2262
  return;
2261
2263
  }
2262
2264
  const newSet = new Set([...(watchEnums ?? []), item]);
@@ -2407,7 +2409,7 @@ const FormInternal = () => {
2407
2409
  }
2408
2410
  return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: 2, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", children: [jsxRuntime.jsx(react.Text, { children: snakeToLabel(column) }), jsxRuntime.jsx(DataListRoot, { orientation: "horizontal", padding: 4, borderColor: "gray.200", borderWidth: 1, borderRadius: 4, children: Object.entries(value).map(([key, value]) => {
2409
2411
  return (jsxRuntime.jsx(DataListItem, { label: `${key}`, ...getDataListProps(value) }, `form-${column}-${key}`));
2410
- }) })] }));
2412
+ }) })] }, `form-${key}`));
2411
2413
  }
2412
2414
  if (type === "boolean") {
2413
2415
  return (jsxRuntime.jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 4", label: `${snakeToLabel(column)}`, ...getDataListProps((validatedData ?? {})[column]) }, `form-${key}`));
@@ -2473,7 +2475,7 @@ const FormInternal = () => {
2473
2475
  return jsxRuntime.jsx(BooleanPicker, { column: key }, `form-${key}`);
2474
2476
  }
2475
2477
  if (type === "object") {
2476
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(ObjectInput, { column: key }, `form-${key}`) }));
2478
+ return jsxRuntime.jsx(ObjectInput, { column: key }, `form-${key}`);
2477
2479
  }
2478
2480
  if (type === "array") {
2479
2481
  if (variant === "id-picker") {
package/dist/index.mjs CHANGED
@@ -1640,25 +1640,49 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
1640
1640
  const query = useQuery({
1641
1641
  queryKey: [`idpicker`, searchText, in_table, limit],
1642
1642
  queryFn: async () => {
1643
- return await getTableData({
1643
+ const data = await getTableData({
1644
1644
  serverUrl,
1645
1645
  searching: searchText ?? "",
1646
1646
  in_table: in_table,
1647
1647
  limit: limit,
1648
1648
  });
1649
+ const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
1650
+ return [
1651
+ item[column_ref],
1652
+ {
1653
+ ...item,
1654
+ },
1655
+ ];
1656
+ }));
1657
+ setIdMap((state) => {
1658
+ return { ...state, ...newMap };
1659
+ });
1660
+ return data;
1649
1661
  },
1650
1662
  enabled: (searchText ?? "")?.length > 0,
1651
1663
  staleTime: 10000,
1652
1664
  });
1653
- const idQuery = useQuery({
1665
+ useQuery({
1654
1666
  queryKey: [`idpicker`, ...selectedIds],
1655
1667
  queryFn: async () => {
1656
- return await getTableData({
1668
+ const data = await getTableData({
1657
1669
  serverUrl,
1658
- searching: searchText ?? "",
1659
1670
  in_table: in_table,
1660
1671
  limit: limit,
1672
+ where: [{ id: column_ref, value: watchId }],
1673
+ });
1674
+ const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
1675
+ return [
1676
+ item[column_ref],
1677
+ {
1678
+ ...item,
1679
+ },
1680
+ ];
1681
+ }));
1682
+ setIdMap((state) => {
1683
+ return { ...state, ...newMap };
1661
1684
  });
1685
+ return data;
1662
1686
  },
1663
1687
  enabled: (selectedIds ?? []).length > 0,
1664
1688
  staleTime: 10000,
@@ -1671,45 +1695,18 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
1671
1695
  setSearchText(event.target.value);
1672
1696
  setLimit(10);
1673
1697
  };
1674
- const ids = (watch(column) ?? []);
1675
- const newIdMap = useMemo(() => {
1676
- if (dataList === undefined)
1677
- return;
1678
- return Object.fromEntries(dataList.map((item) => {
1679
- return [
1680
- item[column_ref],
1681
- {
1682
- ...item,
1683
- },
1684
- ];
1685
- }));
1686
- }, [dataList, column_ref]);
1687
- const existingIds = useMemo(() => Object.fromEntries((idQuery?.data ?? { data: [] }).data.map((item) => {
1688
- return [
1689
- item[column_ref],
1690
- {
1691
- ...item,
1692
- },
1693
- ];
1694
- })), [idQuery, column_ref]);
1698
+ const watchId = watch(column);
1699
+ const watchIds = (watch(column) ?? []);
1695
1700
  const getPickedValue = () => {
1696
- if (selectedIds.length <= 0) {
1697
- return "";
1698
- }
1699
1701
  if (Object.keys(idMap).length <= 0) {
1700
1702
  return "";
1701
1703
  }
1702
- const record = idMap[selectedIds[0]];
1704
+ const record = idMap[watchId];
1703
1705
  if (record === undefined) {
1704
1706
  return "";
1705
1707
  }
1706
1708
  return record[display_column];
1707
1709
  };
1708
- useEffect(() => {
1709
- setIdMap((state) => {
1710
- return { ...state, ...newIdMap, ...existingIds };
1711
- });
1712
- }, [newIdMap, existingIds]);
1713
1710
  return (jsxs(Field, { label: `${title ?? snakeToLabel(column)}`, required: isRequired, alignItems: "stretch", gridColumn,
1714
1711
  gridRow, children: [isMultiple && (jsxs(Flex, { flexFlow: "wrap", gap: 1, children: [selectedIds.map((id) => {
1715
1712
  const item = idMap[id];
@@ -1717,7 +1714,7 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
1717
1714
  return jsx(Fragment, { children: "undefined" });
1718
1715
  }
1719
1716
  return (jsx(Tag, { closable: true, onClick: () => {
1720
- setValue(column, ids.filter((id) => id != item[column_ref]));
1717
+ setValue(column, watchIds.filter((id) => id != item[column_ref]));
1721
1718
  }, children: !!renderDisplay === true
1722
1719
  ? renderDisplay(item)
1723
1720
  : item[display_column] }));
@@ -1733,15 +1730,17 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
1733
1730
  }, children: close ?? "Close" }), jsx(Flex, { flexFlow: "column wrap", children:
1734
1731
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
1735
1732
  dataList.map((item) => {
1736
- const selected = ids.some((id) => item[column_ref] === id);
1733
+ const selected = isMultiple
1734
+ ? watchIds.some((id) => item[column_ref] === id)
1735
+ : watchId === item[column_ref];
1737
1736
  return (jsx(Box, { cursor: "pointer", onClick: () => {
1738
1737
  if (!isMultiple) {
1739
1738
  setOpenSearchResult(false);
1740
- setValue(column, [item[column_ref]]);
1739
+ setValue(column, item[column_ref]);
1741
1740
  return;
1742
1741
  }
1743
1742
  const newSet = new Set([
1744
- ...(ids ?? []),
1743
+ ...(watchIds ?? []),
1745
1744
  item[column_ref],
1746
1745
  ]);
1747
1746
  setValue(column, [...newSet]);
@@ -2203,6 +2202,7 @@ const EnumPicker = ({ column, isMultiple = false }) => {
2203
2202
  const [limit, setLimit] = useState(10);
2204
2203
  const [openSearchResult, setOpenSearchResult] = useState();
2205
2204
  const ref = useRef(null);
2205
+ const watchEnum = watch(column);
2206
2206
  const watchEnums = (watch(column) ?? []);
2207
2207
  const properties = (schema.properties[column] ?? {});
2208
2208
  const dataList = properties.enum ?? [];
@@ -2226,17 +2226,19 @@ const EnumPicker = ({ column, isMultiple = false }) => {
2226
2226
  setOpenSearchResult(true);
2227
2227
  }, children: "Add" })] })), !isMultiple && (jsx(Button, { variant: "outline", onClick: () => {
2228
2228
  setOpenSearchResult(true);
2229
- }, children: watchEnums[0] })), 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, { children: [jsx(Input, { placeholder: "Type to search", onChange: (event) => {
2229
+ }, children: 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, { children: [jsx(Input, { placeholder: "Type to search", onChange: (event) => {
2230
2230
  onSearchChange(event);
2231
2231
  setOpenSearchResult(true);
2232
2232
  }, autoComplete: "off", ref: ref }), jsx(PopoverTitle, {}), jsxs(Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsx(Text, { children: `Search Result: ${count}, Showing ${limit}` }), jsx(Button, { onClick: async () => {
2233
2233
  setOpenSearchResult(false);
2234
2234
  }, children: "close" }), jsx(Flex, { flexFlow: "column wrap", children: dataList.map((item) => {
2235
- const selected = watchEnums.some((enumValue) => item === enumValue);
2235
+ const selected = isMultiple
2236
+ ? watchEnums.some((enumValue) => item === enumValue)
2237
+ : watchEnum == item;
2236
2238
  return (jsx(Box, { cursor: "pointer", onClick: () => {
2237
2239
  if (!isMultiple) {
2238
2240
  setOpenSearchResult(false);
2239
- setValue(column, [item]);
2241
+ setValue(column, item);
2240
2242
  return;
2241
2243
  }
2242
2244
  const newSet = new Set([...(watchEnums ?? []), item]);
@@ -2387,7 +2389,7 @@ const FormInternal = () => {
2387
2389
  }
2388
2390
  return (jsxs(Flex, { flexFlow: "column", gap: 2, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", children: [jsx(Text, { children: snakeToLabel(column) }), jsx(DataListRoot, { orientation: "horizontal", padding: 4, borderColor: "gray.200", borderWidth: 1, borderRadius: 4, children: Object.entries(value).map(([key, value]) => {
2389
2391
  return (jsx(DataListItem, { label: `${key}`, ...getDataListProps(value) }, `form-${column}-${key}`));
2390
- }) })] }));
2392
+ }) })] }, `form-${key}`));
2391
2393
  }
2392
2394
  if (type === "boolean") {
2393
2395
  return (jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 4", label: `${snakeToLabel(column)}`, ...getDataListProps((validatedData ?? {})[column]) }, `form-${key}`));
@@ -2453,7 +2455,7 @@ const FormInternal = () => {
2453
2455
  return jsx(BooleanPicker, { column: key }, `form-${key}`);
2454
2456
  }
2455
2457
  if (type === "object") {
2456
- return (jsx(Fragment, { children: jsx(ObjectInput, { column: key }, `form-${key}`) }));
2458
+ return jsx(ObjectInput, { column: key }, `form-${key}`);
2457
2459
  }
2458
2460
  if (type === "array") {
2459
2461
  if (variant === "id-picker") {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bsol-oss/react-datatable5",
3
- "version": "7.3.4",
3
+ "version": "7.3.6",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",