@jannie-shao/components-antd4/es/batch-input-popover/index.js

基于 Antd 4 的组件封装

import "antd/es/popover/style";
import _Popover from "antd/es/popover";
import "antd/es/button/style";
import _Button from "antd/es/button";
import "antd/es/message/style";
import _message from "antd/es/message";
import "antd/es/input/style";
import _Input from "antd/es/input";
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import uniq from 'lodash/uniq';
import IconFont from "../icon-font";
import { rootPrefix } from "../style/config";
import { filterEmptyString } from "../utils";
var TextArea = _Input.TextArea;
var prefix = rootPrefix + "-batch-input";
function BatchInputPopover(_ref) {
  var _ref$className = _ref.className,
    className = _ref$className === void 0 ? '' : _ref$className,
    visible = _ref.visible,
    max = _ref.max,
    popoverTitle = _ref.popoverTitle,
    popoverPlaceholder = _ref.popoverPlaceholder,
    value = _ref.value,
    onConfirm = _ref.onConfirm,
    currentOptions = _ref.currentOptions;
  var _useState = useState(false),
    popVisible = _useState[0],
    setPopVisible = _useState[1];
  var _useState2 = useState(''),
    batchValue = _useState2[0],
    setBatchValue = _useState2[1];
  var fillBatchInput = function fillBatchInput(v) {
    var labels;
    if (currentOptions.length > 0) {
      labels = v.map(function (i) {
        return currentOptions.find(function (o) {
          return o.value === i;
        }).label;
      });
    } else {
      labels = v;
    }
    setBatchValue(labels.join('\n'));
  };
  var handleConfirmBatchInput = function handleConfirmBatchInput() {
    var splited = filterEmptyString(batchValue.split('\n'));
    var uniqed = uniq(splited);
    if (uniqed.length > max) {
      _message.error("Warning: You can only input up to " + max + " values");
    } else {
      setPopVisible(false);
      onConfirm(uniqed);
    }
  };
  var handleCancelBatchInput = function handleCancelBatchInput() {
    setPopVisible(false);
  };
  var handleBatchInputChange = function handleBatchInputChange(e) {
    return setBatchValue(e.target.value);
  };
  var handlePopVisibleChange = function handlePopVisibleChange(v) {
    setPopVisible(v);
    if (v) {
      fillBatchInput(value);
    }
  };
  return /*#__PURE__*/React.createElement("div", {
    className: classnames(prefix, className),
    style: !visible ? {
      display: 'none'
    } : {}
  }, /*#__PURE__*/React.createElement(_Popover, {
    getPopupContainer: function getPopupContainer(n) {
      return n.parentNode;
    },
    content: /*#__PURE__*/React.createElement("div", {
      className: prefix + "-popover-card"
    }, /*#__PURE__*/React.createElement(TextArea, {
      placeholder: popoverPlaceholder,
      onChange: handleBatchInputChange,
      autoSize: {
        minRows: 12,
        maxRows: 12
      },
      value: batchValue
    }), /*#__PURE__*/React.createElement(_Button, {
      onClick: handleConfirmBatchInput,
      type: "primary"
    }, "OK"), /*#__PURE__*/React.createElement(_Button, {
      onClick: handleCancelBatchInput
    }, "Cancel")),
    title: popoverTitle,
    placement: "topRight",
    trigger: "click",
    open: popVisible,
    onOpenChange: handlePopVisibleChange
  }, /*#__PURE__*/React.createElement(IconFont.FileAdd, {
    className: prefix + "-icon"
  })));
}
BatchInputPopover.propTypes = {
  visible: PropTypes.bool,
  max: PropTypes.number,
  popoverTitle: PropTypes.string,
  popoverPlaceholder: PropTypes.string,
  value: PropTypes.array.isRequired,
  onConfirm: PropTypes.func,
  currentOptions: PropTypes.array
};
BatchInputPopover.defaultProps = {
  visible: false,
  max: 20,
  popoverTitle: 'Batch Input',
  popoverPlaceholder: 'one each line, up to 20',
  onConfirm: function onConfirm() {},
  currentOptions: []
};
export default BatchInputPopover;