@centreon/ui 24.11.14 → 24.11.21

package/src/Form/Inputs/Radio.tsx

@@ -1,17 +1,17 @@
 import { FormikValues, useFormikContext } from 'formik';
-import { equals, includes, path, split } from 'ramda';
+import { path, equals, includes, split, type } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
 import {
   FormControlLabel,
   FormGroup,
   FormLabel,
-  RadioGroup,
-  Radio as MUIRadio
+  Radio as MUIRadio,
+  RadioGroup
 } from '@mui/material';
 
 import { useMemoComponent } from '../..';
-import getNormalizedId from '../../utils/getNormalizedId';
+import { getNormalizedId } from '../../utils';
 
 import { InputPropsWithoutGroup } from './models';
 
@@ -26,12 +26,20 @@ const Radio = ({
 }: InputPropsWithoutGroup): JSX.Element => {
   const { t } = useTranslation();
 
-  const { values, setFieldValue } = useFormikContext<FormikValues>();
+  const { values, setFieldValue, setFieldTouched, setValues, setTouched } =
+    useFormikContext<FormikValues>();
 
   const changeRadio = (_, value): void => {
     if (includes(value, ['true', 'false'])) {
       if (change) {
-        change({ setFieldValue, value: equals(value, 'true') });
+        change({
+          setFieldValue,
+          value: equals(value, 'true'),
+          values,
+          setFieldTouched,
+          setValues,
+          setTouched
+        });
 
         return;
       }
@@ -42,7 +50,7 @@ const Radio = ({
     }
 
     if (change) {
-      change({ setFieldValue, value });
+      change({ setFieldValue, value, values, setFieldTouched, setValues });
 
       return;
     }
@@ -73,12 +81,23 @@ const Radio = ({
                   disabled={disabled}
                   id={getNormalizedId(`${dataTestId}${optionLabel}`)}
                   inputProps={{
-                    'aria-label': t(optionLabel) || ''
+                    'aria-label':
+                      (equals(type(optionLabel), 'String') &&
+                        t(optionLabel as string)) ||
+                      ''
                   }}
                 />
               }
-              key={optionLabel}
-              label={t(optionLabel) as string}
+              key={
+                equals(type(optionLabel), 'String')
+                  ? (optionLabel as string)
+                  : `${optionValue}`
+              }
+              label={
+                equals(type(optionLabel), 'String')
+                  ? (t(optionLabel as string) as string)
+                  : optionLabel
+              }
               value={optionValue}
             />
           ))}

package/src/Form/Inputs/Switch.tsx

@@ -6,8 +6,8 @@ import { useTranslation } from 'react-i18next';
 
 import { FormControlLabel, Switch as MUISwitch } from '@mui/material';
 
-import getNormalizedId from '../../utils/getNormalizedId';
 import { useMemoComponent } from '../..';
+import { getNormalizedId } from '../../utils/getNormalizedId';
 
 import { InputPropsWithoutGroup } from './models';
 
@@ -22,11 +22,19 @@ const Switch = ({
 }: InputPropsWithoutGroup): JSX.Element => {
   const { t } = useTranslation();
 
-  const { values, setFieldValue } = useFormikContext<FormikValues>();
+  const { values, setFieldValue, setFieldTouched, setValues, setTouched } =
+    useFormikContext<FormikValues>();
 
   const changeSwitchValue = (event: ChangeEvent<HTMLInputElement>): void => {
     if (change) {
-      change({ setFieldValue, value: event.target.checked });
+      change({
+        setFieldValue,
+        value: event.target.checked,
+        values,
+        setFieldTouched,
+        setValues,
+        setTouched
+      });
 
       return;
     }
@@ -59,7 +67,7 @@ const Switch = ({
         label={t(label) as string}
       />
     ),
-    memoProps: [value, disabled, additionalMemoProps]
+    memoProps: [value, disabled, additionalMemoProps, values]
   });
 };
 

package/src/Form/Inputs/Text.tsx

@@ -1,16 +1,18 @@
 import { ChangeEvent, useCallback, useState } from 'react';
 
-import { useTranslation } from 'react-i18next';
-import { useFormikContext, FormikValues } from 'formik';
+import { FormikValues, useFormikContext } from 'formik';
 import {
+  path,
   equals,
   gt,
   isEmpty,
   not,
-  path,
   split,
   type as variableType
 } from 'ramda';
+import { useTranslation } from 'react-i18next';
+
+import { InputAdornment } from '@mui/material';
 
 import { TextField, useMemoComponent } from '../..';
 
@@ -27,28 +29,44 @@ const Text = ({
   getRequired,
   change,
   additionalMemoProps,
-  text
+  text,
+  autoFocus
 }: InputPropsWithoutGroup): JSX.Element => {
   const { t } = useTranslation();
 
   const [isVisible, setIsVisible] = useState(false);
 
-  const { values, setFieldValue, touched, errors, handleBlur } =
-    useFormikContext<FormikValues>();
+  const {
+    values,
+    setFieldValue,
+    touched,
+    errors,
+    handleBlur,
+    setFieldTouched,
+    setValues,
+    setTouched
+  } = useFormikContext<FormikValues>();
 
   const fieldNamePath = split('.', fieldName);
 
   const changeText = (event: ChangeEvent<HTMLInputElement>): void => {
     const { value } = event.target;
     if (change) {
-      change({ setFieldValue, value });
+      change({
+        setFieldValue,
+        value,
+        setFieldTouched,
+        setValues,
+        values,
+        setTouched
+      });
 
       return;
     }
 
     const formattedValue =
       equals(text?.type, 'number') && !isEmpty(value)
-        ? parseInt(value, 10)
+        ? Number.parseInt(value, 10)
         : value;
 
     setFieldValue(fieldName, formattedValue);
@@ -64,16 +82,24 @@ const Text = ({
     ? path(fieldNamePath, errors)
     : undefined;
 
-  const passwordEndAdornment = useCallback(
-    (): JSX.Element | null =>
-      equals(type, InputType.Password) ? (
+  const EndAdornment = useCallback((): JSX.Element | null => {
+    if (equals(type, InputType.Password)) {
+      return (
         <PasswordEndAdornment
           changeVisibility={changeVisibility}
           isVisible={isVisible}
         />
-      ) : null,
-    [isVisible]
-  );
+      );
+    }
+
+    if (text?.endAdornment) {
+      return (
+        <InputAdornment position="end">{text?.endAdornment}</InputAdornment>
+      );
+    }
+
+    return null;
+  }, [isVisible]);
 
   const getInputType = (): string => {
     if (text?.type) {
@@ -96,20 +122,27 @@ const Text = ({
   return useMemoComponent({
     Component: (
       <TextField
-        fullWidth
-        EndAdornment={passwordEndAdornment}
+        fullWidth={text?.fullWidth ?? true}
+        EndAdornment={EndAdornment}
         ariaLabel={t(label) || ''}
-        dataTestId={dataTestId || ''}
+        autoFocus={autoFocus}
+        dataTestId={dataTestId || label}
         disabled={disabled}
         error={error as string | undefined}
         label={t(label)}
         multiline={isMultiline}
+        placeholder={text?.placeholder}
         required={isRequired}
         rows={rows}
         type={getInputType()}
         value={value || ''}
         onBlur={handleBlur(fieldName)}
         onChange={changeText}
+        inputProps={{
+          'data-testid': dataTestId || label,
+          'aria-label': label,
+          min: text?.min
+        }}
       />
     ),
     memoProps: [

package/src/Form/Inputs/index.tsx

@@ -1,67 +1,86 @@
 import { Fragment, useMemo } from 'react';
 
-import * as R from 'ramda';
-import { useTranslation } from 'react-i18next';
-import { makeStyles } from 'tss-react/mui';
 import { FormikValues, useFormikContext } from 'formik';
+import { makeStyles } from 'tss-react/mui';
 
 import { Divider, Typography } from '@mui/material';
 
-import CollapsibleGroup from '../CollapsibleGroup';
 import { GroupDirection } from '..';
+import CollapsibleGroup from '../CollapsibleGroup';
 
-import { Group, InputProps, InputPropsWithoutGroup, InputType } from './models';
+import {
+  T,
+  always,
+  any,
+  ascend,
+  cond,
+  equals,
+  filter,
+  find,
+  groupBy,
+  isEmpty,
+  isNil,
+  keys,
+  last,
+  not,
+  pluck,
+  prop,
+  propEq,
+  reduce,
+  sort,
+  toPairs
+} from 'ramda';
 import Autocomplete from './Autocomplete';
-import SwitchInput from './Switch';
-import RadioInput from './Radio';
-import TextInput from './Text';
+import Checkbox from './Checkbox';
+import CheckboxGroup from './CheckboxGroup';
 import ConnectedAutocomplete from './ConnectedAutocomplete';
+import Custom from './Custom';
 import FieldsTable from './FieldsTable/FieldsTable';
+import File from './File';
 import Grid from './Grid';
-import Custom from './Custom';
+import List from './List/List';
 import LoadingSkeleton from './LoadingSkeleton';
+import RadioInput from './Radio';
+import SwitchInput from './Switch';
+import TextInput from './Text';
+import { Group, InputProps, InputPropsWithoutGroup, InputType } from './models';
 
-export const getInput = R.cond<
+export const getInput = cond<
   Array<InputType>,
   (props: InputPropsWithoutGroup) => JSX.Element | null
 >([
+  [equals(InputType.Switch) as (b: InputType) => boolean, always(SwitchInput)],
+  [equals(InputType.Radio) as (b: InputType) => boolean, always(RadioInput)],
   [
-    R.equals(InputType.Switch) as (b: InputType) => boolean,
-    R.always(SwitchInput)
+    equals(InputType.SingleAutocomplete) as (b: InputType) => boolean,
+    always(Autocomplete)
   ],
   [
-    R.equals(InputType.Radio) as (b: InputType) => boolean,
-    R.always(RadioInput)
+    equals(InputType.MultiAutocomplete) as (b: InputType) => boolean,
+    always(Autocomplete)
   ],
-  [R.equals(InputType.Text) as (b: InputType) => boolean, R.always(TextInput)],
   [
-    R.equals(InputType.SingleAutocomplete) as (b: InputType) => boolean,
-    R.always(Autocomplete)
+    equals(InputType.MultiConnectedAutocomplete) as (b: InputType) => boolean,
+    always(ConnectedAutocomplete)
   ],
   [
-    R.equals(InputType.MultiAutocomplete) as (b: InputType) => boolean,
-    R.always(Autocomplete)
+    equals(InputType.SingleConnectedAutocomplete) as (b: InputType) => boolean,
+    always(ConnectedAutocomplete)
   ],
   [
-    R.equals(InputType.Password) as (b: InputType) => boolean,
-    R.always(TextInput)
+    equals(InputType.FieldsTable) as (b: InputType) => boolean,
+    always(FieldsTable)
   ],
+  [equals(InputType.Grid) as (b: InputType) => boolean, always(Grid)],
+  [equals(InputType.Custom) as (b: InputType) => boolean, always(Custom)],
+  [equals(InputType.Checkbox) as (b: InputType) => boolean, always(Checkbox)],
   [
-    R.equals(InputType.MultiConnectedAutocomplete) as (b: InputType) => boolean,
-    R.always(ConnectedAutocomplete)
+    equals(InputType.CheckboxGroup) as (b: InputType) => boolean,
+    always(CheckboxGroup)
   ],
-  [
-    R.equals(InputType.SingleConnectedAutocomplete) as (
-      b: InputType
-    ) => boolean,
-    R.always(ConnectedAutocomplete)
-  ],
-  [
-    R.equals(InputType.FieldsTable) as (b: InputType) => boolean,
-    R.always(FieldsTable)
-  ],
-  [R.equals(InputType.Grid) as (b: InputType) => boolean, R.always(Grid)],
-  [R.equals(InputType.Custom) as (b: InputType) => boolean, R.always(Custom)]
+  [equals(InputType.List) as (b: InputType) => boolean, always(List)],
+  [equals(InputType.File) as (b: InputType) => boolean, always(File)],
+  [T, always(TextInput)]
 ]);
 
 interface StylesProps {
@@ -79,28 +98,33 @@ const useStyles = makeStyles<StylesProps>()((theme, { groupDirection }) => ({
     justifyContent: 'flex-end'
   },
   divider: {
-    margin: R.equals(groupDirection, GroupDirection.Horizontal)
+    margin: equals(groupDirection, GroupDirection.Horizontal)
       ? theme.spacing(0, 2)
       : theme.spacing(2, 0)
   },
   groups: {
     display: 'flex',
-    flexDirection: R.equals(groupDirection, GroupDirection.Horizontal)
+    flexDirection: equals(groupDirection, GroupDirection.Horizontal)
       ? 'row'
       : 'column'
   },
-  inputWrapper: { width: '100%' },
+  inputWrapper: {
+    width: '100%'
+  },
   inputs: {
     display: 'flex',
     flexDirection: 'column',
     marginTop: theme.spacing(1),
-    rowGap: theme.spacing(2)
+    rowGap: theme.spacing(2),
+    marginBottom: theme.spacing(1)
   }
 }));
 
 interface Props {
+  areGroupsOpen?: boolean;
   groupDirection?: GroupDirection;
   groups?: Array<Group>;
+  groupsClassName?: string;
   inputs: Array<InputProps>;
   isCollapsible: boolean;
   isLoading?: boolean;
@@ -111,15 +135,16 @@ const Inputs = ({
   groups = [],
   isLoading = false,
   isCollapsible,
-  groupDirection
+  groupDirection,
+  groupsClassName,
+  areGroupsOpen
 }: Props): JSX.Element => {
-  const { classes } = useStyles({ groupDirection });
-  const { t } = useTranslation();
+  const { classes, cx } = useStyles({ groupDirection });
   const formikContext = useFormikContext<FormikValues>();
 
-  const groupsName = R.pluck('name', groups);
+  const groupsName = pluck('name', groups);
 
-  const visibleInputs = R.filter(
+  const visibleInputs = filter(
     ({ hideInput }) =>
       formikContext ? !hideInput?.(formikContext?.values) || false : true,
     inputs
@@ -127,30 +152,30 @@ const Inputs = ({
 
   const inputsByGroup = useMemo(
     () =>
-      R.groupBy(
-        ({ group }) => R.find(R.equals(group), groupsName) as string,
+      groupBy(
+        ({ group }) => find(equals(group), groupsName) as string,
         visibleInputs
       ),
     [visibleInputs]
   ) as Record<string, Array<InputProps>>;
 
   const sortedGroupNames = useMemo(() => {
-    const sortedGroups = R.sort(R.ascend(R.prop('order')), groups);
+    const sortedGroups = sort(ascend(prop('order')), groups);
 
-    const usedGroups = R.filter(
-      ({ name }) => R.any(R.equals(name), R.keys(inputsByGroup)),
+    const usedGroups = filter(
+      ({ name }) => any(equals(name), keys(inputsByGroup)),
       sortedGroups
     );
 
-    return R.pluck('name', usedGroups);
-  }, []);
+    return pluck('name', usedGroups);
+  }, [inputsByGroup, groups]);
 
   const sortedInputsByGroup = useMemo(
     () =>
-      R.reduce<string, Record<string, Array<InputProps>>>(
+      reduce<string, Record<string, Array<InputProps>>>(
         (acc, value) => ({
           ...acc,
-          [value]: R.sort(
+          [value]: sort(
             (a, b) => (b?.required ? 1 : 0) - (a?.required ? 1 : 0),
             inputsByGroup[value]
           )
@@ -161,29 +186,30 @@ const Inputs = ({
     [visibleInputs]
   );
 
-  const lastGroup = useMemo(() => R.last(sortedGroupNames), []);
+  const lastGroup = useMemo(() => last(sortedGroupNames), []);
 
   const normalizedInputsByGroup = (
-    R.isEmpty(sortedInputsByGroup)
+    isEmpty(sortedInputsByGroup)
       ? [[null, visibleInputs]]
-      : R.toPairs(sortedInputsByGroup)
+      : toPairs(sortedInputsByGroup)
   ) as Array<[string | null, Array<InputProps>]>;
 
   return (
     <div className={classes.groups}>
       {normalizedInputsByGroup.map(([groupName, groupedInputs], index) => {
-        const hasGroupTitle = R.not(R.isNil(groupName));
+        const hasGroupTitle = not(isNil(groupName));
 
         const groupProps = hasGroupTitle
-          ? R.find(R.propEq('name', groupName), groups)
+          ? find(propEq(groupName, 'name'), groups)
           : ({} as Group);
 
-        const isFirstElement = R.equals(index, 0);
+        const isFirstElement = areGroupsOpen || equals(index, 0);
 
         return (
           <Fragment key={groupName}>
             <div>
               <CollapsibleGroup
+                className={groupsClassName}
                 defaultIsOpen={isFirstElement}
                 group={groupProps}
                 hasGroupTitle={hasGroupTitle}
@@ -209,31 +235,35 @@ const Inputs = ({
                       >
                         {inputProps.additionalLabel && (
                           <Typography
-                            className={classes.additionalLabel}
+                            className={cx(
+                              classes.additionalLabel,
+                              inputProps?.additionalLabelClassName
+                            )}
                             variant="body1"
                           >
-                            {t(inputProps.additionalLabel)}
+                            {inputProps.additionalLabel}
                           </Typography>
                         )}
-                        <Input {...inputProps} />
+                        <div className={inputProps?.inputClassName || ''}>
+                          <Input {...inputProps} />
+                        </div>
                       </div>
                     );
                   })}
                 </div>
               </CollapsibleGroup>
             </div>
-            {hasGroupTitle &&
-              R.not(R.equals(lastGroup, groupName as string)) && (
-                <Divider
-                  flexItem
-                  className={classes.divider}
-                  orientation={
-                    R.equals(groupDirection, GroupDirection.Horizontal)
-                      ? 'vertical'
-                      : 'horizontal'
-                  }
-                />
-              )}
+            {hasGroupTitle && not(equals(lastGroup, groupName as string)) && (
+              <Divider
+                flexItem
+                className={classes.divider}
+                orientation={
+                  equals(groupDirection, GroupDirection.Horizontal)
+                    ? 'vertical'
+                    : 'horizontal'
+                }
+              />
+            )}
           </Fragment>
         );
       })}

package/src/Form/Inputs/models.ts

@@ -1,22 +1,26 @@
 import { FormikValues } from 'formik';
 
-import { SvgIconProps } from '@mui/material';
+import { SvgIconProps, TypographyProps } from '@mui/material';
 
 import { SelectEntry } from '../../InputField/Select';
 import { ConditionsSearchParameter } from '../../api/buildListingEndpoint/models';
 
 export enum InputType {
-  Switch,
-  Radio,
-  Text,
-  SingleAutocomplete,
-  MultiAutocomplete,
-  Password,
-  SingleConnectedAutocomplete,
-  MultiConnectedAutocomplete,
-  FieldsTable,
-  Grid,
-  Custom
+  Switch = 0,
+  Radio = 1,
+  Text = 2,
+  SingleAutocomplete = 3,
+  MultiAutocomplete = 4,
+  Password = 5,
+  SingleConnectedAutocomplete = 6,
+  MultiConnectedAutocomplete = 7,
+  FieldsTable = 8,
+  Grid = 9,
+  Custom = 10,
+  Checkbox = 11,
+  CheckboxGroup = 12,
+  List = 13,
+  File = 14
 }
 
 interface FieldsTableGetRequiredProps {
@@ -24,24 +28,49 @@ interface FieldsTableGetRequiredProps {
   values: FormikValues;
 }
 
+export type LabelPlacement = 'bottom' | 'top' | 'end' | 'start' | undefined;
+
 export interface InputProps {
-  additionalLabel?: string;
+  additionalLabel?: string | JSX.Element;
+  additionalLabelClassName?: string;
   additionalMemoProps?: Array<unknown>;
+  autoFocus?: boolean;
   autocomplete?: {
     creatable?: boolean;
     options: Array<SelectEntry>;
+    fullWidth?: boolean;
+  };
+  change?: ({
+    setFieldValue,
+    value,
+    setFieldTouched,
+    setValues,
+    values,
+    setTouched
+  }) => void;
+  checkbox?: {
+    direction?: 'horizontal' | 'vertical';
+    labelPlacement?: LabelPlacement;
+    options?: Array<string>;
   };
-  change?: ({ setFieldValue, value }) => void;
   connectedAutocomplete?: {
     additionalConditionParameters: Array<ConditionsSearchParameter>;
+    chipColor?: string;
     endpoint?: string;
     filterKey?: string;
     getRenderedOptionText?: (option) => string | JSX.Element;
   };
+  file?: {
+    multiple?: boolean;
+    accept?: string;
+    maxFileSize?: number;
+    CustomDropZoneContent: ({ files }) => JSX.Element;
+  };
   custom?: {
     Component: React.ComponentType<InputPropsWithoutGroup>;
   };
   dataTestId?: string;
+  disableSortedOptions?: boolean;
   fieldName: string;
   fieldsTable?: {
     additionalFieldsToMemoize?: Array<string>;
@@ -57,15 +86,24 @@ export interface InputProps {
   getRequired?: (values: FormikValues) => boolean;
   grid?: {
     alignItems?: string;
+    className?: string;
     columns: Array<Omit<InputProps, 'group'>>;
     gridTemplateColumns?: string;
   };
   group: string;
   hideInput?: (values: FormikValues) => boolean;
+  inputClassName?: string;
   label: string;
+  list?: {
+    AddItem: React.ComponentType<{ addItem }>;
+    SortContent: React.ComponentType<object>;
+    addItemLabel?: string;
+    itemProps: Array<string>;
+    sortLabel?: string;
+  };
   radio?: {
     options?: Array<{
-      label: string;
+      label: string | JSX.Element;
       value: boolean | string;
     }>;
     row?: boolean;
@@ -75,8 +113,12 @@ export interface InputProps {
     getChecked?: (value) => boolean;
   };
   text?: {
+    endAdornment?: JSX.Element;
     multilineRows?: number;
+    placeholder?: string;
     type?: string;
+    min?: number;
+    fullWidth?: boolean;
   };
   type: InputType;
 }
@@ -90,4 +132,5 @@ export interface Group {
   TooltipContent?: () => JSX.Element;
   name: string;
   order: number;
+  titleAttributes?: TypographyProps;
 }