irisrad-ui
Version:
UI elements developered for IRIS R&D Group Inc
147 lines (136 loc) • 3.69 kB
JavaScript
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 };