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

added better textarea resizer

Browse source
This commit is contained in:
Fedor Katurov 2020-09-07 15:55:56 +07:00
parent 4c4a33a819
commit c8ecb9085a
1 changed files with 12 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,14 +2,14 @@ import React, {
ChangeEvent, ChangeEvent,
LegacyRef, LegacyRef,
memo, memo,
TextareaHTMLAttributes,
useCallback, useCallback,
useLayoutEffect, useEffect,
useRef, useRef,
useState, useState,
TextareaHTMLAttributes,
} from 'react'; } from 'react';
import { getStyle } from '~/utils/dom';
import classNames from 'classnames'; import classNames from 'classnames';
import autosize from 'autosize';
import * as styles from '~/styles/inputs.scss'; import * as styles from '~/styles/inputs.scss';
import { Icon } from '../Icon'; import { Icon } from '../Icon';
@ -55,34 +55,13 @@ const Textarea = memo<IProps>(
const onFocus = useCallback(() => setFocused(true), [setFocused]); const onFocus = useCallback(() => setFocused(true), [setFocused]);
const onBlur = useCallback(() => setFocused(false), [setFocused]); const onBlur = useCallback(() => setFocused(false), [setFocused]);
useLayoutEffect(() => { useEffect(() => {
const lineHeight = parseInt(getStyle(textarea.current, 'line-height'), 10) || 15; if (!textarea.current) return;
textarea.current.rows = 1; // reset number of rows in textarea autosize(textarea.current);
const paddingTop = parseInt(getStyle(textarea.current, 'padding-top'), 10) || 0; return () => autosize.destroy(textarea.current);
const paddingBottom = parseInt(getStyle(textarea.current, 'padding-bottom'), 10) || 0; }, [textarea.current]);
const actualScrollHeight =
(textarea.current.scrollHeight || 0) - (paddingTop + paddingBottom);
const rowsCount = Math.round(actualScrollHeight / lineHeight);
let currentRows = minRows;
if (rowsCount > maxRows) {
currentRows = maxRows;
textarea.current.scrollTop = textarea.current.scrollHeight;
} else if (rowsCount <= minRows) {
currentRows = minRows;
} else {
currentRows = rowsCount;
}
textarea.current.rows = currentRows;
setRows(currentRows);
}, [value, minRows, maxRows]);
return ( return (
<div <div
@ -104,6 +83,10 @@ const Textarea = memo<IProps>(
ref={textarea} ref={textarea}
onFocus={onFocus} onFocus={onFocus}
onBlur={onBlur} onBlur={onBlur}
style={{
maxHeight: maxRows * 20,
minHeight: minRows * 20,
}}
{...props} {...props}
/> />
</div> </div>