@megafon/ui-core 6.0.0-beta.4 → 6.0.0

package/dist/es/components/Search/Search.js

@@ -1,20 +1,22 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
-import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.array.slice.js";
-import "core-js/modules/es.regexp.constructor.js";
 import "core-js/modules/es.regexp.exec.js";
-import "core-js/modules/es.regexp.sticky.js";
-import "core-js/modules/es.regexp.to-string.js";
 import "core-js/modules/es.string.replace.js";
 import "core-js/modules/es.string.split.js";
-import * as React from 'react';
+import "core-js/modules/es.regexp.constructor.js";
+import "core-js/modules/es.regexp.to-string.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.object.values.js";
+import React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import debounce from 'lodash.debounce';
+import * as PropTypes from 'prop-types';
 import Caption from "../Caption/Caption";
 import Header from "../Header/Header";
 import Preloader from "../Preloader/Preloader";
 import "./Search.css";
+
 var SearchIcon16 = function SearchIcon16(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
@@ -22,6 +24,7 @@ var SearchIcon16 = function SearchIcon16(props) {
     d: "M17 9a7 7 0 10-3.32 6l2.49 3 .77-.64-2.47-3A7 7 0 0017 9zM4 9a6 6 0 116 6 6 6 0 01-6-6z"
   }));
 };
+
 var SearchIcon = function SearchIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 32 32"
@@ -29,6 +32,7 @@ var SearchIcon = function SearchIcon(props) {
     d: "M16 24a9.94 9.94 0 005.7-1.8l4.83 5.8L28 26.72l-4.78-5.82A10 10 0 1016 24zm0-18a8 8 0 11-8 8 8 8 0 018-8z"
   }));
 };
+
 var ClearIcon = function ClearIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
@@ -37,6 +41,7 @@ var ClearIcon = function ClearIcon(props) {
     d: "M10 8.8L6.2 5 5 6.2 8.8 10 5 13.8 6.2 15l3.8-3.8 3.8 3.8 1.2-1.2-3.8-3.8L15 6.2 13.8 5 10 8.8z"
   }));
 };
