ekzyis
/
stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

auto grow textareas

This commit is contained in:
keyan 2021-07-16 12:32:54 -05:00
parent ae9b4423a4
commit d083845a77
5 changed files with 107 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/header.js
View File

@ -92,7 +92,7 @@ export default function Header () {
const strike = useLightning()
useEffect(() => {
setTimeout(strike, randInRange(3000, 10000))
}, [])
}, [router.asPath])
return path !== '/login' && <Button id='login' onClick={signIn}>login</Button>
}
}

5
components/reply.js
View File

@ -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 }) {
>
<MarkdownInput
name='text'
as='textarea'
rows={4}
as={TextareaAutosize}
minRows={4}
autoFocus={autoFocus}
required
hint={me?.freeComments ? <span className='text-success'>{me.freeComments} free comments left</span> : null}

99
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

5
pages/post.js
View File

@ -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 () {
<MarkdownInput
label={<>text <small className='text-muted ml-2'>optional</small></>}
name='text'
as='textarea'
rows={4}
as={TextareaAutosize}
minRows={4}
/>
<ActionTooltip>
<SubmitButton variant='secondary' className='mt-2'>post</SubmitButton>