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

基于 Antd 4 的组件封装

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
require("antd/es/popover/style");
var _popover = _interopRequireDefault(require("antd/es/popover"));
require("antd/es/button/style");
var _button = _interopRequireDefault(require("antd/es/button"));
require("antd/es/message/style");
var _message2 = _interopRequireDefault(require("antd/es/message"));
require("antd/es/input/style");
var _input = _interopRequireDefault(require("antd/es/input"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _uniq = _interopRequireDefault(require("lodash/uniq"));
var _iconFont = _interopRequireDefault(require("../icon-font"));
var _config = require("../style/config");
var _utils = require("../utils");
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 TextArea = _input["default"].TextArea;
var prefix = _config.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 = (0, _react.useState)(false),
    popVisible = _useState[0],
    setPopVisible = _useState[1];
  var _useState2 = (0, _react.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 = (0, _utils.filterEmptyString)(batchValue.split('\n'));
    var uniqed = (0, _uniq["default"])(splited);
    if (uniqed.length > max) {
      _message2["default"].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["default"].createElement("div", {
    className: (0, _classnames["default"])(prefix, className),
    style: !visible ? {
      display: 'none'
    } : {}
  }, /*#__PURE__*/_react["default"].createElement(_popover["default"], {
    getPopupContainer: function getPopupContainer(n) {
      return n.parentNode;
    },
    content: /*#__PURE__*/_react["default"].createElement("div", {
      className: prefix + "-popover-card"
    }, /*#__PURE__*/_react["default"].createElement(TextArea, {
      placeholder: popoverPlaceholder,
      onChange: handleBatchInputChange,
      autoSize: {
        minRows: 12,
        maxRows: 12
      },
      value: batchValue
    }), /*#__PURE__*/_react["default"].createElement(_button["default"], {
      onClick: handleConfirmBatchInput,
      type: "primary"
    }, "OK"), /*#__PURE__*/_react["default"].createElement(_button["default"], {
      onClick: handleCancelBatchInput
    }, "Cancel")),
    title: popoverTitle,
    placement: "topRight",
    trigger: "click",
    open: popVisible,
    onOpenChange: handlePopVisibleChange
  }, /*#__PURE__*/_react["default"].createElement(_iconFont["default"].FileAdd, {
    className: prefix + "-icon"
  })));
}
BatchInputPopover.propTypes = {
  visible: _propTypes["default"].bool,
  max: _propTypes["default"].number,
  popoverTitle: _propTypes["default"].string,
  popoverPlaceholder: _propTypes["default"].string,
  value: _propTypes["default"].array.isRequired,
  onConfirm: _propTypes["default"].func,
  currentOptions: _propTypes["default"].array
};
BatchInputPopover.defaultProps = {
  visible: false,
  max: 20,
  popoverTitle: 'Batch Input',
  popoverPlaceholder: 'one each line, up to 20',
  onConfirm: function onConfirm() {},
  currentOptions: []
};
var _default = BatchInputPopover;
exports["default"] = _default;