Drawers

A Drawer is a side panel which appears above the content. It should perform a content-related task or quickly display certain information.

Content

Drawer panel

Drawer Component

components/DrawerItems.tsx

import { Drawer } from "antd";

<Drawer
  onClose={closeDrawer}
  visible={isOpen}
  title={t(title)}
  width={size}
  placement="right"
  extra={
    <Space>
      {cancelButton ? (
        <Button onClick={onCancel}>{t(cancelButtonTitle)} </Button>
      ) : null}
      {comfirmButton ? (
        <Button onClick={onComfirm} type="primary">
          {t(comfirmButtonTitle)}{" "}
        </Button>
      ) : null}
    </Space>
  }
>
  {content}
</Drawer>;

Props	Description	EX Value
size	It's how wide the drawer is	500
visible	A Boolean that tells if the panel should be visible	false
cancelButton	Enable the cancel type button	false
cancelButtonTitle	Cancel button title	"actions:reset"
onCancel	Trigger function on cancel button click	() => console.log("click")
comfirmButton	Enable the Comfirm type button	false
comfirmButtonTitle	Comfirm button title	"actions:submit"
onComfirm	Trigger function on comfirm button click	() => console.log("click")
onClose	Function for the Default close " X " button	closeDrawer()
content	A component that will be rendered in the drawer	any

info

You must always enter a translation variable for the text and it must match this format "namespace: variable".

Where to use ?

It can call in any page that uses the Main Layout thanks to Context API. [Learn more about Context] (.. /guides-advanced/context. MD)

MainLayout.tsx

<DrawerProvider>
  {children}
  <DrawerItems />
</DrawerProvider>

The DrawerItems component is triggered by a dispatch event:

• OPEN_DRAWER
• CLOSE_DRAWER

This distribution feature lets you customize drawer rendering and logic to suit your needs.

DrawerContext.tsx - Initiale state

const initialState = {
  size: 200,
  isOpen: false,
  content: null,
  title: "",
  cancelButton: false,
  comfirmButton: true,
  cancelButtonTitle: "",
  comfirmButtonTitle: "",
  onComfirm: undefined,
  onCancel: undefined,
  onClose: undefined,
};

DrawerContext.tsx - Render function

function reducer(state: State, action: Action) {
  switch (action.type) {
    case "OPEN_DRAWER":
      return {
        ...state,
        size: action.size,
        isOpen: true,
        content: action.content,
        title: action.title,
        cancelButton: action.cancelButton,
        comfirmButton: action.comfirmButton,
        cancelButtonTitle: action.cancelButtonTitle,
        comfirmButtonTitle: action.comfirmButtonTitle,
        onComfirm: action.onComfirm,
        onCancel: action.onCancel,
      };
    case "CLOSE_DRAWER":
      return {
        ...state,
        isOpen: false,
        data: null,
      };
    default:
      return state;
  }
}

How to use ?

Accessing the dispatch function.

Dispatch Drawer

import { useDrawerDispatch } from "context/DrawerContext";
const dispatchDrawer = useDrawerDispatch();

Dispatch CLOSE event

Close drawer

const closeDrawer = useCallback(
  () => dispatchDrawer({ type: "CLOSE_DRAWER" }),
  [dispatchDrawer]
);

Dispatch OPEN event

Here is where you customize the drawer.

Open drawer

const openDrawer = useCallback(
  () =>
    dispatchDrawer({
      size: 700,
      type: "OPEN_DRAWER",
      title: "actions:filter",
      cancelButtonTitle: "actions:reset",
      cancelButton: true,
      onCancel: () => handleReset(),
      comfirmButtonTitle: "actions:save",
      comfirmButton: true,
      onComfirm: () => handleSave(),
      content: <AnyComponent />,
    }),
  [dispatchDrawer, anyRelatedState]
);

To call this function just add a button.

Button

<Button type="primary" onClick={() => openDrawer()} />