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

import * as React from 'react';
import * as _ from 'lodash';
import { Label, Form } from 'semantic-ui-react';
const { Flex, Box } = require('reflexbox');
import {
  Input,
  Image
} from 'semantic-ui-react';
import {
  SortableContainer,
  SortableElement,
  arrayMove
} from 'react-sortable-hoc';

class LexSingleInput extends React.Component<any, any> {
  public render() {
    return (
      <div>
        <Form>
          <Form.Group as={Flex} inline={true} style={{ margin: '0 0 5px 5px' }}>
            <Form.Field as={Box} w={2 / 5} style={{ textAlign: 'right' }}>
              {this.props.label}
            </Form.Field>
            <Form.Field as={Box} w={3 / 5} >
              {this.props.children}
            </Form.Field>
          </Form.Group>
        </Form>
      </div>
    );
  }
}

function changedLabel(changed: boolean, text: string) {
  let labelClass = changed ? 'olive' : '';
  return (
    <Label
      pointing="right"
      className={labelClass}
    >
      {text}
    </Label>
  );
}

const imageRoot = '/png/';

export function textInput(params: any) {
  let { field, sh, value, changed } = params;
  return (
    <LexSingleInput
      label={changedLabel(changed, field)}
      key={field}
    >
      <Input
        onChange={sh}
        value={value}
        placeholder={field}
        type="text"
        dir="auto"
        style={{ width: '10em' }}
      />
    </LexSingleInput>
  );
}

export function selectInput(params: any) {
  let { field, sh, value, options, langSelOpts, changed } = params;
  let staticOpts = options;
  let fieldOpts = _.get<any>(langSelOpts, field, []);
  let selOpts = staticOpts ? staticOpts : fieldOpts;
  return (
    <LexSingleInput key={field} label={changedLabel(changed, field)}>
      <select
        onChange={sh}
        style={{ width: '10em' }}
        value={value}
      >
        {selOpts.map((k: any, i: any, c: any) => {
          return <option key={i} value={k}> {k}</option>;
        })}
      </select>
    </LexSingleInput>
  );
}

export function imagePreview(params: any) {
  let { field, value, changed } = params;
  let imageSrc = imageRoot + value;
  return value !== '' ? (
    <LexSingleInput key={field} label={changedLabel(changed, field)}>
      <Image src={imageSrc} size="tiny" bordered={true} />
    </LexSingleInput>
  ) : textInput(params);
}

const SortableItem = SortableElement<any>(({ value }) =>
  <li>{value}</li>
);

const SortableList = SortableContainer<any>(({ items }) => {
  return (
    <ul>
      {items.map((value: any, index: any) => (
        <SortableItem key={`item-${index}`} index={index} value={value.value} />
      ))}
    </ul>
  );
});

export function listInput(params: any) {
  let { field, value, changed } = params;
  let sortEndHandler = (idxs: any) => {
    let { oldIndex, newIndex } = idxs;
    arrayMove(value, oldIndex, newIndex);
  };
  console.log('value: ', value);
  return (
    <LexSingleInput key={field} label={changedLabel(changed, field)}>
      <SortableList
        items={value}
        onSortEnd={sortEndHandler}
        helperClass="SortableHelper"
      />
    </LexSingleInput>
  );
}