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

The hackable and serializable IDE to make learning material

import _extends from 'babel-runtime/helpers/extends';
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 Paper from 'material-ui/Paper';
import Popover from 'material-ui/Popover';
import RaisedButton from 'material-ui/RaisedButton';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import { emphasize } from 'material-ui/utils/colorManipulator';
import ContentAdd from 'material-ui/svg-icons/content/add';
import ContentReply from 'material-ui/svg-icons/content/reply';
import ActionOpenInNew from 'material-ui/svg-icons/action/open-in-new';

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

  function AssetButton() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, AssetButton);

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

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = AssetButton.__proto__ || _Object$getPrototypeOf(AssetButton)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      open: false
    }, _this.handleOpen = function (event) {
      _this.setState({ open: true, anchorEl: event.currentTarget });
    }, _this.handleInsert = function () {
      _this.props.onClick(_this.props);
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(AssetButton, [{
    key: 'render',
    value: function render() {
      var _this2 = this;

      var localization = this.props.localization;
      var palette = this.context.muiTheme.palette;


      var styles = {
        root: {
          position: 'relative',
          width: 80,
          height: 80,
          margin: '8px 30px 0px 8px',
          textAlign: 'center',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          border: '4px outset ' + palette.primary1Color,
          cursor: 'pointer'
        },
        popover: {
          padding: 8,
          maxWidth: 500
        },
        box: {
          display: 'flex',
          alignItems: 'baseline',
          justifyContent: 'space-between',
          marginBottom: 4
        },
        label: {
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap',
          overflow: 'hidden',
          fontSize: 10,
          fontWeight: 600
        },
        headerLabel: {
          fontSize: 18,
          fontWeight: 600
        },
        description: {
          marginTop: 8,
          fontSize: '.7rem'
        },
        code: {
          display: 'block',
          padding: '0 .5rem',
          backgroundColor: emphasize(palette.canvasColor, 0.07),
          borderRadius: 2
        },
        pre: {
          fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace'
        },
        button: {
          position: 'absolute',
          right: -34,
          bottom: -4,
          cursor: 'pointer'
        },
        icon: {
          transform: 'rotateX(180deg) rotateZ(180deg)'
        }
      };

      if (this.props.image) {
        var file = this.props.findFile(this.props.image);
        if (file) {
          styles.root = _extends({}, styles.root, {
            backgroundImage: 'url(' + file.blobURL + ')',
            backgroundSize: 'contain',
            backgroundPosition: '50% 50%',
            backgroundRepeat: 'no-repeat'
          });
        }
      }

      return React.createElement(
        Paper,
        { style: styles.root, onClick: this.handleOpen },
        React.createElement(
          'span',
          { style: styles.label },
          this.props.label
        ),
        React.createElement(
          Popover,
          {
            open: this.state.open,
            anchorEl: this.state.anchorEl,
            style: styles.popover,
            onRequestClose: function onRequestClose() {
              return _this2.setState({ open: false });
            }
          },
          React.createElement(
            'div',
            { style: styles.box },
            React.createElement(
              'span',
              { style: styles.headerLabel },
              this.props.label,
              this.props.descriptionMoreURL ? React.createElement(
                'a',
                { href: this.props.descriptionMoreURL, target: '_blank' },
                React.createElement(ActionOpenInNew, null)
              ) : null
            ),
            React.createElement(RaisedButton, {
              primary: true,
              label: localization.editorCard.insert,
              icon: React.createElement(ContentAdd, null),
              onClick: this.handleInsert
            })
          ),
          React.createElement(
            'div',
            { style: styles.description },
            this.props.description
          ),
          React.createElement(
            'code',
            { style: styles.code },
            React.createElement(
              'pre',
              { style: styles.pre },
              this.props.code
            )
          )
        ),
        React.createElement(
          FloatingActionButton,
          {
            mini: true,
            style: styles.button,
            onClick: this.handleInsert
          },
          React.createElement(ContentReply, { style: styles.icon })
        )
      );
    }
  }]);

  return AssetButton;
}(PureComponent);

AssetButton.propTypes = {
  code: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
  descriptionMoreURL: PropTypes.string,
  label: PropTypes.string,
  image: PropTypes.string,
  onClick: PropTypes.func.isRequired,
  findFile: PropTypes.func.isRequired,
  localization: PropTypes.object.isRequired
};
AssetButton.defaultProps = {
  description: ''
};
AssetButton.contextTypes = {
  muiTheme: PropTypes.object.isRequired
};
export default AssetButton;