feeles-ide/lib/FileDialog/SignDialog.js

The hackable and serializable IDE to make learning material

import _getIterator from 'babel-runtime/core-js/get-iterator';
import _toConsumableArray from 'babel-runtime/helpers/toConsumableArray';
import _Set from 'babel-runtime/core-js/set';
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 Dialog from 'material-ui/Dialog';
import AutoComplete from 'material-ui/AutoComplete';

import { Confirm, Abort } from './Buttons';

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

  function SignDialog() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, SignDialog);

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

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = SignDialog.__proto__ || _Object$getPrototypeOf(SignDialog)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      files: [].concat(_this.props.content),
      completeLabels: [],
      completeUrls: []
    }, _this._completeLabels = new _Set(), _this._completeUrls = new _Set(), _this.handleUpdate = function (file, sign) {
      if (file.sign === sign) return;

      _this.setState({
        files: _this.state.files.map(function (item) {
          return item === file ? item.set({ sign: sign }) : item;
        })
      });
    }, _this.handleComplete = function (sign) {
      if (!sign) return;

      if (sign.label) {
        _this._completeLabels.add(sign.label);
        _this.setState({
          completeLabels: [].concat(_toConsumableArray(_this._completeLabels))
        });
      }
      if (sign.url) {
        _this._completeUrls.add(sign.url);
        _this.setState({
          completeUrls: [].concat(_toConsumableArray(_this._completeUrls))
        });
      }
    }, _this.handleSign = function () {
      if (_this.props.content instanceof Array) {
        _this.props.resolve(_this.state.files);
      } else {
        _this.props.resolve(_this.state.files[0]);
      }
      _this.props.onRequestClose();
    }, _this.cancel = function () {
      _this.props.resolve(_this.props.content);
      _this.props.onRequestClose();
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(SignDialog, [{
    key: 'componentWillMount',
    value: function componentWillMount() {
      var _iteratorNormalCompletion = true;
      var _didIteratorError = false;
      var _iteratorError = undefined;

      try {
        for (var _iterator = _getIterator(this.props.getFiles()), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
          var file = _step.value;
          var _iteratorNormalCompletion2 = true;
          var _didIteratorError2 = false;
          var _iteratorError2 = undefined;

          try {
            for (var _iterator2 = _getIterator(file.credits), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
              var item = _step2.value;

              this._completeLabels.add(item.label);
              this._completeUrls.add(item.url);
            }
          } catch (err) {
            _didIteratorError2 = true;
            _iteratorError2 = err;
          } finally {
            try {
              if (!_iteratorNormalCompletion2 && _iterator2.return) {
                _iterator2.return();
              }
            } finally {
              if (_didIteratorError2) {
                throw _iteratorError2;
              }
            }
          }

          if (file.sign) {
            this._completeLabels.add(file.sign.label);
            this._completeUrls.add(file.sign.url);
          }
        }
      } catch (err) {
        _didIteratorError = true;
        _iteratorError = err;
      } finally {
        try {
          if (!_iteratorNormalCompletion && _iterator.return) {
            _iterator.return();
          }
        } finally {
          if (_didIteratorError) {
            throw _iteratorError;
          }
        }
      }

      if (this._completeLabels.size > 0) {
        this.setState({
          completeLabels: [].concat(_toConsumableArray(this._completeLabels))
        });
      }
      if (this._completeUrls.size > 0) {
        this.setState({
          completeUrls: [].concat(_toConsumableArray(this._completeUrls))
        });
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var actions = [React.createElement(Abort, { key: 'cancel', onClick: this.cancel }), React.createElement(Confirm, { key: 'ok', label: 'OK', onClick: this.handleSign })];

      return React.createElement(
        Dialog,
        {
          title: 'Signature',
          actions: actions,
          modal: false,
          open: true,
          bodyStyle: { overflow: 'scroll' },
          onRequestClose: this.cancel
        },
        this.state.files.map(function (item) {
          return React.createElement(SignItem, {
            key: item.key,
            file: item,
            completeLabels: _this2.state.completeLabels,
            completeUrls: _this2.state.completeUrls,
            localization: _this2.props.localization,
            onUpdate: _this2.handleUpdate,
            onComplete: _this2.handleComplete
          });
        })
      );
    }
  }]);

  return SignDialog;
}(PureComponent);

SignDialog.propTypes = {
  resolve: PropTypes.func.isRequired,
  onRequestClose: PropTypes.func.isRequired,
  content: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired,
  getFiles: PropTypes.func.isRequired,
  localization: PropTypes.object.isRequired
};
export default SignDialog;


export var SignItem = function (_PureComponent2) {
  _inherits(SignItem, _PureComponent2);

  function SignItem() {
    var _ref2;

    var _temp2, _this3, _ret2;

    _classCallCheck(this, SignItem);

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

    return _ret2 = (_temp2 = (_this3 = _possibleConstructorReturn(this, (_ref2 = SignItem.__proto__ || _Object$getPrototypeOf(SignItem)).call.apply(_ref2, [this].concat(args))), _this3), _this3.handleUpdateLabel = function (label) {
      var sign = label ? {
        label: label,
        url: _this3.url
      } : null;

      _this3.props.onUpdate(_this3.props.file, sign);

      return sign;
    }, _this3.handleUpdateUrl = function (url) {
      var sign = _this3.label ? {
        label: _this3.label,
        url: url
      } : null;

      _this3.props.onUpdate(_this3.props.file, sign);

      return sign;
    }, _this3.handleCompleteLabel = function (label) {
      var sign = _this3.handleUpdateLabel(label);
      _this3.props.onComplete(sign);
    }, _this3.handleCompleteUrl = function (url) {
      var sign = _this3.handleUpdateUrl(url);
      _this3.props.onComplete(sign);
    }, _temp2), _possibleConstructorReturn(_this3, _ret2);
  }

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


      return React.createElement(
        'div',
        { style: { marginBottom: 16 } },
        React.createElement(AutoComplete, {
          fullWidth: true,
          searchText: this.label,
          floatingLabelText: localization.credit.whoMade(file.name),
          hintText: '(c) 2017 Teramoto Daiki',
          dataSource: this.props.completeLabels,
          onUpdateInput: this.handleUpdateLabel,
          onNewRequest: this.handleCompleteLabel
        }),
        React.createElement(AutoComplete, {
          fullWidth: true,
          searchText: this.url,
          floatingLabelText: localization.credit.website,
          hintText: 'https://github.com/teramotodaiki/h4p',
          dataSource: this.props.completeUrls,
          onUpdateInput: this.handleUpdateUrl,
          onNewRequest: this.handleCompleteUrl
        })
      );
    }
  }, {
    key: 'label',
    get: function get() {
      return this.props.file.sign && this.props.file.sign.label || '';
    }
  }, {
    key: 'url',
    get: function get() {
      return this.props.file.sign && this.props.file.sign.url || '';
    }
  }]);

  return SignItem;
}(PureComponent);
SignItem.propTypes = {
  file: PropTypes.object.isRequired,
  completeLabels: PropTypes.array.isRequired,
  completeUrls: PropTypes.array.isRequired,
  localization: PropTypes.object.isRequired,
  onUpdate: PropTypes.func.isRequired,
  onComplete: PropTypes.func.isRequired
};