@gen-epix/ui 1.14.4 → 1.15.0

package/src/components/form/fields/TransferList/TransferList.tsx

@@ -0,0 +1,360 @@
+import type {
+  ChangeEvent,
+  ReactElement,
+} from 'react';
+import {
+  useCallback,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  FormControl,
+  FormHelperText,
+  Paper,
+  List,
+  ListItemButton,
+  ListItemIcon,
+  Checkbox,
+  ListItemText,
+  Button,
+  Grid,
+  Box,
+  FormLabel,
+  useTheme,
+  TextField,
+} from '@mui/material';
+import {
+  Controller,
+  useFormContext,
+} from 'react-hook-form';
+import type {
+  UseControllerReturn,
+  FieldValues,
+  Path,
+} from 'react-hook-form';
+import intersection from 'lodash/intersection';
+import { useTranslation } from 'react-i18next';
+import { useDebouncedCallback } from 'use-debounce';
+
+import type { TransferListOption } from '../../../../models/form';
+import { FormUtil } from '../../../../utils/FormUtil';
+import { TestIdUtil } from '../../../../utils/TestIdUtil';
+import { FormFieldHelperText } from '../../helpers/FormFieldHelperText';
+
+export type TransferListProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>> = {
+  readonly disabled?: boolean;
+  readonly label: string;
+  readonly name: TName;
+  readonly onChange?: (value: string) => void;
+  readonly required?: boolean;
+  readonly warningMessage?: string | boolean;
+  readonly options: TransferListOption[];
+  readonly loading?: boolean;
+  readonly height?: number;
+};
+
+export const TransferList = <TFieldValues extends FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>>({
+  disabled,
+  name,
+  options,
+  warningMessage,
+  required,
+  onChange: onChangeProp,
+  loading,
+  label,
+  height = 500,
+}: TransferListProps<TFieldValues, TName>): ReactElement => {
+  const { t } = useTranslation();
+
+  const theme = useTheme();
+  const { control, formState: { errors }, resetField } = useFormContext<TFieldValues>();
+  const errorMessage = FormUtil.getFieldErrorMessage(errors, name);
+  const id = useId();
+  const [checked, setChecked] = useState<string[]>([]);
+  const [filterValue, setFilterValue] = useState<string>();
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const hasError = !!errorMessage;
+
+  const onFilterValueChangeDebounced = useDebouncedCallback((event: ChangeEvent<HTMLInputElement>) => {
+    setFilterValue(event.target.value);
+  }, 200, { trailing: true });
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const internalOnChange = useCallback((value: string[], onChange: (...event: any[]) => void) => {
+    if (required && value === null) {
+      return;
+    }
+    if (onChangeProp) {
+      onChangeProp(value as TFieldValues[TName]);
+    }
+    onChange(value);
+  }, [onChangeProp, required]);
+
+  const mappedOptions = useMemo(() => {
+    const map: { [key: string]: TransferListOption } = {};
+    options.forEach((option) => {
+      map[option.value] = option;
+    });
+    return map;
+  }, [options]);
+
+  const renderController = useCallback(({ field: { onChange, onBlur, value, ref } }: UseControllerReturn<TFieldValues, TName>) => {
+    ref({
+      focus: () => {
+        inputRef?.current?.focus();
+      },
+    });
+    const valueItems = value as string[];
+    const left: string[] = Object.keys(mappedOptions).filter(option => !valueItems.includes(option));
+    const right: string[] = Object.keys(mappedOptions).filter(option => valueItems.includes(option));
+    const leftChecked: string[] = intersection(checked, left);
+    const rightChecked: string[] = intersection(checked, right);
+
+    const handleToggle = (item: string) => () => {
+      const currentIndex = checked.indexOf(item);
+      const newChecked = [...checked];
+      if (currentIndex === -1) {
+        newChecked.push(item);
+      } else {
+        newChecked.splice(currentIndex, 1);
+      }
+      setChecked(newChecked);
+    };
+    const onMoveAllRightButtonClick = () => {
+      setChecked([]);
+      internalOnChange(Object.keys(mappedOptions), onChange);
+    };
+    const onMoveAllLeftButtonClick = () => {
+      setChecked([]);
+      internalOnChange([], onChange);
+    };
+    const onMoveRightButtonClick = () => {
+      setChecked([]);
+      internalOnChange([...valueItems, ...leftChecked], onChange);
+    };
+    const onMoveLeftButtonClick = () => {
+      setChecked([]);
+      internalOnChange(valueItems.filter(x => !rightChecked.includes(x)), onChange);
+    };
+
+    const onResetButtonClick = () => {
+      setChecked([]);
+      resetField(name);
+    };
+
+    const customList = (items: readonly string[]) => (
+      <Paper
+        square
+        elevation={1}
+        sx={{
+          width: '100%',
+          height,
+          overflow: 'auto',
+        }}
+      >
+        <List
+          dense
+          component={'div'}
+          role={'list'}
+        >
+          {items.filter(item => {
+            if (!filterValue) {
+              return true;
+            }
+            return mappedOptions[item].label.toLowerCase().includes(filterValue.toLowerCase());
+          }).map((item) => {
+            const option = mappedOptions[item];
+            const labelId = `transfer-list-item-${option.value}-label`;
+            return (
+              <ListItemButton
+                key={option.value}
+                role={'listitem'}
+                sx={{
+                  padding: `0 0 0 ${theme.spacing(1)}`,
+                  margin: 0,
+                }}
+                disabled={disabled}
+                onClick={handleToggle(option.value)}
+              >
+                <ListItemIcon
+                  sx={{
+                    margin: 0,
+                    padding: 0,
+                    minWidth: theme.spacing(4),
+                  }}
+                >
+                  <Checkbox
+                    checked={checked.indexOf(item) !== -1}
+                    disabled={disabled}
+                    slotProps={{
+                      input: {
+                        'aria-labelledby': labelId,
+                      },
+                    }}
+                    sx={{
+                      padding: 0,
+                      margin: 0,
+                    }}
+                    tabIndex={-1}
+                  />
+                </ListItemIcon>
+                <ListItemText
+                  id={labelId}
+                  secondary={option.label}
+                />
+              </ListItemButton>
+            );
+          })}
+        </List>
+      </Paper>
+    );
+
+    return (
+      <Box
+        sx={{
+          width: '100%',
+          display: 'grid',
+          gridTemplateRows: 'auto max-content',
+          marginTop: theme.spacing(0.5),
+        }}
+        onBlur={onBlur}
+      >
+        <Box>
+          <TextField
+            fullWidth
+            label={t`Filter`}
+            size={'small'}
+            variant={'outlined'}
+            onChange={onFilterValueChangeDebounced}
+          />
+        </Box>
+        <Box
+          sx={{
+            width: '100%',
+            display: 'grid',
+            gridTemplateColumns: '4fr 1fr 4fr',
+          }}
+        >
+          <Box>
+            {customList(left)}
+          </Box>
+          <Box sx={{ height }}>
+            <Grid
+              container
+              alignItems={'center'}
+              direction={'column'}
+              sx={{ height }}
+            >
+
+              <Button
+                aria-label={t`move selected right`}
+                size={'small'}
+                sx={{ my: 0.5 }}
+                variant={'outlined'}
+                disabled={disabled || leftChecked.length === 0}
+                // eslint-disable-next-line react/jsx-no-bind
+                onClick={onMoveRightButtonClick}
+              >
+                {'>'}
+              </Button>
+              <Button
+                aria-label={t`move selected left`}
+                size={'small'}
+                sx={{ my: 0.5 }}
+                variant={'outlined'}
+                disabled={disabled || rightChecked.length === 0}
+                // eslint-disable-next-line react/jsx-no-bind
+                onClick={onMoveLeftButtonClick}
+              >
+                {'<'}
+              </Button>
+              <Button
+                aria-label={t`move all right`}
+                size={'small'}
+                sx={{ my: 0.5, mt: 2 }}
+                variant={'outlined'}
+                disabled={disabled || left.length === 0}
+                // eslint-disable-next-line react/jsx-no-bind
+                onClick={onMoveAllRightButtonClick}
+              >
+                {'≫'}
+              </Button>
+              <Button
+                aria-label={t`move all left`}
+                size={'small'}
+                sx={{ my: 0.5 }}
+                variant={'outlined'}
+                disabled={disabled || right.length === 0}
+                // eslint-disable-next-line react/jsx-no-bind
+                onClick={onMoveAllLeftButtonClick}
+              >
+                {'≪'}
+              </Button>
+              <Button
+                aria-label={t`Reset selection`}
+                size={'small'}
+                sx={{ mt: 4 }}
+                variant={'outlined'}
+                disabled={disabled || options.length === 0}
+                // eslint-disable-next-line react/jsx-no-bind
+                onClick={onResetButtonClick}
+              >
+                {t`Reset`}
+              </Button>
+              <Button
+                size={'small'}
+                sx={{ mt: 0.5 }}
+                variant={'outlined'}
+                aria-label={t`clear`}
+                disabled={disabled}
+                // eslint-disable-next-line react/jsx-no-bind
+                onClick={onMoveAllLeftButtonClick}
+              >
+                {t`Clear`}
+              </Button>
+            </Grid>
+          </Box>
+          <Box>
+            {customList(right)}
+          </Box>
+        </Box>
+      </Box>
+    );
+  }, [mappedOptions, checked, theme, t, onFilterValueChangeDebounced, height, disabled, options.length, internalOnChange, resetField, name, filterValue]);
+
+  return (
+    <FormControl
+      error={hasError}
+      {...TestIdUtil.createAttributes('ToggleButtonGroup', { name: name as string })}
+      fullWidth
+      sx={{
+        margin: `${theme.spacing(2)} 0`,
+      }}
+    >
+      <FormLabel
+        component={'legend'}
+        disabled={disabled || loading}
+        id={id}
+        required={required}
+      >
+        {label}
+      </FormLabel>
+      <Controller
+        control={control}
+        defaultValue={null}
+        name={name}
+        render={renderController}
+      />
+      <FormHelperText sx={{ ml: 0 }}>
+        <FormFieldHelperText
+          noIndent
+          errorMessage={errorMessage}
+          warningMessage={warningMessage}
+        />
+      </FormHelperText>
+    </FormControl>
+  );
+};