+
 var SEARCH_QUERY_REGEX = /[^A-Z-a-zА-ЯЁа-яё0-9]/g;
 var MAX_POPULAR_ITEMS_LENGTH = 5;
 export var Verification = {
@@ -48,54 +53,60 @@ export var SearchItemsPaddings = {
   LARGE: 'large'
 };
 var cn = cnCreate('mfui-search');
+
 var Search = function Search(_ref) {
   var dataAttrs = _ref.dataAttrs,
-    _ref$value = _ref.value,
-    value = _ref$value === void 0 ? '' : _ref$value,
-    label = _ref.label,
-    _ref$searchId = _ref.searchId,
-    searchId = _ref$searchId === void 0 ? 'mfuiSearchId' : _ref$searchId,
-    placeholder = _ref.placeholder,
-    hideIcon = _ref.hideIcon,
-    _ref$items = _ref.items,
-    items = _ref$items === void 0 ? [] : _ref$items,
-    _ref$changeDelay = _ref.changeDelay,
-    changeDelay = _ref$changeDelay === void 0 ? 250 : _ref$changeDelay,
-    verification = _ref.verification,
-    disabled = _ref.disabled,
-    required = _ref.required,
-    noticeText = _ref.noticeText,
-    className = _ref.className,
-    classes = _ref.classes,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'textfield' : _ref$type,
-    showLoader = _ref.showLoader,
-    showNotFound = _ref.showNotFound,
-    textNotFound = _ref.textNotFound,
-    _ref$popularItems = _ref.popularItems,
-    popularItems = _ref$popularItems === void 0 ? [] : _ref$popularItems,
-    popularTitle = _ref.popularTitle,
-    onChange = _ref.onChange,
-    onSubmit = _ref.onSubmit,
-    onBlur = _ref.onBlur,
-    onFocus = _ref.onFocus,
-    onPopularItemClick = _ref.onPopularItemClick;
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? '' : _ref$value,
+      label = _ref.label,
+      _ref$searchId = _ref.searchId,
+      searchId = _ref$searchId === void 0 ? 'mfuiSearchId' : _ref$searchId,
+      placeholder = _ref.placeholder,
+      hideIcon = _ref.hideIcon,
+      _ref$items = _ref.items,
+      items = _ref$items === void 0 ? [] : _ref$items,
+      _ref$changeDelay = _ref.changeDelay,
+      changeDelay = _ref$changeDelay === void 0 ? 250 : _ref$changeDelay,
+      verification = _ref.verification,
+      disabled = _ref.disabled,
+      required = _ref.required,
+      noticeText = _ref.noticeText,
+      className = _ref.className,
+      classes = _ref.classes,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'textfield' : _ref$type,
+      showLoader = _ref.showLoader,
+      showNotFound = _ref.showNotFound,
+      textNotFound = _ref.textNotFound,
+      _ref$popularItems = _ref.popularItems,
+      popularItems = _ref$popularItems === void 0 ? [] : _ref$popularItems,
+      popularTitle = _ref.popularTitle,
+      onChange = _ref.onChange,
+      onSubmit = _ref.onSubmit,
+      onBlur = _ref.onBlur,
+      onFocus = _ref.onFocus,
+      onPopularItemClick = _ref.onPopularItemClick;
+
   var _React$useState = React.useState(value),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    searchQuery = _React$useState2[0],
-    setSearchQuery = _React$useState2[1];
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      searchQuery = _React$useState2[0],
+      setSearchQuery = _React$useState2[1];
+
   var _React$useState3 = React.useState(-1),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    activeIndex = _React$useState4[0],
-    setActiveIndex = _React$useState4[1];
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      activeIndex = _React$useState4[0],
+      setActiveIndex = _React$useState4[1];
+
   var _React$useState5 = React.useState(false),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    isFocused = _React$useState6[0],
-    setFocus = _React$useState6[1];
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      isFocused = _React$useState6[0],
+      setFocus = _React$useState6[1];
+
   var _React$useState7 = React.useState(-1),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    popularActiveIndex = _React$useState8[0],
-    setPopularActiveIndex = _React$useState8[1];
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      popularActiveIndex = _React$useState8[0],
+      setPopularActiveIndex = _React$useState8[1];
+
   var debouncedOnChange = React.useRef(debounce(function (inputValue) {
     return onChange && onChange(inputValue);
   }, changeDelay));
@@ -111,9 +122,10 @@ var Search = function Search(_ref) {
   var showPopularItems = !!correctPopularItems.length;
   var handleChange = React.useCallback(function (e) {
     var _e$target$value = e.target.value,
-      inputValue = _e$target$value === void 0 ? '' : _e$target$value;
+        inputValue = _e$target$value === void 0 ? '' : _e$target$value;
     setSearchQuery(inputValue);
     setActiveIndex(-1);
+
     if (changeDelay === 0) {
       onChange === null || onChange === void 0 ? void 0 : onChange(inputValue);
     } else {
@@ -139,8 +151,10 @@ var Search = function Search(_ref) {
     if (disabled) {
       return;
     }
+
     var chosenItem = items[index];
     onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(chosenItem.value);
+
     if (chosenItem.href) {
       window.location.href = chosenItem.href;
     }
@@ -168,12 +182,14 @@ var Search = function Search(_ref) {
   }, []);
   var handlePopularItemMouseUp = React.useCallback(function () {
     var _a;
+
     var chosenValue = popularItems[popularActiveIndex].title;
     (_a = fieldNode === null || fieldNode === void 0 ? void 0 : fieldNode.current) === null || _a === void 0 ? void 0 : _a.blur();
     onPopularItemClick === null || onPopularItemClick === void 0 ? void 0 : onPopularItemClick(chosenValue);
   }, [onPopularItemClick, popularActiveIndex, popularItems]);
   var handleKeyDownPopularItems = React.useCallback(function (e) {
     var _a;
+
     switch (true) {
       case e.key === 'ArrowDown' && popularActiveIndex < popularItems.length - 1:
         setPopularActiveIndex(function (index) {
@@ -181,24 +197,30 @@ var Search = function Search(_ref) {
         });
         e.preventDefault();
         break;
+
       case e.key === 'ArrowUp' && popularActiveIndex > -1:
         setPopularActiveIndex(function (index) {
           return index - 1;
         });
         e.preventDefault();
         break;
+
       case e.key === 'Enter' && popularActiveIndex > -1:
         {
           var currentHref = (_a = popularItems[popularActiveIndex]) === null || _a === void 0 ? void 0 : _a.href;
           handlePopularItemMouseUp();
+
           if (currentHref) {
             window.location.href = currentHref;
           }
+
           break;
         }
+
       default:
         break;
     }
+
     return false;
   }, [popularActiveIndex, popularItems, handlePopularItemMouseUp]);
   var handleKeyDownItems = React.useCallback(function (e) {
@@ -209,37 +231,49 @@ var Search = function Search(_ref) {
         });
         e.preventDefault();
         break;
+
       case e.key === 'ArrowUp' && activeIndex > -1:
         setActiveIndex(function (index) {
           return index - 1;
         });
         e.preventDefault();
         break;
+
       case e.key === 'Enter' && activeIndex > -1:
         handleItemSubmit(activeIndex);
         e.preventDefault();
         break;
+
       case e.key === 'Enter' && activeIndex === -1:
         handleSearchSubmit();
         break;
+
       default:
         break;
     }
+
     return false;
   }, [activeIndex, handleItemSubmit, handleSearchSubmit, items.length]);
   var handleKeyDown = React.useCallback(function (e) {
     if (showNotFound && showPopularItems) {
       return handleKeyDownPopularItems(e);
     }
+
     return handleKeyDownItems(e);
   }, [handleKeyDownItems, handleKeyDownPopularItems, showNotFound, showPopularItems]);
+
   var handleClearClick = function handleClearClick() {
-    var _a;
+    var _a; // TODO: После обновления TS до 4 версии, установить @types/lodash.debounce и убрать disable
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+
+
     !!debouncedOnChange.current && debouncedOnChange.current.cancel();
     onChange === null || onChange === void 0 ? void 0 : onChange('');
     setSearchQuery('');
     (_a = fieldNode === null || fieldNode === void 0 ? void 0 : fieldNode.current) === null || _a === void 0 ? void 0 : _a.focus();
   };
+
   React.useEffect(function () {
     return setSearchQuery(value);
   }, [value]);
@@ -255,6 +289,7 @@ var Search = function Search(_ref) {
   }, [disabled, isFocused]);
   React.useEffect(function () {
     var _a, _b;
+
     if (activeIndex !== -1) {
       (_b = (_a = highlightedItem.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, {
         behavior: 'smooth',
@@ -262,6 +297,7 @@ var Search = function Search(_ref) {
       });
     }
   }, [activeIndex, items]);
+
   var highlightString = function highlightString(title) {
     var query = searchQuery.replace(SEARCH_QUERY_REGEX, function (w) {
       return "\\".concat(w);
@@ -275,6 +311,7 @@ var Search = function Search(_ref) {
       }, fragment) : fragment);
     }));
   };
+
   var renderSubmitButton = function renderSubmitButton() {
     var Icon = isCompact ? SearchIcon16 : SearchIcon;
     return /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.submit), {
@@ -285,6 +322,7 @@ var Search = function Search(_ref) {
       className: cn('submit-icon', [classes === null || classes === void 0 ? void 0 : classes.icon])
     }));
   };
+
   var renderClearButton = function renderClearButton() {
     return /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.clearButton), {
       onClick: handleClearClick,
@@ -294,6 +332,7 @@ var Search = function Search(_ref) {
       className: cn('clear-icon')
     }));
   };
