@para-ui/core 4.0.0-rc.3 → 4.0.0-rc.5

package/Tag/index.js

@@ -1,19 +1,14 @@
-import { _ as _defineProperty } from '../_verture/defineProperty-1d116156.js';
-import { _ as _slicedToArray } from '../_verture/slicedToArray-a8206399.js';
 import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
 import CloseIcon from '@para-ui/icons/Close';
 import EditIcon from '@para-ui/icons/EditOutline';
 import clsx from 'clsx';
-import { _ as _toConsumableArray } from '../_verture/toConsumableArray-8f4c9589.js';
-import { _ as _typeof } from '../_verture/typeof-adeedc13.js';
-import { $ as $prefixCls } from '../_verture/constant-0d9802f7.js';
+import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
 import AutoTips from '../AutoTips/index.js';
 import { t as tinycolor } from '../_verture/tinycolor-ece3542d.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import Plus from '@para-ui/icons/Plus';
-import '../_verture/unsupportedIterableToArray-cb478f24.js';
 import '../Tooltip/index.js';
 import 'rc-tooltip';
 import 'rc-tooltip/lib/placements';
@@ -24,121 +19,97 @@ var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/1/12 上
 styleInject(css_248z);
 
 //tag group
-var TagGroup = function TagGroup(props) {
-  var className = props.className,
-    _props$size = props.size,
-    size = _props$size === void 0 ? 'large' : _props$size,
-    style = props.style,
-    defaultInputValue = props.defaultInputValue,
-    _props$increased = props.increased,
-    increased = _props$increased === void 0 ? false : _props$increased,
-    increasedTag = props.increasedTag,
-    inputClassName = props.inputClassName,
-    inputWidth = props.inputWidth,
-    onChange = props.onChange;
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    inData = _useState2[0],
-    setInData = _useState2[1]; //数据源
-  var _useState3 = useState(defaultInputValue !== null && defaultInputValue !== void 0 ? defaultInputValue : ''),
-    _useState4 = _slicedToArray(_useState3, 2),
-    inputValue = _useState4[0],
-    setInputValue = _useState4[1]; //input value
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    inputVisible = _useState6[0],
-    setInputVisible = _useState6[1]; //input visible
-  var inputRef = useRef(); //input ref
-  var _useState7 = useState(),
-    _useState8 = _slicedToArray(_useState7, 2),
-    increasedInputWidth = _useState8[0],
-    setIncreasedInputWidth = _useState8[1]; //添加标签的最小宽
-  useEffect(function () {
+const TagGroup = props => {
+  const {
+    className,
+    size = 'large',
+    style,
+    defaultInputValue,
+    increased = false,
+    increasedTag,
+    inputClassName,
+    inputWidth,
+    onChange
+  } = props;
+  const [inData, setInData] = useState([]); //数据源
+  const [inputValue, setInputValue] = useState(defaultInputValue !== null && defaultInputValue !== void 0 ? defaultInputValue : ''); //input value
+  const [inputVisible, setInputVisible] = useState(false); //input visible
+  const inputRef = useRef(); //input ref
+  const [increasedInputWidth, setIncreasedInputWidth] = useState(); //添加标签的最小宽
+  useEffect(() => {
     if (props.data) {
-      var tArr = props.data;
+      let tArr = props.data;
       //Item[]
-      var unObjType = tArr.some(function (v) {
-        return ['string', 'number'].includes(_typeof(v));
-      });
+      const unObjType = tArr.some(v => ['string', 'number'].includes(typeof v));
       if (unObjType) {
-        tArr = tArr.map(function (_) {
-          return {
-            value: _,
-            label: _
-          };
-        });
+        tArr = tArr.map(_ => ({
+          value: _,
+          label: _
+        }));
       }
-      setInData(_toConsumableArray(tArr));
+      setInData([...tArr]);
     }
   }, [props.data]);
   //tag value
-  var getTagGroupVal = function getTagGroupVal(data) {
-    return data.map(function (_) {
-      return _.value;
-    });
+  const getTagGroupVal = data => {
+    return data.map(_ => _.value);
   };
   //show input
-  var showInput = function showInput() {
+  const showInput = () => {
     setInputVisible(true);
-    setTimeout(function () {
+    setTimeout(() => {
       var _a;
       (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     });
   };
-  var handleTagEdit = function handleTagEdit(value, idx) {
+  const handleTagEdit = (value, idx) => {
     inData[idx].value = value;
-    setInData(_toConsumableArray(inData));
+    setInData([...inData]);
     onChange === null || onChange === void 0 ? void 0 : onChange(inData, getTagGroupVal(inData));
   };
   //input change
-  var handleInputChange = function handleInputChange(e) {
+  const handleInputChange = e => {
     setInputValue(e.target.value);
   };
   //input confirm
-  var handleInputConfirm = function handleInputConfirm() {
-    var val = inputValue.trim();
+  const handleInputConfirm = () => {
+    const val = inputValue.trim();
     if (val !== '') {
       inData.push({
         value: val,
         label: val,
         closable: true
       });
-      setInData(_toConsumableArray(inData));
+      setInData([...inData]);
       onChange === null || onChange === void 0 ? void 0 : onChange(inData, getTagGroupVal(inData));
     }
     setInputValue(defaultInputValue !== null && defaultInputValue !== void 0 ? defaultInputValue : '');
     setInputVisible(false);
   };
   //input enter
-  var handleInputEnter = function handleInputEnter(e) {
+  const handleInputEnter = e => {
     if (e.keyCode === 13 || e.which === 13) {
       handleInputConfirm();
     }
   };
   //handle close
-  var handleClose = function handleClose(item) {
-    return function (e) {
-      var idx = inData.findIndex(function (_) {
-        return _.value === item.value;
-      });
-      if (idx > -1) {
-        inData.splice(idx, 1);
-        setInData(_toConsumableArray(inData));
-      }
-      if (item.onClose) item.onClose(e);
-      onChange === null || onChange === void 0 ? void 0 : onChange(inData, getTagGroupVal(inData));
-    };
+  const handleClose = item => e => {
+    const idx = inData.findIndex(_ => _.value === item.value);
+    if (idx > -1) {
+      inData.splice(idx, 1);
+      setInData([...inData]);
+    }
+    if (item.onClose) item.onClose(e);
+    onChange === null || onChange === void 0 ? void 0 : onChange(inData, getTagGroupVal(inData));
   };
   //渲染Tag组
-  var renderTagGroup = function renderTagGroup() {
+  const renderTagGroup = () => {
     if (!(inData === null || inData === void 0 ? void 0 : inData.length)) return null;
-    return inData.map(function (item, idx) {
+    return inData.map((item, idx) => {
       return jsx(Tag, Object.assign({}, item, {
         size: size,
         visible: true,
-        tagChange: function tagChange(value) {
-          return handleTagEdit(value, idx);
-        },
+        tagChange: value => handleTagEdit(value, idx),
         onClose: handleClose(item)
       }, {
         children: item.label
@@ -146,10 +117,10 @@ var TagGroup = function TagGroup(props) {
     });
   };
   //动态增加tag
-  var renderNewInput = function renderNewInput() {
+  const renderNewInput = () => {
     var _a;
     if (inputVisible) {
-      var inputCls = clsx('tag-group-input', {
+      const inputCls = clsx('tag-group-input', {
         'tag-group-input-large': size === 'large'
       }, inputClassName);
       return jsx("input", {
@@ -166,19 +137,17 @@ var TagGroup = function TagGroup(props) {
         onKeyDown: handleInputEnter
       });
     }
-    var icon = jsx(Plus, {});
-    var text = 'New Tag';
+    let icon = jsx(Plus, {});
+    let text = 'New Tag';
     if (increasedTag) {
       icon = increasedTag.icon || jsx(Plus, {});
       text = (_a = increasedTag.text) !== null && _a !== void 0 ? _a : 'New Tag';
     }
-    var newCls = clsx('tag-group-new', {
+    const newCls = clsx('tag-group-new', {
       'tag-group-new-icon': !text
     }, 'tag-group-add-btn');
     return jsx(Tag, Object.assign({
-      getWidth: function getWidth(width) {
-        return setIncreasedInputWidth(width);
-      },
+      getWidth: width => setIncreasedInputWidth(width),
       className: newCls,
       size: size,
       icon: icon,
@@ -196,104 +165,88 @@ var TagGroup = function TagGroup(props) {
 };
 
 //预设颜色列表
-var PresetColors = ['blue', 'green', 'yellow', 'red'];
+const PresetColors = ['blue', 'green', 'yellow', 'red'];
 //tag
-var InternalTag = function InternalTag(props) {
-  var _clsx;
-  var _props$type = props.type,
-    type = _props$type === void 0 ? 'normal' : _props$type,
-    className = props.className,
-    children = props.children,
-    icon = props.icon,
-    color = props.color,
-    onClose = props.onClose,
-    onEdit = props.onEdit,
-    getWidth = props.getWidth,
-    tagChange = props.tagChange,
-    editInputClassName = props.editInputClassName,
-    closeIcon = props.closeIcon,
-    _props$closable = props.closable,
-    closable = _props$closable === void 0 ? false : _props$closable,
-    _props$editable = props.editable,
-    editable = _props$editable === void 0 ? false : _props$editable,
-    _props$size = props.size,
-    size = _props$size === void 0 ? 'larage' : _props$size,
-    _props$maxWidth = props.maxWidth,
-    maxWidth = _props$maxWidth === void 0 ? 300 : _props$maxWidth,
-    style = props.style,
-    visibleTag = props.visible,
-    editInputWidth = props.editInputWidth,
-    tipMaxWidth = props.tipMaxWidth,
+const InternalTag = props => {
+  const {
+      type = 'normal',
+      className,
+      children,
+      icon,
+      color,
+      onClose,
+      onEdit,
+      getWidth,
+      tagChange,
+      editInputClassName,
+      closeIcon,
+      closable = false,
+      editable = false,
+      size = 'larage',
+      maxWidth,
+      style,
+      visible: visibleTag,
+      editInputWidth,
+      tipMaxWidth
+    } = props,
     restProps = __rest(props, ["type", "className", "children", "icon", "color", "onClose", "onEdit", "getWidth", "tagChange", "editInputClassName", "closeIcon", "closable", "editable", "size", "maxWidth", "style", "visible", "editInputWidth", "tipMaxWidth"]);
-  var _useState = useState(true),
-    _useState2 = _slicedToArray(_useState, 2),
-    visible = _useState2[0],
-    setVisible = _useState2[1]; //显示tag
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    inputVisible = _useState4[0],
-    setInputVisible = _useState4[1]; //显示输入框
-  var _useState5 = useState(''),
-    _useState6 = _slicedToArray(_useState5, 2),
-    inputValue = _useState6[0],
-    setInputValue = _useState6[1]; // 编辑输入框的值
-  var _useState7 = useState(''),
-    _useState8 = _slicedToArray(_useState7, 2),
-    inputWidth = _useState8[0],
-    setInputWidth = _useState8[1]; // 编辑输入框的值
-  var _useState9 = useState(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    closeIconEnter = _useState10[0],
-    setCloseIconEnter = _useState10[1]; // 鼠标是否进入closeIcon
-  var _useState11 = useState(false),
-    _useState12 = _slicedToArray(_useState11, 2),
-    editIconEnter = _useState12[0],
-    setEditIconEnter = _useState12[1]; // 鼠标是否进入closeIcon
-  var inputRef = useRef(); //input ref
-  var tagRef = useRef(); //tagRef ref
-  useEffect(function () {
+  const [visible, setVisible] = useState(true); //显示tag
+  const [inputVisible, setInputVisible] = useState(false); //显示输入框
+  const [inputValue, setInputValue] = useState(''); // 编辑输入框的值
+  const [inputWidth, setInputWidth] = useState(''); // 编辑输入框的值
+  const [closeIconEnter, setCloseIconEnter] = useState(false); // 鼠标是否进入closeIcon
+  const [editIconEnter, setEditIconEnter] = useState(false); // 鼠标是否进入closeIcon
+  const inputRef = useRef(); //input ref
+  const tagRef = useRef(); //tagRef ref
+  useEffect(() => {
     if ('visible' in props) {
       setVisible(!!visibleTag);
     }
   }, [visibleTag]);
-  useEffect(function () {
+  useEffect(() => {
     if (!tagRef.current) return;
-    var offsetWidth = tagRef.current.offsetWidth;
+    const {
+      offsetWidth
+    } = tagRef.current;
     setInputWidth(offsetWidth);
     getWidth && getWidth(offsetWidth);
   }, [tagRef, inputVisible]);
-  useEffect(function () {
+  useEffect(() => {
     if (typeof children === 'string') {
       setInputValue(children);
     }
   }, [children]);
   //是否预设颜色
-  var isPresetColor = function isPresetColor() {
+  const isPresetColor = () => {
     if (!color) return false;
     return PresetColors.includes(color);
   };
   //tag style
-  var tagStyle = Object.assign({
+  const tagStyle = Object.assign({
     color: color && !isPresetColor() ? color : undefined,
     backgroundColor: color && !isPresetColor() ? tinycolor(color).setAlpha(0.1).toRgbString() : undefined,
     borderColor: color && !isPresetColor() && type === 'outline' ? color : undefined,
-    maxWidth: maxWidth
+    maxWidth
   }, style);
   //tag closeIcon style
-  var closeIconStyle = {
+  const closeIconStyle = {
     backgroundColor: closeIconEnter ? tinycolor(color).setAlpha(0.1).toRgbString() : undefined,
     borderRadius: '2px'
   };
   //tag editIcon style
-  var editIconStyle = {
+  const editIconStyle = {
     backgroundColor: editIconEnter ? tinycolor(color).setAlpha(0.1).toRgbString() : undefined,
     marginRight: children ? size === 'small' ? '2px' : '4px' : undefined,
     borderRadius: '2px'
   };
   //tag cls
-  var tagClassName = clsx("".concat($prefixCls, "-tag"), "".concat($prefixCls, "-tag-").concat(type), "".concat($prefixCls, "-tag-").concat(size), className, (_clsx = {}, _defineProperty(_clsx, "".concat($prefixCls, "-tag-has-color"), color), _defineProperty(_clsx, "".concat($prefixCls, "-tag-hidden"), !visible), _defineProperty(_clsx, "".concat($prefixCls, "-tag-").concat(color), isPresetColor()), _clsx));
+  const tagClassName = clsx("".concat($prefixCls, "-tag"), "".concat($prefixCls, "-tag-").concat(type), "".concat($prefixCls, "-tag-").concat(size), className, {
+    ["".concat($prefixCls, "-tag-has-color")]: color,
+    ["".concat($prefixCls, "-tag-hidden")]: !visible,
+    ["".concat($prefixCls, "-tag-").concat(color)]: isPresetColor()
+  });
   //tag close click
-  var handleCloseClick = function handleCloseClick(e) {
+  const handleCloseClick = e => {
     e.stopPropagation();
     onClose === null || onClose === void 0 ? void 0 : onClose(e);
     setCloseIconEnter(false);
@@ -304,19 +257,19 @@ var InternalTag = function InternalTag(props) {
       setVisible(false);
     }
   };
-  var handleCloseEnter = function handleCloseEnter() {
+  const handleCloseEnter = () => {
     setCloseIconEnter(true);
   };
-  var handleCloseLeave = function handleCloseLeave() {
+  const handleCloseLeave = () => {
     setCloseIconEnter(false);
   };
-  var handleEditEnter = function handleEditEnter() {
+  const handleEditEnter = () => {
     setEditIconEnter(true);
   };
-  var handleEditLeave = function handleEditLeave() {
+  const handleEditLeave = () => {
     setEditIconEnter(false);
   };
-  var handleEditClick = function handleEditClick(e) {
+  const handleEditClick = e => {
     e.stopPropagation();
     onEdit && onEdit(e);
     if (e.defaultPrevented) {
@@ -327,7 +280,7 @@ var InternalTag = function InternalTag(props) {
     setInputVisible(true);
   };
   //渲染close icon
-  var renderCloseIcon = function renderCloseIcon() {
+  const renderCloseIcon = () => {
     if (!closable) return null;
     return closeIcon ? jsx("span", Object.assign({
       className: 'tag-close-icon',
@@ -346,7 +299,7 @@ var InternalTag = function InternalTag(props) {
     });
   };
   // 渲染前缀icon
-  var renderPrefixIcon = function renderPrefixIcon() {
+  const renderPrefixIcon = () => {
     return (editable || icon) && jsx("span", Object.assign({
       className: "tag-edit-icon ".concat(icon ? "tag-custom-icon" : ''),
       style: editIconStyle,
@@ -364,23 +317,23 @@ var InternalTag = function InternalTag(props) {
     }));
   };
   //input change
-  var handleInputChange = function handleInputChange(e) {
+  const handleInputChange = e => {
     setInputValue(e.target.value);
     tagChange && tagChange(e.target.value);
   };
   //input confirm
-  var handleInputConfirm = function handleInputConfirm() {
+  const handleInputConfirm = () => {
     setInputVisible(false);
   };
   //input enter
-  var handleInputEnter = function handleInputEnter(e) {
+  const handleInputEnter = e => {
     if (e.keyCode === 13 || e.which === 13) {
       handleInputConfirm();
     }
   };
   //
-  var renderNewInput = function renderNewInput() {
-    var inputCls = clsx("".concat($prefixCls, "-tag-edit-input"), editInputClassName);
+  const renderNewInput = () => {
+    const inputCls = clsx("".concat($prefixCls, "-tag-edit-input"), editInputClassName);
     return jsx("input", {
       style: {
         width: editInputWidth || inputWidth,
@@ -414,6 +367,6 @@ var InternalTag = function InternalTag(props) {
     }))
   });
 };
-var Tag = InternalTag;
+const Tag = InternalTag;
 
 export { Tag, TagGroup, Tag as default };