feeles-ide/lib/Cards/EditorCard/AssetPane.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 NavigationExpandLess from 'material-ui/svg-icons/navigation/expand-less';
import { fade } from 'material-ui/utils/colorManipulator';
import { emphasize } from 'material-ui/utils/colorManipulator';

import AssetButton from './AssetButton';

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

  function AssetPane() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, AssetPane);

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

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = AssetPane.__proto__ || _Object$getPrototypeOf(AssetPane)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      assets: {}
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(AssetPane, [{
    key: 'componentWillMount',
    value: function componentWillMount() {
      this.setState({
        assets: this.props.loadConfig('asset')
      });
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (this.props.fileView !== nextProps.fileView) {
        this.setState({
          assets: this.props.loadConfig('asset')
        });
      }
    }
  }, {
    key: 'renderEachLabel',
    value: function renderEachLabel(label, styles) {
      var _this2 = this;

      var items = this.state.assets[label];
      if (!items) return null;

      return React.createElement(
        'div',
        { key: label, style: _extends({}, styles.wrapper) },
        React.createElement(
          'div',
          { style: _extends({}, styles.label) },
          label
        ),
        items.map(function (item, i) {
          return React.createElement(AssetButton, _extends({}, item, {
            key: i,
            onClick: _this2.props.handleAssetInsert,
            findFile: _this2.props.findFile,
            localization: _this2.props.localization
          }));
        })
      );
    }
  }, {
    key: 'render',
    value: function render() {
      var _this3 = this;

      var _props = this.props,
          scope = _props.scope,
          open = _props.open;
      var _context$muiTheme = this.context.muiTheme,
          palette = _context$muiTheme.palette,
          transitions = _context$muiTheme.transitions;


      var styles = {
        root: {
          position: 'absolute',
          width: '100%',
          overflow: 'hidden',
          display: 'flex',
          flexDirection: 'column',
          zIndex: 10,
          transition: transitions.easeOut(),
          height: open ? '100%' : 0
        },
        scroller: {
          flex: 1,
          overflowX: 'auto',
          overflowY: 'scroll',
          boxSizing: 'border-box',
          paddingBottom: 60,
          borderTopLeftRadius: 0,
          borderTopRightRadius: 0,
          backgroundColor: fade(emphasize(palette.canvasColor, 0.75), 0.55)
        },
        label: {
          flex: '0 0 100%',
          color: 'white',
          textAlign: 'center',
          marginTop: 16,
          fontWeight: 600
        },
        wrapper: {
          display: 'flex',
          flexWrap: 'wrap',
          justifyContent: 'center'
        },
        close: {
          marginBottom: 10,
          textAlign: 'center',
          backgroundColor: palette.primary1Color,
          borderTopRightRadius: 0,
          borderTopLeftRadius: 0,
          cursor: 'pointer',
          height: open ? null : 0
        }
      };

      // e.g. scope === 'モンスター アイテム'
      var labels = scope ? scope.trim().split(' ') : [];

      return React.createElement(
        'div',
        { style: styles.root },
        React.createElement(
          'div',
          { style: styles.scroller },
          labels.map(function (label) {
            return _this3.renderEachLabel(label, styles);
          })
        ),
        React.createElement(
          'div',
          { style: styles.close, onClick: this.props.handleClose },
          React.createElement(NavigationExpandLess, { color: 'white' })
        )
      );
    }
  }]);

  return AssetPane;
}(PureComponent);

AssetPane.propTypes = {
  fileView: PropTypes.object.isRequired,
  open: PropTypes.bool.isRequired,
  scope: PropTypes.string,
  loadConfig: PropTypes.func.isRequired,
  handleClose: PropTypes.func.isRequired,
  handleAssetInsert: PropTypes.func.isRequired,
  findFile: PropTypes.func.isRequired,
  localization: PropTypes.object.isRequired
};
AssetPane.contextTypes = {
  muiTheme: PropTypes.object.isRequired
};
export default AssetPane;