added input components
Malar Kannan
parent
421b7c79dc
commit
026aed6604
|
|
@ -3,7 +3,9 @@ import * as _ from 'lodash';
|
|||
import {
|
||||
FocusStyleManager,
|
||||
} from '@blueprintjs/core';
|
||||
// import { Image } from 'semantic-ui-react';
|
||||
import * as XML from 'xml2js';
|
||||
import { LexSingleInput } from './LexInputComponents';
|
||||
const { Flex, Box } = require('reflexbox');
|
||||
|
||||
FocusStyleManager.onlyShowFocusOnTabs();
|
||||
|
|
@ -11,33 +13,59 @@ FocusStyleManager.onlyShowFocusOnTabs();
|
|||
interface LexEditorProps {
|
||||
fileName: RequestInfo;
|
||||
}
|
||||
|
||||
const searchLensMap = {
|
||||
'label': 'label[0]',
|
||||
'unl': 'unl[0]',
|
||||
'synset': 'lexprops[0].wnsynset[0]',
|
||||
'guid': 'guid[0]',
|
||||
'pos': 'pos[0]',
|
||||
'image': 'image[0]',
|
||||
'relations': 'relations[0]',
|
||||
'frame': 'syntacticprops[0].property[0]._',
|
||||
'morphclass': 'lexprops[0].morphology[0].morph[0]._',
|
||||
'stats': 'stats[0].property[0]._',
|
||||
'lang': '$.id',
|
||||
const imageRoot = 'https://s3-us-west-2.amazonaws.com/aac-buddy/static/img/png/';
|
||||
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' },
|
||||
};
|
||||
|
||||
class LexEditor extends React.Component<LexEditorProps, any> {
|
||||
lexData: any;
|
||||
allEntries: any;
|
||||
selectFields: any;
|
||||
constructor(props: LexEditorProps) {
|
||||
super(props);
|
||||
this.state = { lexData: {}, matchedEntries: [], searchText: '' };
|
||||
this.state = { matchedEntries: [], searchText: '' };
|
||||
}
|
||||
|
||||
public componentDidMount() {
|
||||
return fetch(this.props.fileName)
|
||||
fetch(this.props.fileName)
|
||||
.then((response) => response.text())
|
||||
.then((xmlString) => {
|
||||
XML.parseString(xmlString, (err, lexData) => {
|
||||
this.setState({ ...this.state, lexData });
|
||||
this.lexData = lexData;
|
||||
this.allEntries = _.chain(lexData)
|
||||
.get<any>('document.lexicon[0].item')
|
||||
.flatMap((o: any) => _.chain(o)
|
||||
.get<any>('entry')
|
||||
.map((p: any) => _.chain(p)
|
||||
.get<any>('lang[0]')
|
||||
.set('guid[0]', o.$.guid)
|
||||
.value())
|
||||
.value()
|
||||
)
|
||||
.value();
|
||||
this.selectFields = _.fromPairs(_.keys(fieldMetaMap).filter((s) => {
|
||||
return fieldMetaMap[s].type === 'select';
|
||||
}).map((s) => {
|
||||
let lens = fieldMetaMap[s].lens;
|
||||
let selectOptions = _.uniq(this.allEntries.map((q: any) => {
|
||||
return _.get<any>(q, lens, '');
|
||||
}));
|
||||
return [s, selectOptions];
|
||||
}));
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
|
|
@ -51,7 +79,7 @@ class LexEditor extends React.Component<LexEditorProps, any> {
|
|||
<LexSearch handleOnSearch={(e: any) => this.handleOnSearch(e)} />
|
||||
<LexMatches
|
||||
matchedEntries={this.state.matchedEntries}
|
||||
mode={this.state.mode}
|
||||
selectionMeta={this.selectFields}
|
||||
searchText={this.state.searchText}
|
||||
searchLens={this.state.searchLens}
|
||||
/>
|
||||
|
|
@ -61,17 +89,8 @@ class LexEditor extends React.Component<LexEditorProps, any> {
|
|||
|
||||
private handleOnSearch(searchEvent: any): void {
|
||||
let searchText = searchEvent.searchValue;
|
||||
let searchLens = searchLensMap[searchEvent.searchType];
|
||||
let matchedEntries = _.chain(this.state.lexData)
|
||||
.get<any>('document.lexicon[0].item')
|
||||
.flatMap((o: any) => _.chain(o)
|
||||
.get<any>('entry')
|
||||
.map((p: any) => _.chain(p)
|
||||
.get<any>('lang[0]')
|
||||
.set('guid[0]', o.$.guid)
|
||||
.value())
|
||||
.value()
|
||||
)
|
||||
let searchLens = fieldMetaMap[searchEvent.searchType].lens;
|
||||
let matchedEntries = _.chain(this.allEntries)
|
||||
.filter((q: any) => _.get<any>(q, searchLens, '') === searchText)
|
||||
.value();
|
||||
this.setState({ ...this.state, matchedEntries, searchText, searchLens });
|
||||
|
|
@ -89,7 +108,7 @@ class LexSearch extends React.Component<any, any> {
|
|||
onChange={e => this.handleTypeChange(e)}
|
||||
>
|
||||
<select>
|
||||
{_.keys(searchLensMap).map((k, i, c) => {
|
||||
{_.keys(fieldMetaMap).map((k, i, c) => {
|
||||
return <option key={i} value={k}> {_.capitalize(k)}</option>;
|
||||
})}
|
||||
</select>
|
||||
|
|
@ -141,11 +160,24 @@ function selectMode(props: any) {
|
|||
} else {
|
||||
let editEntries = props.matchedEntries.map((mObj: any) => {
|
||||
let uniqueKey = mObj.guid[0] + '#' + mObj.$.id;
|
||||
return (<LexEdit key={uniqueKey} lexItem={mObj} />);
|
||||
return (
|
||||
<LexEdit
|
||||
key={uniqueKey}
|
||||
lexItem={mObj}
|
||||
selectionMeta={props.selectionMeta}
|
||||
/>
|
||||
);
|
||||
});
|
||||
let addProps = {};
|
||||
_.set(addProps, props.searchLens, props.searchText);
|
||||
editEntries.push(<LexEdit key={props.searchText} lexItem={addProps} />);
|
||||
let addEntry = (
|
||||
<LexEdit
|
||||
key={props.searchText}
|
||||
lexItem={addProps}
|
||||
selectionMeta={props.selectionMeta}
|
||||
/>
|
||||
);
|
||||
editEntries.push(addEntry);
|
||||
return editEntries;
|
||||
}
|
||||
}
|
||||
|
|
@ -161,8 +193,54 @@ function LexMatches(props: any) {
|
|||
class LexEdit extends React.Component<any, any> {
|
||||
public render() {
|
||||
let li = this.props.lexItem;
|
||||
let lexFields = _.keys(searchLensMap).map(e => {
|
||||
return this.getLabelField(e, searchLensMap[e], li);
|
||||
let lexFields = _.keys(fieldMetaMap).map(ft => {
|
||||
let defaultText = _.get<any>(li, fieldMetaMap[ft].lens, '');
|
||||
let sh = (e: any) => {
|
||||
let eventData = {};
|
||||
eventData[ft] = e.target.value;
|
||||
this.handleOnChange(eventData);
|
||||
};
|
||||
// let pred = (x: any) => _.isEqual(fieldMetaMap[ft].type, x);
|
||||
// _.findIndex(['text', 'number'], pred) !== -1
|
||||
if (fieldMetaMap[ft].type === 'text') {
|
||||
return (
|
||||
<LexSingleInput key={ft} labelText={_.capitalize(ft)}>
|
||||
<input
|
||||
onChange={sh}
|
||||
style={{ width: '110px' }}
|
||||
className="pt-input"
|
||||
defaultValue={defaultText}
|
||||
placeholder={ft}
|
||||
type="text"
|
||||
dir="auto"
|
||||
/>
|
||||
</LexSingleInput>
|
||||
);
|
||||
} else if (fieldMetaMap[ft].type === 'select') {
|
||||
return (
|
||||
<LexSingleInput key={ft} labelText={_.capitalize(ft)}>
|
||||
<select
|
||||
onChange={sh}
|
||||
style={{ width: '110px' }}
|
||||
className="pt-select"
|
||||
defaultValue={defaultText}
|
||||
>
|
||||
{this.props.selectionMeta[ft].map((k: any, i: any, c: any) => {
|
||||
return <option key={i} value={k}> {k}</option>;
|
||||
})}
|
||||
</select>
|
||||
</LexSingleInput>
|
||||
);
|
||||
} else if (fieldMetaMap[ft].type === 'preview' && defaultText !== '') {
|
||||
let imageSrc = imageRoot + defaultText;
|
||||
return (
|
||||
<LexSingleInput key={ft} labelText={_.capitalize(ft)}>
|
||||
<img src={imageSrc} width="70px"/>
|
||||
</LexSingleInput>
|
||||
);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
});
|
||||
return (
|
||||
<Box
|
||||
|
|
@ -184,70 +262,9 @@ class LexEdit extends React.Component<any, any> {
|
|||
);
|
||||
}
|
||||
|
||||
private getLabelField(text: string, labelLens: string, li: any) {
|
||||
return (
|
||||
<LexField
|
||||
key={text}
|
||||
labelText={_.capitalize(text)}
|
||||
fieldType={text}
|
||||
fieldText={_.get<any>(li, labelLens, '')}
|
||||
fieldHandler={(e: any) => this.handleOnChange(e)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
private handleOnChange(event: any) {
|
||||
this.setState(event);
|
||||
}
|
||||
}
|
||||
|
||||
class LexField extends React.Component<any, any> {
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
this.state = { fieldText: this.props.fieldText };
|
||||
}
|
||||
public render() {
|
||||
return (
|
||||
<div className="pt-form-group pt-inline">
|
||||
<Box w={2 / 5}>
|
||||
<label
|
||||
style={{ textAlign: 'right' }}
|
||||
className="pt-label"
|
||||
htmlFor="example-form-group-input-a"
|
||||
>
|
||||
{this.props.labelText}
|
||||
</label>
|
||||
</Box>
|
||||
<Box w={3 / 5}>
|
||||
<input
|
||||
id="example-form-group-input-a"
|
||||
className="pt-input"
|
||||
style={{ width: '110px' }}
|
||||
placeholder={this.props.fieldType}
|
||||
value={this.state.fieldText}
|
||||
type="text"
|
||||
dir="auto"
|
||||
onChange={(e: any) => this.onFieldChange(e)}
|
||||
/>
|
||||
</Box>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
public componentWillReceiveProps(nextProps: any) {
|
||||
if (this.props.fieldText !== nextProps.fieldText) {
|
||||
let fieldText = nextProps.fieldText;
|
||||
this.setState({ ...this.state, fieldText });
|
||||
}
|
||||
}
|
||||
|
||||
private onFieldChange(e: any) {
|
||||
let fieldText = e.target.value;
|
||||
let eventData = {};
|
||||
eventData[this.props.fieldType] = fieldText;
|
||||
this.setState({ ...this.state, fieldText });
|
||||
this.props.fieldHandler(eventData);
|
||||
}
|
||||
}
|
||||
|
||||
export default LexEditor;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
import * as React from 'react';
|
||||
const { Box } = require('reflexbox');
|
||||
|
||||
export class LexSingleInput extends React.Component<any, any> {
|
||||
public render() {
|
||||
return (
|
||||
<div className="pt-form-group pt-inline">
|
||||
<Box w={2 / 5}>
|
||||
<label
|
||||
style={{ textAlign: 'right' }}
|
||||
className="pt-label"
|
||||
>
|
||||
{this.props.labelText}
|
||||
</label>
|
||||
</Box>
|
||||
<Box w={3 / 5}>
|
||||
{this.props.children}
|
||||
</Box>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue