@bsol-oss/react-datatable5 12.0.0-beta.69 → 12.0.0-beta.70

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 (5) hide show
  1. package/dist/index.d.ts +17 -0
  2. package/dist/index.js +30 -3
  3. package/dist/index.mjs +30 -3
  4. package/dist/types/components/Form/components/fields/StringInputField.d.ts +17 -0
  5. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -550,10 +550,27 @@ declare const TableDataDisplay: ({ colorPalette, emptyComponent, }: TableDataDis
550
550
 
551
551
  declare const GlobalFilter: () => react_jsx_runtime.JSX.Element;
552
552
 
553
+ interface CustomQueryFnResponse {
554
+ /**
555
+ * The data of the query
556
+ */
557
+ data: any;
558
+ /**
559
+ * The id map of the data
560
+ */
561
+ idMap: Record<string, any>;
562
+ }
563
+ interface CustomQueryFnParams {
564
+ searching: string;
565
+ limit: number;
566
+ offset: number;
567
+ }
568
+ type CustomQueryFn = (params: CustomQueryFnParams) => Promise<CustomQueryFnResponse>;
553
569
  interface ForeignKeyProps {
554
570
  column: string;
555
571
  table: string;
556
572
  display_column: string;
573
+ customQueryFn?: CustomQueryFn;
557
574
  }
558
575
 
559
576
  interface CustomJSONSchema7 extends JSONSchema7 {
package/dist/index.js CHANGED
@@ -4560,7 +4560,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4560
4560
  const { serverUrl, idMap, setIdMap, translate, schema: parentSchema, } = useSchemaContext();
4561
4561
  const { required, gridColumn = "span 4", gridRow = "span 1", renderDisplay, foreign_key, } = schema;
4562
4562
  const isRequired = required?.some((columnId) => columnId === column);
4563
- const { table, column: column_ref, display_column, } = foreign_key;
4563
+ const { table, column: column_ref, display_column, customQueryFn, } = foreign_key;
4564
4564
  const [searchText, setSearchText] = React.useState("");
4565
4565
  const [limit, setLimit] = React.useState(10);
4566
4566
  const [openSearchResult, setOpenSearchResult] = React.useState();
@@ -4573,6 +4573,17 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4573
4573
  const query = reactQuery.useQuery({
4574
4574
  queryKey: [`idpicker`, { column, searchText, limit, page }],
4575
4575
  queryFn: async () => {
4576
+ if (customQueryFn) {
4577
+ const { data, idMap } = await customQueryFn({
4578
+ searching: searchText ?? "",
4579
+ limit: limit,
4580
+ offset: page * limit,
4581
+ });
4582
+ setIdMap((state) => {
4583
+ return { ...state, ...idMap };
4584
+ });
4585
+ return data;
4586
+ }
4576
4587
  const data = await getTableData({
4577
4588
  serverUrl,
4578
4589
  searching: searchText ?? "",
@@ -4603,6 +4614,17 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4603
4614
  { form: parentSchema.title, column, id: isMultiple ? watchIds : watchId },
4604
4615
  ],
4605
4616
  queryFn: async () => {
4617
+ if (customQueryFn) {
4618
+ const { data, idMap } = await customQueryFn({
4619
+ searching: watchIds.join(","),
4620
+ limit: isMultiple ? watchIds.length : 1,
4621
+ offset: 0,
4622
+ });
4623
+ setIdMap((state) => {
4624
+ return { ...state, ...idMap };
4625
+ });
4626
+ return data;
4627
+ }
4606
4628
  if (!watchId && (!watchIds || watchIds.length === 0)) {
4607
4629
  return { data: [] };
4608
4630
  }
@@ -4695,7 +4717,9 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4695
4717
  setOpenSearchResult(true);
4696
4718
  }, children: translate.t(removeIndex(`${colLabel}.add_more`)) })] })), !isMultiple && (jsxRuntime.jsx(Button, { variant: "outline", onClick: () => {
4697
4719
  setOpenSearchResult(true);
4698
- }, 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, { portalled: false, children: jsxRuntime.jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsxRuntime.jsx(react.Input, { placeholder: translate.t(removeIndex(`${colLabel}.type_to_search`)), onChange: onSearchChange, autoComplete: "off", ref: ref, value: searchText }), jsxRuntime.jsx(PopoverTitle, {}), openSearchResult && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(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: {
4720
+ }, 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, { portalled: false, children: jsxRuntime.jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsxRuntime.jsx(react.Input, { placeholder: translate.t(removeIndex(`${colLabel}.type_to_search`)), onChange: onSearchChange, autoComplete: "off", ref: ref, value: searchText }), jsxRuntime.jsx(PopoverTitle, {}), openSearchResult && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(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
4721
+ ? `${page * limit + 1}-${Math.min((page + 1) * limit, count)}`
4722
+ : "0"] })] })] }), jsxRuntime.jsx(react.Box, { children: jsxRuntime.jsxs("select", { value: limit, onChange: handleLimitChange, style: {
4699
4723
  padding: "4px 8px",
4700
4724
  borderRadius: "4px",
4701
4725
  border: "1px solid #ccc",
@@ -4719,7 +4743,10 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4719
4743
  ]);
4720
4744
  setValue(colLabel, [...newSet]);
4721
4745
  }, opacity: 0.7, _hover: { opacity: 1 }, ...(selected
4722
- ? { color: "colorPalette.400/50", fontWeight: "bold" }
4746
+ ? {
4747
+ color: "colorPalette.400/50",
4748
+ fontWeight: "bold",
4749
+ }
4723
4750
  : {}), children: !!renderDisplay === true
4724
4751
  ? renderDisplay(item)
4725
4752
  : item[display_column] }, item[column_ref]));
