chem-generic-ui 0.1.34 → 0.1.37

package/src/components/dnd/PanelDnD.js

@@ -0,0 +1,85 @@
+/* eslint-disable max-len */
+import React from 'react';
+import { DragSource, DropTarget } from 'react-dnd';
+import { compose } from 'redux';
+import { Card, ButtonGroup, OverlayTrigger, Tooltip, Button } from 'react-bootstrap';
+import { v4 as uuid } from 'uuid';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+const orderSource = {
+  canDrag(props) {
+    return !props.layer.wf;
+  },
+  beginDrag(props) {
+    const { layer, field, rowValue } = props;
+    return { wf: layer.wf, fid: field, rId: rowValue.id };
+  },
+};
+
+const orderTarget = {
+  canDrop(props, monitor) {
+    const src = monitor.getItem();
+    return !props.layer.wf || !src.wf;
+  },
+  drop(props, monitor) {
+    const {
+      layer, field, rowValue, handleMove
+    } = props;
+    const tar = { wf: layer.wf, fid: field, rId: rowValue.id };
+    const src = monitor.getItem();
+    if (tar.fid === src.fid && tar.rId !== src.rId) handleMove(src.rId, tar.rId);
+  },
+};
+
+const orderDragCollect = (connect, monitor) => ({
+  connectDragSource: connect.dragSource(),
+  isDragging: monitor.isDragging(),
+});
+
+const orderDropCollect = (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
+  canDrop: monitor.canDrop(),
+});
+
+const PanelDnD = ({
+  connectDragSource, connectDropTarget, isDragging, isOver, canDrop,
+  layer, id, handleChange, bs
+}) => {
+  const className = `generic_grid_dnd${isOver ? ' is-over' : ''}${canDrop ? ' can-drop' : ''}${isDragging ? ' is-dragging' : ''}`;
+  const {
+    style, label, wf, key
+  } = layer;
+  const klz = (style || 'panel_generic_heading').replace('panel_generic_heading', 'panel_generic_heading_slim');
+  const btnAdd = (
+    <OverlayTrigger delayShow={1000} placement="top" overlay={<Tooltip id="_tooltip_add_layer">add layer</Tooltip>}>
+      <Button bsSize="xsmall" onClick={event => handleChange(event, id, layer, 'layer-modal')}><FontAwesomeIcon icon="fas fa-plus" /></Button>
+    </OverlayTrigger>
+  );
+  const btnRemove = (
+    <OverlayTrigger delayShow={1000} placement="top" overlay={<Tooltip id="_tooltip_remove_layer">remove layer</Tooltip>}>
+      <Button bsSize="xsmall" onClick={event => handleChange(event, id, layer, 'layer-remove')}><FontAwesomeIcon icon="fas fa-minus" /></Button>
+    </OverlayTrigger>
+  );
+  const wfIcon = wf ? (<span>&nbsp;<FontAwesomeIcon icon="fas fa-sitemap" /></span>) : null;
+  const moveIcon = (
+    <OverlayTrigger delayShow={1000} placement="top" overlay={<Tooltip id={uuid()}>drag and drop to move position</Tooltip>}>
+      <Button onClick={() => {}} bsSize="xsmall"><FontAwesomeIcon icon="fas fa-arrows-alt" /></Button>
+    </OverlayTrigger>);
+  const btnLayer = wf ? (<ButtonGroup className="pull-right" >{btnAdd}</ButtonGroup>) : (<ButtonGroup className="pull-right" >{btnAdd}{btnRemove}{moveIcon}</ButtonGroup>);
+  const extHead = (/\./g.test(key)) ? <>({key}{wfIcon})</> : null;
+  const panelHeader = (
+    <Card.Heading className={klz}>
+      <Card.Title toggle style={{ float: 'left', lineHeight: 'normal' }}>{label}&nbsp;{extHead}</Card.Title>{btnLayer}
+      <div className="clearfix" />
+    </Card.Heading>
+  );
+  const panelHColor = bs !== 'none' ? `panel-${bs}` : '';
+  const dndKlz = wf ? `dnd-none ${panelHColor}` : `dnd ${panelHColor}`;
+  return compose(connectDragSource, connectDropTarget)(<div className={className}><div className={dndKlz}>{panelHeader}</div></div>);
+};
+
+export default compose(
+  DragSource(s => s.type, orderSource, orderDragCollect),
+  DropTarget(s => s.type, orderTarget, orderDropCollect)
+)(PanelDnD);

