@semcore/flex-box - npm Package Compare versions

Comparing version 3.1.1 to 3.2.0

CHANGELOG.md

@@ -5,5 +5,15 @@ # Changelog
 
+## [3.2.0] - 2019-10-10
+
+### Added
+
+- Добавлен `ref` на дом ноду
+
+### Changed
+
+- Переписано на функциональный компонент
+
 ## [3.1.1] - 2019-09-30
 
-### Change
+### Changed
 
@@ -10,0 +20,0 @@ - Нужные зависимости перенесены в `utils`, размер должен стать меньше

lib/Box/index.d.ts

@@ -1,2 +0,2 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
 import { IUIProps } from '@semcore/ui';
@@ -39,3 +39,3 @@ export interface IBoxProps extends IUIProps {
      * Если value меньше 1 - считается как доля от 100%, больше 1 - значение в px, если строка - передается as is
-     * */
+     */
     w?: number | string;
@@ -55,3 +55,3 @@ /**
      * Eсли value меньше 1 - считается как доля от 100%, больше 1 - значение в px, если строка - передается as is
-     * */
+     */
     h?: number | string;
@@ -68,15 +68,10 @@ /**
     hMax?: number | string;
-    /** Множитель всех отступов.
+    /**
+     * Множитель всех отступов.
      * Например если указать margin-top равный 3(`mt={3}`), это будет 12px(`3*4=12`)
      * @default 4
-     * */
+     */
     scaleIndent?: number;
 }
-declare class Box extends PureComponent<IBoxProps & React.AllHTMLAttributes<any>> {
-    static displayName: string;
-    static defaultProps: Partial<IBoxProps>;
-    getAutoOrScaleIndent(indent: any): any;
-    getSize: (sizeName: any, styleName: any, style?: {}) => {};
-    render(): JSX.Element;
-}
-export default Box;
+declare const _default: React.NamedExoticComponent<IBoxProps & React.AllHTMLAttributes<any>>;
+export default _default;

lib/Flex/index.d.ts

@@ -1,2 +0,2 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
 import { IBoxProps } from '../Box';
@@ -20,6 +20,3 @@ import { AlignContentProperty, AlignItemsProperty, JustifyContentProperty } from 'csstype';
 }
-declare class Flex extends PureComponent<IFlexProps & React.AllHTMLAttributes<any>> {
-    static displayName: string;
-    render(): JSX.Element;
-}
-export default Flex;
+declare const _default: React.NamedExoticComponent<IFlexProps & React.AllHTMLAttributes<any>>;
+export default _default;

lib/index.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 import Flex from './Flex';
@@ -7,5 +8,5 @@ import Box from './Box';
 declare const _default: {
-    Flex: typeof Flex;
-    Box: typeof Box;
+    Flex: import("react").NamedExoticComponent<import("./Flex").IFlexProps & import("react").AllHTMLAttributes<any>>;
+    Box: import("react").NamedExoticComponent<import("./Box").IBoxProps & import("react").AllHTMLAttributes<any>>;
 };
 export default _default;

lib/index.es.js

 import _objectSpread from '@babel/runtime/helpers/objectSpread';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
-import _createClass from '@babel/runtime/helpers/createClass';
-import _possibleConstructorReturn from '@babel/runtime/helpers/possibleConstructorReturn';
-import _getPrototypeOf from '@babel/runtime/helpers/getPrototypeOf';
-import _inherits from '@babel/runtime/helpers/inherits';
-import React, { PureComponent } from 'react';
+import React from 'react';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
@@ -27,3 +22,3 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 
-var getProperties = function getProperties(key) {
+function getProperties(key) {
   var _key$split = key.split(''),
@@ -39,100 +34,77 @@ _key$split2 = _slicedToArray(_key$split, 2),
   }) : [property + direction];
-};
+}
 
-var Box =
-/*#__PURE__*/
-function (_PureComponent) {
-  _inherits(Box, _PureComponent);
+function getAutoOrScaleIndent(indent, scaleIndent) {
+  if (typeof indent === 'string') {
+    return indent;
+  }
 
-  function Box() {
-    var _this;
+  if (indent > -1 && indent < 1) {
+    return "".concat(100 * indent, "%");
+  }
 
-    _classCallCheck(this, Box);
+  if (indent >= 1 || indent <= -1) {
+    return "".concat(indent * scaleIndent, "px");
+  }
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(Box).apply(this, arguments));
+  return indent;
+}
 
-    _this.getSize = function (sizeName, styleName) {
-      var style = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-      var size = _this.props[sizeName];
-      if (!size) return style;
+function getSize(props, sizeName, styleName) {
+  var style = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  var size = props[sizeName];
 
-      if (typeof size === 'string') {
-        style[styleName] = size;
-        return style;
-      }
+  if (!size) {
+    return style;
+  }
 
-      if (size < 1) {
-        style[styleName] = "".concat(100 * size, "%");
-        return style;
-      }
+  if (typeof size === 'string') {
+    style[styleName] = size;
+    return style;
+  }
 
-      if (size >= 1) {
-        style[styleName] = "".concat(size, "px");
-        return style;
-      }
+  if (size < 1) {
+    style[styleName] = "".concat(100 * size, "%");
+    return style;
+  }
 
-      return style;
-    };
-
-    return _this;
+  if (size >= 1) {
+    style[styleName] = "".concat(size, "px");
+    return style;
   }
 
-  _createClass(Box, [{
-    key: "getAutoOrScaleIndent",
-    value: function getAutoOrScaleIndent(indent) {
-      var scaleIndent = this.props.scaleIndent;
+  return style;
+}
 
-      if (typeof indent === 'string') {
-        return indent;
-      }
+var Box = React.forwardRef(function (_ref, ref) {
+  var scaleIndent = _ref.scaleIndent,
+      inline = _ref.inline,
+      boxSizing = _ref.boxSizing,
+      css = _ref.css,
+      other = _objectWithoutProperties(_ref, ["scaleIndent", "inline", "boxSizing", "css"]);
 
-      if (indent > -1 && indent < 1) {
-        return "".concat(100 * indent, "%");
-      }
+  var keys = Object.keys(other).filter(function (key) {
+    return REG_INDENT.test(key);
+  }).sort();
+  var style = keys.reduce(function (acc, key) {
+    return _objectSpread({}, acc, getProperties(key).reduce(function (props, propName) {
+      return _objectSpread({}, props, _defineProperty({}, propName, getAutoOrScaleIndent(other[key], scaleIndent)));
+    }, {}));
+  }, {});
 
-      if (indent >= 1 || indent <= -1) {
-        return "".concat(indent * scaleIndent, "px");
-      }
+  if (inline) {
+    style.display = 'inline-block';
+  }
 
-      return indent;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
+  if (boxSizing) {
+    style.boxSizing = 'border-box';
+  }
 
-      var _this$props = this.props,
-          inline = _this$props.inline,
-          boxSizing = _this$props.boxSizing,
-          css = _this$props.css,
-          other = _objectWithoutProperties(_this$props, ["inline", "boxSizing", "css"]);
+  var cssStyle = _objectSpread({}, style, getSize(other, 'w', 'width'), getSize(other, 'h', 'height'), getSize(other, 'wMin', 'minWidth'), getSize(other, 'wMax', 'maxWidth'), getSize(other, 'hMin', 'minHeight'), getSize(other, 'hMax', 'maxHeight'));
 
-      var keys = Object.keys(other).filter(function (key) {
-        return REG_INDENT.test(key);
-      }).sort();
-      var style = keys.reduce(function (style, key) {
-        return _objectSpread({}, style, getProperties(key).reduce(function (props, propName) {
-          return _objectSpread({}, props, _defineProperty({}, propName, _this2.getAutoOrScaleIndent(other[key])));
-        }, {}));
-      }, {});
-
-      if (inline) {
-        style.display = 'inline-block';
-      }
-
-      if (boxSizing) {
-        style.boxSizing = 'border-box';
-      }
-
-      var cssStyle = _objectSpread({}, style, this.getSize('w', 'width'), this.getSize('h', 'height'), this.getSize('wMin', 'minWidth'), this.getSize('wMax', 'maxWidth'), this.getSize('hMin', 'minHeight'), this.getSize('hMax', 'maxHeight'));
-
-      return React.createElement(UI, Object.assign({}, other, {
-        css: _objectSpread({}, cssStyle, css)
-      }));
-    }
-  }]);
-
-  return Box;
-}(PureComponent);
-
+  return React.createElement(UI, Object.assign({}, other, {
+    ref: ref,
+    css: _objectSpread({}, cssStyle, css)
+  }));
+});
 Box.displayName = 'Box';
@@ -142,73 +114,55 @@ Box.defaultProps = {
 };
+var Box$1 = React.memo(Box);
 
