Drawer

A Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since the user can interact with the Drawer without leaving the current page, tasks can be achieved more efficiently within the same context.

Use a Form to create or edit a set of information
Processing subtasks. When subtasks are too heavy for a Popover and we still want to keep the subtasks in the context of the main task, Drawer comes very handy.
When the same Form is needed in multiple places.

Usage

The Drawer component can be imported using

import { Drawer } from '@tail-kit/tail-kit'

Basic Drawer

function BasicDrawer() {
  const [visible, setVisible] = React.useState(false)
  function showDrawer() {
    setVisible(true)
  }
  function hideDrawer() {
    setVisible(false)
  }
  return (
    <>
      <Button buttonType="primary" onClick={showDrawer}>
        Open
      </Button>
      <Drawer
        visible={visible}
        title="Basic Drawer"
        onRequestClose={hideDrawer}
      >
        <p>Some Contents...</p>
        <p>Some Contents...</p>
        <p>Some Contents...</p>
      </Drawer>
    </>
  )
}

function BasicDrawer() {
  const [visible, setVisible] = React.useState(false)
  function showDrawer() {
    setVisible(true)
  }
  function hideDrawer() {
    setVisible(false)
  }
  return (
    <>
      <Button buttonType="primary" onClick={showDrawer}>
        Open
      </Button>
      <Drawer
        visible={visible}
        title="Basic Drawer"
        onRequestClose={hideDrawer}
      >
        <p>Some Contents...</p>
        <p>Some Contents...</p>
        <p>Some Contents...</p>
      </Drawer>
    </>
  )
}

Custom Placement

top

right

bottom

left

function CustomPlacement() {
  const [visible, setVisible] = React.useState(false)
  const [placement, setPlacement] = React.useState('right')
  const options = ['top', 'right', 'bottom', 'left']
  function showDrawer() {
    setVisible(true)
  }
  function hideDrawer() {
    setVisible(false)
  }
  function handlePlacement(checkedValue) {
    setPlacement(checkedValue)
  }
  return (
    <>
      <div className="flex items-center flex-wrap">
        <Radio.RadioGroup
          options={options}
          defaultValue="right"
          onChange={handlePlacement}
          className="mr-6 mb-4 lg:mb-0"
        />
        <Button buttonType="primary" onClick={showDrawer}>
          Open
        </Button>
      </div>
      <Drawer
        visible={visible}
        title="Basic Drawer"
        onRequestClose={hideDrawer}
        placement={placement}
        closable
      >
        <p>Some Contents...</p>
        <p>Some Contents...</p>
        <p>Some Contents...</p>
      </Drawer>
    </>
  )
}

function CustomPlacement() {
  const [visible, setVisible] = React.useState(false)
  const [placement, setPlacement] = React.useState('right')
  const options = ['top', 'right', 'bottom', 'left']
  function showDrawer() {
    setVisible(true)
  }
  function hideDrawer() {
    setVisible(false)
  }
  function handlePlacement(checkedValue) {
    setPlacement(checkedValue)
  }
  return (
    <>
      <div className="flex items-center flex-wrap">
        <Radio.RadioGroup
          options={options}
          defaultValue="right"
          onChange={handlePlacement}
          className="mr-6 mb-4 lg:mb-0"
        />
        <Button buttonType="primary" onClick={showDrawer}>
          Open
        </Button>
      </div>
      <Drawer
        visible={visible}
        title="Basic Drawer"
        onRequestClose={hideDrawer}
        placement={placement}
        closable
      >
        <p>Some Contents...</p>
        <p>Some Contents...</p>
        <p>Some Contents...</p>
      </Drawer>
    </>
  )
}

Submit Form in Drawer

function SubmitFormInDrawer() {
  const [visible, setVisible] = React.useState(false)
  const formRef = React.useRef(null)
  function showDrawer() {
    setVisible(true)
  }
  function hideDrawer() {
    setVisible(false)
  }
  function onFormSubmit(data) {
    console.log(data)
  }
  function onDrawerSubmit() {
    formRef.current.dispatchEvent(
      new Event('submit', { cancelable: true, bubbles: true }),
    )
    hideDrawer()
  }
  return (
    <>
      <Button icon={<HiOutlinePlus />} onClick={showDrawer}>
        New Employee
      </Button>
      <Drawer
        visible={visible}
        title="Create a new employee account"
        onRequestClose={hideDrawer}
        closable
        size={560}
        footer={
          <div className="flex items-center justify-end gap-x-3">
            <Button onClick={hideDrawer}>Cancel</Button>
            <Button buttonType="primary" onClick={onDrawerSubmit}>
              Submit
            </Button>
          </div>
        }
      >
        <Form
          layout={Form.Layout.VERTICAL}
          className="p-0"
          ref={formRef}
          onSubmit={onFormSubmit}
        >
          <div className="flex w-full space-x-4">
            <Form.Item name="firstName" label="First Name" className="flex-1">
              <Input placeholder="Enter first name" />
            </Form.Item>
            <Form.Item name="lastName" label="Last Name" className="flex-1">
              <Input placeholder="Enter last name" />
            </Form.Item>
          </div>
          <div className="flex w-full space-x-4">
            <Form.Item name="gender" label="Gender" className="flex-1">
              <Select
                options={['Male', 'Female', 'Other']}
                placeholder="Select your gender"
                className="w-full"
              />
            </Form.Item>
            <Form.Item
              name="maritalStatus"
              label="Marital Status"
              className="flex-1"
            >
              <Select
                options={['Single', 'Married']}
                placeholder="Select your marital status"
                className="w-full"
              />
            </Form.Item>
          </div>
          <div className="flex w-full space-x-4">
            <Form.Item
              name="phoneNumber"
              label="Phone Number"
              className="flex-1"
            >
              <Input placeholder="Enter phone number" />
            </Form.Item>
            <Form.Item name="email" label="Email Address" className="flex-1">
              <Input placeholder="Enter email address" />
            </Form.Item>
          </div>
          <Form.Item name="pastExperience" label="Past Experience">
            <textarea
              className="w-full h-24 px-3 py-2 text-sm border rounded-md focus:outline-none focus:ring-2"
              placeholder="Please write employee's previous experience description"
            />
          </Form.Item>
        </Form>
      </Drawer>
    </>
  )
}

