@weavix/tracker-components 0.0.2 → 0.1.0

package/build/esm/components/Suggest/Suggest.js

@@ -0,0 +1,613 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _regeneratorRuntime from "@babel/runtime/helpers/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _callSuper from "@babel/runtime/helpers/callSuper";
+import _inherits from "@babel/runtime/helpers/inherits";
+var _excluded = ["id"];
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.for-each.js";
+import "core-js/modules/es.iterator.constructor.js";
+import "core-js/modules/es.iterator.for-each.js";
+import "core-js/modules/es.number.constructor.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.promise.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/web.timers.js";
+import React, { forwardRef, useEffect, useRef } from 'react';
+import { InternalError, NotFound } from '@gravity-ui/illustrations';
+import { Icon, List, Loader, PlaceholderContainer, Popup, TextInput, getConfig, setRef } from '@gravity-ui/uikit';
+import debounce from 'lodash/debounce';
+import noop from 'lodash/noop';
+import _sortBy from 'lodash/sortBy';
+import throttle from 'lodash/throttle';
+import uniqueId from 'lodash/uniqueId';
+import { useLocalizedString } from "./../../hooks/useLocalizedString";
+import { OutsideFocusHandlerContainer } from "../useOnFocusOutside/OutsideFocusHandlerContainer";
+import { cnSuggest } from "./Suggest.classname";
+import { defaultMessages } from "./i18n";
+import "./Suggest.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var PopupWrapper = function PopupWrapper(_ref) {
+  var open = _ref.open,
+    _ref$onOpenChange = _ref.onOpenChange,
+    onOpenChange = _ref$onOpenChange === void 0 ? noop : _ref$onOpenChange,
+    children = _ref.children;
+  var isFirstRender = useRef(true);
+  useEffect(function () {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+    } else {
+      onOpenChange(open);
+    }
+  }, [onOpenChange, open]);
+  return children;
+};
+export var SuggestView = /*#__PURE__*/function (_React$PureComponent) {
+  function SuggestView() {
+    var _this;
+    _classCallCheck(this, SuggestView);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, SuggestView, [].concat(args));
+    _this.state = {
+      progress: false,
+      focused: false,
+      items: [],
+      progressTimerId: null,
+      fetchError: null,
+      showEmptyMessage: false
+    };
+    _this.throttledForceUpdate = throttle(function () {
+      return _this.forceUpdate();
+    }, 300);
+    _this.textInputRef = /*#__PURE__*/React.createRef();
+    _this.inputRef = /*#__PURE__*/React.createRef();
+    _this.listRef = /*#__PURE__*/React.createRef();
+    _this.latestPromise = void 0;
+    _this._getItems = debounce(/*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(text) {
+        var _items;
+        var items, result, index, keyDownEvent, _t;
+        return _regeneratorRuntime().wrap(function (_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              items = [];
+              result = _this.props.getItems(text);
+              if (result instanceof Promise) {
+                _this.latestPromise = result;
+              }
+              _context.prev = 1;
+              _context.next = 2;
+              return result;
+            case 2:
+              items = _context.sent;
+              _this.setState({
+                fetchError: null
+              });
+              _context.next = 4;
+              break;
+            case 3:
+              _context.prev = 3;
+              _t = _context["catch"](1);
+              _this.setState({
+                fetchError: _t
+              });
+            case 4:
+              if (!(result instanceof Promise)) {
+                _context.next = 6;
+                break;
+              }
+              if (!(result !== _this.latestPromise)) {
+                _context.next = 5;
+                break;
+              }
+              return _context.abrupt("return");
+            case 5:
+              delete _this.latestPromise;
+            case 6:
+              _this.setState({
+                items: items,
+                showEmptyMessage: !((_items = items) !== null && _items !== void 0 && _items.length)
+              });
+              _this.clearProgress();
+              if (items.length && !_this.props.applicableInputValue) {
+                if (_this.props.getInitialActiveItemIndex) {
+                  index = _this.props.getInitialActiveItemIndex(items) || 0;
+                  _this.setState({
+                    activeIndex: index
+                  });
+                } else if (_this.listRef.current) {
+                  keyDownEvent = new KeyboardEvent('keydown', {
+                    key: 'ArrowDown'
+                  });
+                  _this.listRef.current.onKeyDown(keyDownEvent);
+                }
+              }
+            case 7:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[1, 3]]);
+      }));
+      return function (_x) {
+        return _ref2.apply(this, arguments);
+      };
+    }(), _this.props.debounce);
+    _this.handleClosePopup = function () {
+      _this.setState(function (state) {
+        return state.focused ? {
+          focused: false
+        } : null;
+      });
+    };
+    _this.renderItem = function (item, _active, index) {
+      return /*#__PURE__*/_jsx("div", {
+        className: cnSuggest('item'),
+        children: _this.props.renderItem(item)
+      }, index);
+    };
+    _this.onItemClick = function (item, index, fromKeyboard) {
+      var focused = false;
+      if (_this.props.onItemClick) {
+        focused = Boolean(_this.props.onItemClick(item, index, fromKeyboard));
+      }
+      _this.setState({
+        focused: focused
+      });
+    };
+    _this.onChangeActive = function (index) {
+      _this.setState({
+        activeIndex: index
+      });
+    };
+    _this.onUpdate = function (text) {
+      var _this$props = _this.props,
+        onUpdate = _this$props.onUpdate,
+        showItemsOnNoText = _this$props.showItemsOnNoText;
+      onUpdate(text);
+      if (text && !_this.state.focused) {
+        _this.setState({
+          focused: true
+        });
+      }
+      if (showItemsOnNoText || text) {
+        _this.getItems(text);
+      }
+    };
+    _this.onInputKeyDown = function (event) {
+      if (typeof _this.props.onTabKeyDown === 'function' && event.key === 'Tab' && _this.listRef.current) {
+        var _this$listRef$current;
+        var activeItemIndex = (_this$listRef$current = _this.listRef.current.getActiveItem()) !== null && _this$listRef$current !== void 0 ? _this$listRef$current : undefined;
+        var focused = _this.props.onTabKeyDown(_this.props.text, event, {
+          items: _this.state.items,
+          activeItem: activeItemIndex
+        });
+        if (_this.state.focused !== focused && typeof focused === 'boolean') {
+          _this.setState({
+            focused: focused
+          });
+        }
+      }
+      if (typeof _this.props.onInputKeyDown === 'function' && (!_this.listRef.current || typeof _this.listRef.current.getActiveItem() !== 'number')) {
+        _this.props.onInputKeyDown(_this.props.text, event);
+      }
+      if (event.key === 'Enter' && _this.props.applicableInputValue && typeof _this.props.onInputEnterKeyDown === 'function' && (!_this.listRef.current || typeof _this.listRef.current.getActiveItem() !== 'number')) {
+        _this.props.onInputEnterKeyDown(_this.props.text, event);
+      } else if (_this.listRef.current) {
+        _this.listRef.current.onKeyDown(event);
+      }
+      // Prevent outside form submission on Enter if Popup is opened. In order to submit the form, User has
+      // to press Enter twice - first to select item and close the Popup, then to submit.
+      if (event.key === 'Enter' && _this.state.focused) {
+        event.preventDefault();
+      }
+      if (event.key === 'Home' || event.key === 'End') {
+        // List component calls event.preventDefault() as result TextInput ignores Home/End hits
+        // and cursor is not moved appropriately, so we have to manage it manually
+        _this.moveCursorToEdge(event.key === 'Home', event.shiftKey);
+        event.preventDefault();
+      }
+    };
+    _this.updateTextInputRef = function (element) {
+      setRef(_this.textInputRef, element);
+      setRef(_this.props.controlRef, element);
+    };
+    return _this;
+  }
+  _inherits(SuggestView, _React$PureComponent);
+  return _createClass(SuggestView, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this$props2 = this.props,
+        getItemsOnMount = _this$props2.getItemsOnMount,
+        text = _this$props2.text;
+      if (this.props.syncPopupOnResize) {
+        window.addEventListener('resize', this.throttledForceUpdate);
+      }
+      if (getItemsOnMount) {
+        this.getItems(text);
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this$props3 = this.props,
+        text = _this$props3.text,
+        showItemsOnNoText = _this$props3.showItemsOnNoText;
+      if (text !== prevProps.text && (text || showItemsOnNoText)) {
+        this.getItems(text);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      window.removeEventListener('resize', this.throttledForceUpdate);
+      this.clearProgress();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props4 = this.props,
+        text = _this$props4.text,
+        size = _this$props4.size,
+        className = _this$props4.className,
+        popupClassName = _this$props4.popupClassName,
+        popupPlacement = _this$props4.popupPlacement,
+        popupDisablePortal = _this$props4.popupDisablePortal,
+        disabled = _this$props4.disabled,
+        autoComplete = _this$props4.autoComplete,
+        autoFocus = _this$props4.autoFocus,
+        placeholder = _this$props4.placeholder,
+        onBlur = _this$props4.onBlur,
+        onOpenChange = _this$props4.onOpenChange,
+        pin = _this$props4.pin,
+        id = _this$props4.id,
+        renderStyle = _this$props4.renderStyle,
+        hasClear = _this$props4.hasClear,
+        children = _this$props4.children,
+        inputClassName = _this$props4.inputClassName,
+        error = _this$props4.error,
+        errorPlacement = _this$props4.errorPlacement,
+        popupOffset = _this$props4.popupOffset,
+        applicableInputValue = _this$props4.applicableInputValue,
+        controlProps = _this$props4.controlProps,
+        startContent = _this$props4.startContent,
+        endContent = _this$props4.endContent,
+        style = _this$props4.style,
+        qa = _this$props4.qa;
+      var _this$state = this.state,
+        progress = _this$state.progress,
+        items = _this$state.items,
+        focused = _this$state.focused;
+      var input = /*#__PURE__*/_jsx(TextInput, {
+        size: size,
+        value: text,
+        placeholder: placeholder,
+        disabled: disabled,
+        autoComplete: autoComplete,
+        autoFocus: autoFocus,
+        ref: this.inputRef,
+        controlRef: this.updateTextInputRef,
+        onBlur: onBlur,
+        onUpdate: this.onUpdate,
+        onFocus: function onFocus() {
+          return _this2.setState({
+            focused: true
+          });
+        },
+        onKeyDown: this.onInputKeyDown,
+        className: cnSuggest('input', inputClassName),
+        pin: pin,
+        id: id,
+        hasClear: hasClear,
+        error: error,
+        errorPlacement: errorPlacement,
+        qa: qa,
+        style: style,
+        controlProps: _objectSpread({
+          role: 'combobox',
+          'aria-controls': "popup-".concat(id),
+          'aria-autocomplete': applicableInputValue ? 'both' : 'list',
+          'aria-expanded': this.isPopupHasContent() && this.state.focused,
+          'aria-activedescendant': this.state.activeIndex === undefined ? undefined : "".concat(id, "-list-item-").concat(this.state.activeIndex)
+        }, controlProps),
+        startContent: startContent,
+        endContent: endContent
+      });
+      if (children) {
+        return /*#__PURE__*/React.createElement(React.Fragment, undefined, children(input, items, progress));
+      }
+      return /*#__PURE__*/_jsxs(OutsideFocusHandlerContainer, {
+        as: "div",
+        className: cnSuggest(null, className),
+        enable: focused,
+        onFocusOutside: this.handleClosePopup,
+        children: [input, /*#__PURE__*/_jsx(PopupWrapper, {
+          open: renderStyle === 'popup' && this.isPopupHasContent() && this.state.focused,
+          onOpenChange: onOpenChange,
+          children: this.isPopupHasContent() && (renderStyle === 'inline' ? /*#__PURE__*/_jsx("div", {
+            className: cnSuggest('inline-content'),
+            children: this.renderPopupContent()
+          }) : /*#__PURE__*/_jsx(Popup, {
+            open: this.isPopupHasContent() && this.state.focused,
+            className: cnSuggest('popup', {
+              'has-fallback': Boolean(this.state.fetchError) || !items.length
+            }, popupClassName),
+            style: this.inputRef.current ? {
+              width: this.inputRef.current.offsetWidth
+            } : {},
+            anchorElement: this.inputRef.current,
+            placement: popupPlacement,
+            id: "popup-".concat(id),
+            onOutsideClick: this.handleClosePopup,
+            onEscapeKeyDown: this.handleClosePopup,
+            returnFocus: false,
+            disablePortal: popupDisablePortal,
+            offset: popupOffset,
+            children: this.renderPopupContent()
+          }, items === null || items === void 0 ? void 0 : items.length))
+        })]
+      });
+    }
+  }, {
+    key: "renderIllustration",
+    value: function renderIllustration(type) {
+      switch (type) {
+        case '404':
+          return NotFound;
+        case '500':
+        default:
+          return InternalError;
+      }
+    }
+  }, {
+    key: "getItems",
+    value: function getItems(text) {
+      this.setProgressWithDelay();
+      this.setState({
+        activeIndex: undefined,
+        fetchError: null,
+        showEmptyMessage: false
+      });
+      this._getItems(text);
+    }
+  }, {
+    key: "setProgressWithDelay",
+    value: function setProgressWithDelay() {
+      var _this3 = this;
+      if (!this.state.progressTimerId) {
+        this.setState({
+          progressTimerId: setTimeout(function () {
+            return _this3.setState({
+              progress: true
+            });
+          }, 300)
+        });
+      }
+    }
+  }, {
+    key: "clearProgress",
+    value: function clearProgress() {
+      var progressTimerId = this.state.progressTimerId;
+      this.setState({
+        progress: false
+      });
+      if (progressTimerId) {
+        clearTimeout(progressTimerId);
+        this.setState({
+          progressTimerId: null
+        });
+      }
+    }
+  }, {
+    key: "renderDefaultPopupFallback",
+    value: function renderDefaultPopupFallback(_ref3) {
+      var _this4 = this;
+      var type = _ref3.type,
+        RenderFallbackContent = _ref3.renderFallbackContent,
+        title = _ref3.title,
+        description = _ref3.description,
+        buttonText = _ref3.buttonText;
+      var text = this.props.text;
+      var fetchError = this.state.fetchError;
+      if (typeof RenderFallbackContent === 'function') {
+        return /*#__PURE__*/_jsx("div", {
+          className: cnSuggest('list', {
+            empty: true
+          }),
+          children: /*#__PURE__*/_jsx(RenderFallbackContent, {
+            text: text,
+            error: fetchError
+          })
+        });
+      }
+      var actions = buttonText ? [{
+        text: buttonText,
+        view: 'action',
+        onClick: function onClick() {
+          return _this4.getItems(text);
+        }
+      }] : [];
+      return /*#__PURE__*/_jsx(PlaceholderContainer, {
+        title: title,
+        description: description,
+        direction: "row",
+        size: "s",
+        align: "center",
+        image: /*#__PURE__*/_jsx(Icon, {
+          data: this.renderIllustration(type),
+          size: 100
+        }),
+        actions: actions
+      });
+    }
+  }, {
+    key: "getRenderFallbackContent",
+    value: function getRenderFallbackContent() {
+      var _this$props5 = this.props,
+        renderEmptyResult = _this$props5.renderEmptyResult,
+        getNoItemsMessage = _this$props5.getNoItemsMessage;
+      if (renderEmptyResult) {
+        return renderEmptyResult;
+      }
+      if (getNoItemsMessage) {
+        return function (_ref4) {
+          var text = _ref4.text;
+          return getNoItemsMessage === null || getNoItemsMessage === void 0 ? void 0 : getNoItemsMessage(text);
+        };
+      }
+      return null;
+    }
+  }, {
+    key: "renderPopupContent",
+    value: function renderPopupContent() {
+      var _this$props6 = this.props,
+        text = _this$props6.text,
+        virtualized = _this$props6.virtualized,
+        itemHeight = _this$props6.itemHeight,
+        id = _this$props6.id,
+        renderFetchItemsError = _this$props6.renderFetchItemsError;
+      var _this$state2 = this.state,
+        progress = _this$state2.progress,
+        items = _this$state2.items,
+        fetchError = _this$state2.fetchError,
+        showEmptyMessage = _this$state2.showEmptyMessage;
+      var t = this.props.t;
+      if (progress) {
+        return /*#__PURE__*/_jsx("div", {
+          className: cnSuggest('loader'),
+          children: /*#__PURE__*/_jsx(Loader, {})
+        });
+      }
+      if (fetchError) {
+        return this.renderDefaultPopupFallback({
+          type: '500',
+          renderFallbackContent: renderFetchItemsError,
+          title: t('fetch_error_title'),
+          description: t('fetch_error_description'),
+          buttonText: t('retry')
+        });
+      }
+      if (items.length) {
+        var style = {};
+        if (virtualized) {
+          var height = 0;
+          if (typeof itemHeight === 'function') {
+            items.forEach(function (item) {
+              height += itemHeight(item);
+            });
+          }
+          if (typeof itemHeight === 'number') {
+            height = items.length * itemHeight;
+          }
+          if (height) {
+            style.height = height;
+          }
+        }
+        return /*#__PURE__*/_jsx("div", {
+          className: cnSuggest('list'),
+          style: style,
+          children: /*#__PURE__*/_jsx(List, {
+            filterable: false,
+            items: items,
+            renderItem: this.renderItem,
+            onItemClick: this.onItemClick,
+            virtualized: virtualized,
+            itemHeight: itemHeight,
+            ref: this.listRef,
+            id: "".concat(id, "-list"),
+            role: 'listbox',
+            onChangeActive: this.onChangeActive,
+            activeItemIndex: this.state.activeIndex
+          })
+        });
+      }
+      if (showEmptyMessage && text) {
+        return this.renderDefaultPopupFallback({
+          type: '404',
+          renderFallbackContent: this.getRenderFallbackContent(),
+          title: t('items_not_found_title'),
+          description: t('items_not_found', {
+            text: text
+          })
+        });
+      }
+      return null;
+    }
+  }, {
+    key: "isPopupHasContent",
+    value: function isPopupHasContent() {
+      var _this$state3 = this.state,
+        progress = _this$state3.progress,
+        items = _this$state3.items,
+        fetchError = _this$state3.fetchError,
+        showEmptyMessage = _this$state3.showEmptyMessage;
+      var _this$props7 = this.props,
+        text = _this$props7.text,
+        _this$props7$showNoIt = _this$props7.showNoItemsMessage,
+        showNoItemsMessage = _this$props7$showNoIt === void 0 ? true : _this$props7$showNoIt;
+      return Boolean(progress || items.length || fetchError || text && showEmptyMessage && showNoItemsMessage);
+    }
+  }, {
+    key: "moveCursorToEdge",
+    value: function moveCursorToEdge(moveToStart, selectMode) {
+      if (!this.textInputRef.current) {
+        return;
+      }
+      var input = this.textInputRef.current;
+      var end = moveToStart ? 0 : input.value.length;
+      if (end == input.selectionStart) {
+        return;
+      }
+      var selStart = input.selectionStart >= 0 ? Number(input.selectionStart) : end;
+      var start = selectMode ? selStart : end;
+      var _sortBy2 = _sortBy([start, end]),
+        _sortBy3 = _slicedToArray(_sortBy2, 2),
+        b = _sortBy3[0],
+        e = _sortBy3[1];
+      input.setSelectionRange(b, e, start > end ? 'backward' : 'forward');
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(nextProps) {
+      if (!nextProps.showItemsOnNoText && !nextProps.text) {
+        return {
+          items: []
+        };
+      }
+      return null;
+    }
+  }]);
+}(React.PureComponent);
+SuggestView.defaultProps = {
+  virtualized: false,
+  renderItem: function renderItem(item) {
+    return item;
+  },
+  debounce: 0,
+  renderStyle: 'popup'
+};
+var SuggestWithLocalization = function SuggestWithLocalization(props, ref) {
+  var config = getConfig();
+  var _useLocalizedString = useLocalizedString(defaultMessages, config.lang),
+    t = _useLocalizedString.t;
+  var _props$id = props.id,
+    id = _props$id === void 0 ? uniqueId('suggest-') : _props$id,
+    restProps = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/_jsx(SuggestView, _objectSpread(_objectSpread({
+    id: id
+  }, restProps), {}, {
+    ref: ref,
+    t: t
+  }));
+};
+export var Suggest = /*#__PURE__*/forwardRef(SuggestWithLocalization);
+// #sourceMappingURL=Suggest.js.map