@bootstrap-styled/ra-ui/lib/components/extendMui/withWidth/index.js

UI components for react-admin

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.isWidthDown = exports.isWidthUp = exports.propTypes = exports.defaultProps = exports.breakpointKeys = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _reactEventListener = _interopRequireDefault(require("react-event-listener"));

var _debounce = _interopRequireDefault(require("lodash/debounce"));

var breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
exports.breakpointKeys = breakpointKeys;
var defaultProps = {
  theme: {
    '$grid-breakpoints': {
      xs: '0',
      sm: '576px',
      md: '768px',
      lg: '992px',
      xl: '1200px'
    }
  }
};
exports.defaultProps = defaultProps;
var propTypes = {
  initialWidth: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
  theme: _propTypes.default.object.isRequired,
  width: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl'])
};
exports.propTypes = propTypes;

var isWidthUp = function isWidthUp(breakpoint, width) {
  var inclusive = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;

  if (inclusive) {
    return breakpointKeys.indexOf(breakpoint) <= breakpointKeys.indexOf(width);
  }

  return breakpointKeys.indexOf(breakpoint) < breakpointKeys.indexOf(width);
};

exports.isWidthUp = isWidthUp;

var isWidthDown = function isWidthDown(breakpoint, width) {
  var inclusive = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;

  if (inclusive) {
    return breakpointKeys.indexOf(width) <= breakpointKeys.indexOf(breakpoint);
  }

  return breakpointKeys.indexOf(width) < breakpointKeys.indexOf(breakpoint);
};

exports.isWidthDown = isWidthDown;

var withWidth = function withWidth() {
  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  return function (Component) {
    var _options$resizeInterv = options.resizeInterval,
        resizeInterval = _options$resizeInterv === void 0 ? 166 : _options$resizeInterv,
        _options$withTheme = options.withTheme,
        withThemeOption = _options$withTheme === void 0 ? false : _options$withTheme;

    var WithWidth = function (_React$Component) {
      (0, _inherits2.default)(WithWidth, _React$Component);

      function WithWidth() {
        var _getPrototypeOf2;

        var _this;

        (0, _classCallCheck2.default)(this, WithWidth);

        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
          args[_key] = arguments[_key];
        }

        _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(WithWidth)).call.apply(_getPrototypeOf2, [this].concat(args)));
        (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
          width: undefined
        });
        (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResize", (0, _debounce.default)(function () {
          _this.updateWidth(window.innerWidth);
        }, resizeInterval));
        return _this;
      }

      (0, _createClass2.default)(WithWidth, [{
        key: "componentDidMount",
        value: function componentDidMount() {
          this.updateWidth(window.innerWidth);
        }
      }, {
        key: "componentWillUnmount",
        value: function componentWillUnmount() {
          this.handleResize.cancel();
        }
      }, {
        key: "updateWidth",
        value: function updateWidth(innerWidth) {
          var breakpoints = this.props.theme['$grid-breakpoints'];
          var breakpointsWithNumbers = {};
          Object.keys(breakpoints).forEach(function (bpKeys) {
            breakpointsWithNumbers[bpKeys] = parseInt(breakpoints[bpKeys]);
          });
          var width = null;
          var index = 1;

          while (width === null && index < breakpointKeys.length) {
            var currentWidth = breakpointKeys[index];

            if (innerWidth < breakpointsWithNumbers[currentWidth]) {
              width = breakpointKeys[index - 1];
              break;
            }

            index += 1;
          }

          width = width || 'xl';

          if (width !== this.state.width) {
            this.setState({
              width: width
            });
          }
        }
      }, {
        key: "render",
        value: function render() {
          var _this$props = this.props,
              initialWidth = _this$props.initialWidth,
              theme = _this$props.theme,
              width = _this$props.width,
              other = (0, _objectWithoutProperties2.default)(_this$props, ["initialWidth", "theme", "width"]);
          var props = (0, _objectSpread2.default)({
            width: width || this.state.width || initialWidth
          }, other);
          var more = {};

          if (withThemeOption) {
            more.theme = theme;
          }

          if (props.width === undefined) {
            return null;
          }

          return _react.default.createElement(_reactEventListener.default, {
            target: "window",
            onResize: this.handleResize
          }, _react.default.createElement(Component, (0, _extends2.default)({}, more, props)));
        }
      }]);
      return WithWidth;
    }(_react.default.Component);

    WithWidth.defaultProps = defaultProps;
    WithWidth.propTypes = propTypes;
    return WithWidth;
  };
};

var _default = withWidth;
exports.default = _default;