@dartech/arsenal-ui 1.2.4 → 1.2.5

package/src/lib/Forms/ControlAutocomplete.tsx

@@ -0,0 +1,145 @@
+import Autocomplete, { AutocompleteProps } from '@mui/material/Autocomplete';
+import TextField, { TextFieldProps } from '@mui/material/TextField';
+import { Control, useController, useWatch } from 'react-hook-form';
+
+import useAutocomplete from './useAutocomplete';
+import { ValidateFunc } from '../../interfaces';
+
+/**
+ * This interface is referencing the [[ControlAutocomplete]] component props.
+ * @category Forms
+ */
+export type ControlAutocompleteProps = Omit<
+  AutocompleteProps<unknown, boolean, boolean, boolean, React.ElementType<any>>,
+  'renderInput'
+> & {
+  /**
+   * React Hook Form control `name` propery
+   */
+  name: string;
+  /**
+   * Label for MUI TextField select component
+   */
+  label?: string;
+  /**
+   * React Hook Form `control`
+   */
+  control: Control<any>;
+  /**
+   * Is input required flag
+   */
+  required?: boolean;
+  /**
+   * React Hook Form `defaultValue`
+   */
+  defaultValue?: unknown;
+  /**
+   * Is disabled input flag
+   */
+  disabled?: boolean;
+  /**
+   * React Hook Form validate function
+   * ```typescript
+   * type ValidateFunc = (value: string) => boolean | string;
+   * ```
+   */
+  validate?: ValidateFunc | Record<string, ValidateFunc>;
+  /**
+   * Hide error message flag
+   */
+  hideErrorMessage?: boolean;
+  /**
+   * Custom onChange functionƒ
+   */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: unknown) => void;
+  /**
+   * Key for option label
+   */
+  labelKey?: string;
+  /**
+   * Key for option value
+   */
+  valueKey?: string;
+  /**
+   * Select options
+   */
+  options: string[] | unknown[];
+  textFieldProps?: TextFieldProps;
+};
+
+/**
+ * Material UI `Autocomplete` controlled component. Used with react-hook-form
+ * @category Forms
+ */
+export const ControlAutocomplete = ({
+  control,
+  validate,
+  name = '',
+  label = '',
+  required = false,
+  defaultValue = '',
+  disabled = false,
+  hideErrorMessage = false,
+  onChange: customOnChange,
+  labelKey,
+  valueKey,
+  options = [],
+  multiple,
+  textFieldProps = {},
+  disableCloseOnSelect,
+  ...autocompleteProps
+}: ControlAutocompleteProps) => {
+  const {
+    field: { ref, onChange },
+    fieldState: { error },
+  } = useController({
+    name,
+    control,
+    defaultValue,
+    rules: {
+      required: required && 'Please, fill this field',
+      validate,
+    },
+  });
+  const formValue = useWatch({ control, name, defaultValue: multiple ? [] : null });
+  const { getOptionLabel, isOptionEqualToValue, renderOption } = useAutocomplete({ valueKey, labelKey });
+
+  const handleChange = (_, value) => {
+    onChange(value);
+  };
+
+  return (
+    <Autocomplete
+      fullWidth
+      disablePortal
+      size="small"
+      readOnly={disabled}
+      options={options}
+      multiple={multiple}
+      getOptionLabel={getOptionLabel}
+      isOptionEqualToValue={isOptionEqualToValue}
+      disableCloseOnSelect={disableCloseOnSelect || multiple}
+      filterSelectedOptions={multiple}
+      value={formValue}
+      onChange={customOnChange ? customOnChange : handleChange}
+      renderOption={renderOption}
+      renderInput={(params) => {
+        return (
+          <TextField
+            {...params}
+            variant="outlined"
+            name={name}
+            label={label}
+            error={!!error}
+            inputRef={ref}
+            helperText={!hideErrorMessage && error?.message}
+            {...textFieldProps}
+          />
+        );
+      }}
+      {...autocompleteProps}
+    />
+  );
+};
+
+export default ControlAutocomplete;

