@khanacademy/wonder-blocks-grid 1.0.24

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Khan Academy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/es/index.js

@@ -0,0 +1,276 @@
+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';
+
+const WIDE_SCREEN = "@media (min-width: 1168px)";
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    width: "100%"
+  },
+  rowMaxWidth: {
+    [WIDE_SCREEN]: {
+      margin: "0 auto"
+    }
+  },
+  cellGrow: {
+    flexGrow: 1
+  },
+  cellFixed: {
+    flexShrink: 0
+  }
+});
+
+const flexBasis = size => {
+  return {
+    MsFlexBasis: size,
+    MsFlexPreferredSize: size,
+    WebkitFlexBasis: size,
+    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 {
+  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") {
+      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;
+  }
+
+  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);
+    });
+  }
+
+}
+Cell.defaultProps = {
+  smallCols: 0,
+  mediumCols: 0,
+  largeCols: 0,
+  cols: 0
+};
+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 {
+  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
+      });
+    });
+  }
+
+}
+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 {
+  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).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
+      }));
+    });
+  }
+
+}
+Row.defaultProps = {
+  mediaQuery: "all"
+};
+
+export { Cell, Row };