@hipay/hipay-material-ui 1.0.0-beta.9 → 2.0.0-beta.35

package/withWidth/withWidth.js

@@ -0,0 +1,229 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.isWidthDown = exports.isWidthUp = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+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 _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactEventListener = _interopRequireDefault(require("react-event-listener"));
+
+var _debounce = _interopRequireDefault(require("debounce"));
+
+var _wrapDisplayName = _interopRequireDefault(require("recompose/wrapDisplayName"));
+
+var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
+
+var _withTheme = _interopRequireDefault(require("../styles/withTheme"));
+
+var _createBreakpoints = require("../styles/createBreakpoints");
+
+var _getThemeProps = _interopRequireDefault(require("../styles/getThemeProps"));
+
+/* eslint-disable react/no-did-mount-set-state */
+// < 1kb payload overhead when lodash/debounce is > 3kb.
+// By default, returns true if screen width is the same or greater than the given breakpoint.
+var isWidthUp = function isWidthUp(breakpoint, width) {
+  var inclusive = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+
+  if (inclusive) {
+    return _createBreakpoints.keys.indexOf(breakpoint) <= _createBreakpoints.keys.indexOf(width);
+  }
+
+  return _createBreakpoints.keys.indexOf(breakpoint) < _createBreakpoints.keys.indexOf(width);
+}; // By default, returns true if screen width is the same or less than the given breakpoint.
+
+
+exports.isWidthUp = isWidthUp;
+
+var isWidthDown = function isWidthDown(breakpoint, width) {
+  var inclusive = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+
+  if (inclusive) {
+    return _createBreakpoints.keys.indexOf(width) <= _createBreakpoints.keys.indexOf(breakpoint);
+  }
+
+  return _createBreakpoints.keys.indexOf(width) < _createBreakpoints.keys.indexOf(breakpoint);
+};
+
+exports.isWidthDown = isWidthDown;
+
+var withWidth = function withWidth() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return function (Component) {
+    var _options$withTheme = options.withTheme,
+        withThemeOption = _options$withTheme === void 0 ? false : _options$withTheme,
+        _options$noSSR = options.noSSR,
+        noSSR = _options$noSSR === void 0 ? false : _options$noSSR,
+        initialWidthOption = options.initialWidth,
+        _options$resizeInterv = options.resizeInterval,
+        resizeInterval = _options$resizeInterv === void 0 ? 166 : _options$resizeInterv;
+
+    var WithWidth =
+    /*#__PURE__*/
+    function (_React$Component) {
+      (0, _inherits2.default)(WithWidth, _React$Component);
+
+      function WithWidth(props) {
+        var _this;
+
+        (0, _classCallCheck2.default)(this, WithWidth);
+        _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(WithWidth).call(this, props));
+        _this.handleResize = (0, _debounce.default)(function () {
+          var width = _this.getWidth();
+
+          if (width !== _this.state.width) {
+            _this.setState({
+              width: width
+            });
+          }
+        }, resizeInterval);
+        _this.state = {
+          width: undefined
+        };
+
+        if (noSSR) {
+          _this.state.width = _this.getWidth();
+        }
+
+        return _this;
+      }
+
+      (0, _createClass2.default)(WithWidth, [{
+        key: "componentDidMount",
+        value: function componentDidMount() {
+          var width = this.getWidth();
+
+          if (width !== this.state.width) {
+            this.setState({
+              width: width
+            });
+          }
+        }
+      }, {
+        key: "componentWillUnmount",
+        value: function componentWillUnmount() {
+          this.handleResize.clear();
+        }
+      }, {
+        key: "getWidth",
+        value: function getWidth() {
+          var innerWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.innerWidth;
+          var breakpoints = this.props.theme.breakpoints;
+          var width = null;
+          /**
+           * Start with the slowest value as low end devices often have a small screen.
+           *
+           * innerWidth |xs      sm      md      lg      xl
+           *            |-------|-------|-------|-------|------>
+           * width      |  xs   |  sm   |  md   |  lg   |  xl
+           */
+
+          var index = 1;
+
+          while (width === null && index < _createBreakpoints.keys.length) {
+            var currentWidth = _createBreakpoints.keys[index]; // @media are inclusive, so reproduce the behavior here.
+
+            if (innerWidth < breakpoints.values[currentWidth]) {
+              width = _createBreakpoints.keys[index - 1];
+              break;
+            }
+
+            index += 1;
+          }
+
+          width = width || 'xl';
+          return 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, _extends2.default)({
+            width: width || this.state.width || initialWidth || initialWidthOption || (0, _getThemeProps.default)({
+              theme: theme,
+              name: 'MuiWithWidth'
+            }).initialWidth
+          }, other);
+          var more = {};
+
+          if (withThemeOption) {
+            more.theme = theme;
+          } // When rendering the component on the server,
+          // we have no idea about the client browser screen width.
+          // In order to prevent blinks and help the reconciliation of the React tree
+          // we are not rendering the child component.
+          //
+          // An alternative is to use the `initialWidth` property.
+
+
+          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.propTypes = process.env.NODE_ENV !== "production" ? {
+      /**
+       * As `window.innerWidth` is unavailable on the server,
+       * we default to rendering an empty component during the first mount.
+       * In some situation, you might want to use an heuristic to approximate
+       * the screen width of the client browser screen width.
+       *
+       * For instance, you could be using the user-agent or the client-hints.
+       * http://caniuse.com/#search=client%20hint
+       */
+      initialWidth: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+
+      /**
+       * @ignore
+       */
+      theme: _propTypes.default.object.isRequired,
+
+      /**
+       * Bypass the width calculation logic.
+       */
+      width: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl'])
+    } : {};
+
+    if (process.env.NODE_ENV !== 'production') {
+      WithWidth.displayName = (0, _wrapDisplayName.default)(Component, 'WithWidth');
+    }
+
+    (0, _hoistNonReactStatics.default)(WithWidth, Component);
+    return (0, _withTheme.default)()(WithWidth);
+  };
+};
+
+var _default = withWidth;
+exports.default = _default;

package/AppBar/AppBar.js

@@ -1,144 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-exports.styles = undefined;
-
-var _extends2 = require('babel-runtime/helpers/extends');
-
-var _extends3 = _interopRequireDefault(_extends2);
-
-var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
-
-var _defineProperty3 = _interopRequireDefault(_defineProperty2);
-
-var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
-
-var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _withStyles = require('../styles/withStyles');
-
-var _withStyles2 = _interopRequireDefault(_withStyles);
-
-var _helpers = require('../utils/helpers');
-
-var _Paper = require('../Paper');
-
-var _Paper2 = _interopRequireDefault(_Paper);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-// @inheritedComponent Paper
-
-var styles = exports.styles = function styles(theme) {
-    var backgroundColorDefault = theme.palette.type === 'light' ? theme.palette.grey[100] : theme.palette.grey[900];
-
-    return {
-        root: {
-            display: 'flex',
-            flexDirection: 'column',
-            width: '100%',
-            boxSizing: 'border-box', // Prevent padding issue with the Modal and fixed positioned AppBar.
-            zIndex: theme.zIndex.appBar,
-            flexShrink: 0
-        },
-        positionFixed: {
-            position: 'fixed',
-            top: 0,
-            left: 'auto',
-            right: 0
-        },
-        positionAbsolute: {
-            position: 'absolute',
-            top: 0,
-            left: 'auto',
-            right: 0
-        },
-        positionSticky: {
-            position: 'sticky',
-            top: 0,
-            left: 'auto',
-            right: 0
-        },
-        positionStatic: {
-            position: 'static'
-        },
-        colorDefault: {
-            backgroundColor: backgroundColorDefault,
-            color: theme.palette.getContrastText(backgroundColorDefault)
-        },
-        colorPrimary: {
-            backgroundColor: theme.palette.primary.main,
-            color: theme.palette.primary.contrastText
-        },
-        colorSecondary: {
-            backgroundColor: theme.palette.secondary.main,
-            color: theme.palette.secondary.contrastText
-        }
-    };
-};
-
-function AppBar(props) {
-    var _classNames;
-
-    var children = props.children,
-        classes = props.classes,
-        classNameProp = props.className,
-        color = props.color,
-        position = props.position,
-        other = (0, _objectWithoutProperties3.default)(props, ['children', 'classes', 'className', 'color', 'position']);
-
-
-    var className = (0, _classnames2.default)(classes.root, classes['position' + (0, _helpers.capitalize)(position)], (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes['color' + (0, _helpers.capitalize)(color)], color !== 'inherit'), (0, _defineProperty3.default)(_classNames, 'mui-fixed', position === 'fixed'), _classNames), classNameProp);
-
-    return _react2.default.createElement(
-        _Paper2.default,
-        (0, _extends3.default)({ square: true, component: 'header', elevation: 4, className: className }, other),
-        children
-    );
-}
-
-AppBar.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * The content of the component.
-     */
-    children: _propTypes2.default.node.isRequired,
-    /**
-     * Useful to extend the style applied to components.
-     */
-    classes: _propTypes2.default.object.isRequired,
-    /**
-     * @ignore
-     */
-    className: _propTypes2.default.string,
-    /**
-     * The color of the component. It supports those theme colors that make sense for this component.
-     */
-    color: _propTypes2.default.oneOf(['inherit', 'primary', 'secondary', 'default']),
-    /**
-     * The positioning type. The behavior of the different options is described
-     * [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
-     * Note: `sticky` is not universally supported and will fall back to `static` when unavailable.
-     */
-    position: _propTypes2.default.oneOf(['fixed', 'absolute', 'sticky', 'static'])
-} : {};
-
-AppBar.defaultProps = {
-    color: 'primary',
-    position: 'fixed'
-};
-
-exports.default = (0, _withStyles2.default)(styles, { name: 'MuiAppBar' })(AppBar);

