@khanacademy/wonder-blocks-grid 1.0.35 → 1.0.37

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @khanacademy/wonder-blocks-grid
 
+## 1.0.37
+
+### Patch Changes
+
+-   496119f2: Cleanup WB interdependencies
+-   Updated dependencies [496119f2]
+    -   @khanacademy/wonder-blocks-core@4.6.2
+    -   @khanacademy/wonder-blocks-layout@1.4.15
+
+## 1.0.36
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-core@4.6.1
+
 ## 1.0.35
 
 ### Patch Changes

package/dist/index.js

@@ -0,0 +1,222 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
+var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
+var aphrodite = require('aphrodite');
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const WIDE_SCREEN = "@media (min-width: 1168px)";
+const styles = aphrodite.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
+  };
+};
+
+class Cell extends React__namespace.Component {
+  static isClassOf(instance) {
+    return instance && instance.type && instance.type.__IS_CELL__;
+  }
+
+  static getCols(props, mediaSize) {
+    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;
+    }
+
+    return null;
+  }
+
+  static shouldDisplay(props, mediaSize) {
+    const cols = Cell.getCols(props, mediaSize);
+    return cols !== null && cols !== 0;
+  }
+
+  render() {
+    const {
+      children,
+      style
+    } = this.props;
+    return React__namespace.createElement(wonderBlocksLayout.MediaLayout, null, ({
+      mediaSize,
+      mediaSpec
+    }) => {
+      const spec = mediaSpec[mediaSize];
+
+      if (!spec) {
+        throw new Error(`mediaSpec.${mediaSize} is undefined`);
+      }
+
+      const {
+        totalColumns,
+        gutterWidth,
+        marginWidth
+      } = spec;
+      const cols = Cell.getCols(this.props, mediaSize);
+
+      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.`);
+      }
+
+      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;
+      return React__namespace.createElement(wonderBlocksCore.View, {
+        style: [styles.cellFixed, flexBasis(calcWidth), style]
+      }, contents);
+    });
+  }
+
+}
+Cell.defaultProps = {
+  smallCols: 0,
+  mediumCols: 0,
+  largeCols: 0,
+  cols: 0
+};
+Cell.__IS_CELL__ = true;
+
+class Gutter extends React__namespace.Component {
+  render() {
+    return React__namespace.createElement(wonderBlocksLayout.MediaLayout, null, ({
+      mediaSize,
+      mediaSpec
+    }) => {
+      const spec = mediaSpec[mediaSize];
+
+      if (!spec) {
+        throw new Error(`mediaSpec.${mediaSize} is undefined`);
+      }
+
+      const {
+        gutterWidth
+      } = spec;
+
+      if (!wonderBlocksLayout.queryMatchesSize(this.props.mediaQuery, mediaSize)) {
+        return null;
+      }
+
+      return React__namespace.createElement(wonderBlocksLayout.Strut, {
+        size: gutterWidth
+      });
+    });
+  }
+
+}
+Gutter.defaultProps = {
+  mediaQuery: "all"
+};
+
+class Row extends React__namespace.Component {
+  render() {
+    const {
+      style,
+      children
+    } = this.props;
+    return React__namespace.createElement(wonderBlocksLayout.MediaLayout, null, ({
+      mediaSize,
+      mediaSpec
+    }) => {
+      const spec = mediaSpec[mediaSize];
+
+      if (!spec) {
+        throw new Error(`mediaSpec.${mediaSize} is undefined`);
+      }
+
+      const {
+        marginWidth,
+        maxWidth,
+        totalColumns
+      } = spec;
+      const shouldDisplay = wonderBlocksLayout.queryMatchesSize(this.props.mediaQuery, mediaSize);
+
+      if (!shouldDisplay) {
+        return null;
+      }
+
+      const contents = typeof children === "function" ? children({
+        mediaSize,
+        totalColumns
+      }) : children;
+      const filteredContents = React__namespace.Children.toArray(contents).filter(item => Cell.isClassOf(item) ? Cell.shouldDisplay(item.props, mediaSize) : true).reduce((acc, elem, index) => [].concat(acc, [elem, React__namespace.createElement(Gutter, {
+        key: `gutter-${index}`
+      })]), []).slice(0, -1);
+      return React__namespace.createElement(wonderBlocksCore.View, {
+        style: [styles.row, !!maxWidth && styles.rowMaxWidth, !!maxWidth && {
+          maxWidth
+        }, style]
+      }, React__namespace.createElement(wonderBlocksLayout.Strut, {
+        size: marginWidth
+      }), filteredContents, React__namespace.createElement(wonderBlocksLayout.Strut, {
+        size: marginWidth
+      }));
+    });
+  }
+
+}
+Row.defaultProps = {
+  mediaQuery: "all"
+};
+
+exports.Cell = Cell;
+exports.Row = Row;

package/dist/index.js.flow

@@ -0,0 +1,2 @@
+// @flow
+export * from "../src/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-grid",
-  "version": "1.0.35",
+  "version": "1.0.37",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -17,7 +17,8 @@
   "dependencies": {
     "@babel/runtime": "^7.18.6",
     "@khanacademy/wonder-blocks-color": "^1.2.0",
-    "@khanacademy/wonder-blocks-core": "^4.6.0",
+    "@khanacademy/wonder-blocks-core": "^4.6.2",
+    "@khanacademy/wonder-blocks-layout": "^1.4.15",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5"
   },
   "peerDependencies": {
@@ -25,6 +26,6 @@
     "react": "16.14.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.5.0"
+    "wb-dev-build-settings": "^0.7.0"
   }
-}
+}