Fix code style
Remove misguided comma-first style, add floating commas, and improve spacing and parentheses for single-param inline arrow functions.
This commit is contained in:
parent
d4043e2d79
commit
a443fe4c3f
|
@ -1,13 +1,13 @@
|
|||
import Inferno from 'inferno';
|
||||
|
||||
import {LeftColumn} from './structure/LeftColumn';
|
||||
import {RightColumn} from './structure/RightColumn';
|
||||
import { LeftColumn } from './structure/LeftColumn';
|
||||
import { RightColumn } from './structure/RightColumn';
|
||||
|
||||
import {WordForm} from './management/WordForm';
|
||||
import {DictionaryDetails} from './display/DictionaryDetails';
|
||||
import {WordsList} from './display/WordsList';
|
||||
import { WordForm } from './management/WordForm';
|
||||
import { DictionaryDetails } from './display/DictionaryDetails';
|
||||
import { WordsList } from './display/WordsList';
|
||||
|
||||
export const MainDisplay = ({dictionaryInfo, wordsToDisplay, updateDisplay, lastRender}) => {
|
||||
export const MainDisplay = ({ dictionaryInfo, wordsToDisplay, updateDisplay, lastRender }) => {
|
||||
return (
|
||||
<section className='section'>
|
||||
<div className='container'>
|
||||
|
@ -15,28 +15,28 @@ export const MainDisplay = ({dictionaryInfo, wordsToDisplay, updateDisplay, last
|
|||
|
||||
<LeftColumn>
|
||||
<WordForm
|
||||
updateDisplay={() => updateDisplay()}
|
||||
partsOfSpeech={dictionaryInfo.partsOfSpeech}
|
||||
updateDisplay={ () => updateDisplay() }
|
||||
partsOfSpeech={ dictionaryInfo.partsOfSpeech }
|
||||
/>
|
||||
</LeftColumn>
|
||||
|
||||
<RightColumn>
|
||||
<DictionaryDetails
|
||||
name={dictionaryInfo.name}
|
||||
specification={dictionaryInfo.specification}
|
||||
description={dictionaryInfo.description}
|
||||
name={ dictionaryInfo.name }
|
||||
specification={ dictionaryInfo.specification }
|
||||
description={ dictionaryInfo.description }
|
||||
details={{
|
||||
custom: [
|
||||
{
|
||||
name: 'Test Tab'
|
||||
name: 'Test Tab',
|
||||
}
|
||||
]
|
||||
}}
|
||||
/>
|
||||
|
||||
<WordsList
|
||||
lastRender={lastRender}
|
||||
words={wordsToDisplay} />
|
||||
lastRender={ lastRender }
|
||||
words={ wordsToDisplay } />
|
||||
</RightColumn>
|
||||
|
||||
</div>
|
||||
|
|
|
@ -3,10 +3,10 @@ import Component from 'inferno-component';
|
|||
import marked from 'marked';
|
||||
|
||||
const DISPLAY = {
|
||||
NONE: false
|
||||
, DESCRIPTION: 1
|
||||
, DETAILS: 2
|
||||
, STATS: 3
|
||||
NONE: false,
|
||||
DESCRIPTION: 1,
|
||||
DETAILS: 2,
|
||||
STATS: 3,
|
||||
}
|
||||
|
||||
export class DictionaryDetails extends Component {
|
||||
|
@ -14,15 +14,15 @@ export class DictionaryDetails extends Component {
|
|||
super(props);
|
||||
|
||||
this.state = {
|
||||
currentDisplay: DISPLAY.NONE
|
||||
currentDisplay: DISPLAY.NONE,
|
||||
}
|
||||
|
||||
this._descriptionHTML = marked(props.description);
|
||||
}
|
||||
|
||||
componentWillReceiveProps (nextProps) {
|
||||
const currentDescription = this.props.description
|
||||
, nextDescription = nextProps.description;
|
||||
const currentDescription = this.props.description,
|
||||
nextDescription = nextProps.description;
|
||||
|
||||
if (currentDescription !== nextDescription) {
|
||||
this._descriptionHTML = marked(nextProps.description);
|
||||
|
@ -33,7 +33,7 @@ export class DictionaryDetails extends Component {
|
|||
display = (this.state.currentDisplay !== display) ? display : DISPLAY.NONE;
|
||||
|
||||
this.setState({
|
||||
currentDisplay: display
|
||||
currentDisplay: display,
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -61,9 +61,9 @@ export class DictionaryDetails extends Component {
|
|||
if (this.props.details.hasOwnProperty('custom')) {
|
||||
let customTabsJSX = this.props.details.custom.map((tab) => {
|
||||
return (
|
||||
<li key={'customTab' + Date.now().toString()}>
|
||||
<li key={ 'customTab' + Date.now().toString() }>
|
||||
<a>
|
||||
{tab.name}
|
||||
{ tab.name }
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
|
@ -75,7 +75,7 @@ export class DictionaryDetails extends Component {
|
|||
Additional
|
||||
</p>
|
||||
<ul className="menu-list">
|
||||
{customTabsJSX}
|
||||
{ customTabsJSX }
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
|
@ -91,7 +91,7 @@ export class DictionaryDetails extends Component {
|
|||
<li><a>Grammar</a></li>
|
||||
</ul>
|
||||
|
||||
{additionalMenu}
|
||||
{ additionalMenu }
|
||||
|
||||
</aside>
|
||||
);
|
||||
|
@ -106,8 +106,8 @@ export class DictionaryDetails extends Component {
|
|||
|
||||
displayJSX = (
|
||||
<div className='columns'>
|
||||
{menu}
|
||||
{content}
|
||||
{ menu }
|
||||
{ content }
|
||||
</div>
|
||||
);
|
||||
break;
|
||||
|
@ -125,7 +125,7 @@ export class DictionaryDetails extends Component {
|
|||
|
||||
return (
|
||||
<div className='box'>
|
||||
{displayJSX}
|
||||
{ displayJSX }
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
@ -139,7 +139,7 @@ export class DictionaryDetails extends Component {
|
|||
<div className='level-left'>
|
||||
<div className='level-item'>
|
||||
<h2 className='title is-2'>
|
||||
{this.props.name} {this.props.specification}
|
||||
{ this.props.name } { this.props.specification }
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -159,25 +159,25 @@ export class DictionaryDetails extends Component {
|
|||
|
||||
<div className='tabs is-toggle'>
|
||||
<ul>
|
||||
<li className={(this.state.currentDisplay === DISPLAY.DESCRIPTION) ? 'is-active' : null}>
|
||||
<a onClick={this.toggleDisplay.bind(this, DISPLAY.DESCRIPTION)}>
|
||||
<li className={ (this.state.currentDisplay === DISPLAY.DESCRIPTION) ? 'is-active' : null }>
|
||||
<a onClick={ this.toggleDisplay.bind(this, DISPLAY.DESCRIPTION) }>
|
||||
<span>Description</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className={(this.state.currentDisplay === DISPLAY.DETAILS) ? 'is-active' : null}>
|
||||
<a onClick={this.toggleDisplay.bind(this, DISPLAY.DETAILS)}>
|
||||
<li className={ (this.state.currentDisplay === DISPLAY.DETAILS) ? 'is-active' : null }>
|
||||
<a onClick={ this.toggleDisplay.bind(this, DISPLAY.DETAILS) }>
|
||||
<span>Details</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className={(this.state.currentDisplay === DISPLAY.STATS) ? 'is-active' : null}>
|
||||
<a onClick={this.toggleDisplay.bind(this, DISPLAY.STATS)}>
|
||||
<li className={ (this.state.currentDisplay === DISPLAY.STATS) ? 'is-active' : null }>
|
||||
<a onClick={ this.toggleDisplay.bind(this, DISPLAY.STATS) }>
|
||||
<span>Stats</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{this.displayInfo()}
|
||||
{ this.displayInfo() }
|
||||
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -3,16 +3,16 @@ import Component from 'inferno-component';
|
|||
import marked from 'marked';
|
||||
|
||||
import idManager from '../../managers/IDManager';
|
||||
import {Word} from '../../managers/Word';
|
||||
import { Word } from '../../managers/Word';
|
||||
|
||||
import {WordForm} from '../management/WordForm';
|
||||
import { WordForm } from '../management/WordForm';
|
||||
|
||||
export class WordDisplay extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
isEditing: false
|
||||
isEditing: false,
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -22,7 +22,7 @@ export class WordDisplay extends Component {
|
|||
|
||||
<header className='card-header'>
|
||||
<h3 className='card-header-title'>
|
||||
{this.props.word.name}
|
||||
{ this.props.word.name }
|
||||
</h3>
|
||||
</header>
|
||||
|
||||
|
@ -47,14 +47,14 @@ export class WordDisplay extends Component {
|
|||
{(this.props.word.definition)
|
||||
&& (
|
||||
<p>
|
||||
{this.props.word.definition}
|
||||
{ this.props.word.definition }
|
||||
</p>
|
||||
)}
|
||||
|
||||
{(this.props.word.details)
|
||||
&& (
|
||||
<p>
|
||||
{this.props.word.details}
|
||||
{ this.props.word.details }
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
@ -4,7 +4,7 @@ import marked from 'marked';
|
|||
|
||||
import idManager from '../../managers/IDManager';
|
||||
|
||||
import {WordDisplay} from './WordDisplay';
|
||||
import { WordDisplay } from './WordDisplay';
|
||||
|
||||
export class WordsList extends Component {
|
||||
constructor (props) {
|
||||
|
@ -18,8 +18,8 @@ export class WordsList extends Component {
|
|||
{this.props.words
|
||||
&& this.props.words.map(word => {
|
||||
return (
|
||||
<WordDisplay key={`word_${word.id}`}
|
||||
word={word} />
|
||||
<WordDisplay key={ `word_${word.id}` }
|
||||
word={ word } />
|
||||
);
|
||||
})
|
||||
}
|
||||
|
|
|
@ -6,7 +6,7 @@ const digraphs = require('../../../vendor/KeyboardFire/phondue/digraphs.json');
|
|||
|
||||
import Helper from '../../Helper';
|
||||
|
||||
import {IPATable} from './IPATable';
|
||||
import { IPATable } from './IPATable';
|
||||
|
||||
export class IPAField extends Component {
|
||||
/*
|
||||
|
@ -17,9 +17,9 @@ export class IPAField extends Component {
|
|||
super(props);
|
||||
|
||||
this.state = {
|
||||
value: props.value || ''
|
||||
, doShowHelp: false
|
||||
, doShowTable: false
|
||||
value: props.value || '',
|
||||
doShowHelp: false,
|
||||
doShowTable: false,
|
||||
}
|
||||
|
||||
this.field = null;
|
||||
|
@ -27,7 +27,7 @@ export class IPAField extends Component {
|
|||
|
||||
componentWillReceiveProps (nextProps) {
|
||||
this.setState({
|
||||
value: nextProps.value
|
||||
value: nextProps.value,
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -36,19 +36,21 @@ export class IPAField extends Component {
|
|||
return (
|
||||
<div className='modal is-active'>
|
||||
<div className='modal-background'
|
||||
onClick={() => this.setState({ doShowHelp: false })} />
|
||||
onClick={ () => this.setState({ doShowHelp: false }) } />
|
||||
<div className='modal-card'>
|
||||
<header className='modal-card-head'>
|
||||
<h3 className='modal-card-title'>
|
||||
IPA Shortcuts
|
||||
</h3>
|
||||
<button className='delete'
|
||||
onClick={() => this.setState({ doShowHelp: false })} />
|
||||
onClick={ () => this.setState({ doShowHelp: false }) } />
|
||||
</header>
|
||||
<section className='modal-card-body'>
|
||||
|
||||
<div className='content'
|
||||
dangerouslySetInnerHTML={{__html: phondueUsage}} />
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: phondueUsage,
|
||||
}} />
|
||||
|
||||
</section>
|
||||
</div>
|
||||
|
@ -61,9 +63,9 @@ export class IPAField extends Component {
|
|||
if (this.state.doShowTable) {
|
||||
return (
|
||||
<IPATable
|
||||
value={this.state.value}
|
||||
close={() => this.setState({ doShowTable: false })}
|
||||
update={newValue => this.setState({ value: newValue }, this.field.focus())} />
|
||||
value={ this.state.value }
|
||||
close={ () => this.setState({ doShowTable: false }) }
|
||||
update={ (newValue) => this.setState({ value: newValue }, this.field.focus()) } />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -74,28 +76,28 @@ export class IPAField extends Component {
|
|||
<div>
|
||||
<div className='help'>
|
||||
<a className='button is-small'
|
||||
onClick={() => this.setState({ doShowHelp: true })}>
|
||||
onClick={ () => this.setState({ doShowHelp: true }) }>
|
||||
Field Help
|
||||
</a>
|
||||
|
||||
<a className='button is-small'
|
||||
onClick={() => this.setState({ doShowTable: true })}>
|
||||
onClick={ () => this.setState({ doShowTable: true }) }>
|
||||
Show IPA Table
|
||||
</a>
|
||||
</div>
|
||||
{this.showHelp()} {this.showTable()}
|
||||
{ this.showHelp() } { this.showTable() }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
onInput (event) {
|
||||
let val = event.target.value
|
||||
, pos = this.field.selectionStart || val.length;
|
||||
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];
|
||||
const key = event.key,
|
||||
digraph = digraphs[val.substr(pos - 1, 1) + key];
|
||||
|
||||
if (digraph) {
|
||||
event.preventDefault();
|
||||
|
@ -116,14 +118,16 @@ export class IPAField extends Component {
|
|||
<div className='field'>
|
||||
<label className='label'>Pronunciation</label>
|
||||
<p className='control'>
|
||||
<input className='input' type='text' disabled={!!this.props.isDisplayOnly} placeholder='[prə.ˌnʌn.si.ˈeɪ.ʃən]'
|
||||
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)} />
|
||||
<input className='input' type='text'
|
||||
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>
|
||||
{this.showButtons()}
|
||||
{ this.showButtons() }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -56,7 +56,7 @@ export class SearchBox extends Component {
|
|||
<p className='control'>
|
||||
<span className='select'>
|
||||
<select value={ this.state.searchingIn }
|
||||
onChange={event => {
|
||||
onChange={(event) => {
|
||||
this.setState({ searchingIn: event.target.value });
|
||||
}}>
|
||||
<option value='name'>Word</option>
|
||||
|
@ -67,11 +67,11 @@ export class SearchBox extends Component {
|
|||
</p>
|
||||
<p className='control is-expanded'>
|
||||
<input className='input' type='text' placeholder='Search Term'
|
||||
ref={input => {
|
||||
ref={(input) => {
|
||||
this.searchBox = input;
|
||||
}}
|
||||
value={ this.state.searchTerm }
|
||||
onChange={event => {
|
||||
onChange={(event) => {
|
||||
console.log(event);
|
||||
this.setState({ searchTerm: event.target.value });
|
||||
}} />
|
||||
|
@ -115,7 +115,7 @@ export class SearchBox extends Component {
|
|||
<input type='radio' name='searchmethod'
|
||||
value={ METHOD.contains }
|
||||
checked={ this.state.searchMethod === METHOD.contains }
|
||||
onClick={event => {
|
||||
onClick={(event) => {
|
||||
if (event.currentTarget.checked) {
|
||||
this.setState({
|
||||
searchMethod: event.currentTarget.value,
|
||||
|
@ -131,7 +131,7 @@ export class SearchBox extends Component {
|
|||
<input type='radio' name='searchmethod'
|
||||
value={ METHOD.startsWith }
|
||||
checked={ this.state.searchMethod === METHOD.startsWith }
|
||||
onClick={event => {
|
||||
onClick={(event) => {
|
||||
if (event.currentTarget.checked) {
|
||||
this.setState({
|
||||
searchMethod: event.currentTarget.value,
|
||||
|
@ -147,7 +147,7 @@ export class SearchBox extends Component {
|
|||
<input type='radio' name='searchmethod'
|
||||
value={ METHOD.endsWith }
|
||||
checked={ this.state.searchMethod === METHOD.endsWith }
|
||||
onClick={event => {
|
||||
onClick={(event) => {
|
||||
if (event.currentTarget.checked) {
|
||||
this.setState({
|
||||
searchMethod: event.currentTarget.value,
|
||||
|
@ -163,7 +163,7 @@ export class SearchBox extends Component {
|
|||
<input type='radio' name='searchmethod'
|
||||
value={ METHOD.isExactly }
|
||||
checked={ this.state.searchMethod === METHOD.isExactly }
|
||||
onClick={event => {
|
||||
onClick={(event) => {
|
||||
if (event.currentTarget.checked) {
|
||||
this.setState({
|
||||
searchMethod: event.currentTarget.value,
|
||||
|
@ -234,13 +234,13 @@ export class SearchBox extends Component {
|
|||
|
||||
showHeader () {
|
||||
this.setState({
|
||||
showHeader: true
|
||||
showHeader: true,
|
||||
});
|
||||
}
|
||||
|
||||
hideHeader () {
|
||||
this.setState({
|
||||
showHeader: false
|
||||
showHeader: false,
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -1,32 +1,32 @@
|
|||
import Inferno from 'inferno';
|
||||
import Component from 'inferno-component';
|
||||
|
||||
import {IPAField} from './IPAField';
|
||||
import {Word} from '../../managers/Word';
|
||||
import { IPAField } from './IPAField';
|
||||
import { Word } from '../../managers/Word';
|
||||
|
||||
export class WordForm extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
wordName: this.props.name || ''
|
||||
, wordPronunciation: this.props.pronunciation || ''
|
||||
, wordPartOfSpeech: this.props.partOfSpeech || ''
|
||||
, wordDefinition: this.props.definition || ''
|
||||
, wordDetails: this.props.details || ''
|
||||
wordName: this.props.name || '',
|
||||
wordPronunciation: this.props.pronunciation || '',
|
||||
wordPartOfSpeech: this.props.partOfSpeech || '',
|
||||
wordDefinition: this.props.definition || '',
|
||||
wordDetails: this.props.details || '',
|
||||
|
||||
, nameIsValid: true
|
||||
, pronunciationIsValid: true
|
||||
, partOfSpeechIsValid: true
|
||||
, definitionIsValid: true
|
||||
, detailsIsValid: true
|
||||
nameIsValid: true,
|
||||
pronunciationIsValid: true,
|
||||
partOfSpeechIsValid: true,
|
||||
definitionIsValid: true,
|
||||
detailsIsValid: true,
|
||||
}
|
||||
}
|
||||
|
||||
isValidWord () {
|
||||
let nameIsValid = true
|
||||
, definitionIsValid = true
|
||||
, detailsIsValid = true;
|
||||
let nameIsValid = true,
|
||||
definitionIsValid = true,
|
||||
detailsIsValid = true;
|
||||
|
||||
if (this.state.wordName === '') {
|
||||
nameIsValid = false;
|
||||
|
@ -43,9 +43,9 @@ export class WordForm extends Component {
|
|||
}
|
||||
|
||||
this.setState({
|
||||
nameIsValid
|
||||
, definitionIsValid
|
||||
, detailsIsValid
|
||||
nameIsValid,
|
||||
definitionIsValid,
|
||||
detailsIsValid,
|
||||
});
|
||||
|
||||
return nameIsValid == true && definitionIsValid == true && detailsIsValid == true;
|
||||
|
@ -53,11 +53,11 @@ export class WordForm extends Component {
|
|||
|
||||
submitWord () {
|
||||
const word = new Word({
|
||||
name: this.state.wordName
|
||||
, pronunciation: this.state.wordPronunciation
|
||||
, partOfSpeech: this.state.wordPartOfSpeech
|
||||
, definition: this.state.wordDefinition
|
||||
, details: this.state.wordDetails
|
||||
name: this.state.wordName,
|
||||
pronunciation: this.state.wordPronunciation,
|
||||
partOfSpeech: this.state.wordPartOfSpeech,
|
||||
definition: this.state.wordDefinition,
|
||||
details: this.state.wordDetails,
|
||||
});
|
||||
|
||||
|
||||
|
@ -80,11 +80,11 @@ export class WordForm extends Component {
|
|||
|
||||
clearForm () {
|
||||
this.setState({
|
||||
wordName: ''
|
||||
, wordPronunciation: ''
|
||||
, wordPartOfSpeech: ''
|
||||
, wordDefinition: ''
|
||||
, wordDetails: ''
|
||||
wordName: '',
|
||||
wordPronunciation: '',
|
||||
wordPartOfSpeech: '',
|
||||
wordDefinition: '',
|
||||
wordDetails: '',
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -94,9 +94,9 @@ export class WordForm extends Component {
|
|||
<div className='field'>
|
||||
<label className='label'>Word</label>
|
||||
<p className='control'>
|
||||
<input className={`input${(!this.state.nameIsValid) ? ' is-danger' : ''}`}
|
||||
<input className={ `input${(!this.state.nameIsValid) ? ' is-danger' : ''}` }
|
||||
type='text' placeholder='Required'
|
||||
value={this.state.wordName}
|
||||
value={ this.state.wordName }
|
||||
onChange={(event) => {
|
||||
this.setState({ wordName: event.target.value });
|
||||
}} />
|
||||
|
@ -107,21 +107,23 @@ export class WordForm extends Component {
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<IPAField value={this.state.wordPronunciation}
|
||||
onChange={newValue => this.setState({ wordPronunciation: newValue })} />
|
||||
<IPAField value={ this.state.wordPronunciation }
|
||||
onChange={ (newValue) => this.setState({ wordPronunciation: newValue }) } />
|
||||
|
||||
<div className='field'>
|
||||
<label className='label'>Part of Speech</label>
|
||||
<p className='control'>
|
||||
<span className='select'>
|
||||
<select value={this.state.wordPartOfSpeech}
|
||||
onChange={event => {
|
||||
<select value={ this.state.wordPartOfSpeech }
|
||||
onChange={(event) => {
|
||||
this.setState({ wordPartOfSpeech: event.target.value });
|
||||
}}>
|
||||
<option value=''></option>
|
||||
{this.props.partsOfSpeech.map((partOfSpeech) => {
|
||||
return (
|
||||
<option value={partOfSpeech}>{partOfSpeech}</option>
|
||||
<option value={ partOfSpeech }>
|
||||
{ partOfSpeech }
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</select>
|
||||
|
@ -132,9 +134,9 @@ export class WordForm extends Component {
|
|||
<div className='field'>
|
||||
<label className='label'>Definition</label>
|
||||
<p className='control'>
|
||||
<input className={`input${(!this.state.definitionIsValid) ? ' is-danger' : ''}`}
|
||||
<input className={ `input${(!this.state.definitionIsValid) ? ' is-danger' : ''}` }
|
||||
type='text' placeholder='Equivalent word(s)'
|
||||
value={this.state.wordDefinition}
|
||||
value={ this.state.wordDefinition }
|
||||
onChange={(event) => {
|
||||
this.setState({ wordDefinition: event.target.value })
|
||||
}} />
|
||||
|
@ -150,9 +152,9 @@ export class WordForm extends Component {
|
|||
<div className='field'>
|
||||
<label className='label'>Details</label>
|
||||
<p className='control'>
|
||||
<textarea className={`textarea${(!this.state.detailsIsValid) ? ' is-danger' : ''}`}
|
||||
<textarea className={ `textarea${(!this.state.detailsIsValid) ? ' is-danger' : ''}` }
|
||||
placeholder='Explanation of word (Markdown enabled)'
|
||||
value={this.state.wordDetails}
|
||||
value={ this.state.wordDetails }
|
||||
onChange={(event) => {
|
||||
this.setState({ wordDetails: event.target.value });
|
||||
}} />
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import Inferno from 'inferno';
|
||||
import Component from 'inferno-component';
|
||||
|
||||
import {SearchBox} from '../management/SearchBox';
|
||||
import { SearchBox } from '../management/SearchBox';
|
||||
|
||||
export class Header extends Component {
|
||||
constructor (props) {
|
||||
|
@ -25,12 +25,12 @@ export class Header extends Component {
|
|||
<div className='nav-item'>
|
||||
<SearchBox
|
||||
partsOfSpeech={ this.props.partsOfSpeech }
|
||||
search={ searchConfig => this.props.search(searchConfig) } />
|
||||
search={ (searchConfig) => this.props.search(searchConfig) } />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span className={`nav-toggle${this.state.displayNavMenu ? ' is-active' : ''}`}
|
||||
onClick={() => this.setState({ displayNavMenu: !this.state.displayNavMenu })}>
|
||||
onClick={ () => this.setState({ displayNavMenu: !this.state.displayNavMenu }) }>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
|
|
|
@ -9,7 +9,7 @@ export class LeftColumn extends Component {
|
|||
render () {
|
||||
return (
|
||||
<div className='column is-one-third'>
|
||||
{this.props.children}
|
||||
{ this.props.children }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -9,7 +9,7 @@ export class RightColumn extends Component {
|
|||
render () {
|
||||
return (
|
||||
<div className='column is-two-thirds'>
|
||||
{this.props.children}
|
||||
{ this.props.children }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -10,9 +10,9 @@ if (process.env.NODE_ENV !== 'production') {
|
|||
require('inferno-devtools');
|
||||
}
|
||||
|
||||
import {Header} from './components/structure/Header';
|
||||
import {MainDisplay} from './components/MainDisplay';
|
||||
import {Footer} from './components/structure/Footer';
|
||||
import { Header } from './components/structure/Header';
|
||||
import { MainDisplay } from './components/MainDisplay';
|
||||
import { Footer } from './components/structure/Footer';
|
||||
|
||||
class App extends Component {
|
||||
constructor (props) {
|
||||
|
@ -29,7 +29,7 @@ class App extends Component {
|
|||
}
|
||||
|
||||
get dictionaryInfo () {
|
||||
const {name, specification, description, partsOfSpeech} = this.state;
|
||||
const { name, specification, description, partsOfSpeech } = this.state;
|
||||
const info = {
|
||||
name,
|
||||
specification,
|
||||
|
@ -50,7 +50,7 @@ class App extends Component {
|
|||
// const {searchIn, searchTerm, filteredPartsOfSpeech} = this.state.searchConfig;
|
||||
|
||||
// TODO: Sort out searching to remove this temporary solution.
|
||||
dictionary.wordsPromise.then(words => {
|
||||
dictionary.wordsPromise.then((words) => {
|
||||
this.setState({
|
||||
displayedWords: words,
|
||||
})
|
||||
|
@ -68,7 +68,7 @@ class App extends Component {
|
|||
<div>
|
||||
<Header
|
||||
partsOfSpeech={ this.state.partsOfSpeech }
|
||||
search={ searchConfig => this.search(searchConfig) } />
|
||||
search={ (searchConfig) => this.search(searchConfig) } />
|
||||
|
||||
<MainDisplay
|
||||
dictionaryInfo={ this.dictionaryInfo }
|
||||
|
|
|
@ -4,10 +4,10 @@ import wordDb from './WordDatabase';
|
|||
import idManager from './IDManager';
|
||||
|
||||
const defaultDictionary = {
|
||||
name: 'New'
|
||||
, specification: 'Dictionary'
|
||||
, description: 'A new dictionary.'
|
||||
, partsOfSpeech: ['Noun', 'Adjective', 'Verb']
|
||||
name: 'New',
|
||||
specification: 'Dictionary',
|
||||
description: 'A new dictionary.',
|
||||
partsOfSpeech: ['Noun', 'Adjective', 'Verb'],
|
||||
}
|
||||
|
||||
class DictionaryData {
|
||||
|
@ -80,8 +80,8 @@ class DictionaryData {
|
|||
if (Array.isArray(partOfSpeech)) {
|
||||
words = words.anyOf(partOfSpeech);
|
||||
} else {
|
||||
assert(typeof partOfSpeech === 'string'
|
||||
, 'You must use either a string or an array when searching for words with a particular part of speech');
|
||||
assert(typeof partOfSpeech === 'string',
|
||||
'You must use either a string or an array when searching for words with a particular part of speech');
|
||||
|
||||
words = words.equals(partOfSpeech);
|
||||
}
|
||||
|
|
|
@ -3,7 +3,7 @@ import store from 'store';
|
|||
import wordDb from './WordDatabase';
|
||||
|
||||
export class Word {
|
||||
constructor ({name = '', pronunciation = '', partOfSpeech = '', definition = '', details = ''}) {
|
||||
constructor ({ name = '', pronunciation = '', partOfSpeech = '', definition = '', details = '' }) {
|
||||
this.name = name;
|
||||
this.pronunciation = pronunciation;
|
||||
this.partOfSpeech = partOfSpeech;
|
||||
|
@ -17,7 +17,7 @@ export class Word {
|
|||
this.modifiedTime = null;
|
||||
|
||||
return wordDb.words.add(this)
|
||||
.then(id => {
|
||||
.then((id) => {
|
||||
this.id = id;
|
||||
console.log('Word added successfully');
|
||||
})
|
||||
|
@ -31,7 +31,7 @@ export class Word {
|
|||
this.modifiedTime = timestampInSeconds;
|
||||
|
||||
return wordDb.words.put(this, wordId)
|
||||
.then(id => {
|
||||
.then((id) => {
|
||||
console.log('Word modified successfully');
|
||||
})
|
||||
.catch(error => {
|
||||
|
|
|
@ -4,7 +4,7 @@ import {Word} from './Word';
|
|||
|
||||
const db = new Dexie('Lexiconga');
|
||||
db.version(1).stores({
|
||||
words: '++id, name, partOfSpeech, createdTime, modifiedTime'
|
||||
words: '++id, name, partOfSpeech, createdTime, modifiedTime',
|
||||
});
|
||||
|
||||
if (['emptydb', 'donotsave'].includes(process.env.NODE_ENV)) {
|
||||
|
|
|
@ -13,97 +13,101 @@ const BUILD_DIR = path.resolve(__dirname, 'public');
|
|||
const APP_DIR = path.resolve(__dirname, 'src');
|
||||
|
||||
const webpackConfig = {
|
||||
entry: APP_DIR + '/index.jsx'
|
||||
, output: {
|
||||
path: BUILD_DIR
|
||||
, filename: 'lexiconga.js'
|
||||
}
|
||||
, module: {
|
||||
entry: APP_DIR + '/index.jsx',
|
||||
|
||||
output: {
|
||||
path: BUILD_DIR,
|
||||
filename: 'lexiconga.js',
|
||||
},
|
||||
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: (/\.scss$/)
|
||||
, exclude: (/node_modules/)
|
||||
, use: [
|
||||
'style-loader'
|
||||
, 'css-loader'
|
||||
, {
|
||||
loader: 'sass-loader'
|
||||
, options: {
|
||||
test: (/\.scss$/),
|
||||
exclude: (/node_modules/),
|
||||
use: [
|
||||
'style-loader',
|
||||
'css-loader',
|
||||
{
|
||||
loader: 'sass-loader',
|
||||
options: {
|
||||
file: './src/sass/styles.scss',
|
||||
outFile: './public/styles.css',
|
||||
outputStyle: 'compressed'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
, {
|
||||
test: (/\.html$/)
|
||||
, exclude: (/node_modules/)
|
||||
, use: [
|
||||
'html-loader'
|
||||
]
|
||||
}
|
||||
, {
|
||||
test: (/\.txt$/)
|
||||
, exclude: (/node_modules/)
|
||||
, use: [
|
||||
outputStyle: 'compressed',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: (/\.html$/),
|
||||
exclude: (/node_modules/),
|
||||
use: [
|
||||
'html-loader',
|
||||
],
|
||||
},
|
||||
{
|
||||
test: (/\.txt$/),
|
||||
exclude: (/node_modules/),
|
||||
use: [
|
||||
'raw-loader'
|
||||
]
|
||||
}
|
||||
, {
|
||||
test: (/\.jsx?$/)
|
||||
, exclude: (/node_modules/)
|
||||
, use: [
|
||||
],
|
||||
},
|
||||
{
|
||||
test: (/\.jsx?$/),
|
||||
exclude: (/node_modules/),
|
||||
use: [
|
||||
{
|
||||
loader: 'babel-loader'
|
||||
, options: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: [
|
||||
'es2016'
|
||||
]
|
||||
, plugins: [
|
||||
'inferno'
|
||||
]
|
||||
}
|
||||
'es2016',
|
||||
],
|
||||
plugins: [
|
||||
'inferno',
|
||||
],
|
||||
},
|
||||
}
|
||||
]
|
||||
}
|
||||
, {
|
||||
test: (/\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/)
|
||||
, use: [
|
||||
],
|
||||
},
|
||||
{
|
||||
test: (/\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/),
|
||||
use: [
|
||||
{
|
||||
loader: 'url-loader'
|
||||
, options: {
|
||||
limit: 100000
|
||||
, mimetype: 'application/font-woff'
|
||||
, name: './assets/fonts/[name].[ext]'
|
||||
loader: 'url-loader',
|
||||
options: {
|
||||
limit: 100000,
|
||||
mimetype: 'application/font-woff',
|
||||
name: './assets/fonts/[name].[ext]',
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
, resolve: {
|
||||
},
|
||||
|
||||
resolve: {
|
||||
extensions: [
|
||||
'.js'
|
||||
, '.jsx'
|
||||
'.js',
|
||||
'.jsx',
|
||||
]
|
||||
}
|
||||
, plugins: [
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
'NODE_ENV': JSON.stringify(BUILDMODE)
|
||||
}
|
||||
})
|
||||
]
|
||||
'NODE_ENV': JSON.stringify(BUILDMODE),
|
||||
},
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
||||
if (BUILDMODE === 'production') {
|
||||
webpackConfig.plugins.push(
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
mangle: true
|
||||
, compress: {
|
||||
warnings: false
|
||||
}
|
||||
mangle: true,
|
||||
compress: {
|
||||
warnings: false,
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
|
|
Loading…
Reference in New Issue