@zohodesk/dot
Version:
In this Library, we Provide Some Basic Components to Build Your Application
270 lines (266 loc) • 9.11 kB
JavaScript
import React, { useRef } from 'react';
import { Header_defaultProps, Footer_defaultProps, Drawer_defaultProps } from "./props/defaultProps";
import { Header_propTypes, Content_propTypes, Footer_propTypes, Drawer_propTypes } from "./props/propTypes";
import { Container, Box } from '@zohodesk/components/es/v1/Layout';
import { Card, CardHeader, CardContent } from '@zohodesk/components/es/v1/Card';
import VelocityAnimationGroup from '@zohodesk/components/es/v1/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
import { ResponsiveSender, ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
import { Icon } from '@zohodesk/icons';
import { useZIndex } from '@zohodesk/components/es/Provider/ZindexProvider';
import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
import Heading from '@zohodesk/components/es/v1/Heading/Heading';
import FreezeLayer from "../FreezeLayer/FreezeLayer";
import FormAction from "../FormAction/FormAction";
import IconButton from "../IconButton/IconButton";
import style from "../../Drawer/Drawer.module.css";
export function Header(props) {
let {
title,
onClose,
children,
className,
paddingSize,
closeTitle,
iconName,
iconSize,
onIconClick,
isIconBold,
dataId,
flexible,
getChildren,
iconTitle,
isBoxIcon,
getTitleChildren
} = props;
return /*#__PURE__*/React.createElement(CardHeader, {
customClass: `${style.header} ${style[`${paddingSize}HeaderPadding`]} ${className ? className : ''}`,
dataId: dataId
}, /*#__PURE__*/React.createElement(Container, {
alignBox: "row",
align: "vertical",
isCover: false,
className: style.subheader
}, /*#__PURE__*/React.createElement(Box, {
flexible: true,
shrink: true
}, /*#__PURE__*/React.createElement(Container, {
alignBox: "row",
isCover: false,
align: "vertical"
}, iconName ? /*#__PURE__*/React.createElement(Box, {
className: style.iconWrapper
}, isBoxIcon ? /*#__PURE__*/React.createElement(IconButton, {
iconName: iconName,
iconSize: iconSize,
onClick: onIconClick,
hoverType: "border",
isBold: isIconBold,
title: iconTitle
}) : /*#__PURE__*/React.createElement(Icon, {
name: iconName,
size: iconSize,
onClick: onIconClick,
title: iconTitle
})) : null, title || getTitleChildren ? /*#__PURE__*/React.createElement(Box, {
flexible: flexible,
shrink: true
}, /*#__PURE__*/React.createElement(Container, {
alignBox: "row",
align: "vertical"
}, title ? /*#__PURE__*/React.createElement(Box, {
"data-title": title,
shrink: true
}, /*#__PURE__*/React.createElement(Heading, {
title: title,
className: style.title
})) : null, getTitleChildren ? /*#__PURE__*/React.createElement(Box, null, getTitleChildren()) : null)) : null, children ? /*#__PURE__*/React.createElement(Box, null, children) : null)), onClose ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(IconButton, {
onClick: onClose,
dataId: "closeButton",
title: closeTitle,
iconName: "ZD-cross",
iconSize: "11",
a11y: {
ariaLabel: 'Close'
}
})) : null), getChildren ? /*#__PURE__*/React.createElement(Container, {
isCover: false
}, /*#__PURE__*/React.createElement(Box, {
flexible: true
}, getChildren())) : null);
}
Header.propTypes = Header_propTypes;
Header.defaultProps = Header_defaultProps;
export function Content(props) {
let {
children,
className,
paddingSize,
eleRef
} = props;
return /*#__PURE__*/React.createElement(CardContent, {
scroll: "vertical",
isScrollAttribute: true,
customClass: `${className ? className : ''} ${paddingSize ? style[`${paddingSize}ContentPadding`] : ''}`,
eleRef: eleRef
}, children);
}
Content.propTypes = Content_propTypes;
export function Footer(props) {
let {
paddingLeftSize,
paddingRightClass,
children,
size
} = props;
return /*#__PURE__*/React.createElement(FormAction, {
size: size,
paddingLeftSize: paddingLeftSize,
paddingRightClass: paddingRightClass
}, children);
}
Footer.propTypes = Footer_propTypes;
Footer.defaultProps = Footer_defaultProps;
export default function Drawer(props) {
const contentRef = useRef(null);
const getNextIndex = useZIndex();
function drawers(uptoTablet, styleByResolutions) {
let {
children,
size,
paddingSize,
subDrawerActive,
subDrawerChildren,
onBodyClick,
onClose,
needFocusScope,
customProps,
a11y
} = props;
const {
focusScopeProps = {}
} = customProps;
const {
needAutoFocus = true,
needRestoreFocus = true,
needListNavigation = false,
needFocusLoop = true,
needEnterAction = true
} = focusScopeProps;
let childrenWithProps = React.Children.map(children, child => {
if (child.type === Header || child.type === Footer || child.type === Content) {
let {
paddingSize: childPaddingSize
} = child.props || {};
return paddingSize || childPaddingSize ? /*#__PURE__*/React.cloneElement(child, {
paddingSize: childPaddingSize ? childPaddingSize : paddingSize
}) : child;
}
return child;
});
let content = /*#__PURE__*/React.createElement(Box, {
className: `${style.container} ${style.columns} ${style.drawerModal} ${uptoTablet ? style.mbleSize : style[size]}`,
"data-a11y-need-focus-style": "false",
tabindex: -1,
eleRef: contentRef,
...a11y
}, /*#__PURE__*/React.createElement(Card, {
onClick: e => {
e && e.stopPropagation && e.stopPropagation();
onBodyClick(e);
}
}, childrenWithProps));
return /*#__PURE__*/React.createElement(React.Fragment, null, subDrawerChildren ? /*#__PURE__*/React.createElement(Box, {
className: style.columns
}, /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
name: "slideRight",
isActive: subDrawerActive
}, /*#__PURE__*/React.createElement(ResponsiveSender, null, /*#__PURE__*/React.createElement(Container, {
className: styleByResolutions,
onClick: e => {
e && e.stopPropagation && e.stopPropagation();
}
}, /*#__PURE__*/React.createElement(Box, {
flexible: true
}, subDrawerChildren))))) : null, needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
elementRef: contentRef,
needAutoFocus: needAutoFocus,
needFocusLoop: needFocusLoop,
needRestoreFocus: needRestoreFocus,
needListNavigation: needListNavigation,
onClose: onClose,
needEnterAction: needEnterAction
}, content) : content);
}
function responsiveFunc(_ref) {
let {
mediaQueryOR
} = _ref;
return {
uptoTablet: mediaQueryOR([{
maxWidth: 768
}])
};
}
let {
needFreeze,
palette,
isActive,
onClose,
forwardRef,
responsiveId,
subDrawerSize,
subDrawerClass,
subDrawerActive,
customClass,
needAutoZindex,
innerPortalName
} = props;
return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
query: responsiveFunc,
responsiveId: responsiveId
}, _ref2 => {
let {
uptoTablet
} = _ref2;
let styleByResolutions = `${subDrawerClass} ${style.secondDrawer} ${uptoTablet ? `${style.secondMobDrawer} ${style.mbleSize}` : `${style[subDrawerSize]}`} `;
return needFreeze ? /*#__PURE__*/React.createElement(FreezeLayer, {
onClick: onClose,
isActive: isActive,
animationName: "fade",
childAnimationName: "slideRight",
palette: palette,
forwardRef: forwardRef,
customClass: customClass,
needAutoZindex: needAutoZindex
}, /*#__PURE__*/React.createElement(Box, {
flexible: true
}, /*#__PURE__*/React.createElement(Container, {
alignBox: "row"
}, /*#__PURE__*/React.createElement(React.Fragment, null, uptoTablet ? /*#__PURE__*/React.createElement(Box, {
flexible: true
}) : null, /*#__PURE__*/React.createElement(ResponsiveSender, null, /*#__PURE__*/React.createElement(Box, {
flexible: true,
className: uptoTablet ? style.mobModal : style.drawerModal
}, !subDrawerActive && innerPortalName ? /*#__PURE__*/React.createElement("div", {
"data-portal": innerPortalName
}) : null)), drawers(uptoTablet, styleByResolutions))))) : /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
isActive: isActive,
name: "slideRight"
}, /*#__PURE__*/React.createElement(Container, {
align: "right",
alignBox: "row",
scroll: "none",
eleRef: forwardRef,
className: `${style.isOverlay} ${customClass}`,
style: isActive && needAutoZindex ? {
zIndex: `${getNextIndex()}`
} : {}
}, drawers(uptoTablet, styleByResolutions)));
});
}
Drawer.propTypes = Drawer_propTypes;
Drawer.defaultProps = Drawer_defaultProps; // if (__DOCS__) {
// Drawer.docs = {
// componentGroup: 'Template'
// };
// }