@khanacademy/wonder-blocks-grid 1.0.27 → 1.0.30

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# @khanacademy/wonder-blocks-grid
+
+## 1.0.30
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-core@4.3.1
+
+## 1.0.29
+
+### Patch Changes
+
+-   Updated dependencies [246a921d]
+    -   @khanacademy/wonder-blocks-core@4.3.0
+
+## 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';
@@ -32,32 +32,12 @@ const flexBasis = size => {
   };
 };
 
-/**
- * A Cell is a container whose width is set based on the width of the
- * specified columns at the current grid size. You will specify the number
- * of columns that you want this component to span at each grid size.
- * This component should only be used as a child of a [Row](#row).
- *
- * This component renders a [View](#view) that
- * uses Flex Box and has a [flex-basis](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis)
- * of the specified "width" and [flex-shrink](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink)
- * of 0.
- *
- * By default (with no properties specified) it will display at all
- * grid sizes. If you specify the `smallCols`, `mediumCols`, `largeCols`, or
- * `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__;
   }
 
   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") {
@@ -70,14 +50,10 @@ class Cell extends Component {
       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);
@@ -89,7 +65,7 @@ class Cell extends Component {
       children,
       style
     } = this.props;
-    return /*#__PURE__*/createElement(MediaLayout, null, ({
+    return React.createElement(MediaLayout, null, ({
       mediaSize,
       mediaSpec
     }) => {
@@ -97,15 +73,14 @@ class Cell extends Component {
 
       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
+      const cols = Cell.getCols(this.props, mediaSize);
 
       if (cols === undefined || cols === null || cols === 0) {
         return null;
@@ -113,31 +88,16 @@ class Cell extends Component {
 
       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 contentWidth = `(100% - ${gutterWidth * (totalColumns - 1)}px - ${marginWidth * 2}px)`;
+      const calcWidth = `calc(${contentWidth} * ${cols / totalColumns} + ${gutterWidth * (cols - 1)}px)`;
       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, {
+      }) : children;
+      return React.createElement(View, {
         style: [styles.cellFixed, flexBasis(calcWidth), style]
       }, contents);
     });
@@ -152,22 +112,9 @@ Cell.defaultProps = {
 };
 Cell.__IS_CELL__ = true;
 
-/**
- * Gutter is a component whose width is set based on the size of grid currently
- * being displayed. Used for spacing out cells from each other. The gutter
- * itself doesn't hold any content, it just spaces it out.
- *
- * Gutters are inserted automatically inside of a [Row](#row) in-between Cells.
- * You may only need to use Gutters if you're manually building your own
- * sub-grid, or some-such (this should be relatively rare).
- *
- * By default (with no properties specified) it will display at all
- * 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 React.createElement(MediaLayout, null, ({
       mediaSize,
       mediaSpec
     }) => {
@@ -185,7 +132,7 @@ class Gutter extends Component {
         return null;
       }
 
-      return /*#__PURE__*/createElement(Strut, {
+      return React.createElement(Strut, {
         size: gutterWidth
       });
     });
@@ -196,31 +143,13 @@ Gutter.defaultProps = {
   mediaQuery: "all"
 };
 
-/**
- * A Row holds all of the Cells that make up the contents of the grid. A row
- * also provides the margins on the sides and inserts the gutter spacing
- * in-between the cells. Typically this component will hold a [Cell](#cell),
- * but it can also include any elements that could fit in a
- * [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox).
- *
- * This component will automatically attempt to insert [Gutters](#gutter)
- * in-between all child elements. Additionally, it'll perform some basic checks
- * to ensure that no impossible layouts are accidentally generated.
- *
- * Typically this component will be used as a child of a [Grid](#grid-1),
- * but it's not a requirement, you can use it as a descendant, as well.
- *
- * By default (with no properties specified) it will display at all
- * 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 React.createElement(MediaLayout, null, ({
       mediaSize,
       mediaSpec
     }) => {
@@ -235,36 +164,26 @@ class Row extends Component {
         maxWidth,
         totalColumns
       } = spec;
-      const shouldDisplay = queryMatchesSize(this.props.mediaQuery, mediaSize); // Don't render the row if it's been disabled at this size
+      const shouldDisplay = queryMatchesSize(this.props.mediaQuery, mediaSize);
 
       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, {
+      const filteredContents = React.Children.toArray(contents).filter(item => Cell.isClassOf(item) ? Cell.shouldDisplay(item.props, mediaSize) : true).reduce((acc, elem, index) => [].concat(acc, [elem, 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, {
+      })]), []).slice(0, -1);
+      return React.createElement(View, {
         style: [styles.row, !!maxWidth && styles.rowMaxWidth, !!maxWidth && {
           maxWidth
         }, style]
-      }, /*#__PURE__*/createElement(Strut, {
+      }, React.createElement(Strut, {
         size: marginWidth
-      }), filteredContents, /*#__PURE__*/createElement(Strut, {
+      }), filteredContents, React.createElement(Strut, {
         size: marginWidth
       }));
     });