@megafon/ui-core 2.0.0-beta.99 → 2.1.2

package/dist/lib/components/Counter/Counter.js

@@ -2,8 +2,6 @@
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-require("core-js/modules/es.number.constructor");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,9 +15,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var React = _interopRequireWildcard(require("react"));
 
-var PropTypes = _interopRequireWildcard(require("prop-types"));
+var _uiHelpers = require("@megafon/ui-helpers");
 
-var _cnCreate = _interopRequireDefault(require("../../utils/cnCreate"));
+var PropTypes = _interopRequireWildcard(require("prop-types"));
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
@@ -43,16 +41,20 @@ var IconPlus = function IconPlus(props) {
   }));
 };
 
-var cn = (0, _cnCreate["default"])('mfui-beta-counter');
+var cn = (0, _uiHelpers.cnCreate)('mfui-counter');
 
 var Counter = function Counter(_ref) {
-  var initialValue = _ref.initialValue,
+  var _ref$isControlled = _ref.isControlled,
+      isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? 0 : _ref$value,
+      initialValue = _ref.initialValue,
       _ref$max = _ref.max,
       max = _ref$max === void 0 ? 999999 : _ref$max,
       _ref$min = _ref.min,
       min = _ref$min === void 0 ? 0 : _ref$min,
-      _ref$isDisabled = _ref.isDisabled,
-      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       onChange = _ref.onChange,
       className = _ref.className,
       _ref$classes = _ref.classes,
@@ -67,40 +69,42 @@ var Counter = function Counter(_ref) {
   React.useEffect(function () {
     setCounter(currentInitialValue);
   }, [currentInitialValue]);
-  var handleValueChange = React.useCallback(function (value) {
-    setCounter(value);
+  var handleValueChange = React.useCallback(function (inputValue) {
+    if (!isControlled) {
+      setCounter(inputValue);
+    }
 
-    if (value < min) {
+    if (inputValue < min) {
       onChange && onChange(min);
     }
 
-    if (value > max) {
+    if (inputValue > max) {
       onChange && onChange(max);
     }
 
-    if (value >= min && value <= max) {
-      onChange && onChange(value);
+    if (inputValue >= min && inputValue <= max) {
+      onChange && onChange(inputValue);
     }
-  }, [min, max, onChange]);
+  }, [min, max, onChange, isControlled]);
   var handleMinusClick = React.useCallback(function () {
-    handleValueChange(counter - 1);
-  }, [handleValueChange, counter]);
+    handleValueChange(isControlled ? value - 1 : counter - 1);
+  }, [handleValueChange, counter, isControlled, value]);
   var handlePlusClick = React.useCallback(function () {
-    handleValueChange(counter + 1);
-  }, [handleValueChange, counter]);
+    handleValueChange(isControlled ? value + 1 : counter + 1);
+  }, [handleValueChange, counter, isControlled, value]);
   var handleInputChange = React.useCallback(function (e) {
     var pattern = /^[0-9\b]+$/;
-    var value = e.target.value;
+    var inputValue = e.target.value;
 
-    if (value !== '' && !pattern.test(value)) {
+    if (inputValue !== '' && !pattern.test(inputValue)) {
       return;
     }
 
-    handleValueChange(Number(value));
+    handleValueChange(Number(inputValue));
   }, [handleValueChange]);
   var handleInputBlur = React.useCallback(function (e) {
-    var value = e.target.value;
-    var numberValue = Number(value);
+    var inputValue = e.target.value;
+    var numberValue = Number(inputValue);
 
     if (numberValue < min) {
       handleValueChange(min);
@@ -109,19 +113,18 @@ var Counter = function Counter(_ref) {
 
     if (numberValue > max) {
       handleValueChange(max);
-      return;
     }
   }, [handleValueChange, min, max]);
   return /*#__PURE__*/React.createElement("div", {
     className: cn({
-      disabled: isDisabled
+      disabled: disabled
     }, [className, classes.root])
   }, /*#__PURE__*/React.createElement("button", {
     className: cn('btn', {
       left: true
     }, classes.buttonMinus),
     type: "button",
-    disabled: isDisabled || counter <= min,
+    disabled: disabled || (isControlled ? value : counter) <= min,
     onClick: handleMinusClick
   }, /*#__PURE__*/React.createElement(IconMinus, {
     className: cn('icon')
@@ -129,16 +132,16 @@ var Counter = function Counter(_ref) {
     className: cn('input-box')
   }, /*#__PURE__*/React.createElement("input", {
     className: cn('input', classes.input),
-    value: counter,
+    value: isControlled ? value : counter,
     onChange: handleInputChange,
     onBlur: handleInputBlur,
-    disabled: isDisabled
+    disabled: disabled
   })), /*#__PURE__*/React.createElement("button", {
     className: cn('btn', {
       right: true
     }, classes.buttonPlus),
     type: "button",
-    disabled: isDisabled || counter >= max,
+    disabled: disabled || counter >= max || value >= max,
     onClick: handlePlusClick
   }, /*#__PURE__*/React.createElement(IconPlus, {
     className: cn('icon')
@@ -146,10 +149,12 @@ var Counter = function Counter(_ref) {
 };
 
 Counter.propTypes = {
+  isControlled: PropTypes.bool,
+  value: PropTypes.number,
   initialValue: PropTypes.number,
   min: PropTypes.number,
   max: PropTypes.number,
-  isDisabled: PropTypes.bool,
+  disabled: PropTypes.bool,
   onChange: PropTypes.func,
   className: PropTypes.string,
   classes: PropTypes.shape({

package/dist/lib/components/Grid/Grid.css

@@ -5,7 +5,7 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-grid__container {
+.mfui-grid__container {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -13,90 +13,90 @@ h5 {
       -ms-flex-positive: 1;
           flex-grow: 1;
 }
-.mfui-beta-grid__container_multi-row {
+.mfui-grid__container_multi-row {
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
 }
-.mfui-beta-grid__container_h-align_right {
+.mfui-grid__container_h-align_right {
   -webkit-box-pack: end;
       -ms-flex-pack: end;
           justify-content: flex-end;
 }
-.mfui-beta-grid__container_h-align_center {
+.mfui-grid__container_h-align_center {
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
 }
-.mfui-beta-grid__container_h-align_between {
+.mfui-grid__container_h-align_between {
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
 }
-.mfui-beta-grid__container_h-align_around {
+.mfui-grid__container_h-align_around {
   -ms-flex-pack: distribute;
       justify-content: space-around;
 }
-.mfui-beta-grid__container_v-align_top {
+.mfui-grid__container_v-align_top {
   -webkit-box-align: start;
       -ms-flex-align: start;
           align-items: flex-start;
 }
-.mfui-beta-grid__container_v-align_bottom {
+.mfui-grid__container_v-align_bottom {
   -webkit-box-align: end;
       -ms-flex-align: end;
           align-items: flex-end;
 }
-.mfui-beta-grid__container_v-align_center {
+.mfui-grid__container_v-align_center {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
 }
-.mfui-beta-grid__container_v-align_baseline {
+.mfui-grid__container_v-align_baseline {
   -webkit-box-align: baseline;
       -ms-flex-align: baseline;
           align-items: baseline;
 }
-.mfui-beta-grid__container_gutters-left_large {
+.mfui-grid__container_gutters-left_large {
   margin-left: -32px;
 }
-.mfui-beta-grid__container_gutters-left_medium {
+.mfui-grid__container_gutters-left_medium {
   margin-left: -20px;
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-grid__container_gutters-left_medium {
+  .mfui-grid__container_gutters-left_medium {
     margin-left: -16px;
   }
 }
-.mfui-beta-grid__container_gutters-bottom_large {
+.mfui-grid__container_gutters-bottom_large {
   margin-bottom: -32px;
 }
-.mfui-beta-grid__container_gutters-bottom_medium {
+.mfui-grid__container_gutters-bottom_medium {
   margin-bottom: -20px;
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-grid__container_gutters-bottom_medium {
+  .mfui-grid__container_gutters-bottom_medium {
     margin-bottom: -16px;
   }
 }
-.mfui-beta-grid__column_gutter-left_large {
+.mfui-grid__column_gutter-left_large {
   padding-left: 32px;
 }
-.mfui-beta-grid__column_gutter-left_medium {
+.mfui-grid__column_gutter-left_medium {
   padding-left: 20px;
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-grid__column_gutter-left_medium {
+  .mfui-grid__column_gutter-left_medium {
     padding-left: 16px;
   }
 }
-.mfui-beta-grid__column_gutter-bottom_large {
+.mfui-grid__column_gutter-bottom_large {
   padding-bottom: 32px;
 }
-.mfui-beta-grid__column_gutter-bottom_medium {
+.mfui-grid__column_gutter-bottom_medium {
   padding-bottom: 20px;
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-grid__column_gutter-bottom_medium {
+  .mfui-grid__column_gutter-bottom_medium {
     padding-bottom: 16px;
   }
 }

package/dist/lib/components/Grid/Grid.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import './Grid.less';
 import { IGridColumn } from './GridColumn';
+import './Grid.less';
 export interface IGridProps {
     /** Выравнивание всех колонок по горизонтали */
     hAlign?: 'left' | 'right' | 'center' | 'between' | 'around';
@@ -17,19 +16,5 @@ export interface IGridProps {
     className?: string;
     children: Array<React.ReactElement<IGridColumn>> | React.ReactElement<IGridColumn>;
 }
-declare class Grid extends React.Component<IGridProps> {
-    static propTypes: {
-        hAlign: PropTypes.Requireable<string>;
-        vAlign: PropTypes.Requireable<string>;
-        guttersLeft: PropTypes.Requireable<string>;
-        guttersBottom: PropTypes.Requireable<string>;
-        multiRow: PropTypes.Requireable<boolean>;
-        className: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    };
-    static defaultProps: {
-        multiRow: boolean;
-    };
-    render(): JSX.Element;
-}
+declare const Grid: React.FC<IGridProps>;
 export default Grid;

package/dist/lib/components/Grid/Grid.js

@@ -2,16 +2,6 @@
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-require("core-js/modules/es.array.map");
-
-require("core-js/modules/es.date.to-string");
-
-require("core-js/modules/es.object.to-string");
-
-require("core-js/modules/es.reflect.construct");
-
-require("core-js/modules/es.regexp.to-string");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -19,110 +9,46 @@ exports["default"] = void 0;
 
 require("core-js/modules/es.array.map");
 
-require("core-js/modules/es.date.to-string");
-
-require("core-js/modules/es.object.to-string");
-
-require("core-js/modules/es.reflect.construct");
-
-require("core-js/modules/es.regexp.to-string");
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
 var React = _interopRequireWildcard(require("react"));
 
-var PropTypes = _interopRequireWildcard(require("prop-types"));
+var _uiHelpers = require("@megafon/ui-helpers");
 
-var _cnCreate = _interopRequireDefault(require("../../utils/cnCreate"));
+var PropTypes = _interopRequireWildcard(require("prop-types"));
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _createSuper(Derived) {
-  return function () {
-    var Super = (0, _getPrototypeOf2["default"])(Derived),
-        result;
-
-    if (_isNativeReflectConstruct()) {
-      var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
-      result = Reflect.construct(Super, arguments, NewTarget);
-    } else {
-      result = Super.apply(this, arguments);
-    }
-
-    return (0, _possibleConstructorReturn2["default"])(this, result);
-  };
-}
-
-function _isNativeReflectConstruct() {
-  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-  if (Reflect.construct.sham) return false;
-  if (typeof Proxy === "function") return true;
-
-  try {
-    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-var cn = (0, _cnCreate["default"])('mfui-beta-grid');
-
-var Grid = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Grid, _React$Component);
-
-  var _super = _createSuper(Grid);
-
-  function Grid() {
-    (0, _classCallCheck2["default"])(this, Grid);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2["default"])(Grid, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          children = _this$props.children,
-          guttersLeft = _this$props.guttersLeft,
-          guttersBottom = _this$props.guttersBottom,
-          multiRow = _this$props.multiRow,
-          hAlign = _this$props.hAlign,
-          vAlign = _this$props.vAlign,
-          className = _this$props.className;
-      return /*#__PURE__*/React.createElement("div", {
-        className: cn([className])
-      }, /*#__PURE__*/React.createElement("div", {
-        className: cn('container', {
-          'multi-row': multiRow,
-          'h-align': hAlign,
-          'v-align': vAlign,
-          'gutters-left': guttersLeft,
-          'gutters-bottom': guttersBottom
-        })
-      }, React.Children.map(children, function (child) {
-        return React.cloneElement(child, {
-          className: cn('column', {
-            'gutter-left': guttersLeft,
-            'gutter-bottom': guttersBottom
-          }, child.props.className)
-        });
-      })));
-    }
-  }]);
-  return Grid;
-}(React.Component);
+var cn = (0, _uiHelpers.cnCreate)('mfui-grid');
+
+var Grid = function Grid(_ref) {
+  var children = _ref.children,
+      guttersLeft = _ref.guttersLeft,
+      guttersBottom = _ref.guttersBottom,
+      _ref$multiRow = _ref.multiRow,
+      multiRow = _ref$multiRow === void 0 ? true : _ref$multiRow,
+      hAlign = _ref.hAlign,
+      vAlign = _ref.vAlign,
+      className = _ref.className;
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn([className])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('container', {
+      'multi-row': multiRow,
+      'h-align': hAlign,
+      'v-align': vAlign,
+      'gutters-left': guttersLeft,
+      'gutters-bottom': guttersBottom
+    })
+  }, React.Children.map(children, function (child) {
+    return React.cloneElement(child, {
+      className: cn('column', {
+        'gutter-left': guttersLeft,
+        'gutter-bottom': guttersBottom
+      }, child.props.className)
+    });
+  })));
+};
 
 Grid.propTypes = {
   hAlign: PropTypes.oneOf(['left', 'right', 'center', 'between', 'around']),
@@ -131,10 +57,7 @@ Grid.propTypes = {
   guttersBottom: PropTypes.oneOf(['large', 'medium']),
   multiRow: PropTypes.bool,
   className: PropTypes.string,
-  children: PropTypes.node
-};
-Grid.defaultProps = {
-  multiRow: true
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element.isRequired]).isRequired
 };
 var _default = Grid;
 exports["default"] = _default;