choerodon-ui/pro/lib/icon-picker/IconPicker.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));

var _tslib = require("tslib");

var _react = _interopRequireDefault(require("react"));

var _mobx = require("mobx");

var _mobxReact = require("mobx-react");

var _flatten = _interopRequireDefault(require("lodash/flatten"));

var _KeyCode = _interopRequireDefault(require("../../../lib/_util/KeyCode"));

var _TriggerField2 = _interopRequireDefault(require("../trigger-field/TriggerField"));

var _icon = _interopRequireDefault(require("../icon"));

var _tabs = _interopRequireDefault(require("../tabs"));

var _localeContext = require("../locale-context");

var _IconCategory = _interopRequireDefault(require("./IconCategory"));

var _autobind = _interopRequireDefault(require("../_util/autobind"));

var _EventManager = require("../_util/EventManager");

var COLUMNS = 5;

var IconPicker = /*#__PURE__*/function (_TriggerField) {
  (0, _inherits2["default"])(IconPicker, _TriggerField);

  var _super = (0, _createSuper2["default"])(IconPicker);

  function IconPicker(props, context) {
    var _this;

    (0, _classCallCheck2["default"])(this, IconPicker);
    _this = _super.call(this, props, context);
    (0, _mobx.runInAction)(function () {
      _this.categoryPages = {};
      _this.activeCategory = _this.categoryKeys[0];
    });
    return _this;
  }

  (0, _createClass2["default"])(IconPicker, [{
    key: "categories",
    get: function get() {
      var propsIcon = this.props.icons;
      var icons = propsIcon || this.getContextConfig('icons');
      return (0, _mobx.isArrayLike)(icons) ? {
        "default": icons
      } : icons;
    }
  }, {
    key: "categoryKeys",
    get: function get() {
      return Object.keys(this.categories);
    }
  }, {
    key: "selectedIndex",
    get: function get() {
      return this.categories[this.activeCategory].indexOf(this.selectedIcon);
    }
  }, {
    key: "filteredIcons",
    get: function get() {
      var text = this.text,
          categories = this.categories;

      if (text) {
        return (0, _flatten["default"])(this.categoryKeys.map(function (category) {
          return categories[category].filter(function (icon) {
            return icon.startsWith(text);
          });
        }));
      }

      return [];
    }
  }, {
    key: "selectedIcon",
    get: function get() {
      var categories = this.categories;
      return this.selected || this.getValue() || categories[this.activeCategory][0];
    }
  }, {
    key: "getOmitPropsKeys",
    value: function getOmitPropsKeys() {
      return (0, _get2["default"])((0, _getPrototypeOf2["default"])(IconPicker.prototype), "getOmitPropsKeys", this).call(this).concat(['pageSize', 'customFontName', 'icons']);
    }
  }, {
    key: "setActiveCategory",
    value: function setActiveCategory(category) {
      this.activeCategory = category;
      var page = this.categoryPages[category];
      this.changeSelected(this.categories[category][(page - 1) * this.props.pageSize]);
    }
  }, {
    key: "setCategoryPage",
    value: function setCategoryPage(page, category) {
      this.categoryPages[category] = page;
      this.changeSelected(this.categories[category][(page - 1) * this.props.pageSize]);
    }
  }, {
    key: "handleTabsChange",
    value: function handleTabsChange(category) {
      this.setActiveCategory(category);
    }
  }, {
    key: "handleItemSelect",
    value: function handleItemSelect(icon) {
      this.choose(icon);
    }
  }, {
    key: "handlePageChange",
    value: function handlePageChange(page, category) {
      this.setCategoryPage(page, category);
    }
  }, {
    key: "handleKeyDown",
    value: function handleKeyDown(e) {
      if (!this.disabled && !this.readOnly) {
        if (this.popup) {
          switch (e.keyCode) {
            case _KeyCode["default"].RIGHT:
              (0, _EventManager.stopEvent)(e);
              this.handleKeyDownRight();
              break;

            case _KeyCode["default"].LEFT:
              (0, _EventManager.stopEvent)(e);
              this.handleKeyDownLeft();
              break;

            case _KeyCode["default"].DOWN:
              (0, _EventManager.stopEvent)(e);
              this.handleKeyDownDown();
              break;

            case _KeyCode["default"].UP:
              (0, _EventManager.stopEvent)(e);
              this.handleKeyDownUp();
              break;

            case _KeyCode["default"].END:
              (0, _EventManager.stopEvent)(e);
              this.handleKeyDownEnd();
              break;

            case _KeyCode["default"].HOME:
              (0, _EventManager.stopEvent)(e);
              this.handleKeyDownHome();
              break;

            case _KeyCode["default"].PAGE_UP:
              (0, _EventManager.stopEvent)(e);
              this.handleKeyDownPageUp();
              break;

            case _KeyCode["default"].PAGE_DOWN:
              (0, _EventManager.stopEvent)(e);
              this.handleKeyDownPageDown();
              break;

            case _KeyCode["default"].ENTER:
              e.preventDefault();
              this.handleKeyDownEnter();
              break;

            case _KeyCode["default"].TAB:
              this.handleKeyDownTab();
              break;

            case _KeyCode["default"].ESC:
              e.preventDefault();
              this.handleKeyDownEsc();
              break;

            default:
          }
        } else if (e.keyCode === _KeyCode["default"].SPACE) {
          e.preventDefault();
          this.handleKeyDownSpace();
        }
      }

      (0, _get2["default"])((0, _getPrototypeOf2["default"])(IconPicker.prototype), "handleKeyDown", this).call(this, e);
    }
  }, {
    key: "handleKeyDownHome",
    value: function handleKeyDownHome() {
      var activeCategory = this.activeCategory,
          categoryPages = this.categoryPages,
          pageSize = this.props.pageSize;
      var category = this.categories[activeCategory];
      var page = categoryPages[activeCategory] || 1;
      this.changeSelected(category[(page - 1) * pageSize]);
    }
  }, {
    key: "handleKeyDownEnd",
    value: function handleKeyDownEnd() {
      var activeCategory = this.activeCategory,
          categoryPages = this.categoryPages,
          pageSize = this.props.pageSize;
      var category = this.categories[activeCategory];
      var page = categoryPages[activeCategory] || 1;
      this.changeSelected(category[page * pageSize - 1] || category[category.length - 1]);
    }
  }, {
    key: "handleKeyDownLeftOrRight",
    value: function handleKeyDownLeftOrRight(isLeft) {
      var activeCategory = this.activeCategory,
          selectedIndex = this.selectedIndex,
          categoryPages = this.categoryPages,
          categories = this.categories,
          categoryKeys = this.categoryKeys,
          pageSize = this.props.pageSize;
      var step = isLeft ? -1 : 1;
      var category = categories[activeCategory];
      var index = selectedIndex;

      if (index % COLUMNS === (isLeft ? 0 : COLUMNS - 1) || !isLeft && index === category.length - 1) {
        var activeCategoryIndex = categoryKeys.indexOf(activeCategory);

        if (activeCategoryIndex !== (isLeft ? 0 : categoryKeys.length - 1)) {
          var newTabIndex = activeCategoryIndex + step;
          var newKey = categoryKeys[newTabIndex];
          this.setActiveCategory(newKey);
          var page = categoryPages[activeCategory] || 1;
          category = categories[newKey];
          var newPage = categoryPages[newKey] || 1;
          index += (newPage - page) * pageSize;

          if (!category[index]) {
            index = isLeft ? category.length - 1 : (newPage - 1) * pageSize;
          }
        }
      } else {
        index += step;
      }

      if (category[index]) {
        this.changeSelected(category[index]);
      }
    }
  }, {
    key: "handleKeyDownUpOrDown",
    value: function handleKeyDownUpOrDown(isUP) {
      var activeCategory = this.activeCategory,
          selectedIndex = this.selectedIndex,
          categoryPages = this.categoryPages,
          pageSize = this.props.pageSize;
      var step = isUP ? -1 : 1;
      var category = this.categories[activeCategory];
      var index = selectedIndex;
      var page = categoryPages[activeCategory] || 1;

      if (isUP ? index < (page - 1) * pageSize + COLUMNS && page > 1 : index > page * pageSize - COLUMNS && page < Math.ceil(category.length / pageSize)) {
        this.setCategoryPage(page + step, activeCategory);
      }

      index += step * COLUMNS;

      if (category[index]) {
        this.changeSelected(category[index]);
      }
    }
  }, {
    key: "handleKeyDownLeft",
    value: function handleKeyDownLeft() {
      this.handleKeyDownLeftOrRight(true);
    }
  }, {
    key: "handleKeyDownRight",
    value: function handleKeyDownRight() {
      this.handleKeyDownLeftOrRight(false);
    }
  }, {
    key: "handleKeyDownUp",
    value: function handleKeyDownUp() {
      this.handleKeyDownUpOrDown(true);
    }
  }, {
    key: "handleKeyDownDown",
    value: function handleKeyDownDown() {
      if (this.popup) {
        this.handleKeyDownUpOrDown(false);
      } else {
        this.expand();
      }
    }
  }, {
    key: "handleKeyDownPageUp",
    value: function handleKeyDownPageUp() {
      var activeCategory = this.activeCategory,
          selectedIndex = this.selectedIndex,
          categoryPages = this.categoryPages,
          pageSize = this.props.pageSize;
      var page = categoryPages[activeCategory] || 1;
      var category = this.categories[activeCategory];

      if (page > 1) {
        this.setCategoryPage(page - 1, activeCategory);
        this.changeSelected(category[selectedIndex - pageSize]);
      }
    }
  }, {
    key: "handleKeyDownPageDown",
    value: function handleKeyDownPageDown() {
      var activeCategory = this.activeCategory,
          selectedIndex = this.selectedIndex,
          categoryPages = this.categoryPages,
          pageSize = this.props.pageSize;
      var page = categoryPages[activeCategory] || 1;
      var category = this.categories[activeCategory];

      if (page < Math.ceil(category.length / pageSize)) {
        this.setCategoryPage(page + 1, activeCategory);
        this.changeSelected(category[selectedIndex + pageSize] || category[category.length - 1]);
      }
    }
  }, {
    key: "handleKeyDownEnter",
    value: function handleKeyDownEnter() {
      this.choose(this.selectedIcon);
    }
  }, {
    key: "handleKeyDownEsc",
    value: function handleKeyDownEsc() {
      this.collapse();
    }
  }, {
    key: "handleKeyDownTab",
    value: function handleKeyDownTab() {
      this.collapse();
    }
  }, {
    key: "handleKeyDownSpace",
    value: function handleKeyDownSpace() {
      this.expand();
    }
  }, {
    key: "changeSelected",
    value: function changeSelected(selected) {
      this.selected = selected;
    }
  }, {
    key: "choose",
    value: function choose(icon) {
      this.prepareSetValue(icon);
      this.changeSelected(icon);

      if (!this.multiple) {
        this.collapse();
      }
    }
  }, {
    key: "syncValueOnBlur",
    value: function syncValueOnBlur(value) {
      if (this.filteredIcons.indexOf(value) !== -1) {
        this.choose(value);
      } else {
        this.setText(undefined);
      }
    }
  }, {
    key: "handlePopupAnimateAppear",
    value: function handlePopupAnimateAppear() {// noop
    }
  }, {
    key: "handlePopupAnimateEnd",
    value: function handlePopupAnimateEnd() {// noop
    }
  }, {
    key: "getPopupStyleFromAlign",
    value: function getPopupStyleFromAlign() {
      return undefined;
    }
  }, {
    key: "getTriggerIconFont",
    value: function getTriggerIconFont() {
      return 'developer_board';
    }
  }, {
    key: "getPopupContent",
    value: function getPopupContent() {
      var text = this.text;

      if (text) {
        return this.renderFilteredIcons();
      }

      return this.renderIconCategories();
    }
  }, {
    key: "getPrefix",
    value: function getPrefix() {
      var customFontName = this.props.customFontName;
      var value = this.getValue();

      if (value) {
        return this.wrapperPrefix( /*#__PURE__*/_react["default"].createElement(_icon["default"], {
          customFontName: customFontName,
          type: value
        }));
      }
    }
  }, {
    key: "renderFilteredIcons",
    value: function renderFilteredIcons() {
      var prefixCls = this.prefixCls;
      var customFontName = this.props.customFontName;
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-single-tab"),
        onMouseDown: _EventManager.preventDefault
      }, /*#__PURE__*/_react["default"].createElement(_IconCategory["default"], {
        paging: false,
        customFontName: customFontName,
        value: this.selectedIcon,
        icons: this.filteredIcons,
        prefixCls: prefixCls,
        onSelect: this.handleItemSelect
      }));
    }
  }, {
    key: "renderIconCategories",
    value: function renderIconCategories() {
      var _this2 = this;

      var activeCategory = this.activeCategory,
          prefixCls = this.prefixCls,
          _this$props = this.props,
          pageSize = _this$props.pageSize,
          customFontName = _this$props.customFontName,
          categories = this.categories,
          categoryKeys = this.categoryKeys,
          categoryPages = this.categoryPages;
      var TabPane = _tabs["default"].TabPane;

      if (categoryKeys.length > 1) {
        var tabs = categoryKeys.map(function (category) {
          return /*#__PURE__*/_react["default"].createElement(TabPane, {
            key: category,
            tab: (0, _localeContext.$l)('Icon', category),
            className: "".concat(prefixCls, "-tab")
          }, /*#__PURE__*/_react["default"].createElement(_IconCategory["default"], {
            page: categoryPages[category],
            pageSize: pageSize,
            category: category,
            customFontName: customFontName,
            value: category === activeCategory ? _this2.selectedIcon : undefined,
            icons: categories[category],
            prefixCls: prefixCls,
            onSelect: _this2.handleItemSelect,
            onPageChange: _this2.handlePageChange
          }));
        });
        return /*#__PURE__*/_react["default"].createElement("div", {
          onMouseDown: _EventManager.preventDefault
        }, /*#__PURE__*/_react["default"].createElement(_tabs["default"], {
          onChange: this.handleTabsChange,
          activeKey: activeCategory
        }, tabs));
      }

      var category = categoryKeys[0];
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-single-tab"),
        onMouseDown: _EventManager.preventDefault
      }, /*#__PURE__*/_react["default"].createElement(_IconCategory["default"], {
        page: categoryPages[category],
        pageSize: pageSize,
        category: category,
        customFontName: customFontName,
        value: category === activeCategory ? this.selectedIcon : undefined,
        icons: categories[category],
        prefixCls: prefixCls,
        onSelect: this.handleItemSelect,
        onPageChange: this.handlePageChange
      }));
    }
  }, {
    key: "renderLengthInfo",
    value: function renderLengthInfo() {
      return undefined;
    }
  }]);
  return IconPicker;
}(_TriggerField2["default"]);

