Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@semcore/flex-box
Advanced tools
@semcore/flex-box - npm Package Compare versions
Comparing version 3.5.1 to 3.5.2
@@ -5,2 +5,10 @@ # Changelog | ||
| ## [3.5.2] - 2020-01-16 | ||
| ### Changed | ||
| - Свойство `inline` (inline-flex) выставляется через CSS-класс | ||
| - Свойство `direction` & `reverse` (flex-direction) выставляются через CSS-класс | ||
| - Свойство `wrap` (flex-wrap) выставляется через CSS-класс | ||
| ## [3.5.1] - 2020-01-15 | ||
@@ -10,3 +18,3 @@ | ||
| - Возвращены обратно единицы измерения отступов в px(были в rem) | ||
| - Возвращены единицы измерения отступов в px(были в rem) | ||
@@ -13,0 +21,0 @@ ## [3.5.0] - 2019-12-26 |
@@ -6,2 +6,4 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty'; | ||
| import UI from '@semcore/ui'; | ||
| import cn from 'classnames'; | ||
| import injectStyle from '@semcore/utils/lib/injectStyle'; | ||
@@ -120,3 +122,37 @@ 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, | ||
@@ -130,21 +166,8 @@ flex = props.flex, | ||
| justifyContent = props.justifyContent, | ||
| className = props.className, | ||
| css = props.css, | ||
| other = _objectWithoutProperties(props, ["inline", "flex", "reverse", "direction", "flexWrap", "alignItems", "alignContent", "justifyContent", "css"]); | ||
| other = _objectWithoutProperties(props, ["inline", "flex", "reverse", "direction", "flexWrap", "alignItems", "alignContent", "justifyContent", "className", "css"]); | ||
| var cssStyle = { | ||
| display: inline ? 'inline-flex' : 'flex' | ||
| }; | ||
| var cssStyle = {}; | ||
| 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) { | ||
@@ -162,5 +185,13 @@ 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) | ||
| css: _objectSpread$1({}, cssStyle, {}, css), | ||
| className: styles | ||
| })); | ||
@@ -167,0 +198,0 @@ }); |
@@ -12,2 +12,4 @@ 'use strict'; | ||
| var UI = _interopDefault(require('@semcore/ui')); | ||
| var cn = _interopDefault(require('classnames')); | ||
| var injectStyle = _interopDefault(require('@semcore/utils/lib/injectStyle')); | ||
@@ -126,3 +128,37 @@ 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, | ||
@@ -136,21 +172,8 @@ flex = props.flex, | ||
| justifyContent = props.justifyContent, | ||
| className = props.className, | ||
| css = props.css, | ||
| other = _objectWithoutProperties(props, ["inline", "flex", "reverse", "direction", "flexWrap", "alignItems", "alignContent", "justifyContent", "css"]); | ||
| other = _objectWithoutProperties(props, ["inline", "flex", "reverse", "direction", "flexWrap", "alignItems", "alignContent", "justifyContent", "className", "css"]); | ||
| var cssStyle = { | ||
| display: inline ? 'inline-flex' : 'flex' | ||
| }; | ||
| var cssStyle = {}; | ||
| 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) { | ||
@@ -168,5 +191,13 @@ 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) | ||
| css: _objectSpread$1({}, cssStyle, {}, css), | ||
| className: styles | ||
| })); | ||
@@ -173,0 +204,0 @@ }); |
| { | ||
| "name": "@semcore/flex-box", | ||
| "description": "SEMRush FlexBox Component", | ||
| "version": "3.5.1", | ||
| "version": "3.5.2", | ||
| "main": "lib/index.js", | ||
@@ -6,0 +6,0 @@ "module": "lib/index.es.js", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by11.94%
58611
- Number of package files
- increased by23.08%
16
- Lines of code
- increased by12.04%
754
No dependency changes