package/src/components/form/fields/TransferList/index.ts

@@ -0,0 +1 @@
+export * from './TransferList';

package/src/components/form/fields/UploadButton/UploadButton.tsx

@@ -0,0 +1,157 @@
+import type {
+  ChangeEvent,
+  ReactElement,
+} from 'react';
+import {
+  useCallback,
+  useId,
+  useRef,
+} from 'react';
+import {
+  FormControl,
+  FormLabel,
+  FormHelperText,
+  Button,
+  styled,
+  Box,
+} from '@mui/material';
+import {
+  Controller,
+  useFormContext,
+} from 'react-hook-form';
+import type {
+  UseControllerReturn,
+  FieldValues,
+  Path,
+  ControllerRenderProps,
+} from 'react-hook-form';
+import CloudUploadIcon from '@mui/icons-material/CloudUpload';
+import { useTranslation } from 'react-i18next';
+
+import { FormUtil } from '../../../../utils/FormUtil';
+import { TestIdUtil } from '../../../../utils/TestIdUtil';
+import { FormFieldHelperText } from '../../helpers/FormFieldHelperText';
+import { WindowManager } from '../../../../classes/managers/WindowManager';
+
+export type UploadButtonProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>> = {
+  readonly disabled?: boolean;
+  readonly label: string;
+  readonly name: TName;
+  readonly onChange?: (value: FileList) => void;
+  readonly required?: boolean;
+  readonly warningMessage?: string | boolean;
+  readonly multiple?: boolean;
+  readonly accept: string;
+  readonly loading?: boolean; // NOT implemented
+};
+
+const VisuallyHiddenInput = styled('input')({
+  clip: 'rect(0 0 0 0)',
+  clipPath: 'inset(50%)',
+  height: 1,
+  overflow: 'hidden',
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
+  whiteSpace: 'nowrap',
+  width: 1,
+});
+
+export const UploadButton = <TFieldValues extends FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>>({
+  disabled,
+  label,
+  name,
+  required,
+  warningMessage,
+  multiple = false,
+  accept,
+  onChange: onChangeProp,
+}: UploadButtonProps<TFieldValues, TName>): ReactElement => {
+  const { t } = useTranslation();
+  const id = useId();
+  const inputId = useId();
+  const { control, formState: { errors } } = useFormContext<TFieldValues>();
+  const errorMessage = FormUtil.getFieldErrorMessage(errors, name);
+
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const hasError = !!errorMessage;
+
+  const onInputChange = useCallback((onChange: ControllerRenderProps<TFieldValues, TName>['onChange']) =>
+    (event: ChangeEvent<HTMLInputElement>) => {
+      if (onChangeProp) {
+        onChangeProp(event.target.files as TFieldValues[TName]);
+      }
+      onChange(event.target.files);
+    }
+  , [onChangeProp]);
+
+  const renderController = useCallback(({ field: { onChange, onBlur, value, ref } }: UseControllerReturn<TFieldValues, TName>) => {
+    ref({
+      focus: () => {
+        buttonRef?.current?.focus();
+      },
+    });
+    const inputElement = WindowManager.instance.document.getElementById(inputId) as HTMLInputElement | null;
+    if (!value && inputElement) {
+      inputElement.value = '';
+    }
+    return (
+      <>
+        <Button
+          component={'label'}
+          size={'large'}
+          // ref={buttonRef}
+          disabled={disabled}
+          role={undefined}
+          variant={'outlined'}
+          tabIndex={-1}
+          startIcon={<CloudUploadIcon />}
+          onBlur={onBlur}
+        >
+          {multiple ? t('Upload files ({{accept}})', { accept: accept.split(',').join(', ') }) : t('Upload file ({{accept}})', { accept: accept.split(',').join(', ') })}
+          <VisuallyHiddenInput
+            id={inputId}
+            accept={accept}
+            multiple={multiple}
+            type={'file'}
+            onChange={onInputChange(onChange)}
+          />
+        </Button>
+        {value && (
+          <Box>
+            {Array.from(value as unknown as FileList).map((file) => file.name).join(', ')}
+          </Box>
+        )}
+      </>
+    );
+  }, [accept, disabled, inputId, multiple, onInputChange, t]);
+
+  return (
+    <FormControl
+      error={hasError}
+      {...TestIdUtil.createAttributes('UploadButton', { label, name: name as string })}
+      fullWidth
+    >
+      <FormLabel
+        component={'legend'}
+        id={id}
+        required={required}
+      >
+        {label}
+      </FormLabel>
+      <Controller
+        control={control}
+        defaultValue={null}
+        name={name}
+        render={renderController}
+      />
+      <FormHelperText sx={{ ml: 0 }}>
+        <FormFieldHelperText
+          noIndent
+          errorMessage={errorMessage}
+          warningMessage={warningMessage}
+        />
+      </FormHelperText>
+    </FormControl>
+  );
+};

