Swap out other textareas with LargeTextArea
This commit is contained in:
parent
b6789b5826
commit
46ba6cfec1
|
@ -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'>
|
|
||||||
<textarea className='textarea' id='editDescription'
|
|
||||||
placeholder={ `A description of your ${ specification }` }
|
|
||||||
value={ description }
|
value={ description }
|
||||||
|
placeholder='Explanation of word (Markdown enabled)'
|
||||||
onInput={ (event) => {
|
onInput={ (event) => {
|
||||||
editDictionaryModal.setState({
|
editDictionaryModal.setState({
|
||||||
description: event.target.value,
|
description: event.target.value,
|
||||||
hasChanged: event.target.value != editDictionaryModal.props.description,
|
hasChanged: event.target.value != editDictionaryModal.props.description,
|
||||||
});
|
});
|
||||||
}}
|
}} />
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Custom alphabetical order is restricted to paid. */}
|
{/* Custom alphabetical order is restricted to paid. */}
|
||||||
|
|
||||||
|
|
|
@ -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,15 +184,13 @@ 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'>
|
|
||||||
<textarea className='textarea' id='editExceptions'
|
|
||||||
placeholder='Vowel blends are not allowed in the onset, and [e], including blends with [e] comprising it, is not allowed in the coda.'
|
placeholder='Vowel blends are not allowed in the onset, and [e], including blends with [e] comprising it, is not allowed in the coda.'
|
||||||
value={ exceptions }
|
value={ exceptions }
|
||||||
onInput={ (event) => {
|
onInput={ (event) => {
|
||||||
|
@ -199,10 +198,7 @@ export const EditLinguisticsForm = (props) => {
|
||||||
exceptions: event.target.value,
|
exceptions: event.target.value,
|
||||||
hasChanged: event.target.value != editDictionaryModal.props.details.phonology.phonotactics.exceptions,
|
hasChanged: event.target.value != editDictionaryModal.props.details.phonology.phonotactics.exceptions,
|
||||||
});
|
});
|
||||||
}}
|
}} />
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -212,17 +208,15 @@ 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) => {
|
||||||
|
@ -230,13 +224,10 @@ export const EditLinguisticsForm = (props) => {
|
||||||
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>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue