diff --git a/src/App.tsx b/src/App.tsx index 2d342f2..48d3c8d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,7 +7,7 @@ import { walleStore } from './WallEStore'; import { Header, Icon, Segment } from 'semantic-ui-react'; function mapStateToProps(state: any) { - return { searchProp: state.search, lexicon: state.lexicon }; + return {...state}; } function mapDispachToProps(dispatch: any) { @@ -26,7 +26,7 @@ export class Main extends React.Component { - + ); } diff --git a/src/LexComponents.tsx b/src/LexComponents.tsx index 19105b1..7fbea6e 100644 --- a/src/LexComponents.tsx +++ b/src/LexComponents.tsx @@ -9,10 +9,6 @@ import { import * as XML from 'xml2js'; const { Flex } = require('reflexbox'); -interface LexEditorProps { - fileName: RequestInfo; -} - // container component export class LexEditor extends React.Component { lexData: any; @@ -32,14 +28,9 @@ export class LexEditor extends React.Component { type: 'select' }, stats: { lens: 'stats[0].property[0]._', type: 'text' }, - lang: { lens: '$.id', type: 'select' }, + lang: { lens: '$.id', type: 'select', options: ['en', 'es'] }, }; - constructor(props: LexEditorProps) { - super(props); - this.state = { matchedEntries: [], searchText: '' }; - } - public componentDidMount() { fetch(this.props.fileName) .then((response) => response.text()) @@ -57,14 +48,25 @@ export class LexEditor extends React.Component { .value() ) .value(); - this.selectFields = _.fromPairs(_.keys(this.fieldMetaMap).filter((s) => { - return this.fieldMetaMap[s].type === 'select'; - }).map((s) => { - let lens = this.fieldMetaMap[s].lens; - let selectOptions = _.uniq(this.allEntries.map((q: any) => { - return _.get(q, lens, ''); + let langReducer = ((result: any, q: any) => { + let lang = _.get(q, this.fieldMetaMap.lang.lens, 'en'); + (result[lang] || (result[lang] = [])).push(q); + return result; + }); + let langEntries = _.reduce(this.allEntries, langReducer, {}); + let langs = _.keys(langEntries); + this.selectFields = _.fromPairs(langs.map((lang) => { + let langOpts = _.fromPairs(_.keys(this.fieldMetaMap).filter((s) => { + return this.fieldMetaMap[s].type === 'select'; + }).map((s) => { + let lens = this.fieldMetaMap[s].lens; + let entries = _.get(langEntries, lang, 'en'); + let selectOptions = _.uniq(entries.map((q: any) => { + return _.get(q, lens, ''); + })); + return [s, selectOptions]; })); - return [s, selectOptions]; + return [lang, langOpts]; })); this.forceUpdate(); }); @@ -75,9 +77,9 @@ export class LexEditor extends React.Component { } public render() { - let searchLens = this.fieldMetaMap[this.props.searchProp.searchType].lens; - let searchText = this.props.searchProp.searchValue; - const matchedEntries = _.chain(this.allEntries) + let searchLens = this.fieldMetaMap[this.props.searchState.searchType].lens; + let searchText = this.props.searchState.searchValue; + let matchedEntries = _.chain(this.allEntries) .filter((q: any) => _.get(q, searchLens, '') === searchText) .take(10) .value(); @@ -86,12 +88,11 @@ export class LexEditor extends React.Component { this.handleOnSearch(e)} - // searchValue={searchText} - // searchType={this.props.searchProp.searchType} + // handleOnSearch={(e: any) => this.handleOnSearch(e)} + // searchValue={searchText} + // searchType={this.props.searchProp.searchType} /> { ); } - - private handleOnSearch(searchEvent: any): void { - let searchText = searchEvent.searchValue; - let searchType = searchEvent.searchType; - let searchLens = this.fieldMetaMap[searchEvent.searchType].lens; - let matchedEntries = _.chain(this.allEntries) - .filter((q: any) => _.get(q, searchLens, '') === searchText) - .take(10) - .value(); - this.props.search(searchText, searchType); - this.setState({ ...this.state, matchedEntries, searchText, searchLens }); - } } // export const ReduxLexEditor = connect()(LexEditor); @@ -127,7 +116,7 @@ class LexSearch extends React.Component { this.handleChange(d, true)} - value={this.props.searchProp.searchType} + value={this.props.searchState.searchType} compact={true} selection={true} /> @@ -135,7 +124,7 @@ class LexSearch extends React.Component { type="text" placeholder="Search input" dir="auto" - value={this.props.searchProp.searchValue} + value={this.props.searchState.searchValue} onChange={(e, d) => this.handleChange(d, false)} /> @@ -144,9 +133,9 @@ class LexSearch extends React.Component { private handleChange(e: any, t: boolean) { if (t) { - this.props.searchType(e.value); + this.props.searchForType(e.value); } else { - this.props.searchValue(e.value); + this.props.searchForValue(e.value); } } } @@ -186,6 +175,7 @@ function LexMatches(params: any) { return editEntries; } }; + // const debouncedSelect = _.throttle(selectMode,10000,{leading:true}); return ( diff --git a/src/LexEdit.tsx b/src/LexEdit.tsx index cb1db58..16ceb01 100644 --- a/src/LexEdit.tsx +++ b/src/LexEdit.tsx @@ -9,11 +9,16 @@ import { } from 'semantic-ui-react'; const { Box } = require('reflexbox'); -const imageRoot = '/png/'; - export class LexEdit extends React.Component { + imageRoot = '/png/'; + constructor(props: any) { + super(props); + this.state = { lexItem: this.props.lexItem }; + } public render() { - let li = this.props.lexItem; + let li = this.state.lexItem; + let editLang = _.get(li, this.props.fieldMetaMap.lang.lens, 'en'); + let langSelOpts = _.get(this.props.selectionMeta, editLang, []); let lexFields = _.keys(this.props.fieldMetaMap).map(field => { let lens = this.props.fieldMetaMap[field].lens; let defaultText = _.get(li, lens, ''); @@ -36,7 +41,9 @@ export class LexEdit extends React.Component { ); } else if (this.props.fieldMetaMap[field].type === 'select') { - let selOpts = _.get(this.props.selectionMeta, field, []); + let staticOpts = this.props.fieldMetaMap[field].options; + let fieldOpts = _.get(langSelOpts, field, []); + let selOpts = staticOpts ? staticOpts : fieldOpts; return (