@dartech/arsenal-ui 1.4.41 → 1.4.43

package/index.js

@@ -35,7 +35,7 @@ import { langs } from '@uiw/codemirror-extensions-langs';
 import { abcdef } from '@uiw/codemirror-theme-abcdef';
 import Switch from '@mui/material/Switch';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
-import { format, parse, isMatch, isValid } from 'date-fns';
+import { format, parse, isValid, isMatch } from 'date-fns';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import { TimePicker } from '@mui/x-date-pickers/TimePicker';
 import Chip from '@mui/material/Chip';
@@ -257,6 +257,7 @@ const defaultDefinitionObjectValue = {
   properties: {}
 };
 const DEFAULT_REQUIRED_ERROR_TEXT = 'Please, fill this field';
+const DEFAULT_DATE_VALIDATION_ERROR_TEXT = 'Incorrect date format';
 
 /**
  * Material UI `TextField` controlled component. Used with react-hook-form
@@ -648,8 +649,7 @@ const ControlCheckbox = _a => {
         onChange: customOnChange ? customOnChange : onChange,
         name: name,
         inputRef: ref,
-        disabled: disabled,
-        defaultChecked: checked
+        disabled: disabled
       }, checkboxProps)),
       label: label
     }), !hideErrorMessage && (error === null || error === void 0 ? void 0 : error.message) && jsx(FormHelperText, Object.assign({
@@ -2231,10 +2231,18 @@ const ControlDate = _a => {
       format: format$1 = DATE_DEFAULT_FORMAT,
       hideErrorMessage = false,
       textFieldProps = {},
-      requiredErrorText = ''
+      requiredErrorText = '',
+      validate,
+      validateErrorText
     } = _a,
-    datePickerProps = __rest(_a, ["control", "name", "required", "label", "placeholder", "format", "hideErrorMessage", "textFieldProps", "requiredErrorText"]);
+    datePickerProps = __rest(_a, ["control", "name", "required", "label", "placeholder", "format", "hideErrorMessage", "textFieldProps", "requiredErrorText", "validate", "validateErrorText"]);
   const [localFormat, setLocalFormat] = useState(DATE_DEFAULT_FORMAT);
+  const defaultValidate = val => {
+    if (val === '' || isMatch(val, localFormat)) {
+      return true;
+    }
+    return validateErrorText ? validateErrorText : DEFAULT_DATE_VALIDATION_ERROR_TEXT;
+  };
   const {
     field,
     fieldState: {
@@ -2245,12 +2253,7 @@ const ControlDate = _a => {
     name,
     rules: {
       required: required ? requiredErrorText || DEFAULT_REQUIRED_ERROR_TEXT : false,
-      validate: val => {
-        if (val === '' || isMatch(val, localFormat)) {
-          return true;
-        }
-        return 'Incorrect date format';
-      }
+      validate: validate ? validate : defaultValidate
     }
   });
   const handleChange = useCallback(date => {
@@ -2312,10 +2315,18 @@ const ControlDateTime = _a => {
       format: format$1 = DATE_TIME_DEFAULT_FORMAT,
       hideErrorMessage = false,
       textFieldProps,
-      requiredErrorText = ''
+      requiredErrorText = '',
+      validate,
+      validateErrorText
     } = _a,
-    dateTimePickerProps = __rest(_a, ["control", "name", "required", "label", "format", "hideErrorMessage", "textFieldProps", "requiredErrorText"]);
+    dateTimePickerProps = __rest(_a, ["control", "name", "required", "label", "format", "hideErrorMessage", "textFieldProps", "requiredErrorText", "validate", "validateErrorText"]);
   const [localFormat, setLocalFormat] = useState();
+  const defaultValidate = val => {
+    if (val === '' || isMatch(val, localFormat)) {
+      return true;
+    }
+    return validateErrorText ? validateErrorText : DEFAULT_DATE_VALIDATION_ERROR_TEXT;
+  };
   const {
     field,
     fieldState: {
@@ -2326,12 +2337,7 @@ const ControlDateTime = _a => {
     name,
     rules: {
       required: required ? requiredErrorText || DEFAULT_REQUIRED_ERROR_TEXT : false,
-      validate: val => {
-        if (isMatch(val, localFormat)) {
-          return true;
-        }
-        return 'Incorrect date format';
-      }
+      validate: validate ? validate : defaultValidate
     }
   });
   const handleChange = useCallback(date => {
@@ -2460,36 +2466,41 @@ const ControlTime = ({
   }));
 };
 
-const ControlArrayInput = ({
-  name,
-  control,
-  label,
-  required,
-  defaultValue: _defaultValue = null
-}) => {
-  var _a, _b;
+const ControlArrayInput = _a => {
+  var _b, _c, _d;
+  var {
+      name,
+      control,
+      label,
+      required,
+      defaultValue = null,
+      onChange: customOnChange,
+      textFieldLabel
+    } = _a,
+    textFieldProps = __rest(_a, ["name", "control", "label", "required", "defaultValue", "onChange", "textFieldLabel"]);
   const [localValue, setLoacalValue] = useState('');
   const [error, setError] = useState(null);
-  const _c = useController({
+  const _e = useController({
       control,
       name,
-      defaultValue: _defaultValue,
+      defaultValue,
       rules: {
         required: required && DEFAULT_REQUIRED_ERROR_TEXT
       }
     }),
-    _d = _c.field,
+    _f = _e.field,
     {
-      onChange,
+      onChange: innerOnChange,
       value: values
-    } = _d,
-    fieldData = __rest(_d, ["onChange", "value"]),
+    } = _f,
+    fieldData = __rest(_f, ["onChange", "value"]),
     {
       // fieldState: { error },
       formState: {
         errors
       }
-    } = _c;
+    } = _e;
+  const onChange = useMemo(() => customOnChange ? customOnChange : innerOnChange, [customOnChange, innerOnChange]);
   const handleInputChange = useCallback(e => {
     const {
       value
@@ -2518,17 +2529,10 @@ const ControlArrayInput = ({
     }
   }, [handleAdd]);
   return jsxs(Fragment, {
-    children: [jsx(Typography, Object.assign({
-      variant: "subtitle1"
+    children: [jsx(FormLabel, Object.assign({
+      required: required
     }, {
-      children: required ? jsxs(Fragment, {
-        children: [label, ' ', jsx(Box, Object.assign({
-          component: "span",
-          color: "#D6331F"
-        }, {
-          children: "*"
-        }))]
-      }) : label
+      children: label
     })), jsx(Box, Object.assign({
       display: "flex",
       flexWrap: "wrap"
@@ -2547,15 +2551,15 @@ const ControlArrayInput = ({
     }, control.register(name), {
       onChange: onChange,
       value: values
-    }, fieldData)), jsx(TextField, {
+    }, fieldData)), jsx(TextField, Object.assign({
       fullWidth: true,
       variant: "outlined",
       size: "small",
-      label: `Add ${label}`,
+      label: textFieldLabel || textFieldLabel === '' ? textFieldLabel : `Add ${label}`,
       value: localValue,
       onChange: handleInputChange,
-      error: !!((_a = errors[name]) === null || _a === void 0 ? void 0 : _a.message),
-      helperText: (_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message,
+      error: !!((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message),
+      helperText: (_c = errors[name]) === null || _c === void 0 ? void 0 : _c.message,
       FormHelperTextProps: {
         variant: 'standard'
       },
@@ -2572,8 +2576,9 @@ const ControlArrayInput = ({
             })
           })
         }))
-      }
-    }), error && jsx(FormHelperText, Object.assign({
+      },
+      inputProps: Object.assign({}, (_d = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.inputProps) !== null && _d !== void 0 ? _d : {})
+    }, textFieldProps)), error && jsx(FormHelperText, Object.assign({
       error: true
     }, {
       children: error
@@ -8034,4 +8039,4 @@ const Breadcrumbs = ({
   }));
 };
 
-export { AlertDialog, BackButton, Breadcrumbs, ContentLayout, ControlAceEditor, ControlArrayInput, ControlAutocomplete, ControlCheckbox, ControlDate, ControlDateTime, ControlDebouncedInput, ControlInput, ControlNumberInput, ControlPeriodInput, ControlPhoneInput, ControlQueryAutocomplete, ControlRadio, ControlSelect, ControlSwitch, ControlTime, CopyButton, CreateDefinition, CreatePropertiesList, CreatePropertiesListContext, CreatePropertyFormFields, DATE_DEFAULT_FORMAT, DATE_TIME_DEFAULT_FORMAT, DEFAULT_ERROR_TEXT, DEFAULT_REQUIRED_ERROR_TEXT, DefinitionFiller, DefinitionValueView, InfoItem, JsonModalView, JsonPathPicker, JsonView, Loader, MenuIcon, MultiplePropertyFiller, PropertyFiller, PropertyType, PropertyValueField, RoundingMode, RouteTabs, Sidebar, SimpleTable, Status, StepperView, TIME_DEFAULT_FORMAT, TabPanel, Table, TableAction, TableActionCell, ViewPropertiesList, ViewProperty, capitalize, deepParseJson, defaultDefinitionArrayValue, defaultDefinitionObjectValue, digitsOnly, floatsOnly, formatDefinitionData, formatTableRowValue, getDemPropertyDateFormat, getEntityStarterValue, getJsonStringValue, getMultiplePropertyFillOptions, getSinglePropertyFillOptions, isDateType, isExpression, isPropertyValueEmpty, numberFormat, propertiesArrayToObject, propertiesObjectToArray, removeArrayItem, safeParseJson, sortArrayOfObjects, theme, useDebounce, useToggle, validateJson };
+export { AlertDialog, BackButton, Breadcrumbs, ContentLayout, ControlAceEditor, ControlArrayInput, ControlAutocomplete, ControlCheckbox, ControlDate, ControlDateTime, ControlDebouncedInput, ControlInput, ControlNumberInput, ControlPeriodInput, ControlPhoneInput, ControlQueryAutocomplete, ControlRadio, ControlSelect, ControlSwitch, ControlTime, CopyButton, CreateDefinition, CreatePropertiesList, CreatePropertiesListContext, CreatePropertyFormFields, DATE_DEFAULT_FORMAT, DATE_TIME_DEFAULT_FORMAT, DEFAULT_DATE_VALIDATION_ERROR_TEXT, DEFAULT_ERROR_TEXT, DEFAULT_REQUIRED_ERROR_TEXT, DefinitionFiller, DefinitionValueView, InfoItem, JsonModalView, JsonPathPicker, JsonView, Loader, MenuIcon, MultiplePropertyFiller, PropertyFiller, PropertyType, PropertyValueField, RoundingMode, RouteTabs, Sidebar, SimpleTable, Status, StepperView, TIME_DEFAULT_FORMAT, TabPanel, Table, TableAction, TableActionCell, ViewPropertiesList, ViewProperty, capitalize, deepParseJson, defaultDefinitionArrayValue, defaultDefinitionObjectValue, digitsOnly, floatsOnly, formatDefinitionData, formatTableRowValue, getDemPropertyDateFormat, getEntityStarterValue, getJsonStringValue, getMultiplePropertyFillOptions, getSinglePropertyFillOptions, isDateType, isExpression, isPropertyValueEmpty, numberFormat, propertiesArrayToObject, propertiesObjectToArray, removeArrayItem, safeParseJson, sortArrayOfObjects, theme, useDebounce, useToggle, validateJson };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dartech/arsenal-ui",
-  "version": "1.4.41",
+  "version": "1.4.43",
   "author": "DAR",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/src/consts/index.d.ts

@@ -11,3 +11,4 @@ export declare const defaultDefinitionObjectValue: {
     properties: {};
 };
 export declare const DEFAULT_REQUIRED_ERROR_TEXT = "Please, fill this field";
+export declare const DEFAULT_DATE_VALIDATION_ERROR_TEXT = "Incorrect date format";

package/src/lib/Forms/ControlArrayInput.d.ts

@@ -1,11 +1,14 @@
 import { ReactNode } from 'react';
 import { Control } from 'react-hook-form';
-type Props = {
+import { TextFieldProps } from '@mui/material/TextField';
+type Props = TextFieldProps & {
     name: string;
     control: Control<any>;
     label: ReactNode;
     required?: boolean;
     defaultValue?: [] | null;
+    onChange?: any;
+    textFieldLabel?: string;
 };
-export declare const ControlArrayInput: ({ name, control, label, required, defaultValue, }: Props) => JSX.Element;
+export declare const ControlArrayInput: ({ name, control, label, required, defaultValue, onChange: customOnChange, textFieldLabel, ...textFieldProps }: Props) => JSX.Element;
 export {};

package/src/lib/Forms/ControlDate.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { TextFieldProps } from '@mui/material/TextField';
 import { DatePickerProps } from '@mui/x-date-pickers/DatePicker';
-import { Control } from 'react-hook-form';
+import { Control, Validate } from 'react-hook-form';
 type ControlDateProps = Partial<DatePickerProps<unknown, unknown>> & {
     /**
      * React Hook Form `control`
@@ -18,6 +18,8 @@ type ControlDateProps = Partial<DatePickerProps<unknown, unknown>> & {
     hideErrorMessage?: boolean;
     textFieldProps?: TextFieldProps;
     requiredErrorText?: string;
+    validate?: Validate<any, any>;
+    validateErrorText?: string;
 };
-export declare const ControlDate: ({ control, name, required, label, placeholder, format, hideErrorMessage, textFieldProps, requiredErrorText, ...datePickerProps }: ControlDateProps) => JSX.Element;
+export declare const ControlDate: ({ control, name, required, label, placeholder, format, hideErrorMessage, textFieldProps, requiredErrorText, validate, validateErrorText, ...datePickerProps }: ControlDateProps) => JSX.Element;
 export default ControlDate;

package/src/lib/Forms/ControlDateTime.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { TextFieldProps } from '@mui/material/TextField';
 import { DateTimePickerProps } from '@mui/x-date-pickers/DateTimePicker';
-import { Control } from 'react-hook-form';
+import { Control, Validate } from 'react-hook-form';
 type dateTimePickerProps = Partial<DateTimePickerProps<unknown, unknown>> & {
     /**
      * React Hook Form `control`
@@ -17,6 +17,8 @@ type dateTimePickerProps = Partial<DateTimePickerProps<unknown, unknown>> & {
     hideErrorMessage?: boolean;
     textFieldProps?: TextFieldProps;
     requiredErrorText?: string;
+    validate?: Validate<any, any>;
+    validateErrorText?: string;
 };
-export declare const ControlDateTime: ({ control, name, required, label, format, hideErrorMessage, textFieldProps, requiredErrorText, ...dateTimePickerProps }: dateTimePickerProps) => JSX.Element;
+export declare const ControlDateTime: ({ control, name, required, label, format, hideErrorMessage, textFieldProps, requiredErrorText, validate, validateErrorText, ...dateTimePickerProps }: dateTimePickerProps) => JSX.Element;
 export default ControlDateTime;