@aliretail/react-materials-components/es/CustomSelect/index.js

B 端物料组件库

import _Select from "@alifd/next/es/select";
import _Input from "@alifd/next/es/input";
import _Button from "@alifd/next/es/button";
import _Divider from "@alifd/next/es/divider";
import _Icon from "@alifd/next/es/icon";
import _Message from "@alifd/next/es/message";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import * as React from 'react';
import * as PropTypes from 'prop-types';
import { StatusTag } from "../StatusTag";

var CustomSelect = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(CustomSelect, _React$Component);

  function CustomSelect() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.state = {
      buttonShow: true,
      // 新建按钮是否展示
      inputValue: '',
      // 输入框数据
      selectList: [] // 输入框数据

    };

    _this.handleSearch = function (value) {
      _this.props.onSearch(value);
    };

    _this.handleChange = function (value) {
      var list = _this.filterParams(value);

      _this.props.onChange(value, list);
    };

    _this.filterParams = function (value) {
      var list = [];
      var selectList = _this.state.selectList;
      var dataSource = _this.props.dataSource;
      var concatList = dataSource.concat(selectList);

      if (typeof value === 'string' || typeof value === 'number') {
        list = concatList.filter(function (t) {
          return t.value === value;
        });
      } else {
        list = concatList.filter(function (t) {
          return value.includes(t.value);
        });
      }

      return list;
    };

    _this.addClick = function () {
      _this.setState({
        buttonShow: false,
        inputValue: ''
      });
    };

    _this.createClick = function () {
      var maxAddNum = _this.props.maxAddNum;
      var selectList = _this.state.selectList;

      if (maxAddNum) {
        if (selectList.length + 1 <= Number(maxAddNum)) {
          _this.loadMore();
        } else {
          _Message.error('超出自定义最大值，不可再次创建');
        }
      } else {
        _this.loadMore();
      }
    };

    _this.cancelClick = function () {
      _this.setState({
        buttonShow: true
      });
    };

    _this.inputClick = function () {
      document.getElementById('createInput').focus();
    };

    _this.inputChange = function (value) {
      var validator = _this.props.validator;

      if (validator(value)) {
        _this.setState({
          inputValue: value
        });
      }
    };

    _this.generateData = function (base) {
      var arr = [];
      var _this$state = _this.state,
          inputValue = _this$state.inputValue,
          selectList = _this$state.selectList;
      var _this$props = _this.props,
          createValidator = _this$props.createValidator,
          dataSource = _this$props.dataSource;

      if (createValidator(inputValue, dataSource.concat(selectList))) {
        var obj = {
          label: inputValue,
          value: "-" + base,
          isCustom: true
        };
        arr.push(obj);
      }

      return arr;
    };

    _this.loadMore = function () {
      var selectList = _this.state.selectList;
      var inputValue = _this.state.inputValue;
      var _this$props2 = _this.props,
          createValidator = _this$props2.createValidator,
          dataSource = _this$props2.dataSource;
      var buttonShow = false;

      if (createValidator(inputValue, dataSource.concat(selectList))) {
        buttonShow = true;
      }

      _this.setState({
        selectList: [].concat(selectList, _this.generateData(selectList.length)),
        buttonShow: buttonShow
      });
    };

    _this.deleBtn = function (item, e) {
      var selectList = _this.state.selectList;
      var index = selectList.findIndex(function (t) {
        return t.value === item.value;
      });
      selectList.splice(index, 1); // 删除的时候，会触发onChange事件，故需要阻止冒泡

      if (e && e.stopPropagation) {
        e.stopPropagation();
      } else {
        window.event.cancelBubble = true;
      }

      _this.setState({
        selectList: selectList
      });
    };

    _this.itemRender = function (item) {
      var selectList = _this.state.selectList;
      var selectValueList = [];
      selectList && selectList.length > 0 && selectList.forEach(function (t) {
        selectValueList.push(t.value);
      });
      return /*#__PURE__*/React.createElement("div", null, !selectValueList.includes(item.value) && !item.isCustom && /*#__PURE__*/React.createElement("div", null, item.label), (selectValueList.includes(item.value) || item.isCustom) && /*#__PURE__*/React.createElement("div", {
        className: "aliretail-addValueStyle"
      }, /*#__PURE__*/React.createElement("div", {
        className: "aliretail-addValueContent"
      }, item.label, /*#__PURE__*/React.createElement("div", {
        className: "aliretail-addValueTag"
      }, /*#__PURE__*/React.createElement(StatusTag, {
        type: "cancel",
        text: "\u81EA\u5B9A\u4E49"
      }))), /*#__PURE__*/React.createElement(_Icon, {
        type: "delete-filling",
        className: "aliretail-addValueIcon",
        onClick: function onClick(e) {
          return _this.deleBtn(item, e);
        }
      })));
    };

    _this.getLabelParams = function () {
      var dataSource = _this.props.dataSource;
      var valueList = Array.isArray(_this.props.value) ? _this.props.value : [_this.props.value];
      var list = [];

      if (dataSource && dataSource.length) {
        var filterList = dataSource.filter(function (t) {
          return valueList.includes(t.value);
        });
        filterList.forEach(function (t) {
          list.push(t.label);
        });
      }

      return list;
    };

    return _this;
  }

  var _proto = CustomSelect.prototype;

  _proto.render = function render() {
    var _this$props3 = this.props,
        dataSource = _this$props3.dataSource,
        sizeType = _this$props3.sizeType,
        placeholder = _this$props3.placeholder,
        filterLocal = _this$props3.filterLocal,
        selectType = _this$props3.selectType,
        buttonText = _this$props3.buttonText,
        inputPlaceholder = _this$props3.inputPlaceholder,
        readOnly = _this$props3.readOnly,
        disabled = _this$props3.disabled,
        value = _this$props3.value,
        followTrigger = _this$props3.followTrigger;
    var _this$state2 = this.state,
        buttonShow = _this$state2.buttonShow,
        selectList = _this$state2.selectList,
        inputValue = _this$state2.inputValue;
    var typeMap = {
      single: {
        mode: 'single',
        addInputShow: false
      },
      multiple: {
        mode: 'multiple',
        addInputShow: false
      },
      singleInput: {
        mode: 'single',
        addInputShow: true
      },
      multipleInput: {
        mode: 'multiple',
        addInputShow: true
      },
      input: {
        mode: 'input',
        addInputShow: false
      }
    }; // addInputShow是否展示新建

    var _typeMap$selectType = typeMap[selectType],
        _typeMap$selectType$m = _typeMap$selectType.mode,
        mode = _typeMap$selectType$m === void 0 ? null : _typeMap$selectType$m,
        _typeMap$selectType$a = _typeMap$selectType.addInputShow,
        addInputShow = _typeMap$selectType$a === void 0 ? false : _typeMap$selectType$a;
    var TypeToWidth = {
      medium: '326px',
      large: '652px'
    };
    var labelList = this.getLabelParams() || [];
    var menuProps = {
      footer: addInputShow && /*#__PURE__*/React.createElement("div", {
        style: {
          padding: '0 4px'
        }
      }, /*#__PURE__*/React.createElement(_Divider, {
        style: {
          marginBottom: 0,
          marginTop: 4
        }
      }), buttonShow && /*#__PURE__*/React.createElement(_Button, {
        text: true,
        type: "primary",
        onClick: this.addClick
      }, /*#__PURE__*/React.createElement(_Icon, {
        type: "add"
      }), buttonText), !buttonShow && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
        onClick: this.inputClick,
        className: "aliretail-inputStyle"
      }, /*#__PURE__*/React.createElement(_Input, {
        id: "createInput",
        onChange: this.inputChange,
        value: inputValue,
        placeholder: inputPlaceholder
      })), /*#__PURE__*/React.createElement(_Button, {
        text: true,
        type: "primary",
        onClick: this.createClick,
        className: "aliretail-buttonStyle"
      }, "\u521B\u5EFA"), /*#__PURE__*/React.createElement(_Button, {
        text: true,
        type: "primary",
        onClick: this.cancelClick,
        className: "aliretail-buttonStyle"
      }, "\u53D6\u6D88")))
    };
    return /*#__PURE__*/React.createElement("div", null, !readOnly && mode !== 'input' && /*#__PURE__*/React.createElement(_Select, {
      mode: mode,
      showSearch: true,
      value: value,
      placeholder: placeholder,
      filterLocal: filterLocal,
      dataSource: dataSource.concat(selectList),
      itemRender: this.itemRender,
      onSearch: this.handleSearch,
      onChange: this.handleChange,
      disabled: disabled,
      style: {
        width: TypeToWidth[sizeType] || TypeToWidth.medium
      },
      menuProps: menuProps,
      readOnly: readOnly,
      followTrigger: followTrigger,
      className: "aliretail-searchSelect"
    }), readOnly && /*#__PURE__*/React.createElement("div", {
      className: "aliretail-labelReadOnly"
    }, labelList.join('，')), mode === 'input' && /*#__PURE__*/React.createElement(_Input, {
      style: {
        width: TypeToWidth[sizeType] || TypeToWidth.medium
      }
    }));
  };

  return CustomSelect;
}(React.Component);

CustomSelect.propTypes = {
  dataSource: PropTypes.array,
  onSearch: PropTypes.func,
  placeholder: PropTypes.string,
  filterLocal: PropTypes.bool,
  onChange: PropTypes.func,
  sizeType: PropTypes.string,
  selectType: PropTypes.string,
  value: PropTypes.any,
  buttonText: PropTypes.string,
  inputPlaceholder: PropTypes.string,
  readOnly: PropTypes.bool,
  disabled: PropTypes.bool,
  maxAddNum: PropTypes.number,
  createValidator: PropTypes.func,
  followTrigger: PropTypes.bool
};
CustomSelect.defaultProps = {
  onSearch: function onSearch() {},
  sizeType: 'medium',
  placeholder: '',
  filterLocal: false,
  onChange: function onChange() {},
  dataSource: [],
  selectType: 'singleInput',
  value: [],
  buttonText: '自定义',
  inputPlaceholder: '自定义内容仅当前发布有效',
  readOnly: false,
  disabled: false,
  maxAddNum: null,
  validator: function validator() {
    return true;
  },
  createValidator: function createValidator() {
    return true;
  },
  followTrigger: true // 是否跟随滚动

};
export default CustomSelect;