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

removed mode enum

master
Malar Kannan 2017-06-20 23:02:42 +05:30
parent 2c62605deb
commit 421b7c79dc
2 changed files with 49 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.tsx
View File

@ -9,7 +9,9 @@ class App extends React.Component<{}, null> {
<div>
<nav className="pt-navbar pt-dark">
<div className="pt-navbar-group pt-align-left">
<button className="pt-button pt-minimal pt-icon-large pt-icon-edit" />
<button
className="pt-button pt-minimal pt-icon-large pt-icon-edit"
/>
<div className="pt-navbar-heading">Freespeech Lexicon Editor</div>
</div>
</nav>

85
src/LexComponents.tsx
View File

@ -8,10 +8,6 @@ const { Flex, Box } = require('reflexbox');
FocusStyleManager.onlyShowFocusOnTabs();
enum EditorMode {
Empty = 1, Edit, Add
}
interface LexEditorProps {
fileName: RequestInfo;
}
@ -33,7 +29,7 @@ const searchLensMap = {
class LexEditor extends React.Component<LexEditorProps, any> {
constructor(props: LexEditorProps) {
super(props);
this.state = { lexData: {}, matchedEntries: [] };
this.state = { lexData: {}, matchedEntries: [], searchText: '' };
}
public componentDidMount() {
@ -57,7 +53,7 @@ class LexEditor extends React.Component<LexEditorProps, any> {
matchedEntries={this.state.matchedEntries}
mode={this.state.mode}
searchText={this.state.searchText}
searchType={this.state.searchType}
searchLens={this.state.searchLens}
/>
</div>
);
@ -65,7 +61,7 @@ class LexEditor extends React.Component<LexEditorProps, any> {
private handleOnSearch(searchEvent: any): void {
let searchText = searchEvent.searchValue;
let searchType = searchLensMap[searchEvent.searchType];
let searchLens = searchLensMap[searchEvent.searchType];
let matchedEntries = _.chain(this.state.lexData)
.get<any>('document.lexicon[0].item')
.flatMap((o: any) => _.chain(o)
@ -76,11 +72,9 @@ class LexEditor extends React.Component<LexEditorProps, any> {
.value())
.value()
)
.filter((q: any) => _.get<any>(q, searchType, '') === searchText)
.filter((q: any) => _.get<any>(q, searchLens, '') === 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 });
this.setState({ ...this.state, matchedEntries, searchText, searchLens });
}
}
@ -95,8 +89,8 @@ class LexSearch extends React.Component<any, any> {
onChange={e => this.handleTypeChange(e)}
>
<select>
{_.keys(searchLensMap).map(k => {
return <option value={k}> {_.capitalize(k)}</option>;
{_.keys(searchLensMap).map((k, i, c) => {
return <option key={i} value={k}> {_.capitalize(k)}</option>;
})}
</select>
</div>
@ -116,39 +110,43 @@ class LexSearch extends React.Component<any, any> {
private handleLookup(e: any) {
this.searchValue = e.target.value;
this.props.handleOnSearch({ searchType: this.searchType, searchValue: this.searchValue });
this.props.handleOnSearch({
searchType: this.searchType
, searchValue: this.searchValue
});
}
private handleTypeChange(e: any) {
this.searchType = e.target.value;
this.props.handleOnSearch({ searchType: this.searchType, searchValue: this.searchValue });
this.props.handleOnSearch({
searchType: this.searchType
, searchValue: this.searchValue
});
}
}
function selectMode(props: any) {
let editEntries = props.matchedEntries.map((mObj: any) => {
let uniqueKey = mObj.guid[0] + '#' + mObj.$.id;
return (<LexEdit key={uniqueKey} lexItem={mObj} />);
});
switch (props.mode) {
case EditorMode.Edit:
return editEntries;
case EditorMode.Add:
let addProps = {};
_.set(addProps, props.searchType, props.searchText);
return <LexEdit lexItem={addProps} />;
default:
return (
<div className="pt-non-ideal-state">
<div className="pt-non-ideal-state-visual pt-non-ideal-state-icon">
<span className="pt-icon pt-icon-folder-open" />
</div>
<h4 className="pt-non-ideal-state-title">Empty</h4>
<div className="pt-non-ideal-state-description">
Type something in the searchbar.
</div>
if (props.searchText === '') {
return (
<div className="pt-non-ideal-state">
<div className="pt-non-ideal-state-visual pt-non-ideal-state-icon">
<span className="pt-icon pt-icon-folder-open" />
</div>
);
<h4 className="pt-non-ideal-state-title">Empty</h4>
<div className="pt-non-ideal-state-description">
Type something in the searchbar.
</div>
</div>
);
} else {
let editEntries = props.matchedEntries.map((mObj: any) => {
let uniqueKey = mObj.guid[0] + '#' + mObj.$.id;
return (<LexEdit key={uniqueKey} lexItem={mObj} />);
});
let addProps = {};
_.set(addProps, props.searchLens, props.searchText);
editEntries.push(<LexEdit key={props.searchText} lexItem={addProps} />);
return editEntries;
}
}
@ -167,7 +165,12 @@ class LexEdit extends React.Component<any, any> {
return this.getLabelField(e, searchLensMap[e], li);
});
return (
<Box wx={240} mx={10} my={20} className="pt-card pt-elevation-2 pt-interactive">
<Box
wx={240}
mx={10}
my={20}
className="pt-card pt-elevation-2 pt-interactive"
>
<label className="pt-label">
GUID {_.get<any>(li, 'guid', '')}
</label>
@ -207,7 +210,11 @@ class LexField extends React.Component<any, any> {
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">
<label
style={{ textAlign: 'right' }}
className="pt-label"
htmlFor="example-form-group-input-a"
>
{this.props.labelText}
</label>
</Box>