malar
/
fs-walle-react-ts
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added fieldmetamap to LexEditor

master
Malar Kannan 2017-07-12 11:32:01 +05:30
parent 2d0b4b1562
commit f60865f64c
4 changed files with 98 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/App.tsx
View File

@ -8,17 +8,17 @@ export class App extends React.Component<{}, null> {
render() { render() {
return ( return (
<Provider store={walleStore}> <Provider store={walleStore}>
<div> <div>
<Segment inverted={true} size="tiny" attached={true}> <Segment inverted={true} size="tiny" attached={true}>
<Header inverted={true} color="teal" size="mini"> <Header inverted={true} color="teal" size="mini">
<Icon name="edit" size="small" /> <Icon name="edit" size="small" />
<Header.Content> <Header.Content>
Freespeech Lexicon Editor Freespeech Lexicon Editor
</Header.Content> </Header.Content>
</Header> </Header>
</Segment> </Segment>
<LexEditor fileName="/new_es.xml" /> <LexEditor fileName="/new_es.xml" />
</div> </div>
</Provider> </Provider>
); );
} }

101
src/LexComponents.tsx
View File

@ -1,6 +1,7 @@
import * as React from 'react'; import * as React from 'react';
// import { connect } from 'react-redux';
import * as _ from 'lodash'; import * as _ from 'lodash';
import { LexEdit, fieldMetaMap } from './LexEdit'; import { LexEdit } from './LexEdit';
import { import {
Input, Input,
Dropdown, Dropdown,
@ -13,10 +14,28 @@ interface LexEditorProps {
} }
// const imageRoot = 'https://s3-us-west-2.amazonaws.com/aac-buddy/static/img/png/'; // const imageRoot = 'https://s3-us-west-2.amazonaws.com/aac-buddy/static/img/png/';
export class LexEditor extends React.Component<LexEditorProps, any> { // container component
export class LexEditor extends React.Component<any, any> {
lexData: any; lexData: any;
allEntries: any; allEntries: any;
selectFields: 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) { constructor(props: LexEditorProps) {
super(props); super(props);
this.state = { matchedEntries: [], searchText: '' }; this.state = { matchedEntries: [], searchText: '' };
@ -39,10 +58,10 @@ export class LexEditor extends React.Component<LexEditorProps, any> {
.value() .value()
) )
.value(); .value();
this.selectFields = _.fromPairs(_.keys(fieldMetaMap).filter((s) => { this.selectFields = _.fromPairs(_.keys(this.fieldMetaMap).filter((s) => {
return fieldMetaMap[s].type === 'select'; return this.fieldMetaMap[s].type === 'select';
}).map((s) => { }).map((s) => {
let lens = fieldMetaMap[s].lens; let lens = this.fieldMetaMap[s].lens;
let selectOptions = _.uniq(this.allEntries.map((q: any) => { let selectOptions = _.uniq(this.allEntries.map((q: any) => {
return _.get<any>(q, lens, ''); return _.get<any>(q, lens, '');
})); }));
@ -58,8 +77,12 @@ export class LexEditor extends React.Component<LexEditorProps, any> {
public render() { public render() {
return ( return (
<div> <div>
<LexSearch handleOnSearch={(e: any) => this.handleOnSearch(e)} /> <LexSearch
{...{ fieldMetaMap: this.fieldMetaMap }}
handleOnSearch={(e: any) => this.handleOnSearch(e)}
/>
<LexMatches <LexMatches
{...{ fieldMetaMap: this.fieldMetaMap }}
matchedEntries={this.state.matchedEntries} matchedEntries={this.state.matchedEntries}
selectionMeta={this.selectFields} selectionMeta={this.selectFields}
searchText={this.state.searchText} searchText={this.state.searchText}
@ -71,7 +94,7 @@ export class LexEditor extends React.Component<LexEditorProps, any> {
private handleOnSearch(searchEvent: any): void { private handleOnSearch(searchEvent: any): void {
let searchText = searchEvent.searchValue; let searchText = searchEvent.searchValue;
let searchLens = fieldMetaMap[searchEvent.searchType].lens; let searchLens = this.fieldMetaMap[searchEvent.searchType].lens;
let matchedEntries = _.chain(this.allEntries) let matchedEntries = _.chain(this.allEntries)
.filter((q: any) => _.get<any>(q, searchLens, '') === searchText) .filter((q: any) => _.get<any>(q, searchLens, '') === searchText)
.take(10) .take(10)
@ -80,11 +103,13 @@ export class LexEditor extends React.Component<LexEditorProps, any> {
} }
} }
// export const ReduxLexEditor = connect()(LexEditor);
class LexSearch extends React.Component<any, any> { class LexSearch extends React.Component<any, any> {
searchType: String = 'label'; searchType: String = 'label';
searchValue: String = ''; searchValue: String = '';
public render() { 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 { key: i, value: k, text: _.capitalize(k) };
}); });
return ( return (
@ -119,43 +144,45 @@ class LexSearch extends React.Component<any, any> {
} }
} }
function selectMode(props: any) { function LexMatches(params: any) {
if (props.searchText === '') { const selectMode = (props: any) => {
return ( if (props.searchText === '') {
<div>
<h4>Empty</h4>
Type something in the searchbar.
</div>
);
} else {
let editEntries = props.matchedEntries.map((mObj: any) => {
let uniqueKey = mObj.guid[0] + '#' + mObj.$.id;
return ( return (
<div>
<h4>Empty</h4>
Type something in the searchbar.
</div>
);
} else {
let editEntries = props.matchedEntries.map((mObj: any) => {
let uniqueKey = mObj.guid[0] + '#' + mObj.$.id;
return (
<LexEdit
{...{ fieldMetaMap: props.fieldMetaMap }}
key={uniqueKey}
lexItem={mObj}
selectionMeta={props.selectionMeta}
/>
);
});
let addProps = {};
_.set(addProps, props.searchLens, props.searchText);
let addEntry = (
<LexEdit <LexEdit
key={uniqueKey} {...{ fieldMetaMap: props.fieldMetaMap }}
lexItem={mObj} key={props.searchText}
lexItem={addProps}
selectionMeta={props.selectionMeta} selectionMeta={props.selectionMeta}
/> />
); );
}); editEntries.push(addEntry);
let addProps = {}; return editEntries;
_.set(addProps, props.searchLens, props.searchText); }
let addEntry = ( };
<LexEdit
key={props.searchText}
lexItem={addProps}
selectionMeta={props.selectionMeta}
/>
);
editEntries.push(addEntry);
return editEntries;
}
}
function LexMatches(props: any) {
return ( return (
<Flex wrap={true}> <Flex wrap={true}>
{selectMode(props)} {selectMode(params)}
</Flex> </Flex>
); );
} }

42
src/LexEdit.tsx
View File

@ -11,28 +11,28 @@ const { Box } = require('reflexbox');
const imageRoot = 'http://localhost:3000/png/'; const imageRoot = 'http://localhost:3000/png/';
export const fieldMetaMap = { // export const fieldMetaMap = {
'label': { lens: 'label[0]', type: 'text' }, // label: { lens: 'label[0]', type: 'text' },
'unl': { lens: 'unl[0]', type: 'text' }, // unl: { lens: 'unl[0]', type: 'text' },
'synset': { lens: 'lexprops[0].wnsynset[0]', type: 'text' }, // synset: { lens: 'lexprops[0].wnsynset[0]', type: 'text' },
'guid': { lens: 'guid[0]', type: 'text' }, // guid: { lens: 'guid[0]', type: 'text' },
'pos': { lens: 'pos[0]', type: 'select' }, // pos: { lens: 'pos[0]', type: 'select' },
'image': { lens: 'image[0]', type: 'preview' }, // image: { lens: 'image[0]', type: 'preview' },
'relations': { lens: 'relations[0]', type: 'text' }, // relations: { lens: 'relations[0]', type: 'text' },
'frame': { lens: 'syntacticprops[0].property[0]._', type: 'select' }, // frame: { lens: 'syntacticprops[0].property[0]._', type: 'select' },
'morphclass': { // morphclass: {
lens: 'lexprops[0].morphology[0].morph[0]._', // lens: 'lexprops[0].morphology[0].morph[0]._',
type: 'select' // type: 'select'
}, // },
'stats': { lens: 'stats[0].property[0]._', type: 'text' }, // stats: { lens: 'stats[0].property[0]._', type: 'text' },
'lang': { lens: '$.id', type: 'select' }, // lang: { lens: '$.id', type: 'select' },
}; // };
export class LexEdit extends React.Component<any, any> { export class LexEdit extends React.Component<any, any> {
public render() { public render() {
let li = this.props.lexItem; let li = this.props.lexItem;
let lexFields = _.keys(fieldMetaMap).map(field => { let lexFields = _.keys(this.props.fieldMetaMap).map(field => {
let defaultText = _.get<any>(li, fieldMetaMap[field].lens, ''); let defaultText = _.get<any>(li, this.props.fieldMetaMap[field].lens, '');
let sh = (e: any) => { let sh = (e: any) => {
let eventData = {}; let eventData = {};
eventData[field] = e.target.value; eventData[field] = e.target.value;
@ -40,7 +40,7 @@ export class LexEdit extends React.Component<any, any> {
}; };
// let pred = (x: any) => _.isEqual(fieldMetaMap[ft].type, x); // let pred = (x: any) => _.isEqual(fieldMetaMap[ft].type, x);
// _.findIndex(['text', 'number'], pred) !== -1 // _.findIndex(['text', 'number'], pred) !== -1
if (fieldMetaMap[field].type === 'text') { if (this.props.fieldMetaMap[field].type === 'text') {
return ( return (
<LexSingleInput key={field} labelText={_.capitalize(field)}> <LexSingleInput key={field} labelText={_.capitalize(field)}>
<Input <Input
@ -53,7 +53,7 @@ export class LexEdit extends React.Component<any, any> {
/> />
</LexSingleInput> </LexSingleInput>
); );
} else if (fieldMetaMap[field].type === 'select') { } else if (this.props.fieldMetaMap[field].type === 'select') {
return ( return (
<LexSingleInput key={field} labelText={_.capitalize(field)}> <LexSingleInput key={field} labelText={_.capitalize(field)}>
<select <select
@ -67,7 +67,7 @@ export class LexEdit extends React.Component<any, any> {
</select> </select>
</LexSingleInput> </LexSingleInput>
); );
} else if (fieldMetaMap[field].type === 'preview' && defaultText !== '') { } else if (this.props.fieldMetaMap[field].type === 'preview' && defaultText !== '') {
let imageSrc = imageRoot + defaultText; let imageSrc = imageRoot + defaultText;
return ( return (
<LexSingleInput key={field} labelText={_.capitalize(field)}> <LexSingleInput key={field} labelText={_.capitalize(field)}>

4
src/reducers/index.tsx
View File

@ -1,7 +1,9 @@
import { combineReducers } from 'redux'; import { combineReducers } from 'redux';
function search(state: any = [], action: any) { function search(state: any = [], action: any) {
console.log(state, action); if (action.type === 'ACTION_SEARCH_TEXT') {
console.log(state, action);
}
return state; return state;
} }