reorganized
Malar Kannan
parent
14d031fea8
commit
60ec23b241
|
|
@ -19,3 +19,5 @@
|
||||||
npm-debug.log*
|
npm-debug.log*
|
||||||
yarn-debug.log*
|
yarn-debug.log*
|
||||||
yarn-error.log*
|
yarn-error.log*
|
||||||
|
|
||||||
|
public/png
|
||||||
|
|
|
||||||
|
|
@ -1,37 +1,17 @@
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import * as _ from 'lodash';
|
import * as _ from 'lodash';
|
||||||
|
import { LexEdit, fieldMetaMap } from './LexEdit';
|
||||||
import {
|
import {
|
||||||
Image,
|
|
||||||
Input,
|
Input,
|
||||||
Dropdown,
|
Dropdown,
|
||||||
Card,
|
|
||||||
Button
|
|
||||||
} from 'semantic-ui-react';
|
} from 'semantic-ui-react';
|
||||||
import * as XML from 'xml2js';
|
import * as XML from 'xml2js';
|
||||||
import { LexSingleInput } from './LexInputComponents';
|
const { Flex } = require('reflexbox');
|
||||||
const { Flex, Box } = require('reflexbox');
|
|
||||||
|
|
||||||
interface LexEditorProps {
|
interface LexEditorProps {
|
||||||
fileName: RequestInfo;
|
fileName: RequestInfo;
|
||||||
}
|
}
|
||||||
// const imageRoot = 'https://s3-us-west-2.amazonaws.com/aac-buddy/static/img/png/';
|
// 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> {
|
export class LexEditor extends React.Component<LexEditorProps, any> {
|
||||||
lexData: any;
|
lexData: any;
|
||||||
|
|
@ -179,91 +159,3 @@ function LexMatches(props: any) {
|
||||||
</Flex>
|
</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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -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,7 +2,7 @@ import * as React from 'react';
|
||||||
import { Label, Form } from 'semantic-ui-react';
|
import { Label, Form } from 'semantic-ui-react';
|
||||||
const { Flex, Box } = require('reflexbox');
|
const { Flex, Box } = require('reflexbox');
|
||||||
|
|
||||||
export class LexSingleInput extends React.Component<any, any> {
|
export default class LexSingleInput extends React.Component<any, any> {
|
||||||
public render() {
|
public render() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
Loading…
Reference in New Issue