boxible - npm Package Compare versions

Comparing version 1.5.1 to 1.6.0

dist/box.d.ts

@@ -6,4 +6,4 @@ /// <reference types="react" />
 interface FlexGrowShrinkI {
-    grow?: string;
-    shrink?: string;
+    grow?: number;
+    shrink?: number;
 }
@@ -10,0 +10,0 @@ declare type FlexGrowT = boolean | keyof typeof FLEX | FlexGrowShrinkI;

dist/index.js

@@ -159,5 +159,9 @@ var styled = require('@emotion/styled');
   if (typeof flex === 'boolean') {
-    flexStyle = flex ? '1 1' : '0 0';
+    flexStyle = '1 1'; // function won't be called if flex is false (but why use Box if you don't want flex?)
   }
 
+  if (typeof flex == 'object') {
+    flexStyle = `${flex.grow} ${flex.shrink}`;
+  }
+
   if (typeof flex == 'string') {
@@ -167,4 +171,4 @@ flexStyle = FLEX[flex];
 
-  const basisStyle = flex !== true && !basis ? ' auto' : '';
-  return `flex: ${flexStyle}${basisStyle}; `;
+  const basisStyleDef = basis ? `${BASIS[basis] || basis}` : 'auto';
+  return `flex: ${flexStyle} ${basisStyleDef}; `;
 };
@@ -287,4 +291,5 @@
     ${({
+  flex,
   basis
-}) => basis && basisStyle(basis)}
+}) => !flex && basis && basisStyle(basis)}
     ${({
@@ -291,0 +296,0 @@ gap

dist/index.modern.js

@@ -158,5 +158,9 @@ import styled from '@emotion/styled';
   if (typeof flex === 'boolean') {
-    flexStyle = flex ? '1 1' : '0 0';
+    flexStyle = '1 1'; // function won't be called if flex is false (but why use Box if you don't want flex?)
   }
 
+  if (typeof flex == 'object') {
+    flexStyle = `${flex.grow} ${flex.shrink}`;
+  }
+
   if (typeof flex == 'string') {
@@ -166,4 +170,4 @@ flexStyle = FLEX[flex];
 
-  const basisStyle = flex !== true && !basis ? ' auto' : '';
-  return `flex: ${flexStyle}${basisStyle}; `;
+  const basisStyleDef = basis ? `${BASIS[basis] || basis}` : 'auto';
+  return `flex: ${flexStyle} ${basisStyleDef}; `;
 };
@@ -294,4 +298,5 @@
 }) => flex && flexStyle(flex, basis), ({
+  flex,
   basis
-}) => basis && basisStyle(basis), ({
+}) => !flex && basis && basisStyle(basis), ({
   gap
@@ -298,0 +303,0 @@ }) => gap && gapStyle(gap), ({

dist/index.module.js

@@ -155,5 +155,9 @@ import styled from '@emotion/styled';
   if (typeof flex === 'boolean') {
-    flexStyle = flex ? '1 1' : '0 0';
+    flexStyle = '1 1'; // function won't be called if flex is false (but why use Box if you don't want flex?)
   }
 
+  if (typeof flex == 'object') {
+    flexStyle = `${flex.grow} ${flex.shrink}`;
+  }
+
   if (typeof flex == 'string') {
@@ -163,4 +167,4 @@ flexStyle = FLEX[flex];
 
-  const basisStyle = flex !== true && !basis ? ' auto' : '';
-  return `flex: ${flexStyle}${basisStyle}; `;
+  const basisStyleDef = basis ? `${BASIS[basis] || basis}` : 'auto';
+  return `flex: ${flexStyle} ${basisStyleDef}; `;
 };
@@ -283,4 +287,5 @@
     ${({
+  flex,
   basis
-}) => basis && basisStyle(basis)}
+}) => !flex && basis && basisStyle(basis)}
     ${({
@@ -287,0 +292,0 @@ gap

dist/index.umd.js

@@ -162,5 +162,9 @@ (function (global, factory) {
       if (typeof flex === 'boolean') {
-        flexStyle = flex ? '1 1' : '0 0';
+        flexStyle = '1 1'; // function won't be called if flex is false (but why use Box if you don't want flex?)
       }
 
+      if (typeof flex == 'object') {
+        flexStyle = `${flex.grow} ${flex.shrink}`;
+      }
+
       if (typeof flex == 'string') {
@@ -170,4 +174,4 @@ flexStyle = FLEX[flex];
 
-      const basisStyle = flex !== true && !basis ? ' auto' : '';
-      return `flex: ${flexStyle}${basisStyle}; `;
+      const basisStyleDef = basis ? `${BASIS[basis] || basis}` : 'auto';
+      return `flex: ${flexStyle} ${basisStyleDef}; `;
     };
@@ -290,4 +294,5 @@
     ${({
+  flex,
   basis
-}) => basis && basisStyle(basis)}
+}) => !flex && basis && basisStyle(basis)}
     ${({
@@ -294,0 +299,0 @@ gap

package.json

 {
   "name": "boxible",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "description": "Typescript React component to set flexbox properties on a element",
@@ -5,0 +5,0 @@ "repository": "https://github.com/nathanstitt/boxible",

src/box.ts

@@ -31,4 +31,4 @@ import styled, { CSSObject } from '@emotion/styled'
 interface FlexGrowShrinkI {
-    grow?: string
-    shrink?: string
+    grow?: number
+    shrink?: number
 }
@@ -41,5 +41,7 @@
     if (typeof flex === 'boolean') {
-        flexStyle = flex ? '1 1' : '0 0'
+        flexStyle = '1 1' // function won't be called if flex is false (but why use Box if you don't want flex?)
     }
-
+    if (typeof flex == 'object') {
+        flexStyle = `${flex.grow} ${flex.shrink}`
+    }
     if (typeof flex == 'string') {
@@ -49,5 +51,5 @@ flexStyle = FLEX[flex]
 
-    const basisStyle = flex !== true && !basis ? ' auto' : ''
+    const basisStyleDef = basis ? `${BASIS[basis] || basis}` : 'auto'
 
-    return `flex: ${flexStyle}${basisStyle}; `
+    return `flex: ${flexStyle} ${basisStyleDef}; `
 }
@@ -175,3 +177,3 @@
     ${({ flex, basis }) => flex && flexStyle(flex, basis)}
-    ${({ basis }) => basis && basisStyle(basis)}
+    ${({ flex, basis }) => !flex && basis && basisStyle(basis)}
     ${({ gap }: any) => gap && gapStyle(gap)}
@@ -178,0 +180,0 @@ ${({ height }) => height && heightStyle(height)}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

145578

increased by1.74%

Lines of code

1640

increased by1.17%

No dependency changes