muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 04:46:40 +07:00
Code Packages Activity Actions

fixed errors on Textareas without setRef

Browse source
This commit is contained in:
Fedor Katurov 2021-03-01 10:53:41 +07:00
parent b90b44de2c
commit 7d2511e7e9
4 changed files with 25 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/components/input/Textarea/index.tsx
View file

@ -49,7 +49,7 @@ const Textarea = memo<IProps>(
}) => { }) => {
const [rows, setRows] = useState(minRows || 1); const [rows, setRows] = useState(minRows || 1);
const [focused, setFocused] = useState(false); const [focused, setFocused] = useState(false);
const ref = useRef<HTMLTextAreaElement>(); const ref = useRef<HTMLTextAreaElement>(null);
const onInput = useCallback( const onInput = useCallback(
({ target }: ChangeEvent<HTMLTextAreaElement>) => handler(target.value), ({ target }: ChangeEvent<HTMLTextAreaElement>) => handler(target.value),
@ -64,7 +64,10 @@ const Textarea = memo<IProps>(
if (!target) return; if (!target) return;
autosize(target); autosize(target);
if (setRef) {
setRef(target); setRef(target);
}
return () => autosize.destroy(target); return () => autosize.destroy(target);
}, [ref, setRef]); }, [ref, setRef]);

6
src/components/profile/Message/index.tsx
View file

@ -9,6 +9,7 @@ import { CommentMenu } from '~/components/comment/CommentMenu';
import { MessageForm } from '~/components/profile/MessageForm'; import { MessageForm } from '~/components/profile/MessageForm';
import { Filler } from '~/components/containers/Filler'; import { Filler } from '~/components/containers/Filler';
import { Button } from '~/components/input/Button'; import { Button } from '~/components/input/Button';
import markdown from '~/styles/common/markdown.module.scss';
interface IProps { interface IProps {
message: IMessage; message: IMessage;
@ -66,7 +67,10 @@ const Message: FC<IProps> = ({
) : ( ) : (
<div className={styles.text}> <div className={styles.text}>
{!incoming && <CommentMenu onEdit={onEditClicked} onDelete={onDeleteClicked} />} {!incoming && <CommentMenu onEdit={onEditClicked} onDelete={onDeleteClicked} />}
<Group dangerouslySetInnerHTML={{ __html: formatText(message.text) }} /> <Group
dangerouslySetInnerHTML={{ __html: formatText(message.text) }}
className={markdown.wrapper}
/>
</div> </div>
)} )}

1
src/components/profile/Message/styles.module.scss
View file

@ -9,6 +9,7 @@ $outgoing_color: $comment_bg;
flex-direction: row; flex-direction: row;
padding: 0 0 0 42px; padding: 0 0 0 42px;
position: relative; position: relative;
word-break: break-word;
.avatar { .avatar {
// margin: 0 0 0 10px; // margin: 0 0 0 10px;

25
src/utils/dom.ts
View file

@ -80,18 +80,17 @@ export const getURLFromString = (
size?: typeof PRESETS[keyof typeof PRESETS] size?: typeof PRESETS[keyof typeof PRESETS]
): string => { ): string => {
if (size) { if (size) {
return url return url.replace(
.replace('REMOTE_CURRENT://', `${process.env.REACT_APP_REMOTE_CURRENT}cache/${size}/`) 'REMOTE_CURRENT://',
.replace('REMOTE_OLD://', process.env.REACT_APP_REMOTE_OLD); `${process.env.REACT_APP_REMOTE_CURRENT}cache/${size}/`
);
} }
return url return url.replace('REMOTE_CURRENT://', process.env.REACT_APP_REMOTE_CURRENT);
.replace('REMOTE_CURRENT://', process.env.REACT_APP_REMOTE_CURRENT)
.replace('REMOTE_OLD://', process.env.REACT_APP_REMOTE_OLD);
}; };
export const getURL = (file: Partial<IFile>, size?: typeof PRESETS[keyof typeof PRESETS]) => { export const getURL = (file: Partial<IFile>, size?: typeof PRESETS[keyof typeof PRESETS]) => {
return file?.url ? getURLFromString(file.url, size) : null; return file?.url ? getURLFromString(file.url, size) : '';
}; };
export const formatText = pipe( export const formatText = pipe(
@ -105,7 +104,7 @@ export const formatText = pipe(
formatTextClickableUsernames formatTextClickableUsernames
); );
export const formatTextParagraphs = (text: string): string => (text && formatText(text)) || null; export const formatTextParagraphs = (text: string): string => (text && formatText(text)) || '';
export const findBlockType = (line: string): ValueOf<typeof COMMENT_BLOCK_TYPES> => { export const findBlockType = (line: string): ValueOf<typeof COMMENT_BLOCK_TYPES> => {
const match = Object.values(COMMENT_BLOCK_DETECTORS).find(detector => line.match(detector.test)); const match = Object.values(COMMENT_BLOCK_DETECTORS).find(detector => line.match(detector.test));
@ -121,12 +120,16 @@ export const splitCommentByBlocks = (text: string): ICommentBlock[] =>
content: line, content: line,
})); }));
export const formatCommentText = (author: string, text: string): ICommentBlock[] => export const formatCommentText = (author?: string, text?: string): ICommentBlock[] =>
text ? splitCommentByBlocks(text) : null; author && text ? splitCommentByBlocks(text) : [];
export const formatCellText = (text: string): string => formatTextParagraphs(text); export const formatCellText = (text: string): string => formatTextParagraphs(text);
export const getPrettyDate = (date: string): string => { export const getPrettyDate = (date?: string): string => {
if (!date) {
return '';
}
if (differenceInMonths(new Date(), new Date(date)) >= 3) { if (differenceInMonths(new Date(), new Date(date)) >= 3) {
return format(new Date(date), 'd MMMM yyyy', { locale: ru }); return format(new Date(date), 'd MMMM yyyy', { locale: ru });
} }