diff --git a/src/LexComponents.tsx b/src/LexComponents.tsx index 43ddc55..75216ce 100644 --- a/src/LexComponents.tsx +++ b/src/LexComponents.tsx @@ -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 { + 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('document.lexicon[0].item') + .flatMap((o: any) => _.chain(o) + .get('entry') + .map((p: any) => _.chain(p) + .get('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(q, lens, ''); + })); + return [s, selectOptions]; + })); }); }) .catch((e) => { @@ -51,7 +79,7 @@ class LexEditor extends React.Component { this.handleOnSearch(e)} /> @@ -61,17 +89,8 @@ class LexEditor extends React.Component { private handleOnSearch(searchEvent: any): void { let searchText = searchEvent.searchValue; - let searchLens = searchLensMap[searchEvent.searchType]; - let matchedEntries = _.chain(this.state.lexData) - .get('document.lexicon[0].item') - .flatMap((o: any) => _.chain(o) - .get('entry') - .map((p: any) => _.chain(p) - .get('lang[0]') - .set('guid[0]', o.$.guid) - .value()) - .value() - ) + let searchLens = fieldMetaMap[searchEvent.searchType].lens; + let matchedEntries = _.chain(this.allEntries) .filter((q: any) => _.get(q, searchLens, '') === searchText) .value(); this.setState({ ...this.state, matchedEntries, searchText, searchLens }); @@ -89,7 +108,7 @@ class LexSearch extends React.Component { onChange={e => this.handleTypeChange(e)} > @@ -141,11 +160,24 @@ function selectMode(props: any) { } else { let editEntries = props.matchedEntries.map((mObj: any) => { let uniqueKey = mObj.guid[0] + '#' + mObj.$.id; - return (); + return ( + + ); }); let addProps = {}; _.set(addProps, props.searchLens, props.searchText); - editEntries.push(); + let addEntry = ( + + ); + editEntries.push(addEntry); return editEntries; } } @@ -161,8 +193,54 @@ function LexMatches(props: any) { class LexEdit extends React.Component { 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(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 ( + + + + ); + } else if (fieldMetaMap[ft].type === 'select') { + return ( + + + + ); + } else if (fieldMetaMap[ft].type === 'preview' && defaultText !== '') { + let imageSrc = imageRoot + defaultText; + return ( + + + + ); + } else { + return null; + } }); return ( { ); } - private getLabelField(text: string, labelLens: string, li: any) { - return ( - (li, labelLens, '')} - fieldHandler={(e: any) => this.handleOnChange(e)} - /> - ); - } - private handleOnChange(event: any) { this.setState(event); } } -class LexField extends React.Component { - constructor(props: any) { - super(props); - this.state = { fieldText: this.props.fieldText }; - } - public render() { - return ( -
- - - - - this.onFieldChange(e)} - /> - -
- ); - } - - 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; diff --git a/src/LexInputComponents.tsx b/src/LexInputComponents.tsx new file mode 100644 index 0000000..b9745d5 --- /dev/null +++ b/src/LexInputComponents.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +const { Box } = require('reflexbox'); + +export class LexSingleInput extends React.Component { + public render() { + return ( +
+ + + + + {this.props.children} + +
+ ); + } +}