-var Flex =
-/*#__PURE__*/
-function (_PureComponent) {
-  _inherits(Flex, _PureComponent);
+var Flex = React.forwardRef(function (props, ref) {
+  var inline = props.inline,
+      reverse = props.reverse,
+      direction = props.direction,
+      flexWrap = props.flexWrap,
+      alignItems = props.alignItems,
+      alignContent = props.alignContent,
+      justifyContent = props.justifyContent,
+      css = props.css,
+      other = _objectWithoutProperties(props, ["inline", "reverse", "direction", "flexWrap", "alignItems", "alignContent", "justifyContent", "css"]);
 
-  function Flex() {
-    _classCallCheck(this, Flex);
+  var cssStyle = {
+    display: inline ? 'inline-flex' : 'flex'
+  };
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(Flex).apply(this, arguments));
+  if (flexWrap) {
+    cssStyle.flexWrap = "wrap".concat(reverse ? '-reverse' : '');
   }
 
-  _createClass(Flex, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          inline = _this$props.inline,
-          reverse = _this$props.reverse,
-          direction = _this$props.direction,
-          flexWrap = _this$props.flexWrap,
-          alignItems = _this$props.alignItems,
-          alignContent = _this$props.alignContent,
-          justifyContent = _this$props.justifyContent,
-          css = _this$props.css,
-          other = _objectWithoutProperties(_this$props, ["inline", "reverse", "direction", "flexWrap", "alignItems", "alignContent", "justifyContent", "css"]);
+  if (direction || reverse) {
+    cssStyle.flexDirection = "".concat(direction || 'row').concat(reverse ? '-reverse' : '');
+  }
 
-      var cssStyle = {
-        display: inline ? 'inline-flex' : 'flex'
-      };
+  if (alignItems) {
+    cssStyle.alignItems = alignItems;
+  }
 
-      if (flexWrap) {
-        // @ts-ignore
-        cssStyle.flexWrap = "wrap".concat(reverse ? '-reverse' : '');
-      }
+  if (alignContent) {
+    cssStyle.alignContent = alignContent;
+  }
 
-      if (direction || reverse) {
-        // @ts-ignore
-        cssStyle.flexDirection = "".concat(direction || 'row').concat(reverse ? '-reverse' : '');
-      }
+  if (justifyContent) {
+    cssStyle.justifyContent = justifyContent;
+  }
 
-      if (alignItems) {
-        cssStyle.alignItems = alignItems;
-      }
-
-      if (alignContent) {
-        cssStyle.alignContent = alignContent;
-      }
-
-      if (justifyContent) {
-        cssStyle.justifyContent = justifyContent;
-      }
-
-      return React.createElement(Box, Object.assign({}, other, {
-        css: _objectSpread({}, cssStyle, css)
-      }));
-    }
-  }]);
-
-  return Flex;
-}(PureComponent);
-
+  return React.createElement(Box$1, Object.assign({}, other, {
+    ref: ref,
+    css: _objectSpread({}, cssStyle, css)
+  }));
+});
 Flex.displayName = 'FlexBox';
+var Flex$1 = React.memo(Flex);
 
 /* tslint:disable */
 var index = {
-  Flex: Flex,
-  Box: Box
+  Flex: Flex$1,
+  Box: Box$1
 };
 
 export default index;
-export { Box, Flex };
+export { Box$1 as Box, Flex$1 as Flex };
 //# sourceMappingURL=index.es.js.map

lib/index.js

@@ -9,9 +9,3 @@ 'use strict';
 var _objectWithoutProperties = _interopDefault(require('@babel/runtime/helpers/objectWithoutProperties'));
-var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck'));
-var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass'));
-var _possibleConstructorReturn = _interopDefault(require('@babel/runtime/helpers/possibleConstructorReturn'));
-var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototypeOf'));
-var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits'));
-var React = require('react');
-var React__default = _interopDefault(React);
+var React = _interopDefault(require('react'));
 var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
@@ -35,3 +29,3 @@ var _slicedToArray = _interopDefault(require('@babel/runtime/helpers/slicedToArray'));
 
-var getProperties = function getProperties(key) {
+function getProperties(key) {
   var _key$split = key.split(''),
@@ -47,100 +41,77 @@ _key$split2 = _slicedToArray(_key$split, 2),
   }) : [property + direction];
-};
+}
 
-var Box =
-/*#__PURE__*/
-function (_PureComponent) {
-  _inherits(Box, _PureComponent);
+function getAutoOrScaleIndent(indent, scaleIndent) {
+  if (typeof indent === 'string') {
+    return indent;
+  }
 
-  function Box() {
-    var _this;
+  if (indent > -1 && indent < 1) {
+    return "".concat(100 * indent, "%");
+  }
 
-    _classCallCheck(this, Box);
+  if (indent >= 1 || indent <= -1) {
+    return "".concat(indent * scaleIndent, "px");
+  }
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(Box).apply(this, arguments));
+  return indent;
+}
 
-    _this.getSize = function (sizeName, styleName) {
-      var style = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-      var size = _this.props[sizeName];
-      if (!size) return style;
+function getSize(props, sizeName, styleName) {
+  var style = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  var size = props[sizeName];
 
-      if (typeof size === 'string') {
-        style[styleName] = size;
-        return style;
-      }
+  if (!size) {
+    return style;
+  }
 
-      if (size < 1) {
-        style[styleName] = "".concat(100 * size, "%");
-        return style;
-      }
+  if (typeof size === 'string') {
+    style[styleName] = size;
+    return style;
+  }
 
-      if (size >= 1) {
-        style[styleName] = "".concat(size, "px");
-        return style;
-      }
+  if (size < 1) {
+    style[styleName] = "".concat(100 * size, "%");
+    return style;
+  }
 
-      return style;
-    };
-
-    return _this;
+  if (size >= 1) {
+    style[styleName] = "".concat(size, "px");
+    return style;
   }
 
-  _createClass(Box, [{
-    key: "getAutoOrScaleIndent",
-    value: function getAutoOrScaleIndent(indent) {
-      var scaleIndent = this.props.scaleIndent;
+  return style;
+}
 
-      if (typeof indent === 'string') {
-        return indent;
-      }
+var Box = React.forwardRef(function (_ref, ref) {
+  var scaleIndent = _ref.scaleIndent,
+      inline = _ref.inline,
+      boxSizing = _ref.boxSizing,
+      css = _ref.css,
+      other = _objectWithoutProperties(_ref, ["scaleIndent", "inline", "boxSizing", "css"]);
 
-      if (indent > -1 && indent < 1) {
-        return "".concat(100 * indent, "%");
-      }
+  var keys = Object.keys(other).filter(function (key) {
+    return REG_INDENT.test(key);
+  }).sort();
+  var style = keys.reduce(function (acc, key) {
+    return _objectSpread({}, acc, getProperties(key).reduce(function (props, propName) {
+      return _objectSpread({}, props, _defineProperty({}, propName, getAutoOrScaleIndent(other[key], scaleIndent)));
+    }, {}));
+  }, {});
 
-      if (indent >= 1 || indent <= -1) {
-        return "".concat(indent * scaleIndent, "px");
-      }
+  if (inline) {
+    style.display = 'inline-block';
+  }
 
-      return indent;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
+  if (boxSizing) {
+    style.boxSizing = 'border-box';
+  }
 
-      var _this$props = this.props,
-          inline = _this$props.inline,
-          boxSizing = _this$props.boxSizing,
-          css = _this$props.css,
-          other = _objectWithoutProperties(_this$props, ["inline", "boxSizing", "css"]);
+  var cssStyle = _objectSpread({}, style, getSize(other, 'w', 'width'), getSize(other, 'h', 'height'), getSize(other, 'wMin', 'minWidth'), getSize(other, 'wMax', 'maxWidth'), getSize(other, 'hMin', 'minHeight'), getSize(other, 'hMax', 'maxHeight'));
 
-      var keys = Object.keys(other).filter(function (key) {
-        return REG_INDENT.test(key);
-      }).sort();
-      var style = keys.reduce(function (style, key) {
-        return _objectSpread({}, style, getProperties(key).reduce(function (props, propName) {
-          return _objectSpread({}, props, _defineProperty({}, propName, _this2.getAutoOrScaleIndent(other[key])));
-        }, {}));
-      }, {});
-
-      if (inline) {
-        style.display = 'inline-block';
-      }
-
-      if (boxSizing) {
-        style.boxSizing = 'border-box';
-      }
-
-      var cssStyle = _objectSpread({}, style, this.getSize('w', 'width'), this.getSize('h', 'height'), this.getSize('wMin', 'minWidth'), this.getSize('wMax', 'maxWidth'), this.getSize('hMin', 'minHeight'), this.getSize('hMax', 'maxHeight'));
-
-      return React__default.createElement(UI, Object.assign({}, other, {
-        css: _objectSpread({}, cssStyle, css)
-      }));
-    }
-  }]);
-
-  return Box;
-}(React.PureComponent);
-
+  return React.createElement(UI, Object.assign({}, other, {
+    ref: ref,
+    css: _objectSpread({}, cssStyle, css)
+  }));
+});
 Box.displayName = 'Box';
