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

1. split lex components to a module 

2. added editor for lex dictid
master
Malar Kannan 2017-06-19 12:08:08 +05:30
parent 7b7f3ab1d3
commit 6159f53137
2 changed files with 130 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
src/App.tsx
View File

@ -1,25 +1,6 @@
import * as React from 'react'; import * as React from 'react';
import { import LexEditor from './LexComponents';
// 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';
// import { Table } from '@blueprintjs/table'; // import { Table } from '@blueprintjs/table';
FocusStyleManager.onlyShowFocusOnTabs();
// const logo = require('./logo.svg'); // const logo = require('./logo.svg');
class App extends React.Component<{}, null> { class App extends React.Component<{}, null> {
@ -38,111 +19,4 @@ class App extends React.Component<{}, null> {
} }
} }
type ReactEvent = React.ChangeEvent<HTMLInputElement>;
interface LexEditorProps {
fileName: RequestInfo;
}
class LexEditor extends React.Component<LexEditorProps, any> {
constructor(props: LexEditorProps) {
super(props);
this.handleOnSearch = this.handleOnSearch.bind(this);
this.state = { lexData: {}, matchedEntries: [] };
}
public componentDidMount() {
return fetch(this.props.fileName)
.then((response) => response.text())
.then((xmlString) => {
XML.parseString(xmlString, (err, lexData) => {
this.setState({ ...this.state, lexData });
});
});
// .catch((error) => {
// console.error(error);
// });
}
public render() {
return (
<div>
<LexSearch handleOnSearch={this.handleOnSearch} />
<LexMatches matchedEntries={this.state.matchedEntries} />
</div>
);
}
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<LexSearchProps, null> {
public render() {
return (
<div className="pt-input-group" style={{ width: '300px' }}>
<span className="pt-icon pt-icon-search" />
<input
className="pt-input"
type="search"
placeholder="Search input"
dir="auto"
onChange={e => this.props.handleOnSearch(e)}
/>
</div>
);
}
}
class LexMatches extends React.Component<any, any> {
public render() {
return (
<div>
{this.props.matchedEntries.map((mObj: any) => {
console.log('Matched ObjectEntry' + mObj);
return (<LexEntry key={mObj.unl} lexItem={mObj} />);
})}
</div>
);
}
}
class LexEntry extends React.Component<any, any> {
public render() {
return (
<div className="pt-form-group">
<label className="pt-label" htmlFor="example-form-group-input-a">
UNL
</label>
<div className="pt-form-content">
<input
id="example-form-group-input-a"
className="pt-input"
style={{ width: '300px' }}
placeholder="UNL Value"
value={this.props.lexItem.unl}
type="text"
dir="auto"
/>
</div>
</div>
);
}
}
export default App; export default App;

129
src/LexComponents.tsx Normal file
View File

@ -0,0 +1,129 @@
import * as React from 'react';
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';
FocusStyleManager.onlyShowFocusOnTabs();
type ReactEvent = React.ChangeEvent<HTMLInputElement>;
interface LexEditorProps {
fileName: RequestInfo;
}
class LexEditor extends React.Component<LexEditorProps, any> {
constructor(props: LexEditorProps) {
super(props);
this.handleOnSearch = this.handleOnSearch.bind(this);
this.state = { lexData: {}, matchedEntries: [] };
}
public componentDidMount() {
return fetch(this.props.fileName)
.then((response) => response.text())
.then((xmlString) => {
XML.parseString(xmlString, (err, lexData) => {
this.setState({ ...this.state, lexData });
});
});
// .catch((error) => {
// console.error(error);
// });
}
public render() {
return (
<div>
<LexSearch handleOnSearch={this.handleOnSearch} />
<LexMatches matchedEntries={this.state.matchedEntries} />
</div>
);
}
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<LexSearchProps, null> {
public render() {
return (
<div className="pt-input-group" style={{ width: '300px' }}>
<span className="pt-icon pt-icon-search" />
<input
className="pt-input"
type="search"
placeholder="Search input"
dir="auto"
onChange={e => this.props.handleOnSearch(e)}
/>
</div>
);
}
}
class LexMatches extends React.Component<any, any> {
public render() {
return (
<div>
{this.props.matchedEntries.map((mObj: any) => {
console.log('Matched ObjectEntry' + mObj);
return (<LexEntry key={mObj.unl} lexItem={mObj} />);
})}
</div>
);
}
}
class LexEntry extends React.Component<any, any> {
public render() {
return (
<div className="pt-form-group">
<label className="pt-label" htmlFor="example-form-group-input-a">
UNL
</label>
<div className="pt-form-content">
<input
id="example-form-group-input-a"
className="pt-input"
style={{ width: '300px' }}
placeholder="UNL Value"
value={this.props.lexItem.unl}
type="text"
dir="auto"
/>
</div>
</div>
);
}
}
export default LexEditor;