@semcore/flex-box - npm Package Compare versions

Comparing version 3.5.2 to 3.5.3

CHANGELOG.md

@@ -5,2 +5,8 @@ # Changelog
 
+## [3.5.3] - 2020-01-23
+
+### Fixed
+
+- Свойство `inline` (inline-flex), `direction` & `reverse` (flex-direction), `wrap` (flex-wrap) выставляется через CSS-in-JS, это не ломает обратную совместимость 🙄
+
 ## [3.5.2] - 2020-01-16
@@ -10,5 +16,3 @@
 
-- Свойство `inline` (inline-flex) выставляется через CSS-класс
-- Свойство `direction` & `reverse` (flex-direction) выставляются через CSS-класс
-- Свойство `wrap` (flex-wrap) выставляется через CSS-класс
+- Свойство `inline` (inline-flex), `direction` & `reverse` (flex-direction), `wrap` (flex-wrap) выставляется через CSS-класс, это улучшает производиительность
 
@@ -15,0 +19,0 @@ ## [3.5.1] - 2020-01-15

lib/index.es.js

@@ -6,4 +6,2 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import UI from '@semcore/ui';
-import cn from 'classnames';
-import injectStyle from '@semcore/utils/lib/injectStyle';
 
@@ -122,37 +120,3 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-(function cssModulesFnInject(_path, _pathMedia) {
-  if (_path || _pathMedia) {
-    injectStyle("._flex_n6a0r_gg_{display:-webkit-box;display:flex}._flex--inline_158pa_gg_{display:-webkit-inline-box;display:inline-flex}._flex--wrap_vyppn_gg_{flex-wrap:wrap}._flex--direction_row_1l055_gg_{-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}._flex--direction_row-reverse_apc37_gg_{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;flex-direction:row-reverse}._flex--direction_column_1nmel_gg_{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}._flex--direction_column-reverse_1q50f_gg_{-webkit-box-orient:vertical;-webkit-box-direction:reverse;flex-direction:column-reverse}");
-  }
-})("@semcore/flex-box/lib/flex.style.css");
-
-function block() {
-  return '_flex_n6a0r_gg_';
-}
-
-block['inline'] = function (value) {
-  return {
-    "block": "_flex--inline_158pa_gg_"
-  }[value !== undefined ? value : 'block'];
-};
-
-block['wrap'] = function (value) {
-  return {
-    "block": "_flex--wrap_vyppn_gg_"
-  }[value !== undefined ? value : 'block'];
-};
-
-block['direction'] = function (value) {
-  return {
-    "row": "_flex--direction_row_1l055_gg_",
-    "row-reverse": "_flex--direction_row-reverse_apc37_gg_",
-    "column": "_flex--direction_column_1nmel_gg_",
-    "column-reverse": "_flex--direction_column-reverse_1q50f_gg_"
-  }[value !== undefined ? value : 'block'];
-};
-
 var Flex = React.forwardRef(function (props, ref) {
-  var _cn;
-
   var inline = props.inline,
@@ -166,8 +130,21 @@ flex = props.flex,
       justifyContent = props.justifyContent,
-      className = props.className,
       css = props.css,
-      other = _objectWithoutProperties(props, ["inline", "flex", "reverse", "direction", "flexWrap", "alignItems", "alignContent", "justifyContent", "className", "css"]);
+      other = _objectWithoutProperties(props, ["inline", "flex", "reverse", "direction", "flexWrap", "alignItems", "alignContent", "justifyContent", "css"]);
 
-  var cssStyle = {};
+  var cssStyle = {
+    display: inline ? 'inline-flex' : 'flex'
+  };
 
+  if (flex) {
+    cssStyle.flex = flex;
+  }
+
+  if (flexWrap) {
+    cssStyle.flexWrap = "wrap".concat(reverse ? '-reverse' : '');
+  }
+
+  if (direction || reverse) {
+    cssStyle.flexDirection = "".concat(direction || 'row').concat(reverse ? '-reverse' : '');
+  }
+
   if (alignItems) {
@@ -185,13 +162,5 @@ cssStyle.alignItems = alignItems;
 
-  var combinedDirection;
-
-  if (direction || reverse) {
-    combinedDirection = "".concat(direction || 'row').concat(reverse ? '-reverse' : '');
-  }
-
-  var styles = cn((_cn = {}, _defineProperty(_cn, block(), !inline), _defineProperty(_cn, block.inline(), inline), _defineProperty(_cn, block.wrap(), flexWrap), _defineProperty(_cn, block.direction(combinedDirection), combinedDirection), _cn), className);
   return React.createElement(Box$1, Object.assign({}, other, {
     ref: ref,
-    css: _objectSpread$1({}, cssStyle, {}, css),
-    className: styles
+    css: _objectSpread$1({}, cssStyle, {}, css)
   }));
@@ -198,0 +167,0 @@ });

lib/index.js

@@ -12,4 +12,2 @@ 'use strict';
 var UI = _interopDefault(require('@semcore/ui'));
-var cn = _interopDefault(require('classnames'));
-var injectStyle = _interopDefault(require('@semcore/utils/lib/injectStyle'));
 
@@ -128,37 +126,3 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-(function cssModulesFnInject(_path, _pathMedia) {
-  if (_path || _pathMedia) {
-    injectStyle("._flex_n6a0r_gg_{display:-webkit-box;display:flex}._flex--inline_158pa_gg_{display:-webkit-inline-box;display:inline-flex}._flex--wrap_vyppn_gg_{flex-wrap:wrap}._flex--direction_row_1l055_gg_{-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}._flex--direction_row-reverse_apc37_gg_{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;flex-direction:row-reverse}._flex--direction_column_1nmel_gg_{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}._flex--direction_column-reverse_1q50f_gg_{-webkit-box-orient:vertical;-webkit-box-direction:reverse;flex-direction:column-reverse}");
-  }
-})("@semcore/flex-box/lib/flex.style.css");
-
-function block() {
-  return '_flex_n6a0r_gg_';
-}
-
-block['inline'] = function (value) {
-  return {
-    "block": "_flex--inline_158pa_gg_"
-  }[value !== undefined ? value : 'block'];
-};
-
-block['wrap'] = function (value) {
-  return {
-    "block": "_flex--wrap_vyppn_gg_"
-  }[value !== undefined ? value : 'block'];
-};
-
-block['direction'] = function (value) {
-  return {
-    "row": "_flex--direction_row_1l055_gg_",
-    "row-reverse": "_flex--direction_row-reverse_apc37_gg_",
-    "column": "_flex--direction_column_1nmel_gg_",
-    "column-reverse": "_flex--direction_column-reverse_1q50f_gg_"
-  }[value !== undefined ? value : 'block'];
-};
-
 var Flex = React.forwardRef(function (props, ref) {
-  var _cn;
-
   var inline = props.inline,
@@ -172,8 +136,21 @@ flex = props.flex,
       justifyContent = props.justifyContent,
-      className = props.className,
       css = props.css,
-      other = _objectWithoutProperties(props, ["inline", "flex", "reverse", "direction", "flexWrap", "alignItems", "alignContent", "justifyContent", "className", "css"]);
+      other = _objectWithoutProperties(props, ["inline", "flex", "reverse", "direction", "flexWrap", "alignItems", "alignContent", "justifyContent", "css"]);
 
-  var cssStyle = {};
+  var cssStyle = {
+    display: inline ? 'inline-flex' : 'flex'
+  };
 
+  if (flex) {
+    cssStyle.flex = flex;
+  }
+
+  if (flexWrap) {
+    cssStyle.flexWrap = "wrap".concat(reverse ? '-reverse' : '');
+  }
+
+  if (direction || reverse) {
+    cssStyle.flexDirection = "".concat(direction || 'row').concat(reverse ? '-reverse' : '');
+  }
+
   if (alignItems) {
@@ -191,13 +168,5 @@ cssStyle.alignItems = alignItems;
 
-  var combinedDirection;
-
-  if (direction || reverse) {
-    combinedDirection = "".concat(direction || 'row').concat(reverse ? '-reverse' : '');
-  }
-
-  var styles = cn((_cn = {}, _defineProperty(_cn, block(), !inline), _defineProperty(_cn, block.inline(), inline), _defineProperty(_cn, block.wrap(), flexWrap), _defineProperty(_cn, block.direction(combinedDirection), combinedDirection), _cn), className);
   return React.createElement(Box$1, Object.assign({}, other, {
     ref: ref,
-    css: _objectSpread$1({}, cssStyle, {}, css),
-    className: styles
+    css: _objectSpread$1({}, cssStyle, {}, css)
   }));
@@ -204,0 +173,0 @@ });

package.json

 {
   "name": "@semcore/flex-box",
   "description": "SEMRush FlexBox Component",
-  "version": "3.5.2",
+  "version": "3.5.3",
   "main": "lib/index.js",
@@ -6,0 +6,0 @@ "module": "lib/index.es.js",

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

Worsened metrics

Total package byte prevSize

54071

decreased by-7.75%

Number of package files

15

decreased by-6.25%

Lines of code

673

decreased by-10.74%

No dependency changes