package/src/lib/Forms/ControlCheckbox.tsx

@@ -0,0 +1,113 @@
+import FormControl from '@mui/material/FormControl';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormHelperText from '@mui/material/FormHelperText';
+import Checkbox, { CheckboxProps } from '@mui/material/Checkbox';
+
+import { useMemo } from 'react';
+import { Control, useController, useWatch } from 'react-hook-form';
+import { ValidateFunc } from '../../interfaces';
+
+/**
+ * This interface is referencing the [[ControlCheckbox]] component props.
+ * @category Forms
+ */
+export type ControlCheckboxProps = CheckboxProps & {
+  /**
+   * React Hook Form control `name` propery
+   */
+  name: string;
+  /**
+   * Label for MUI TextField component
+   */
+  label?: string;
+  /**
+   * React Hook Form `control`
+   */
+  control: Control<any>;
+  /**
+   * React Hook Form `defaultValue`
+   */
+  defaultValue?: unknown;
+  /**
+   * Is disabled input flag
+   */
+  disabled?: boolean;
+  /**
+   * React Hook Form validate function
+   * ```typescript
+   * type ValidateFunc = (value: string) => boolean | string;
+   * ```
+   */
+  validate?: ValidateFunc | Record<string, ValidateFunc>;
+  /**
+   * Hide error message flag
+   */
+  hideErrorMessage?: boolean;
+  /**
+   * Custom onChange functionƒ
+   */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+};
+
+/**
+ * Material UI `Checkbox` controlled component. Used with react-hook-form
+ * @category Forms
+ */
+export const ControlCheckbox = ({
+  control,
+  validate,
+  name = '',
+  label = '',
+  required = false,
+  defaultValue = '',
+  disabled = false,
+  hideErrorMessage = false,
+  onChange: customOnChange,
+  ...checkboxProps
+}: ControlCheckboxProps) => {
+  const {
+    field: { ref, onChange },
+    fieldState: { error },
+  } = useController({
+    name,
+    control,
+    defaultValue,
+  });
+  const value = useWatch({ control, name });
+
+  const checked = useMemo(() => {
+    if (typeof value === 'boolean') {
+      return value;
+    } else if (typeof value === 'string') {
+      if (value === 'false') {
+        onChange(false);
+        return false;
+      } else if (value === 'true') {
+        onChange(true);
+        return true;
+      }
+    }
+    return false;
+  }, [value, onChange]);
+
+  return (
+    <FormControl error={!!error} component="fieldset" variant="standard" disabled={disabled}>
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={checked}
+            onChange={customOnChange ? customOnChange : onChange}
+            name={name}
+            inputRef={ref}
+            disabled={disabled}
+            {...checkboxProps}
+          />
+        }
+        label={label}
+      />
+      {!hideErrorMessage && error?.message && <FormHelperText>{error.message}</FormHelperText>}
+    </FormControl>
+  );
+};
+
+export default ControlCheckbox;

package/src/lib/Forms/ControlDate.tsx