@@ -150,74 +121,56 @@ Box.defaultProps = {
 };
+var Box$1 = React.memo(Box);
 
-var Flex =
-/*#__PURE__*/
-function (_PureComponent) {
-  _inherits(Flex, _PureComponent);
+var Flex = React.forwardRef(function (props, ref) {
+  var inline = props.inline,
+      reverse = props.reverse,
+      direction = props.direction,
+      flexWrap = props.flexWrap,
+      alignItems = props.alignItems,
+      alignContent = props.alignContent,
+      justifyContent = props.justifyContent,
+      css = props.css,
+      other = _objectWithoutProperties(props, ["inline", "reverse", "direction", "flexWrap", "alignItems", "alignContent", "justifyContent", "css"]);
 
-  function Flex() {
-    _classCallCheck(this, Flex);
+  var cssStyle = {
+    display: inline ? 'inline-flex' : 'flex'
+  };
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(Flex).apply(this, arguments));
+  if (flexWrap) {
+    cssStyle.flexWrap = "wrap".concat(reverse ? '-reverse' : '');
   }
 
-  _createClass(Flex, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          inline = _this$props.inline,
-          reverse = _this$props.reverse,
-          direction = _this$props.direction,
-          flexWrap = _this$props.flexWrap,
-          alignItems = _this$props.alignItems,
-          alignContent = _this$props.alignContent,
-          justifyContent = _this$props.justifyContent,
-          css = _this$props.css,
-          other = _objectWithoutProperties(_this$props, ["inline", "reverse", "direction", "flexWrap", "alignItems", "alignContent", "justifyContent", "css"]);
+  if (direction || reverse) {
+    cssStyle.flexDirection = "".concat(direction || 'row').concat(reverse ? '-reverse' : '');
+  }
 
-      var cssStyle = {
-        display: inline ? 'inline-flex' : 'flex'
-      };
+  if (alignItems) {
+    cssStyle.alignItems = alignItems;
+  }
 
-      if (flexWrap) {
-        // @ts-ignore
-        cssStyle.flexWrap = "wrap".concat(reverse ? '-reverse' : '');
-      }
+  if (alignContent) {
+    cssStyle.alignContent = alignContent;
+  }
 
-      if (direction || reverse) {
-        // @ts-ignore
-        cssStyle.flexDirection = "".concat(direction || 'row').concat(reverse ? '-reverse' : '');
-      }
+  if (justifyContent) {
+    cssStyle.justifyContent = justifyContent;
+  }
 
-      if (alignItems) {
-        cssStyle.alignItems = alignItems;
-      }
-
-      if (alignContent) {
-        cssStyle.alignContent = alignContent;
-      }
-
-      if (justifyContent) {
-        cssStyle.justifyContent = justifyContent;
-      }
-
-      return React__default.createElement(Box, Object.assign({}, other, {
-        css: _objectSpread({}, cssStyle, css)
-      }));
-    }
-  }]);
-
-  return Flex;
-}(React.PureComponent);
-
+  return React.createElement(Box$1, Object.assign({}, other, {
+    ref: ref,
+    css: _objectSpread({}, cssStyle, css)
+  }));
+});
 Flex.displayName = 'FlexBox';
+var Flex$1 = React.memo(Flex);
 
 /* tslint:disable */
 var index = {
-  Flex: Flex,
-  Box: Box
+  Flex: Flex$1,
+  Box: Box$1
 };
 
-exports.Box = Box;
-exports.Flex = Flex;
+exports.Box = Box$1;
+exports.Flex = Flex$1;
 exports.default = index;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@semcore/flex-box",
   "description": "SEMRush FlexBox Component",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "main": "lib/index.js",
@@ -15,4 +15,5 @@ "module": "lib/index.es.js",
   "dependencies": {
-    "@semcore/utils": "^3.1",
-    "@semcore/ui": "^1.0"
+    "@semcore/utils": "^3.2",
+    "@semcore/ui": "^1.1",
+    "csstype": "^2.6"
   },
@@ -19,0 +20,0 @@ "jest": {

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

46359

decreased by-5.6%

Dependency count

3

increased by50%

Lines of code

606

decreased by-11.66%

Dependency changes

• + Addedcsstype@^2.6

• + Addedcsstype@2.6.21(transitive)

• Updated@semcore/ui@^1.1

• Updated@semcore/utils@^3.2