package/src/components/form/helpers/FormFieldHelperText/FormFieldHelperText.tsx

@@ -0,0 +1,68 @@
+import type {
+  SxProps,
+  Theme,
+} from '@mui/material';
+import {
+  FormHelperText,
+  Box,
+  useTheme,
+} from '@mui/material';
+import ErrorIcon from '@mui/icons-material/Error';
+import WarningIcon from '@mui/icons-material/WarningAmber';
+import type { ReactElement } from 'react';
+
+import { TestIdUtil } from '../../../../utils/TestIdUtil';
+
+export type FormFieldHelperTextProps = {
+  readonly errorMessage?: string;
+  readonly warningMessage?: string | boolean;
+  readonly noIndent?: boolean;
+};
+
+const iconStyle: SxProps<Theme> = {
+  width: '13px',
+  height: '13px',
+  top: '3px',
+  position: 'relative',
+  marginRight: '1px',
+};
+
+export const FormFieldHelperText = ({ errorMessage, warningMessage, noIndent }: FormFieldHelperTextProps): ReactElement => {
+  const testIdAttributes = TestIdUtil.createAttributes('FormFieldHelperText');
+  const theme = useTheme();
+
+  if (errorMessage) {
+    return (
+      <FormHelperText
+        {...testIdAttributes}
+        error
+        role={'alert'}
+        component={'span'}
+        sx={{
+          marginLeft: noIndent ? 0 : theme.spacing(-2),
+          position: 'relative',
+        }}
+      >
+        <ErrorIcon sx={iconStyle} />
+        {errorMessage}
+      </FormHelperText>
+    );
+  } else if (warningMessage) {
+    return (
+      <Box
+        {...testIdAttributes}
+        className={'Mui-warning'}
+        role={'alert'}
+        component={'span'}
+        sx={{
+          marginLeft: noIndent ? 0 : theme.spacing(-2),
+          position: 'relative',
+        }}
+      >
+        <WarningIcon sx={iconStyle} />
+        {warningMessage}
+      </Box>
+    );
+  }
+  return null;
+};

package/src/components/form/helpers/FormFieldHelperText/index.ts

@@ -0,0 +1 @@
+export * from './FormFieldHelperText';

package/src/components/form/helpers/FormFieldLoadingIndicator/FormFieldLoadingIndicator.tsx

@@ -0,0 +1,22 @@
+import {
+  LinearProgress,
+  useTheme,
+} from '@mui/material';
+
+export type FormFieldLoadingIndicatorProps = {
+  readonly inline?: boolean;
+};
+
+export const FormFieldLoadingIndicator = ({ inline }: FormFieldLoadingIndicatorProps) => {
+  const theme = useTheme();
+  return (
+    <LinearProgress
+      sx={{
+        height: '1px',
+        position: inline ? undefined : 'absolute',
+        top: inline ? theme.spacing(1) : '47px',
+        width: '100%',
+      }}
+    />
+  );
+};

package/src/components/form/helpers/FormFieldLoadingIndicator/index.ts

@@ -0,0 +1 @@
+export * from './FormFieldLoadingIndicator';