package/dist/index.mjs CHANGED
@@ -4540,7 +4540,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4540
4540
  const { serverUrl, idMap, setIdMap, translate, schema: parentSchema, } = useSchemaContext();
4541
4541
  const { required, gridColumn = "span 4", gridRow = "span 1", renderDisplay, foreign_key, } = schema;
4542
4542
  const isRequired = required?.some((columnId) => columnId === column);
4543
- const { table, column: column_ref, display_column, } = foreign_key;
4543
+ const { table, column: column_ref, display_column, customQueryFn, } = foreign_key;
4544
4544
  const [searchText, setSearchText] = useState("");
4545
4545
  const [limit, setLimit] = useState(10);
4546
4546
  const [openSearchResult, setOpenSearchResult] = useState();
@@ -4553,6 +4553,17 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4553
4553
  const query = useQuery({
4554
4554
  queryKey: [`idpicker`, { column, searchText, limit, page }],
4555
4555
  queryFn: async () => {
4556
+ if (customQueryFn) {
4557
+ const { data, idMap } = await customQueryFn({
4558
+ searching: searchText ?? "",
4559
+ limit: limit,
4560
+ offset: page * limit,
4561
+ });
4562
+ setIdMap((state) => {
4563
+ return { ...state, ...idMap };
4564
+ });
4565
+ return data;
4566
+ }
4556
4567
  const data = await getTableData({
4557
4568
  serverUrl,
4558
4569
  searching: searchText ?? "",
@@ -4583,6 +4594,17 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4583
4594
  { form: parentSchema.title, column, id: isMultiple ? watchIds : watchId },
4584
4595
  ],
4585
4596
  queryFn: async () => {
4597
+ if (customQueryFn) {
4598
+ const { data, idMap } = await customQueryFn({
4599
+ searching: watchIds.join(","),
4600
+ limit: isMultiple ? watchIds.length : 1,
4601
+ offset: 0,
4602
+ });
4603
+ setIdMap((state) => {
4604
+ return { ...state, ...idMap };
4605
+ });
4606
+ return data;
4607
+ }
4586
4608
  if (!watchId && (!watchIds || watchIds.length === 0)) {
4587
4609
  return { data: [] };
4588
4610
  }
@@ -4675,7 +4697,9 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4675
4697
  setOpenSearchResult(true);
4676
4698
  }, children: translate.t(removeIndex(`${colLabel}.add_more`)) })] })), !isMultiple && (jsx(Button, { variant: "outline", onClick: () => {
4677
4699
  setOpenSearchResult(true);
4678
- }, 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, { portalled: false, children: jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsx(Input, { placeholder: translate.t(removeIndex(`${colLabel}.type_to_search`)), onChange: onSearchChange, autoComplete: "off", ref: ref, value: searchText }), jsx(PopoverTitle, {}), openSearchResult && (jsxs(Fragment, { children: [(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: {
4700
+ }, 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, { portalled: false, children: jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsx(Input, { placeholder: translate.t(removeIndex(`${colLabel}.type_to_search`)), onChange: onSearchChange, autoComplete: "off", ref: ref, value: searchText }), jsx(PopoverTitle, {}), openSearchResult && (jsxs(Fragment, { children: [(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
4701
+ ? `${page * limit + 1}-${Math.min((page + 1) * limit, count)}`
4702
+ : "0"] })] })] }), jsx(Box, { children: jsxs("select", { value: limit, onChange: handleLimitChange, style: {
4679
4703
  padding: "4px 8px",
4680
4704
  borderRadius: "4px",
4681
4705
  border: "1px solid #ccc",
@@ -4699,7 +4723,10 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
4699
4723
  ]);
4700
4724
  setValue(colLabel, [...newSet]);
4701
4725
  }, opacity: 0.7, _hover: { opacity: 1 }, ...(selected
4702
- ? { color: "colorPalette.400/50", fontWeight: "bold" }
4726
+ ? {
4727
+ color: "colorPalette.400/50",
4728
+ fontWeight: "bold",
4729
+ }
4703
4730
  : {}), children: !!renderDisplay === true
4704
4731
  ? renderDisplay(item)
4705
4732
  : item[display_column] }, item[column_ref]));
package/dist/types/components/Form/components/fields/StringInputField.d.ts CHANGED
@@ -1,9 +1,26 @@
1
1
  import { InputDefaultProps } from "./types";
2
2
  export interface StringInputFieldProps extends InputDefaultProps {
3
3
  }
4
+ export interface CustomQueryFnResponse {
5
+ /**
6
+ * The data of the query
7
+ */
8
+ data: any;
9
+ /**
10
+ * The id map of the data
11
+ */
12
+ idMap: Record<string, any>;
13
+ }
14
+ export interface CustomQueryFnParams {
15
+ searching: string;
16
+ limit: number;
17
+ offset: number;
18
+ }
19
+ export type CustomQueryFn = (params: CustomQueryFnParams) => Promise<CustomQueryFnResponse>;
4
20
  export interface ForeignKeyProps {
5
21
  column: string;
6
22
  table: string;
7
23
  display_column: string;
24
+ customQueryFn?: CustomQueryFn;
8
25
  }
9
26
  export declare const StringInputField: ({ column, schema, prefix, }: StringInputFieldProps) => import("react/jsx-runtime").JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bsol-oss/react-datatable5",
3
- "version": "12.0.0-beta.69",
3
+ "version": "12.0.0-beta.70",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",