Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

Use same component for form title as Gutenberg does

Browse Source 
Ordinary textarea doesn't support automatic height detection.
[MAILPOET-2451]
This commit is contained in:
Rostislav Wolny
2019-12-02 09:44:39 +01:00
committed by Jack Kitterhing
parent 7bf93b0c37
commit b0a467d156
3 changed files with 32 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
assets/js/src/form_editor/components/form_title.jsx
View File

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
import { useDispatch, useSelect } from '@wordpress/data';
import classnames from 'classnames';
import MailPoet from 'mailpoet';
import Textarea from 'react-autosize-textarea';
export default () => {
const [isSelected, setIsSelected] = useState(false);
@@ -21,12 +22,12 @@ export default () => {
<label htmlFor="post-title" className="screen-reader-text">
{MailPoet.I18n.t('addFormName')}
</label>
<textarea
<Textarea
id="form-title"
className="editor-post-title__input"
placeholder={MailPoet.I18n.t('addFormName')}
data-automation-id="form_title_input"
rows="1"
rows={1}
onFocus={() => setIsSelected(true)}
onKeyPress={() => setIsSelected(false)}
onBlur={() => setIsSelected(false)}

32
package-lock.json generated
View File

@@ -2236,6 +2236,18 @@
"rememo": "^3.0.0",
"tinycolor2": "^1.4.1",
"traverse": "^0.6.6"
},
"dependencies": {
"react-autosize-textarea": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/react-autosize-textarea/-/react-autosize-textarea-3.0.3.tgz",
"integrity": "sha512-iOSZK7RUuJ+iEwkJ9rqYciqtjQgrG1CCRFL6h8Bk61kODnRyEq4tS74IgXpI1t4S6jBBZVm+6ugaU+tWTlVxXg==",
"requires": {
"autosize": "^4.0.0",
"line-height": "^0.3.1",
"prop-types": "^15.5.6"
}
}
}
},
"@wordpress/block-library": {
@@ -2506,6 +2518,18 @@
"redux-optimist": "^1.0.0",
"refx": "^3.0.0",
"rememo": "^3.0.0"
},
"dependencies": {
"react-autosize-textarea": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/react-autosize-textarea/-/react-autosize-textarea-3.0.3.tgz",
"integrity": "sha512-iOSZK7RUuJ+iEwkJ9rqYciqtjQgrG1CCRFL6h8Bk61kODnRyEq4tS74IgXpI1t4S6jBBZVm+6ugaU+tWTlVxXg==",
"requires": {
"autosize": "^4.0.0",
"line-height": "^0.3.1",
"prop-types": "^15.5.6"
}
}
}
},
"@wordpress/element": {
@@ -10553,11 +10577,11 @@
}
},
"react-autosize-textarea": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/react-autosize-textarea/-/react-autosize-textarea-3.0.3.tgz",
"integrity": "sha512-iOSZK7RUuJ+iEwkJ9rqYciqtjQgrG1CCRFL6h8Bk61kODnRyEq4tS74IgXpI1t4S6jBBZVm+6ugaU+tWTlVxXg==",
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/react-autosize-textarea/-/react-autosize-textarea-7.0.0.tgz",
"integrity": "sha512-rGQLpGUaELvzy3NKzp0kkcppaUtZTptsyR0PGuLotaJDjwRbT0DpD000yCzETpXseJQ/eMsyVGDDHXjXP93u8w==",
"requires": {
"autosize": "^4.0.0",
"autosize": "^4.0.2",
"line-height": "^0.3.1",
"prop-types": "^15.5.6"
}

1
package.json
View File

@@ -48,6 +48,7 @@
"parsleyjs": "^2.8.1",
"prop-types": "^15.6.2",
"react": "^16.10.2",
"react-autosize-textarea": "^7.0.0",
"react-dom": "^16.10.2",
"react-html-parser": "^2.0.2",
"react-router-dom": "~5.1.2",