feeles-ide/lib/Cards/EditorCard/CreditBar.js

The hackable and serializable IDE to make learning material

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 _extends from 'babel-runtime/helpers/extends';
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import FlatButton from 'material-ui/FlatButton';
import Popover from 'material-ui/Popover';

import { SignDialog } from '../../FileDialog/';

var getStyle = function getStyle(props, context) {
  var palette = context.muiTheme.palette;


  return {
    root: _extends({
      display: 'flex',
      justifyContent: 'space-between',
      padding: 4,
      borderTop: '1px solid ' + palette.primary1Color
    }, props.style),
    smallButton: {
      height: '1rem',
      lineHeight: '1rem'
    },
    smallLabel: {
      fontSize: '.5rem',
      padding: '0 8px',
      textTransform: 'none'
    }
  };
};

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

  function CreditBar() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, CreditBar);

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

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = CreditBar.__proto__ || _Object$getPrototypeOf(CreditBar)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      open: false,
      anchorEl: null
    }, _this.handleSignDialog = function () {
      var file = _this.props.file;

      var dialogProps = {
        content: file,
        getFiles: _this.props.getFiles
      };
      _this.props.openFileDialog(SignDialog, dialogProps).then(function (nextFile) {
        return _this.props.putFile(file, nextFile);
      });
    }, _this.handleShowCredits = function (event) {
      _this.setState({
        open: true,
        anchorEl: event.currentTarget
      });
    }, _this.handleRequestClose = function () {
      _this.setState({
        open: false
      });
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(CreditBar, [{
    key: 'renderCredit',
    value: function renderCredit(credit, styles) {
      return credit.url ? React.createElement(
        'a',
        { href: credit.url, target: '_blank', style: styles.smallLabel },
        credit.label
      ) : React.createElement(
        'span',
        { style: styles.smallLabel },
        credit.label
      );
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          file = _props.file,
          localization = _props.localization;

      var styles = getStyle(this.props, this.context);

      return React.createElement(
        'div',
        { style: styles.root },
        file.credit && file.credit !== file.sign ? this.renderCredit(file.credit, styles) : React.createElement(FlatButton, {
          secondary: !file.sign,
          label: file.sign ? file.sign.label : localization.credit.writeAuthorName,
          style: styles.smallButton,
          labelStyle: styles.smallLabel,
          onClick: this.handleSignDialog
        }),
        file.credits.length > 0 ? React.createElement(FlatButton, {
          label: localization.credit.credits,
          style: styles.smallButton,
          labelStyle: styles.smallLabel,
          onClick: this.handleShowCredits
        }) : null,
        React.createElement(
          Popover,
          {
            open: this.state.open,
            anchorEl: this.state.anchorEl,
            anchorOrigin: { horizontal: 'left', vertical: 'bottom' },
            targetOrigin: { horizontal: 'left', vertical: 'top' },
            onRequestClose: this.handleRequestClose
          },
          file.credits.map(function (credit) {
            return React.createElement(
              'div',
              { key: credit.hash },
              _this2.renderCredit(credit, styles)
            );
          })
        )
      );
    }
  }]);

  return CreditBar;
}(PureComponent);

CreditBar.propTypes = {
  file: PropTypes.object.isRequired,
  localization: PropTypes.object.isRequired,
  openFileDialog: PropTypes.func.isRequired,
  putFile: PropTypes.func.isRequired,
  getFiles: PropTypes.func.isRequired,
  style: PropTypes.object.isRequired
};
CreditBar.defaultProps = {
  style: {}
};
CreditBar.contextTypes = {
  muiTheme: PropTypes.object.isRequired
};
export default CreditBar;