@weavix/tracker-components 0.0.2 → 0.1.0

package/build/cjs/components/Suggest/Suggest.js

@@ -0,0 +1,621 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SuggestView = exports.Suggest = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.iterator.constructor.js");
+require("core-js/modules/es.iterator.for-each.js");
+require("core-js/modules/es.number.constructor.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.promise.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/web.timers.js");
+var _react = _interopRequireWildcard(require("react"));
+var _illustrations = require("@gravity-ui/illustrations");
+var _uikit = require("@gravity-ui/uikit");
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+var _noop = _interopRequireDefault(require("lodash/noop"));
+var _sortBy4 = _interopRequireDefault(require("lodash/sortBy"));
+var _throttle = _interopRequireDefault(require("lodash/throttle"));
+var _uniqueId = _interopRequireDefault(require("lodash/uniqueId"));
+var _useLocalizedString2 = require("./../../hooks/useLocalizedString");
+var _OutsideFocusHandlerContainer = require("../useOnFocusOutside/OutsideFocusHandlerContainer");
+var _Suggest = require("./Suggest.classname");
+var _i18n = require("./i18n");
+require("./Suggest.css");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _excluded = ["id"];
+var PopupWrapper = function PopupWrapper(_ref) {
+  var open = _ref.open,
+    _ref$onOpenChange = _ref.onOpenChange,
+    onOpenChange = _ref$onOpenChange === void 0 ? _noop.default : _ref$onOpenChange,
+    children = _ref.children;
+  var isFirstRender = (0, _react.useRef)(true);
+  (0, _react.useEffect)(function () {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+    } else {
+      onOpenChange(open);
+    }
+  }, [onOpenChange, open]);
+  return children;
+};
+var SuggestView = exports.SuggestView = /*#__PURE__*/function (_React$PureComponent) {
+  function SuggestView() {
+    var _this;
+    (0, _classCallCheck2.default)(this, SuggestView);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = (0, _callSuper2.default)(this, SuggestView, [].concat(args));
+    _this.state = {
+      progress: false,
+      focused: false,
+      items: [],
+      progressTimerId: null,
+      fetchError: null,
+      showEmptyMessage: false
+    };
+    _this.throttledForceUpdate = (0, _throttle.default)(function () {
+      return _this.forceUpdate();
+    }, 300);
+    _this.textInputRef = /*#__PURE__*/_react.default.createRef();
+    _this.inputRef = /*#__PURE__*/_react.default.createRef();
+    _this.listRef = /*#__PURE__*/_react.default.createRef();
+    _this.latestPromise = void 0;
+    _this._getItems = (0, _debounce.default)(/*#__PURE__*/function () {
+      var _ref2 = (0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(text) {
+        var _items;
+        var items, result, index, keyDownEvent, _t;
+        return (0, _regeneratorRuntime2.default)().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__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _Suggest.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) {
+      (0, _uikit.setRef)(_this.textInputRef, element);
+      (0, _uikit.setRef)(_this.props.controlRef, element);
+    };
+    return _this;
+  }
+  (0, _inherits2.default)(SuggestView, _React$PureComponent);
+  return (0, _createClass2.default)(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__*/(0, _jsxRuntime.jsx)(_uikit.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: (0, _Suggest.cnSuggest)('input', inputClassName),
+        pin: pin,
+        id: id,
+        hasClear: hasClear,
+        error: error,
+        errorPlacement: errorPlacement,
+        qa: qa,
+        style: style,
+        controlProps: (0, _objectSpread2.default)({
+          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.default.createElement(_react.default.Fragment, undefined, children(input, items, progress));
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_OutsideFocusHandlerContainer.OutsideFocusHandlerContainer, {
+        as: "div",
+        className: (0, _Suggest.cnSuggest)(null, className),
+        enable: focused,
+        onFocusOutside: this.handleClosePopup,
+        children: [input, /*#__PURE__*/(0, _jsxRuntime.jsx)(PopupWrapper, {
+          open: renderStyle === 'popup' && this.isPopupHasContent() && this.state.focused,
+          onOpenChange: onOpenChange,
+          children: this.isPopupHasContent() && (renderStyle === 'inline' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: (0, _Suggest.cnSuggest)('inline-content'),
+            children: this.renderPopupContent()
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Popup, {
+            open: this.isPopupHasContent() && this.state.focused,
+            className: (0, _Suggest.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 _illustrations.NotFound;
+        case '500':
+        default:
+          return _illustrations.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__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _Suggest.cnSuggest)('list', {
+            empty: true
+          }),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RenderFallbackContent, {
+            text: text,
+            error: fetchError
+          })
+        });
+      }
+      var actions = buttonText ? [{
+        text: buttonText,
+        view: 'action',
+        onClick: function onClick() {
+          return _this4.getItems(text);
+        }
+      }] : [];
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.PlaceholderContainer, {
+        title: title,
+        description: description,
+        direction: "row",
+        size: "s",
+        align: "center",
+        image: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.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__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _Suggest.cnSuggest)('loader'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.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__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _Suggest.cnSuggest)('list'),
+          style: style,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.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 = (0, _sortBy4.default)([start, end]),
+        _sortBy3 = (0, _slicedToArray2.default)(_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.default.PureComponent);
+SuggestView.defaultProps = {
+  virtualized: false,
+  renderItem: function renderItem(item) {
+    return item;
+  },
+  debounce: 0,
+  renderStyle: 'popup'
+};
+var SuggestWithLocalization = function SuggestWithLocalization(props, ref) {
+  var config = (0, _uikit.getConfig)();
+  var _useLocalizedString = (0, _useLocalizedString2.useLocalizedString)(_i18n.defaultMessages, config.lang),
+    t = _useLocalizedString.t;
+  var _props$id = props.id,
+    id = _props$id === void 0 ? (0, _uniqueId.default)('suggest-') : _props$id,
+    restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SuggestView, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    id: id
+  }, restProps), {}, {
+    ref: ref,
+    t: t
+  }));
+};
+var Suggest = exports.Suggest = /*#__PURE__*/(0, _react.forwardRef)(SuggestWithLocalization);
+// #sourceMappingURL=Suggest.js.map