function SubmitFormInDrawer() {
  const [visible, setVisible] = React.useState(false)
  const formRef = React.useRef(null)
  function showDrawer() {
    setVisible(true)
  }
  function hideDrawer() {
    setVisible(false)
  }
  function onFormSubmit(data) {
    console.log(data)
  }
  function onDrawerSubmit() {
    formRef.current.dispatchEvent(
      new Event('submit', { cancelable: true, bubbles: true }),
    )
    hideDrawer()
  }
  return (
    <>
      <Button icon={<HiOutlinePlus />} onClick={showDrawer}>
        New Employee
      </Button>
      <Drawer
        visible={visible}
        title="Create a new employee account"
        onRequestClose={hideDrawer}
        closable
        size={560}
        footer={
          <div className="flex items-center justify-end gap-x-3">
            <Button onClick={hideDrawer}>Cancel</Button>
            <Button buttonType="primary" onClick={onDrawerSubmit}>
              Submit
            </Button>
          </div>
        }
      >
        <Form
          layout={Form.Layout.VERTICAL}
          className="p-0"
          ref={formRef}
          onSubmit={onFormSubmit}
        >
          <div className="flex w-full space-x-4">
            <Form.Item name="firstName" label="First Name" className="flex-1">
              <Input placeholder="Enter first name" />
            </Form.Item>
            <Form.Item name="lastName" label="Last Name" className="flex-1">
              <Input placeholder="Enter last name" />
            </Form.Item>
          </div>
          <div className="flex w-full space-x-4">
            <Form.Item name="gender" label="Gender" className="flex-1">
              <Select
                options={['Male', 'Female', 'Other']}
                placeholder="Select your gender"
                className="w-full"
              />
            </Form.Item>
            <Form.Item
              name="maritalStatus"
              label="Marital Status"
              className="flex-1"
            >
              <Select
                options={['Single', 'Married']}
                placeholder="Select your marital status"
                className="w-full"
              />
            </Form.Item>
          </div>
          <div className="flex w-full space-x-4">
            <Form.Item
              name="phoneNumber"
              label="Phone Number"
              className="flex-1"
            >
              <Input placeholder="Enter phone number" />
            </Form.Item>
            <Form.Item name="email" label="Email Address" className="flex-1">
              <Input placeholder="Enter email address" />
            </Form.Item>
          </div>
          <Form.Item name="pastExperience" label="Past Experience">
            <textarea
              className="w-full h-24 px-3 py-2 text-sm border rounded-md focus:outline-none focus:ring-2"
              placeholder="Please write employee's previous experience description"
            />
          </Form.Item>
        </Form>
      </Drawer>
    </>
  )
}

Drawer Props

Name	Description	Default Value
children	content rendered inside the modal `ReactNode`	--
closable	Whether a close (x) button is visible on top right of the Drawer dialog or not `boolean \| undefined`	--
footer	The footer for Drawer `ReactNode`	--
onRequestClose	function called when the user is closing the drawer, either by clicking on cancel button or overlay `(() => void) \| undefined`	--
title	title of the drawer `ReactNode`	--
placement	The placement of the Drawer `"left" \| "right" \| "top" \| "bottom" \| undefined`	`right`
portalParent	parent of the portal container `HTMLElement \| undefined`	`typeof window !== 'undefined' ? document.body : undefined`
size	Define the size of drawer (width in case of left or right placement and height in case of top or bottom placement) `number \| undefined`	`256`
visible	whether drawer is visible or not `boolean`	--
className	Additional classes applied to the Drawer component `string \| undefined`	--
style	Additional styles applied to the Drawer component `CSSProperties \| undefined`	--

Usage

Basic Drawer

Custom Placement

Submit Form in Drawer

Drawer Props

General

Feedback

Data Display

Data Entry

Survey

Navigation

Drawer

Usage

Basic Drawer

Custom Placement

Submit Form in Drawer

Drawer Props