|
|
|
@ -1,7 +1,7 @@
|
|
|
|
|
import { Button, Classes, EditableText, Icon } from "@blueprintjs/core";
|
|
|
|
|
import { Button, Classes, Icon } from "@blueprintjs/core";
|
|
|
|
|
import { observable, toJS } from "mobx";
|
|
|
|
|
import { observer } from "mobx-react";
|
|
|
|
|
import React from "react";
|
|
|
|
|
import React, { useEffect, useRef } from "react";
|
|
|
|
|
import { app } from "../../../ApplicationServices/Application";
|
|
|
|
|
import { DefaultModifyTextsOption } from "../../../Editor/DefaultConfig";
|
|
|
|
|
import { ModifyTextsConfigOption } from "../../Store/BoardInterface";
|
|
|
|
@ -16,9 +16,13 @@ export class ModifyTextsStore implements IConfigStore
|
|
|
|
|
@observable configName = "默认";
|
|
|
|
|
SaveConfig()
|
|
|
|
|
{
|
|
|
|
|
let opt = toJS(this.m_Option);
|
|
|
|
|
//清理尾部多余的回车
|
|
|
|
|
opt.changeTexts = opt.changeTexts.map((texts) => ([texts[0].trimEnd(), texts[1].trimEnd()]));
|
|
|
|
|
|
|
|
|
|
//新的配置
|
|
|
|
|
let newConfig: IConfigOption = {};
|
|
|
|
|
newConfig.option = toJS(this.m_Option);
|
|
|
|
|
newConfig.option = opt;
|
|
|
|
|
return newConfig;
|
|
|
|
|
};
|
|
|
|
|
//板数据
|
|
|
|
@ -42,23 +46,67 @@ export class ModifyTextsStore implements IConfigStore
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@observer
|
|
|
|
|
export class TextModifyModal extends React.Component<{ store: ModifyTextsStore; }, {}>
|
|
|
|
|
const RenderTextAreaRow = (observer((props: { texts: [string, string]; }) =>
|
|
|
|
|
{
|
|
|
|
|
const { texts } = props;
|
|
|
|
|
const textareaElement1 = useRef<HTMLTextAreaElement>(null);
|
|
|
|
|
const textareaElement2 = useRef<HTMLTextAreaElement>(null);
|
|
|
|
|
|
|
|
|
|
const upDataHeight = () =>
|
|
|
|
|
{
|
|
|
|
|
private renderEditableText = ((texts: [string, string], valueKey: number) =>
|
|
|
|
|
if (textareaElement1.current && textareaElement2.current)
|
|
|
|
|
{
|
|
|
|
|
textareaElement1.current.style.height = "35px";
|
|
|
|
|
textareaElement2.current.style.height = "35px";
|
|
|
|
|
const maxHeight = Math.max(textareaElement1.current.scrollHeight, textareaElement2.current.scrollHeight);
|
|
|
|
|
textareaElement1.current.style.height = `${maxHeight}px`;
|
|
|
|
|
textareaElement2.current.style.height = `${maxHeight}px`;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
useEffect(() =>
|
|
|
|
|
{
|
|
|
|
|
textareaElement1.current.value = texts[0];
|
|
|
|
|
textareaElement2.current.value = texts[1];
|
|
|
|
|
upDataHeight();
|
|
|
|
|
}, [texts]);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<EditableText
|
|
|
|
|
multiline={true}
|
|
|
|
|
minLines={3}
|
|
|
|
|
maxLines={3}
|
|
|
|
|
value={texts[valueKey]}
|
|
|
|
|
placeholder=""
|
|
|
|
|
confirmOnEnterKey={true}
|
|
|
|
|
onChange={val => { texts[valueKey] = val; }}
|
|
|
|
|
<>
|
|
|
|
|
<div>
|
|
|
|
|
<textarea
|
|
|
|
|
className={Classes.INPUT}
|
|
|
|
|
ref={textareaElement1}
|
|
|
|
|
defaultValue={texts[0]}
|
|
|
|
|
onChange={(e) => { texts[0] = e.currentTarget.value; }}
|
|
|
|
|
onKeyDown={(e) =>
|
|
|
|
|
{
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
setTimeout(() => { upDataHeight(); }, 0);
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="text-replace"><div>替换为--></div></div>
|
|
|
|
|
<div>
|
|
|
|
|
<textarea
|
|
|
|
|
className={Classes.INPUT}
|
|
|
|
|
ref={textareaElement2}
|
|
|
|
|
defaultValue={texts[1]}
|
|
|
|
|
onChange={(e) => { texts[1] = e.currentTarget.value; }}
|
|
|
|
|
onKeyDown={(e) =>
|
|
|
|
|
{
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
setTimeout(() => { upDataHeight(); }, 0);
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
});
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
@observer
|
|
|
|
|
export class TextModifyModal extends React.Component<{ store: ModifyTextsStore; }, {}>
|
|
|
|
|
{
|
|
|
|
|
render()
|
|
|
|
|
{
|
|
|
|
|
const { changeTexts } = this.props.store.m_Option;
|
|
|
|
@ -90,13 +138,7 @@ export class TextModifyModal extends React.Component<{ store: ModifyTextsStore;
|
|
|
|
|
<div className="body">
|
|
|
|
|
{changeTexts.map((texts, i) => (
|
|
|
|
|
<div className="text-row note-item" key={i}>
|
|
|
|
|
<div>
|
|
|
|
|
{this.renderEditableText(texts, 0)}
|
|
|
|
|
</div>
|
|
|
|
|
<div className="text-replace"><div>替换为--></div></div>
|
|
|
|
|
<div>
|
|
|
|
|
{this.renderEditableText(texts, 1)}
|
|
|
|
|
</div>
|
|
|
|
|
<RenderTextAreaRow texts={texts} />
|
|
|
|
|
</div>
|
|
|
|
|
))}
|
|
|
|
|
</div>
|
|
|
|
|