feeles-ide/lib/Cards/ShotCard/index.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 Card from 'material-ui/Card';
import CardWindow from '../CardWindow';
import uniq from 'lodash/uniq';

import ShotPane from './ShotPane';
import shallowEqual from '../../utils/shallowEqual';

var scrapbox = {
  url: function url(title) {
    return 'https://scrapbox.io/hackforplay/' + encodeURIComponent(title);
  },
  page: function page(title) {
    return 'https://scrapbox.io/api/pages/hackforplay/' + encodeURIComponent(title);
  },
  icon: function icon(title) {
    return 'https://scrapbox.io/api/pages/hackforplay/' + encodeURIComponent(title) + '/icon';
  }
};

var getStyle = function getStyle() {
  return {
    hintFlexbox: {
      display: 'flex',
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
      margin: '1em 0'
    },
    hintHeading: {
      fontSize: '1.5em',
      fontWeight: 600,
      marginRight: '1em'
    },
    cardLink: {
      textDecoration: 'none'
    },
    cardFlexbox: {
      display: 'flex',
      flexDirection: 'row',
      alignItems: 'stretch',
      overflow: 'hidden'
    },
    card: {
      width: '10em',
      height: '10em',
      marginRight: '1em',
      wordBreak: 'break-all',
      padding: '1em'
    },
    cardTitle: {
      margin: 0,
      overflow: 'hidden',
      display: '-webkit-box',
      WebkitLineClamp: 3,
      WebkitBoxOrient: 'vertical',
      textOverflow: 'ellipsis'
    },
    cardIcon: {
      width: '100%'
    }
  };
};

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

  function ShotCard() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, ShotCard);

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

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ShotCard.__proto__ || _Object$getPrototypeOf(ShotCard)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      file: null,
      completes: [],
      footer: null
    }, _this.handleCode = function (event) {
      var value = event.data.value;

      if (value) {
        // feeles.openCode()
        var file = _this.props.findFile(value);
        _this.setState({ file: file });
        _this.props.updateCard('ShotCard', { visible: true });
      } else {
        // feeles.closeCode()
        _this.props.updateCard('ShotCard', { visible: false });
      }
    }, _this.handleComplete = function (event) {
      var value = event.data.value;
      // feeles.exports

      if (!shallowEqual(value, _this.state.completes)) {
        _this.setState({ completes: value });
      }
    }, _this.handleSetLinkObjects = function () {
      var linkObjects = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];

      var titles = linkObjects.map(function (obj) {
        return obj.linkText;
      });
      _this.setState({
        footer: _this.renderFooter(uniq(titles))
      });
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(ShotCard, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      var globalEvent = this.props.globalEvent;

      globalEvent.on('message.code', this.handleCode);
      globalEvent.on('message.complete', this.handleComplete);
    }
  }, {
    key: 'renderFooter',
    value: function renderFooter(titles) {
      var styles = getStyle();
      return titles.length > 0 ? React.createElement(
        'div',
        null,
        React.createElement(
          'div',
          { style: styles.hintFlexbox },
          React.createElement(
            'div',
            { style: styles.hintHeading },
            '\uD83D\uDCA1 \u30D2\u30F3\u30C8'
          ),
          React.createElement(
            'div',
            null,
            React.createElement(
              'a',
              { href: 'http://scrapbox.io' },
              'Scrapbox'
            ),
            ' \u306B\u3068\u3073\u307E\u3059 (\u5B9F\u9A13\u6BB5\u968E\u306E\u6A5F\u80FD)'
          )
        ),
        React.createElement(
          'div',
          { style: styles.cardFlexbox },
          titles.map(function (title) {
            return React.createElement(
              'a',
              {
                key: title,
                href: scrapbox.url(title),
                rel: 'noopener noreferrer',
                target: '_blank',
                style: styles.cardLink
              },
              React.createElement(
                Card,
                { style: styles.card },
                React.createElement(
                  'div',
                  { style: styles.cardTitle },
                  title
                ),
                React.createElement('img', {
                  src: scrapbox.icon(title),
                  alt: '\u30DA\u30FC\u30B8\u304C\u5B58\u5728\u3057\u306A\u3044\u304B\u3001\u30A2\u30A4\u30B3\u30F3\u304C\u8A2D\u5B9A\u3055\u308C\u3066\u3044\u307E\u305B\u3093',
                  style: styles.cardIcon
                })
              )
            );
          }).concat(React.createElement('div', { key: '$lastcard' }))
        )
      ) : null;
    }
  }, {
    key: 'render',
    value: function render() {
      var visible = this.props.cardPropsBag.visible;


      return React.createElement(
        CardWindow,
        _extends({
          icon: this.props.localization.shotCard.title
        }, this.props.cardPropsBag, {
          footer: this.state.footer
        }),
        visible ? React.createElement(ShotPane, {
          fileView: this.props.fileView,
          file: this.state.file,
          completes: this.state.completes,
          files: this.props.files,
          findFile: this.props.findFile,
          localization: this.props.localization,
          getConfig: this.props.getConfig,
          loadConfig: this.props.loadConfig,
          globalEvent: this.props.globalEvent,
          handleSetLinkObjects: this.handleSetLinkObjects
        }) : null
      );
    }
  }]);

  return ShotCard;
}(PureComponent);

ShotCard.propTypes = {
  cardPropsBag: PropTypes.object.isRequired,
  fileView: PropTypes.object.isRequired,
  updateCard: PropTypes.func.isRequired,
  files: PropTypes.array.isRequired,
  findFile: PropTypes.func.isRequired,
  localization: PropTypes.object.isRequired,
  getConfig: PropTypes.func.isRequired,
  loadConfig: PropTypes.func.isRequired,
  globalEvent: PropTypes.object.isRequired
};
export default ShotCard;