UNPKG

irisrad-ui

Version:

UI elements developered for IRIS R&D Group Inc

147 lines (136 loc) 3.69 kB
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 };