IconPicker.displayName = 'IconPicker';
IconPicker.defaultProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _TriggerField2["default"].defaultProps), {}, {
  suffixCls: 'icon-picker',
  pageSize: 100
});
(0, _tslib.__decorate)([_mobx.observable], IconPicker.prototype, "activeCategory", void 0);
(0, _tslib.__decorate)([_mobx.observable], IconPicker.prototype, "selected", void 0);
(0, _tslib.__decorate)([_mobx.observable], IconPicker.prototype, "categoryPages", void 0);
(0, _tslib.__decorate)([_mobx.computed], IconPicker.prototype, "categories", null);
(0, _tslib.__decorate)([_mobx.computed], IconPicker.prototype, "categoryKeys", null);
(0, _tslib.__decorate)([_mobx.computed], IconPicker.prototype, "selectedIndex", null);
(0, _tslib.__decorate)([_mobx.computed], IconPicker.prototype, "filteredIcons", null);
(0, _tslib.__decorate)([_mobx.computed], IconPicker.prototype, "selectedIcon", null);
(0, _tslib.__decorate)([_mobx.action], IconPicker.prototype, "setActiveCategory", null);
(0, _tslib.__decorate)([_mobx.action], IconPicker.prototype, "setCategoryPage", null);
(0, _tslib.__decorate)([_autobind["default"]], IconPicker.prototype, "handleTabsChange", null);
(0, _tslib.__decorate)([_autobind["default"]], IconPicker.prototype, "handleItemSelect", null);
(0, _tslib.__decorate)([_autobind["default"]], IconPicker.prototype, "handlePageChange", null);
(0, _tslib.__decorate)([_autobind["default"]], IconPicker.prototype, "handleKeyDown", null);
(0, _tslib.__decorate)([_mobx.action], IconPicker.prototype, "changeSelected", null);
IconPicker = (0, _tslib.__decorate)([_mobxReact.observer], IconPicker);
var _default = IconPicker;
exports["default"] = _default;
//# sourceMappingURL=IconPicker.js.map