qt-public-ui/lib/AppSelect/dropDownSelect.js

新设计规范下业务组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _reactRouterDom = require("react-router-dom");
var _ = require("..");
var _antd = require("antd");
var _classnames = _interopRequireDefault(require("classnames"));
var _lodash = require("lodash");
require("./style.less");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var TabPane = _antd.Tabs.TabPane;
var defaultApp = function defaultApp(type) {
  var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
  var all = data.find(function (item) {
    return item.key === type;
  });
  return {
    iconUrl: 'umicon-chanpin_huaban1',
    appName: all ? "\u5168\u90E8".concat(all.tab) : '全部应用',
    appInfoId: 'all'
  };
};
var DropDownSelect = function DropDownSelect(props) {
  var _newData$;
  var style = props.style,
    className = props.className,
    showAll = props.showAll,
    appId = props.appId,
    getJumpUrl = props.getJumpUrl,
    data = props.data,
    defaultActiveKey = props.defaultActiveKey,
    onChange = props.onChange,
    onChangeTabs = props.onChangeTabs;
  var inputRef = (0, _react.useRef)();
  var getCurrent = function getCurrent(list, _appId) {
    var current = defaultApp(1, list);
    data.forEach(function (item) {
      var _item$children = item.children,
        children = _item$children === void 0 ? [] : _item$children;
      if ((0, _lodash.isArray)(children) && children.find(function (val) {
        return String(_appId) === String(val.appInfoId);
      })) {
        current = children.find(function (val) {
          return String(_appId) === String(val.appInfoId);
        });
      }
    });
    return current;
  };
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    visible = _useState2[0],
    setVisible = _useState2[1];
  var _useState3 = (0, _react.useState)(''),
    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
    keyword = _useState4[0],
    setKeyword = _useState4[1];
  var _useState5 = (0, _react.useState)({}),
    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
    currentApp = _useState6[0],
    setCurrentApp = _useState6[1];
  var _useState7 = (0, _react.useState)(''),
    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
    placeholder = _useState8[0],
    setPlaceholder = _useState8[1];
  var _useState9 = (0, _react.useState)((0, _lodash.get)(currentApp, 'appName')),
    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
    appValue = _useState10[0],
    setAppValue = _useState10[1];
  var _useState11 = (0, _react.useState)(data),
    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
    newData = _useState12[0],
    setNewData = _useState12[1];
  var _useState13 = (0, _react.useState)(defaultActiveKey),
    _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
    activeKey = _useState14[0],
    setActiveKey = _useState14[1];
  var _useHistory = (0, _reactRouterDom.useHistory)(),
    push = _useHistory.push;
  var _useLocation = (0, _reactRouterDom.useLocation)(),
    pathname = _useLocation.pathname;
  var onDropdownVisibleChange = function onDropdownVisibleChange(newVisible) {
    setVisible(newVisible);
    setActiveKey(getActiveKey(data, appId));
    if (newVisible) {
      setAppValue(null);
      setPlaceholder((0, _lodash.get)(currentApp, 'appName'));
    } else {
      !appValue && setAppValue((0, _lodash.get)(currentApp, 'appName'));
      inputRef.current && inputRef.current.input && inputRef.current.input.blur();
    }
  };
  var onSearchChange = function onSearchChange(e) {
    setKeyword(e.target.value);
    setNewData(data.filter(function (item) {
      var children = item.children;
      var childrenData = children.filter(function (val) {
        var _val$appName;
        return (val === null || val === void 0 ? void 0 : (_val$appName = val.appName) === null || _val$appName === void 0 ? void 0 : _val$appName.toLowerCase().indexOf(e.target.value.toLowerCase())) > -1;
      });
      return (0, _lodash.isArray)(childrenData) && childrenData.length;
    }));
  };
  var getActiveKey = function getActiveKey(list, _appId) {
    var current = list.find(function (item) {
      var _item$children2 = item.children,
        children = _item$children2 === void 0 ? [] : _item$children2;
      return (0, _lodash.isArray)(children) && children.find(function (val) {
        return String(_appId) === String(val.appInfoId);
      });
    });
    return (current === null || current === void 0 ? void 0 : current.key) || defaultActiveKey;
  };
  (0, _react.useEffect)(function () {
    setCurrentApp(getCurrent(data, appId));
    setAppValue((0, _lodash.get)(getCurrent(data, appId), 'appName'));
    setNewData(data);
    setActiveKey(getActiveKey(data, appId));
  }, [appId, JSON.stringify(data)]);
  var onAppChange = function onAppChange(app) {
    var oldApp = getCurrent(data, app);
    setCurrentApp(app);
    setAppValue((0, _lodash.get)(app, 'appName'));
    setKeyword('');
    setVisible(false);
    (0, _lodash.isFunction)(onChange) && onChange(app, oldApp);
    getJumpUrl && push(getJumpUrl(pathname, appId, app.appInfoId));
  };
  var onFocusInput = function onFocusInput() {
    setPlaceholder((0, _lodash.get)(currentApp, 'appName'));
    setAppValue(null);
  };
  var getSelects = function getSelects() {
    var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
    var key = arguments.length > 1 ? arguments[1] : undefined;
    if (!children.length) {
      return /*#__PURE__*/_react["default"].createElement(_.Default, {
        type: "empty"
      });
    }
    return /*#__PURE__*/_react["default"].createElement("ul", {
      className: keyword ? '' : 'app-list'
    }, (showAll && !keyword ? [defaultApp(key, data)] : []).concat(children).filter(function (app) {
      return new RegExp(keyword, 'i').test(app === null || app === void 0 ? void 0 : app.appName);
    }).map(function (app) {
      var appInfoId = app.appInfoId,
        appName = app.appName,
        iconUrl = app.iconUrl,
        isMyFavorite = app.isMyFavorite;
      return (0, _.autoAddTooltip)(function (ref) {
        return /*#__PURE__*/_react["default"].createElement("li", {
          ref: ref,
          key: appInfoId,
          className: (0, _classnames["default"])('app-item', {
            'selected-app': (0, _lodash.toString)((0, _lodash.get)(currentApp, 'appInfoId')) === (0, _lodash.toString)(appInfoId)
          }),
          onClick: function onClick() {
            onAppChange(app);
          }
        }, appInfoId !== 'all' ? /*#__PURE__*/_react["default"].createElement("img", {
          className: "app-image",
          src: iconUrl
        }) : /*#__PURE__*/_react["default"].createElement(_.Icon, {
          className: "app-icon",
          type: iconUrl
        }), /*#__PURE__*/_react["default"].createElement("span", {
          className: "app-name"
        }, appName), isMyFavorite && /*#__PURE__*/_react["default"].createElement(_.Icon, {
          type: "umicon-xingbiaozhiding-shixin",
          style: {
            color: '#FC9C41',
            fontSize: 12,
            position: 'absolute',
            right: 2,
            top: 12
          }
        }));
      }, {
        type: 'singleLine',
        title: appName
      });
    }));
  };
  var onTabsChange = function onTabsChange(key) {
    setActiveKey(key);
    (0, _lodash.isFunction)(onChangeTabs) && onChangeTabs(key);
    inputRef.current && inputRef.current.input && inputRef.current.input.focus();
  };
  var showTabsDom = function showTabsDom() {
    return !keyword ? /*#__PURE__*/_react["default"].createElement(_antd.Tabs, {
      activeKey: activeKey,
      onChange: onTabsChange,
      tabBarGutter: 32
    }, newData.map(function (item) {
      var tab = item.tab,
        key = item.key,
        _item$children3 = item.children,
        children = _item$children3 === void 0 ? [] : _item$children3;
      return /*#__PURE__*/_react["default"].createElement(TabPane, {
        tab: tab,
        key: key
      }, getSelects(children, key));
    })) : /*#__PURE__*/_react["default"].createElement("div", {
      className: "app-list"
    }, newData.map(function (item) {
      var tab = item.tab,
        key = item.key,
        _item$children4 = item.children,
        children = _item$children4 === void 0 ? [] : _item$children4;
      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
        key: key,
        className: "dropdown-app-select-text"
      }, tab), getSelects(children, key));
    }));
  };
  var appSelectDropdownOverlayContent = /*#__PURE__*/_react["default"].createElement("div", {
    className: "dropdown-app-select"
  }, data.length > 1 ? showTabsDom() : getSelects((_newData$ = newData[0]) === null || _newData$ === void 0 ? void 0 : _newData$.children, activeKey));
  return /*#__PURE__*/_react["default"].createElement(_antd.Dropdown, {
    visible: visible,
    onVisibleChange: onDropdownVisibleChange,
    overlay: appSelectDropdownOverlayContent,
    trigger: ['click']
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _classnames["default"])('comp-app-select comp-app-select-dropdown', className),
    style: style
  }, /*#__PURE__*/_react["default"].createElement(_antd.Input, {
    value: appValue || keyword,
    ref: inputRef,
    prefix: /*#__PURE__*/_react["default"].createElement("span", {
      className: "app-cover"
    }, (0, _lodash.get)(currentApp, 'appId') !== 'all' ? /*#__PURE__*/_react["default"].createElement("img", {
      className: "app-image",
      src: (0, _lodash.get)(currentApp, 'iconUrl')
    }) : /*#__PURE__*/_react["default"].createElement(_.Icon, {
      className: "app-icon",
      type: (0, _lodash.get)(currentApp, 'iconUrl')
    })),
    onFocus: onFocusInput,
    onChange: onSearchChange,
    placeholder: placeholder,
    suffix: /*#__PURE__*/_react["default"].createElement(_.Icon, {
      className: "icon-directivity",
      type: visible ? 'ant-caret-up' : 'ant-caret-down'
    })
  })));
};
var _default = exports["default"] = DropDownSelect;