irisrad-ui/src/components/irisDrawer/IrisDrawer.js

UI elements developered for IRIS R&D Group Inc

import React, { useState, useRef, useEffect } from "react";
import "../../style/styles.css";
import PropTypes from "prop-types";
export const DRAWER_MAX_WIDTHS = [
  200,
  220,
  240,
  260,
  280,
  300,
  320,
  340,
  360,
  380,
  400,
];
export const DRAWER_MIN_WIDTHS = [60, 65, 70, 75, 80, 85, 90, 95, 100];
const DRAWER_DEFAULT_WIDTH = 240;

function IrisDrawer({
  minWidth,
  maxWidth,
  open,
  children,
  className = "",
  ...props
}) {
  const [isOpen, setIsOpen] = useState(open);
  const drawerRef = useRef();
  const drawerBtnRef = useRef();
  // const toggleWidth = () => {
  //   let openWidth = DRAWER_DEFAULT_WIDTH;
  //   if (DRAWER_WIDTHS.indexOf(maxWidth) >= 0) {
  //     openWidth = maxWidth;
  //   }
  //   if (drawerRef && drawerRef.current) {
  //     const classList = drawerBtnRef.current.classList;
  //     drawerRef.current.classList.toggle(`open--${openWidth}`);
  //   }
  //   if (drawerBtnRef && drawerBtnRef.current) {
  //     drawerBtnRef.current.classList.toggle("open");
  //   }
  // };

  useEffect(() => {
    if (drawerRef && drawerRef.current) {
      const { classList } = drawerRef.current;
      if (classList) {
        for (let i = 0; i < classList.length; i++) {
          const className = classList[i];
          if (className.includes("open--")) {
            classList.toggle(className);
          }
        }
      }
    }
  }, [maxWidth]);

  useEffect(() => {
    setIsOpen(open);
  }, [open]);

  useEffect(() => {
    if (
      drawerRef &&
      drawerRef.current &&
      drawerBtnRef &&
      drawerBtnRef.current
    ) {
      const drawerClassList = drawerRef.current.classList;
      const drawerBtnClassList = drawerBtnRef.current.classList;
      if (drawerClassList && drawerBtnClassList) {
        const openClass = `open--${maxWidth}`;
        if (isOpen) {
          if (!drawerClassList.contains(openClass)) {
            drawerClassList.toggle(openClass);
            drawerBtnClassList.toggle("open");
          }
        } else {
          drawerClassList.remove(openClass);
          drawerBtnClassList.remove("open");
        }
      }
    }
  }, [isOpen, maxWidth]);

  const toggleDrawer = () => {
    setIsOpen((value) => !value);
  };

  let drawerWrapperClass = "drawer-wrapper";
  if (DRAWER_MIN_WIDTHS.indexOf(minWidth) >= 0) {
    drawerWrapperClass += ` drawer-min-width-${minWidth}`;
  }
  if (DRAWER_MAX_WIDTHS.indexOf(maxWidth) >= 0) {
    drawerWrapperClass += ` drawer-max-width-${maxWidth}`;
  }

  if (className !== "") {
    drawerWrapperClass += " " + className;
  }
  return (
    <div ref={drawerRef} className={drawerWrapperClass} {...props}>
      <div className="drawer-container">
        {children ? children : <span>custom component should be here</span>}
        <div className="drawer-btn-wrapper" onClick={toggleDrawer}>
          <span ref={drawerBtnRef} className="drawer-btn-icon"></span>
        </div>
      </div>
    </div>
  );
}

IrisDrawer.propTypes = {
  open: PropTypes.bool.isRequired,
  minWidth: PropTypes.oneOf(DRAWER_MIN_WIDTHS),
  maxWidth: PropTypes.oneOf([
    200,
    220,
    240,
    260,
    280,
    300,
    320,
    340,
    360,
    380,
    400,
  ]),
};

IrisDrawer.defaultProps = {
  className: PropTypes.string,
  open: false,
  minWidth: 85,
  maxWidth: DRAWER_DEFAULT_WIDTH,
  // links: PropTypes.arrayOf(
  //   PropTypes.shape({
  //     label: PropTypes.string,
  //     onClick: PropTypes.func,
  //     component: PropTypes.node,
  //   })
  // ).isRequired,
};

export { IrisDrawer };