@zohodesk/components
Version:
In this Package, we Provide Some Basic Components to Build Web App
65 lines (62 loc) • 1.98 kB
JavaScript
import React, { Component } 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.module.css";
export default class ResponsiveDropBox extends Component {
constructor(props) {
super(props);
this.responsiveFunc = this.responsiveFunc.bind(this);
}
responsiveFunc(_ref) {
let {
mediaQueryOR
} = _ref;
return {
tabletMode: mediaQueryOR([{
maxWidth: 700
}])
};
}
render() {
const {
children,
customClass = {},
isResponsivePadding,
alignBox
} = this.props;
const {
customDropBox = '',
customMobileDropBox = '',
customDropBoxWrap = '',
customMobileDropBoxWrap = '',
customResponsiveContainer = ''
} = customClass;
const dropBoxClasses = {
customDropBox: `${customDropBox}`,
customMobileDropBox: `${customMobileDropBox}`,
customDropBoxWrap: `${customDropBoxWrap}`,
customMobileDropBoxWrap: `${customMobileDropBoxWrap}`,
customResponsiveContainer: `${customResponsiveContainer}`
};
return /*#__PURE__*/React.createElement(DropBox, { ...this.props,
customClass: dropBoxClasses
}, /*#__PURE__*/React.createElement(ResponsiveReceiver, {
query: this.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;