+
   var renderList = function renderList() {
     return /*#__PURE__*/React.createElement("div", {
       className: cn('list')
@@ -301,9 +340,9 @@ var Search = function Search(_ref) {
       className: cn('list-inner')
     }, items.map(function (_ref2, i) {
       var itemValue = _ref2.value,
-        searchView = _ref2.searchView,
-        _ref2$paddings = _ref2.paddings,
-        paddings = _ref2$paddings === void 0 ? SearchItemsPaddings.LARGE : _ref2$paddings;
+          searchView = _ref2.searchView,
+          _ref2$paddings = _ref2.paddings,
+          paddings = _ref2$paddings === void 0 ? SearchItemsPaddings.LARGE : _ref2$paddings;
       return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1), {
         ref: activeIndex === i ? highlightedItem : null,
         className: cn('list-item', {
@@ -318,13 +357,14 @@ var Search = function Search(_ref) {
       }), searchView || highlightString(itemValue)));
     })));
   };
+
   var renderPopularItems = function renderPopularItems() {
     return /*#__PURE__*/React.createElement("div", {
       className: cn('popular-list')
     }, correctPopularItems.map(function (_ref3, i) {
       var title = _ref3.title,
-        href = _ref3.href,
-        icon = _ref3.icon;
+          href = _ref3.href,
+          icon = _ref3.icon;
       var Elem = href ? 'a' : 'div';
       return /*#__PURE__*/React.createElement(Elem, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.popularItem, i + 1), {
         className: cn('popular-item', {
@@ -343,6 +383,7 @@ var Search = function Search(_ref) {
       }, title));
     }));
   };
+
   var renderNotFound = function renderNotFound() {
     return /*#__PURE__*/React.createElement("div", {
       className: cn('list', {
@@ -363,6 +404,7 @@ var Search = function Search(_ref) {
       hasMargin: false
     }, popularTitle || 'Популярные действия'), renderPopularItems())));
   };
+
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       open: isFocused,
@@ -408,4 +450,57 @@ var Search = function Search(_ref) {
     })
   }), noticeText));
 };
