"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

require("maycur-antd/lib/tag/style/css");

var _tag = _interopRequireDefault(require("maycur-antd/lib/tag"));

require("maycur-antd/lib/icon/style/css");

var _icon = _interopRequireDefault(require("maycur-antd/lib/icon"));

var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

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; }

/*
 * @Author: Jiangang LU
 * @Date: 2020-12-07 16:27:22
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-03-12 13:37:33
 * @Description: 自定义标签下拉框
 * 例子：
 * <CustomTagSelect
 *      value={}
 *      options={}
 *      placeholder=""
 *      onChange={}
 * />
 */
function CustomTagSelect(props) {
  var options = props.options,
      _props$placeholder = props.placeholder,
      placeholder = _props$placeholder === void 0 ? '' : _props$placeholder,
      _props$value = props.value,
      value = _props$value === void 0 ? [] : _props$value,
      onChange = props.onChange;

  var _useState = (0, _react.useState)(false),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      isOpen = _useState2[0],
      setIsOpen = _useState2[1];

  var _useState3 = (0, _react.useState)(Array.isArray(value) && value || []),
      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
      tags = _useState4[0],
      setTags = _useState4[1];

  var inputRef = (0, _react.useRef)();
  var handleClick = (0, _react.useCallback)(function (e) {
    e.stopPropagation();
    inputRef.current.focus();
    setIsOpen(true);
  }, [setIsOpen]);
  var close = (0, _react.useCallback)(function () {
    setIsOpen(false);
  }, [setIsOpen]);
  var addItem = (0, _react.useCallback)(function (tag) {
    var result = (0, _toConsumableArray2.default)(tags);
    result.push(tag.value);
    setTags(result);
    onChange(result);
  }, [tags, setTags, onChange]);
  var removeItem = (0, _react.useCallback)(function (tag) {
    var result = (0, _toConsumableArray2.default)(tags);
    result.splice(tags.findIndex(function (item) {
      return item === tag.value;
    }), 1);
    setTags(result);
    onChange(result);
  }, [tags, setTags, onChange]);
  var handleOptionClick = (0, _react.useCallback)(function (e, option) {
    e.stopPropagation();
    tags.includes(option.value) ? removeItem(option) : addItem(option);
  }, [tags, removeItem, addItem]);

  var renderTopControlNode = function renderTopControlNode() {
    var result = !!tags && tags.map(function (tag) {
      var item = options.find(function (option) {
        return option.value === tag;
      });
      return item ? /*#__PURE__*/_react.default.createElement("li", {
        key: item.value,
        className: "ant-select-selection__choice",
        style: {
          color: item.color,
          backgroundColor: 'initial',
          borderColor: item.color
        },
        title: item.label
      }, /*#__PURE__*/_react.default.createElement("div", {
        className: "ant-select-selection__choice__content"
      }, item.label), /*#__PURE__*/_react.default.createElement("span", {
        className: "ant-select-selection__choice__remove"
      }, /*#__PURE__*/_react.default.createElement(_icon.default, {
        className: "ant-select-remove-icon",
        onClick: function onClick() {
          removeItem({
            value: item.value
          });
        },
        type: "close"
      }))) : null;
    });
    return result;
  };

  var handleInputChange = function handleInputChange() {};

  (0, _react.useEffect)(function () {
    window.addEventListener('click', close);
    return function () {
      window.removeEventListener('click', close);
    };
  }, [close]);
  (0, _react.useEffect)(function () {
    if (Array.isArray(value) && value.length) {
      setTags(value);
    }

    ;
  }, [setTags, value]);
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "ant-select ant-select-enabled"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "ant-select-selection ant-select-selection--multiple"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "ant-select-selection__rendered",
    onClick: handleClick
  }, !!tags && !tags.length && /*#__PURE__*/_react.default.createElement("div", {
    className: "ant-select-selection__placeholder"
  }, placeholder), /*#__PURE__*/_react.default.createElement("ul", {
    className: "ant-select-search ant-select-search--inline"
  }, renderTopControlNode(), /*#__PURE__*/_react.default.createElement("li", {
    className: "ant-select-search ant-select-search--inline"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "ant-select-search__field__wrap"
  }, /*#__PURE__*/_react.default.createElement("input", {
    ref: inputRef,
    className: "ant-select-search__field",
    value: "",
    onChange: handleInputChange
  }), /*#__PURE__*/_react.default.createElement("span", {
    className: "ant-select-search__field__mirror"
  }, "\xA0"))))))), /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)({
      'ant-select-dropdown ant-select-dropdown--multiple ant-select-dropdown-placement-bottomLeft': true,
      'ant-select-dropdown-hidden': !isOpen
    }),
    style: {
      top: '32px',
      left: 0,
      width: '100%'
    }
  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("ul", {
    role: "listbox",
    className: "ant-select-dropdown-menu  ant-select-dropdown-menu-root ant-select-dropdown-menu-vertical",
    tabIndex: "0"
  }, options && options.map(function (option) {
    return /*#__PURE__*/_react.default.createElement("li", {
      key: option.value,
      className: (0, _classnames.default)({
        'ant-select-dropdown-menu-item': true,
        'ant-select-dropdown-menu-item-selected ': tags.includes(option.value)
      }),
      title: option.label,
      onClick: function onClick(e) {
        handleOptionClick(e, option);
      }
    }, /*#__PURE__*/_react.default.createElement("i", {
      className: "primary-radius",
      style: {
        backgroundColor: option.color || 'transparent'
      }
    }), option.label, option.default && /*#__PURE__*/_react.default.createElement(_tag.default, {
      style: {
        marginLeft: '10px'
      },
      type: "mk",
      ghost: true
    }, "\u7CFB\u7EDF\u9884\u8BBE"), /*#__PURE__*/_react.default.createElement(_icon.default, {
      className: "ant-select-selected-icon",
      type: "check"
    }));
  })))));
}

var _default = /*#__PURE__*/(0, _react.memo)(CustomTagSelect);

exports.default = _default;