@bsol-oss/react-datatable5 13.0.1-beta.27 → 13.0.1-beta.28

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.d.ts CHANGED
@@ -7,7 +7,6 @@ import { TableHeaderProps as TableHeaderProps$1, TableRowProps, GridProps, Table
7
7
  import { IconType } from 'react-icons';
8
8
  import { UseQueryResult } from '@tanstack/react-query';
9
9
  import { RankingInfo } from '@tanstack/match-sorter-utils';
10
- import { AxiosRequestConfig } from 'axios';
11
10
  import { JSONSchema7 } from 'json-schema';
12
11
  import * as react_hook_form from 'react-hook-form';
13
12
  import { UseFormReturn, FieldValues, SubmitHandler } from 'react-hook-form';
@@ -591,7 +590,7 @@ interface CustomJSONSchema7 extends Omit<JSONSchema7, 'items' | 'additionalItems
591
590
  gridColumn?: string;
592
591
  gridRow?: string;
593
592
  customQueryFn?: CustomQueryFn;
594
- variant?: 'custom-input' | 'id-picker' | 'text-area' | 'media-library-browser' | 'tag-picker' | 'file-picker' | 'date-range' | 'enum-picker';
593
+ variant?: 'custom-input' | 'id-picker' | 'text-area' | 'media-library-browser' | 'tag-picker' | 'file-picker' | 'date-range' | 'enum-picker' | 'radio';
595
594
  renderDisplay?: (item: unknown) => ReactNode;
596
595
  itemToValue?: (item: unknown) => string;
597
596
  loadInitialValues?: (params: LoadInitialValuesParams) => Promise<LoadInitialValuesResult>;
@@ -716,20 +715,11 @@ interface FormRootProps<TData extends FieldValues> {
716
715
  * }
717
716
  */
718
717
  schema: CustomJSONSchema7;
719
- requestUrl?: string;
720
718
  idMap: Record<string, object>;
721
719
  setIdMap: Dispatch<SetStateAction<Record<string, object>>>;
722
720
  form: UseFormReturn<TData, any, TData>;
723
721
  children: ReactNode;
724
- order?: string[];
725
- ignore?: string[];
726
- include?: string[];
727
722
  onSubmit?: SubmitHandler<TData>;
728
- rowNumber?: number | string;
729
- requestOptions?: AxiosRequestConfig;
730
- getUpdatedData?: () => TData | Promise<TData> | void;
731
- customErrorRenderer?: (error: unknown) => ReactNode;
732
- customSuccessRenderer?: (resetHandler: () => void | Promise<void>) => ReactNode;
733
723
  displayConfig?: {
734
724
  showSubmitButton?: boolean;
735
725
  showResetButton?: boolean;
@@ -750,7 +740,7 @@ interface CustomJSONSchema7Definition extends JSONSchema7 {
750
740
  customQueryFn: any;
751
741
  children: ReactNode;
752
742
  }
753
- declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, customErrorRenderer, customSuccessRenderer, displayConfig, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, formButtonLabels, timePickerLabels, insideDialog, }: FormRootProps<TData>) => react_jsx_runtime.JSX.Element;
743
+ declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, children, onSubmit, displayConfig, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, formButtonLabels, timePickerLabels, insideDialog, }: FormRootProps<TData>) => react_jsx_runtime.JSX.Element;
754
744
 
