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

The hackable and serializable IDE to make learning material

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireWildcard(require("react"));

var _styles = require("@material-ui/core/styles");

var _colorManipulator = require("@material-ui/core/styles/colorManipulator");

var _propTypes = _interopRequireDefault(require("prop-types"));

var _typestyle = require("typestyle");

var _csx = require("csx");

var _Popover = _interopRequireDefault(require("@material-ui/core/Popover"));

var _Button = _interopRequireDefault(require("@material-ui/core/Button"));

var _ButtonBase = _interopRequireDefault(require("@material-ui/core/ButtonBase"));

var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));

var _Add = _interopRequireDefault(require("@material-ui/icons/Add"));

var _Description = _interopRequireDefault(require("@material-ui/icons/Description"));

var _AssetPane = require("./AssetPane");

var _dec, _class, _class2, _temp;

var iconSize = 48;
var cn = {
  mainButton: (0, _typestyle.style)({
    width: 80,
    height: 80,
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'stretch'
  }),
  mainIcon: (0, _typestyle.style)({
    flex: 1,
    backgroundSize: 'contain',
    backgroundPosition: '50% 50%',
    backgroundRepeat: 'no-repeat'
  }),
  actions: (0, _typestyle.style)({
    display: 'flex',
    justifyContent: 'space-between',
    marginTop: 2
  }),
  iconButton: (0, _typestyle.style)({
    flex: 1,
    minWidth: 36
  }),
  popoverClasses: {
    paper: (0, _typestyle.style)({
      padding: 8,
      maxWidth: 500
    })
  },
  label: (0, _typestyle.style)({
    fontSize: 10,
    fontWeight: 600
  }),
  blank: (0, _typestyle.style)({
    display: 'inline-flex',
    width: 8
  }),
  variationWrapper: (0, _typestyle.style)({
    display: 'flex',
    flexWrap: 'nowrap',
    justifyContent: 'flex-start'
  })
};

var getCn = function getCn(_ref) {
  var theme = _ref.theme;
  return {
    root: (0, _typestyle.style)({
      position: 'relative',
      margin: '8px 30px 0px 8px'
    }),
    button: (0, _typestyle.style)({
      color: theme.palette.getContrastText(theme.palette.text.primary),
      transition: theme.transitions.create('background-color'),
      backgroundColor: (0, _colorManipulator.fade)(theme.palette.grey[600], 0.6),
      $nest: {
        '&:hover': {
          backgroundColor: theme.palette.grey[600]
        },
        '&:disabled': {
          color: theme.palette.text.disabled
        }
      }
    }),
    variation: (0, _typestyle.style)({
      maxWidth: iconSize,
      height: iconSize,
      boxSizing: 'content-box',
      borderStyle: 'solid',
      borderWidth: 2,
      borderColor: 'transparent',
      borderRadius: theme.shape.borderRadius,
      marginRight: theme.spacing.unit,
      marginBottom: theme.spacing.unit,
      cursor: 'pointer',
      backgroundColor: theme.palette.grey[200],
      $nest: {
        '&:hover': {
          backgroundColor: theme.palette.grey[400]
        },
        '&>img': {
          maxWidth: iconSize,
          height: iconSize
        }
      }
    }),
    selected: (0, _typestyle.style)({
      borderColor: '#4A90E2',
      backgroundColor: theme.palette.grey[400]
    })
  };
};

