@khanacademy/wonder-blocks-grid 1.0.23 → 1.0.27

package/dist/es/index.js

@@ -1,167 +1,20 @@
-import { createElement, Component, Children } from 'react';
+import { Component, createElement, Children } from 'react';
 import { MediaLayout, queryMatchesSize, Strut } from '@khanacademy/wonder-blocks-layout';
 import { View } from '@khanacademy/wonder-blocks-core';
 import { StyleSheet } from 'aphrodite';
 
-function _classCallCheck(instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-}
-
-function _defineProperties(target, props) {
-  for (var i = 0; i < props.length; i++) {
-    var descriptor = props[i];
-    descriptor.enumerable = descriptor.enumerable || false;
-    descriptor.configurable = true;
-    if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, descriptor.key, descriptor);
-  }
-}
-
-function _createClass(Constructor, protoProps, staticProps) {
-  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-  if (staticProps) _defineProperties(Constructor, staticProps);
-  return Constructor;
-}
-
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-function _inherits(subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function");
-  }
-
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      writable: true,
-      configurable: true
-    }
-  });
-  if (superClass) _setPrototypeOf(subClass, superClass);
-}
-
-function _getPrototypeOf(o) {
-  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
-    return o.__proto__ || Object.getPrototypeOf(o);
-  };
-  return _getPrototypeOf(o);
-}
-
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-
-  return _setPrototypeOf(o, p);
-}
-
-function _isNativeReflectConstruct() {
-  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-  if (Reflect.construct.sham) return false;
-  if (typeof Proxy === "function") return true;
-
-  try {
-    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return self;
-}
-
-function _possibleConstructorReturn(self, call) {
-  if (call && (typeof call === "object" || typeof call === "function")) {
-    return call;
-  }
-
-  return _assertThisInitialized(self);
-}
-
-function _createSuper(Derived) {
-  var hasNativeReflectConstruct = _isNativeReflectConstruct();
-
-  return function _createSuperInternal() {
-    var Super = _getPrototypeOf(Derived),
-        result;
-
-    if (hasNativeReflectConstruct) {
-      var NewTarget = _getPrototypeOf(this).constructor;
-
-      result = Reflect.construct(Super, arguments, NewTarget);
-    } else {
-      result = Super.apply(this, arguments);
-    }
-
-    return _possibleConstructorReturn(this, result);
-  };
-}
-
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
-
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
-}
-
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-var WIDE_SCREEN = "@media (min-width: 1168px)";
-var styles = StyleSheet.create({
+const WIDE_SCREEN = "@media (min-width: 1168px)";
+const styles = StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center",
     width: "100%"
   },
-  rowMaxWidth: _defineProperty({}, WIDE_SCREEN, {
-    margin: "0 auto"
-  }),
+  rowMaxWidth: {
+    [WIDE_SCREEN]: {
+      margin: "0 auto"
+    }
+  },
   cellGrow: {
     flexGrow: 1
   },
@@ -170,7 +23,7 @@ var styles = StyleSheet.create({
   }
 });
 
