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

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

import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _get from "@babel/runtime/helpers/get";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import { __decorate } from "tslib";
import React from 'react';
import { action, computed, isArrayLike, observable, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import flatten from 'lodash/flatten';
import KeyCode from '../../../es/_util/KeyCode';
import TriggerField from '../trigger-field/TriggerField';
import Icon from '../icon';
import Tabs from '../tabs';
import { $l } from '../locale-context';
import IconCategory from './IconCategory';
import autobind from '../_util/autobind';
import { preventDefault, stopEvent } from '../_util/EventManager';
var COLUMNS = 5;

var IconPicker = /*#__PURE__*/function (_TriggerField) {
  _inherits(IconPicker, _TriggerField);

  var _super = _createSuper(IconPicker);

  function IconPicker(props, context) {
    var _this;

    _classCallCheck(this, IconPicker);

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

  _createClass(IconPicker, [{
    key: "categories",
    get: function get() {
      var propsIcon = this.props.icons;
      var icons = propsIcon || this.getContextConfig('icons');
      return 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 flatten(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: "range",
    get: function get() {
      return false;
    }
  }, {
    key: "getOmitPropsKeys",
    value: function getOmitPropsKeys() {
      return _get(_getPrototypeOf(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.RIGHT:
              stopEvent(e);
              this.handleKeyDownRight();
              break;

            case KeyCode.LEFT:
              stopEvent(e);
              this.handleKeyDownLeft();
              break;

            case KeyCode.DOWN:
              stopEvent(e);
              this.handleKeyDownDown();
              break;

            case KeyCode.UP:
              stopEvent(e);
              this.handleKeyDownUp();
              break;

            case KeyCode.END:
              stopEvent(e);
              this.handleKeyDownEnd();
              break;

            case KeyCode.HOME:
              stopEvent(e);
              this.handleKeyDownHome();
              break;

            case KeyCode.PAGE_UP:
              stopEvent(e);
              this.handleKeyDownPageUp();
              break;

            case KeyCode.PAGE_DOWN:
              stopEvent(e);
              this.handleKeyDownPageDown();
              break;

            case KeyCode.ENTER:
              e.preventDefault();
              this.handleKeyDownEnter();
              break;

            case KeyCode.TAB:
              this.handleKeyDownTab();
              break;

            case KeyCode.ESC:
              e.preventDefault();
              this.handleKeyDownEsc();
              break;

            default:
          }
        } else if (e.keyCode === KeyCode.SPACE) {
          e.preventDefault();
          this.handleKeyDownSpace();
        }
      }

      _get(_getPrototypeOf(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 (value) {
        if (this.filteredIcons.indexOf(value) !== -1) {
          this.choose(value);
        } else {
          this.setText(undefined);
        }
      } else if (!this.multiple) {
        this.setValue(this.emptyValue);
      } else if (this.getProp('required')) {
        var oldValues = this.getValues();
        this.validate(oldValues, false);
      }
    }
  }, {
    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.createElement(Icon, {
          customFontName: customFontName,
          type: value
        }));
      }
    }
  }, {
    key: "renderFilteredIcons",
    value: function renderFilteredIcons() {
      var prefixCls = this.prefixCls;
      var customFontName = this.props.customFontName;
      return /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-single-tab"),
        onMouseDown: preventDefault
      }, /*#__PURE__*/React.createElement(IconCategory, {
        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.TabPane;

      if (categoryKeys.length > 1) {
        var tabs = categoryKeys.map(function (category) {
          return /*#__PURE__*/React.createElement(TabPane, {
            key: category,
            tab: $l('Icon', category),
            className: "".concat(prefixCls, "-tab")
          }, /*#__PURE__*/React.createElement(IconCategory, {
            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.createElement("div", {
          onMouseDown: preventDefault
        }, /*#__PURE__*/React.createElement(Tabs, {
          onChange: this.handleTabsChange,
          activeKey: activeCategory
        }, tabs));
      }

      var category = categoryKeys[0];
      return /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-single-tab"),
        onMouseDown: preventDefault
      }, /*#__PURE__*/React.createElement(IconCategory, {
        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;
}(TriggerField);

IconPicker.displayName = 'IconPicker';
IconPicker.defaultProps = _objectSpread(_objectSpread({}, TriggerField.defaultProps), {}, {
  suffixCls: 'icon-picker',
  pageSize: 100
});

__decorate([observable], IconPicker.prototype, "activeCategory", void 0);

__decorate([observable], IconPicker.prototype, "selected", void 0);

__decorate([observable], IconPicker.prototype, "categoryPages", void 0);

__decorate([computed], IconPicker.prototype, "categories", null);

__decorate([computed], IconPicker.prototype, "categoryKeys", null);

__decorate([computed], IconPicker.prototype, "selectedIndex", null);

__decorate([computed], IconPicker.prototype, "filteredIcons", null);

__decorate([computed], IconPicker.prototype, "selectedIcon", null);

__decorate([action], IconPicker.prototype, "setActiveCategory", null);

__decorate([action], IconPicker.prototype, "setCategoryPage", null);

__decorate([autobind], IconPicker.prototype, "handleTabsChange", null);

__decorate([autobind], IconPicker.prototype, "handleItemSelect", null);

__decorate([autobind], IconPicker.prototype, "handlePageChange", null);

__decorate([autobind], IconPicker.prototype, "handleKeyDown", null);

__decorate([action], IconPicker.prototype, "changeSelected", null);

IconPicker = __decorate([observer], IconPicker);
export default IconPicker;
//# sourceMappingURL=IconPicker.js.map