package/src/components/fields/ButtonConfirm.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, OverlayTrigger, Popover } from 'react-bootstrap';
+
+const ButtonConfirm = (props) => {
+  const {
+    msg, size, bs, fnClick, fnParams, place, fa, disabled
+  } = props;
+  const popover = (
+    <Popover id="popover-button-confirm">
+      {msg} <br />
+      <div className="btn-toolbar">
+        <Button bsSize="xsmall" bsStyle="danger" aria-hidden="true" onClick={() => fnClick(fnParams)}>
+          Yes
+        </Button><span>&nbsp;&nbsp;</span>
+        <Button bsSize="xsmall" bsStyle="warning">No</Button>
+      </div>
+    </Popover>
+  );
+
+  return (
+    <OverlayTrigger animation placement={place} root trigger="focus" overlay={popover}>
+      <Button bsSize={size} bsStyle={bs} disabled={disabled}>
+        <i className={`fa ${fa}`} aria-hidden="true" />
+      </Button>
+    </OverlayTrigger>
+  );
+};
+
+ButtonConfirm.propTypes = {
+  msg: PropTypes.string.isRequired,
+  fnParams: PropTypes.object.isRequired,
+  fnClick: PropTypes.func.isRequired,
+  bs: PropTypes.string,
+  size: PropTypes.string,
+  place: PropTypes.string,
+  fa: PropTypes.string,
+  disabled: PropTypes.bool,
+};
+
+ButtonConfirm.defaultProps = {
+  bs: 'danger', size: 'xs', place: 'right', fa: 'fa-trash-o', disabled: false
+};
+
+export default ButtonConfirm;

package/src/components/fields/ButtonTooltip.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import { v4 as uuid } from 'uuid';
+
+const ButtonTooltip = (props) => {
+  const tip = <Tooltip id={uuid()}>{props.tip}</Tooltip>;
+  const {
+    size, bs, fnClick, element, place, fa, disabled, txt
+  } = props;
+  const content = txt ? (<span>{txt}&nbsp;</span>) : '';
+  if (bs === '') {
+    return (
+      <OverlayTrigger delayShow={1000} placement={place} overlay={tip} >
+        <Button bsSize={size} onClick={() => fnClick(element)} disabled={disabled}>
+          {content}<i className={`fa ${fa}`} aria-hidden="true" />
+        </Button>
+      </OverlayTrigger>
+    );
+  }
+  return (
+    <OverlayTrigger delayShow={1000} placement={place} overlay={tip} >
+      <Button bsSize={size} bsStyle={bs} onClick={() => fnClick(element)} disabled={disabled}>
+        {content}<i className={`fa ${fa}`} aria-hidden="true" />
+      </Button>
+    </OverlayTrigger>
+  );
+};
+
+ButtonTooltip.propTypes = {
+  tip: PropTypes.string.isRequired,
+  element: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
+  fnClick: PropTypes.func.isRequired,
+  bs: PropTypes.string,
+  size: PropTypes.string,
+  place: PropTypes.string,
+  fa: PropTypes.string,
+  disabled: PropTypes.bool,
+  txt: PropTypes.string,
+};
+
+ButtonTooltip.defaultProps = {
+  bs: '', size: 'xs', place: 'right', fa: 'fa-pencil-square-o', disabled: false, txt: null, element: {}
+};
+
+export default ButtonTooltip;

package/src/components/fields/FieldLabel.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+import { v4 as uuid } from 'uuid';
+
+const FieldLabel = (props) => {
+  const { label, desc } = props;
+  return (desc && desc !== '') ? (
+    <OverlayTrigger placement="top" delayShow={1000} overlay={<Tooltip id={uuid()}>{desc}</Tooltip>}>
+      <span>{label}</span>
+    </OverlayTrigger>
+  ) : <span>{label}</span>;
+};
+
+FieldLabel.propTypes = { label: PropTypes.string.isRequired, desc: PropTypes.string };
+FieldLabel.defaultProps = { desc: '' };
+
+export default FieldLabel;

