From f60865f64c090154ffbb3eb3cdd8d45f2180d912 Mon Sep 17 00:00:00 2001 From: Malar Kannan Date: Wed, 12 Jul 2017 11:32:01 +0530 Subject: [PATCH] added fieldmetamap to LexEditor --- src/App.tsx | 20 ++++---- src/LexComponents.tsx | 101 ++++++++++++++++++++++++++--------------- src/LexEdit.tsx | 42 ++++++++--------- src/reducers/index.tsx | 4 +- 4 files changed, 98 insertions(+), 69 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 362cfa5..06bee0d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,17 +8,17 @@ export class App extends React.Component<{}, null> { render() { return ( -
- -
- - - Freespeech Lexicon Editor +
+ +
+ + + Freespeech Lexicon Editor -
- - -
+
+ + +
); } diff --git a/src/LexComponents.tsx b/src/LexComponents.tsx index 5d5dfe0..93f1adf 100644 --- a/src/LexComponents.tsx +++ b/src/LexComponents.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; +// import { connect } from 'react-redux'; import * as _ from 'lodash'; -import { LexEdit, fieldMetaMap } from './LexEdit'; +import { LexEdit } from './LexEdit'; import { Input, Dropdown, @@ -13,10 +14,28 @@ interface LexEditorProps { } // const imageRoot = 'https://s3-us-west-2.amazonaws.com/aac-buddy/static/img/png/'; -export class LexEditor extends React.Component { +// container component +export class LexEditor extends React.Component { lexData: any; allEntries: any; selectFields: any; + fieldMetaMap = { + label: { lens: 'label[0]', type: 'text' }, + unl: { lens: 'unl[0]', type: 'text' }, + synset: { lens: 'lexprops[0].wnsynset[0]', type: 'text' }, + guid: { lens: 'guid[0]', type: 'text' }, + pos: { lens: 'pos[0]', type: 'select' }, + image: { lens: 'image[0]', type: 'preview' }, + relations: { lens: 'relations[0]', type: 'text' }, + frame: { lens: 'syntacticprops[0].property[0]._', type: 'select' }, + morphclass: { + lens: 'lexprops[0].morphology[0].morph[0]._', + type: 'select' + }, + stats: { lens: 'stats[0].property[0]._', type: 'text' }, + lang: { lens: '$.id', type: 'select' }, + }; + constructor(props: LexEditorProps) { super(props); this.state = { matchedEntries: [], searchText: '' }; @@ -39,10 +58,10 @@ export class LexEditor extends React.Component { .value() ) .value(); - this.selectFields = _.fromPairs(_.keys(fieldMetaMap).filter((s) => { - return fieldMetaMap[s].type === 'select'; + this.selectFields = _.fromPairs(_.keys(this.fieldMetaMap).filter((s) => { + return this.fieldMetaMap[s].type === 'select'; }).map((s) => { - let lens = fieldMetaMap[s].lens; + let lens = this.fieldMetaMap[s].lens; let selectOptions = _.uniq(this.allEntries.map((q: any) => { return _.get(q, lens, ''); })); @@ -58,8 +77,12 @@ export class LexEditor extends React.Component { public render() { return (
- this.handleOnSearch(e)} /> + this.handleOnSearch(e)} + /> { private handleOnSearch(searchEvent: any): void { let searchText = searchEvent.searchValue; - let searchLens = fieldMetaMap[searchEvent.searchType].lens; + let searchLens = this.fieldMetaMap[searchEvent.searchType].lens; let matchedEntries = _.chain(this.allEntries) .filter((q: any) => _.get(q, searchLens, '') === searchText) .take(10) @@ -80,11 +103,13 @@ export class LexEditor extends React.Component { } } +// export const ReduxLexEditor = connect()(LexEditor); + class LexSearch extends React.Component { searchType: String = 'label'; searchValue: String = ''; public render() { - let dropOptions = _.keys(fieldMetaMap).map((k, i, c) => { + let dropOptions = _.keys(this.props.fieldMetaMap).map((k, i, c) => { return { key: i, value: k, text: _.capitalize(k) }; }); return ( @@ -119,43 +144,45 @@ class LexSearch extends React.Component { } } -function selectMode(props: any) { - if (props.searchText === '') { - return ( -
-

Empty

- Type something in the searchbar. -
- ); - } else { - let editEntries = props.matchedEntries.map((mObj: any) => { - let uniqueKey = mObj.guid[0] + '#' + mObj.$.id; +function LexMatches(params: any) { + const selectMode = (props: any) => { + if (props.searchText === '') { return ( +
+

Empty

+ Type something in the searchbar. +
+ ); + } else { + let editEntries = props.matchedEntries.map((mObj: any) => { + let uniqueKey = mObj.guid[0] + '#' + mObj.$.id; + return ( + + ); + }); + let addProps = {}; + _.set(addProps, props.searchLens, props.searchText); + let addEntry = ( ); - }); - let addProps = {}; - _.set(addProps, props.searchLens, props.searchText); - let addEntry = ( - - ); - editEntries.push(addEntry); - return editEntries; - } -} + editEntries.push(addEntry); + return editEntries; + } + }; -function LexMatches(props: any) { return ( - {selectMode(props)} + {selectMode(params)} ); } diff --git a/src/LexEdit.tsx b/src/LexEdit.tsx index 65d98b4..3276820 100644 --- a/src/LexEdit.tsx +++ b/src/LexEdit.tsx @@ -11,28 +11,28 @@ const { Box } = require('reflexbox'); const imageRoot = 'http://localhost:3000/png/'; -export const fieldMetaMap = { - 'label': { lens: 'label[0]', type: 'text' }, - 'unl': { lens: 'unl[0]', type: 'text' }, - 'synset': { lens: 'lexprops[0].wnsynset[0]', type: 'text' }, - 'guid': { lens: 'guid[0]', type: 'text' }, - 'pos': { lens: 'pos[0]', type: 'select' }, - 'image': { lens: 'image[0]', type: 'preview' }, - 'relations': { lens: 'relations[0]', type: 'text' }, - 'frame': { lens: 'syntacticprops[0].property[0]._', type: 'select' }, - 'morphclass': { - lens: 'lexprops[0].morphology[0].morph[0]._', - type: 'select' - }, - 'stats': { lens: 'stats[0].property[0]._', type: 'text' }, - 'lang': { lens: '$.id', type: 'select' }, -}; +// export const fieldMetaMap = { +// label: { lens: 'label[0]', type: 'text' }, +// unl: { lens: 'unl[0]', type: 'text' }, +// synset: { lens: 'lexprops[0].wnsynset[0]', type: 'text' }, +// guid: { lens: 'guid[0]', type: 'text' }, +// pos: { lens: 'pos[0]', type: 'select' }, +// image: { lens: 'image[0]', type: 'preview' }, +// relations: { lens: 'relations[0]', type: 'text' }, +// frame: { lens: 'syntacticprops[0].property[0]._', type: 'select' }, +// morphclass: { +// lens: 'lexprops[0].morphology[0].morph[0]._', +// type: 'select' +// }, +// stats: { lens: 'stats[0].property[0]._', type: 'text' }, +// lang: { lens: '$.id', type: 'select' }, +// }; export class LexEdit extends React.Component { public render() { let li = this.props.lexItem; - let lexFields = _.keys(fieldMetaMap).map(field => { - let defaultText = _.get(li, fieldMetaMap[field].lens, ''); + let lexFields = _.keys(this.props.fieldMetaMap).map(field => { + let defaultText = _.get(li, this.props.fieldMetaMap[field].lens, ''); let sh = (e: any) => { let eventData = {}; eventData[field] = e.target.value; @@ -40,7 +40,7 @@ export class LexEdit extends React.Component { }; // let pred = (x: any) => _.isEqual(fieldMetaMap[ft].type, x); // _.findIndex(['text', 'number'], pred) !== -1 - if (fieldMetaMap[field].type === 'text') { + if (this.props.fieldMetaMap[field].type === 'text') { return ( { /> ); - } else if (fieldMetaMap[field].type === 'select') { + } else if (this.props.fieldMetaMap[field].type === 'select') { return ( ); - } else if (fieldMetaMap[field].type === 'preview' && defaultText !== '') { + } else if (this.props.fieldMetaMap[field].type === 'preview' && defaultText !== '') { let imageSrc = imageRoot + defaultText; return ( diff --git a/src/reducers/index.tsx b/src/reducers/index.tsx index 11c64fb..2b6fe60 100644 --- a/src/reducers/index.tsx +++ b/src/reducers/index.tsx @@ -1,7 +1,9 @@ import { combineReducers } from 'redux'; function search(state: any = [], action: any) { - console.log(state, action); + if (action.type === 'ACTION_SEARCH_TEXT') { + console.log(state, action); + } return state; }