@megafon/ui-core 2.0.0-beta.97 → 2.1.0

package/dist/lib/components/Select/Select.js

@@ -2,34 +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.concat");
-
-require("core-js/modules/es.array.every");
-
-require("core-js/modules/es.array.filter");
-
-require("core-js/modules/es.array.find");
-
-require("core-js/modules/es.array.find-index");
-
-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.object.values");
-
-require("core-js/modules/es.reflect.construct");
-
-require("core-js/modules/es.regexp.constructor");
-
-require("core-js/modules/es.regexp.exec");
-
-require("core-js/modules/es.regexp.to-string");
-
-require("core-js/modules/es.string.split");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -61,6 +33,8 @@ require("core-js/modules/es.regexp.exec");
 
 require("core-js/modules/es.regexp.to-string");
 
+require("core-js/modules/es.string.replace");
+
 require("core-js/modules/es.string.split");
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -77,18 +51,14 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var React = _interopRequireWildcard(require("react"));
 
-var PropTypes = _interopRequireWildcard(require("prop-types"));
+var _uiHelpers = require("@megafon/ui-helpers");
 
 var _lodash = _interopRequireDefault(require("lodash.debounce"));
 
-var _cnCreate = _interopRequireDefault(require("../../utils/cnCreate"));
-
-var _detectTouch = _interopRequireDefault(require("../../utils/detectTouch"));
+var PropTypes = _interopRequireWildcard(require("prop-types"));
 
 var _InputLabel = _interopRequireDefault(require("../InputLabel/InputLabel"));
 
-var _dataAttrs = _interopRequireDefault(require("./../../utils/dataAttrs"));
-
 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; }
@@ -134,7 +104,7 @@ var SelectTypes = {
   COMBOBOX: 'combobox'
 };
 exports.SelectTypes = SelectTypes;
-var cn = (0, _cnCreate["default"])('mfui-beta-select');
+var cn = (0, _uiHelpers.cnCreate)('mfui-select');
 
 var Select = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(Select, _React$Component);
@@ -146,14 +116,17 @@ var Select = /*#__PURE__*/function (_React$Component) {
 
     (0, _classCallCheck2["default"])(this, Select);
     _this = _super.call(this, props);
-    _this.isTouch = (0, _detectTouch["default"])();
+    _this.isTouch = (0, _uiHelpers.detectTouch)();
     _this.debouncedComboboxChange = (0, _lodash["default"])(function (filterValue) {
       var items = _this.props.items;
+      var query = filterValue.replace(/[^A-Z-a-zА-ЯЁа-яё0-9]/g, function (w) {
+        return "\\".concat(w);
+      });
       var filteredItems = items.filter(function (_ref) {
         var title = _ref.title;
 
         if (filterValue.length <= title.length) {
-          return RegExp(filterValue, 'ig').test(title);
+          return RegExp(query, 'ig').test(title);
         }
 
         return false;
@@ -179,6 +152,16 @@ var Select = /*#__PURE__*/function (_React$Component) {
       });
     };
 
+    _this.handleOpened = function () {
+      var onOpened = _this.props.onOpened;
+      onOpened && onOpened();
+    };
+
+    _this.handleClosed = function () {
+      var onClosed = _this.props.onClosed;
+      onClosed && onClosed();
+    };
+
     _this.handleClickOutside = function (e) {
       var isOpened = _this.state.isOpened;
 
@@ -188,6 +171,10 @@ var Select = /*#__PURE__*/function (_React$Component) {
 
       _this.setState({
         isOpened: false
+      }, function () {
+        if (!_this.state.isOpened) {
+          _this.handleClosed();
+        }
       });
     };
 
@@ -196,6 +183,12 @@ var Select = /*#__PURE__*/function (_React$Component) {
         return {
           isOpened: !state.isOpened
         };
+      }, function () {
+        if (_this.state.isOpened) {
+          _this.handleOpened();
+        } else {
+          _this.handleClosed();
+        }
       });
     };
 
@@ -221,10 +214,13 @@ var Select = /*#__PURE__*/function (_React$Component) {
         isOpened: false,
         inputValue: title,
         comparableInputValue: title,
-        filteredItems: items
+        filteredItems: items,
+        isChoosenItem: true
       });
 
       onSelect && onSelect(e, item);
+
+      _this.handleClosed();
     };
 
     _this.handleHoverItem = function (index) {
@@ -249,16 +245,25 @@ var Select = /*#__PURE__*/function (_React$Component) {
         };
       });
 
