@jannie-shao/components-antd4/es/multiInput/index.js

基于 Antd 4 的组件封装

import "antd/es/select/style";
import _Select from "antd/es/select";
import _extends from "@babel/runtime/helpers/extends";
import "antd/es/message/style";
import _message from "antd/es/message";
import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import BatchInputPopover from "../batch-input-popover";
import { rootPrefix } from "../style/config";
import { filterEmptyString } from "../utils";
import useBlockDefaultEnter from "./hooks/useBlockDefaultEnter";
var MultiInput = function MultiInput(_ref) {
  var _ref$className = _ref.className,
    className = _ref$className === void 0 ? '' : _ref$className,
    value = _ref.value,
    max = _ref.max,
    isLimitShow = _ref.isLimitShow,
    popoverProps = _ref.popoverProps,
    onChange = _ref.onChange,
    placeholder = _ref.placeholder,
    disabled = _ref.disabled;
  var _useBlockDefaultEnter = useBlockDefaultEnter(),
    blockProps = _useBlockDefaultEnter[0];
  var handleChange = useCallback(function (v) {
    if (v.length > max) {
      _message.error("Warning: You can only input up to " + max + " values");
    } else {
      onChange(filterEmptyString(v));
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [max]);
  return /*#__PURE__*/React.createElement("div", {
    className: classnames(rootPrefix + "-input-search", className)
  }, /*#__PURE__*/React.createElement(_Select, _extends({
    getPopupContainer: function getPopupContainer(n) {
      return n.parentNode;
    },
    mode: "tags",
    maxTagCount: isLimitShow ? 'responsive' : false,
    placeholder: placeholder,
    disabled: disabled,
    value: value,
    style: {
      width: '100%'
    },
    onChange: handleChange,
    open: false
  }, blockProps)), /*#__PURE__*/React.createElement(BatchInputPopover, _extends({}, popoverProps, {
    visible: !disabled,
    max: max,
    value: value,
    onConfirm: handleChange
  })));
};
MultiInput.propTypes = {
  value: PropTypes.array,
  max: PropTypes.number,
  isLimitShow: PropTypes.bool,
  popoverProps: PropTypes.object,
  onChange: PropTypes.func,
  placeholder: PropTypes.string,
  disabled: PropTypes.bool
};
MultiInput.defaultProps = {
  value: [],
  max: 20,
  isLimitShow: true,
  popoverProps: {},
  onChange: function onChange() {},
  placeholder: '',
  disabled: false
};
export default MultiInput;