@bsol-oss/react-datatable5 11.0.0-beta.0 → 11.0.0-beta.2

package/README.md

@@ -89,190 +89,4 @@ For more details of props and examples, please review the stories in storybook p
 ```
 npm install
 npm run storybook
-```
-
-# Form
-
-Form component can help create a object to submit an network request.
-
-- Wrap form with confirmation, submit success and error handling ui by default
-- Use `i18next` by default to display `column_id` and text in form in multiple language.
-- Use `axios` by default to submit a request.
-
-
-## Usage
-
-```tsx
-<Form
-  schema={someSchema as JSONSchema7}
-  serverUrl={"http://localhost:8081"}
-/>
-```
-
-## Set up
-
-### Providers
-
-You MUST provide all three provider from packages `i18next`, `@tanstack/react-query`, and `@chakra-ui/react`
-
-```tsx
-<Provider>
-  <QueryClientProvider client={queryClient}>
-    <I18nextProvider i18n={i18n}>
-      <SomeForm />
-    </I18nextProvider>
-  </QueryClientProvider>
-</Provider>
-```
-
-### Schema
-
-You MUST provide a `schema` props to specify the inputs in a form. You MUST specify the keyword `type` as `object`.
-
-Currently, The `Form` component provide LIMITED json schema attributes in this release. Please check the below list to acknowledge the supported Keywords, and the intended keywords to support future releases.
-
-The example of a valid `schema` object
-
-```tsx
-const schema = {
-  type: "object",
-  title: "core_memberships",
-  required: ["id"],
-  properties: {
-    id: {
-      type: "string",
-    },
-    remarks: {
-      type: "string",
-    },
-  }
-}
-const SomeForm = () => {
-  return (
-    <Form
-      schema={schema as JSONSchema7}
-      serverUrl={"http://localhost:8081"}
-    />
-  )
-}
-```
-
-## Supported Keywords
-
-### `title`
-
-You MUST provide the `title` keyword to specifies the string id that will be used in `i18n` translate.
-
-The value must be in type `string`.
-
-### `required`
-
-You MAY provide the `required` keyword to specifies the input that are required to fill before confirmation.
-
-The value must be in type `array` of `string`.
-
-### `properties`
-
-You MUST provide the `properties` keywords to specifies the fields that the form should appear.
-
-The value must be in type `object`. The keys in this object specifies the column id and the values its related properties. Check the sections **Column Keywords** show the supported column keywords.
-
-
-## Column Keywords
-
-### `type`
-
-You MUST provide the `type` keywords to specifies the value type that the column should create. Some value types may include different inputs by specify the `variant` keywords.
-
-Check the sections **Value types** show the supported keywords and input variants for each value type.
-
-Supported value types: `array`, `string`, `number`, `boolean`, `integer`, `object`;
-
-## Value types 
-
-This sections show the supported keywords and input variants for each value type.
-
-### `string`
-
-For input types `string`, it will generate a string input by default.
-
-If you specify the `variant` keyword, it will render a picker to fill a string that requires a format.
-
-Supported variants in `string`: `id-picker`, `date_picker`
-
-#### `id-picker`
-
-For string input variant `id-picker`, it will generate a selector that can pop up a search to help the selection. After the user select a options, the input will show the selected record, and save its correspond string value in the form object.
-
-You MUST include the keyword `foreign_key` and a object with keys `display_column`, `table`, `column`. The `display_column` key is the column that show the label for that value to user, and `column` key is the column that its value should set in this input.
-
-You MUST include a `/api/g` api that could accept the following request in order to search for a record. 
-
-```ts
-const requestConfig = {
-  method: "GET",
-  url: `${serverUrl}/api/g/${table}`,
-  params: {
-    searching,
-    where,
-    limit,
-    offset
-  },
-}
-```
-
-The example valid schema that use `id=picker` variant.
-
-```tsx
-const eventsFilesSchema = {
-  type: "object",
-  title: "events_files",
-  required: ["event_id", "file_id"],
-  properties: {
-    file_id: {
-      type: "array",
-      variant: "file-picker",
-    },
-    event_id: {
-      type: "string",
-      variant: "id-picker",
-      foreign_key: {
-        display_column: "event_name",
-        table: "core_events",
-        column: "id",
-      },
-    },
-  },
-}
-```
-
-### `number`
-
-For value type `number`, it will generate a number input by default.
-
-Currently no supported variants.
-
-### `boolean`
-
-For value type `boolean`, it will generate a checkbox by default.
-
-Currently no supported variants.
-
-
-### `array`
-
-For value type `array`, by default it will generate NO input. 
-
-You MUST specify the `variant` keyword to display a relevant input.
-
-Supported variant in `array`: `id-picker`, `file-picker`
-
-### `object`
-
-For value type `object`, by default it will generate a input that can input key value pairs. 
-
-It is NOT RECOMMENDED to use the default input, Later release may include a json editor by default.
-
-### Intented Support Keywords in Future Release 
-
-(TBC)
+```

package/dist/index.d.ts

@@ -479,7 +479,7 @@ interface CustomJSONSchema7Definition extends JSONSchema7 {
     gridRow: string;
     foreign_key: ForeignKeyProps;
 }
-declare const Form: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, order, ignore, onSubmit, preLoadedValues, rowNumber, requestOptions, }: FormProps<TData>) => react_jsx_runtime.JSX.Element;
+declare const Form: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, order, ignore, onSubmit, rowNumber, requestOptions, }: FormProps<TData>) => react_jsx_runtime.JSX.Element;
 
 interface UseFormProps {
     preLoadedValues?: FieldValues | undefined;

package/dist/index.js

@@ -2380,7 +2380,7 @@ function ColumnCard({ columnId }) {
             onDrop: () => setDragging(false), // NEW
         });
     }, [columnId, table]);
-    return (jsxRuntime.jsxs(react.Grid, { ref: ref, templateColumns: "auto 1fr", gap: "0.5rem", alignItems: "center", style: dragging ? { opacity: 0.4 } : {}, children: [jsxRuntime.jsx(react.Flex, { alignItems: "center", padding: "0", children: jsxRuntime.jsx(fa6.FaGripLinesVertical, { color: "gray.400" }) }), jsxRuntime.jsx(react.Flex, { justifyContent: "space-between", alignItems: "center", children: jsxRuntime.jsx(CheckboxCard, { variant: "surface", label: displayName, checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }) })] }));
+    return (jsxRuntime.jsxs(react.Grid, { ref: ref, templateColumns: "auto 1fr", gap: "0.5rem", alignItems: "center", style: dragging ? { opacity: 0.4 } : {}, children: [jsxRuntime.jsx(react.Flex, { alignItems: "center", padding: "0", cursor: 'grab', children: jsxRuntime.jsx(fa6.FaGripLinesVertical, { color: "gray.400" }) }), jsxRuntime.jsx(react.Flex, { justifyContent: "space-between", alignItems: "center", children: jsxRuntime.jsx(CheckboxCard, { variant: "surface", label: displayName, checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }) })] }));
 }
 function CardContainer({ location, children }) {
     const ref = React.useRef(null);
@@ -2418,9 +2418,11 @@ function CardContainer({ location, children }) {
 }
 const TableViewer = () => {
     const { table } = useDataTableContext();
-    const [order, setOrder] = React.useState(table.getAllLeafColumns().map((column) => {
-        return column.id;
-    }));
+    const order = table.getState().columnOrder.length > 0
+        ? table.getState().columnOrder
+        : table.getAllLeafColumns().map(({ id }) => {
+            return id;
+        });
     React.useEffect(() => {
         return monitorForElements({
             onDrop({ source, location }) {
@@ -2445,11 +2447,10 @@ const TableViewer = () => {
                     ...columnAfter,
                 ].filter((id) => id != "<marker>");
                 table.setColumnOrder(newOrder);
-                setOrder(newOrder);
             },
         });
-    }, [order, table]);
-    return (jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: "0.25rem", children: table.getState().columnOrder.map((columnId, index) => {
+    }, [table]);
+    return (jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: "0.25rem", children: order.map((columnId, index) => {
             return (jsxRuntime.jsx(CardContainer, { location: index, children: jsxRuntime.jsx(ColumnCard, { columnId: columnId }) }));
         }) }));
 };
@@ -2624,21 +2625,6 @@ const RecordDisplay = ({ object, boxProps, translate, prefix = "", }) => {
         }) }));
 };
 
-const formatValue = (value) => {
-    if (typeof value === "object") {
-        return JSON.stringify(value);
-    }
-    if (typeof value === "string") {
-        return value;
-    }
-    if (typeof value === "number" || typeof value === "boolean") {
-        return `${value}`;
-    }
-    if (value === undefined) {
-        return `undefined`;
-    }
-    throw new Error(`value is unknown, ${typeof value}`);
-};
 const DataDisplay = ({ variant = "", translate }) => {
     const { table } = useDataTableContext();
     const getLabel = ({ columnId }) => {
@@ -2647,6 +2633,24 @@ const DataDisplay = ({ variant = "", translate }) => {
         }
         return snakeToLabel(columnId);
     };
+    const formatValue = (value) => {
+        if (typeof value === "object") {
+            return JSON.stringify(value);
+        }
+        if (typeof value === "string") {
+            return value;
+        }
+        if (typeof value === "number" || typeof value === "boolean") {
+            return `${value}`;
+        }
+        if (value === undefined) {
+            if (translate !== undefined) {
+                return translate.t(`undefined`);
+            }
+            return `undefined`;
+        }
+        throw new Error(`value is unknown, ${typeof value}`);
+    };
     if (variant == "horizontal") {
         return (jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: "1", children: table.getRowModel().rows.map((row) => {
                 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) => {
@@ -4768,11 +4772,10 @@ const FormInternal = () => {
                             methods.handleSubmit(onValid)();
                         }, formNoValidate: true, children: translate.t("submit") })] }), isError && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["isError", jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [" ", `${error}`] })] }))] }));
 };
-const Form = ({ schema, idMap, setIdMap, form, serverUrl, translate, order = [], ignore = [], onSubmit = undefined, preLoadedValues = {}, rowNumber = undefined, requestOptions = {}, }) => {
+const Form = ({ schema, idMap, setIdMap, form, serverUrl, translate, order = [], ignore = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, }) => {
     const { properties } = schema;
     idListSanityCheck("order", order, properties);
     idListSanityCheck("ignore", ignore, properties);
-    idListSanityCheck("preLoadedValues", Object.keys(preLoadedValues), properties);
     return (jsxRuntime.jsx(SchemaFormContext.Provider, { value: {
             schema,
             serverUrl,

package/dist/index.mjs

@@ -2360,7 +2360,7 @@ function ColumnCard({ columnId }) {
             onDrop: () => setDragging(false), // NEW
         });
     }, [columnId, table]);
-    return (jsxs(Grid, { ref: ref, templateColumns: "auto 1fr", gap: "0.5rem", alignItems: "center", style: dragging ? { opacity: 0.4 } : {}, children: [jsx(Flex, { alignItems: "center", padding: "0", children: jsx(FaGripLinesVertical, { color: "gray.400" }) }), jsx(Flex, { justifyContent: "space-between", alignItems: "center", children: jsx(CheckboxCard, { variant: "surface", label: displayName, checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }) })] }));
+    return (jsxs(Grid, { ref: ref, templateColumns: "auto 1fr", gap: "0.5rem", alignItems: "center", style: dragging ? { opacity: 0.4 } : {}, children: [jsx(Flex, { alignItems: "center", padding: "0", cursor: 'grab', children: jsx(FaGripLinesVertical, { color: "gray.400" }) }), jsx(Flex, { justifyContent: "space-between", alignItems: "center", children: jsx(CheckboxCard, { variant: "surface", label: displayName, checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }) })] }));
 }
 function CardContainer({ location, children }) {
     const ref = useRef(null);
@@ -2398,9 +2398,11 @@ function CardContainer({ location, children }) {
 }
 const TableViewer = () => {
     const { table } = useDataTableContext();
-    const [order, setOrder] = useState(table.getAllLeafColumns().map((column) => {
-        return column.id;
-    }));
+    const order = table.getState().columnOrder.length > 0
+        ? table.getState().columnOrder
+        : table.getAllLeafColumns().map(({ id }) => {
+            return id;
+        });
     useEffect(() => {
         return monitorForElements({
             onDrop({ source, location }) {
@@ -2425,11 +2427,10 @@ const TableViewer = () => {
                     ...columnAfter,
                 ].filter((id) => id != "<marker>");
                 table.setColumnOrder(newOrder);
-                setOrder(newOrder);
             },
         });
-    }, [order, table]);
-    return (jsx(Flex, { flexFlow: "column", gap: "0.25rem", children: table.getState().columnOrder.map((columnId, index) => {
+    }, [table]);
+    return (jsx(Flex, { flexFlow: "column", gap: "0.25rem", children: order.map((columnId, index) => {
             return (jsx(CardContainer, { location: index, children: jsx(ColumnCard, { columnId: columnId }) }));
         }) }));
 };
@@ -2604,21 +2605,6 @@ const RecordDisplay = ({ object, boxProps, translate, prefix = "", }) => {
         }) }));
 };
 
-const formatValue = (value) => {
-    if (typeof value === "object") {
-        return JSON.stringify(value);
-    }
-    if (typeof value === "string") {
-        return value;
-    }
-    if (typeof value === "number" || typeof value === "boolean") {
-        return `${value}`;
-    }
-    if (value === undefined) {
-        return `undefined`;
-    }
-    throw new Error(`value is unknown, ${typeof value}`);
-};
 const DataDisplay = ({ variant = "", translate }) => {
     const { table } = useDataTableContext();
     const getLabel = ({ columnId }) => {
@@ -2627,6 +2613,24 @@ const DataDisplay = ({ variant = "", translate }) => {
         }
         return snakeToLabel(columnId);
     };
+    const formatValue = (value) => {
+        if (typeof value === "object") {
+            return JSON.stringify(value);
+        }
+        if (typeof value === "string") {
+            return value;
+        }
+        if (typeof value === "number" || typeof value === "boolean") {
+            return `${value}`;
+        }
+        if (value === undefined) {
+            if (translate !== undefined) {
+                return translate.t(`undefined`);
+            }
+            return `undefined`;
+        }
+        throw new Error(`value is unknown, ${typeof value}`);
+    };
     if (variant == "horizontal") {
         return (jsx(Flex, { flexFlow: "column", gap: "1", children: table.getRowModel().rows.map((row) => {
                 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) => {
@@ -4748,11 +4752,10 @@ const FormInternal = () => {
                             methods.handleSubmit(onValid)();
                         }, formNoValidate: true, children: translate.t("submit") })] }), isError && (jsxs(Fragment, { children: ["isError", jsxs(Fragment, { children: [" ", `${error}`] })] }))] }));
 };
-const Form = ({ schema, idMap, setIdMap, form, serverUrl, translate, order = [], ignore = [], onSubmit = undefined, preLoadedValues = {}, rowNumber = undefined, requestOptions = {}, }) => {
+const Form = ({ schema, idMap, setIdMap, form, serverUrl, translate, order = [], ignore = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, }) => {
     const { properties } = schema;
     idListSanityCheck("order", order, properties);
     idListSanityCheck("ignore", ignore, properties);
-    idListSanityCheck("preLoadedValues", Object.keys(preLoadedValues), properties);
     return (jsx(SchemaFormContext.Provider, { value: {
             schema,
             serverUrl,

package/dist/types/components/Form/Form.d.ts

@@ -27,4 +27,4 @@ export interface CustomJSONSchema7Definition extends JSONSchema7 {
     gridRow: string;
     foreign_key: ForeignKeyProps;
 }
-export declare const Form: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, order, ignore, onSubmit, preLoadedValues, rowNumber, requestOptions, }: FormProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export declare const Form: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, order, ignore, onSubmit, rowNumber, requestOptions, }: FormProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsol-oss/react-datatable5",
-  "version": "11.0.0-beta.0",
+  "version": "11.0.0-beta.2",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.mjs",