diff --git a/package-lock.json b/package-lock.json index ac96e3c..41b9349 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,6 +28,11 @@ "version": "https://registry.npmjs.org/@types/jest/-/jest-19.2.4.tgz", "integrity": "sha1-VDZRcSU1lit9xhXhjko4H8JodEI=" }, + "@types/lodash": { + "version": "4.14.66", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.66.tgz", + "integrity": "sha512-LpGSiIy5/utq8AT2bSXGnENnS1kCZJ1m84L1yqKst2UehSZe6VWROmiysYg/lLJR6zu2ooeVoQtkUHToA+mEtQ==" + }, "@types/node": { "version": "https://registry.npmjs.org/@types/node/-/node-7.0.31.tgz", "integrity": "sha1-gOpNF1WZsqABScKaEKTrLf9ZLoY=" @@ -4370,6 +4375,11 @@ "integrity": "sha1-WiAL+S4ON3UXUv5FsKszD9S2vpk=", "dev": true }, + "reflexbox": { + "version": "3.0.0-0", + "resolved": "https://registry.npmjs.org/reflexbox/-/reflexbox-3.0.0-0.tgz", + "integrity": "sha512-r+7vdyy+kscKFyk2083MLemiT/x3nwzCSif/UwCCoobmwq+cNmJ+hrL7Bu1tJjFOAYjVbIk/GyL5svTRiD0wzg==" + }, "regenerate": { "version": "https://registry.npmjs.org/regenerate/-/regenerate-1.3.2.tgz", "integrity": "sha1-0ZQcZ7rUN+G+dkM63Vs4X5WxkmA=", diff --git a/package.json b/package.json index d46e04a..7ab4272 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "@blueprintjs/table": "^1.16.0", "@types/es6-shim": "^0.31.34", "@types/jest": "^19.2.4", + "@types/lodash": "^4.14.66", "@types/node": "^7.0.29", "@types/pure-render-decorator": "^0.2.27", "@types/react": "^15.0.27", @@ -18,6 +19,7 @@ "react-addons-css-transition-group": "^15.5.2", "react-dom": "^15.5.4", "react-transition-group": "^1.1.3", + "reflexbox": "^3.0.0-0", "semantic-ui-css": "^2.2.10", "semantic-ui-react": "^0.68.5", "xml2js": "^0.4.17", diff --git a/public/index.html b/public/index.html index 4bc0b40..a6e2d31 100644 --- a/public/index.html +++ b/public/index.html @@ -26,15 +26,5 @@ You need to enable JavaScript to run this app.
- diff --git a/public/manifest.json b/public/manifest.json index be607e4..f9e3d99 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,13 +1,11 @@ { - "short_name": "React App", - "name": "Create React App Sample", - "icons": [ - { - "src": "favicon.ico", - "sizes": "192x192", - "type": "image/png" - } - ], + "short_name": "LexEditor", + "name": "Freespeech LexEditor App", + "icons": [{ + "src": "favicon.ico", + "sizes": "192x192", + "type": "image/png" + }], "start_url": "./index.html", "display": "standalone", "theme_color": "#000000", diff --git a/src/LexComponents.tsx b/src/LexComponents.tsx index 4fc441e..575ca34 100644 --- a/src/LexComponents.tsx +++ b/src/LexComponents.tsx @@ -1,34 +1,38 @@ import * as React from 'react'; +import * as _ from 'lodash'; import { - // Button, - // Classes, - // InputGroup, - // Intent, - // Menu, - // MenuItem, - // Popover, - // Position, - // Spinner, - // Switch, - // Tag, - // Tooltip, FocusStyleManager, } from '@blueprintjs/core'; import * as XML from 'xml2js'; -import * as XPath from 'xml2js-xpath'; +const { Flex, Box } = require('reflexbox'); FocusStyleManager.onlyShowFocusOnTabs(); -type ReactEvent = React.ChangeEvent; +enum EditorMode { + Empty = 1, Edit, Add +} 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', +}; + class LexEditor extends React.Component { constructor(props: LexEditorProps) { super(props); - this.handleOnSearch = this.handleOnSearch.bind(this); this.state = { lexData: {}, matchedEntries: [] }; } @@ -39,91 +43,204 @@ class LexEditor extends React.Component { XML.parseString(xmlString, (err, lexData) => { this.setState({ ...this.state, lexData }); }); + }) + .catch((e) => { + console.log('errored :', e); }); - // .catch((error) => { - // console.error(error); - // }); } public render() { return (
- - -
- ); - } - - private handleOnSearch(event: ReactEvent): void { - let searchText = event.target.value; - // this.setState({ ...this.state, searchText }); - let pathQ = './/lang'; - let words = XPath.find(this.state.lexData.document, pathQ); - let matchedEntries = words.filter((obj) => { - if (obj.label[0] === searchText) { - return true; - } - return false; - }); - this.setState({ ...this.state, matchedEntries }); - } -} - -interface LexSearchProps { - handleOnSearch: (e: ReactEvent) => void; -} - -class LexSearch extends React.Component { - public render() { - return ( -
- - this.props.handleOnSearch(e)} + this.handleOnSearch(e)} /> +
); } -} -class LexMatches extends React.Component { - public render() { - return ( -
- {this.props.matchedEntries.map((mObj: any) => { - console.log('Matched ObjectEntry' + mObj); - return (); - })} -
- ); + private handleOnSearch(searchEvent: any): void { + let searchText = searchEvent.searchValue; + let searchType = 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() + ) + .filter((q: any) => _.get(q, searchType, '') === searchText) + .value(); + let emptyOrAdd = searchText === '' ? EditorMode.Empty : EditorMode.Add; + let mode = matchedEntries.length > 0 ? EditorMode.Edit : emptyOrAdd; + this.setState({ ...this.state, matchedEntries, mode, searchText, searchType }); } } -class LexEntry extends React.Component { +class LexSearch extends React.Component { + searchType: String = 'label'; + searchValue: String = ''; public render() { return ( -
-