Alamantus/Lexiconga
1
0
Fork 0
mirror of https://github.com/Alamantus/Lexiconga.git synced 2025-11-04 02:07:05 +01:00
Code Issues Releases Activity

Expand IPAField customization options

Browse source
This commit is contained in:
Robbie Antenesse 2017-08-20 14:44:12 -06:00
parent 9b7e797aef
commit 53bf992226
1 changed files with 26 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/components/management/IPAField.jsx
View file

@ -109,24 +109,44 @@ export class IPAField extends Component {
this.setState({ value: val }, () => {
this.field.focus();
this.field.setSelectionRange(pos, pos);
if (this.props.onInput) {
this.props.onInput(this.state.value);
}
});
}
}
onChange () {
if (this.props.onChange) {
this.props.onChange(this.state.value);
}
}
render () {
return (
<div className='field'>
<label className='label'>Pronunciation</label>
<p className='control'>
<input className='input' type='text'
placeholder='[prə.ˌnʌn.si.ˈeɪ.ʃən]'
<label className='label' htmlFor={ this.props.id || null }>
{ this.props.label || 'Pronunciation' }
</label>
{
this.props.helpText
&& (
<p className='help'>
{ this.props.helpText }
</p>
)
}
<div className='control'>
<input className='input' id={ this.props.id || null } type='text'
placeholder={ this.props.placeholder || '[prə.ˌnʌn.si.ˈeɪ.ʃən]' }
disabled={ !!this.props.isDisplayOnly }
ref={ (input) => this.field = input }
value={ this.state.value }
onInput={ (event) => this.onInput(event) }
onKeyDown={ (event) => this.onInput(event) }
onChange={ () => this.props.onChange(this.state.value) } />
</p>
onChange={ () => this.onChange() } />
</div>
{ this.showButtons() }
</div>
);