@dartech/arsenal-ui 1.2.4 → 1.2.5

package/src/lib/Forms/ControlNumberInput.tsx

@@ -0,0 +1,121 @@
+import TextField, { TextFieldProps } from '@mui/material/TextField';
+import { useController, Control, useWatch } from 'react-hook-form';
+import { floatsOnly, digitsOnly } from '../../utils';
+import { ValidateFunc } from '../../interfaces';
+
+type Props = TextFieldProps & {
+  /**
+   * React Hook Form control `name` propery
+   */
+  name: string;
+  /**
+   * Label for MUI TextField component
+   */
+  label?: string;
+  /**
+   * React Hook Form `control`
+   */
+  control: Control;
+  /**
+   * Is input required flag
+   */
+  required?: boolean;
+  /**
+   * React Hook Form `defaultValue`
+   */
+  defaultValue?: number;
+  /**
+   * 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;
+  /**
+   * Is number decimal or integer flag
+   */
+  decimal?: boolean;
+};
+
+export const ControlNumberInput = ({
+  control,
+  validate,
+  name = '',
+  label = '',
+  required = false,
+  defaultValue,
+  disabled = false,
+  hideErrorMessage = false,
+  onChange: customOnChange,
+  decimal = false,
+  ...textFieldProps
+}: Props) => {
+  const {
+    field: { ref, onChange },
+    fieldState: { error },
+  } = useController({
+    name,
+    control,
+    defaultValue,
+    rules: {
+      required: required && 'Please, fill this field',
+      validate: (val) => {
+        if (decimal && !floatsOnly.test(val)) {
+          return 'Not valid number';
+        } else if (!decimal && !digitsOnly.test(val)) {
+          return 'Not valid integer';
+        }
+        return true;
+      },
+    },
+  });
+  const value = useWatch({ control, name });
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const lastData = event.nativeEvent['data'] || event.target.value;
+    if (!isNaN(lastData) || (decimal && lastData === '.') || lastData === '-' || lastData === '+') {
+      if (customOnChange) {
+        customOnChange(event);
+      } else {
+        onChange(event.target.value);
+      }
+    }
+  };
+
+  return (
+    <TextField
+      fullWidth
+      size="small"
+      variant="outlined"
+      type="text"
+      inputRef={ref}
+      name={name}
+      label={label}
+      error={!!error}
+      helperText={!hideErrorMessage && error?.message}
+      disabled={disabled}
+      value={value ?? ''}
+      {...textFieldProps}
+      onChange={handleChange}
+      inputProps={{
+        ...(textFieldProps?.inputProps ?? {}),
+        value: value ?? '',
+      }}
+    />
+  );
+};
+
+export default ControlNumberInput;

package/src/lib/Forms/ControlQueryAutocomplete.tsx

@@ -0,0 +1,197 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import TextField from '@mui/material/TextField';
+import Autocomplete from '@mui/material/Autocomplete';
+import CircularProgress from '@mui/material/CircularProgress';
+
+import { useController, useWatch } from 'react-hook-form';
+import { useQuery } from '@tanstack/react-query';
+import qs from 'qs';
+import { useDebounce } from '../../utils/hooks';
+import useAutocomplete from './useAutocomplete';
+
+import { ControlAutocompleteProps } from './ControlAutocomplete';
+import { PaginateData } from '../../interfaces';
+
+type PaginateParams = {
+  page: string;
+  size: string;
+  [key: string]: string;
+};
+
+type ControlQueryAutocompleteProps<T> = Omit<ControlAutocompleteProps, 'options'> & {
+  searchBy: string;
+  sortBy?: string;
+  queryFunction: (params: PaginateParams) => Promise<PaginateData<T>>;
+  itemQueryFunction?: (valueKey: string) => Promise<T>;
+};
+
+export function ControlQueryAutocomplete<T>({
+  name,
+  label,
+  control,
+  required = false,
+  searchBy,
+  labelKey,
+  multiple = false,
+  disabled,
+  valueKey,
+  sortBy = '',
+  hideErrorMessage,
+  disableCloseOnSelect,
+  textFieldProps,
+  onChange,
+  queryFunction,
+  validate,
+  itemQueryFunction,
+  ...autocompleteProps
+}: ControlQueryAutocompleteProps<T>) {
+  const {
+    field: { ref, onChange: setFieldValue },
+    fieldState: { error, isDirty },
+  } = useController({ control, name, rules: { required: required && 'Please, fill this field', validate } });
+  const formValue = useWatch({ control, name, defaultValue: multiple ? [] : null });
+
+  const { getOptionLabel, isOptionEqualToValue, renderOption } = useAutocomplete({ valueKey, labelKey });
+
+  const [open, setOpen] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+  const [searchValue, setSearchValue] = useState('');
+  const [totalItems, setTotalItems] = useState(0);
+  const [page, setPage] = useState(0);
+  const [options, setOptions] = useState<unknown[]>([]);
+
+  const debouncedChange = useDebounce((val) => {
+    setPage(0);
+    setSearchValue(val);
+    setOptions([]);
+  }, 500);
+
+  const handleInputChange = useCallback(
+    (_, value) => {
+      setInputValue(value);
+      debouncedChange(value);
+    },
+    [debouncedChange]
+  );
+
+  const handleValueChange = useCallback(
+    (event, value) => {
+      setFieldValue(value);
+      if (onChange) {
+        onChange(event, value);
+      }
+    },
+    [setFieldValue, onChange]
+  );
+
+  useEffect(() => {
+    if (!isDirty && formValue && itemQueryFunction) {
+      let requestValue = formValue;
+
+      if (typeof formValue === 'object' && valueKey in formValue) {
+        requestValue = formValue[valueKey];
+      }
+
+      itemQueryFunction(requestValue)
+        .then((item) => {
+          setFieldValue(item);
+          setInputValue(item[labelKey]);
+        })
+        .catch();
+    }
+  }, [formValue, isDirty, valueKey, labelKey, itemQueryFunction, setFieldValue]);
+
+  const handleOnScroll = useCallback(
+    (event: React.SyntheticEvent) => {
+      const listboxNode = event.currentTarget;
+      if (
+        listboxNode.scrollHeight - listboxNode.scrollTop - listboxNode.clientHeight <= 1 &&
+        options.length < totalItems
+      ) {
+        setPage((page) => page + 1);
+      }
+    },
+    [totalItems, options]
+  );
+
+  const handleOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+    setSearchValue('');
+  };
+
+  const { data, isFetching } = useQuery(['options', page, searchValue], () => {
+    const params = qs.parse(
+      {
+        page: `${page}`,
+        size: '20',
+        sort: sortBy,
+        ...(searchValue ? { [searchBy]: searchValue } : {}),
+      },
+      { ignoreQueryPrefix: true }
+    );
+    return queryFunction(params as PaginateParams);
+  });
+
+  useEffect(() => {
+    if (data) {
+      setOptions((prevOptions) => [...prevOptions, ...data.collection]);
+      setTotalItems(data.totalItems);
+    }
+  }, [data]);
+
+  return (
+    <Autocomplete
+      fullWidth
+      disablePortal
+      size="small"
+      readOnly={disabled}
+      options={options}
+      multiple={multiple}
+      getOptionLabel={getOptionLabel}
+      isOptionEqualToValue={isOptionEqualToValue}
+      disableCloseOnSelect={disableCloseOnSelect || multiple}
+      filterSelectedOptions={multiple}
+      inputValue={inputValue}
+      value={formValue}
+      onChange={handleValueChange}
+      loading={isFetching}
+      clearOnBlur={false}
+      open={open}
+      filterOptions={(x) => x}
+      onOpen={handleOpen}
+      onClose={handleClose}
+      onInputChange={handleInputChange}
+      ListboxProps={{
+        onScroll: handleOnScroll,
+      }}
+      renderOption={renderOption}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          label={label}
+          variant="outlined"
+          error={!!error}
+          inputRef={ref}
+          helperText={!hideErrorMessage && error?.message}
+          InputProps={{
+            ...params.InputProps,
+            endAdornment: (
+              <React.Fragment>
+                {isFetching ? <CircularProgress color="inherit" size={20} /> : null}
+                {params.InputProps.endAdornment}
+              </React.Fragment>
+            ),
+          }}
+          {...textFieldProps}
+        />
+      )}
+      {...autocompleteProps}
+    />
+  );
+}
+
+export default ControlQueryAutocomplete;

