feeles-ide/lib/Cards/PaletteCard/index.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 _propTypes = _interopRequireDefault(require("prop-types"));

var _typestyle = require("typestyle");

var _CardWindow = _interopRequireDefault(require("../CardWindow"));

var _CardActions = _interopRequireDefault(require("@material-ui/core/CardActions"));

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

var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));

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

var _reactColor = require("react-color");

var _CardFloatingBar = _interopRequireDefault(require("../CardFloatingBar"));

var _LayeredStyle = _interopRequireDefault(require("./LayeredStyle"));

var _dec, _class, _class2, _temp;

var boxSize = 60;

var getCn = function getCn(props) {
  return {
    canvas: (0, _typestyle.style)({
      display: 'flex',
      alignItems: 'center',
      height: boxSize + 32,
      backgroundColor: props.theme.palette.background.paper
    }),
    primary: (0, _typestyle.style)({
      flex: '1 1 auto',
      marginLeft: props.theme.spacing.unit * 3,
      height: boxSize,
      backgroundColor: props.theme.palette.primary.main
    }),
    secondary: (0, _typestyle.style)({
      flex: '1 1 auto',
      marginLeft: props.theme.spacing.unit * 3,
      height: boxSize * 0.8,
      backgroundColor: props.theme.palette.secondary.main
    }),
    blank: (0, _typestyle.style)({
      flex: '1 1 auto',
      backgroundColor: 'transparent',
      marginLeft: props.theme.spacing.unit * 3,
      height: boxSize
    })
  };
};

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

  function PaletteCard() {
    var _getPrototypeOf2;

    var _this;

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

    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)(PaletteCard)).call.apply(_getPrototypeOf2, [this].concat(args)));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "state", {
      palette: _this.props.getConfig('palette'),
      open: false,
      key: null,
      anchorEl: null,
      limited: false
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleRectClick", function (event, key) {
      var limited = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
      event.stopPropagation();
      var anchorEl = event.target;
      var color = _this.state.palette[key];

      _this.setState({
        open: true,
        key: key,
        anchorEl: anchorEl,
        color: color,
        limited: limited
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleChangeComplete", function (structure) {
      var key = _this.state.key;
      var setConfig = _this.props.setConfig;
      var _structure$rgb = structure.rgb,
          r = _structure$rgb.r,
          g = _structure$rgb.g,
          b = _structure$rgb.b,
          a = _structure$rgb.a;
      var color = {
        type: 'rgba',
        values: [r, g, b, a]
      };
      var palette = Object.assign({}, _this.state.palette, (0, _defineProperty2.default)({}, key, (0, _colorManipulator.convertColorToString)(color)));
      setConfig('palette', palette).then(function (file) {
        return file.json;
      }).then(function (palette) {
        return _this.setState({
          palette: palette
        });
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "closePopover", function () {
      _this.setState({
        open: false
      });
    });
    return _this;
  }

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

      var dcn = getCn(this.props);
      var _this$state = this.state,
          open = _this$state.open,
          key = _this$state.key,
          anchorEl = _this$state.anchorEl,
          limited = _this$state.limited;
      var _this$props$theme = this.props.theme,
          palette = _this$props$theme.palette,
          spacing = _this$props$theme.spacing;
      var bodyColor = getComputedStyle(document.body)['background-color'];
      return _react.default.createElement(_CardWindow.default, this.props.cardPropsBag, _react.default.createElement(_CardFloatingBar.default, null, this.props.localization.paletteCard.title), _react.default.createElement(_CardActions.default, null, _react.default.createElement(_LayeredStyle.default, {
        styles: [{
          display: 'flex',
          flexDirection: 'column',
          backgroundColor: 'white'
        }, {
          backgroundColor: bodyColor
        }, {
          padding: spacing.unit * 3
        }],
        onClick: function onClick(e) {
          return _this2.handleRectClick(e, 'backgroundColor');
        }
      }, _react.default.createElement(_Paper.default, {
        className: dcn.canvas,
        onClick: function onClick(e) {
          return _this2.handleRectClick(e, 'canvasColor');
        }
      }, _react.default.createElement(_Paper.default, {
        className: dcn.primary,
        onClick: function onClick(e) {
          return _this2.handleRectClick(e, 'primary1Color', true);
        }
      }), _react.default.createElement(_Paper.default, {
        className: dcn.secondary,
        onClick: function onClick(e) {
          return _this2.handleRectClick(e, 'accent1Color', true);
        }
      }), _react.default.createElement("div", {
        className: dcn.blank
      })))), _react.default.createElement(_Popover.default, {
        open: open,
        anchorEl: anchorEl,
        anchorOrigin: {
          horizontal: 'left',
          vertical: 'top'
        },
        targetOrigin: {
          horizontal: 'left',
          vertical: 'bottom'
        },
        onClose: this.closePopover
      }, limited ? _react.default.createElement(_reactColor.TwitterPicker, {
        color: key && palette[key],
        onChangeComplete: this.handleChangeComplete
      }) : _react.default.createElement(_reactColor.ChromePicker, {
        color: key && palette[key],
        onChangeComplete: this.handleChangeComplete
      })));
    }
  }]);
  return PaletteCard;
}(_react.PureComponent), (0, _defineProperty2.default)(_class2, "propTypes", {
  theme: _propTypes.default.object.isRequired,
  cardPropsBag: _propTypes.default.object.isRequired,
  localization: _propTypes.default.object.isRequired,
  getConfig: _propTypes.default.func.isRequired,
  setConfig: _propTypes.default.func.isRequired
}), _temp)) || _class);
exports.default = PaletteCard;