import Inferno from 'inferno';
import { Component } from 'inferno';
import PropTypes from 'prop-types';
const phondueUsage = require('../../../vendor/KeyboardFire/phondue/usage.html');
const digraphs = require('../../../vendor/KeyboardFire/phondue/digraphs.json');
import { IPATable } from './IPATable';
export class IPAField extends Component {
/*
Modified from KeyboardFire's Phondue project (https://github.com/KeyboardFire/phondue)
to fit React/Inferno and Lexiconga
*/
constructor (props) {
super(props);
PropTypes.checkPropTypes({
value: PropTypes.string.isRequired,
id: PropTypes.string,
label: PropTypes.string,
helpText: PropTypes.string,
placeholder: PropTypes.string,
isDisplayOnly: PropTypes.bool,
onInput: PropTypes.func,
onChange: PropTypes.func,
}, props, 'prop', 'IPAField');
this.state = {
value: props.value || '',
doShowHelp: false,
doShowTable: false,
}
this.field = null;
}
componentWillReceiveProps (nextProps) {
this.setState({
value: nextProps.value,
});
}
showHelp () {
if (this.state.doShowHelp) {
return (
this.setState({ doShowHelp: false }) } />
IPA Shortcuts
);
}
}
showTable () {
if (this.state.doShowTable) {
return (
this.setState({ doShowTable: false }, () => this.field.focus()) }
update={ (newValue) => this.setState({ value: newValue }, this.field.focus()) } />
);
}
}
showButtons () {
if (!this.props.isDisplayOnly) {
return (
{ this.showHelp() } { this.showTable() }
);
}
}
onInput (event) {
let val = event.target.value,
pos = this.field.selectionStart || val.length;
if (event.key) {
const key = event.key,
digraph = digraphs[val.substr(pos - 1, 1) + key];
if (digraph) {
event.preventDefault();
val = val.slice(0, pos - 1) + digraph + val.slice(pos);
}
}
if (val !== this.state.value) {
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 (
{
this.props.helpText
&& (
{ this.props.helpText }
)
}
this.field = input }
value={ this.state.value }
onInput={ (event) => this.onInput(event) }
onKeyDown={ (event) => this.onInput(event) }
onChange={ () => this.onChange() } />
{ this.showButtons() }
);
}
}