@zohodesk/components
Version:
In this Package, we Provide Some Basic Components to Build Web App
56 lines • 1.81 kB
JavaScript
import React, { useCallback } from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import DropBox from "../DropBox/DropBox";
import { Container } from "../Layout";
import { ResponsiveReceiver } from "../../Responsive/CustomResponsive";
import style from "../../ResponsiveDropBox/ResponsiveDropBox.module.css";
export default function ResponsiveDropBox(props) {
const {
children,
customClass = {},
isResponsivePadding,
alignBox
} = props;
const {
customDropBox = '',
customMobileDropBox = '',
customDropBoxWrap = '',
customMobileDropBoxWrap = '',
customResponsiveContainer = ''
} = customClass;
const dropBoxClasses = {
customDropBox: `${customDropBox}`,
customMobileDropBox: `${customMobileDropBox}`,
customDropBoxWrap: `${customDropBoxWrap}`,
customMobileDropBoxWrap: `${customMobileDropBoxWrap}`,
customResponsiveContainer: `${customResponsiveContainer}`
};
const responsiveFunc = useCallback(_ref => {
let {
mediaQueryOR
} = _ref;
return {
tabletMode: mediaQueryOR([{
maxWidth: 700
}])
};
}, []);
return /*#__PURE__*/React.createElement(DropBox, { ...props,
customClass: dropBoxClasses
}, /*#__PURE__*/React.createElement(ResponsiveReceiver, {
query: responsiveFunc,
responsiveId: "Helmet"
}, _ref2 => {
let {
tabletMode
} = _ref2;
return /*#__PURE__*/React.createElement(Container, {
alignBox: alignBox,
isCover: false,
className: `${tabletMode ? style.dropBoxContainer : ''} ${tabletMode && isResponsivePadding ? style.boxPadding : ''} ${customResponsiveContainer}`
}, children);
}));
}
ResponsiveDropBox.propTypes = propTypes;
ResponsiveDropBox.defaultProps = defaultProps;