From d083845a77495873f67675bac7806dee9578f25f Mon Sep 17 00:00:00 2001 From: keyan Date: Fri, 16 Jul 2021 12:32:54 -0500 Subject: [PATCH] auto grow textareas --- components/header.js | 2 +- components/reply.js | 5 ++- package-lock.json | 99 ++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + pages/post.js | 5 ++- 5 files changed, 107 insertions(+), 5 deletions(-) diff --git a/components/header.js b/components/header.js index aae1ffa3..f76426c8 100644 --- a/components/header.js +++ b/components/header.js @@ -92,7 +92,7 @@ export default function Header () { const strike = useLightning() useEffect(() => { setTimeout(strike, randInRange(3000, 10000)) - }, []) + }, [router.asPath]) return path !== '/login' && } } diff --git a/components/reply.js b/components/reply.js index 684d2312..93886d82 100644 --- a/components/reply.js +++ b/components/reply.js @@ -5,6 +5,7 @@ import styles from './reply.module.css' import { COMMENTS } from '../fragments/comments' import { useMe } from './me' import ActionTooltip from './action-tooltip' +import TextareaAutosize from 'react-textarea-autosize' export const CommentSchema = Yup.object({ text: Yup.string().required('required').trim() @@ -65,8 +66,8 @@ export default function Reply ({ parentId, onSuccess, autoFocus }) { > {me.freeComments} free comments left : null} diff --git a/package-lock.json b/package-lock.json index 0da8b366..d8e5081e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,6 +31,7 @@ "react-dom": "17.0.1", "react-markdown": "^6.0.2", "react-syntax-highlighter": "^15.4.3", + "react-textarea-autosize": "^8.3.3", "remark-gfm": "^1.0.0", "remove-markdown": "^0.3.0", "sass": "^1.32.8", @@ -8665,6 +8666,22 @@ "react": ">= 0.14.0" } }, + "node_modules/react-textarea-autosize": { + "version": "8.3.3", + "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.3.3.tgz", + "integrity": "sha512-2XlHXK2TDxS6vbQaoPbMOfQ8GK7+irc2fVK6QFIcC8GOnH3zI/v481n+j1L0WaPVvKxwesnY93fEfH++sus2rQ==", + "dependencies": { + "@babel/runtime": "^7.10.2", + "use-composed-ref": "^1.0.0", + "use-latest": "^1.0.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0" + } + }, "node_modules/react-transition-group": { "version": "4.4.2", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz", @@ -10382,6 +10399,11 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/ts-essentials": { + "version": "2.0.12", + "resolved": "https://registry.npmjs.org/ts-essentials/-/ts-essentials-2.0.12.tgz", + "integrity": "sha512-3IVX4nI6B5cc31/GFFE+i8ey/N2eA0CZDbo6n0yrz0zDX8ZJ8djmU1p+XRz7G3is0F3bB3pu2pAroFdAWQKU3w==" + }, "node_modules/ts-invariant": { "version": "0.8.2", "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.8.2.tgz", @@ -10863,6 +10885,46 @@ "node": ">=0.4.x" } }, + "node_modules/use-composed-ref": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.1.0.tgz", + "integrity": "sha512-my1lNHGWsSDAhhVAT4MKs6IjBUtG6ZG11uUqexPH9PptiIZDQOzaF4f5tEbJ2+7qvNbtXNBbU3SfmN+fXlWDhg==", + "dependencies": { + "ts-essentials": "^2.0.3" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0" + } + }, + "node_modules/use-isomorphic-layout-effect": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.1.tgz", + "integrity": "sha512-L7Evj8FGcwo/wpbv/qvSfrkHFtOpCzvM5yl2KVyDJoylVuSvzphiiasmjgQPttIGBAy2WKiBNR98q8w7PiNgKQ==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/use-latest": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.0.tgz", + "integrity": "sha512-d2TEuG6nSLKQLAfW3By8mKr8HurOlTkul0sOpxbClIv4SQ4iOd7BYr7VIzdbktUCnv7dua/60xzd8igMU6jmyw==", + "dependencies": { + "use-isomorphic-layout-effect": "^1.0.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/use-subscription": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.1.tgz", @@ -18028,6 +18090,16 @@ "refractor": "^3.2.0" } }, + "react-textarea-autosize": { + "version": "8.3.3", + "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.3.3.tgz", + "integrity": "sha512-2XlHXK2TDxS6vbQaoPbMOfQ8GK7+irc2fVK6QFIcC8GOnH3zI/v481n+j1L0WaPVvKxwesnY93fEfH++sus2rQ==", + "requires": { + "@babel/runtime": "^7.10.2", + "use-composed-ref": "^1.0.0", + "use-latest": "^1.0.0" + } + }, "react-transition-group": { "version": "4.4.2", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz", @@ -19354,6 +19426,11 @@ "resolved": "https://registry.npmjs.org/trough/-/trough-1.0.5.tgz", "integrity": "sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==" }, + "ts-essentials": { + "version": "2.0.12", + "resolved": "https://registry.npmjs.org/ts-essentials/-/ts-essentials-2.0.12.tgz", + "integrity": "sha512-3IVX4nI6B5cc31/GFFE+i8ey/N2eA0CZDbo6n0yrz0zDX8ZJ8djmU1p+XRz7G3is0F3bB3pu2pAroFdAWQKU3w==" + }, "ts-invariant": { "version": "0.8.2", "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.8.2.tgz", @@ -19712,6 +19789,28 @@ "prepend-http": "^1.0.1" } }, + "use-composed-ref": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.1.0.tgz", + "integrity": "sha512-my1lNHGWsSDAhhVAT4MKs6IjBUtG6ZG11uUqexPH9PptiIZDQOzaF4f5tEbJ2+7qvNbtXNBbU3SfmN+fXlWDhg==", + "requires": { + "ts-essentials": "^2.0.3" + } + }, + "use-isomorphic-layout-effect": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.1.tgz", + "integrity": "sha512-L7Evj8FGcwo/wpbv/qvSfrkHFtOpCzvM5yl2KVyDJoylVuSvzphiiasmjgQPttIGBAy2WKiBNR98q8w7PiNgKQ==", + "requires": {} + }, + "use-latest": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.0.tgz", + "integrity": "sha512-d2TEuG6nSLKQLAfW3By8mKr8HurOlTkul0sOpxbClIv4SQ4iOd7BYr7VIzdbktUCnv7dua/60xzd8igMU6jmyw==", + "requires": { + "use-isomorphic-layout-effect": "^1.0.0" + } + }, "use-subscription": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.1.tgz", diff --git a/package.json b/package.json index 89d892da..90f2a4a1 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "react-dom": "17.0.1", "react-markdown": "^6.0.2", "react-syntax-highlighter": "^15.4.3", + "react-textarea-autosize": "^8.3.3", "remark-gfm": "^1.0.0", "remove-markdown": "^0.3.0", "sass": "^1.32.8", diff --git a/pages/post.js b/pages/post.js index b4bf5428..f7f50bc3 100644 --- a/pages/post.js +++ b/pages/post.js @@ -8,6 +8,7 @@ import LayoutCenter from '../components/layout-center' import { ensureProtocol } from '../lib/url' import { useMe } from '../components/me' import ActionTooltip from '../components/action-tooltip' +import TextareaAutosize from 'react-textarea-autosize' export const DiscussionSchema = Yup.object({ title: Yup.string().required('required').trim() @@ -48,8 +49,8 @@ export function DiscussionForm () { text optional} name='text' - as='textarea' - rows={4} + as={TextareaAutosize} + minRows={4} /> post