lifegpc/bookdownload
1
0
Fork 0
mirror of https://github.com/lifegpc/bookdownload.git synced 2026-06-28 22:57:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

Use custom close and save button

Browse Source
This commit is contained in:
lifegpc
2026-02-28 15:51:39 +08:00
parent d1c495aa8d
commit f4f5983168
3 changed files with 85 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Icon.tsx
View File

@@ -1,8 +1,12 @@
import { HTMLProps } from "react";
import styles from "./Icon.module.css";
export default function Icon(props: HTMLProps<HTMLSpanElement>) {
export interface IconProps extends HTMLProps<HTMLSpanElement> {
cls?: string;
}
export default function Icon(props: IconProps) {
return (
<span {...props} className={`${styles.icon}${props.className ? ` ${props.className}` : ''}`}>{props.children}</span>
<span {...props} className={`${styles.icon}${props.cls ? ` ${props.cls}` : ''}`}>{props.children}</span>
)
}

48
src/manage/qd/ChapterEditor.module.css
View File

@@ -9,16 +9,54 @@
.name {
align-items: center;
display: flex;
margin-top: 8px;
margin-left: 16px;
margin: 8px!important;
}
.name .save {
.nameContainer.editing .name {
width: 100%;
left: 0;
top: 0;
}
.nameContainer.editing .name textarea:global(.ant-input) {
padding-right: 40px;
width: 100%;
}
.nameSave {
position: absolute;
right: 14px;
cursor: pointer;
color: gray;
}
.nameSave:hover {
color: #4096ff;
}
.nameClose {
position: absolute;
right: 34px;
cursor: pointer;
color: gray;
}
.nameClose:hover {
color: #4096ff;
}
.nameContainer {
position: relative;
top: 3px;
align-items: center;
}
.editorWrapper {
.nameContainer.editing {
min-width: 200px;
width: calc(100% - 200px);
max-width: 500px;
}
.editor {
flex: 1;
overflow: hidden;
position: relative;

48
src/manage/qd/ChapterEditor.tsx
View File

@@ -6,6 +6,7 @@ import { Flex, Typography } from "antd";
import Icon from "../../components/Icon";
import EditOutlined from "../../../node_modules/@material-icons/svg/svg/edit/outline.svg";
import SaveOutlined from "../../../node_modules/@material-icons/svg/svg/save/outline.svg";
import CloseOutlined from "../../../node_modules/@material-icons/svg/svg/close/outline.svg";
const { Text } = Typography;
@@ -16,6 +17,8 @@ export interface ChapterEditorProps {
export interface ChapterEditorState {
content: string;
chapterName: string;
editingChapterName: boolean;
eChapterName?: string;
}
export default class ChapterEditor extends Component<ChapterEditorProps, ChapterEditorState> {
@@ -26,6 +29,7 @@ export default class ChapterEditor extends Component<ChapterEditorProps, Chapter
this.state = {
content: props.chapter.contents ? props.chapter.contents.join('\n') : props.chapter.chapterInfo.content,
chapterName: props.chapter.chapterInfo.chapterName,
editingChapterName: false,
};
}
componentDidUpdate(prevProps: Readonly<ChapterEditorProps>, _prevState: Readonly<ChapterEditorState>, _snapshot?: unknown): void {
@@ -33,6 +37,8 @@ export default class ChapterEditor extends Component<ChapterEditorProps, Chapter
this.setState({
content: this.props.chapter.contents ? this.props.chapter.contents.join('\n') : this.props.chapter.chapterInfo.content,
chapterName: this.props.chapter.chapterInfo.chapterName,
editingChapterName: false,
eChapterName: undefined,
});
}
}
@@ -40,22 +46,40 @@ export default class ChapterEditor extends Component<ChapterEditorProps, Chapter
this.ref.current?.editor.layout();
}
render() {
let nameClass = styles.nameContainer;
if (this.state.editingChapterName) {
nameClass += ` ${styles.editing}`;
}
console.log(this.state);
return (<>
<Flex vertical className={styles.container}>
<Flex className={styles.header}>
<Text
className={styles.name}
editable={{
onChange: (value) => this.setState({ chapterName: value }),
icon: <Icon><EditOutlined fill="currentColor" width="20" /></Icon>,
enterIcon: <Icon><SaveOutlined fill="currentColor" width="20" className={styles.save} /></Icon>,
tooltip: "编辑章节名称",
}}
>
{this.state.chapterName}
</Text>
<Flex className={nameClass}>
<Text
className={styles.name}
editable={{
autoSize: true,
editing: this.state.editingChapterName,
onChange: (value) => this.setState({ eChapterName: value }),
icon: <Icon><EditOutlined fill="currentColor" width="20" height="20" /></Icon>,
tooltip: "编辑章节名称",
onStart: () => this.setState({ editingChapterName: true }),
enterIcon: null,
onEnd: () => this.setState({ editingChapterName: false, chapterName: this.state.eChapterName ?? this.state.chapterName, eChapterName: undefined }),
onCancel: () => this.setState({ editingChapterName: false, eChapterName: undefined }),
}}
>
{this.state.editingChapterName ? (this.state.eChapterName ?? this.state.chapterName) : this.state.chapterName}
</Text>
{this.state.editingChapterName && <Icon cls={styles.nameClose}><CloseOutlined fill="currentColor" width="20" height="20" onClick={() => {
this.setState({ editingChapterName: false, eChapterName: undefined });
}} /></Icon>}
{this.state.editingChapterName && <Icon cls={styles.nameSave}><SaveOutlined fill="currentColor" width="20" height="20" onClick={() => {
this.setState({ editingChapterName: false, chapterName: this.state.eChapterName ?? this.state.chapterName, eChapterName: undefined });
}} /></Icon>}
</Flex>
</Flex>
<div className={styles.editorWrapper}>
<div className={styles.editor}>
<MonacoEditor
ref={this.ref}
value={this.state.content}