feeles-ide/lib/Cards/EnvCard/EnvItem.js

The hackable and serializable IDE to make learning material

import _slicedToArray from 'babel-runtime/helpers/slicedToArray';
import _defineProperty from 'babel-runtime/helpers/defineProperty';
import _toArray from 'babel-runtime/helpers/toArray';
import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _createClass from 'babel-runtime/helpers/createClass';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import TextField from 'material-ui/TextField';
import Checkbox from 'material-ui/Checkbox';

import EditableLabel from '../../jsx/EditableLabel';

var EnvItem = function (_PureComponent) {
  _inherits(EnvItem, _PureComponent);

  function EnvItem() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, EnvItem);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = EnvItem.__proto__ || _Object$getPrototypeOf(EnvItem)).call.apply(_ref, [this].concat(args))), _this), _this.changeKey = function (key) {
      var _updateEnv;

      var _this$props = _this.props,
          itemKey = _this$props.itemKey,
          updateEnv = _this$props.updateEnv;

      var _this$props$item = _toArray(_this.props.item),
          item = _this$props$item.slice(0);

      updateEnv((_updateEnv = {}, _defineProperty(_updateEnv, itemKey, undefined), _defineProperty(_updateEnv, key, item), _updateEnv));
    }, _this.changeValue = function (value) {
      var _this$props2 = _this.props,
          itemKey = _this$props2.itemKey,
          updateEnv = _this$props2.updateEnv;

      var _this$props$item2 = _slicedToArray(_this.props.item, 3),
          type = _this$props$item2[1],
          tooltip = _this$props$item2[2];

      var item = [value, type, tooltip];
      updateEnv(_defineProperty({}, itemKey, item));
    }, _this.changeTooltip = function (tooltip) {
      var _this$props3 = _this.props,
          itemKey = _this$props3.itemKey,
          updateEnv = _this$props3.updateEnv;

      var _this$props$item3 = _slicedToArray(_this.props.item, 2),
          value = _this$props$item3[0],
          type = _this$props$item3[1];

      var item = [value, type, tooltip];
      updateEnv(_defineProperty({}, itemKey, item));
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(EnvItem, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          itemKey = _props.itemKey,
          localization = _props.localization;

      var _props$item = _slicedToArray(this.props.item, 3),
          value = _props$item[0],
          type = _props$item[1],
          tooltip = _props$item[2];

      var styles = {
        root: {
          width: '100%',
          display: 'flex',
          flexWrap: 'wrap',
          alignItems: 'center',
          paddingTop: 12,
          paddingBottom: 12
        },
        key: {
          flex: '1 1 auto',
          maxWidth: 100
        },
        value: {
          flex: '1 1 auto',
          margin: '0 4px'
        },
        tooltip: {
          flex: '1 1 auto',
          fontSize: '.8em',
          maxWidth: 140
        }
      };

      return React.createElement(
        'div',
        { style: styles.root },
        React.createElement(EditableLabel, {
          id: 'tf1',
          defaultValue: itemKey,
          style: styles.key,
          tapTwiceQuickly: localization.common.tapTwiceQuickly,
          onEditEnd: this.changeKey
        }),
        React.createElement(
          'div',
          { style: styles.value },
          React.createElement(Configurable, { type: type, value: value, onChange: this.changeValue })
        ),
        React.createElement(EditableLabel, {
          id: 'tf2',
          defaultValue: tooltip,
          style: styles.tooltip,
          tapTwiceQuickly: localization.common.tapTwiceQuickly,
          onEditEnd: this.changeTooltip
        })
      );
    }
  }]);

  return EnvItem;
}(PureComponent);

EnvItem.propTypes = {
  item: PropTypes.array.isRequired,
  itemKey: PropTypes.any.isRequired,
  updateEnv: PropTypes.func.isRequired,
  localization: PropTypes.object.isRequired
};
export default EnvItem;


var Configurable = function Configurable(props) {
  switch (props.type) {
    case 'boolean':
      return React.createElement(Checkbox, {
        defaultChecked: props.value,
        style: { width: 40 },
        onCheck: function onCheck(e, value) {
          return props.onChange(value);
        }
      });
    case 'number':
      return React.createElement(TextField, {
        id: 'tf',
        defaultValue: props.value,
        style: { width: 100 },
        inputStyle: { textAlign: 'right' },
        onChange: function onChange(e) {
          var float = parseFloat(e.target.value);
          if (!isNaN(float)) {
            props.onChange(float);
          }
        }
      });
    case 'string':
      return React.createElement(TextField, {
        multiLine: true,
        id: 'tf',
        defaultValue: props.value,
        style: { width: 200 },
        onChange: function onChange(e) {
          return props.onChange(e.target.value);
        }
      });
    default:
      return null;
  }
};

Configurable.propTypes = {
  type: PropTypes.string.isRequired,
  value: PropTypes.any.isRequired,
  onChange: PropTypes.func.isRequired
};