+
+Search.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    control: PropTypes.objectOf(PropTypes.string.isRequired),
+    searchField: PropTypes.objectOf(PropTypes.string.isRequired),
+    submit: PropTypes.objectOf(PropTypes.string.isRequired),
+    item: PropTypes.objectOf(PropTypes.string.isRequired),
+    itemTitle: PropTypes.objectOf(PropTypes.string.isRequired),
+    notice: PropTypes.objectOf(PropTypes.string.isRequired),
+    popularItem: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  value: PropTypes.string,
+  label: PropTypes.string,
+  searchId: PropTypes.string,
+  placeholder: PropTypes.string,
+  hideIcon: PropTypes.bool,
+  items: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string.isRequired,
+    href: PropTypes.string,
+    searchView: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
+    paddings: PropTypes.oneOf(Object.values(SearchItemsPaddings))
+  }).isRequired),
+  changeDelay: PropTypes.number,
+  verification: PropTypes.oneOf(['valid', 'error']),
+  noticeText: PropTypes.string,
+  disabled: PropTypes.bool,
+  required: PropTypes.bool,
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    label: PropTypes.string,
+    input: PropTypes.string,
+    listItemTitle: PropTypes.string,
+    control: PropTypes.string,
+    icon: PropTypes.string,
+    textNotFound: PropTypes.string,
+    popularTitle: PropTypes.string,
+    popularItem: PropTypes.string
+  }),
+  showNotFound: PropTypes.bool,
+  textNotFound: PropTypes.string,
+  popularItems: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    href: PropTypes.string,
+    icon: PropTypes.element
+  }).isRequired),
+  popularTitle: PropTypes.string,
+  onChange: PropTypes.func,
+  onSubmit: PropTypes.func,
+  onBlur: PropTypes.func,
+  onFocus: PropTypes.func,
+  onPopularItemClick: PropTypes.func
+};
 export default Search;