Evol/drawer

templates/admin/assets/scss/_material-override.scss

@@ -1,7 +1,7 @@
 @use "variables" as *;
 @use "mixins" as *;
 
-.app {
+.app, .MuiModal-root {
 
   /* BUTTONS */
   .MuiButton-root {

templates/admin/assets/scss/components/_drawers.scss

@@ -0,0 +1,85 @@
+@use 'assets/scss/variables' as *;
+
+.drawer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  &--20 {
+    .MuiDrawer-paper {
+      width: 20%;
+    }
+  }
+
+  &--40 {
+    .MuiDrawer-paper {
+      width: 40%;
+    }
+  }
+
+  &--50 {
+    .MuiDrawer-paper {
+      width: 50%;
+    }
+  }
+
+  &--60 {
+    .MuiDrawer-paper {
+      width: 60%;
+    }
+  }
+
+  &--80 {
+    .MuiDrawer-paper {
+      width: 80%;
+    }
+  }
+
+  &--80, &--full {
+    .MuiDrawer-paper {
+      width: 100%;
+    }
+  }
+}
+
+.drawer-header {
+  height: 6%;
+  display: flex;
+  padding: $spacer-6 + $spacer-2;
+  position: relative;
+  justify-content: center;
+  background: rgba($secondary-color, 10%);
+
+  button {
+    position: absolute;
+    top: 50%;
+    left: $spacer-5;
+    transform: translateY(-50%);
+
+    span {
+      margin-right: $spacer-3;
+    }
+  }
+
+  .drawer-title-container {
+    position: absolute;
+    height: 100%;
+    top: 50%;
+    left: 40%;
+    display: flex;
+    align-items: center;
+    transform: translateY(-50%);
+
+    h1 {
+      color: $secondary-color;
+      font-size: $font-size-large;
+      text-align: center;
+    }
+  }
+}
+
+.drawer-content {
+  height: 100%;
+  overflow: auto;
+  padding: $spacer-6 $spacer-8;
+}

templates/admin/assets/scss/components/_index.scss

@@ -4,3 +4,4 @@
 @forward 'sort-menu';
 @forward 'filter-menu';
 @forward 'search-bar';
+@forward 'drawers';

templates/admin/assets/scss/components/_popin.scss

@@ -12,11 +12,22 @@
   align-items: center;
 
   .popin-container {
-    background-color: #ffffff;
-    box-shadow: 0 3px 5px 1px rgba(#000000, .25);
+    background-color: #fff;
+    box-shadow: 0 3px 5px 1px rgba(#000, .25);
     border-radius: $border-radius-3;
     padding: $spacer-6;
+    max-width: 600px;
     max-height: 100%;
     overflow: auto;
+
+    .popin-title {
+      color: $secondary-color;
+      font-size: $font-size-large;
+    }
+
+    .popin-message {
+      margin: $spacer-6 0;
+      white-space: pre-wrap;
+    }
   }
 }

templates/admin/assets/scss/layouts/_index.scss

@@ -2,4 +2,4 @@
 @forward 'layout';
 @forward 'navigation';
 @forward 'columns';
-@forward 'lists';
+@forward 'lists';

templates/admin/assets/scss/modules/_variables.module.scss

@@ -0,0 +1,9 @@
+@use "../variables" as *;
+
+:export{
+  widthSmallScreen: $width-small-screen-px;
+  widthMediumScreen: $width-medium-screen-px;
+
+  primaryColor: $primary-color;
+  secondaryColor: $secondary-color;
+}

templates/admin/src/components/theme/AdminTheme.ts

@@ -3,6 +3,9 @@ import {
   ActionContainerProps,
   ActionLinkProps,
 } from '../../lib/plume-admin-theme/action/ActionProps';
+import {
+  DrawerTypeProps, UncontrolledDrawerTypeProps,
+} from '../../lib/plume-admin-theme/drawer/DrawerProps';
 import {
   FormFieldProps,
 } from '../../lib/plume-admin-theme/form/FormFieldProps';
@@ -34,6 +37,8 @@ import {
   PopinProps,
 } from '../../lib/plume-admin-theme/popin/PopinProps';
 import { ActionButton, ActionLink, ActionsContainer } from './action/Actions';
+import Drawer from './drawer/Drawer';
+import UncontrolledDrawer from './drawer/UncontrolledDrawer';
 import InputSelect from './form/fields/InputSelect';
 import InputText from './form/fields/InputText';
 import FormField from './form/FormField';
@@ -89,6 +94,10 @@ export default class AdminTheme implements PlumeAdminTheme {
 
   popinCloseWithoutSaving: (props: PopinCloseWithoutSavingProps) => JSX.Element | null = PopinCloseWithoutSaving;
 
+  drawer: (props: DrawerTypeProps) => JSX.Element = Drawer;
+
+  uncontrolledDrawer: (props: UncontrolledDrawerTypeProps) => JSX.Element = UncontrolledDrawer;
+
   formField: (props: FormFieldProps) => JSX.Element = FormField;
 
   inputText: (props: InputTextProps) => JSX.Element = InputText;

templates/admin/src/components/theme/drawer/Drawer.tsx

@@ -0,0 +1,64 @@
+import { Drawer as MaterialDrawer, Icon } from '@mui/material';
+import React from 'react';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import cssVariables from '../../../../assets/scss/modules/_variables.module.scss';
+import useMessages from '../../../i18n/hooks/messagesHook';
+import ActionStyle from '../../../lib/plume-admin-theme/action/ActionStyle';
+import {
+  DrawerTypeProps,
+} from '../../../lib/plume-admin-theme/drawer/DrawerProps';
+import { ActionButton } from '../action/Actions';
+
+export default function Drawer(
+  {
+    title, children, open, close, size, fullScreen, sizedByWidth, className,
+  }: DrawerTypeProps) {
+  const { messages } = useMessages();
+  const { widthSmallScreen, widthMediumScreen } = cssVariables;
+
+  // Returns width percentage of drawer
+  const drawerSize = () => {
+    const defaultSize: number = 40;
+    const largeSize: number = 60;
+    if (sizedByWidth) {
+      const width: number = window.innerWidth;
+      if (width < widthSmallScreen) {
+        return 'full';
+      }
+
+      return width < widthMediumScreen ? largeSize : defaultSize;
+    }
+
+    return size || defaultSize;
+  };
+
+  return (
+    <MaterialDrawer
+      anchor="right"
+      open={open}
+      onClose={close}
+      className={`drawer${className || ''} ${fullScreen ? ' drawer--full-screen' : ''} drawer--${drawerSize()}`}
+    >
+      <div className={`drawer ${fullScreen ? 'drawer--full' : ''}`}>
+        <div className="drawer-header">
+          <div className="drawer-button-container">
+            <ActionButton
+              onClick={close}
+              style={ActionStyle.SECONDARY}
+              cssClasses={ActionStyle.SECONDARY}
+            >
+              <Icon>chevron_left</Icon>
+              {messages.action.close}
+            </ActionButton>
+          </div>
+          <div className="drawer-title-container">
+            <h1>{title || ''}</h1>
+          </div>
+          <div />
+        </div>
+        <div className="drawer-content">{children}</div>
+      </div>
+    </MaterialDrawer>
+  );
+}

templates/admin/src/components/theme/drawer/UncontrolledDrawer.tsx

@@ -0,0 +1,52 @@
+import { getGlobalInstance } from 'plume-ts-di';
+import React, { useEffect } from 'react';
+import {
+  UncontrolledDrawerTypeProps,
+} from '../../../lib/plume-admin-theme/drawer/DrawerProps';
+import PlumeAdminTheme from '../../../lib/plume-admin-theme/PlumeAdminTheme';
+import useToggle from '../../../lib/react-hook-toggle/ReactHookToggle';
+
+/**
+ * When a drawer is a all page, there is no state to control its opening / closing
+ */
+function UncontrolledDrawer(
+  {
+    title,
+    onClose,
+    children,
+    size,
+    sizedByWidth,
+    fullScreen,
+    className,
+  }: UncontrolledDrawerTypeProps,
+) {
+  const theme: PlumeAdminTheme = getGlobalInstance(PlumeAdminTheme);
+  const [isDrawerOpened, toggleDrawer] = useToggle(false);
+
+  useEffect(() => {
+    if (!isDrawerOpened) {
+      setTimeout(toggleDrawer, 0);
+    }
+  }, [children]);
+
+  const uncontrolledClose = () => {
+    toggleDrawer();
+    setTimeout(onClose, 300);
+  };
+
+  return (
+    <theme.drawer
+      title={title}
+      open={isDrawerOpened}
+      close={uncontrolledClose}
+      size={size}
+      sizedByWidth={sizedByWidth}
+      fullScreen={fullScreen}
+      className={className}
+    >
+      {children}
+    </theme.drawer>
+  );
+}
+
+export default (UncontrolledDrawer);

templates/admin/src/components/theme/form/fields/InputSelect.tsx

@@ -1,7 +1,9 @@
+import { MenuItem, TextField } from '@mui/material';
 import React from 'react';
-import { SelectElement } from 'react-hook-form-mui';
+import { useController } from 'react-hook-form';
 import {
   InputSelectProps,
+  SelectOptionProps,
 } from '../../../../lib/plume-admin-theme/form/FormInputProps';
 
 export default function InputSelect(
@@ -20,24 +22,50 @@ export default function InputSelect(
   }: InputSelectProps) {
   const fieldId: string = useNameAsId ? (name ?? 'undefined_input_name') : (id ?? 'undefined_input_id');
 
+  const { field } = useController({
+    name: fieldId,
+    control,
+    rules: { required: required ?? false },
+    defaultValue: defaultValue || '',
+  });
+
+  const onBlurCombined = (value: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>) => {
+    field.onBlur();
+    if (onBlur) {
+      onBlur(value);
+    }
+  };
+
+  const onChangeField = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    field.onChange(event);
+    if (onChange) {
+      onChange(event.target.value);
+    }
+  };
+
   return (
-    <SelectElement
+    <TextField
       className={required ? 'field-required' : ''}
-      control={control}
+      select
       label={label}
-      name={fieldId}
+      name={name}
       variant="filled"
-      id={fieldId}
-      options={options}
-      valueKey="value"
-      labelKey="label"
-      defaultValue={defaultValue}
-      required={required}
+      id={useNameAsId ? name : id}
       disabled={disabled ?? false}
-      onBlur={onBlur}
-      onChange={onChange}
-      // disable FormHelper
-      parseError={() => ''}
-    />
+      value={field.value}
+      inputRef={field.ref}
+      onBlur={onBlurCombined}
+      onChange={onChangeField}
+    >
+      {
+        React.Children.toArray(
+          options?.map((option: SelectOptionProps) => (
+            <MenuItem key={`${option.label}-${option.value}`} value={option.value}>
+              {option.label}
+            </MenuItem>
+          )),
+        )
+      }
+    </TextField>
   );
 }