@ovine/craft
Version:
Ovine json editor.
111 lines (110 loc) • 4.18 kB
JavaScript
/**
* 简单的列表 增删改 组件，用于 权限/请求 的编辑
*/
import { uuid } from 'amis/lib/utils/helper';
import { pick, cloneDeep } from 'lodash';
import React, { useEffect } from 'react';
import { Amis } from '@core/components/amis/schema';
import { useImmer } from '@core/utils/hooks';
import { StyledList } from "./styled";
export default (props) => {
const { list: propList = [], title = '', getControls, onListChange } = props;
const [state, setState] = useImmer({
list: propList,
isShowModal: false,
editId: '',
});
const { isShowModal, editId, list } = state;
const ctrl = {
toggleModal: (toggle) => {
setState((d) => {
const isShow = typeof toggle === 'boolean' ? toggle : !d.isShowModal;
d.isShowModal = isShow;
if (!isShow) {
d.editId = '';
}
});
},
onEdit: (id) => {
setState((d) => {
d.isShowModal = true;
d.editId = id;
});
},
add: (item) => {
item.id = uuid();
setState((d) => {
d.list.push(item);
});
},
copy: (id) => {
const itemIdx = list.findIndex((i) => i.id === id);
const item = list[itemIdx];
const newItem = cloneDeep(item);
newItem.id = uuid();
newItem.label = `${item.label}-复制`;
setState((d) => {
d.list.splice(itemIdx + 1, 0, newItem);
});
},
del: (id) => {
setState((d) => {
d.list.splice(list.findIndex((i) => i.id === id), 1);
});
},
edit: (item) => {
setState((d) => {
d.list.splice(list.findIndex((i) => i.id === item.id), 1, item);
});
},
};
const controls = getControls({
list,
editId,
});
const schema = {
type: 'dialog',
show: isShowModal,
onClose: ctrl.toggleModal,
title: editId ? `编辑${title}` : `添加${title}`,
body: {
controls,
type: 'form',
data: list.find((i) => i.id === editId) || {},
onSubmit: (values) => {
const item = pick(values, controls.map((i) => i.name));
if (editId) {
ctrl.edit(item);
}
else {
ctrl.add(item);
}
ctrl.toggleModal();
},
},
};
const renderItem = (item) => {
const { label, id } = item;
return (React.createElement("div", { key: id, className: "list-item" },
React.createElement("p", { className: "text-ellipsis", title: label }, label),
React.createElement("ul", { className: "list-actions" },
React.createElement("li", { onClick: () => ctrl.onEdit(id), "data-tooltip": "\u7F16\u8F91", "data-position": "bottom" },
React.createElement("i", { className: "fa fa-edit" })),
React.createElement("li", { onClick: () => ctrl.copy(id), "data-tooltip": "\u590D\u5236", "data-position": "bottom" },
React.createElement("i", { className: "fa fa-copy" })),
React.createElement("li", { onClick: () => ctrl.del(id), "data-tooltip": "\u5220\u9664", "data-position": "bottom" },
React.createElement("i", { className: "fa fa-trash-o" })))));
};
useEffect(() => {
if (onListChange) {
onListChange(list);
}
}, [list]);
return (React.createElement(StyledList, null,
!list.length && React.createElement("div", { className: "list-empty" }, `暂无${title}`),
list.map(renderItem),
React.createElement("div", { className: "list-item list-add", onClick: ctrl.toggleModal },
React.createElement("i", { className: "fa fa-plus" }),
React.createElement("span", null, `添加${title}`)),
React.createElement(Amis, { schema: schema })));
};