package/AppBar/index.js

@@ -1,16 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _AppBar = require('./AppBar');
-
-Object.defineProperty(exports, 'default', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_AppBar).default;
-  }
-});
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/Avatar/Avatar.js

@@ -1,165 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.styles = undefined;
-
-var _extends2 = require('babel-runtime/helpers/extends');
-
-var _extends3 = _interopRequireDefault(_extends2);
-
-var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
-
-var _defineProperty3 = _interopRequireDefault(_defineProperty2);
-
-var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
-
-var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _withStyles = require('../styles/withStyles');
-
-var _withStyles2 = _interopRequireDefault(_withStyles);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var styles = exports.styles = function styles(theme) {
-  return {
-    root: {
-      position: 'relative',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      flexShrink: 0,
-      width: theme.spacing.unit * 5,
-      height: theme.spacing.unit * 5,
-      fontFamily: theme.typography.fontFamily,
-      fontSize: theme.typography.pxToRem(20),
-      borderRadius: '50%',
-      overflow: 'hidden',
-      userSelect: 'none'
-    },
-    colorDefault: {
-      color: theme.palette.background.default,
-      backgroundColor: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
-    },
-    img: {
-      width: '100%',
-      height: '100%',
-      textAlign: 'center',
-      // Handle non-square image. The property isn't supported by IE11.
-      objectFit: 'cover'
-    }
-  };
-};
-
-function Avatar(props) {
-  var alt = props.alt,
-      childrenProp = props.children,
-      childrenClassNameProp = props.childrenClassName,
-      classes = props.classes,
-      classNameProp = props.className,
-      Component = props.component,
-      imgProps = props.imgProps,
-      sizes = props.sizes,
-      src = props.src,
-      srcSet = props.srcSet,
-      other = (0, _objectWithoutProperties3.default)(props, ['alt', 'children', 'childrenClassName', 'classes', 'className', 'component', 'imgProps', 'sizes', 'src', 'srcSet']);
-
-
-  var className = (0, _classnames2.default)(classes.root, (0, _defineProperty3.default)({}, classes.colorDefault, childrenProp && !src && !srcSet), classNameProp);
-  var children = null;
-
-  if (childrenProp) {
-    if (childrenClassNameProp && typeof childrenProp !== 'string' && _react2.default.isValidElement(childrenProp)) {
-      var childrenClassName = (0, _classnames2.default)(childrenClassNameProp, childrenProp.props.className);
-      children = _react2.default.cloneElement(childrenProp, { className: childrenClassName });
-    } else {
-      children = childrenProp;
-    }
-  } else if (src || srcSet) {
-    children = _react2.default.createElement('img', (0, _extends3.default)({
-      alt: alt,
-      src: src,
-      srcSet: srcSet,
-      sizes: sizes,
-      className: classes.img
-    }, imgProps));
-  }
-
-  return _react2.default.createElement(
-    Component,
-    (0, _extends3.default)({ className: className }, other),
-    children
-  );
-}
-
-Avatar.propTypes = process.env.NODE_ENV !== "production" ? {
-  /**
-   * Used in combination with `src` or `srcSet` to
-   * provide an alt attribute for the rendered `img` element.
-   */
-  alt: _propTypes2.default.string,
-  /**
-   * Used to render icon or text elements inside the Avatar.
-   * `src` and `alt` props will not be used and no `img` will
-   * be rendered by default.
-   *
-   * This can be an element, or just a string.
-   */
-  children: _propTypes2.default.node,
-  /**
-   * @ignore
-   * The className of the child element.
-   * Used by Chip and ListItemIcon to style the Avatar icon.
-   */
-  childrenClassName: _propTypes2.default.string,
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes: _propTypes2.default.object.isRequired,
-  /**
-   * @ignore
-   */
-  className: _propTypes2.default.string,
-  /**
-   * The component used for the root node.
-   * Either a string to use a DOM element or a component.
-   */
-  component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
-  /**
-   * Properties applied to the `img` element when the component
-   * is used to display an image.
-   */
-  imgProps: _propTypes2.default.object,
-  /**
-   * The `sizes` attribute for the `img` element.
-   */
-  sizes: _propTypes2.default.string,
-  /**
-   * The `src` attribute for the `img` element.
-   */
-  src: _propTypes2.default.string,
-  /**
-   * The `srcSet` attribute for the `img` element.
-   */
-  srcSet: _propTypes2.default.string
-} : {};
-
-Avatar.defaultProps = {
-  component: 'div'
-};
-
-exports.default = (0, _withStyles2.default)(styles, { name: 'MuiAvatar' })(Avatar);

package/Avatar/index.js

@@ -1,16 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _Avatar = require('./Avatar');
-
-Object.defineProperty(exports, 'default', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_Avatar).default;
-  }
-});
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }