113 lines
2.9 KiB
JavaScript
113 lines
2.9 KiB
JavaScript
import { DeleteOutlined, PlusOutlined } from "@ant-design/icons";
|
|
import { Modal } from "antd";
|
|
import { observer } from "mobx-react-lite";
|
|
import EditableContent from "../../../component/EditableContent";
|
|
import P from "../../../util/placement";
|
|
import store from "../../../store/global";
|
|
import { wrappedAction } from "../../../store/history";
|
|
import Row from "../../Row";
|
|
import Text from "../../Text";
|
|
|
|
const authorContextMenu = [
|
|
{
|
|
key: "create",
|
|
text: "添加",
|
|
icon: <PlusOutlined />,
|
|
onClick: () => {
|
|
store.authors.push("作者信息");
|
|
},
|
|
},
|
|
{
|
|
key: "delete",
|
|
text: "删除",
|
|
icon: <DeleteOutlined />,
|
|
onClick: (index) => {
|
|
store.authors.splice(index, 1);
|
|
},
|
|
},
|
|
];
|
|
const blockContextMenu = [
|
|
{
|
|
key: "create",
|
|
text: "添加作者信息",
|
|
icon: <PlusOutlined />,
|
|
onClick: () => {
|
|
store.authors.push("【记谱者】 记谱");
|
|
},
|
|
},
|
|
];
|
|
const handleSelectMenu = wrappedAction((index, value) => {
|
|
const menu = authorContextMenu.find((m) => m.key === value);
|
|
menu?.onClick(index);
|
|
});
|
|
const handleSelectBlockMenu = wrappedAction((value) => {
|
|
const menu = blockContextMenu.find((m) => m.key === value);
|
|
menu?.onClick();
|
|
});
|
|
const handleChangeAuthor = wrappedAction((index, value) => {
|
|
if (!value) {
|
|
return new Promise((resolve) => {
|
|
Modal.confirm({
|
|
title: "删除这条作者信息？",
|
|
okText: "确定",
|
|
cancelText: "取消",
|
|
onOk: () => {
|
|
resolve(true);
|
|
store.authors.splice(index, 1);
|
|
},
|
|
onCancel: () => {
|
|
resolve(true);
|
|
},
|
|
});
|
|
});
|
|
}
|
|
store.authors[index] = value;
|
|
});
|
|
|
|
function RightInfoBlock() {
|
|
return (
|
|
<Row
|
|
type="authors"
|
|
offsetX={store.canvasWidth - store.marginHorizontal}
|
|
offsetY={P.titleOffsetY}
|
|
>
|
|
<EditableContent
|
|
inputType="select"
|
|
options={blockContextMenu}
|
|
popoverProps={{ trigger: "context" }}
|
|
onChange={handleSelectBlockMenu}
|
|
>
|
|
<rect
|
|
x={store.marginHorizontal - 150}
|
|
y="-64"
|
|
width={150}
|
|
height={150}
|
|
fill={store.authors.length ? "none" : "transparent"}
|
|
// className={Styles.hotCorner}
|
|
></rect>
|
|
</EditableContent>
|
|
{store.authors.map((author, i) => (
|
|
<EditableContent
|
|
key={i + author}
|
|
inputType="select"
|
|
options={authorContextMenu}
|
|
popoverProps={{ trigger: "context" }}
|
|
onChange={handleSelectMenu.bind(null, i)}
|
|
>
|
|
<EditableContent
|
|
title="作者信息："
|
|
initialValue={author}
|
|
onChange={handleChangeAuthor.bind(null, i)}
|
|
>
|
|
<Text editable y={i * 22} textAnchor="end">
|
|
{author}
|
|
</Text>
|
|
</EditableContent>
|
|
</EditableContent>
|
|
))}
|
|
</Row>
|
|
);
|
|
}
|
|
|
|
export default observer(RightInfoBlock);
|