@jetbrains/ring-ui 5.1.23 → 5.1.24

package/dist/select-ng/select-ng.js

@@ -0,0 +1,625 @@
+import { g as _objectSpread2, f as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.array.concat.js';
+import 'core-js/modules/es.array.map.js';
+import 'core-js/modules/es.array.filter.js';
+import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/web.dom-collections.for-each.js';
+import angular from 'angular';
+import React from 'react';
+import { unmountComponentAtNode, render } from '../global/react-render-adapter.js';
+import getEventKey from '../global/get-event-key.js';
+import Select, { RerenderableSelect } from '../select/select.js';
+import messageBundleNg from '../message-bundle-ng/message-bundle-ng.js';
+import { ControlsHeight } from '../global/controls-height.js';
+import SelectNgOptions from './select-ng__options.js';
+import SelectLazy from './select-ng__lazy.js';
+import 'core-js/modules/es.array.iterator.js';
+import 'core-js/modules/es.weak-map.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'react-dom';
+import 'core-js/modules/es.array.index-of.js';
+import 'core-js/modules/es.array.reduce.js';
+import 'core-js/modules/es.string.trim.js';
+import 'core-js/modules/es.regexp.exec.js';
+import 'core-js/modules/es.array.find.js';
+import 'core-js/modules/es.string.replace.js';
+import 'core-js/modules/es.array.slice.js';
+import 'core-js/modules/es.object.assign.js';
+import 'core-js/modules/es.object.values.js';
+import 'classnames';
+import 'prop-types';
+import '@jetbrains/icons/chevron-down';
+import '@jetbrains/icons/close-12px';
+import 'deep-equal';
+import '../dropdown/dropdown.js';
+import '../global/data-tests.js';
+import 'core-js/modules/es.object.entries.js';
+import '../global/typescript-utils.js';
+import '../_helpers/anchor.js';
+import '@jetbrains/icons/chevron-10px';
+import '../icon/icon.js';
+import 'util-deprecate';
+import '../icon/icon__constants.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import 'core-js/modules/es.string.starts-with.js';
+import '../global/memoize.js';
+import 'core-js/modules/es.map.js';
+import '../button/button.js';
+import '../link/clickableLink.js';
+import '../_helpers/button__classes.js';
+import '../avatar/avatar.js';
+import '../global/url.js';
+import 'core-js/modules/es.string.match.js';
+import '../global/dom.js';
+import 'core-js/modules/es.string.split.js';
+import 'core-js/modules/es.set.js';
+import '../avatar/fallback-avatar.js';
+import 'core-js/modules/es.array.from.js';
+import '../global/get-uid.js';
+import 'core-js/modules/es.regexp.to-string.js';
+import '../popup/popup.js';
+import '../global/schedule-raf.js';
+import '../shortcuts/shortcuts.js';
+import '../shortcuts/core.js';
+import 'core-js/modules/es.array.includes.js';
+import 'core-js/modules/es.string.includes.js';
+import 'core-js/modules/es.array.splice.js';
+import 'core-js/modules/es.array.find-index.js';
+import 'combokeys';
+import '../global/sniffer.js';
+import 'sniffr';
+import '../tab-trap/tab-trap.js';
+import '../popup/position.js';
+import 'core-js/modules/es.array.sort.js';
+import '../popup/popup.consts.js';
+import '../popup/popup.target.js';
+import '../list/list.js';
+import 'core-js/modules/es.symbol.js';
+import 'core-js/modules/es.symbol.description.js';
+import 'react-virtualized/dist/es/List';
+import 'react-virtualized/dist/es/AutoSizer';
+import 'react-virtualized/dist/es/WindowScroller';
+import 'react-virtualized/dist/es/CellMeasurer';
+import 'memoize-one';
+import '../global/create-stateful-context.js';
+import '../list/list__link.js';
+import '../link/link.js';
+import '../_helpers/link.js';
+import '../_helpers/list.js';
+import '../list/list__item.js';
+import '../checkbox/checkbox.js';
+import '@jetbrains/icons/checkmark-14px';
+import '@jetbrains/icons/remove-14px';
+import '../global/prop-types.js';
+import '../global/composeRefs.js';
+import '../_helpers/checkbox.js';
+import '../list/list__custom.js';
+import '../list/list__title.js';
+import '../list/list__separator.js';
+import '../list/list__hint.js';
+import '../list/consts.js';
+import '../input/input.js';
+import '../i18n/i18n-context.js';
+import '../i18n/i18n.js';
+import '../control-label/control-label.js';
+import '../_helpers/control-label.js';
+import '../_helpers/input.js';
+import '../global/rerender-hoc.js';
+import '../global/fuzzy-highlight.js';
+import '../select/select__popup.js';
+import '@jetbrains/icons/search';
+import '../loader-inline/loader-inline.js';
+import '../_helpers/loader-inline.js';
+import '../shortcuts/shortcuts-hoc.js';
+import '../tags-list/tags-list.js';
+import '../tag/tag.js';
+import '../caret/caret.js';
+import '../text/text.js';
+import '../_helpers/select__filter.js';
+
+var LOADER_DELAY = 150; // delay to show loader in ms
+var INFINITE_SCROLL_PACK_SIZE = 50;
+var DIALOG_NG_SELECTOR = '[data-anchor=dialog-container][data-in-sidebar=false]';
+/**
+ * @name Select Ng
+ */
+
+var angularModule = angular.module('Ring.select', [SelectNgOptions, messageBundleNg]);
+angularModule.directive('rgSelect', function rgSelectDirective() {
+  var types = {
+    input: Select.Type.INPUT,
+    button: Select.Type.BUTTON,
+    dropdown: Select.Type.CUSTOM,
+    suggest: Select.Type.INPUT
+  };
+  var sizes = {
+    FULL: Select.Size.FULL,
+    S: Select.Size.S,
+    M: Select.Size.M,
+    L: Select.Size.L
+  };
+  return {
+    /**
+     * @property {Object} scope
+     * @property {Object} scope.ngModel
+     * @property {String} scope.selectType - select type. Can be "button" (default), "input" or "dropdown"
+     * @property {String} scope.lazy - Load options lazily. "true" by default.
+     * @property {Boolean} scope.withInfiniteScroll - If true, rgSelect calls getOptions with skip parameter when the list is scrolled to the bottom
+     * @property {String} scope.options - query for options
+     * @property {Boolean} scope.externalFilter - whether or not to use the options function as a filter.
+     * "filter" property should not be passed in that case.
+     * @property {Boolean} scope.multiple - toggles multiple selection
+     * @property {Function} scope.onSelect - callback to call on item selection
+     * Receives "selected" property (<rg-select on-select='doSomethingWith(selected)'>)
+     * @property {Function} scope.onDeselect - callback to call on item deselection
+     * Receives "deselected" property (<rg-select on-deselect='doSomethingWith(deselected)'>)
+     * @property {Function} scope.onOpen - callback to call on select popup opening
+     * @property {Function} scope.onClose - callback to call on select popup closing
+     * @property {Function} scope.onChange - callback to call on selection change
+     * Receives "selected" property (<rg-select on-change='doSomethingWith(selected)'>)
+     * @property {String} scope.label - Label to place on empty select button
+     * @property {String} scope.selectedLabel - Label to replace any selected item/items with
+     * @property {String} scope.notFoundMessage - message to display if no options found
+     * @property {String} scope.loadingMessage - message to display while loading
+     * @property {Object} scope.config - hash to pass to react select component
+     * @property {Boolean} scope.configAutoUpdate - whether or not to watch for configuration updates
+     * @property {String} scope.size - select size. Can be "S", "M" (default), or "L".
+     */
+    scope: {
+      ngModel: '=',
+      selectType: '@',
+      lazy: '=?',
+      withInfiniteScroll: '=?',
+      // NB: Deprecated! Use infinite-scroll-pack-size="50" instead
+      infiniteScrollPackSize: '@',
+      options: '@',
+      optionsScope: '=',
+      label: '@',
+      selectedLabel: '@',
+      externalFilter: '=?',
+      filter: '=?',
+      tags: '=?',
+      multiple: '=?',
+      clear: '=?',
+      onSelect: '&',
+      onDeselect: '&',
+      onOpen: '&',
+      onClose: '&',
+      onChange: '&',
+      notFoundMessage: '@',
+      loadingMessage: '@',
+      config: '=?',
+      configAutoUpdate: '=',
+      selectInstance: '=?',
+      size: '@',
+      dir: '@'
+    },
+    bindToController: true,
+    controllerAs: 'selectCtrl',
+    require: ['?ngModel', 'rgSelect'],
+    link: function link(scope, iElement, iAttrs, ctrls) {
+      var ngModelCtrl = ctrls[0];
+      var rgSelectCtrl = ctrls[1];
+      rgSelectCtrl.setNgModelCtrl(ngModelCtrl);
+    },
+    controller: ["$q", "$scope", "$element", "$attrs", "$timeout", "SelectOptions", "RingMessageBundle", function controller($q, $scope, $element, $attrs, $timeout, SelectOptions, RingMessageBundle) {
+      /*eslint-disable consistent-this*/
+      var ctrl = this;
+      /*eslint-enable consistent-this*/
+      var element = $element[0];
+      var container = document.createElement('span');
+      var infiniteScrollPackSize = Number(ctrl.infiniteScrollPackSize) || (ctrl.withInfiniteScroll ? INFINITE_SCROLL_PACK_SIZE : 0);
+
+      /**
+       * Properties
+       */
+      ctrl.selectInstance = null;
+      ctrl.ngModelCtrl = null;
+      ctrl.query = null;
+      ctrl.dataReceived = false;
+      ctrl.skipNextModelSync = false;
+      var scope = ctrl.optionsScope ? ctrl.optionsScope : $scope.$parent;
+      ctrl.setNgModelCtrl = function (ngModelCtrl) {
+        ctrl.ngModelCtrl = ngModelCtrl;
+      };
+
+      /**
+       * @param {Array} options
+       */
+      function memorizeOptions(options, skip) {
+        if (ctrl.loadedOptions && skip > 0) {
+          ctrl.loadedOptions = ctrl.loadedOptions.concat(options);
+          ctrl.stopLoadingNewOptions = options.length === 0 && infiniteScrollPackSize;
+        } else {
+          ctrl.loadedOptions = options;
+        }
+        ctrl.lastSkip = skip;
+        return ctrl.loadedOptions;
+      }
+      function resetMemorizedOptions() {
+        ctrl.lastSkip = -1;
+        ctrl.loadedOptions = [];
+        ctrl.stopLoadingNewOptions = false;
+      }
+      function getType() {
+        // $attrs.type as fallback, not recommended to use because of native "type" attribute
+        return ctrl.selectType || $attrs.type;
+      }
+      function getCurrentSkipParameter(query, prevQuery) {
+        if (!infiniteScrollPackSize || query !== prevQuery || !ctrl.loadedOptions) {
+          return 0;
+        }
+        return ctrl.lastSkip < 0 ? 0 : ctrl.lastSkip + infiniteScrollPackSize;
+      }
+      function isInDialog() {
+        var dialogContainer = document.querySelector(DIALOG_NG_SELECTOR);
+        return dialogContainer && dialogContainer.contains(element);
+      }
+      ctrl.syncSelectToNgModel = function (selectedValue) {
+        function valueOf(option) {
+          if (option && option.originalModel) {
+            return ctrl.optionsParser.getValue(option.originalModel);
+          }
+          return ctrl.optionsParser.getValue(option);
+        }
+        if (ctrl.ngModelCtrl) {
+          ctrl.skipNextModelSync = true;
+          if (getType() === 'suggest') {
+            ctrl.ngModelCtrl.$setViewValue(selectedValue.label);
+          } else if (Array.isArray(selectedValue)) {
+            ctrl.ngModelCtrl.$setViewValue(selectedValue.map(valueOf));
+          } else {
+            ctrl.ngModelCtrl.$setViewValue(valueOf(selectedValue));
+          }
+        }
+      };
+      ctrl.convertNgModelToSelect = function (model) {
+        function convertItem(modelValue) {
+          var item = ctrl.optionsParser.getOptionByValue(modelValue, ctrl.loadedOptions || []);
+
+          // could happen when lazily fetching the data
+          if (item === undefined) {
+            item = modelValue;
+          }
+          return angular.extend({
+            key: ctrl.optionsParser.getKey(item),
+            label: ctrl.optionsParser.getLabel(item),
+            selectedLabel: ctrl.optionsParser.getSelectedLabel(item),
+            description: ctrl.optionsParser.getDescription(item),
+            originalModel: item
+          }, typeof item === 'object' ? item : null);
+        }
+        if (model !== undefined && model !== null) {
+          if (Array.isArray(model)) {
+            return model.map(convertItem);
+          } else {
+            return convertItem(model);
+          }
+        }
+        return undefined;
+      };
+      var lastQuery = null;
+      var inProcessQueries = 0;
+      ctrl.getOptions = function (query, skip) {
+        return $q.when(ctrl.optionsParser.getOptions(query, skip));
+      };
+      var loaderDelayTimeout = null;
+      ctrl.showLoader = function () {
+        if (getType() !== 'suggest') {
+          reRenderSelect({
+            loading: true
+          });
+        }
+      };
+      ctrl.loadOptionsToSelect = function (query) {
+        if (ctrl.stopLoadingNewOptions && query === lastQuery) {
+          return $q.resolve();
+        }
+        ctrl.stopLoadingNewOptions = false;
+        var skip = getCurrentSkipParameter(query, lastQuery);
+        lastQuery = query;
+        $timeout.cancel(loaderDelayTimeout);
+
+        // Delay loader only when there is some data
+        // Otherwise, user can notice the "not found" message
+        if (ctrl.dataReceived) {
+          loaderDelayTimeout = $timeout(ctrl.showLoader, LOADER_DELAY);
+        } else {
+          ctrl.showLoader();
+        }
+        inProcessQueries++;
+        return ctrl.getOptions(query, skip).then(function (results) {
+          inProcessQueries--;
+          if (query !== lastQuery) {
+            return; // do not process the result if queries don't match
+          }
+          if (skip && ctrl.lastSkip !== -1 && skip !== ctrl.lastSkip + infiniteScrollPackSize && ctrl.infiniteScrollPackSize) {
+            return; // do not process the result if skips not match
+          }
+          var items = memorizeOptions(results.data || results, skip).map(ctrl.convertNgModelToSelect);
+          $timeout.cancel(loaderDelayTimeout);
+          ctrl.dataReceived = true;
+          reRenderSelect({
+            data: items,
+            loading: false
+          });
+        }).catch(function (error) {
+          inProcessQueries--;
+          $timeout.cancel(loaderDelayTimeout);
+          reRenderSelect({
+            loading: false
+          });
+          return $q.reject(error);
+        });
+      };
+      function setSelectModel(newValue) {
+        if (ctrl.skipNextModelSync) {
+          ctrl.skipNextModelSync = false;
+          return;
+        }
+        if (ctrl.ngModelCtrl) {
+          reRenderSelect({
+            selected: ctrl.convertNgModelToSelect(newValue)
+          });
+        }
+      }
+      function syncNgModelToSelect() {
+        $scope.$watch(function () {
+          return ctrl.ngModelCtrl && ctrl.ngModelCtrl.$modelValue;
+        }, setSelectModel, true);
+      }
+      function syncDisabled() {
+        $attrs.$observe('disabled', function (newValue) {
+          reRenderSelect({
+            disabled: newValue
+          });
+        });
+      }
+      function syncMultiple() {
+        $scope.$watch(function () {
+          return ctrl.multiple;
+        }, function () {
+          if (angular.isDefined(ctrl.multiple)) {
+            reRenderSelect({
+              multiple: ctrl.multiple
+            });
+          }
+        });
+      }
+      function syncConfig() {
+        $scope.$watchCollection(function () {
+          return ctrl.config;
+        }, function (config, old) {
+          if (config !== old) {
+            reRenderSelect(config);
+          }
+        });
+      }
+      function isSelectPopupOpen() {
+        return ctrl.selectInstance._popup.isVisible();
+      }
+      function attachDropdownIfNeeded() {
+        if (getType() === 'dropdown') {
+          var handler = function handler() {
+            ctrl.selectInstance._clickHandler();
+          };
+          element.addEventListener('click', handler);
+          element.addEventListener('keydown', function (event) {
+            var key = getEventKey(event);
+            var modifier = event.ctrlKey || event.altKey || event.metaKey || event.shiftKey;
+            if (key === 'Enter' && !modifier || key === ' ') {
+              if (!isSelectPopupOpen()) {
+                handler();
+
+                // XXX: preventDefault is needed because some controls (button, input, etc)
+                // have an activation behaviour which fires a `click` event on `keypress`
+                // @see https://www.w3.org/TR/2017/PR-html51-20170803/editing.html#activation
+                event.preventDefault();
+
+                // XXX: stopPropagation is needed because when a React component is rendered with
+                // shortcuts, document-level handlers are added. For example, `enter` that leads
+                // to this handler being called right after current function's call, which
+                // leads to the popup being closed immediately after opening.
+                // @see https://www.w3.org/TR/uievents/#Event_dispatch_and_DOM_event_flow
+                event.stopPropagation();
+              }
+            }
+          });
+        }
+      }
+      function listenToRouteChanges() {
+        $scope.$on('$locationChangeSuccess', function () {
+          if (isSelectPopupOpen()) {
+            ctrl.selectInstance._hidePopup();
+          }
+        });
+      }
+      function getSelectType() {
+        return types[getType()] || types.material;
+      }
+      function getSelectSize() {
+        return sizes[ctrl.size] || sizes.FULL;
+      }
+      function selectRef(instance) {
+        if (instance != null) {
+          ctrl.selectInstance = instance;
+        }
+      }
+      function reRenderSelect(props) {
+        var _ctrl$selectInstance;
+        if ((_ctrl$selectInstance = ctrl.selectInstance) !== null && _ctrl$selectInstance !== void 0 && _ctrl$selectInstance.node) {
+          ctrl.selectInstance.rerender(_objectSpread2(_objectSpread2({}, props), {}, {
+            ref: selectRef
+          }));
+        }
+      }
+
+      /**
+       * @param {newValue} newValue New value of options
+       * @param {value} value Previous value of options
+       */
+      function optionsWatcher(newValue, value) {
+        memorizeOptions(newValue, 0);
+        if (newValue === value) {
+          return;
+        }
+        if (ctrl.ngModelCtrl) {
+          setSelectModel(ctrl.ngModelCtrl.$modelValue);
+        }
+      }
+      function createDefaultConfig() {
+        var defaultConfig = {
+          label: ctrl.label || RingMessageBundle.select_label(),
+          selectedLabel: ctrl.selectedLabel,
+          allowAny: getType() === 'suggest',
+          hideArrow: getType() === 'suggest',
+          filter: ctrl.filter,
+          tags: ctrl.tags,
+          dir: ctrl.dir,
+          multiple: ctrl.multiple,
+          popupClassName: $attrs.popupClass,
+          clear: ctrl.clear,
+          ringPopupTarget: isInDialog() ? 'dialog-ng-popup-container' : null,
+          renderOptimization: getType() !== 'dropdown',
+          type: getSelectType(),
+          loadingMessage: ctrl.loadingMessage || RingMessageBundle.select_loading(),
+          notFoundMessage: ctrl.notFoundMessage || RingMessageBundle.select_options_not_found(),
+          targetElement: getType() === 'dropdown' ? element : null,
+          size: getSelectSize(),
+          height: ControlsHeight.S,
+          onBeforeOpen: function onBeforeOpen() {
+            resetMemorizedOptions();
+            ctrl.loadOptionsToSelect(ctrl.query);
+            $scope.$evalAsync(function () {});
+          },
+          onOpen: function onOpen() {
+            $scope.$evalAsync(function () {
+              ctrl.onOpen();
+            });
+          },
+          onClose: function onClose() {
+            ctrl.query = null;
+            $scope.$evalAsync(function () {
+              ctrl.onClose();
+            });
+          },
+          onSelect: function onSelect(selected, event) {
+            $scope.$evalAsync(function () {
+              ctrl.onSelect({
+                selected,
+                event
+              });
+            });
+          },
+          onDeselect: function onDeselect(deselected, event) {
+            $scope.$evalAsync(function () {
+              ctrl.onDeselect({
+                deselected,
+                event
+              });
+            });
+          },
+          onChange: function onChange(selected, event) {
+            ctrl.syncSelectToNgModel(selected);
+            $scope.$evalAsync(function () {
+              ctrl.onChange({
+                selected,
+                event
+              });
+            });
+          },
+          onFilter: function onFilter(query) {
+            $scope.$evalAsync(function () {
+              ctrl.query = query;
+              if (ctrl.externalFilter) {
+                ctrl.loadOptionsToSelect(query);
+              }
+              if (ctrl.onFilter) {
+                ctrl.onFilter(query);
+              }
+            });
+          },
+          reloadOptions: function reloadOptions(query) {
+            $scope.$evalAsync(function () {
+              ctrl.loadOptionsToSelect(query || ctrl.query);
+            });
+          },
+          getLoadedOptions: function getLoadedOptions() {
+            return ctrl.loadedOptions;
+          }
+        };
+        if (infiniteScrollPackSize) {
+          defaultConfig.onLoadMore = function () {
+            if (inProcessQueries === 0) {
+              $scope.$evalAsync(function () {
+                ctrl.loadOptionsToSelect(ctrl.query);
+              });
+            }
+          };
+        }
+        return defaultConfig;
+      }
+      function removeDefaultConfigPropFromUserConfig() {
+        if (!ctrl.defaultConfig || !ctrl.config) {
+          return;
+        }
+        Object.keys(ctrl.defaultConfig).filter(function (propName) {
+          return ctrl.config[propName] === ctrl.defaultConfig[propName];
+        }).forEach(function (propName) {
+          delete ctrl.config[propName];
+        });
+      }
+      ctrl.$onDestroy = function () {
+        unmountComponentAtNode(container);
+        removeDefaultConfigPropFromUserConfig();
+      };
+      ctrl.$onInit = function () {
+        ctrl.optionsParser = new SelectOptions(scope, ctrl.options);
+        ctrl.lazy = ctrl.hasOwnProperty('lazy') ? ctrl.lazy : true;
+
+        /**
+         * Provide specific filter function if externalFilter is enabled
+         */
+        if (ctrl.externalFilter) {
+          ctrl.filter = ctrl.filter || {};
+          ctrl.filter.fn = function () {
+            return true;
+          };
+        }
+        ctrl.defaultConfig = createDefaultConfig();
+        ctrl.config = angular.extend({}, ctrl.defaultConfig, ctrl.config || {});
+        if (getType() === 'suggest' || getType() === 'input') {
+          render( /*#__PURE__*/React.createElement(RerenderableSelect, _extends({
+            ref: selectRef
+          }, ctrl.config)), container);
+        } else {
+          ctrl.selectInstance = new SelectLazy(container, ctrl.config, ctrl, getType(), selectRef);
+        }
+
+        // Preserve existing contents of the directive
+        element.appendChild(container);
+        if (!ctrl.lazy) {
+          if (!ctrl.optionsParser.datasourceIsFunction) {
+            $scope.$watch(function () {
+              return ctrl.optionsParser.getOptions(ctrl.query, 0);
+            }, optionsWatcher, true);
+          } else {
+            ctrl.loadOptionsToSelect(ctrl.query);
+          }
+        }
+        syncNgModelToSelect();
+        syncDisabled();
+        syncMultiple();
+        if (ctrl.configAutoUpdate) {
+          syncConfig();
+        }
+        attachDropdownIfNeeded();
+        listenToRouteChanges();
+      };
+    }]
+  };
+});
+var selectNg = angularModule.name;
+
+export { selectNg as default };