@@ -0,0 +1,75 @@
+import TextField from '@mui/material/TextField';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+
+import { isValid, format as dateFnsFormat, isMatch } from 'date-fns';
+import { Control, useController, useWatch } from 'react-hook-form';
+import { DATE_DEFAULT_FORMAT } from '../../interfaces';
+
+type Props = {
+  /**
+   * React Hook Form `control`
+   */
+  control: Control<any>;
+  /**
+   * Is input required flag
+   */
+  required?: boolean;
+  name: string;
+  label?: string;
+  format?: string;
+  hideErrorMessage?: boolean;
+};
+
+export const ControlDate = ({
+  control,
+  name,
+  required,
+  label,
+  format = DATE_DEFAULT_FORMAT,
+  hideErrorMessage = false,
+}: Props) => {
+  const {
+    field: { onChange, ref },
+    fieldState: { error },
+  } = useController({
+    control,
+    name,
+    rules: {
+      required: required && 'Please, fill this field',
+      validate: (val) => {
+        if (isMatch(val, format)) {
+          return true;
+        }
+        return 'Incorrect date format';
+      },
+    },
+  });
+  const value = useWatch({ control, name });
+
+  const handleChange = (date) => {
+    onChange(isValid(date) ? dateFnsFormat(date, format) : date);
+  };
+
+  return (
+    <DatePicker
+      label={label}
+      inputRef={ref}
+      inputFormat={format}
+      value={value || null}
+      onChange={handleChange}
+      renderInput={(props) => (
+        <TextField
+          {...props}
+          fullWidth
+          size="small"
+          variant="outlined"
+          name={name}
+          error={!!error}
+          helperText={!hideErrorMessage && error?.message}
+        />
+      )}
+    />
+  );
+};
+
+export default ControlDate;

package/src/lib/Forms/ControlDateTime.tsx

@@ -0,0 +1,77 @@
+import TextField from '@mui/material/TextField';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+
+import { isValid, format as dateFnsFormat, isMatch } from 'date-fns';
+import { Control, useController, useWatch } from 'react-hook-form';
+import { DATE_TIME_DEFAULT_FORMAT } from '../../interfaces';
+
+type Props = {
+  /**
+   * React Hook Form `control`
+   */
+  control: Control<any>;
+  /**
+   * Is input required flag
+   */
+  required?: boolean;
+  name: string;
+  label?: string;
+  format?: string;
+  hideErrorMessage?: boolean;
+};
+
+export const ControlDateTime = ({
+  control,
+  name,
+  required,
+  label,
+  format = DATE_TIME_DEFAULT_FORMAT,
+  hideErrorMessage = false,
+}: Props) => {
+  const {
+    field: { onChange, ref },
+    fieldState: { error },
+  } = useController({
+    control,
+    name,
+    rules: {
+      required: required && 'Please, fill this field',
+      validate: (val) => {
+        if (isMatch(val, format)) {
+          return true;
+        }
+        return 'Incorrect date format';
+      },
+    },
+  });
+  const value = useWatch({ control, name });
+
+  const handleChange = (date) => {
+    onChange(isValid(date) ? dateFnsFormat(date, format) : date);
+  };
+
+  return (
+    <DateTimePicker
+      mask=""
+      ampm={false}
+      inputRef={ref}
+      label={label}
+      value={value || null}
+      inputFormat={format}
+      onChange={handleChange}
+      renderInput={(props) => (
+        <TextField
+          {...props}
+          fullWidth
+          size="small"
+          variant="outlined"
+          name={name}
+          error={!!error}
+          helperText={!hideErrorMessage && error?.message}
+        />
+      )}
+    />
+  );
+};
+
+export default ControlDateTime;

package/src/lib/Forms/ControlDebouncedInput.tsx

