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() {
return (
<Provider store={walleStore}>
<div>
<Segment inverted={true} size="tiny" attached={true}>
<Header inverted={true} color="teal" size="mini">
<Icon name="edit" size="small" />
<Header.Content>
Freespeech Lexicon Editor
<div>
<Segment inverted={true} size="tiny" attached={true}>
<Header inverted={true} color="teal" size="mini">
<Icon name="edit" size="small" />
<Header.Content>
Freespeech Lexicon Editor
</Header.Content>
</Header>
</Segment>
<LexEditor fileName="/new_es.xml" />
</div>
</Header>
</Segment>
<LexEditor fileName="/new_es.xml" />
</div>
</Provider>
);
}

101
src/LexComponents.tsx
View File

@ -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<LexEditorProps, any> {
// container component
export class LexEditor extends React.Component<any, any> {
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<LexEditorProps, any> {
.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<any>(q, lens, '');
}));
@ -58,8 +77,12 @@ export class LexEditor extends React.Component<LexEditorProps, any> {
public render() {
return (
<div>
<LexSearch handleOnSearch={(e: any) => this.handleOnSearch(e)} />
<LexSearch
{...{ fieldMetaMap: this.fieldMetaMap }}
handleOnSearch={(e: any) => this.handleOnSearch(e)}
/>
<LexMatches
{...{ fieldMetaMap: this.fieldMetaMap }}
matchedEntries={this.state.matchedEntries}
selectionMeta={this.selectFields}
searchText={this.state.searchText}
@ -71,7 +94,7 @@ export class LexEditor extends React.Component<LexEditorProps, any> {
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<any>(q, searchLens, '') === searchText)
.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> {
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<any, any> {
}
}
function selectMode(props: any) {
if (props.searchText === '') {
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;
function LexMatches(params: any) {
const selectMode = (props: any) => {
if (props.searchText === '') {
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
key={uniqueKey}
lexItem={mObj}
{...{ fieldMetaMap: props.fieldMetaMap }}
key={props.searchText}
lexItem={addProps}
selectionMeta={props.selectionMeta}
/>
);
});
let addProps = {};
_.set(addProps, props.searchLens, props.searchText);
let addEntry = (
<LexEdit
key={props.searchText}
lexItem={addProps}
selectionMeta={props.selectionMeta}
/>
);
editEntries.push(addEntry);
return editEntries;
}
}
editEntries.push(addEntry);
return editEntries;
}
};
function LexMatches(props: any) {
return (
<Flex wrap={true}>
{selectMode(props)}
{selectMode(params)}
</Flex>
);
}

42
src/LexEdit.tsx
View File

@ -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<any, any> {
public render() {
let li = this.props.lexItem;
let lexFields = _.keys(fieldMetaMap).map(field => {
let defaultText = _.get<any>(li, fieldMetaMap[field].lens, '');
let lexFields = _.keys(this.props.fieldMetaMap).map(field => {
let defaultText = _.get<any>(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<any, any> {
};
// 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 (
<LexSingleInput key={field} labelText={_.capitalize(field)}>
<Input
@ -53,7 +53,7 @@ export class LexEdit extends React.Component<any, any> {
/>
</LexSingleInput>
);
} else if (fieldMetaMap[field].type === 'select') {
} else if (this.props.fieldMetaMap[field].type === 'select') {
return (
<LexSingleInput key={field} labelText={_.capitalize(field)}>
<select
@ -67,7 +67,7 @@ export class LexEdit extends React.Component<any, any> {
</select>
</LexSingleInput>
);
} else if (fieldMetaMap[field].type === 'preview' && defaultText !== '') {
} else if (this.props.fieldMetaMap[field].type === 'preview' && defaultText !== '') {
let imageSrc = imageRoot + defaultText;
return (
<LexSingleInput key={field} labelText={_.capitalize(field)}>

4
src/reducers/index.tsx
View File

@ -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;
}