qt-public-ui/es/AppSelect/index.js

新设计规范下业务组件库

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
var _excluded = ["getJumpUrl", "defaultValue", "platformIconMap", "apps", "showAll", "onChange", "onDropDownChange", "onChangeTabs"];
import React from 'react';
import { useHistory, useLocation, useParams } from 'react-router-dom';
import { Divider } from 'antd';
import { Select, Icon } from '../index';
import DropDownSelect from './dropDownSelect';
import { useUpdateEffect } from 'qt-public-hooks';
import './style';
var defaultPlatformIconMap = {
  android: 'umicon-android_circle',
  iphone: 'umicon-iOS_circle'
};
var AppSelect = function AppSelect(props) {
  var getJumpUrl = props.getJumpUrl,
    defaultValue = props.defaultValue,
    platformIconMap = props.platformIconMap,
    appList = props.apps,
    showAll = props.showAll,
    onChange = props.onChange,
    onDropDownChange = props.onDropDownChange,
    onChangeTabs = props.onChangeTabs,
    res = _objectWithoutPropertiesLoose(props, _excluded);
  var _useHistory = useHistory(),
    push = _useHistory.push;
  var _useParams = useParams(),
    _appId = _useParams.appId;
  var _useLocation = useLocation(),
    pathname = _useLocation.pathname;
  var appId = props.appId || _appId || 'all';
  var iconMap = platformIconMap || defaultPlatformIconMap;

  // onChange
  useUpdateEffect(function () {
    if (props.type !== 'dropDown') {
      var currentApp = appList.find(function (app) {
        return appId === app.appkey;
      }) || 'all';
      onChange && onChange(currentApp);
    }
  }, [appId]);
  var setAll = function setAll() {
    getJumpUrl && push(getJumpUrl(pathname, appId, 'all'));
  };
  if (props.type === 'dropDown') {
    return /*#__PURE__*/React.createElement(DropDownSelect, _extends({
      className: "app-select"
    }, props, {
      value: appId,
      showAll: true,
      onChange: onDropDownChange,
      onChangeTabs: onChangeTabs
    }));
  }
  return /*#__PURE__*/React.createElement(Select, _extends({
    className: "umui-app-select",
    style: {
      marginBottom: 16,
      width: 168
    }
  }, res, {
    value: appId,
    showSearch: true,
    styleType: "round",
    onChange: function onChange(id) {
      return getJumpUrl && push(getJumpUrl(pathname, appId, id));
    },
    dropdownRender: function dropdownRender(menu) {
      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
        onMouseDown: setAll,
        className: "umui-option-all-app"
      }, /*#__PURE__*/React.createElement(Icon, {
        className: "umui-option-all-app-icon",
        type: "umicon-all_app"
      }), "\u5168\u90E8\u5E94\u7528"), /*#__PURE__*/React.createElement(Divider, {
        style: {
          margin: '4px 0'
        }
      }), menu);
    }
  }), showAll && /*#__PURE__*/React.createElement(Select.Option, {
    style: {
      display: 'none'
    },
    value: "all"
  }, /*#__PURE__*/React.createElement(Icon, {
    style: {
      verticalAlign: 1.2
    },
    className: "umui-icon",
    type: "umicon-all_app"
  }), "\u5168\u90E8\u5E94\u7528"), (appList || []).map(function (app) {
    // cxw todo
    return /*#__PURE__*/React.createElement(Select.Option, {
      value: app.appkey,
      key: app.appkey
    }, /*#__PURE__*/React.createElement(Icon, {
      style: {
        verticalAlign: 1.2
      },
      className: "umui-icon",
      type: iconMap[app.platform]
    }), app.name);
  }));
};
AppSelect.displayName = 'AppSelect';
export default AppSelect;