@alexeyraspopov/stack-layout - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

index.js

 import React from 'react';
 
-let reserved = ['as', 'direction', 'alignment', 'spacing', 'style', 'children'];
+let reserved = ['as', 'direction', 'alignment', 'spacing', 'style', 'className'];
 
@@ -12,12 +12,22 @@ /**
 let Stack = React.forwardRef((props, ref) => {
-  let element = props.as || 'div';
   let spacing = getSpacing(props.spacing);
   let style = Object.assign({ '--stack-spacing': spacing }, props.style);
-  let direction = getDirection(props.direction);
-  let alignment = getAlignment(props.alignment);
-  let className = composeClassName('stack', direction, alignment, props.className);
+  let className = [
+    'stack',
+    getDirection(props.direction),
+    getAlignment(props.alignment),
+    isFlexGapSupported() || 'stack-fallback',
+    props.className,
+  ].filter(Boolean).join(' ');
   let fullProps = Object.assign({ ref, className, style }, omit(props, reserved));
-  return React.createElement(element, fullProps, ...props.children);
+  return React.createElement(props.as, fullProps);
 });
 
+Stack.defaultProps = {
+  as: 'div',
+  direction: 'vertical',
+  alignment: 'stretch',
+  spacing: 0,
+};
+
 function getSpacing(spacing, defaults) {
@@ -29,4 +39,2 @@ switch (typeof spacing) {
       return spacing;
-    default:
-      return 0;
   }
@@ -41,4 +49,2 @@ }
       return 'stack-horizontal';
-    default:
-      return 'stack-vertical';
   }
@@ -57,11 +63,5 @@ }
       return 'stack-stretch';
-    default:
-      return 'stack-stretch';
   }
 }
 
-function composeClassName(...classes) {
-  return classes.filter(Boolean).join(' ');
-}
-
 function omit(source, excluded) {
@@ -76,2 +76,16 @@ let result = {};
 
-export default Stack;
+let memoized = null;
+function isFlexGapSupported() {
+  if (memoized != null) return memoized;
+  let container = document.createElement('div');
+  container.style.cssText = 'display: flex; flex-direction: column; gap: 1px';
+  container.appendChild(document.createElement('div'));
+  container.appendChild(document.createElement('div'));
+  document.body.appendChild(container);
+  let isSupported = container.scrollHeight === 1;
+  document.body.removeChild(container);
+  memoized = isSupported;
+  return isSupported;
+}
+
+export default React.memo(Stack);

package.json

 {
   "name": "@alexeyraspopov/stack-layout",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "module": "index.js",
@@ -5,0 +5,0 @@ "files": [

README.md

 # stack-layout
 
-Layout primitive that abstracts flexbox in order to define the layout for children components.
+    npm install @alexeyraspopov/stack-layout
 
+Layout primitive that abstracts flexbox in order to define the layout for
+children components. See demo: https://alexeyraspopov.github.io/stack-layout/.
+
 ## Requirements
@@ -6,0 +9,0 @@

No alert changes

Improved metrics

Total package byte prevSize

5263

increased by8.83%

Lines of code

119

increased by4.39%

Number of lines in readme file

42

increased by7.69%

No dependency changes