+      _this.handleOpened();
+
       if (!isOpened && filteredItems) {
         e.target.select();
       }
     };
 
     _this.handleChangeCombobox = function (e) {
+      var onSelect = _this.props.onSelect;
+      var isChoosenItem = _this.state.isChoosenItem;
       var filterValue = e.target.value;
 
+      if (isChoosenItem) {
+        onSelect && onSelect(null);
+      }
+
       _this.setState({
-        inputValue: filterValue
+        inputValue: filterValue,
+        isChoosenItem: false
       });
 
       _this.debouncedComboboxChange(filterValue);
@@ -269,9 +274,9 @@ var Select = /*#__PURE__*/function (_React$Component) {
           activeIndex = _this$state3.activeIndex,
           isOpened = _this$state3.isOpened,
           filteredItems = _this$state3.filteredItems;
-      var isDisabled = _this.props.isDisabled;
+      var disabled = _this.props.disabled;
 
-      if (filteredItems.length === 0 || isDisabled) {
+      if (filteredItems.length === 0 || disabled) {
         return true;
       }
 
@@ -310,6 +315,8 @@ var Select = /*#__PURE__*/function (_React$Component) {
           isOpened: true
         });
 
+        _this.handleOpened();
+
         return false;
       }
 
@@ -326,13 +333,27 @@ var Select = /*#__PURE__*/function (_React$Component) {
 
     _this.highlightString = function (title, view) {
       var type = _this.props.type;
-      var comparableInputValue = _this.state.comparableInputValue;
+      var _this$state4 = _this.state,
+          comparableInputValue = _this$state4.comparableInputValue,
+          inputValue = _this$state4.inputValue;
 
       if (type === SelectTypes.CLASSIC) {
+        if (typeof view === 'function' && !React.isValidElement(view)) {
+          return view({
+            filterValue: inputValue
+          });
+        }
+
         return view || title;
       }
 
       if (type === SelectTypes.COMBOBOX && view) {
+        if (typeof view === 'function' && !React.isValidElement(view)) {
+          return view({
+            filterValue: inputValue
+          });
+        }
+
         return view;
       }
 
@@ -347,11 +368,11 @@ var Select = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.getItemWrapper = function (node) {
-      return _this.itemWrapperNode = node;
+      _this.itemWrapperNode = node;
     };
 
     _this.getSelectNode = function (node) {
-      return _this.selectNode = node;
+      _this.selectNode = node;
     };
 
     _this.getNodeList = function (node) {
@@ -363,7 +384,8 @@ var Select = /*#__PURE__*/function (_React$Component) {
       activeIndex: 0,
       filteredItems: props.items,
       comparableInputValue: '',
-      inputValue: ''
+      inputValue: '',
+      isChoosenItem: false
     };
     _this.itemsNodeList = [];
     return _this;
@@ -394,6 +416,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
       var isOpened = this.state.isOpened;
 
       if (!this.isEqualItems(items, prevItems)) {
+        // eslint-disable-next-line react/no-did-update-set-state
         this.setState({
           filteredItems: items
         });
@@ -444,24 +467,26 @@ var Select = /*#__PURE__*/function (_React$Component) {
       var _this$props2 = this.props,
           placeholder = _this$props2.placeholder,
           items = _this$props2.items,
-          currentValue = _this$props2.currentValue;
+          currentValue = _this$props2.currentValue,
+          classes = _this$props2.classes;
       var item = items.find(function (elem) {
         return elem.value === currentValue;
       });
       var inputTitle = placeholder;
 
       if (item && item.title) {
-        inputTitle = item.title;
+        inputTitle = item.selectedView ? item.selectedView : item.title;
       }
 
       return /*#__PURE__*/React.createElement("div", {
         className: cn('title', {
           placeholder: !!placeholder && !currentValue
-        }),
+        }, [classes === null || classes === void 0 ? void 0 : classes.title]),
+        role: "button",
         tabIndex: 0,
         onClick: this.handleOpenDropdown
       }, /*#__PURE__*/React.createElement("div", {
-        className: cn('title-inner')
+        className: cn('title-inner', [classes === null || classes === void 0 ? void 0 : classes.titleInner])
       }, inputTitle));
     }
   }, {
@@ -489,9 +514,9 @@ var Select = /*#__PURE__*/function (_React$Component) {
           notFoundText = _this$props3.notFoundText,
           _this$props3$classes = _this$props3.classes,
           classes = _this$props3$classes === void 0 ? {} : _this$props3$classes;
-      var _this$state4 = this.state,
-          filteredItems = _this$state4.filteredItems,
-          activeIndex = _this$state4.activeIndex;
+      var _this$state5 = this.state,
+          filteredItems = _this$state5.filteredItems,
+          activeIndex = _this$state5.activeIndex;
       var currentItems = type === SelectTypes.COMBOBOX ? filteredItems : items;
       return /*#__PURE__*/React.createElement("div", {
         className: cn('list', [classes.list])
@@ -522,7 +547,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this$props4 = this.props,
           type = _this$props4.type,
-          isDisabled = _this$props4.isDisabled,
+          disabled = _this$props4.disabled,
           verification = _this$props4.verification,
           noticeText = _this$props4.noticeText,
           label = _this$props4.label,
@@ -534,10 +559,10 @@ var Select = /*#__PURE__*/function (_React$Component) {
           classes = _this$props4$classes === void 0 ? {} : _this$props4$classes,
           dataAttrs = _this$props4.dataAttrs;
       var isOpened = this.state.isOpened;
-      return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _dataAttrs["default"])(dataAttrs), {
+      return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs), {
         className: cn({
           open: isOpened,
-          disabled: isDisabled,
+          disabled: disabled,
           'no-touch': !this.isTouch,
           valid: verification === Verification.VALID,
           error: verification === Verification.ERROR
@@ -552,13 +577,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
       }, "*")), /*#__PURE__*/React.createElement("div", {
         className: cn('control', classes.control),
         onKeyDown: this.handleKeyDown
-      }, type === SelectTypes.COMBOBOX && this.renderCombobox(), type === SelectTypes.CLASSIC && this.renderTitle(), /*#__PURE__*/React.createElement("div", {
-        className: cn('arrow-wrap'),
-        tabIndex: 1,
-        onClick: this.handleOpenDropdown
-      }, /*#__PURE__*/React.createElement("span", {
-        className: cn('arrow')
-      }))), this.renderChildren()), noticeText && /*#__PURE__*/React.createElement("div", {
+      }, type === SelectTypes.COMBOBOX && this.renderCombobox(), type === SelectTypes.CLASSIC && this.renderTitle()), this.renderChildren()), noticeText && /*#__PURE__*/React.createElement("div", {
         className: cn('text', {
           error: verification === Verification.ERROR,
           success: verification === Verification.VALID
@@ -576,7 +595,7 @@ Select.propTypes = {
   currentValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   verification: PropTypes.oneOf(Object.values(Verification)),
   noticeText: PropTypes.string,
-  isDisabled: PropTypes.bool,
+  disabled: PropTypes.bool,
   required: PropTypes.bool,
   placeholder: PropTypes.string,
   notFoundText: PropTypes.string,
@@ -584,24 +603,28 @@ Select.propTypes = {
   classes: PropTypes.shape({
     root: PropTypes.string,
     control: PropTypes.string,
+    title: PropTypes.string,
+    titleInner: PropTypes.string,
     list: PropTypes.string,
     listItem: PropTypes.string,
     listItemTitle: PropTypes.string
   }),
-  items: PropTypes.arrayOf(PropTypes.shape({
-    view: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.element]),
-    title: PropTypes.node,
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-  })),
+  items: PropTypes.arrayOf(PropTypes.exact({
+    view: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]),
+    selectedView: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]),
+    title: PropTypes.string.isRequired,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+  })).isRequired,
   onSelect: PropTypes.func,
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired)
+  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  onOpened: PropTypes.func,
+  onClosed: PropTypes.func
 };
 Select.defaultProps = {
-  isDisabled: false,
+  disabled: false,
   required: false,
   type: 'classic',
-  notFoundText: 'Ничего не нашлось',
-  items: []
+  notFoundText: 'Ничего не нашлось'
 };
 var _default = Select;
 exports["default"] = _default;

package/dist/lib/components/Switcher/Switcher.css

@@ -5,50 +5,50 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-switcher {
-  cursor: pointer;
+.mfui-switcher {
+  top: 22px;
+  right: 28px;
   width: 48px;
   height: 28px;
-  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
-          box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
   border-radius: 15.5px;
   background-color: #FFFFFF;
-  top: 22px;
-  right: 28px;
+  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
+          box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
+  cursor: pointer;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
-.mfui-beta-switcher_no-touch:hover {
+.mfui-switcher_no-touch:hover {
   background-color: #EDEDED;
 }
-.mfui-beta-switcher__pointer {
+.mfui-switcher__pointer {
   position: relative;
+  top: 1px;
+  left: 0;
   width: 24px;
   height: 24px;
+  border: 1px solid #D8D8D8;
   border-radius: 50%;
+  background-color: #FFFFFF;
   -webkit-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
           box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
-  border: 1px solid #D8D8D8;
-  background-color: #FFFFFF;
-  top: 1px;
-  left: 0;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
-.mfui-beta-switcher_checked {
+.mfui-switcher_checked {
   background-color: #00B956;
 }
-.mfui-beta-switcher_checked .mfui-beta-switcher__pointer {
+.mfui-switcher_checked .mfui-switcher__pointer {
   left: 22px;
 }
-.mfui-beta-switcher_checked.mfui-beta-switcher_no-touch:hover {
+.mfui-switcher_checked.mfui-switcher_no-touch:hover {
   background-color: #10E272;
 }
-.mfui-beta-switcher_disabled {
-  cursor: default;
+.mfui-switcher_disabled {
   background-color: #EDEDED;
+  cursor: default;
 }
-.mfui-beta-switcher_checked.mfui-beta-switcher_disabled,
-.mfui-beta-switcher_checked.mfui-beta-switcher_disabled.mfui-beta-switcher_no-touch:hover {
+.mfui-switcher_checked.mfui-switcher_disabled,
+.mfui-switcher_checked.mfui-switcher_disabled.mfui-switcher_no-touch:hover {
   background-color: #D8D8D8;
 }

package/dist/lib/components/Switcher/Switcher.js

@@ -9,17 +9,13 @@ exports["default"] = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
-var _cnCreate = _interopRequireDefault(require("../../utils/cnCreate"));
-
-var _detectTouch = _interopRequireDefault(require("../../utils/detectTouch"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _uiHelpers = require("@megafon/ui-helpers");
 
 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; }
 
-var cn = (0, _cnCreate["default"])('mfui-beta-switcher');
+var cn = (0, _uiHelpers.cnCreate)('mfui-switcher');
 
 var Switcher = function Switcher(props) {
   var className = props.className,
@@ -28,7 +24,7 @@ var Switcher = function Switcher(props) {
       _props$disabled = props.disabled,
       disabled = _props$disabled === void 0 ? false : _props$disabled,
       onChange = props.onChange;
-  var isTouch = (0, _detectTouch["default"])();
+  var isTouch = (0, _uiHelpers.detectTouch)();
 
   var handleChange = function handleChange(e) {
     if (disabled) {

package/dist/lib/components/Tabs/Tab.d.ts

@@ -1,11 +1,14 @@
 import * as React from 'react';
-export interface ITabProps {
+import { IFilterDataAttrs } from '@megafon/ui-helpers';
+export interface ITabProps extends IFilterDataAttrs {
     /** Заголовок таба */
     title?: string;
     /** Иконка таба */
     icon?: React.ReactNode;
     /** Ссылка */
     href?: string;
+    /** Дочерние элементы */
+    children?: React.ReactNode;
     /** Функция рендера компонента-обертки для заголовка и иконки */
     renderTabWrapper?: (tab: React.ReactNode) => React.ReactNode;
 }

package/dist/lib/components/Tabs/Tab.js

@@ -17,6 +17,7 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 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; }
 
+/* eslint-disable react/no-unused-prop-types */
 var Tab = function Tab(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/React.createElement(React.Fragment, null, children);
@@ -26,7 +27,8 @@ Tab.propTypes = {
   title: _propTypes["default"].string,
   icon: _propTypes["default"].node,
   href: _propTypes["default"].string,
-  renderTabWrapper: _propTypes["default"].func
+  renderTabWrapper: _propTypes["default"].func,
+  dataAttrs: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
 };
 var _default = Tab;
 exports["default"] = _default;