yzsd
Version:
a niubi UI component
124 lines • 4.03 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
/**
* title: 动态添加和删除
* description: 用数组生成一组标签，可以动态添加和删除。
*/
import React, { useEffect, useRef, useState } from 'react';
import { Input, Tag } from 'yzsd';
var App = function App() {
var _useState = useState(['Unremovable', 'Tag 2', 'Tag 3']),
_useState2 = _slicedToArray(_useState, 2),
tags = _useState2[0],
setTags = _useState2[1];
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(-1),
_useState8 = _slicedToArray(_useState7, 2),
editInputIndex = _useState8[0],
setEditInputIndex = _useState8[1];
var _useState9 = useState(''),
_useState10 = _slicedToArray(_useState9, 2),
editInputValue = _useState10[0],
setEditInputValue = _useState10[1];
var inputRef = useRef(null);
var editInputRef = useRef(null);
useEffect(function () {
var _a;
if (inputVisible) {
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
}
}, [inputVisible]);
useEffect(function () {
var _a;
(_a = editInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
}, [inputValue]);
var handleClose = function handleClose(removedTag) {
var newTags = tags.filter(function (tag) {
return tag !== removedTag;
});
setTags(newTags);
};
var showInput = function showInput() {
setInputVisible(true);
};
var handleInputChange = function handleInputChange(e) {
setInputValue(e.target.value);
};
var handleInputConfirm = function handleInputConfirm() {
if (inputValue && tags.indexOf(inputValue) === -1) {
setTags([].concat(_toConsumableArray(tags), [inputValue]));
}
setInputVisible(false);
setInputValue('');
};
var handleEditInputChange = function handleEditInputChange(e) {
setEditInputValue(e.target.value);
};
var handleEditInputConfirm = function handleEditInputConfirm() {
var newTags = _toConsumableArray(tags);
newTags[editInputIndex] = editInputValue;
setTags(newTags);
setEditInputIndex(-1);
setInputValue('');
};
var tagInputStyle = {
width: 78,
verticalAlign: 'top'
};
var tagPlusStyle = {
borderStyle: 'dashed'
};
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(React.Fragment, null, tags.map(function (tag, index) {
if (editInputIndex === index) {
return /*#__PURE__*/React.createElement(Input, {
ref: editInputRef,
key: tag,
size: "small",
style: tagInputStyle,
value: editInputValue,
onChange: handleEditInputChange,
onBlur: handleEditInputConfirm,
onPressEnter: handleEditInputConfirm
});
}
var tagElem = /*#__PURE__*/React.createElement(Tag, {
key: tag,
closable: index !== 0,
style: {
userSelect: 'none'
},
onClose: function onClose() {
return handleClose(tag);
}
}, /*#__PURE__*/React.createElement("span", {
onDoubleClick: function onDoubleClick(e) {
if (index !== 0) {
setEditInputIndex(index);
setEditInputValue(tag);
e.preventDefault();
}
}
}, tag));
return tagElem;
})), inputVisible ? /*#__PURE__*/React.createElement(Input, {
ref: inputRef,
type: "text",
size: "small",
style: tagInputStyle,
value: inputValue,
onChange: handleInputChange,
onBlur: handleInputConfirm,
onPressEnter: handleInputConfirm
}) : /*#__PURE__*/React.createElement(Tag, {
style: tagPlusStyle,
onClick: showInput
}, "+ New Tag"));
};
export default App;