var AssetButton = (_dec = (0, _styles.withTheme)(), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_PureComponent) {
  (0, _inherits2.default)(AssetButton, _PureComponent);

  function AssetButton() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2.default)(this, AssetButton);

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

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(AssetButton)).call.apply(_getPrototypeOf2, [this].concat(args)));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "state", {
      anchorEl: null,
      backgroundStyle: {},
      selectedIndex: 0 // 選択中の variation

    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleOpen", function (event) {
      // リンクのみ表示なら「改造する」, そうでなければ Popover を開く
      if (_this.props.linkOnly) {
        _this.handleOpenFile();
      } else {
        _this.setState({
          anchorEl: event.currentTarget
        });
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleClose", function () {
      _this.setState({
        anchorEl: null
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleInsertAsset", function () {
      var _this$props = _this.props,
          name = _this$props.name,
          insertCode = _this$props.insertCode;

      _this.handleClose();

      _this.props.insertAsset({
        name: name,
        insertCode: insertCode
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleInsertAssetSelected", function () {
      _this.handleClose();

      _this.props.insertAsset(_this.selected);
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleOpenFile", function () {
      _this.handleClose();

      _this.props.openFile({
        name: _this.props.name,
        filePath: _this.filePathToOpen,
        iconUrl: _this.props.iconUrl
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleOpenFileSelected", function () {
      _this.handleClose();

      _this.props.openFile({
        name: _this.selected.name,
        filePath: _this.filePathToOpenSelected,
        iconUrl: _this.selected.iconUrl
      });
    });
    return _this;
  }

  (0, _createClass2.default)(AssetButton, [{
    key: "render",
    value: function render() {
      var _this2 = this;

      var dcn = getCn(this.props);
      var _this$props2 = this.props,
          localization = _this$props2.localization,
          variations = _this$props2.variations,
          linkOnly = _this$props2.linkOnly;
      var selectedIndex = this.state.selectedIndex;
      var selected = this.selected; // Popover の中は選択中のバリエーションに切り替わる

      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("div", {
        className: dcn.root
      }, _react.default.createElement(_ButtonBase.default, {
        focusRipple: true,
        className: (0, _typestyle.classes)(dcn.button, cn.mainButton),
        onClick: this.handleOpen
      }, _react.default.createElement("div", {
        className: cn.mainIcon,
        style: this.state.backgroundStyle
      }), _react.default.createElement("span", {
        className: cn.label
      }, this.props.name)), linkOnly ? null : _react.default.createElement("div", {
        className: cn.actions
      }, _react.default.createElement(_ButtonBase.default, {
        focusRipple: true,
        disabled: !this.props.insertCode,
        className: (0, _typestyle.classes)(dcn.button, cn.iconButton),
        onClick: this.handleInsertAsset
      }, _react.default.createElement(_Add.default, null)), _react.default.createElement(_ButtonBase.default, {
        focusRipple: true,
        disabled: !this.filePathToOpen,
        className: (0, _typestyle.classes)(dcn.button, cn.iconButton),
        onClick: this.handleOpenFile
      }, _react.default.createElement(_Description.default, null)))), linkOnly ? null : _react.default.createElement(_Popover.default, {
        open: Boolean(this.state.anchorEl),
        anchorOrigin: {
          vertical: 'bottom',
          horizontal: 'left'
        },
        anchorEl: this.state.anchorEl,
        classes: cn.popoverClasses,
        onClose: this.handleClose
      }, _react.default.createElement(_Typography.default, {
        variant: "h5"
      }, selected.name), _react.default.createElement(_Typography.default, {
        variant: "body1",
        gutterBottom: true
      }, selected.description), variations && _react.default.createElement("div", {
        className: cn.variationWrapper
      }, variations.map(function (child, i) {
        return _react.default.createElement("div", {
          key: i,
          className: (0, _typestyle.classes)(dcn.variation, selectedIndex === i && dcn.selected),
          onClick: function onClick() {
            return _this2.setState({
              selectedIndex: i
            });
          }
        }, _react.default.createElement("img", {
          src: child.iconUrl,
          alt: child.name
        }));
      })), _react.default.createElement("div", null, _react.default.createElement(_Button.default, {
        variant: "contained",
        color: "primary",
        disabled: !selected.insertCode,
        onClick: this.handleInsertAssetSelected
      }, _react.default.createElement(_Add.default, null), localization.editorCard.insert), _react.default.createElement("span", {
        className: cn.blank
      }), _react.default.createElement(_Button.default, {
        variant: "outlined",
        color: "primary",
        disabled: !this.filePathToOpenSelected,
        onClick: this.handleOpenFileSelected
      }, _react.default.createElement(_Description.default, null), localization.editorCard.edit(selected.name)))));
    }
  }, {
    key: "selected",
    get: function get() {
      var _this$props3 = this.props,
          name = _this$props3.name,
          description = _this$props3.description,
          iconUrl = _this$props3.iconUrl,
          insertCode = _this$props3.insertCode,
          moduleCode = _this$props3.moduleCode,
          filePath = _this$props3.filePath,
          variations = _this$props3.variations;
      return variations ? variations[this.state.selectedIndex] : {
        name: name,
        description: description,
        iconUrl: iconUrl,
        insertCode: insertCode,
        moduleCode: moduleCode,
        filePath: filePath
      };
    }
  }, {
    key: "filePathToOpen",
    get: function get() {
      // 最初から存在するファイルにアクセス => filePath
      // 追加してからアクセス => asset.module[name]
      var _this$props4 = this.props,
          filePath = _this$props4.filePath,
          asset = _this$props4.asset,
          name = _this$props4.name;
      return filePath || (asset.module[name] ? "".concat(_AssetPane.pathToInstall, "/").concat(name, ".js") : null);
    }
  }, {
    key: "filePathToOpenSelected",
    get: function get() {
      // 最初から存在するファイルにアクセス => filePath
      // 追加してからアクセス => asset.module[name]
      var selected = this.selected;
      return selected.filePath || (this.props.asset.module[selected.name] ? "".concat(_AssetPane.pathToInstall, "/").concat(selected.name, ".js") : null);
    }
  }], [{
    key: "getDerivedStateFromProps",
    value: function getDerivedStateFromProps(props, state) {
      if (props.iconUrl) {
        var backgroundImage = (0, _csx.url)(props.iconUrl);

        if (backgroundImage && backgroundImage !== state.backgroundStyle.backgroundImage) {
          return {
            backgroundStyle: {
              backgroundImage: backgroundImage
            }
          };
        }
      }

      return null;
    }
  }]);
  return AssetButton;
}(_react.PureComponent), (0, _defineProperty2.default)(_class2, "propTypes", {
  name: _propTypes.default.string,
  description: _propTypes.default.string,
  iconUrl: _propTypes.default.string,
  insertCode: _propTypes.default.string,
  moduleCode: _propTypes.default.string,
  filePath: _propTypes.default.string,
  variations: _propTypes.default.array,
  theme: _propTypes.default.object.isRequired,
  insertAsset: _propTypes.default.func.isRequired,
  openFile: _propTypes.default.func.isRequired,
  findFile: _propTypes.default.func.isRequired,
  localization: _propTypes.default.object.isRequired,
  globalEvent: _propTypes.default.object.isRequired,
  asset: _propTypes.default.object.isRequired,
  linkOnly: _propTypes.default.bool.isRequired
}), (0, _defineProperty2.default)(_class2, "defaultProps", {
  name: '',
  description: ''
}), _temp)) || _class);
exports.default = AssetButton;