package/src/components/fields/GenDSMisType.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+const GenDSMisType = (props) => {
+  const { uiCtrl } = props;
+  if (uiCtrl) {
+    return (
+      <OverlayTrigger placement="top" delay={300} overlay={<Tooltip id="tooltip">Type (Chemical Methods Ontology) has been changed. <br />Please review this Dataset content.</Tooltip>}>
+        <span style={{ color: 'red' }}><FontAwesomeIcon icon="fas fa-exclamation-circle" />&nbsp;</span>
+      </OverlayTrigger>
+    );
+  }
+  return null;
+};
+
+GenDSMisType.propTypes = { uiCtrl: PropTypes.bool.isRequired };
+
+export default GenDSMisType;

package/src/components/fields/GenFormGroupCb.js

@@ -0,0 +1,17 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { InputGroup, FormGroup } from 'react-bootstrap';
+
+const GenFormGroupCb = (props) => {
+  const {
+    label, value, name, onChange
+  } = props;
+  return (
+    <FormGroup className="text_generic_properties">
+      {label || '' }
+      <InputGroup.Checkbox checked={value} onChange={e => onChange(e, name)} />
+    </FormGroup>
+  );
+};
+
+export default GenFormGroupCb;

package/src/components/fields/GenProperties.js

@@ -0,0 +1,56 @@
+import {
+  GenPropertiesCheckbox,
+  GenPropertiesCalculate,
+  GenPropertiesSelect,
+  GenPropertiesDrop,
+  GenPropertiesNumber,
+  GenPropertiesSystemDefined,
+  GenPropertiesInputGroup,
+  GenPropertiesTextArea,
+  GenPropertiesUpload,
+  GenDummy,
+  GenPropertiesTable,
+  GenTextFormula,
+  GenWFNext,
+  GenPropertiesText
+} from './GenPropertiesFields';
+
+const GenProperties = (opt) => {
+  const fieldProps = { ...opt, dndItems: [] };
+  const type = fieldProps.type.split('_');
+  if (opt.isSearchCriteria && type[0] === 'drag') type[0] = 'text';
+  // if (opt.isPreview && (type[0] === 'drag' || type[0] === 'upload')) type[0] = 'text';
+  switch (type[0]) {
+    case 'checkbox':
+      return GenPropertiesCheckbox(fieldProps);
+    case 'formula-field':
+      return GenPropertiesCalculate(fieldProps);
+    case 'select':
+      return GenPropertiesSelect(fieldProps);
+    case 'drag':
+      fieldProps.dndItems = [...fieldProps.dndItems, type[1]];
+      return GenPropertiesDrop(fieldProps);
+    case 'integer':
+      return GenPropertiesNumber(fieldProps);
+    case 'system-defined':
+      return GenPropertiesSystemDefined(fieldProps);
+    case 'input-group':
+      return GenPropertiesInputGroup(fieldProps);
+    case 'textarea':
+      return GenPropertiesTextArea(fieldProps);
+    case 'upload':
+      return GenPropertiesUpload(fieldProps);
+    case 'dummy':
+      return GenDummy();
+    case 'table':
+      return GenPropertiesTable(fieldProps);
+    case 'text-formula':
+      return GenTextFormula(fieldProps);
+    case 'wf-next':
+      return GenWFNext(fieldProps);
+    default:
+      return GenPropertiesText(fieldProps);
+  }
+};
+
+export default GenProperties;

package/src/components/fields/GenPropertiesFields.js

