movm/es/FnTag/index.js

一个基于antdsegin的ui组件

import "antd/es/space/style";
import _Space from "antd/es/space";
import "antd/es/input/style";
import _Input from "antd/es/input";
import "antd/es/popconfirm/style";
import _Popconfirm from "antd/es/popconfirm";

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

import React, { useState, useEffect } from 'react';
import { CloseOutlined, PlusOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import "./index.css";

var FnTag = function FnTag(_ref) {
  var onTap = _ref.onTap,
      iw = _ref.iw,
      data = _ref.data,
      atChange = _ref.atChange,
      title = _ref.title,
      isPop = _ref.isPop;

  // console.log('=----', atchange)
  var _useState = useState([]),
      _useState2 = _slicedToArray(_useState, 2),
      state = _useState2[0],
      setState = _useState2[1];

  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      isShowIpt = _useState4[0],
      setIsShowIpt = _useState4[1]; //是否显示输入框


  var _useState5 = useState([]),
      _useState6 = _slicedToArray(_useState5, 2),
      selected = _useState6[0],
      setSelected = _useState6[1]; //选中的标签


  useEffect(function () {
    data && setState(data); // console.log('类型', typeof atChange)
  }, []);
  useEffect(function () {
    // return atChange
    // atChange()
    atChange && atChange(state); // console.log('值', atChange)
  }, [state]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Space, {
    size: [16, 10],
    wrap: true
  }, state.map(function (item, index) {
    return /*#__PURE__*/React.createElement("span", {
      key: index,
      className: "tagItem ".concat(onTap && JSON.stringify(item) === JSON.stringify(selected.find(function (i) {
        return i === item;
      })) && 'tagItemActive'),
      onClick: function onClick() {
        var arr = selected;
        var inx = arr.findIndex(function (i) {
          return i === item;
        });
        inx < 0 ? arr.push(item) : arr.splice(inx, 1);
        onTap && setSelected(_toConsumableArray(arr));
      }
    }, item, /*#__PURE__*/React.createElement("span", {
      className: "tagTxt",
      onClick: function onClick(e) {
        e.stopPropagation();
      }
    }, isPop ? /*#__PURE__*/React.createElement(_Popconfirm, {
      style: {
        color: 'red'
      },
      title: title,
      icon: /*#__PURE__*/React.createElement(QuestionCircleOutlined, {
        style: {
          color: 'red'
        }
      }),
      okText: '确认删除',
      cancelText: '取消',
      okButtonProps: {
        type: 'danger'
      } // cancelButtonProps={{ 'type': 'dashed' }}
      ,
      onConfirm: function onConfirm() {
        setState(state.filter(function (i) {
          return i !== item;
        }));
      }
    }, /*#__PURE__*/React.createElement(CloseOutlined, {
      style: {
        fontSize: '12px',
        color: '#b0b0b0'
      }
    })) : /*#__PURE__*/React.createElement(CloseOutlined, {
      style: {
        fontSize: '12px',
        color: '#b0b0b0'
      },
      onClick: function onClick() {
        setState(state.filter(function (i) {
          return i !== item;
        }));
      }
    })));
  }), !isShowIpt && /*#__PURE__*/React.createElement("span", {
    className: "addTag",
    onClick: function onClick() {
      setIsShowIpt(true);
    }
  }, /*#__PURE__*/React.createElement(PlusOutlined, null), " \u6DFB\u52A0\u6807\u7B7E"), isShowIpt && /*#__PURE__*/React.createElement(_Input, {
    placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9",
    style: {
      width: "".concat(iw ? iw : '130', "px")
    },
    onPressEnter: function onPressEnter(e) {
      e.target.value && setState([].concat(_toConsumableArray(state), [e.target.value]));
      setIsShowIpt(false);
    },
    onBlur: function onBlur(e) {
      e.target.value && setState([].concat(_toConsumableArray(state), [e.target.value]));
      setIsShowIpt(false);
    },
    ref: function ref(input) {
      return input && input.focus();
    }
  })));
};

FnTag.defaultProps = {
  title: '确定要删除吗 ?',
  isPop: true,
  onTap: false
};
export default FnTag;