@bsol-oss/react-datatable5 9.0.2 → 9.1.0

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 +4 -3
  2. package/dist/index.js +13 -7
  3. package/dist/index.mjs +13 -7
  4. package/dist/types/components/DataTable/DataDisplay.d.ts +3 -1
  5. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -5,14 +5,14 @@ import React__default, { ReactNode, Dispatch, SetStateAction } from 'react';
5
5
  import * as react_jsx_runtime from 'react/jsx-runtime';
6
6
  import { ImageProps, TableHeaderProps as TableHeaderProps$1, TableRootProps, GridProps, CardBodyProps, FlexProps, TextProps, BoxProps } from '@chakra-ui/react';
7
7
  import { IconType } from 'react-icons';
8
+ import * as react_i18next from 'react-i18next';
9
+ import { UseTranslationResponse } from 'react-i18next';
8
10
  import { RankingInfo } from '@tanstack/match-sorter-utils';
9
11
  import { UseQueryResult } from '@tanstack/react-query';
10
12
  import { JSONSchema7 } from 'json-schema';
11
13
  import { ForeignKeyProps } from '@/components/Form/components/StringInputField';
12
14
  import * as react_hook_form from 'react-hook-form';
13
15
  import { FieldValues, UseFormReturn, SubmitHandler } from 'react-hook-form';
14
- import * as react_i18next from 'react-i18next';
15
- import { UseTranslationResponse } from 'react-i18next';
16
16
  import { RenderProps, Props } from '@bsol-oss/dayzed-react19';
17
17
 
