88 lines
2.3 KiB
TypeScript
88 lines
2.3 KiB
TypeScript
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
|
|
import {
|
|
Button,
|
|
Checkbox,
|
|
Col,
|
|
Form,
|
|
Input,
|
|
Radio,
|
|
Row,
|
|
Space,
|
|
Typography,
|
|
} from "antd";
|
|
const { Text } = Typography;
|
|
import {} from "antd";
|
|
import { useEffect, useState } from "react";
|
|
import "./index.less";
|
|
|
|
interface IProps {
|
|
onChange?: Function;
|
|
styles?: React.CSSProperties;
|
|
}
|
|
|
|
interface IChapter {
|
|
chapter_level: string;
|
|
chapter_title: string;
|
|
chapter_file_id?: string;
|
|
}
|
|
|
|
const Chatpter = (props: IProps) => {
|
|
const [form] = Form.useForm();
|
|
const [chapterList, setChapterList] = useState<IChapter[]>([]);
|
|
|
|
const onTocChange = () => {
|
|
const { toc } = form.getFieldsValue();
|
|
const process = toc
|
|
.split("\n")
|
|
.filter((i: string) => i.replace(/\s/, "").length > 0)
|
|
.map((row: string, index: number) => {
|
|
const [chapter_level, chapter_title, chapter_file_id] = row.split("|");
|
|
return !chapter_file_id
|
|
? { order: index, chapter_level, chapter_title }
|
|
: { order: index, chapter_level, chapter_title, chapter_file_id };
|
|
});
|
|
setChapterList(process);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (props.onChange) props.onChange(chapterList);
|
|
}, [chapterList]);
|
|
|
|
return (
|
|
<div style={{ ...props.styles }}>
|
|
<Row gutter={24}>
|
|
<Col span={12}>
|
|
<Form form={form} onChange={onTocChange}>
|
|
<Form.Item name="toc">
|
|
<Input.TextArea
|
|
placeholder="级别 | 标题 | FileId"
|
|
style={{ minHeight: 600, lineHeight: 2, fontSize: 16 }}
|
|
></Input.TextArea>
|
|
</Form.Item>
|
|
</Form>
|
|
</Col>
|
|
<Col span={12}>
|
|
<ul className="chapter-list">
|
|
{chapterList.map((c, index) => (
|
|
<li
|
|
key={index}
|
|
className={+c.chapter_level === 1 ? "l1" : ""}
|
|
style={{ paddingLeft: +c.chapter_level === 1 ? 0 : 20 }}
|
|
>
|
|
<Text style={{ fontSize: +c.chapter_level === 1 ? 18 : 16 }}>
|
|
{c.chapter_title}
|
|
</Text>
|
|
{c.chapter_file_id && (
|
|
<Text type="secondary">{c.chapter_file_id}</Text>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Chatpter;
|