@khanacademy/wonder-blocks-layout 1.4.13 → 1.4.15

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @khanacademy/wonder-blocks-layout
 
+## 1.4.15
+
+### Patch Changes
+
+-   Updated dependencies [496119f2]
+    -   @khanacademy/wonder-blocks-core@4.6.2
+
+## 1.4.14
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-core@4.6.1
+
 ## 1.4.13
 
 ### Patch Changes

package/dist/index.js

@@ -0,0 +1,294 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _extends = require('@babel/runtime/helpers/extends');
+var React = require('react');
+var Spacing = require('@khanacademy/wonder-blocks-spacing');
+var aphrodite = require('aphrodite');
+var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+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 _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var Spacing__default = /*#__PURE__*/_interopDefaultLegacy(Spacing);
+
+const VALID_MEDIA_SIZES = ["small", "medium", "large"];
+const mediaDefaultSpecLargeMarginWidth = Spacing__default["default"].large_24;
+const MEDIA_DEFAULT_SPEC = {
+  small: {
+    query: "(max-width: 767px)",
+    totalColumns: 4,
+    gutterWidth: Spacing__default["default"].medium_16,
+    marginWidth: Spacing__default["default"].medium_16
+  },
+  medium: {
+    query: "(min-width: 768px) and (max-width: 1023px)",
+    totalColumns: 8,
+    gutterWidth: Spacing__default["default"].xLarge_32,
+    marginWidth: Spacing__default["default"].large_24
+  },
+  large: {
+    query: "(min-width: 1024px)",
+    totalColumns: 12,
+    gutterWidth: Spacing__default["default"].xLarge_32,
+    marginWidth: mediaDefaultSpecLargeMarginWidth,
+    maxWidth: 1120 + mediaDefaultSpecLargeMarginWidth * 2
+  }
+};
+const MEDIA_INTERNAL_SPEC = {
+  large: {
+    query: "(min-width: 1px)",
+    totalColumns: 12,
+    gutterWidth: Spacing__default["default"].xLarge_32,
+    marginWidth: Spacing__default["default"].medium_16
+  }
+};
+const MEDIA_MODAL_SPEC = {
+  small: {
+    query: "(max-width: 767px)",
+    totalColumns: 4,
+    gutterWidth: Spacing__default["default"].medium_16,
+    marginWidth: Spacing__default["default"].medium_16
+  },
+  large: {
+    query: "(min-width: 768px)",
+    totalColumns: 12,
+    gutterWidth: Spacing__default["default"].xLarge_32,
+    marginWidth: Spacing__default["default"].xxLarge_48
+  }
+};
+
+const defaultContext = {
+  ssrSize: "large",
+  mediaSpec: MEDIA_DEFAULT_SPEC
+};
+var MediaLayoutContext = React__namespace.createContext(defaultContext);
+
+const queries = [].concat(Object.values(MEDIA_DEFAULT_SPEC).map(spec => spec.query), Object.values(MEDIA_INTERNAL_SPEC).map(spec => spec.query), Object.values(MEDIA_MODAL_SPEC).map(spec => spec.query));
+const mediaQueryLists = {};
+const DEFAULT_SIZE = "large";
+
+class MediaLayoutInternal extends React__namespace.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      size: undefined
+    };
+    this.cleanupThunks = [];
+  }
+
+  componentDidMount() {
+    const entries = Object.entries(this.props.mediaSpec);
+
+    for (const [size, spec] of entries) {
+      const mql = mediaQueryLists[spec.query];
+
+      if (!mql) {
+        continue;
+      }
+
+      const listener = e => {
+        if (e.matches) {
+          this.setState({
+            size
+          });
+        }
+      };
+
+      mql.addListener(listener);
+      this.cleanupThunks.push(() => mql.removeListener(listener));
+    }
+  }
+
+  componentWillUnmount() {
+    this.cleanupThunks.forEach(cleaup => cleaup());
+  }
+
+  getCurrentSize(spec) {
+    if (this.state.size) {
+      return this.state.size;
+    } else {
+      const entries = Object.entries(this.props.mediaSpec);
+
+      for (const [size, _spec] of entries) {
+        const mql = mediaQueryLists[_spec.query];
+
+        if (mql.matches) {
+          return size;
+        }
+      }
+    }
+
+    return DEFAULT_SIZE;
+  }
+
+  isServerSide() {
+    return typeof window === "undefined" || !window.matchMedia;
+  }
+
+  getMockStyleSheet(mediaSize) {
+    const {
+      styleSheets
+    } = this.props;
+    const mockStyleSheet = {};
+
+    if (!styleSheets) {
+      return mockStyleSheet;
+    }
+
+    for (const styleSize of Object.keys(styleSheets)) {
+      const styleSheet = styleSheets[styleSize];
+
+      if (!styleSheet) {
+        continue;
+      }
+
+      for (const name of Object.keys(styleSheet)) {
+        if (Object.prototype.hasOwnProperty.call(mockStyleSheet, name)) {
+          continue;
+        }
+
+        mockStyleSheet[name] = [styleSheets.all && styleSheets.all[name], mediaSize === "small" && [styleSheets.mdOrSmaller && styleSheets.mdOrSmaller[name], styleSheets.small && styleSheets.small[name]], mediaSize === "medium" && [styleSheets.mdOrSmaller && styleSheets.mdOrSmaller[name], styleSheets.mdOrLarger && styleSheets.mdOrLarger[name], styleSheets.medium && styleSheets.medium[name]], mediaSize === "large" && [styleSheets.mdOrLarger && styleSheets.mdOrLarger[name], styleSheets.large && styleSheets.large[name]]];
+      }
+    }
+
+    return mockStyleSheet;
+  }
+
+  render() {
+    const {
+      children,
+      mediaSpec,
+      ssrSize,
+      overrideSize
+    } = this.props;
+
+    if (!this.isServerSide()) {
+      for (const query of queries.filter(query => !mediaQueryLists[query])) {
+        mediaQueryLists[query] = window.matchMedia(query);
+      }
+    }
+
+    const mediaSize = overrideSize || this.isServerSide() && ssrSize || this.getCurrentSize(mediaSpec);
+    const styles = this.getMockStyleSheet(mediaSize);
+    return children({
+      mediaSize,
+      mediaSpec,
+      styles
+    });
+  }
+
+}
+
+class MediaLayout extends React__namespace.Component {
+  render() {
+    return React__namespace.createElement(MediaLayoutContext.Consumer, null, ({
+      overrideSize,
+      ssrSize,
+      mediaSpec
+    }) => React__namespace.createElement(MediaLayoutInternal, _extends__default["default"]({}, this.props, {
+      overrideSize: overrideSize,
+      ssrSize: ssrSize,
+      mediaSpec: mediaSpec
+    })));
+  }
+
+}
+
+class Spring extends React__namespace.Component {
+  render() {
+    const {
+      style
+    } = this.props;
+    return React__namespace.createElement(wonderBlocksCore.View, {
+      "aria-hidden": "true",
+      style: [styles.grow, style]
+    });
+  }
+
+}
+const styles = aphrodite.StyleSheet.create({
+  grow: {
+    flexGrow: 1
+  }
+});
+
+class Strut extends React__namespace.Component {
+  render() {
+    const {
+      size,
+      style
+    } = this.props;
+    return React__namespace.createElement(wonderBlocksCore.View, {
+      "aria-hidden": "true",
+      style: [strutStyle(size), style]
+    });
+  }
+
+}
+
+const strutStyle = size => {
+  return {
+    width: size,
+    MsFlexBasis: size,
+    MsFlexPreferredSize: size,
+    WebkitFlexBasis: size,
+    flexBasis: size,
+    flexShrink: 0
+  };
+};
+
+const queryMatchesSize = (mediaQuery, mediaSize) => {
+  switch (mediaQuery) {
+    case "all":
+      return true;
+
+    case "small":
+      return mediaSize === "small";
+
+    case "mdOrSmaller":
+      return mediaSize === "medium" || mediaSize === "small";
+
+    case "medium":
+      return mediaSize === "medium";
+
+    case "mdOrLarger":
+      return mediaSize === "medium" || mediaSize === "large";
+
+    case "large":
+      return mediaSize === "large";
+
+    default:
+      throw new Error(`Unsupported mediaSize: ${mediaSize}`);
+  }
+};
+
+exports.MEDIA_DEFAULT_SPEC = MEDIA_DEFAULT_SPEC;
+exports.MEDIA_INTERNAL_SPEC = MEDIA_INTERNAL_SPEC;
+exports.MEDIA_MODAL_SPEC = MEDIA_MODAL_SPEC;
+exports.MediaLayout = MediaLayout;
+exports.MediaLayoutContext = MediaLayoutContext;
+exports.Spring = Spring;
+exports.Strut = Strut;
+exports.VALID_MEDIA_SIZES = VALID_MEDIA_SIZES;
+exports.queryMatchesSize = queryMatchesSize;

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-layout",
-  "version": "1.4.13",
+  "version": "1.4.15",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -14,11 +14,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-core": "^4.6.0",
+    "@khanacademy/wonder-blocks-core": "^4.6.2",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.5.0"
+    "wb-dev-build-settings": "^0.7.0"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",