qt-public-ui/es/Select/select.js

新设计规范下业务组件库

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
var _excluded = ["showSearch", "children", "options", "onChange", "onSelect", "loading", "suffixIcon", "style", "forbidRotate", "className", "styleType", "dropdownMatchSelectWidth"],
  _excluded2 = ["key", "extra", "icon"];
import React from 'react';
import { Select as AntdSelect } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';
import { IconSlim as Icon, Default } from '..';
import Option from './option';
import classnames from 'classnames';
import './style.less';
var DEFAULT_SELECT_PROPS = {
  optionFilterProp: 'children',
  showArrow: true
};
var Select = React.forwardRef(function (props, ref) {
  var showSearch = props.showSearch,
    children = props.children,
    options = props.options,
    _onChange = props.onChange,
    _onSelect = props.onSelect,
    loading = props.loading,
    suffixIcon = props.suffixIcon,
    style = props.style,
    forbidRotate = props.forbidRotate,
    className = props.className,
    _props$styleType = props.styleType,
    styleType = _props$styleType === void 0 ? 'default' : _props$styleType,
    dropdownMatchSelectWidth = props.dropdownMatchSelectWidth,
    antProps = _objectWithoutPropertiesLoose(props, _excluded);
  var getIcon = function getIcon() {
    if (loading) return /*#__PURE__*/React.createElement(LoadingOutlined, null);
    if (suffixIcon) return suffixIcon;
    if (styleType === 'underline') return /*#__PURE__*/React.createElement(Icon, {
      type: "umicon-triangle-down"
    });
    if (styleType === 'button') return /*#__PURE__*/React.createElement(Icon, {
      type: "umicon-filter"
    });
    return /*#__PURE__*/React.createElement(Icon, {
      type: "umicon-arrow-select"
    });
  };
  var getStyle = function getStyle() {
    if (['underline', 'borderless', 'button'].includes(styleType)) {
      return _extends({
        minWidth: 100,
        width: 'auto'
      }, style);
    }
    return style;
  };
  return /*#__PURE__*/React.createElement(AntdSelect, _extends({}, DEFAULT_SELECT_PROPS, {
    style: getStyle(),
    suffixIcon: getIcon(),
    ref: ref,
    onChange: function onChange(value, option) {
      var _option$props;
      var extra = Array.isArray(option) ? option.map(function (opt) {
        var _opt$props;
        return opt === null || opt === void 0 ? void 0 : (_opt$props = opt.props) === null || _opt$props === void 0 ? void 0 : _opt$props.extra;
      }) : option === null || option === void 0 ? void 0 : (_option$props = option.props) === null || _option$props === void 0 ? void 0 : _option$props.extra;
      _onChange && _onChange(value, extra);
    },
    onSelect: function onSelect(value, option) {
      var _option$props2;
      _onSelect && _onSelect(value, option === null || option === void 0 ? void 0 : (_option$props2 = option.props) === null || _option$props2 === void 0 ? void 0 : _option$props2.extra);
    },
    className: classnames('umui-select', className, {
      'umui-select-round': styleType === 'round',
      'umui-select-borderless': styleType === 'borderless',
      'umui-select-underline': styleType === 'underline',
      'umui-select-button': styleType === 'button',
      'umui-forbid-rotate': forbidRotate || styleType === 'button'
    }),
    showSearch: showSearch,
    dropdownMatchSelectWidth: ['underline', 'borderless'].includes(styleType) ? false : dropdownMatchSelectWidth,
    notFoundContent: /*#__PURE__*/React.createElement(Default, {
      type: "nothing"
    })
  }, antProps), Array.isArray(options) ? options.map(function (opt) {
    var key = opt.key,
      extra = opt.extra,
      icon = opt.icon,
      antdOptionsProps = _objectWithoutPropertiesLoose(opt, _excluded2);
    return /*#__PURE__*/React.createElement(Option, _extends({
      key: key || opt.value,
      value: opt.value || key,
      extra: opt.extra
    }, antdOptionsProps), opt.icon && /*#__PURE__*/React.createElement(Icon, {
      type: opt.icon
    }), opt.title || opt.name || opt.text);
  }) : children);
});
export default Select;