package/src/lib/Forms/ControlRadio.tsx

@@ -0,0 +1,136 @@
+import Radio from '@mui/material/Radio';
+import RadioGroup from '@mui/material/RadioGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormControl from '@mui/material/FormControl';
+import FormLabel from '@mui/material/FormLabel';
+
+import { Control, useController, useWatch } from 'react-hook-form';
+import { ValidateFunc } from '../../interfaces';
+import { useCallback } from 'react';
+import FormHelperText from '@mui/material/FormHelperText';
+
+/**
+ * This interface is referencing the [[ControlRadioBtn]] component props.
+ * @category Forms
+ */
+export interface ControlRadioProps {
+  /**
+   * React Hook Form `control`
+   */
+  control: Control<any>;
+  /**
+   * React Hook Form control `name` propery
+   */
+  name: string;
+  /**
+   * Label for component
+   */
+  label?: string;
+  /**
+   * Radio group values
+   */
+  values: string[] | unknown[];
+  /**
+   * Is input required flag
+   */
+  required?: boolean;
+  /**
+   * React Hook Form `defaultValue`
+   */
+  defaultValue?: unknown;
+  /**
+   * Is disabled input flag
+   */
+  disabled?: boolean;
+  /**
+   * Hide error message flag
+   */
+  hideErrorMessage?: boolean;
+  /**
+   * Custom onChange functionƒ
+   */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  /**
+   * React Hook Form validate function
+   * ```typescript
+   * type ValidateFunc = (value: string) => boolean | string;
+   * ```
+   */
+  validate?: ValidateFunc | Record<string, ValidateFunc>;
+  /**
+   * Key for option label
+   */
+  labelKey?: string;
+  /**
+   * Key for option value
+   */
+  valueKey?: string;
+}
+
+/**
+ * Material UI `Radio` controlled component. Used with react-hook-form
+ * @category Forms
+ */
+export const ControlRadio = ({
+  name,
+  label,
+  values = [],
+  control,
+  required,
+  defaultValue,
+  disabled,
+  hideErrorMessage,
+  labelKey,
+  valueKey,
+  validate,
+  onChange: customOnChange,
+}: ControlRadioProps) => {
+  const {
+    field: { ref, onChange },
+    fieldState: { error },
+  } = useController({
+    name,
+    control,
+    defaultValue,
+    rules: {
+      required: required && 'Please, fill this field',
+      validate,
+    },
+  });
+  const value = useWatch({ control, name });
+
+  const getValue = useCallback(
+    (option) => {
+      if (typeof option === 'string') return option;
+      return valueKey ? option[valueKey] : option.value;
+    },
+    [valueKey]
+  );
+  const getLabel = useCallback(
+    (option) => {
+      if (typeof option === 'string') return option;
+      return labelKey ? option[labelKey] : option.label;
+    },
+    [labelKey]
+  );
+
+  return (
+    <FormControl disabled={disabled} error={!!error}>
+      <FormLabel id="radio-buttons-group">{label}</FormLabel>
+      <RadioGroup
+        aria-labelledby="radio-buttons-group"
+        ref={ref}
+        name={name}
+        value={value}
+        onChange={customOnChange ? customOnChange : onChange}
+      >
+        {values.map((item) => (
+          <FormControlLabel value={getValue(item)} control={<Radio />} label={getLabel(item)} />
+        ))}
+      </RadioGroup>
+      {!hideErrorMessage && error?.message && <FormHelperText>{error.message}</FormHelperText>}
+    </FormControl>
+  );
+};
+
+export default ControlRadio;

package/src/lib/Forms/ControlSelect.tsx

