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

reorganized

master
Malar Kannan 2017-06-27 15:03:34 +05:30
parent 14d031fea8
commit 60ec23b241
4 changed files with 122 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -19,3 +19,5 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*
public/png

112
src/LexComponents.tsx
View File

@ -1,37 +1,17 @@
import * as React from 'react';
import * as _ from 'lodash';
import { LexEdit, fieldMetaMap } from './LexEdit';
import {
Image,
Input,
Dropdown,
Card,
Button
} from 'semantic-ui-react';
import * as XML from 'xml2js';
import { LexSingleInput } from './LexInputComponents';
const { Flex, Box } = require('reflexbox');
const { Flex } = require('reflexbox');
interface LexEditorProps {
fileName: RequestInfo;
}
// const imageRoot = 'https://s3-us-west-2.amazonaws.com/aac-buddy/static/img/png/';
const imageRoot = 'https://localhost:3000/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' },
};
export class LexEditor extends React.Component<LexEditorProps, any> {
lexData: any;
@ -179,91 +159,3 @@ function LexMatches(props: any) {
</Flex>
);
}
class LexEdit extends React.Component<any, any> {
public render() {
let li = this.props.lexItem;
let lexFields = _.keys(fieldMetaMap).map(field => {
let defaultText = _.get<any>(li, fieldMetaMap[field].lens, '');
let sh = (e: any) => {
let eventData = {};
eventData[field] = e.target.value;
this.handleOnChange(eventData);
};
// let pred = (x: any) => _.isEqual(fieldMetaMap[ft].type, x);
// _.findIndex(['text', 'number'], pred) !== -1
if (fieldMetaMap[field].type === 'text') {
return (
<LexSingleInput key={field} labelText={_.capitalize(field)}>
<Input
onChange={sh}
defaultValue={defaultText}
placeholder={field}
type="text"
dir="auto"
style={{ width: '10em' }}
/>
</LexSingleInput>
);
} else if (fieldMetaMap[field].type === 'select') {
return (
<LexSingleInput key={field} labelText={_.capitalize(field)}>
<select
onChange={sh}
style={{ width: '10em' }}
defaultValue={defaultText}
>
{this.props.selectionMeta[field].map((k: any, i: any, c: any) => {
return <option key={i} value={k}> {k}</option>;
})}
</select>
</LexSingleInput>
);
} else if (fieldMetaMap[field].type === 'preview' && defaultText !== '') {
let imageSrc = imageRoot + defaultText;
return (
<LexSingleInput key={field} labelText={_.capitalize(field)}>
<Image src={imageSrc} size="tiny" bordered={true} />
</LexSingleInput>
);
} else {
return null;
}
});
return (
<Box m={2}>
<Card raised={true}>
<Card.Content>
<Card.Header>
{_.get<any>(li, 'label', '')}
</Card.Header>
<Card.Meta>
language: {_.get<any>(li, '$.id', '')}
</Card.Meta>
<Card.Description>
{lexFields}
</Card.Description>
</Card.Content>
<Card.Content extra={true}>
<Button
basic={true}
fluid={true}
color="green"
onClick={(e, d) => this.handleOnSave(d)}
>
Save
</Button>
</Card.Content>
</Card>
</Box>
);
}
private handleOnChange(event: any) {
this.setState(event);
}
private handleOnSave(event: any) {
console.log('saving object', this.props.lexItem);
}
}

117
src/LexEdit.tsx Normal file
View File

@ -0,0 +1,117 @@
import * as React from 'react';
import * as _ from 'lodash';
import LexSingleInput from './LexSingleInput';
import {
Image,
Input,
Card,
Button
} from 'semantic-ui-react';
const { Box } = require('reflexbox');
const imageRoot = 'http://localhost:3000/png/';
export 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' },
};
export class LexEdit extends React.Component<any, any> {
public render() {
let li = this.props.lexItem;
let lexFields = _.keys(fieldMetaMap).map(field => {
let defaultText = _.get<any>(li, fieldMetaMap[field].lens, '');
let sh = (e: any) => {
let eventData = {};
eventData[field] = e.target.value;
this.handleOnChange(eventData);
};
// let pred = (x: any) => _.isEqual(fieldMetaMap[ft].type, x);
// _.findIndex(['text', 'number'], pred) !== -1
if (fieldMetaMap[field].type === 'text') {
return (
<LexSingleInput key={field} labelText={_.capitalize(field)}>
<Input
onChange={sh}
defaultValue={defaultText}
placeholder={field}
type="text"
dir="auto"
style={{ width: '10em' }}
/>
</LexSingleInput>
);
} else if (fieldMetaMap[field].type === 'select') {
return (
<LexSingleInput key={field} labelText={_.capitalize(field)}>
<select
onChange={sh}
style={{ width: '10em' }}
defaultValue={defaultText}
>
{this.props.selectionMeta[field].map((k: any, i: any, c: any) => {
return <option key={i} value={k}> {k}</option>;
})}
</select>
</LexSingleInput>
);
} else if (fieldMetaMap[field].type === 'preview' && defaultText !== '') {
let imageSrc = imageRoot + defaultText;
return (
<LexSingleInput key={field} labelText={_.capitalize(field)}>
<Image src={imageSrc} size="tiny" bordered={true} />
</LexSingleInput>
);
} else {
return null;
}
});
return (
<Box m={2}>
<Card raised={true}>
<Card.Content>
<Card.Header>
{_.get<any>(li, 'label', '')}
</Card.Header>
<Card.Meta>
language: {_.get<any>(li, '$.id', '')}
</Card.Meta>
<Card.Description>
{lexFields}
</Card.Description>
</Card.Content>
<Card.Content extra={true}>
<Button
basic={true}
fluid={true}
color="green"
onClick={(e, d) => this.handleOnSave(d)}
>
Save
</Button>
</Card.Content>
</Card>
</Box>
);
}
private handleOnChange(event: any) {
this.setState(event);
}
private handleOnSave(event: any) {
console.log('saving object', this.props.lexItem);
}
}

2
src/LexInputComponents.tsx → src/LexSingleInput.tsx
View File

@ -2,7 +2,7 @@ import * as React from 'react';
import { Label, Form } from 'semantic-ui-react';
const { Flex, Box } = require('reflexbox');
export class LexSingleInput extends React.Component<any, any> {
export default class LexSingleInput extends React.Component<any, any> {
public render() {
return (
<div>