Swap out other textareas with LargeTextArea

This commit is contained in:
Robbie Antenesse 2017-12-11 19:05:11 -07:00
parent b6789b5826
commit 46ba6cfec1
2 changed files with 52 additions and 64 deletions

View File

@ -1,6 +1,8 @@
import Inferno from 'inferno'; import Inferno from 'inferno';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { LargeTextArea } from '../LargeTextArea';
export const EditDictionaryForm = (props) => { export const EditDictionaryForm = (props) => {
PropTypes.checkPropTypes({ PropTypes.checkPropTypes({
editDictionaryModal: PropTypes.object.isRequired, editDictionaryModal: PropTypes.object.isRequired,
@ -39,9 +41,9 @@ export const EditDictionaryForm = (props) => {
<label className='label' htmlFor='editSpecification'> <label className='label' htmlFor='editSpecification'>
Specification Specification
</label> </label>
<p className='help'> <div className='help'>
What this collection of words should be referred to as, i.e. "Dictionary," "Word List", etc. What this collection of words should be referred to as, i.e. "Dictionary," "Word List", etc.
</p> </div>
<div className='control'> <div className='control'>
<input className='input' id='editSpecification' type='text' <input className='input' id='editSpecification' type='text'
placeholder='Dictionary' placeholder='Dictionary'
@ -56,26 +58,21 @@ export const EditDictionaryForm = (props) => {
</div> </div>
</div> </div>
<div className='field'> <LargeTextArea
<label className='label' htmlFor='editDescription'> label='Description'
Description helpText={[
</label> 'A description of your dictionary, ',
<p className='help'> <a href={ MARKDOWN_LINK } target='_blank'>Markdown</a>,
A description of your dictionary, <a href={ MARKDOWN_LINK } target='_blank'>Markdown</a> enabled ' enabled'
</p> ]}
<div className='control'> value={ description }
<textarea className='textarea' id='editDescription' placeholder='Explanation of word (Markdown enabled)'
placeholder={ `A description of your ${ specification }` } onInput={ (event) => {
value={ description } editDictionaryModal.setState({
onInput={ (event) => { description: event.target.value,
editDictionaryModal.setState({ hasChanged: event.target.value != editDictionaryModal.props.description,
description: event.target.value, });
hasChanged: event.target.value != editDictionaryModal.props.description, }} />
});
}}
/>
</div>
</div>
{/* Custom alphabetical order is restricted to paid. */} {/* Custom alphabetical order is restricted to paid. */}

View File

@ -2,6 +2,7 @@ import Inferno from 'inferno';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { IPAField } from '../IPAField'; import { IPAField } from '../IPAField';
import { LargeTextArea } from '../LargeTextArea';
export const EditLinguisticsForm = (props) => { export const EditLinguisticsForm = (props) => {
PropTypes.checkPropTypes({ PropTypes.checkPropTypes({
@ -183,26 +184,21 @@ export const EditLinguisticsForm = (props) => {
<div className='columns'> <div className='columns'>
<div className='column'> <div className='column'>
<div className='field'> <LargeTextArea
<label className='label' htmlFor='editExceptions'> label='Exceptions'
Exceptions helpText={[
</label> 'Any exceptions for your phonotactics rules, ',
<p className='help'> <a href={ MARKDOWN_LINK } target='_blank'>Markdown</a>,
Any exceptions for your phonotactics rules, <a href={ MARKDOWN_LINK } target='_blank'>Markdown</a> enabled ' enabled',
</p> ]}
<div className='control'> placeholder='Vowel blends are not allowed in the onset, and [e], including blends with [e] comprising it, is not allowed in the coda.'
<textarea className='textarea' id='editExceptions' value={ exceptions }
placeholder='Vowel blends are not allowed in the onset, and [e], including blends with [e] comprising it, is not allowed in the coda.' onInput={ (event) => {
value={ exceptions } editDictionaryModal.setState({
onInput={ (event) => { exceptions: event.target.value,
editDictionaryModal.setState({ hasChanged: event.target.value != editDictionaryModal.props.details.phonology.phonotactics.exceptions,
exceptions: event.target.value, });
hasChanged: event.target.value != editDictionaryModal.props.details.phonology.phonotactics.exceptions, }} />
});
}}
/>
</div>
</div>
</div> </div>
</div> </div>
@ -212,30 +208,25 @@ export const EditLinguisticsForm = (props) => {
</h4> </h4>
<div className='columns'> <div className='columns'>
<div className='column'> <div className='column'>
<div className='field'>
<label className='label' htmlFor='editOrthographyNotes'> <LargeTextArea
Orthography Notes label='Orthography Notes'
</label> helpText={[
<p className='help'> 'Any notes on orthography or how phonemes are written, ',
Any notes on orthography or how phonemes are written, <a href={ MARKDOWN_LINK } target='_blank'>Markdown</a> enabled <a href={ MARKDOWN_LINK } target='_blank'>Markdown</a>,
</p> ' enabled',
<div className='control'> ]}
<textarea className='textarea' id='editOrthographyNotes' placeholder={ `- **m** = [ɱ]\n- **sh** = [ʃ]\n- **r** = [ʁ]\n...` }
placeholder={ `- **m** = [ɱ]\n- **sh** = [ʃ]\n- **r** = [ʁ]\n...` } value={ orthographyNotes }
value={ orthographyNotes } onInput={ (event) => {
onInput={ (event) => { editDictionaryModal.setState({
editDictionaryModal.setState({ orthographyNotes: event.target.value,
orthographyNotes: event.target.value, hasChanged: event.target.value != editDictionaryModal.props.details.orthography.notes,
hasChanged: event.target.value != editDictionaryModal.props.details.orthography.notes, });
}); }} />
}}
/>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>