Add useIpaPronunciationField

option to prevent IPA transformation in pronunciation field.
This commit is contained in:
Robbie Antenesse 2018-05-18 11:44:14 -06:00
parent f60d374dc7
commit c496bd77c0
6 changed files with 31 additions and 13 deletions

View File

@ -22,6 +22,7 @@ export class MainDisplay extends Component {
wordsInCurrentList: PropTypes.number, wordsInCurrentList: PropTypes.number,
currentPage: PropTypes.number, currentPage: PropTypes.number,
itemsPerPage: PropTypes.number, itemsPerPage: PropTypes.number,
useIpaPronunciationField: PropTypes.bool,
stats: PropTypes.object.isRequired, stats: PropTypes.object.isRequired,
setPage: PropTypes.func.isRequired, setPage: PropTypes.func.isRequired,
updateDisplay: PropTypes.func.isRequired, updateDisplay: PropTypes.func.isRequired,
@ -63,6 +64,7 @@ export class MainDisplay extends Component {
wordsInCurrentList, wordsInCurrentList,
currentPage, currentPage,
itemsPerPage, itemsPerPage,
useIpaPronunciationField,
stats, stats,
setPage, setPage,
updateDisplay, updateDisplay,
@ -84,6 +86,7 @@ export class MainDisplay extends Component {
closeWordForm={ this.closeWordForm.bind(this) } closeWordForm={ this.closeWordForm.bind(this) }
> >
<WordForm <WordForm
useIpaField={ useIpaPronunciationField }
updateDisplay={ updateDisplay } updateDisplay={ updateDisplay }
/> />
</LeftColumn> </LeftColumn>
@ -121,6 +124,7 @@ export class MainDisplay extends Component {
isLoadingWords={ isLoadingWords } isLoadingWords={ isLoadingWords }
words={ wordsToDisplay } words={ wordsToDisplay }
adsEveryXWords={ 10 } adsEveryXWords={ 10 }
useIpaFieldOnEdit={ useIpaPronunciationField }
updateDisplay={ updateDisplay } /> updateDisplay={ updateDisplay } />
<Pagination <Pagination

View File

@ -17,6 +17,7 @@ export class WordDisplay extends Component {
PropTypes.checkPropTypes({ PropTypes.checkPropTypes({
word: PropTypes.object.isRequired, word: PropTypes.object.isRequired,
useIpaFieldOnEdit: PropTypes.bool,
updateDisplay: PropTypes.func.isRequired, updateDisplay: PropTypes.func.isRequired,
}, props, 'prop', 'WordDisplay'); }, props, 'prop', 'WordDisplay');
@ -65,12 +66,13 @@ export class WordDisplay extends Component {
render () { render () {
const { menuIsOpen, isEditing } = this.state; const { menuIsOpen, isEditing } = this.state;
const { word, updateDisplay } = this.props; const { word, useIpaFieldOnEdit, updateDisplay } = this.props;
if (isEditing) { if (isEditing) {
return ( return (
<WordForm <WordForm
word={word} word={word}
useIpaField={ useIpaFieldOnEdit }
updateDisplay={updateDisplay} updateDisplay={updateDisplay}
callback={() => { callback={() => {
this.setState({ this.setState({

View File

@ -16,6 +16,7 @@ export class WordsList extends Component {
isLoadingWords: PropTypes.bool, isLoadingWords: PropTypes.bool,
adsEveryXWords: PropTypes.number, adsEveryXWords: PropTypes.number,
words: PropTypes.array, words: PropTypes.array,
useIpaFieldOnEdit: PropTypes.bool,
updateDisplay: PropTypes.func.isRequired, updateDisplay: PropTypes.func.isRequired,
}, props, 'prop', 'WordList'); }, props, 'prop', 'WordList');
} }
@ -41,6 +42,7 @@ export class WordsList extends Component {
} }
<WordDisplay word={ word } <WordDisplay word={ word }
useIpaFieldOnEdit={ this.props.useIpaFieldOnEdit }
updateDisplay={ this.props.updateDisplay } /> updateDisplay={ this.props.updateDisplay } />
</div> </div>
); );

View File

@ -22,6 +22,7 @@ export class IPAField extends Component {
helpText: PropTypes.string, helpText: PropTypes.string,
placeholder: PropTypes.string, placeholder: PropTypes.string,
isDisplayOnly: PropTypes.bool, isDisplayOnly: PropTypes.bool,
preventIPA: PropTypes.bool,
onInput: PropTypes.func, onInput: PropTypes.func,
onChange: PropTypes.func, onChange: PropTypes.func,
}, props, 'prop', 'IPAField'); }, props, 'prop', 'IPAField');
@ -102,7 +103,9 @@ export class IPAField extends Component {
} }
onInput (event) { onInput (event) {
let val = event.target.value, let val = event.target.value;
let pos;
if (!this.props.preventIPA) {
pos = this.field.selectionStart || val.length; pos = this.field.selectionStart || val.length;
if (event.key) { if (event.key) {
@ -114,11 +117,14 @@ export class IPAField extends Component {
val = val.slice(0, pos - 1) + digraph + val.slice(pos); val = val.slice(0, pos - 1) + digraph + val.slice(pos);
} }
} }
}
if (val !== this.state.value) { if (val !== this.state.value) {
this.setState({ value: val }, () => { this.setState({ value: val }, () => {
if (!this.props.preventIPA) {
this.field.focus(); this.field.focus();
this.field.setSelectionRange(pos, pos); this.field.setSelectionRange(pos, pos);
}
if (this.props.onInput) { if (this.props.onInput) {
this.props.onInput(this.state.value); this.props.onInput(this.state.value);
@ -149,7 +155,7 @@ export class IPAField extends Component {
} }
<div className='control'> <div className='control'>
<input className='input' id={ this.props.id || null } type='text' <input className='input' id={ this.props.id || null } type='text'
placeholder={ this.props.placeholder || '[prə.ˌnʌn.si.ˈeɪ.ʃən]' } placeholder={ this.props.placeholder || (!this.props.preventIPA ? '[prə.ˌnʌn.si.ˈeɪ.ʃən]' : 'pronunciation') }
disabled={ !!this.props.isDisplayOnly } disabled={ !!this.props.isDisplayOnly }
ref={ (input) => this.field = input } ref={ (input) => this.field = input }
value={ this.state.value } value={ this.state.value }
@ -157,7 +163,7 @@ export class IPAField extends Component {
onKeyDown={ (event) => this.onInput(event) } onKeyDown={ (event) => this.onInput(event) }
onChange={ () => this.onChange() } /> onChange={ () => this.onChange() } />
</div> </div>
{ this.showButtons() } { !this.props.preventIPA && this.showButtons() }
</div> </div>
); );
} }

View File

@ -13,6 +13,7 @@ export class WordForm extends Component {
PropTypes.checkPropTypes({ PropTypes.checkPropTypes({
word: PropTypes.object, word: PropTypes.object,
useIpaField: PropTypes.bool.isRequired,
callback: PropTypes.func, callback: PropTypes.func,
updateDisplay: PropTypes.func, updateDisplay: PropTypes.func,
}, props, 'prop', 'WordForm'); }, props, 'prop', 'WordForm');
@ -120,6 +121,7 @@ export class WordForm extends Component {
</div> </div>
<IPAField value={ this.state.wordPronunciation } <IPAField value={ this.state.wordPronunciation }
preventIPA={ !this.props.useIpaField }
onChange={ (newValue) => this.setState({ wordPronunciation: newValue }) } /> onChange={ (newValue) => this.setState({ wordPronunciation: newValue }) } />
<div className='field'> <div className='field'>

View File

@ -38,6 +38,7 @@ class App extends Component {
displayedWords: [], displayedWords: [],
currentPage: 0, currentPage: 0,
itemsPerPage: 30, itemsPerPage: 30,
useIpaPronunciationField: true,
searchConfig: { searchConfig: {
searchingIn: 'name', searchingIn: 'name',
searchMethod: SEARCH_METHOD.contains, searchMethod: SEARCH_METHOD.contains,
@ -218,6 +219,7 @@ class App extends Component {
wordsInCurrentList={ this.state.wordsInCurrentList } wordsInCurrentList={ this.state.wordsInCurrentList }
currentPage={ this.state.currentPage } currentPage={ this.state.currentPage }
itemsPerPage={ this.state.itemsPerPage } itemsPerPage={ this.state.itemsPerPage }
useIpaPronunciationField={ this.state.useIpaPronunciationField }
stats={ this.state.stats } stats={ this.state.stats }
setPage={ this.setPage.bind(this) } setPage={ this.setPage.bind(this) }
updateDisplay={ this.updateDisplayedWords.bind(this) } updateDisplay={ this.updateDisplayedWords.bind(this) }