-var flexBasis = function flexBasis(size) {
+const flexBasis = size => {
   return {
     MsFlexBasis: size,
     MsFlexPreferredSize: size,
@@ -195,126 +48,109 @@ var flexBasis = function flexBasis(size) {
  * `cols` props then the component will only be shown at those grid sizes and
  * using the specified column width.
  */
-var Cell = /*#__PURE__*/function (_React$Component) {
-  _inherits(Cell, _React$Component);
-
-  var _super = _createSuper(Cell);
-
-  function Cell() {
-    _classCallCheck(this, Cell);
-
-    return _super.apply(this, arguments);
+class Cell extends Component {
+  static isClassOf(instance) {
+    return instance && instance.type && instance.type.__IS_CELL__;
   }
 
-  _createClass(Cell, [{
-    key: "render",
-    value: function render() {
-      var _this = this;
-
-      var _this$props = this.props,
-          children = _this$props.children,
-          style = _this$props.style;
-      return /*#__PURE__*/createElement(MediaLayout, null, function (_ref) {
-        var mediaSize = _ref.mediaSize,
-            mediaSpec = _ref.mediaSpec;
-        var spec = mediaSpec[mediaSize];
-
-        if (!spec) {
-          throw new Error("mediaSpec.".concat(mediaSize, " is undefined"));
-        } // Get the settings for this particular size of grid
-
-
-        var totalColumns = spec.totalColumns,
-            gutterWidth = spec.gutterWidth,
-            marginWidth = spec.marginWidth;
-        var cols = Cell.getCols(_this.props, mediaSize); // If no columns are specified then we just don't render this cell
-
-        if (cols === undefined || cols === null || cols === 0) {
-          return null;
-        }
-
-        if (cols > totalColumns) {
-          throw new Error("Specified columns ".concat(cols, " is greater than the maximum ") + "".concat(totalColumns, " at the ").concat(mediaSize, " grid size."));
-        } // We need to start by calculating the total width of all the "content"
-        // We do this by starting with the full width (100%) and then
-        // subtracting all of the gutter spaces inbetween the cells
-        // (gutterWidth * (totalColumns - 1)) and the width of the two margins
-        // (marginWidth * 2).
-
-
-        var contentWidth = "(100% - ".concat(gutterWidth * (totalColumns - 1), "px - ").concat(marginWidth * 2, "px)"); // Now that we have the full width we can calculate the width of this
-        // particular cell by multiplying the full width (allCellWidth) by
-        // the ratio of this cell (cols / totalColumns). But we then need to
-        // add back in the missing gutter widths:
-        // (gutterWidth * (cols - 1)). This gives us to full width of
-        // this particular cell.
-
-        var calcWidth = "calc(".concat(contentWidth, " * ").concat(cols / totalColumns, " + ").concat(gutterWidth * (cols - 1), "px)"); // If the contents are a function then we call it with the mediaSize,
-        // totalColumns, and cols properties and render the return value.
-
-        var contents = typeof children === "function" ? children({
-          mediaSize: mediaSize,
-          totalColumns: totalColumns,
-          cols: cols
-        }) : children; // Render a fixed-width cell (flex-basis: size, flex-shrink: 0)
-        // that matches the intended width of the cell
-
-        return /*#__PURE__*/createElement(View, {
-          style: [styles.cellFixed, flexBasis(calcWidth), style]
-        }, contents);
-      });
-    }
-  }], [{
-    key: "isClassOf",
-    value: function isClassOf(instance) {
-      return instance && instance.type && instance.type.__IS_CELL__;
-    }
-  }, {
-    key: "getCols",
-    value: function getCols(props, mediaSize) {
-      // If no option was specified then we just return undefined,
-      // components may handle this case differently.
-      // We go through all the ways in which a fixed width can be
-      // specified and find the one that matches our current grid size.
-      if (!props.smallCols && !props.mediumCols && !props.largeCols && !props.cols) {
-        return undefined;
-      } else if (props.smallCols && mediaSize === "small") {
-        return props.smallCols;
-      } else if (props.mediumCols && mediaSize === "medium") {
-        return props.mediumCols;
-      } else if (props.largeCols && mediaSize === "large") {
-        return props.largeCols;
-      } else if (typeof props.cols === "function") {
-        return props.cols(mediaSize);
-      } else if (props.cols) {
-        return props.cols;
-      } // If nothing applies then we return null (usually resulting
-      // in the component not being rendered)
-
-
-      return null;
-    } // HACK(kevinb): we use a stack method here because we can't get a ref to
-    // each cell in a row without cloning them all.
-
-  }, {
-    key: "shouldDisplay",
-    value: function shouldDisplay(props, mediaSize) {
-      var cols = Cell.getCols(props, mediaSize);
-      return cols !== null && cols !== 0;
-    }
-  }]);
+  static getCols(props, mediaSize) {
+    // If no option was specified then we just return undefined,
+    // components may handle this case differently.
+    // We go through all the ways in which a fixed width can be
+    // specified and find the one that matches our current grid size.
+    if (!props.smallCols && !props.mediumCols && !props.largeCols && !props.cols) {
+      return undefined;
+    } else if (props.smallCols && mediaSize === "small") {
+      return props.smallCols;
+    } else if (props.mediumCols && mediaSize === "medium") {
+      return props.mediumCols;
+    } else if (props.largeCols && mediaSize === "large") {
+      return props.largeCols;
+    } else if (typeof props.cols === "function") {
+      return props.cols(mediaSize);
+    } else if (props.cols) {
+      return props.cols;
+    } // If nothing applies then we return null (usually resulting
+    // in the component not being rendered)
+
+
+    return null;
+  } // HACK(kevinb): we use a stack method here because we can't get a ref to
+  // each cell in a row without cloning them all.
+
+
+  static shouldDisplay(props, mediaSize) {
+    const cols = Cell.getCols(props, mediaSize);
+    return cols !== null && cols !== 0;
+  }
 
-  return Cell;
-}(Component);
+  render() {
+    const {
+      children,
+      style
+    } = this.props;
+    return /*#__PURE__*/createElement(MediaLayout, null, ({
+      mediaSize,
+      mediaSpec
+    }) => {
+      const spec = mediaSpec[mediaSize];
+
+      if (!spec) {
+        throw new Error(`mediaSpec.${mediaSize} is undefined`);
+      } // Get the settings for this particular size of grid
+
+
+      const {
+        totalColumns,
+        gutterWidth,
+        marginWidth
+      } = spec;
+      const cols = Cell.getCols(this.props, mediaSize); // If no columns are specified then we just don't render this cell
+
+      if (cols === undefined || cols === null || cols === 0) {
+        return null;
+      }
+
+      if (cols > totalColumns) {
+        throw new Error(`Specified columns ${cols} is greater than the maximum ` + `${totalColumns} at the ${mediaSize} grid size.`);
+      } // We need to start by calculating the total width of all the "content"
+      // We do this by starting with the full width (100%) and then
+      // subtracting all of the gutter spaces inbetween the cells
+      // (gutterWidth * (totalColumns - 1)) and the width of the two margins
+      // (marginWidth * 2).
+
+
+      const contentWidth = `(100% - ${gutterWidth * (totalColumns - 1)}px - ${marginWidth * 2}px)`; // Now that we have the full width we can calculate the width of this
+      // particular cell by multiplying the full width (allCellWidth) by
+      // the ratio of this cell (cols / totalColumns). But we then need to
+      // add back in the missing gutter widths:
+      // (gutterWidth * (cols - 1)). This gives us to full width of
+      // this particular cell.
+
+      const calcWidth = `calc(${contentWidth} * ${cols / totalColumns} + ${gutterWidth * (cols - 1)}px)`; // If the contents are a function then we call it with the mediaSize,
+      // totalColumns, and cols properties and render the return value.
+
+      const contents = typeof children === "function" ? children({
+        mediaSize,
+        totalColumns,
+        cols
+      }) : children; // Render a fixed-width cell (flex-basis: size, flex-shrink: 0)
+      // that matches the intended width of the cell
+
+      return /*#__PURE__*/createElement(View, {
+        style: [styles.cellFixed, flexBasis(calcWidth), style]
+      }, contents);
+    });
+  }
 
-_defineProperty(Cell, "defaultProps", {
+}
+Cell.defaultProps = {
   smallCols: 0,
   mediumCols: 0,
   largeCols: 0,
   cols: 0
-});
-
-_defineProperty(Cell, "__IS_CELL__", true);
+};
+Cell.__IS_CELL__ = true;
 
 /**
  * Gutter is a component whose width is set based on the size of grid currently
@@ -329,50 +165,36 @@ _defineProperty(Cell, "__IS_CELL__", true);
  * grid sizes. If you specify the `small`, `medium`, or `large`
  * props then the component will only be shown at those grid sizes.
  */
-var Gutter = /*#__PURE__*/function (_React$Component) {
-  _inherits(Gutter, _React$Component);
-
-  var _super = _createSuper(Gutter);
-
-  function Gutter() {
-    _classCallCheck(this, Gutter);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(Gutter, [{
-    key: "render",
-    value: function render() {
-      var _this = this;
-
-      return /*#__PURE__*/createElement(MediaLayout, null, function (_ref) {
-        var mediaSize = _ref.mediaSize,
-            mediaSpec = _ref.mediaSpec;
-        var spec = mediaSpec[mediaSize];
-
-        if (!spec) {
-          throw new Error("mediaSpec.".concat(mediaSize, " is undefined"));
-        }
-
-        var gutterWidth = spec.gutterWidth;
-
-        if (!queryMatchesSize(_this.props.mediaQuery, mediaSize)) {
-          return null;
-        }
-
-        return /*#__PURE__*/createElement(Strut, {
-          size: gutterWidth
-        });
+class Gutter extends Component {
+  render() {
+    return /*#__PURE__*/createElement(MediaLayout, null, ({
+      mediaSize,
+      mediaSpec
+    }) => {
+      const spec = mediaSpec[mediaSize];
+
+      if (!spec) {
+        throw new Error(`mediaSpec.${mediaSize} is undefined`);
+      }
+
+      const {
+        gutterWidth
+      } = spec;
+
+      if (!queryMatchesSize(this.props.mediaQuery, mediaSize)) {
+        return null;
+      }
+
+      return /*#__PURE__*/createElement(Strut, {
+        size: gutterWidth
       });
-    }
-  }]);
-
-  return Gutter;
-}(Component);
+    });
+  }
 
-_defineProperty(Gutter, "defaultProps", {
+}
+Gutter.defaultProps = {
   mediaQuery: "all"
-});
+};
 
 /**
  * A Row holds all of the Cells that make up the contents of the grid. A row
@@ -392,82 +214,65 @@ _defineProperty(Gutter, "defaultProps", {
  * grid sizes. If you specify the `small`, `medium`, or `large`
  * props then the component will only be shown at those grid sizes.
  */
-var Row = /*#__PURE__*/function (_React$Component) {
-  _inherits(Row, _React$Component);
-
-  var _super = _createSuper(Row);
-
-  function Row() {
-    _classCallCheck(this, Row);
-
-    return _super.apply(this, arguments);
+class Row extends Component {
+  render() {
+    const {
+      style,
+      children
+    } = this.props;
+    return /*#__PURE__*/createElement(MediaLayout, null, ({
+      mediaSize,
+      mediaSpec
+    }) => {
+      const spec = mediaSpec[mediaSize];
+
+      if (!spec) {
+        throw new Error(`mediaSpec.${mediaSize} is undefined`);
+      }
+
+      const {
+        marginWidth,
+        maxWidth,
+        totalColumns
+      } = spec;
+      const shouldDisplay = queryMatchesSize(this.props.mediaQuery, mediaSize); // Don't render the row if it's been disabled at this size
+
+      if (!shouldDisplay) {
+        return null;
+      } // If the contents are a function then we call it with the mediaSize and
+      // totalColumns properties and render the return value.
+
+
+      const contents = typeof children === "function" ? children({
+        mediaSize,
+        totalColumns
+      }) : children;
+      const filteredContents = Children.toArray(contents) // Go through all of the contents and pre-emptively remove anything
+      // that shouldn't be rendered.
+      .filter( // Flow doesn't let us check .type on a non-null React.Node so
+      // we have to cast it to any.
+      item => Cell.isClassOf(item) ? Cell.shouldDisplay(item.props, mediaSize) : true) // Intersperse Gutter elements between the cells.
+      .reduce((acc, elem, index) => [].concat(acc, [elem, /*#__PURE__*/createElement(Gutter, {
+        key: `gutter-${index}`
+      })]), []) // We only want gutters between each cell in the row.  The reduce
+      // adds a gutter after every cell so we need to remove the last
+      // element which is an unnecessary gutteer.
+      .slice(0, -1);
+      return /*#__PURE__*/createElement(View, {
+        style: [styles.row, !!maxWidth && styles.rowMaxWidth, !!maxWidth && {
+          maxWidth
+        }, style]
+      }, /*#__PURE__*/createElement(Strut, {
+        size: marginWidth
+      }), filteredContents, /*#__PURE__*/createElement(Strut, {
+        size: marginWidth
+      }));
+    });
   }
 
-  _createClass(Row, [{
-    key: "render",
-    value: function render() {
-      var _this = this;
-
-      var _this$props = this.props,
-          style = _this$props.style,
-          children = _this$props.children;
-      return /*#__PURE__*/createElement(MediaLayout, null, function (_ref) {
-        var mediaSize = _ref.mediaSize,
-            mediaSpec = _ref.mediaSpec;
-        var spec = mediaSpec[mediaSize];
-
-        if (!spec) {
-          throw new Error("mediaSpec.".concat(mediaSize, " is undefined"));
-        }
-
-        var marginWidth = spec.marginWidth,
-            maxWidth = spec.maxWidth,
-            totalColumns = spec.totalColumns;
-        var shouldDisplay = queryMatchesSize(_this.props.mediaQuery, mediaSize); // Don't render the row if it's been disabled at this size
-
-        if (!shouldDisplay) {
-          return null;
-        } // If the contents are a function then we call it with the mediaSize and
-        // totalColumns properties and render the return value.
-
-
-        var contents = typeof children === "function" ? children({
-          mediaSize: mediaSize,
-          totalColumns: totalColumns
-        }) : children;
-        var filteredContents = Children.toArray(contents). // Go through all of the contents and pre-emptively remove anything
-        // that shouldn't be rendered.
-        filter( // Flow doesn't let us check .type on a non-null React.Node so
-        // we have to cast it to any.
-        function (item) {
-          return Cell.isClassOf(item) ? Cell.shouldDisplay(item.props, mediaSize) : true;
-        }) // Intersperse Gutter elements between the cells.
-        .reduce(function (acc, elem, index) {
-          return [].concat(_toConsumableArray(acc), [elem, /*#__PURE__*/createElement(Gutter, {
-            key: "gutter-".concat(index)
-          })]);
-        }, []) // We only want gutters between each cell in the row.  The reduce
-        // adds a gutter after every cell so we need to remove the last
-        // element which is an unnecessary gutteer.
-        .slice(0, -1);
-        return /*#__PURE__*/createElement(View, {
-          style: [styles.row, !!maxWidth && styles.rowMaxWidth, !!maxWidth && {
-            maxWidth: maxWidth
-          }, style]
-        }, /*#__PURE__*/createElement(Strut, {
-          size: marginWidth
-        }), filteredContents, /*#__PURE__*/createElement(Strut, {
-          size: marginWidth
-        }));
-      });
-    }
-  }]);
-
-  return Row;
-}(Component);
-
-_defineProperty(Row, "defaultProps", {
+}
+Row.defaultProps = {
   mediaQuery: "all"
-});
+};
 
 export { Cell, Row };