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

基于 Antd 4 的组件封装

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
require("antd/es/select/style");
var _select = _interopRequireDefault(require("antd/es/select"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
require("antd/es/message/style");
var _message2 = _interopRequireDefault(require("antd/es/message"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _batchInputPopover = _interopRequireDefault(require("../batch-input-popover"));
var _config = require("../style/config");
var _utils = require("../utils");
var _useBlockDefaultEnter2 = _interopRequireDefault(require("./hooks/useBlockDefaultEnter"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
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 = (0, _useBlockDefaultEnter2["default"])(),
    blockProps = _useBlockDefaultEnter[0];
  var handleChange = (0, _react.useCallback)(function (v) {
    if (v.length > max) {
      _message2["default"].error("Warning: You can only input up to " + max + " values");
    } else {
      onChange((0, _utils.filterEmptyString)(v));
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [max]);
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _classnames["default"])(_config.rootPrefix + "-input-search", className)
  }, /*#__PURE__*/_react["default"].createElement(_select["default"], (0, _extends2["default"])({
    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["default"].createElement(_batchInputPopover["default"], (0, _extends2["default"])({}, popoverProps, {
    visible: !disabled,
    max: max,
    value: value,
    onConfirm: handleChange
  })));
};
MultiInput.propTypes = {
  value: _propTypes["default"].array,
  max: _propTypes["default"].number,
  isLimitShow: _propTypes["default"].bool,
  popoverProps: _propTypes["default"].object,
  onChange: _propTypes["default"].func,
  placeholder: _propTypes["default"].string,
  disabled: _propTypes["default"].bool
};
MultiInput.defaultProps = {
  value: [],
  max: 20,
  isLimitShow: true,
  popoverProps: {},
  onChange: function onChange() {},
  placeholder: '',
  disabled: false
};
var _default = MultiInput;
exports["default"] = _default;