@@ -0,0 +1,80 @@
+import TextField from '@mui/material/TextField';
+
+import { useCallback, useEffect, useState } from 'react';
+import { useController, useWatch } from 'react-hook-form';
+import { useDebounce } from '../../utils/hooks';
+import { ControlInputProps } from './ControlInput';
+
+export const ControlDebouncedInput = ({
+  control,
+  validate,
+  name = '',
+  label = '',
+  required = false,
+  defaultValue = '',
+  disabled = false,
+  textarea = false,
+  hideErrorMessage = false,
+  onChange: customOnChange,
+  ...textFieldProps
+}: ControlInputProps) => {
+  const {
+    field: { ref, onChange },
+    fieldState: { error },
+  } = useController({
+    name,
+    control,
+    defaultValue,
+    rules: {
+      required: required && 'Please, fill this field',
+      validate,
+    },
+  });
+  const value = useWatch({ control, name });
+
+  const [fieldValue, setFieldValue] = useState('');
+
+  useEffect(() => {
+    if (!fieldValue && value) {
+      setFieldValue(value);
+    }
+  }, [fieldValue, value]);
+
+  const debouncedChange = useDebounce((value) => {
+    onChange(value);
+  }, 200);
+
+  const handleChange = useCallback(
+    (e) => {
+      setFieldValue(e.target.value);
+      debouncedChange(e.target.value);
+    },
+    [debouncedChange]
+  );
+
+  return (
+    <TextField
+      fullWidth
+      size="small"
+      variant="outlined"
+      type="text"
+      inputRef={ref}
+      name={name}
+      label={label}
+      error={!!error}
+      helperText={!hideErrorMessage && error?.message}
+      disabled={disabled}
+      multiline={textarea}
+      minRows={textarea ? 3 : 1}
+      value={fieldValue ?? ''}
+      onChange={handleChange}
+      {...textFieldProps}
+      inputProps={{
+        ...(textFieldProps?.inputProps ?? {}),
+        value: fieldValue ?? '',
+      }}
+    />
+  );
+};
+
+export default ControlDebouncedInput;

package/src/lib/Forms/ControlInput.tsx

@@ -0,0 +1,111 @@
+import { useController, Control, useWatch } from 'react-hook-form';
+import TextField, { TextFieldProps } from '@mui/material/TextField';
+import { ValidateFunc } from '../../interfaces';
+
+/**
+ * This interface is referencing the [[ControlInput]] component props.
+ * @category Forms
+ */
+export type ControlInputProps = TextFieldProps & {
+  /**
+   * React Hook Form control `name` propery
+   */
+  name: string;
+  /**
+   * Label for MUI TextField component
+   */
+  label?: string;
+  /**
+   * React Hook Form `control`
+   */
+  control: Control<any>;
+  /**
+   * Is input required flag
+   */
+  required?: boolean;
+  /**
+   * React Hook Form `defaultValue`
+   */
+  defaultValue?: unknown;
+  /**
+   * Is disabled input flag
+   */
+  disabled?: boolean;
+  /**
+   * React Hook Form validate function
+   * ```typescript
+   * type ValidateFunc = (value: string) => boolean | string;
+   * ```
+   */
+  validate?: ValidateFunc | Record<string, ValidateFunc>;
+  /**
+   * Is input textarea flag
+   */
+  textarea?: boolean;
+  /**
+   * Hide error message flag
+   */
+  hideErrorMessage?: boolean;
+  /**
+   * Custom onChange functionƒ
+   */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+};
+
+/**
+ * Material UI `TextField` controlled component. Used with react-hook-form
+ * @category Forms
+ */
+export const ControlInput = ({
+  control,
+  validate,
+  name = '',
+  label = '',
+  required = false,
+  defaultValue = '',
+  disabled = false,
+  textarea = false,
+  hideErrorMessage = false,
+  onChange: customOnChange,
+  ...textFieldProps
+}: ControlInputProps) => {
+  const {
+    field: { ref, onChange },
+    fieldState: { error },
+  } = useController({
+    name,
+    control,
+    defaultValue,
+    rules: {
+      required: required && 'Please, fill this field',
+      validate,
+    },
+  });
+  const value = useWatch({ control, name });
+
+  return (
+    <TextField
+      fullWidth
+      size="small"
+      variant="outlined"
+      type="text"
+      inputRef={ref}
+      name={name}
+      label={label}
+      error={!!error}
+      helperText={!hideErrorMessage && error?.message}
+      disabled={disabled}
+      multiline={textarea}
+      minRows={textarea ? 3 : 1}
+      value={value ?? ''}
+      onChange={customOnChange ? customOnChange : onChange}
+      {...textFieldProps}
+      inputProps={{
+        ...(textFieldProps?.inputProps ?? {}),
+        value: value ?? '',
+      }}
+    />
+  );
+};
+
+export default ControlInput;