@khanacademy/wonder-blocks-grid 1.0.24 → 1.0.28

package/CHANGELOG.md

@@ -0,0 +1,6 @@
+# @khanacademy/wonder-blocks-grid
+
+## 1.0.28
+### Patch Changes
+
+  - @khanacademy/wonder-blocks-core@4.2.1

package/dist/es/index.js

@@ -1,4 +1,4 @@
-import { Component, createElement, Children } from 'react';
+import * as React from 'react';
 import { MediaLayout, queryMatchesSize, Strut } from '@khanacademy/wonder-blocks-layout';
 import { View } from '@khanacademy/wonder-blocks-core';
 import { StyleSheet } from 'aphrodite';
@@ -48,7 +48,7 @@ const flexBasis = size => {
  * `cols` props then the component will only be shown at those grid sizes and
  * using the specified column width.
  */
-class Cell extends Component {
+class Cell extends React.Component {
   static isClassOf(instance) {
     return instance && instance.type && instance.type.__IS_CELL__;
   }
@@ -89,7 +89,7 @@ class Cell extends Component {
       children,
       style
     } = this.props;
-    return /*#__PURE__*/createElement(MediaLayout, null, ({
+    return /*#__PURE__*/React.createElement(MediaLayout, null, ({
       mediaSize,
       mediaSpec
     }) => {
@@ -137,7 +137,7 @@ class Cell extends Component {
       }) : children; // Render a fixed-width cell (flex-basis: size, flex-shrink: 0)
       // that matches the intended width of the cell
 
-      return /*#__PURE__*/createElement(View, {
+      return /*#__PURE__*/React.createElement(View, {
         style: [styles.cellFixed, flexBasis(calcWidth), style]
       }, contents);
     });
@@ -165,9 +165,9 @@ 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.
  */
-class Gutter extends Component {
+class Gutter extends React.Component {
   render() {
-    return /*#__PURE__*/createElement(MediaLayout, null, ({
+    return /*#__PURE__*/React.createElement(MediaLayout, null, ({
       mediaSize,
       mediaSpec
     }) => {
@@ -185,7 +185,7 @@ class Gutter extends Component {
         return null;
       }
 
-      return /*#__PURE__*/createElement(Strut, {
+      return /*#__PURE__*/React.createElement(Strut, {
         size: gutterWidth
       });
     });
@@ -214,13 +214,13 @@ Gutter.defaultProps = {
  * grid sizes. If you specify the `small`, `medium`, or `large`
  * props then the component will only be shown at those grid sizes.
  */
-class Row extends Component {
+class Row extends React.Component {
   render() {
     const {
       style,
       children
     } = this.props;
-    return /*#__PURE__*/createElement(MediaLayout, null, ({
+    return /*#__PURE__*/React.createElement(MediaLayout, null, ({
       mediaSize,
       mediaSpec
     }) => {
@@ -247,22 +247,24 @@ class Row extends Component {
         mediaSize,
         totalColumns
       }) : children;
-      const filteredContents = Children.toArray(contents).filter( // Flow doesn't let us check .type on a non-null React.Node so
+      const filteredContents = React.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, {
+      .reduce((acc, elem, index) => [].concat(acc, [elem, /*#__PURE__*/React.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, {
+      return /*#__PURE__*/React.createElement(View, {
         style: [styles.row, !!maxWidth && styles.rowMaxWidth, !!maxWidth && {
           maxWidth
         }, style]
-      }, /*#__PURE__*/createElement(Strut, {
+      }, /*#__PURE__*/React.createElement(Strut, {
         size: marginWidth
-      }), filteredContents, /*#__PURE__*/createElement(Strut, {
+      }), filteredContents, /*#__PURE__*/React.createElement(Strut, {
         size: marginWidth
       }));
     });