@@ -0,0 +1,318 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/anchor-is-valid */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable no-eval */
+/* eslint-disable no-restricted-globals */
+
+import React from 'react';
+import { Button, FormGroup, FormControl,
+  InputGroup, ListGroup, ListGroupItem, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import Select from 'react-select';
+import Dropzone from 'react-dropzone';
+import { v4 as uuid } from 'uuid';
+import { filter } from 'lodash';
+import FieldLabel from './FieldLabel';
+import { downloadFile, genUnit, genUnitSup, unitConvToBase } from '../tools/utils';
+import GenericElDropTarget from '../dnd/GenericElDropTarget';
+import TableRecord from '../table/TableRecord';
+
+const GenPropertiesCalculate = (opt) => {
+  const fields = (opt.layer && opt.layer.fields) || [];
+  let showVal = 0;
+  let showTxt = null;
+  let newFormula = opt.formula;
+
+  const calFields = filter(fields, o => (o.type === 'integer' || o.type === 'system-defined'));
+  const regF = /[a-zA-Z0-9]+/gm;
+  // eslint-disable-next-line max-len
+  const varFields = (opt.formula && opt.formula.match(regF)) ? opt.formula.match(regF).sort((a, b) => b.length - a.length) : [];
+
+  varFields.forEach((fi) => {
+    if (!isNaN(fi)) return;
+
+    const tmpField = calFields.find(e => e.field === fi);
+    if (typeof tmpField === 'undefined' || tmpField == null) {
+      newFormula = newFormula.replace(fi, 0);
+    } else {
+      newFormula = (tmpField.type === 'system-defined') ? newFormula.replace(fi, parseFloat(unitConvToBase(tmpField) || 0)) : newFormula.replace(fi, parseFloat(tmpField.value || 0));
+    }
+  });
+
+  if (opt.type === 'formula-field') {
+    try {
+      showVal = eval(newFormula);
+      showTxt = !isNaN(showVal) ? parseFloat(showVal.toFixed(5)) : 0;
+    } catch (e) {
+      if (e instanceof SyntaxError) {
+        showTxt = e.message;
+      }
+    }
+  }
+
+  const fieldHeader = opt.label === '' ? null : (<FieldLabel label={opt.label} desc={opt.description} />);
+  return (
+    <div>GenPropertiesCalculate</div>
+  );
+};
+
+const GenPropertiesCheckbox = opt => (
+  <div>GenPropertiesCheckbox</div>
+);
+
+const GenPropertiesDrop = (opt) => {
+  const className = opt.isRequired ? 'drop_generic_properties field_required' : 'drop_generic_properties';
+
+  let createOpt = null;
+  if (opt.value.is_new === true) {
+    createOpt = (
+      <div className="sample_radios">
+        <OverlayTrigger placement="top" overlay={<Tooltip id={uuid()}>associate with this sample</Tooltip>}>
+          <InputGroup.Radio name={`dropS_${opt.value.el_id}`} disabled={opt.value.isAssoc === true} checked={opt.value.cr_opt === 0} onChange={() => opt.onChange({ ...opt.value, cr_opt: 0 })} inline>Current</InputGroup.Radio>
+        </OverlayTrigger>
+        <OverlayTrigger placement="top" overlay={<Tooltip id={uuid()}>split from the sample first and then associate with it</Tooltip>}>
+          <InputGroup.Radio name={`dropS_${opt.value.el_id}`} checked={opt.value.cr_opt === 1} onChange={() => opt.onChange({ ...opt.value, cr_opt: 1 })} inline>Split</InputGroup.Radio>
+        </OverlayTrigger>
+        <OverlayTrigger placement="top" overlay={<Tooltip id={uuid()}>duplicate the sample first and then associate with it</Tooltip>}>
+          <InputGroup.Radio name={`dropS_${opt.value.el_id}`} checked={opt.value.cr_opt === 2} onChange={() => opt.onChange({ ...opt.value, cr_opt: 2 })} inline>Copy</InputGroup.Radio>
+        </OverlayTrigger>
+      </div>
+    );
+  }
+  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
+  const defaultIcon = opt.type === 'drag_element' ? <span className="fa fa-link icon_generic_nav indicator" /> : <span className="icon-sample indicator" />;
+  const dragTarget = opt.isPreview === true ? <div className="target">{defaultIcon}</div> : <GenericElDropTarget opt={opt} onDrop={opt.onChange} />;
+
+  return (
+    <div>GenPropertiesDrop</div>
+  );
+};
+
+const GenDummy = () => (
+  <FormGroup className="text_generic_properties">
+    <FormControl type="text" className="dummy" readOnly />
+  </FormGroup>
+);
+
+const GenPropertiesInputGroup = (opt) => {
+  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
+  const fLab = e => <div key={uuid()} className="form-control g_input_group_label">{e.value}</div>;
+  const fTxt = e => <FormControl className="g_input_group" key={e.id} type={e.type} name={e.id} value={e.value} onChange={o => opt.onSubChange(o, e.id, opt.f_obj)} />;
+  const fUnit = e => (
+    <span key={`${e.id}_GenPropertiesInputGroup`} className="input-group" style={{ width: '100%' }}>
+      <FormControl key={e.id} type="number" name={e.id} value={e.value} onChange={o => opt.onSubChange(o, e.id, opt.f_obj)} min={1} />
+      <InputGroup.Button>
+        <Button active onClick={() => opt.onSubChange(e, e.id, opt.f_obj)} bsStyle="success">
+          {genUnitSup(genUnit(e.option_layers, e.value_system).label) || ''}
+        </Button>
+      </InputGroup.Button>
+    </span>
+  );
+  const subs = opt.f_obj && opt.f_obj.sub_fields && opt.f_obj.sub_fields.map((e) => {
+    if (e.type === 'label') { return fLab(e); } if (e.type === 'system-defined') { return fUnit(e); } return fTxt(e);
+  });
+  return (
+    <div>GenPropertiesInputGroup</div>
+  );
+};
+
+const GenPropertiesNumber = (opt) => {
+  let className = opt.isEditable ? 'editable' : 'readonly';
+  className = opt.isRequired && opt.isEditable ? 'required' : className;
+  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
+  return (
+    <FormGroup>
+      {fieldHeader}
+      <FormControl
+        type="number"
+        value={opt.value}
+        onChange={opt.onChange}
+        className={className}
+        readOnly={opt.readOnly}
+        required={opt.isRequired}
+        placeholder={opt.placeholder}
+        min={1}
+      />
+    </FormGroup>
+  );
+};
+
+const GenPropertiesSelect = (opt) => {
+  const options = opt.options.map(op => ({ value: op.key, name: op.key, label: op.label }));
+  let className = opt.isEditable ? 'select_generic_properties_editable' : 'select_generic_properties_readonly';
+  className = opt.isRequired && opt.isEditable ? 'select_generic_properties_required' : className;
+  className = `${className} status-select`;
+  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
+  const val = options.find(o => o.value === opt.value) || null;
+  return (
+    <FormGroup>
+      {fieldHeader}
+      <Select
+        isClearable
+        menuContainerStyle={{ position: 'absolute' }}
+        name={opt.field}
+        multi={false}
+        options={options}
+        value={val}
+        onChange={opt.onChange}
+        className={className}
+        disabled={opt.readOnly}
+      />
+    </FormGroup>
+  );
+};
+
+const GenPropertiesSystemDefined = (opt) => {
+  let className = opt.isEditable ? 'editable' : 'readonly';
+  className = opt.isRequired && opt.isEditable ? 'required' : className;
+  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
+  return (
+    <FormGroup>
+      {fieldHeader}
+      <InputGroup>
+        <FormControl
+          type="number"
+          value={opt.value}
+          onChange={opt.onChange}
+          className={className}
+          readOnly={opt.readOnly}
+          required={opt.isRequired}
+          placeholder={opt.placeholder}
+          min={1}
+        />
+          <Button disabled={opt.readOnly} active onClick={opt.onClick} variant="success">
+            {genUnitSup(genUnit(opt.option_layers, opt.value_system).label) || ''}
+          </Button>
+      </InputGroup>
+    </FormGroup>
+  );
+};
+
+const GenPropertiesTable = (opt) => {
+  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
+  return (
+    <div>GenPropertiesTable</div>
+  );
+};
+
+const GenPropertiesText = (opt) => {
+  let className = opt.isEditable ? 'editable' : 'readonly';
+  className = opt.isRequired && opt.isEditable ? 'required' : className;
+  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
+  return (
+    <FormGroup className="text_generic_properties">
+      {fieldHeader}
+      <FormControl
+        type="text"
+        value={opt.value}
+        onChange={opt.onChange}
+        className={className}
+        readOnly={opt.readOnly}
+        required={opt.isRequired}
+        placeholder={opt.placeholder}
+      />
+    </FormGroup>
+  );
+};
+
+const GenPropertiesTextArea = (opt) => {
+  let className = opt.isEditable ? 'editable' : 'readonly';
+  className = opt.isRequired && opt.isEditable ? 'required' : className;
+  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
+  return (
+    <div>GenPropertiesTextArea</div>
+  );
+};
+
+const GenTextFormula = (opt) => {
+  const { layers } = opt;
+  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
+  const subs = [];
+  (opt.f_obj && opt.f_obj.text_sub_fields).map((e) => {
+    const { layer, field, separator } = e;
+    if (field && field !== '') {
+      if (field.includes('[@@]')) {
+        const fds = field.split('[@@]');
+        if (fds && fds.length === 2) {
+          const fdt = ((layers[layer] || {}).fields || []).find(f => f.field === fds[0] && f.type === 'table');
+          ((fdt && fdt.sub_values) || []).forEach((svv) => {
+            if (svv && svv[fds[1]] && svv[fds[1]] !== '') { subs.push(svv[fds[1]]); subs.push(separator); }
+          });
+        }
+      } else {
+        const fd = ((layers[layer] || {}).fields || []).find(f => f.field === field);
+        if (fd && fd.value && fd.value !== '') { subs.push(fd.value); subs.push(separator); }
+      }
+    }
+    return true;
+  });
+  return (
+    <div>GenTextFormula</div>
+  );
+};
+
+const renderListGroupItem = (opt, attachment) => {
+  const delBtn = (
+    <Button bsSize="xsmall" id={attachment.uid} className="button-right" onClick={() => opt.onChange({ ...opt.value, action: 'd', uid: attachment.uid })}>
+      <i className="fa fa-times" aria-hidden="true" />
+    </Button>
+  );
+  const filename = attachment.aid ?
+    (<a onClick={() => downloadFile({ contents: `/api/v1/attachments/${attachment.aid}`, name: attachment.filename })} style={{ cursor: 'pointer' }}>{attachment.filename}</a>) : attachment.filename;
+  return (
+    <div>renderListGroupItem</div>
+  );
+};
+
+const GenPropertiesUpload = (opt) => {
+  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
+  const attachments = (opt.value && opt.value.files) || [];
+  if (opt.isSearchCriteria) return (<div>(This is an upload)</div>);
+
+  return (
+    <div>GenPropertiesUpload</div>
+  );
+};
+
+const GenWFNext = (opt) => {
+  const options = (opt.f_obj.wf_options || []).map((op) => {
+    const label = op.label.match(/(.*)\(.*\)/);
+    return ({ value: op.key, name: op.key, label: label[1] === '' ? label[0] : label[1] });
+  });
+  let className = opt.isEditable ? 'select_generic_properties_editable' : 'select_generic_properties_readonly';
+  className = opt.isRequired && opt.isEditable ? 'select_generic_properties_required' : className;
+  className = `${className} status-select`;
+  const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
+  const val = options.find(o => o.value === opt.value) || null;
+  return (
+    <FormGroup>
+      {fieldHeader}
+      <Select
+        menuContainerStyle={{ position: 'absolute' }}
+        name={opt.field}
+        multi={false}
+        options={options}
+        value={val}
+        onChange={opt.onChange}
+        className={className}
+        disabled={opt.readOnly}
+      />
+    </FormGroup>
+  );
+};
+
+export {
+  GenPropertiesCalculate,
+  GenPropertiesCheckbox,
+  GenPropertiesDrop,
+  GenDummy,
+  GenTextFormula,
+  GenPropertiesInputGroup,
+  GenPropertiesNumber,
+  GenPropertiesSelect,
+  GenPropertiesSystemDefined,
+  GenPropertiesTable,
+  GenPropertiesText,
+  GenPropertiesTextArea,
+  GenPropertiesUpload,
+  GenWFNext
+};