@s-ui/react-layout-grid - npm Package Compare versions

Comparing version 1.6.0 to 2.0.0

lib/gridItem/index.js

@@ -1,22 +0,67 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { BASE_CLASS, CELL_NUMBERS } from '../settings';
-export default function LayoutGridItem(_ref) {
-  var children = _ref.children,
-      l = _ref.l,
-      lOffset = _ref.lOffset,
-      m = _ref.m,
-      mOffset = _ref.mOffset,
-      s = _ref.s,
-      sOffset = _ref.sOffset,
-      xl = _ref.xl,
-      xlOffset = _ref.xlOffset,
-      xs = _ref.xs,
-      xsOffset = _ref.xsOffset,
-      xxl = _ref.xxl,
-      xxlOffset = _ref.xxlOffset,
-      xxs = _ref.xxs,
-      xxsOffset = _ref.xxsOffset;
-  var classNames = cx(BASE_CLASS + "-item", l && BASE_CLASS + "-item--l-" + l, lOffset && BASE_CLASS + "-item--lOffset-" + lOffset, m && BASE_CLASS + "-item--m-" + m, mOffset && BASE_CLASS + "-item--mOffset-" + mOffset, s && BASE_CLASS + "-item--s-" + s, sOffset && BASE_CLASS + "-item--sOffset-" + sOffset, xl && BASE_CLASS + "-item--xl-" + xl, xlOffset && BASE_CLASS + "-item--xlOffset-" + xlOffset, xs && BASE_CLASS + "-item--xs-" + xs, xsOffset && BASE_CLASS + "-item--xsOffset-" + xsOffset, xxl && BASE_CLASS + "-item--xxl-" + xxl, xxlOffset && BASE_CLASS + "-item--xxlOffset-" + xxlOffset, xxs && BASE_CLASS + "-item--xxs-" + xxs, xxsOffset && BASE_CLASS + "-item--xxsOffset-" + xxsOffset);
+import { BASE_CLASS, CELL_NUMBERS, BREAKPOINTS } from '../settings';
+/**
+ * getColSpanClassNamesTransform: gets the classes of each media query
+ * depending on the combination of its values. breakpoint key values
+ * are preferred over colSpan values
+ * @param colSpan
+ * @param otherProps {xxs, xs, s, m, l, xl, xxl}
+ * @returns {null|string} – classnames for the column span
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+export var getColSpanClassNamesTransform = function getColSpanClassNamesTransform(_ref) {
+  var colSpan = _ref.colSpan,
+      otherProps = _objectWithoutPropertiesLoose(_ref, ["colSpan"]);
+
+  var getValidBreakpointValue = function getValidBreakpointValue(colSpanValue, breakpointValue) {
+    return CELL_NUMBERS.includes(breakpointValue) ? breakpointValue : false || CELL_NUMBERS.includes(colSpanValue) ? colSpanValue : false;
+  };
+
+  var response = Object.values(BREAKPOINTS).reduce(function (acc, breakpointName) {
+    var value;
+
+    if (breakpointName === 'xxs') {
+      value = getValidBreakpointValue(typeof colSpan === 'number' && CELL_NUMBERS.includes(colSpan) ? colSpan : colSpan == null ? void 0 : colSpan[breakpointName], otherProps[breakpointName]);
+    } else {
+      value = getValidBreakpointValue(colSpan == null ? void 0 : colSpan[breakpointName], otherProps[breakpointName]);
+    }
+
+    return value ? (acc + " " + BASE_CLASS + "-item--" + breakpointName + "-" + value).trim() : acc;
+  }, '');
+  return response === '' ? null : response;
+};
+export default function LayoutGridItem(_ref2) {
+  var children = _ref2.children,
+      colSpan = _ref2.colSpan,
+      l = _ref2.l,
+      lOffset = _ref2.lOffset,
+      m = _ref2.m,
+      mOffset = _ref2.mOffset,
+      s = _ref2.s,
+      sOffset = _ref2.sOffset,
+      xl = _ref2.xl,
+      xlOffset = _ref2.xlOffset,
+      xs = _ref2.xs,
+      xsOffset = _ref2.xsOffset,
+      xxl = _ref2.xxl,
+      xxlOffset = _ref2.xxlOffset,
+      xxs = _ref2.xxs,
+      xxsOffset = _ref2.xxsOffset;
+  var spanClassnames = useMemo(function () {
+    return getColSpanClassNamesTransform({
+      colSpan: colSpan,
+      xxl: xxl,
+      xl: xl,
+      l: l,
+      m: m,
+      s: s,
+      xs: xs,
+      xxs: xxs
+    });
+  }, [colSpan, xxl, xl, l, m, s, xs, xxs]);
+  var classNames = cx(BASE_CLASS + "-item", spanClassnames, xxsOffset && BASE_CLASS + "-item--xxsOffset-" + xxsOffset, xsOffset && BASE_CLASS + "-item--xsOffset-" + xsOffset, sOffset && BASE_CLASS + "-item--sOffset-" + sOffset, mOffset && BASE_CLASS + "-item--mOffset-" + mOffset, lOffset && BASE_CLASS + "-item--lOffset-" + lOffset, xlOffset && BASE_CLASS + "-item--xlOffset-" + xlOffset, xxlOffset && BASE_CLASS + "-item--xxlOffset-" + xxlOffset);
   return /*#__PURE__*/_jsx("div", {
@@ -23,0 +68,0 @@ className: classNames,

lib/index.js

@@ -1,14 +0,47 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import PropTypes from 'prop-types';
 import LayoutGridItem from './gridItem';
 import cx from 'classnames';
-import { ALIGN_ITEMS, BASE_CLASS, JUSTIFY_CONTENT } from './settings';
+import { ALIGN_ITEMS, BASE_CLASS, JUSTIFY_CONTENT, GUTTER_VALUES, BREAKPOINTS } from './settings';
+import { jsx as _jsx } from "react/jsx-runtime";
 
-function LayoutGrid(_ref) {
-  var alignItems = _ref.alignItems,
-      children = _ref.children,
-      justifyContent = _ref.justifyContent,
-      _ref$isGapless = _ref.isGapless,
-      isGapless = _ref$isGapless === void 0 ? false : _ref$isGapless;
-  var classNames = cx("" + BASE_CLASS, alignItems && BASE_CLASS + "--ai-" + alignItems, justifyContent && BASE_CLASS + "--jc-" + justifyContent, isGapless && "is-gapless");
+var transition = function transition(_ref) {
+  var isGapless = _ref.isGapless,
+      oldProps = _objectWithoutPropertiesLoose(_ref, ["isGapless"]);
+
+  var gutter = oldProps.gutter || isGapless ? 0 : undefined;
+  return _extends({
+    gutter: gutter
+  }, oldProps);
+};
+
+var getGutterClassNames = function getGutterClassNames(gutterConfig) {
+  if (gutterConfig === void 0) {
+    gutterConfig = {};
+  }
+
+  if (GUTTER_VALUES.includes(gutterConfig)) {
+    return BASE_CLASS + "--gutter-" + BREAKPOINTS.XXS + "-" + gutterConfig;
+  } else if (typeof gutterConfig === 'object') {
+    return Object.entries(gutterConfig).map(function (_ref2) {
+      var key = _ref2[0],
+          value = _ref2[1];
+      return Object.values(BREAKPOINTS).includes(key) ? BASE_CLASS + "--gutter-" + key + "-" + value : null;
+    }).filter(function (value) {
+      return value !== null;
+    }).join(' ');
+  }
+
+  return null;
+};
+
+function LayoutGrid(props) {
+  var _transition = transition(props),
+      alignItems = _transition.alignItems,
+      children = _transition.children,
+      justifyContent = _transition.justifyContent,
+      gutter = _transition.gutter;
+
+  var classNames = cx("" + BASE_CLASS, alignItems && BASE_CLASS + "--ai-" + alignItems, justifyContent && BASE_CLASS + "--jc-" + justifyContent, getGutterClassNames(gutter));
   return /*#__PURE__*/_jsx("div", {
@@ -22,2 +55,2 @@ className: classNames,
 export default LayoutGrid;
-export { LayoutGridItem, ALIGN_ITEMS as LayoutGridAlignItems, JUSTIFY_CONTENT as LayoutGridJustifyContent };
+export { LayoutGridItem, ALIGN_ITEMS as LayoutGridAlignItems, JUSTIFY_CONTENT as LayoutGridJustifyContent, GUTTER_VALUES as LayoutGridGutterValues, BREAKPOINTS as LayoutGridBreakpoints };

lib/settings.js

 // Base class for the component
 export var BASE_CLASS = 'sui-LayoutGrid'; // Number of layout cells
 
-export var CELL_NUMBERS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; // All `align-items` property values allowed
+export var CELL_NUMBERS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; // Number of possible grid guttering
 
+export var GUTTER_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+export var BREAKPOINTS = {
+  XXS: 'xxs',
+  XS: 'xs',
+  S: 's',
+  M: 'm',
+  L: 'l',
+  XL: 'xl',
+  XXL: 'xxl'
+}; // All `align-items` property values allowed
+
 export var ALIGN_ITEMS = {
@@ -7,0 +18,0 @@ CENTER: 'center',

package.json

 {
   "name": "@s-ui/react-layout-grid",
-  "version": "1.6.0",
+  "version": "2.0.0",
   "description": "",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

No alert changes

Improved metrics

Total package byte prevSize

13218

increased by38.93%

Lines of code

137

increased by124.59%

No dependency changes