-
Notifications
You must be signed in to change notification settings - Fork 382
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #10543 from notbakaneko/remove-react-autosize-textbox
Remove react-autosize-textarea
- Loading branch information
Showing
10 changed files
with
111 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,13 @@ | ||
| // Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0. | ||
| // See the LICENCE file in the repository root for full licence text. | ||
|
|
||
| import TextareaAutosize from 'components/textarea-autosize'; | ||
| import { CommentableMetaJson } from 'interfaces/comment-json'; | ||
| import { action, computed, makeObservable, observable } from 'mobx'; | ||
| import { observer } from 'mobx-react'; | ||
| import Comment from 'models/comment'; | ||
| import core from 'osu-core-singleton'; | ||
| import * as React from 'react'; | ||
| import TextareaAutosize from 'react-autosize-textarea'; | ||
| import { classWithModifiers, Modifiers } from 'utils/css'; | ||
| import { InputEventType, makeTextAreaHandler, TextAreaCallback } from 'utils/input-handler'; | ||
| import { trans } from 'utils/lang'; | ||
|
|
@@ -115,9 +115,9 @@ export default class CommentEditor extends React.Component<Props> { | |
| } | ||
|
|
||
| <TextareaAutosize | ||
| ref={this.textarea} | ||
| className={`${bn}__message`} | ||
| disabled={!this.canComment || this.posting} | ||
| innerRef={this.textarea} | ||
| onChange={this.onChange} | ||
| onKeyDown={this.handleKeyDown} | ||
| placeholder={this.placeholder} | ||
|
|
@@ -188,7 +188,7 @@ export default class CommentEditor extends React.Component<Props> { | |
| }; | ||
|
|
||
| @action | ||
| private readonly onChange = (e: React.KeyboardEvent<HTMLTextAreaElement>) => { | ||
| private readonly onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => { | ||
| this.message = e.currentTarget.value; | ||
| }; | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| // Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0. | ||
| // See the LICENCE file in the repository root for full licence text. | ||
|
|
||
| import autosize from 'autosize'; | ||
| import React from 'react'; | ||
|
|
||
| interface Props extends React.TextareaHTMLAttributes<HTMLTextAreaElement> { | ||
| async: boolean; | ||
| innerRef?: React.RefObject<HTMLTextAreaElement>; | ||
| maxRows?: number; | ||
| } | ||
|
|
||
| interface State { | ||
| lineHeight?: number; | ||
| } | ||
|
|
||
| export default class TextareaAutosize extends React.Component<Props, State> { | ||
| static readonly defaultProps = { | ||
| async: false, | ||
| rows: 1, | ||
| }; | ||
|
|
||
| private ref = this.props.innerRef ?? React.createRef<HTMLTextAreaElement>(); | ||
|
|
||
| private get maxHeight() { | ||
| return this.props.maxRows != null && this.state.lineHeight != null | ||
| ? this.state.lineHeight * (this.props.maxRows + 1) // additional row to fit maxRows + slight leeway for scrollbar | ||
| : null; | ||
| } | ||
|
|
||
| constructor(props: Props) { | ||
| super(props); | ||
| this.state = {}; | ||
| } | ||
|
|
||
| componentDidMount() { | ||
| if (this.ref.current == null) return; | ||
|
|
||
| if (this.props.maxRows != null || this.props.async) { | ||
| window.setTimeout(() => { | ||
| if (this.ref.current != null) { | ||
| if (this.props.maxRows != null) { | ||
| // getting line-height should be delayed until after turbolinks navigation, otherwise it returns NaN. | ||
| const lineHeight = Math.ceil(parseFloat(window.getComputedStyle(this.ref.current).getPropertyValue('line-height'))); | ||
| this.setState({ lineHeight }); | ||
| } | ||
|
|
||
| autosize(this.ref.current); | ||
| } | ||
| }, 0); | ||
| } else { | ||
| autosize(this.ref.current); | ||
| } | ||
| } | ||
|
|
||
| componentDidUpdate() { | ||
| if (this.ref.current == null) return; | ||
|
|
||
| // autosize sets overflowX to 'scroll' on update unless the existing style is 'hidden'. | ||
| // It doesn't work if the style is set on class, component or didMount. | ||
| if (this.ref.current.style.overflowX !== 'hidden') { | ||
| this.ref.current.style.overflowX = 'hidden'; | ||
| } | ||
|
|
||
| autosize.update(this.ref.current); | ||
| } | ||
|
|
||
| componentWillUnmount() { | ||
| if (this.ref.current == null) return; | ||
| autosize.destroy(this.ref.current); | ||
| } | ||
|
|
||
| render() { | ||
| const { async, innerRef, maxRows, style, ...otherProps } = this.props; | ||
|
|
||
| const maxHeight = this.maxHeight; | ||
|
|
||
| return ( | ||
| <textarea | ||
| ref={this.ref} | ||
| style={maxHeight != null ? { ...style, maxHeight } : style} | ||
| {...otherProps} | ||
| /> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -327,6 +327,11 @@ | |
| resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a" | ||
| integrity sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA== | ||
|
|
||
| "@types/autosize@^4.0.1": | ||
| version "4.0.1" | ||
| resolved "https://registry.yarnpkg.com/@types/autosize/-/autosize-4.0.1.tgz#999a7c305b96766248044ebaac1a0299961f3b61" | ||
| integrity sha512-iPJT/FCaSO79G6j+9n6gmFc5nhxZ1gDrA2UAvb5FslJ6FJQZnDfbBU0qp5vpp0Cbjj7+gOyjuWZ7RrXvRuETaA== | ||
|
|
||
| "@types/bootstrap@^3.3.0": | ||
| version "3.4.0" | ||
| resolved "https://registry.yarnpkg.com/@types/bootstrap/-/bootstrap-3.4.0.tgz#7e74a2421b3984ce53ab459e979a99a78dd802c6" | ||
|
|
@@ -1318,10 +1323,10 @@ autoprefixer@^9.8.6: | |
| postcss "^7.0.32" | ||
| postcss-value-parser "^4.1.0" | ||
|
|
||
| autosize@^4.0.2: | ||
| version "4.0.2" | ||
| resolved "https://registry.yarnpkg.com/autosize/-/autosize-4.0.2.tgz#073cfd07c8bf45da4b9fd153437f5bafbba1e4c9" | ||
| integrity sha512-jnSyH2d+qdfPGpWlcuhGiHmqBJ6g3X+8T+iRwFrHPLVcdoGJE/x6Qicm6aDHfTsbgZKxyV8UU/YB2p4cjKDRRA== | ||
| autosize@^6.0.1: | ||
| version "6.0.1" | ||
| resolved "https://registry.yarnpkg.com/autosize/-/autosize-6.0.1.tgz#64ee78dd7029be959eddd3afbbd33235b957e10f" | ||
| integrity sha512-f86EjiUKE6Xvczc4ioP1JBlWG7FKrE13qe/DxBCpe8GCipCq2nFw73aO8QEBKHfSbYGDN5eB9jXWKen7tspDqQ== | ||
|
|
||
| aws-sign2@~0.7.0: | ||
| version "0.7.0" | ||
|
|
@@ -2002,11 +2007,6 @@ compute-scroll-into-view@^1.0.17: | |
| resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.17.tgz#6a88f18acd9d42e9cf4baa6bec7e0522607ab7ab" | ||
| integrity sha512-j4dx+Fb0URmzbwwMUrhqWM2BEWHdFGx+qZ9qqASHRPqvTYdqvWnHg0H1hIbcyLnvgnoNAVMlwkepyqM3DaIFUg== | ||
|
|
||
| computed-style@~0.1.3: | ||
| version "0.1.4" | ||
| resolved "https://registry.yarnpkg.com/computed-style/-/computed-style-0.1.4.tgz#7f344fd8584b2e425bedca4a1afc0e300bb05d74" | ||
| integrity sha1-fzRP2FhLLkJb7cpKGvwOMAuwXXQ= | ||
|
|
||
| [email protected]: | ||
| version "0.0.1" | ||
| resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b" | ||
|
|
@@ -4953,13 +4953,6 @@ levn@^0.4.1: | |
| prelude-ls "^1.2.1" | ||
| type-check "~0.4.0" | ||
|
|
||
| line-height@^0.3.1: | ||
| version "0.3.1" | ||
| resolved "https://registry.yarnpkg.com/line-height/-/line-height-0.3.1.tgz#4b1205edde182872a5efa3c8f620b3187a9c54c9" | ||
| integrity sha1-SxIF7d4YKHKl76PI9iCzGHqcVMk= | ||
| dependencies: | ||
| computed-style "~0.1.3" | ||
|
|
||
| lines-and-columns@^1.1.6: | ||
| version "1.2.4" | ||
| resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632" | ||
|
|
@@ -6597,7 +6590,7 @@ promise-inflight@^1.0.1: | |
| resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3" | ||
| integrity sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g== | ||
|
|
||
| prop-types@^15.0.0, prop-types@^15.5.6, prop-types@^15.6.2, prop-types@^15.8.1: | ||
| prop-types@^15.0.0, prop-types@^15.6.2, prop-types@^15.8.1: | ||
| version "15.8.1" | ||
| resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" | ||
| integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== | ||
|
|
@@ -6725,15 +6718,6 @@ [email protected]: | |
| iconv-lite "0.4.24" | ||
| unpipe "1.0.0" | ||
|
|
||
| [email protected]: | ||
| version "7.0.0" | ||
| resolved "https://registry.yarnpkg.com/react-autosize-textarea/-/react-autosize-textarea-7.0.0.tgz#4f633e4238de7ba73c1da8fdc307353c50f1c5ab" | ||
| integrity sha512-rGQLpGUaELvzy3NKzp0kkcppaUtZTptsyR0PGuLotaJDjwRbT0DpD000yCzETpXseJQ/eMsyVGDDHXjXP93u8w== | ||
| dependencies: | ||
| autosize "^4.0.2" | ||
| line-height "^0.3.1" | ||
| prop-types "^15.5.6" | ||
|
|
||
| react-dom-factories@^1.0.0: | ||
| version "1.0.2" | ||
| resolved "https://registry.yarnpkg.com/react-dom-factories/-/react-dom-factories-1.0.2.tgz#eb7705c4db36fb501b3aa38ff759616aa0ff96e0" | ||
|
|
||