@bos-alpha/data
Version:
数据管理
115 lines (114 loc) • 7.45 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { Row, Col, Input, message } from 'antd';
import styled from '@emotion/styled';
import { Icon } from '@bos-alpha/common';
export var KeyValGenerator = function (_a) {
var value = _a.value, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onChange = _a.onChange;
var _c = useState([
{
key: '',
value: ''
}
]), list = _c[0], setList = _c[1];
// 将Form.Item设置的json转为数组
useEffect(function () {
var valObj = {};
if (value && typeof value === 'object') {
valObj = value;
}
else if (value && typeof value === 'string') {
try {
valObj = JSON.parse(value);
}
catch (err) { }
}
if (Object.keys(valObj).length === 0) {
setList([
{
key: '',
value: ''
}
]);
return;
}
var initList = Object.keys(valObj).map(function (key) { return ({
key: key,
value: valObj[key]
}); });
setList(initList);
}, [value]); // eslint-disable-line
// 将key-value列表转为对象并emit给Form.Item
var emitKvString = function (kvlist) {
setList(kvlist);
var kv = {};
kvlist.forEach(function (_a) {
var key = _a.key, value = _a.value;
kv[key] = value;
});
onChange && onChange(JSON.stringify(kv));
};
var addRow = function () {
if (disabled)
return;
emitKvString(__spreadArray(__spreadArray([], list, true), [
{
key: '',
value: ''
}
], false));
};
var onRemove = function (index) {
if (disabled)
return;
if (list.length <= 1) {
var notEmpty = list.filter(function (item) { return item.key; });
if (notEmpty.length === 1) {
emitKvString([{ key: '', value: '' }]);
}
else {
return message.warning('至少保留一项');
}
}
else {
emitKvString(list.filter(function (_, eq) { return eq !== index; }));
}
};
var onInput = function (e, key, index) {
var newList = list.map(function (item, eq) {
var _a;
if (eq === index) {
return __assign(__assign({}, item), (_a = {}, _a[key] = e.target.value, _a));
}
return item;
});
emitKvString(newList);
};
return (_jsx(Container, { children: _jsxs(Col, { children: [_jsxs("div", __assign({ className: "table-header row-item" }, { children: [_jsx("div", __assign({ className: "col-item" }, { children: "\u952E" }), void 0), _jsx("div", __assign({ className: "col-item" }, { children: "\u503C" }), void 0), _jsx("div", __assign({ className: "col-item" }, { children: "\u64CD\u4F5C" }), void 0)] }), void 0), list.map(function (item, index) { return (_jsxs("div", __assign({ className: "row-item" }, { children: [_jsx("div", __assign({ className: "col-item" }, { children: _jsx(Input, { className: "ipt", value: item.key, disabled: disabled, placeholder: "\u8BF7\u8F93\u5165\u952E", onInput: function (e) { return onInput(e, 'key', index); } }, void 0) }), void 0), _jsx("div", __assign({ className: "col-item" }, { children: _jsx(Input, { className: "ipt", value: item.value, disabled: disabled, placeholder: "\u8BF7\u8F93\u5165\u503C", onInput: function (e) { return onInput(e, 'value', index); } }, void 0) }), void 0), _jsx("div", __assign({ className: "col-item" }, { children: _jsx("span", __assign({ onClick: function () { return onRemove(index); }, className: "icon" }, { children: "\u5220\u9664" }), void 0) }), void 0)] }), index)); }), _jsx("div", __assign({ className: "add-btn flex-center" }, { children: _jsxs("span", __assign({ onClick: addRow }, { children: [_jsx(Icon, { className: "icon", type: "iconicon_addto" }, void 0), _jsx("span", { children: "\u65B0\u5EFA" }, void 0)] }), void 0) }), void 0)] }, void 0) }, void 0));
};
var Container = styled(Row)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .table-header {\n background: #fafafa;\n height: 32px;\n line-height: 32px;\n font-size: 14px;\n font-weight: 500;\n }\n .flex-center {\n display: flex;\n align-items: center;\n }\n .row-item {\n display: flex;\n align-items: center;\n border-bottom: 1px solid #e8e8e8;\n .col-item {\n width: 150px;\n padding-left: 10px;\n & .ipt {\n border: none;\n padding: 5px 0;\n &:focus {\n box-shadow: none;\n }\n }\n }\n }\n .icon {\n cursor: pointer;\n color: #2787ff;\n font-size: 14px;\n }\n .add-btn {\n padding: 5px 10px;\n border-bottom: 1px solid #e8e8e8;\n & > span {\n cursor: pointer;\n color: #2787ff;\n font-size: 14px;\n & > .icon {\n margin-right: 4px;\n }\n }\n }\n"], ["\n .table-header {\n background: #fafafa;\n height: 32px;\n line-height: 32px;\n font-size: 14px;\n font-weight: 500;\n }\n .flex-center {\n display: flex;\n align-items: center;\n }\n .row-item {\n display: flex;\n align-items: center;\n border-bottom: 1px solid #e8e8e8;\n .col-item {\n width: 150px;\n padding-left: 10px;\n & .ipt {\n border: none;\n padding: 5px 0;\n &:focus {\n box-shadow: none;\n }\n }\n }\n }\n .icon {\n cursor: pointer;\n color: #2787ff;\n font-size: 14px;\n }\n .add-btn {\n padding: 5px 10px;\n border-bottom: 1px solid #e8e8e8;\n & > span {\n cursor: pointer;\n color: #2787ff;\n font-size: 14px;\n & > .icon {\n margin-right: 4px;\n }\n }\n }\n"])));
var templateObject_1;