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