@bsol-oss/react-datatable5 7.3.4 → 7.3.5
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 +29 -31
- package/dist/index.mjs +29 -31
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1660,25 +1660,48 @@ 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
|
-
|
|
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
|
-
|
|
1685
|
+
reactQuery.useQuery({
|
|
1674
1686
|
queryKey: [`idpicker`, ...selectedIds],
|
|
1675
1687
|
queryFn: async () => {
|
|
1676
|
-
|
|
1688
|
+
const data = await getTableData({
|
|
1677
1689
|
serverUrl,
|
|
1678
|
-
searching: searchText ?? "",
|
|
1679
1690
|
in_table: in_table,
|
|
1680
1691
|
limit: limit,
|
|
1681
1692
|
});
|
|
1693
|
+
const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
|
|
1694
|
+
return [
|
|
1695
|
+
item[column_ref],
|
|
1696
|
+
{
|
|
1697
|
+
...item,
|
|
1698
|
+
},
|
|
1699
|
+
];
|
|
1700
|
+
}));
|
|
1701
|
+
setIdMap((state) => {
|
|
1702
|
+
return { ...state, ...newMap };
|
|
1703
|
+
});
|
|
1704
|
+
return data;
|
|
1682
1705
|
},
|
|
1683
1706
|
enabled: (selectedIds ?? []).length > 0,
|
|
1684
1707
|
staleTime: 10000,
|
|
@@ -1692,26 +1715,6 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
|
|
|
1692
1715
|
setLimit(10);
|
|
1693
1716
|
};
|
|
1694
1717
|
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]);
|
|
1715
1718
|
const getPickedValue = () => {
|
|
1716
1719
|
if (selectedIds.length <= 0) {
|
|
1717
1720
|
return "";
|
|
@@ -1725,11 +1728,6 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
|
|
|
1725
1728
|
}
|
|
1726
1729
|
return record[display_column];
|
|
1727
1730
|
};
|
|
1728
|
-
React.useEffect(() => {
|
|
1729
|
-
setIdMap((state) => {
|
|
1730
|
-
return { ...state, ...newIdMap, ...existingIds };
|
|
1731
|
-
});
|
|
1732
|
-
}, [newIdMap, existingIds]);
|
|
1733
1731
|
return (jsxRuntime.jsxs(Field, { label: `${title ?? snakeToLabel(column)}`, required: isRequired, alignItems: "stretch", gridColumn,
|
|
1734
1732
|
gridRow, children: [isMultiple && (jsxRuntime.jsxs(react.Flex, { flexFlow: "wrap", gap: 1, children: [selectedIds.map((id) => {
|
|
1735
1733
|
const item = idMap[id];
|
|
@@ -2407,7 +2405,7 @@ const FormInternal = () => {
|
|
|
2407
2405
|
}
|
|
2408
2406
|
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
2407
|
return (jsxRuntime.jsx(DataListItem, { label: `${key}`, ...getDataListProps(value) }, `form-${column}-${key}`));
|
|
2410
|
-
}) })] }));
|
|
2408
|
+
}) })] }, `form-${key}`));
|
|
2411
2409
|
}
|
|
2412
2410
|
if (type === "boolean") {
|
|
2413
2411
|
return (jsxRuntime.jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 4", label: `${snakeToLabel(column)}`, ...getDataListProps((validatedData ?? {})[column]) }, `form-${key}`));
|
|
@@ -2473,7 +2471,7 @@ const FormInternal = () => {
|
|
|
2473
2471
|
return jsxRuntime.jsx(BooleanPicker, { column: key }, `form-${key}`);
|
|
2474
2472
|
}
|
|
2475
2473
|
if (type === "object") {
|
|
2476
|
-
return
|
|
2474
|
+
return jsxRuntime.jsx(ObjectInput, { column: key }, `form-${key}`);
|
|
2477
2475
|
}
|
|
2478
2476
|
if (type === "array") {
|
|
2479
2477
|
if (variant === "id-picker") {
|
package/dist/index.mjs
CHANGED
|
@@ -1640,25 +1640,48 @@ 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
|
-
|
|
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
|
-
|
|
1665
|
+
useQuery({
|
|
1654
1666
|
queryKey: [`idpicker`, ...selectedIds],
|
|
1655
1667
|
queryFn: async () => {
|
|
1656
|
-
|
|
1668
|
+
const data = await getTableData({
|
|
1657
1669
|
serverUrl,
|
|
1658
|
-
searching: searchText ?? "",
|
|
1659
1670
|
in_table: in_table,
|
|
1660
1671
|
limit: limit,
|
|
1661
1672
|
});
|
|
1673
|
+
const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
|
|
1674
|
+
return [
|
|
1675
|
+
item[column_ref],
|
|
1676
|
+
{
|
|
1677
|
+
...item,
|
|
1678
|
+
},
|
|
1679
|
+
];
|
|
1680
|
+
}));
|
|
1681
|
+
setIdMap((state) => {
|
|
1682
|
+
return { ...state, ...newMap };
|
|
1683
|
+
});
|
|
1684
|
+
return data;
|
|
1662
1685
|
},
|
|
1663
1686
|
enabled: (selectedIds ?? []).length > 0,
|
|
1664
1687
|
staleTime: 10000,
|
|
@@ -1672,26 +1695,6 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
|
|
|
1672
1695
|
setLimit(10);
|
|
1673
1696
|
};
|
|
1674
1697
|
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]);
|
|
1695
1698
|
const getPickedValue = () => {
|
|
1696
1699
|
if (selectedIds.length <= 0) {
|
|
1697
1700
|
return "";
|
|
@@ -1705,11 +1708,6 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
|
|
|
1705
1708
|
}
|
|
1706
1709
|
return record[display_column];
|
|
1707
1710
|
};
|
|
1708
|
-
useEffect(() => {
|
|
1709
|
-
setIdMap((state) => {
|
|
1710
|
-
return { ...state, ...newIdMap, ...existingIds };
|
|
1711
|
-
});
|
|
1712
|
-
}, [newIdMap, existingIds]);
|
|
1713
1711
|
return (jsxs(Field, { label: `${title ?? snakeToLabel(column)}`, required: isRequired, alignItems: "stretch", gridColumn,
|
|
1714
1712
|
gridRow, children: [isMultiple && (jsxs(Flex, { flexFlow: "wrap", gap: 1, children: [selectedIds.map((id) => {
|
|
1715
1713
|
const item = idMap[id];
|
|
@@ -2387,7 +2385,7 @@ const FormInternal = () => {
|
|
|
2387
2385
|
}
|
|
2388
2386
|
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
2387
|
return (jsx(DataListItem, { label: `${key}`, ...getDataListProps(value) }, `form-${column}-${key}`));
|
|
2390
|
-
}) })] }));
|
|
2388
|
+
}) })] }, `form-${key}`));
|
|
2391
2389
|
}
|
|
2392
2390
|
if (type === "boolean") {
|
|
2393
2391
|
return (jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 4", label: `${snakeToLabel(column)}`, ...getDataListProps((validatedData ?? {})[column]) }, `form-${key}`));
|
|
@@ -2453,7 +2451,7 @@ const FormInternal = () => {
|
|
|
2453
2451
|
return jsx(BooleanPicker, { column: key }, `form-${key}`);
|
|
2454
2452
|
}
|
|
2455
2453
|
if (type === "object") {
|
|
2456
|
-
return
|
|
2454
|
+
return jsx(ObjectInput, { column: key }, `form-${key}`);
|
|
2457
2455
|
}
|
|
2458
2456
|
if (type === "array") {
|
|
2459
2457
|
if (variant === "id-picker") {
|