@@ -0,0 +1,164 @@
+import TextField, { TextFieldProps } from '@mui/material/TextField';
+import MenuItem from '@mui/material/MenuItem';
+import ClearIcon from '@mui/icons-material/Clear';
+
+import { useCallback } from 'react';
+import { useController, Control, useWatch } from 'react-hook-form';
+import { ValidateFunc } from '../../interfaces';
+import IconButton from '@mui/material/IconButton';
+import InputAdornment from '@mui/material/InputAdornment';
+
+/**
+ * This interface is referencing the [[ControlSelect]] component props.
+ * @category Forms
+ */
+export type ControlSelectProps = TextFieldProps & {
+  /**
+   * 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>) => void;
+  /**
+   * Key for option label
+   */
+  labelKey?: string;
+  /**
+   * Key for option value
+   */
+  valueKey?: string;
+  /**
+   * Select options
+   */
+  options: string[] | unknown[];
+};
+
+/**
+ * Material UI `Select` controlled component. Used with react-hook-form
+ * @category Forms
+ */
+export const ControlSelect = ({
+  control,
+  validate,
+  name = '',
+  label = '',
+  required = false,
+  defaultValue = '',
+  disabled = false,
+  hideErrorMessage = false,
+  onChange: customOnChange,
+  labelKey,
+  valueKey,
+  options = [],
+  ...textFieldProps
+}: ControlSelectProps) => {
+  const {
+    field: { ref, onChange },
+    fieldState: { error },
+  } = useController({
+    name,
+    control,
+    defaultValue,
+    rules: {
+      required: required && 'Please, fill this field',
+      validate,
+    },
+  });
+  const value = useWatch({ control, name });
+
+  const getValue = useCallback(
+    (option) => {
+      if (typeof option === 'string') return option;
+      return valueKey ? option[valueKey] : option.value;
+    },
+    [valueKey]
+  );
+  const getLabel = useCallback(
+    (option) => {
+      if (typeof option === 'string') return option;
+      return labelKey ? option[labelKey] : option.label;
+    },
+    [labelKey]
+  );
+
+  const handleClear = useCallback(() => {
+    if (customOnChange) {
+      customOnChange(null);
+    } else onChange(null);
+  }, [onChange, customOnChange]);
+
+  return (
+    <TextField
+      select
+      fullWidth
+      size="small"
+      variant="outlined"
+      type="text"
+      inputRef={ref}
+      name={name}
+      label={label}
+      error={!!error}
+      helperText={!hideErrorMessage && error?.message}
+      disabled={disabled}
+      value={value ?? ''}
+      onChange={customOnChange ? customOnChange : onChange}
+      {...textFieldProps}
+      inputProps={{
+        ...(textFieldProps?.inputProps ?? {}),
+        value: value ?? '',
+      }}
+      InputProps={{
+        endAdornment:
+          !required && value ? (
+            <InputAdornment position="end" sx={{ mr: 2 }}>
+              <IconButton onClick={handleClear} size="small">
+                <ClearIcon fontSize="small" />
+              </IconButton>
+            </InputAdornment>
+          ) : null,
+        ...textFieldProps?.InputProps,
+      }}
+    >
+      {options.map((option, index) => (
+        <MenuItem key={index} value={getValue(option)}>
+          {getLabel(option)}
+        </MenuItem>
+      ))}
+    </TextField>
+  );
+};
+
+export default ControlSelect;

package/src/lib/Forms/ControlSwitch.tsx

@@ -0,0 +1,71 @@
+import Switch, { SwitchProps } from '@mui/material/Switch';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import { Control, useController, useWatch } from 'react-hook-form';
+import { useEffect, useMemo } from 'react';
+
+type Props = SwitchProps & {
+  /**
+   * React Hook Form `control`
+   */
+  control: Control<any>;
+  /**
+   * React Hook Form control `name` propery
+   */
+  name: string;
+  /**
+   * Material-UI FormControlLabel `label` prop
+   */
+  label?: string;
+};
+
+export const ControlSwitch = ({ control, name, label, ...switchProps }: Props) => {
+  const {
+    field: { ref, onChange },
+  } = useController({ control, name });
+  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]);
+
+  useEffect(() => {
+    if (value === null) {
+      onChange(false);
+    }
+  }, [value, onChange]);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { checked } = event.target;
+    onChange(checked);
+  };
+
+  return (
+    <FormControlLabel
+      label={label}
+      name={name}
+      control={
+        <Switch
+          color="primary"
+          size="small"
+          inputRef={ref}
+          onChange={handleChange}
+          checked={checked}
+          {...switchProps}
+        />
+      }
+    />
+  );
+};
+
+export default ControlSwitch;