fs-walle-react-ts/src/LexEdit.tsx

import * as React from 'react';
import * as _ from 'lodash';
import {
  textInput,
  selectInput,
  imagePreview
} from './LexSingleInput';
import {
  Card,
  Button
} from 'semantic-ui-react';
const { Box } = require('reflexbox');

export class LexEdit extends React.Component<any, any> {
  imageRoot = '/png/';
  constructor(props: any) {
    super(props);
    this.state = { lexItem: this.props.lexItem };
  }
  public render() {
    let li = this.state.lexItem;
    let editLang = _.get<any>(li, this.props.fieldMetaMap.lang.lens, 'en');
    let langSelOpts = _.get<any>(this.props.selectionMeta, editLang, []);
    let lexFields = _.keys(this.props.fieldMetaMap).map(field => {
      let lens = this.props.fieldMetaMap[field].lens;
      let defaultText = _.get<any>(li, lens, '');
      let originalText = _.get<any>(this.props.lexItem, lens, '');
      let options = this.props.fieldMetaMap[field].options;
      let changed = defaultText !== originalText;
      // console.log('changed:',changed);
      let sh = (e: any) => {
        let eventData = {};
        eventData[field] = e.target.value;
        this.handleOnChange(eventData);
      };
      let params = { field, sh, defaultText, options, langSelOpts, changed };
      if (this.props.fieldMetaMap[field].type === 'text') {
        return textInput(params);
      } else if (this.props.fieldMetaMap[field].type === 'select') {
        return selectInput(params);
      } else if (this.props.fieldMetaMap[field].type === 'preview'
        && defaultText !== '') {
        return imagePreview(params);
      } else {
        return null;
      }
    });
    return (
      <Box m={2}>
        <Card raised={true}>
          <Card.Content>
            <Card.Header>
              {_.get<any>(li, 'label', '')}
              <Button
                floated="right"
                icon="download"
                onClick={(e, d) => this.handleOnLoad(d)}
              />
              <Button
                floated="right"
                icon="undo"
                onClick={(e, d) => this.handleOnUndo(d)}
              />
            </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 handleOnUndo(event: any) {
    let lexItem = this.props.lexItem;
    this.setState({ lexItem });
  }
  private handleOnLoad(event: any) {
    // this.props.load()
    console.log('loading from server');
  }

  private handleOnChange(event: any) {
    let type = _.keys(event)[0];
    let value = _.values(event)[0];
    let lens = this.props.fieldMetaMap[type].lens;
    let lexItem = _.cloneDeep(this.state.lexItem);
    _.set(lexItem, lens, value);
    this.setState({ lexItem });
  }

  private handleOnSave(event: any) {
    this.props.save(this.state.lexItem);
  }
}