@zohodesk/components/es/ResponsiveDropBox/ResponsiveDropBox.js

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

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({
    mediaQueryOR
  }) {
    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, _extends({}, this.props, {
      customClass: dropBoxClasses
    }), /*#__PURE__*/React.createElement(ResponsiveReceiver, {
      query: this.responsiveFunc,
      responsiveId: "Helmet"
    }, ({
      tabletMode
    }) => /*#__PURE__*/React.createElement(Container, {
      alignBox: alignBox,
      isCover: false,
      className: `${tabletMode ? style.dropBoxContainer : ''} ${tabletMode && isResponsivePadding ? style.boxPadding : ''} ${customResponsiveContainer}`
    }, children)));
  }

}
ResponsiveDropBox.propTypes = propTypes;
ResponsiveDropBox.defaultProps = defaultProps;