18
18
  interface DensityToggleButtonProps {
@@ -88,8 +88,9 @@ declare const CardHeader: <TData>({ row, imageColumnId, titleColumnId, tagColumn
88
88
 
89
89
  interface DataDisplayProps {
90
90
  variant?: "horizontal" | "stats" | "";
91
+ translate?: UseTranslationResponse<any, any>;
91
92
  }
92
- declare const DataDisplay: ({ variant }: DataDisplayProps) => react_jsx_runtime.JSX.Element;
93
+ declare const DataDisplay: ({ variant, translate }: DataDisplayProps) => react_jsx_runtime.JSX.Element;
93
94
 
94
95
  type DensityState = "sm" | "md" | "lg";
95
96
  interface DensityTableState {
package/dist/index.js CHANGED
@@ -2630,8 +2630,14 @@ const formatValue = (value) => {
2630
2630
  }
2631
2631
  throw new Error(`value is unknown, ${typeof value}`);
2632
2632
  };
2633
- const DataDisplay = ({ variant = "" }) => {
2633
+ const DataDisplay = ({ variant = "", translate }) => {
2634
2634
  const { table } = useDataTableContext();
2635
+ const getLabel = ({ columnId }) => {
2636
+ if (translate !== undefined) {
2637
+ return translate.t(`${columnId}`);
2638
+ }
2639
+ return snakeToLabel(columnId);
2640
+ };
2635
2641
  if (variant == "horizontal") {
2636
2642
  return (jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: "1", children: table.getRowModel().rows.map((row) => {
2637
2643
  return (jsxRuntime.jsx(react.Card.Root, { children: jsxRuntime.jsx(react.Card.Body, { children: jsxRuntime.jsx(react.DataList.Root, { gap: 4, padding: 4, display: "grid", variant: "subtle", orientation: "horizontal", overflow: "auto", children: row.getVisibleCells().map((cell) => {
@@ -2641,7 +2647,7 @@ const DataDisplay = ({ variant = "" }) => {
2641
2647
  }
2642
2648
  const value = cell.getValue();
2643
2649
  if (typeof value === "object") {
2644
- return (jsxRuntime.jsxs(react.DataList.Item, { children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: snakeToLabel(cell.column.id) }), jsxRuntime.jsx(RecordDisplay, { boxProps: {
2650
+ return (jsxRuntime.jsxs(react.DataList.Item, { children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsxRuntime.jsx(RecordDisplay, { boxProps: {
2645
2651
  borderWidth: 1,
2646
2652
  borderRadius: 4,
2647
2653
  borderColor: "gray.400",
@@ -2649,7 +2655,7 @@ const DataDisplay = ({ variant = "" }) => {
2649
2655
  paddingY: 2,
2650
2656
  }, object: value })] }, cell.id));
2651
2657
  }
2652
- return (jsxRuntime.jsxs(react.DataList.Item, { children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: snakeToLabel(cell.column.id) }), jsxRuntime.jsx(react.DataList.ItemValue, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
2658
+ return (jsxRuntime.jsxs(react.DataList.Item, { children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsxRuntime.jsx(react.DataList.ItemValue, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
2653
2659
  }) }) }) }, `chakra-table-card-${row.id}`));
2654
2660
  }) }));
2655
2661
  }
@@ -2662,7 +2668,7 @@ const DataDisplay = ({ variant = "" }) => {
2662
2668
  }
2663
2669
  const value = cell.getValue();
2664
2670
  if (typeof value === "object") {
2665
- return (jsxRuntime.jsxs(react.DataList.Item, { display: "inline-flex", flexFlow: "column", justifyContent: "center", alignItems: "center", flex: "1 0 0%", children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: snakeToLabel(cell.column.id) }), jsxRuntime.jsx(RecordDisplay, { boxProps: {
2671
+ return (jsxRuntime.jsxs(react.DataList.Item, { display: "inline-flex", flexFlow: "column", justifyContent: "center", alignItems: "center", flex: "1 0 0%", children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsxRuntime.jsx(RecordDisplay, { boxProps: {
2666
2672
  borderWidth: 1,
2667
2673
  borderRadius: 4,
2668
2674
  borderColor: "gray.400",
@@ -2670,7 +2676,7 @@ const DataDisplay = ({ variant = "" }) => {
2670
2676
  paddingY: 2,
2671
2677
  }, object: value })] }));
2672
2678
  }
2673
- return (jsxRuntime.jsxs(react.DataList.Item, { display: "flex", justifyContent: "center", alignItems: "center", flex: "1 0 0%", children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: snakeToLabel(cell.column.id) }), jsxRuntime.jsx(react.DataList.ItemValue, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
2679
+ return (jsxRuntime.jsxs(react.DataList.Item, { display: "flex", justifyContent: "center", alignItems: "center", flex: "1 0 0%", children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsxRuntime.jsx(react.DataList.ItemValue, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
2674
2680
  }) }) }) }, `chakra-table-card-${row.id}`));
2675
2681
  }) }));
2676
2682
  }
@@ -2682,7 +2688,7 @@ const DataDisplay = ({ variant = "" }) => {
2682
2688
  }
2683
2689
  const value = cell.getValue();
2684
2690
  if (typeof value === "object") {
2685
- return (jsxRuntime.jsxs(react.DataList.Item, { children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: snakeToLabel(cell.column.id) }), jsxRuntime.jsx(RecordDisplay, { boxProps: {
2691
+ return (jsxRuntime.jsxs(react.DataList.Item, { children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsxRuntime.jsx(RecordDisplay, { boxProps: {
2686
2692
  borderWidth: 1,
2687
2693
  borderRadius: 4,
2688
2694
  borderColor: "gray.400",
@@ -2690,7 +2696,7 @@ const DataDisplay = ({ variant = "" }) => {
2690
2696
  paddingY: 2,
2691
2697
  }, object: value })] }, cell.id));
2692
2698
  }
2693
- return (jsxRuntime.jsxs(react.DataList.Item, { children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: snakeToLabel(cell.column.id) }), jsxRuntime.jsx(react.DataList.ItemValue, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
2699
+ return (jsxRuntime.jsxs(react.DataList.Item, { children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsxRuntime.jsx(react.DataList.ItemValue, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
2694
2700
  }) }) }) }, `chakra-table-card-${row.id}`));
2695
2701
  }) }));
2696
2702
  };
package/dist/index.mjs CHANGED
@@ -2610,8 +2610,14 @@ const formatValue = (value) => {
2610
2610
  }
2611
2611
  throw new Error(`value is unknown, ${typeof value}`);
2612
2612
  };
2613
- const DataDisplay = ({ variant = "" }) => {
2613
+ const DataDisplay = ({ variant = "", translate }) => {
2614
2614
  const { table } = useDataTableContext();
2615
+ const getLabel = ({ columnId }) => {
2616
+ if (translate !== undefined) {
2617
+ return translate.t(`${columnId}`);
2618
+ }
2619
+ return snakeToLabel(columnId);
2620
+ };
2615
2621
  if (variant == "horizontal") {
2616
2622
  return (jsx(Flex, { flexFlow: "column", gap: "1", children: table.getRowModel().rows.map((row) => {
2617
2623
  return (jsx(Card.Root, { children: jsx(Card.Body, { children: jsx(DataList.Root, { gap: 4, padding: 4, display: "grid", variant: "subtle", orientation: "horizontal", overflow: "auto", children: row.getVisibleCells().map((cell) => {
@@ -2621,7 +2627,7 @@ const DataDisplay = ({ variant = "" }) => {
2621
2627
  }
2622
2628
  const value = cell.getValue();
2623
2629
  if (typeof value === "object") {
2624
- return (jsxs(DataList.Item, { children: [jsx(DataList.ItemLabel, { children: snakeToLabel(cell.column.id) }), jsx(RecordDisplay, { boxProps: {
2630
+ return (jsxs(DataList.Item, { children: [jsx(DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsx(RecordDisplay, { boxProps: {
2625
2631
  borderWidth: 1,
2626
2632
  borderRadius: 4,
2627
2633
  borderColor: "gray.400",
@@ -2629,7 +2635,7 @@ const DataDisplay = ({ variant = "" }) => {
2629
2635
  paddingY: 2,
2630
2636
  }, object: value })] }, cell.id));
2631
2637
  }
2632
- return (jsxs(DataList.Item, { children: [jsx(DataList.ItemLabel, { children: snakeToLabel(cell.column.id) }), jsx(DataList.ItemValue, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
2638
+ return (jsxs(DataList.Item, { children: [jsx(DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsx(DataList.ItemValue, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
2633
2639
  }) }) }) }, `chakra-table-card-${row.id}`));
2634
2640
  }) }));
2635
2641
  }
@@ -2642,7 +2648,7 @@ const DataDisplay = ({ variant = "" }) => {
2642
2648
  }
2643
2649
  const value = cell.getValue();
2644
2650
  if (typeof value === "object") {
2645
- return (jsxs(DataList.Item, { display: "inline-flex", flexFlow: "column", justifyContent: "center", alignItems: "center", flex: "1 0 0%", children: [jsx(DataList.ItemLabel, { children: snakeToLabel(cell.column.id) }), jsx(RecordDisplay, { boxProps: {
2651
+ return (jsxs(DataList.Item, { display: "inline-flex", flexFlow: "column", justifyContent: "center", alignItems: "center", flex: "1 0 0%", children: [jsx(DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsx(RecordDisplay, { boxProps: {
2646
2652
  borderWidth: 1,
2647
2653
  borderRadius: 4,
2648
2654
  borderColor: "gray.400",
@@ -2650,7 +2656,7 @@ const DataDisplay = ({ variant = "" }) => {
2650
2656
  paddingY: 2,
2651
2657
  }, object: value })] }));
2652
2658
  }
2653
- return (jsxs(DataList.Item, { display: "flex", justifyContent: "center", alignItems: "center", flex: "1 0 0%", children: [jsx(DataList.ItemLabel, { children: snakeToLabel(cell.column.id) }), jsx(DataList.ItemValue, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
2659
+ return (jsxs(DataList.Item, { display: "flex", justifyContent: "center", alignItems: "center", flex: "1 0 0%", children: [jsx(DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsx(DataList.ItemValue, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
2654
2660
  }) }) }) }, `chakra-table-card-${row.id}`));
2655
2661
  }) }));
2656
2662
  }
@@ -2662,7 +2668,7 @@ const DataDisplay = ({ variant = "" }) => {
2662
2668
  }
2663
2669
  const value = cell.getValue();
2664
2670
  if (typeof value === "object") {
2665
- return (jsxs(DataList.Item, { children: [jsx(DataList.ItemLabel, { children: snakeToLabel(cell.column.id) }), jsx(RecordDisplay, { boxProps: {
2671
+ return (jsxs(DataList.Item, { children: [jsx(DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsx(RecordDisplay, { boxProps: {
2666
2672
  borderWidth: 1,
2667
2673
  borderRadius: 4,
2668
2674
  borderColor: "gray.400",
@@ -2670,7 +2676,7 @@ const DataDisplay = ({ variant = "" }) => {
2670
2676
  paddingY: 2,
2671
2677
  }, object: value })] }, cell.id));
2672
2678
  }
2673
- return (jsxs(DataList.Item, { children: [jsx(DataList.ItemLabel, { children: snakeToLabel(cell.column.id) }), jsx(DataList.ItemValue, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
2679
+ return (jsxs(DataList.Item, { children: [jsx(DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsx(DataList.ItemValue, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
2674
2680
  }) }) }) }, `chakra-table-card-${row.id}`));
2675
2681
  }) }));
2676
2682
  };
package/dist/types/components/DataTable/DataDisplay.d.ts CHANGED
@@ -1,4 +1,6 @@
1
+ import { UseTranslationResponse } from "react-i18next";
1
2
  export interface DataDisplayProps {
2
3
  variant?: "horizontal" | "stats" | "";
4
+ translate?: UseTranslationResponse<any, any>;
3
5
  }
4
- export declare const DataDisplay: ({ variant }: DataDisplayProps) => import("react/jsx-runtime").JSX.Element;
6
+ export declare const DataDisplay: ({ variant, translate }: DataDisplayProps) => 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": "9.0.2",
3
+ "version": "9.1.0",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",