gio
/
think
mirror of https://github.com/fantasticit/think.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

tiptap: fix status input blur

This commit is contained in:
fantasticit 2022-08-19 14:38:57 +08:00
parent c502474e57
commit cb811ab21f
1 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/client/src/tiptap/core/wrappers/status/index.tsx
View File

@ -4,7 +4,7 @@ import { NodeViewWrapper } from '@tiptap/react';
import cls from 'classnames'; import cls from 'classnames';
import { useUser } from 'data/user'; import { useUser } from 'data/user';
import { useToggle } from 'hooks/use-toggle'; import { useToggle } from 'hooks/use-toggle';
import { useCallback, useEffect, useMemo, useRef } from 'react'; import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import styles from './index.module.scss'; import styles from './index.module.scss';
@ -24,14 +24,15 @@ export const StatusWrapper = ({ editor, node, updateAttributes }) => {
const { user } = useUser(); const { user } = useUser();
const ref = useRef<HTMLInputElement>(); const ref = useRef<HTMLInputElement>();
const [visible, toggleVisible] = useToggle(false); const [visible, toggleVisible] = useToggle(false);
const [currentText, setCurrentText] = useState(text);
const content = useMemo( const content = useMemo(
() => ( () => (
<Tag className="render-wrapper" style={{ backgroundColor: bgcolor, border: `1px solid ${borderColor}` }}> <Tag className="render-wrapper" style={{ backgroundColor: bgcolor, border: `1px solid ${borderColor}` }}>
<span style={{ color: currentTextColor }}>{text || '点击设置状态'}</span> <span style={{ color: currentTextColor }}>{currentText || '点击设置状态'}</span>
</Tag> </Tag>
), ),
[bgcolor, borderColor, currentTextColor, text] [bgcolor, borderColor, currentTextColor, currentText]
); );
const onVisibleChange = useCallback( const onVisibleChange = useCallback(
@ -64,8 +65,10 @@ export const StatusWrapper = ({ editor, node, updateAttributes }) => {
useEffect(() => { useEffect(() => {
if (visible) { if (visible) {
ref.current?.focus(); ref.current?.focus();
} else {
updateAttributes({ text: currentText });
} }
}, [visible]); }, [visible, updateAttributes, currentText]);
return ( return (
<NodeViewWrapper as="span" className={cls(styles.wrap, 'status')}> <NodeViewWrapper as="span" className={cls(styles.wrap, 'status')}>
@ -78,7 +81,7 @@ export const StatusWrapper = ({ editor, node, updateAttributes }) => {
content={ content={
<div style={{ width: 184, height: 65 }}> <div style={{ width: 184, height: 65 }}>
<div style={{ marginBottom: 8 }}> <div style={{ marginBottom: 8 }}>
<Input ref={ref} placeholder="输入状态" onChange={(v) => updateAttributes({ text: v })} /> <Input ref={ref} placeholder="输入状态" value={currentText} onChange={setCurrentText} />
</div> </div>
<Space> <Space>
{STATUS_COLORS.map((color) => { {STATUS_COLORS.map((color) => {