755
745
  interface DefaultFormProps<TData extends FieldValues> {
756
746
  formConfig: Omit<FormRootProps<TData>, "children">;
package/dist/index.js CHANGED
@@ -4187,20 +4187,13 @@ const useDataTableServer = (props) => {
4187
4187
  //@ts-expect-error TODO: find appropriate type
4188
4188
  const SchemaFormContext = React.createContext({
4189
4189
  schema: {},
4190
- requestUrl: '',
4191
- order: [],
4192
- ignore: [],
4193
- include: [],
4194
4190
  onSubmit: async () => { },
4195
- rowNumber: 0,
4196
- requestOptions: {},
4197
4191
  timezone: 'Asia/Hong_Kong',
4198
4192
  displayConfig: {
4199
4193
  showSubmitButton: true,
4200
4194
  showResetButton: true,
4201
4195
  showTitle: true,
4202
4196
  },
4203
- onFormSubmit: async () => { },
4204
4197
  });
4205
4198
 
4206
4199
  const useSchemaContext = () => {
@@ -4229,8 +4222,8 @@ const useFormLabel = (column, prefix = '', schema) => {
4229
4222
  prefix,
4230
4223
  schema: {
4231
4224
  type: schema.type,
4232
- errorMessages: schema.errorMessages
4233
- ? Object.keys(schema.errorMessages)
4225
+ errorMessage: schema.errorMessage
4226
+ ? Object.keys(schema.errorMessage)
4234
4227
  : undefined,
4235
4228
  },
4236
4229
  });
@@ -4242,8 +4235,8 @@ const useFormLabel = (column, prefix = '', schema) => {
4242
4235
 
4243
4236
  const ArrayRenderer = ({ schema, column, prefix, }) => {
4244
4237
  const { gridRow, gridColumn = '1/span 12', required, items } = schema;
4245
- // @ts-expect-error TODO: find suitable types
4246
- const { type } = items;
4238
+ const itemsSchema = Array.isArray(items) ? items[0] : items;
4239
+ const { type } = itemsSchema ?? {};
4247
4240
  const colLabel = `${prefix}${column}`;
4248
4241
  const isRequired = required?.some((columnId) => columnId === column);
4249
4242
  const formI18n = useFormLabel(column, prefix, schema);
@@ -4255,8 +4248,10 @@ const ArrayRenderer = ({ schema, column, prefix, }) => {
4255
4248
  _dark: 'colorPalette.800',
4256
4249
  }, children: [jsxRuntime.jsx(react.Grid, { gridTemplateColumns: 'repeat(12, 1fr)', autoFlow: 'row', children: jsxRuntime.jsx(SchemaRenderer, { column: `${index}`,
4257
4250
  prefix: `${colLabel}.`,
4258
- // @ts-expect-error find suitable types
4259
- schema: { showLabel: false, ...(items ?? {}) } }) }), jsxRuntime.jsx(react.Flex, { justifyContent: 'end', children: jsxRuntime.jsx(react.Button, { variant: 'ghost', onClick: () => {
4251
+ schema: {
4252
+ showLabel: false,
4253
+ ...(Array.isArray(items) ? items[0] : items ?? {}),
4254
+ } }) }), jsxRuntime.jsx(react.Flex, { justifyContent: 'end', children: jsxRuntime.jsx(react.Button, { variant: 'ghost', onClick: () => {
4260
4255
  setValue(colLabel, fields.filter((_, curIndex) => {
4261
4256
  return curIndex !== index;
4262
4257
  }));
@@ -5339,16 +5334,13 @@ const FileDropzone = ({ children = undefined, gridProps = {}, onDrop = () => { }
5339
5334
  element: el,
5340
5335
  onDragEnter: () => setIsDraggedOver(true),
5341
5336
  onDragLeave: () => setIsDraggedOver(false),
5342
- // canDrop: some(containsFiles, containsText),
5343
5337
  onDrop: ({ source }) => {
5344
5338
  const files = getFiles({ source });
5345
5339
  const text = getText({ source });
5346
- console.log(files, text, 'dfposa');
5347
5340
  onDrop({ files, text });
5348
5341
  },
5349
5342
  });
5350
5343
  }, [onDrop]);
5351
- // const isDark = (location + location) % 2 === 1;
5352
5344
  function getColor(isDraggedOver) {
5353
5345
  if (isDraggedOver) {
5354
5346
  return {
@@ -5358,7 +5350,6 @@ const FileDropzone = ({ children = undefined, gridProps = {}, onDrop = () => { }
5358
5350
  },
5359
5351
  };
5360
5352
  }
5361
- // return isDark ? "lightgrey" : "white";
5362
5353
  return {
5363
5354
  backgroundColor: undefined,
5364
5355
  _dark: {
@@ -6241,11 +6232,9 @@ const ObjectInput = ({ schema, column, prefix }) => {
6241
6232
  base: 'colorPalette.200',
6242
6233
  _dark: 'colorPalette.800',
6243
6234
  }, gap: "4", padding: '4', gridTemplateColumns: 'repeat(12, 1fr)', autoFlow: 'row', children: Object.keys(properties ?? {}).map((key) => {
6244
- return (
6245
- // @ts-expect-error find suitable types
6246
- jsxRuntime.jsx(ColumnRenderer, { column: `${key}`,
6235
+ return (jsxRuntime.jsx(ColumnRenderer, { column: `${key}`,
6247
6236
  prefix: `${prefix}${column}.`,
6248
- properties,
6237
+ properties: properties ?? {},
6249
6238
  parentRequired: required }, `form-${colLabel}-${key}`));
6250
6239
  }) })] }));
6251
6240
  };
@@ -7987,7 +7976,8 @@ const SchemaRenderer = ({ schema, prefix, column, }) => {
7987
7976
  }
7988
7977
  if (variant === 'enum-picker') {
7989
7978
  const { items, title } = colSchema;
7990
- const { enum: enumItems } = items;
7979
+ const itemsSchema = Array.isArray(items) ? items[0] : items;
7980
+ const { enum: enumItems } = itemsSchema ?? {};
7991
7981
  // Use renderDisplay from parent schema only
7992
7982
  const renderDisplay = colSchema.renderDisplay;
7993
7983
  const enumSchema = {
@@ -8024,15 +8014,15 @@ const ColumnRenderer = ({ column, properties, prefix, parentRequired, }) => {
8024
8014
  };
8025
8015
 
8026
8016
  const SubmitButton = () => {
8027
- const { setValidatedData, setIsError, onFormSubmit, formButtonLabels } = useSchemaContext();
8017
+ const { onSubmit, formButtonLabels } = useSchemaContext();
8028
8018
  const methods = reactHookForm.useFormContext();
8029
8019
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
8030
- const onValid = (data) => {
8020
+ const onValid = async (data) => {
8031
8021
  // Validation is handled by react-hook-form
8032
8022
  // This function will only be called if validation passes
8033
- setValidatedData(data);
8034
- setIsError(false);
8035
- onFormSubmit(data);
8023
+ if (onSubmit) {
8024
+ await onSubmit(data);
8025
+ }
8036
8026
  };
8037
8027
  return (jsxRuntime.jsx(react.Button, { onClick: () => {
8038
8028
  methods.handleSubmit(onValid)();
@@ -8040,33 +8030,21 @@ const SubmitButton = () => {
8040
8030
  };
8041
8031
 
8042
8032
  const FormBody = () => {
8043
- const { schema, order, ignore, include, isError, error, customErrorRenderer, displayConfig, formButtonLabels, } = useSchemaContext();
8033
+ const { schema, displayConfig, formButtonLabels } = useSchemaContext();
8044
8034
  const { showSubmitButton, showResetButton } = displayConfig;
8045
8035
  const methods = reactHookForm.useFormContext();
8046
- console.log(methods.formState.errors);
8036
+ console.log('errors', methods.formState.errors);
8047
8037
  const { properties } = schema;
8048
- const renderColumns = ({ order, keys, ignore, include, }) => {
8049
- const included = include.length > 0 ? include : keys;
8050
- const not_exist = included.filter((columnA) => !order.some((columnB) => columnA === columnB));
8051
- const ordered = [...order, ...not_exist];
8052
- const ignored = ordered.filter((column) => !ignore.some((shouldIgnore) => column === shouldIgnore));
8053
- return ignored;
8054
- };
8055
- const ordered = renderColumns({
8056
- order,
8057
- keys: Object.keys(properties),
8058
- ignore,
8059
- include,
8060
- });
8038
+ const ordered = Object.keys(properties);
8061
8039
  return (jsxRuntime.jsxs(react.Flex, { flexFlow: 'column', gap: "2", children: [jsxRuntime.jsx(react.Grid, { gap: "4", gridTemplateColumns: 'repeat(12, 1fr)', autoFlow: 'row', children: ordered.map((column) => {
8062
- return (jsxRuntime.jsx(ColumnRenderer
8063
- // @ts-expect-error find suitable types
8064
- , {
8065
- // @ts-expect-error find suitable types
8066
- properties: properties, prefix: ``, parentRequired: schema.required, column }, `form-input-${column}`));
8040
+ if (!properties) {
8041
+ console.error('properties is undefined when using FormBody', schema);
8042
+ return null;
8043
+ }
8044
+ return (jsxRuntime.jsx(ColumnRenderer, { properties: properties, prefix: ``, parentRequired: schema.required, column }, `form-input-${column}`));
8067
8045
  }) }), jsxRuntime.jsxs(react.Flex, { justifyContent: 'end', gap: "2", children: [showResetButton && (jsxRuntime.jsx(react.Button, { onClick: () => {
8068
8046
  methods.reset();
8069
- }, variant: 'subtle', children: formButtonLabels?.reset ?? 'Reset' })), showSubmitButton && jsxRuntime.jsx(SubmitButton, {})] }), isError && customErrorRenderer && customErrorRenderer(error)] }));
8047
+ }, variant: 'subtle', children: formButtonLabels?.reset ?? 'Reset' })), showSubmitButton && jsxRuntime.jsx(SubmitButton, {})] })] }));
8070
8048
  };
8071
8049
 
8072
8050
  const FormTitle = () => {
@@ -8085,96 +8063,18 @@ const FormTitle = () => {
8085
8063
  return jsxRuntime.jsx(react.Heading, { children: schema.title ?? 'Form' });
8086
8064
  };
8087
8065
 
8088
- const clearEmptyString = (object) => {
8089
- return Object.fromEntries(Object.entries(object).filter(([, value]) => value !== ""));
8090
- };
8091
-
8092
- const FormRoot = ({ schema, idMap, setIdMap, form, children, order = [], ignore = [], include = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, getUpdatedData = () => { }, customErrorRenderer, customSuccessRenderer, displayConfig = {
8066
+ const FormRoot = ({ schema, idMap, setIdMap, form, children, onSubmit = undefined, displayConfig = {
8093
8067
  showSubmitButton: true,
8094
8068
  showResetButton: true,
8095
8069
  showTitle: true,
8096
8070
  }, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, formButtonLabels, timePickerLabels, insideDialog = false, }) => {
8097
- const [isSuccess, setIsSuccess] = React.useState(false);
8098
- const [isError, setIsError] = React.useState(false);
8099
- const [isSubmiting, setIsSubmiting] = React.useState(false);
8100
- const [validatedData, setValidatedData] = React.useState();
8101
- const [error, setError] = React.useState();
8102
- const onBeforeSubmit = () => {
8103
- setIsSubmiting(true);
8104
- };
8105
- const onAfterSubmit = () => {
8106
- setIsSubmiting(false);
8107
- };
8108
- const onSubmitError = (error) => {
8109
- setIsError(true);
8110
- setError(error);
8111
- };
8112
- const onSubmitSuccess = () => {
8113
- setIsSuccess(true);
8114
- };
8115
- const defaultOnSubmit = async (promise) => {
8116
- try {
8117
- console.log('onBeforeSubmit');
8118
- onBeforeSubmit();
8119
- await promise;
8120
- console.log('onSubmitSuccess');
8121
- onSubmitSuccess();
8122
- }
8123
- catch (error) {
8124
- console.log('onSubmitError', error);
8125
- onSubmitError(error);
8126
- }
8127
- finally {
8128
- onAfterSubmit();
8129
- }
8130
- };
8131
- const defaultSubmitPromise = (data) => {
8132
- if (!requestOptions.url) {
8133
- throw new Error('requestOptions.url is required when onSubmit is not provided');
8134
- }
8135
- const options = {
8136
- method: 'POST',
8137
- data: clearEmptyString(data),
8138
- ...requestOptions,
8139
- };
8140
- return axios.request(options);
8141
- };
8142
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
8143
- const onFormSubmit = async (data) => {
8144
- // Validation is handled by react-hook-form
8145
- // This function will only be called if validation passes
8146
- if (onSubmit === undefined) {
8147
- await defaultOnSubmit(Promise.resolve(defaultSubmitPromise(data)));
8148
- return;
8149
- }
8150
- await defaultOnSubmit(Promise.resolve(onSubmit(data)));
8151
- };
8152
8071
  return (jsxRuntime.jsx(SchemaFormContext.Provider, { value: {
8153
8072
  schema,
8154
- order,
8155
- ignore,
8156
- include,
8157
8073
  // @ts-expect-error TODO: find appropriate types
8158
8074
  onSubmit,
8159
- rowNumber,
8160
8075
  idMap,
8161
8076
  setIdMap,
8162
- requestOptions,
8163
- isSuccess,
8164
- setIsSuccess,
8165
- isError,
8166
- setIsError,
8167
- isSubmiting,
8168
- setIsSubmiting,
8169
- validatedData,
8170
- setValidatedData,
8171
- error,
8172
- setError,
8173
- getUpdatedData,
8174
- customErrorRenderer,
8175
- customSuccessRenderer,
8176
8077
  displayConfig,
8177
- onFormSubmit,
8178
8078
  dateTimePickerLabels,
8179
8079
  idPickerLabels,
8180
8080
  enumPickerLabels,
package/dist/index.mjs CHANGED
@@ -4167,20 +4167,13 @@ const useDataTableServer = (props) => {
4167
4167
  //@ts-expect-error TODO: find appropriate type
4168
4168
  const SchemaFormContext = createContext({
4169
4169
  schema: {},
4170
- requestUrl: '',
4171
- order: [],
4172
- ignore: [],
4173
- include: [],
4174
4170
  onSubmit: async () => { },
4175
- rowNumber: 0,
4176
- requestOptions: {},
4177
4171
  timezone: 'Asia/Hong_Kong',
4178
4172
  displayConfig: {
4179
4173
  showSubmitButton: true,
4180
4174
  showResetButton: true,
4181
4175
  showTitle: true,
4182
4176
  },
4183
- onFormSubmit: async () => { },
4184
4177
  });
4185
4178
 
4186
4179
  const useSchemaContext = () => {
@@ -4209,8 +4202,8 @@ const useFormLabel = (column, prefix = '', schema) => {
4209
4202
  prefix,
4210
4203
  schema: {
4211
4204
  type: schema.type,
4212
- errorMessages: schema.errorMessages
4213
- ? Object.keys(schema.errorMessages)
4205
+ errorMessage: schema.errorMessage
4206
+ ? Object.keys(schema.errorMessage)
4214
4207
  : undefined,
4215
4208
  },
4216
4209
  });
@@ -4222,8 +4215,8 @@ const useFormLabel = (column, prefix = '', schema) => {
4222
4215
 
4223
4216
  const ArrayRenderer = ({ schema, column, prefix, }) => {
4224
4217
  const { gridRow, gridColumn = '1/span 12', required, items } = schema;
4225
- // @ts-expect-error TODO: find suitable types
4226
- const { type } = items;
4218
+ const itemsSchema = Array.isArray(items) ? items[0] : items;
4219
+ const { type } = itemsSchema ?? {};
4227
4220
  const colLabel = `${prefix}${column}`;
4228
4221
  const isRequired = required?.some((columnId) => columnId === column);
4229
4222
  const formI18n = useFormLabel(column, prefix, schema);
@@ -4235,8 +4228,10 @@ const ArrayRenderer = ({ schema, column, prefix, }) => {
4235
4228
  _dark: 'colorPalette.800',
4236
4229
  }, children: [jsx(Grid, { gridTemplateColumns: 'repeat(12, 1fr)', autoFlow: 'row', children: jsx(SchemaRenderer, { column: `${index}`,
4237
4230
  prefix: `${colLabel}.`,
4238
- // @ts-expect-error find suitable types
4239
- schema: { showLabel: false, ...(items ?? {}) } }) }), jsx(Flex, { justifyContent: 'end', children: jsx(Button$1, { variant: 'ghost', onClick: () => {
4231
+ schema: {
4232
+ showLabel: false,
4233
+ ...(Array.isArray(items) ? items[0] : items ?? {}),
4234
+ } }) }), jsx(Flex, { justifyContent: 'end', children: jsx(Button$1, { variant: 'ghost', onClick: () => {
4240
4235
  setValue(colLabel, fields.filter((_, curIndex) => {
4241
4236
  return curIndex !== index;
4242
4237
  }));
@@ -5319,16 +5314,13 @@ const FileDropzone = ({ children = undefined, gridProps = {}, onDrop = () => { }
5319
5314
  element: el,
5320
5315
  onDragEnter: () => setIsDraggedOver(true),
5321
5316
  onDragLeave: () => setIsDraggedOver(false),
5322
- // canDrop: some(containsFiles, containsText),
5323
5317
  onDrop: ({ source }) => {
5324
5318
  const files = getFiles({ source });
5325
5319
  const text = getText({ source });
5326
- console.log(files, text, 'dfposa');
5327
5320
  onDrop({ files, text });
5328
5321
  },
5329
5322
  });
5330
5323
  }, [onDrop]);
5331
- // const isDark = (location + location) % 2 === 1;
5332
5324
  function getColor(isDraggedOver) {
5333
5325
  if (isDraggedOver) {
5334
5326
  return {
@@ -5338,7 +5330,6 @@ const FileDropzone = ({ children = undefined, gridProps = {}, onDrop = () => { }
5338
5330
  },
5339
5331
  };
5340
5332
  }
5341
- // return isDark ? "lightgrey" : "white";
5342
5333
  return {
5343
5334
  backgroundColor: undefined,
5344
5335
  _dark: {
@@ -6221,11 +6212,9 @@ const ObjectInput = ({ schema, column, prefix }) => {
6221
6212
  base: 'colorPalette.200',
6222
6213
  _dark: 'colorPalette.800',
6223
6214
  }, gap: "4", padding: '4', gridTemplateColumns: 'repeat(12, 1fr)', autoFlow: 'row', children: Object.keys(properties ?? {}).map((key) => {
6224
- return (
6225
- // @ts-expect-error find suitable types
6226
- jsx(ColumnRenderer, { column: `${key}`,
6215
+ return (jsx(ColumnRenderer, { column: `${key}`,
6227
6216
  prefix: `${prefix}${column}.`,
6228
- properties,
6217
+ properties: properties ?? {},
6229
6218
  parentRequired: required }, `form-${colLabel}-${key}`));
6230
6219
  }) })] }));
6231
6220
  };
@@ -7967,7 +7956,8 @@ const SchemaRenderer = ({ schema, prefix, column, }) => {
7967
7956
  }
7968
7957
  if (variant === 'enum-picker') {
7969
7958
  const { items, title } = colSchema;
7970
- const { enum: enumItems } = items;
7959
+ const itemsSchema = Array.isArray(items) ? items[0] : items;
7960
+ const { enum: enumItems } = itemsSchema ?? {};
7971
7961
  // Use renderDisplay from parent schema only
7972
7962
  const renderDisplay = colSchema.renderDisplay;
7973
7963
  const enumSchema = {
@@ -8004,15 +7994,15 @@ const ColumnRenderer = ({ column, properties, prefix, parentRequired, }) => {
8004
7994
  };
8005
7995
 
8006
7996
  const SubmitButton = () => {
8007
- const { setValidatedData, setIsError, onFormSubmit, formButtonLabels } = useSchemaContext();
7997
+ const { onSubmit, formButtonLabels } = useSchemaContext();
8008
7998
  const methods = useFormContext();
8009
7999
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
8010
- const onValid = (data) => {
8000
+ const onValid = async (data) => {
8011
8001
  // Validation is handled by react-hook-form
8012
8002
  // This function will only be called if validation passes
8013
- setValidatedData(data);
8014
- setIsError(false);
8015
- onFormSubmit(data);
8003
+ if (onSubmit) {
8004
+ await onSubmit(data);
8005
+ }
8016
8006
  };
8017
8007
  return (jsx(Button$1, { onClick: () => {
8018
8008
  methods.handleSubmit(onValid)();
@@ -8020,33 +8010,21 @@ const SubmitButton = () => {
8020
8010
  };
8021
8011
 
8022
8012
  const FormBody = () => {
8023
- const { schema, order, ignore, include, isError, error, customErrorRenderer, displayConfig, formButtonLabels, } = useSchemaContext();
8013
+ const { schema, displayConfig, formButtonLabels } = useSchemaContext();
8024
8014
  const { showSubmitButton, showResetButton } = displayConfig;
8025
8015
  const methods = useFormContext();
8026
- console.log(methods.formState.errors);
8016
+ console.log('errors', methods.formState.errors);
8027
8017
  const { properties } = schema;
8028
- const renderColumns = ({ order, keys, ignore, include, }) => {
8029
- const included = include.length > 0 ? include : keys;
8030
- const not_exist = included.filter((columnA) => !order.some((columnB) => columnA === columnB));
8031
- const ordered = [...order, ...not_exist];
8032
- const ignored = ordered.filter((column) => !ignore.some((shouldIgnore) => column === shouldIgnore));
8033
- return ignored;
8034
- };
8035
- const ordered = renderColumns({
8036
- order,
8037
- keys: Object.keys(properties),
8038
- ignore,
8039
- include,
8040
- });
8018
+ const ordered = Object.keys(properties);
8041
8019
  return (jsxs(Flex, { flexFlow: 'column', gap: "2", children: [jsx(Grid, { gap: "4", gridTemplateColumns: 'repeat(12, 1fr)', autoFlow: 'row', children: ordered.map((column) => {
8042
- return (jsx(ColumnRenderer
8043
- // @ts-expect-error find suitable types
8044
- , {
8045
- // @ts-expect-error find suitable types
8046
- properties: properties, prefix: ``, parentRequired: schema.required, column }, `form-input-${column}`));
8020
+ if (!properties) {
8021
+ console.error('properties is undefined when using FormBody', schema);
8022
+ return null;
8023
+ }
8024
+ return (jsx(ColumnRenderer, { properties: properties, prefix: ``, parentRequired: schema.required, column }, `form-input-${column}`));
8047
8025
  }) }), jsxs(Flex, { justifyContent: 'end', gap: "2", children: [showResetButton && (jsx(Button$1, { onClick: () => {
8048
8026
  methods.reset();
8049
- }, variant: 'subtle', children: formButtonLabels?.reset ?? 'Reset' })), showSubmitButton && jsx(SubmitButton, {})] }), isError && customErrorRenderer && customErrorRenderer(error)] }));
8027
+ }, variant: 'subtle', children: formButtonLabels?.reset ?? 'Reset' })), showSubmitButton && jsx(SubmitButton, {})] })] }));
8050
8028
  };
8051
8029
 
8052
8030
  const FormTitle = () => {
@@ -8065,96 +8043,18 @@ const FormTitle = () => {
8065
8043
  return jsx(Heading, { children: schema.title ?? 'Form' });
8066
8044
  };
8067
8045
 
8068
- const clearEmptyString = (object) => {
8069
- return Object.fromEntries(Object.entries(object).filter(([, value]) => value !== ""));
8070
- };
8071
-
8072
- const FormRoot = ({ schema, idMap, setIdMap, form, children, order = [], ignore = [], include = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, getUpdatedData = () => { }, customErrorRenderer, customSuccessRenderer, displayConfig = {
8046
+ const FormRoot = ({ schema, idMap, setIdMap, form, children, onSubmit = undefined, displayConfig = {
8073
8047
  showSubmitButton: true,
8074
8048
  showResetButton: true,
8075
8049
  showTitle: true,
8076
8050
  }, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, formButtonLabels, timePickerLabels, insideDialog = false, }) => {
8077
- const [isSuccess, setIsSuccess] = useState(false);
8078
- const [isError, setIsError] = useState(false);
8079
- const [isSubmiting, setIsSubmiting] = useState(false);
8080
- const [validatedData, setValidatedData] = useState();
8081
- const [error, setError] = useState();
8082
- const onBeforeSubmit = () => {
8083
- setIsSubmiting(true);
8084
- };
8085
- const onAfterSubmit = () => {
8086
- setIsSubmiting(false);
8087
- };
8088
- const onSubmitError = (error) => {
8089
- setIsError(true);
8090
- setError(error);
8091
- };
8092
- const onSubmitSuccess = () => {
8093
- setIsSuccess(true);
8094
- };
8095
- const defaultOnSubmit = async (promise) => {
8096
- try {
8097
- console.log('onBeforeSubmit');
8098
- onBeforeSubmit();
8099
- await promise;
8100
- console.log('onSubmitSuccess');
8101
- onSubmitSuccess();
8102
- }
8103
- catch (error) {
8104
- console.log('onSubmitError', error);
8105
- onSubmitError(error);
8106
- }
8107
- finally {
8108
- onAfterSubmit();
8109
- }
8110
- };
8111
- const defaultSubmitPromise = (data) => {
8112
- if (!requestOptions.url) {
8113
- throw new Error('requestOptions.url is required when onSubmit is not provided');
8114
- }
8115
- const options = {
8116
- method: 'POST',
8117
- data: clearEmptyString(data),
8118
- ...requestOptions,
8119
- };
8120
- return axios.request(options);
8121
- };
8122
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
8123
- const onFormSubmit = async (data) => {
8124
- // Validation is handled by react-hook-form
8125
- // This function will only be called if validation passes
8126
- if (onSubmit === undefined) {
8127
- await defaultOnSubmit(Promise.resolve(defaultSubmitPromise(data)));
8128
- return;
8129
- }
8130
- await defaultOnSubmit(Promise.resolve(onSubmit(data)));
8131
- };
8132
8051
  return (jsx(SchemaFormContext.Provider, { value: {
8133
8052
  schema,
8134
- order,
8135
- ignore,
8136
- include,
8137
8053
  // @ts-expect-error TODO: find appropriate types
8138
8054
  onSubmit,
8139
- rowNumber,
8140
8055
  idMap,
8141
8056
  setIdMap,
8142
- requestOptions,
8143
- isSuccess,
8144
- setIsSuccess,
8145
- isError,
8146
- setIsError,
8147
- isSubmiting,
8148
- setIsSubmiting,
8149
- validatedData,
8150
- setValidatedData,
8151
- error,
8152
- setError,
8153
- getUpdatedData,
8154
- customErrorRenderer,
8155
- customSuccessRenderer,
8156
8057
  displayConfig,
8157
- onFormSubmit,
8158
8058
  dateTimePickerLabels,
8159
8059
  idPickerLabels,
8160
8060
  enumPickerLabels,
@@ -1,38 +1,17 @@
1
- import { AxiosRequestConfig } from 'axios';
2
- import { Dispatch, ReactNode, SetStateAction } from 'react';
1
+ import { Dispatch, SetStateAction } from 'react';
3
2
  import { FieldValues } from 'react-hook-form';
4
3
  import { CustomJSONSchema7, DateTimePickerLabels, EnumPickerLabels, FilePickerLabels, FormButtonLabels, IdPickerLabels, TimePickerLabels } from './components/types/CustomJSONSchema7';
5
4
  export interface SchemaFormContext<TData extends FieldValues> {
6
5
  schema: CustomJSONSchema7;
7
- requestUrl: string;
8
- order: string[];
9
- ignore: string[];
10
- include: string[];
11
6
  onSubmit?: (data: TData) => Promise<void>;
12
- rowNumber?: number | string;
13
7
  idMap: Record<string, object>;
14
8
  setIdMap: Dispatch<SetStateAction<Record<string, object>>>;
15
- requestOptions: AxiosRequestConfig;
16
- isSuccess: boolean;
17
- setIsSuccess: Dispatch<SetStateAction<boolean>>;
18
- isError: boolean;
19
- setIsError: Dispatch<SetStateAction<boolean>>;
20
- isSubmiting: boolean;
21
- setIsSubmiting: Dispatch<SetStateAction<boolean>>;
22
- validatedData: TData | undefined;
23
- setValidatedData: Dispatch<SetStateAction<TData>>;
24
- error: unknown;
25
- setError: Dispatch<SetStateAction<unknown>>;
26
- getUpdatedData: () => TData | Promise<TData>;
27
- customErrorRenderer?: (error: unknown) => ReactNode;
28
- customSuccessRenderer?: (resetHandler: () => void | Promise<void>) => ReactNode;
29
9
  timezone?: string;
30
10
  displayConfig: {
31
11
  showSubmitButton?: boolean;
32
12
  showResetButton?: boolean;
33
13
  showTitle?: boolean;
34
14
  };
35
- onFormSubmit: (data: TData) => Promise<void>;
36
15
  dateTimePickerLabels?: DateTimePickerLabels;
37
16
  idPickerLabels?: IdPickerLabels;
38
17
  enumPickerLabels?: EnumPickerLabels;
@@ -1,4 +1,3 @@
1
- import { AxiosRequestConfig } from 'axios';
2
1
  import { JSONSchema7 } from 'json-schema';
3
2
  import { Dispatch, ReactNode, SetStateAction } from 'react';
4
3
  import { FieldValues, SubmitHandler, UseFormReturn } from 'react-hook-form';
@@ -30,20 +29,11 @@ export interface FormRootProps<TData extends FieldValues> {
30
29
  * }
31
30
  */
32
31
  schema: CustomJSONSchema7;
33
- requestUrl?: string;
34
32
  idMap: Record<string, object>;
35
33
  setIdMap: Dispatch<SetStateAction<Record<string, object>>>;
36
34
  form: UseFormReturn<TData, any, TData>;
37
35
  children: ReactNode;
38
- order?: string[];
39
- ignore?: string[];
40
- include?: string[];
41
36
  onSubmit?: SubmitHandler<TData>;
42
- rowNumber?: number | string;
43
- requestOptions?: AxiosRequestConfig;
44
- getUpdatedData?: () => TData | Promise<TData> | void;
45
- customErrorRenderer?: (error: unknown) => ReactNode;
46
- customSuccessRenderer?: (resetHandler: () => void | Promise<void>) => ReactNode;
47
37
  displayConfig?: {
48
38
  showSubmitButton?: boolean;
49
39
  showResetButton?: boolean;
@@ -64,4 +54,4 @@ export interface CustomJSONSchema7Definition extends JSONSchema7 {
64
54
  customQueryFn: any;
65
55
  children: ReactNode;
66
56
  }
67
- export declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, customErrorRenderer, customSuccessRenderer, displayConfig, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, formButtonLabels, timePickerLabels, insideDialog, }: FormRootProps<TData>) => import("react/jsx-runtime").JSX.Element;
57
+ export declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, children, onSubmit, displayConfig, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, formButtonLabels, timePickerLabels, insideDialog, }: FormRootProps<TData>) => import("react/jsx-runtime").JSX.Element;
@@ -85,7 +85,7 @@ export interface CustomJSONSchema7 extends Omit<JSONSchema7, 'items' | 'addition
85
85
  gridColumn?: string;
86
86
  gridRow?: string;
87
87
  customQueryFn?: CustomQueryFn;
88
- variant?: 'custom-input' | 'id-picker' | 'text-area' | 'media-library-browser' | 'tag-picker' | 'file-picker' | 'date-range' | 'enum-picker';
88
+ variant?: 'custom-input' | 'id-picker' | 'text-area' | 'media-library-browser' | 'tag-picker' | 'file-picker' | 'date-range' | 'enum-picker' | 'radio';
89
89
  renderDisplay?: (item: unknown) => ReactNode;
90
90
  itemToValue?: (item: unknown) => string;
91
91
  loadInitialValues?: (params: LoadInitialValuesParams) => Promise<LoadInitialValuesResult>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bsol-oss/react-datatable5",
3
- "version": "13.0.1-beta.27",
3
+ "version": "13.0.1-beta.28",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",