feeles-ide/lib/Cards/PaletteCard/index.js

The hackable and serializable IDE to make learning material

import _extends from 'babel-runtime/helpers/extends';
import _Object$keys from 'babel-runtime/core-js/object/keys';
import _defineProperty from 'babel-runtime/helpers/defineProperty';
import _Object$assign from 'babel-runtime/core-js/object/assign';
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 '../CardWindow';
import { CardActions, CardText } from 'material-ui/Card';
import Popover from 'material-ui/Popover';
import Paper from 'material-ui/Paper';
import { convertColorToString } from 'material-ui/utils/colorManipulator';
import { transparent, fullWhite } from 'material-ui/styles/colors';
import ImagePalette from 'material-ui/svg-icons/image/palette';
import { ChromePicker, TwitterPicker } from 'react-color';

import LayeredStyle from './LayeredStyle';

var getStyles = function getStyles(props, context) {
  var _context$muiTheme = context.muiTheme,
      palette = _context$muiTheme.palette,
      spacing = _context$muiTheme.spacing;


  var bodyColor = getComputedStyle(document.body)['background-color'];
  var boxSize = 60;

  return {
    html: {
      display: 'flex',
      flexDirection: 'column',
      backgroundColor: fullWhite
    },
    body: {
      backgroundColor: bodyColor
    },
    overlay: {
      padding: spacing.desktopGutterMore,
      backgroundColor: palette.backgroundColor
    },
    canvas: {
      display: 'flex',
      alignItems: 'center',
      height: boxSize + 32,
      backgroundColor: palette.canvasColor
    },
    primary: {
      flex: '1 1 auto',
      marginLeft: spacing.desktopGutterMore,
      height: boxSize,
      backgroundColor: palette.primary1Color
    },
    secondary: {
      flex: '1 1 auto',
      marginLeft: spacing.desktopGutterMore,
      height: boxSize * 0.8,
      backgroundColor: palette.accent1Color
    },
    blank: {
      flex: '1 1 auto',
      marginLeft: spacing.desktopGutterMore,
      height: boxSize,
      backgroundColor: transparent
    },
    container: {
      textAlign: 'center',
      overflow: 'hidden'
    },
    item: {
      flex: '0 0 auto',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'flex-end',
      maxWidth: 200,
      margin: spacing.desktopGutterMini + 'px auto'
    },
    label: {
      color: palette.textColor
    },
    rect: {
      boxSizing: 'border-box',
      marginLeft: spacing.desktopGutter,
      padding: '.5rem',
      border: '1px solid ' + palette.textColor
    }
  };
};

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

  function PaletteCard() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, PaletteCard);

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

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = PaletteCard.__proto__ || _Object$getPrototypeOf(PaletteCard)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      palette: _this.props.getConfig('palette'),
      open: false,
      key: null,
      anchorEl: null,
      limited: false
    }, _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 });
    }, _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, _defineProperty({}, key, convertColorToString(color)));
      setConfig('palette', palette).then(function (file) {
        return file.json;
      }).then(function (palette) {
        return _this.setState({ palette: palette });
      });
    }, _this.closePopover = function () {
      _this.setState({ open: false });
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(PaletteCard, [{
    key: 'renderItem',
    value: function renderItem(key, styles) {
      var _this2 = this;

      var _context$muiTheme2 = this.context.muiTheme,
          palette = _context$muiTheme2.palette,
          prepareStyles = _context$muiTheme2.prepareStyles;


      var rectStyle = _Object$assign({}, styles.rect, {
        backgroundColor: palette[key]
      });

      return React.createElement(
        'div',
        { key: key, style: styles.item },
        React.createElement(
          'span',
          { style: styles.label },
          key
        ),
        React.createElement('span', {
          style: prepareStyles(rectStyle),
          onClick: function onClick(event) {
            return _this2.handleRectClick(event, key);
          }
        })
      );
    }
  }, {
    key: 'render',
    value: function render() {
      var _this3 = this;

      var _state = this.state,
          open = _state.open,
          key = _state.key,
          anchorEl = _state.anchorEl,
          limited = _state.limited;
      var _context$muiTheme3 = this.context.muiTheme,
          palette = _context$muiTheme3.palette,
          prepareStyles = _context$muiTheme3.prepareStyles;


      var styles = getStyles(this.props, this.context);
      styles.item = prepareStyles(styles.item);
      styles.label = prepareStyles(styles.label);

      return React.createElement(
        Card,
        _extends({ icon: PaletteCard.icon() }, this.props.cardPropsBag),
        React.createElement(
          CardActions,
          null,
          React.createElement(
            LayeredStyle,
            {
              styles: [prepareStyles(styles.html), prepareStyles(styles.body), prepareStyles(styles.overlay)],
              onClick: function onClick(e) {
                return _this3.handleRectClick(e, 'backgroundColor');
              }
            },
            React.createElement(
              Paper,
              {
                style: styles.canvas,
                onClick: function onClick(e) {
                  return _this3.handleRectClick(e, 'canvasColor');
                }
              },
              React.createElement(Paper, {
                style: styles.primary,
                onClick: function onClick(e) {
                  return _this3.handleRectClick(e, 'primary1Color', true);
                }
              }),
              React.createElement(Paper, {
                style: styles.secondary,
                onClick: function onClick(e) {
                  return _this3.handleRectClick(e, 'accent1Color', true);
                }
              }),
              React.createElement('div', { style: prepareStyles(styles.blank) })
            )
          )
        ),
        React.createElement(
          CardText,
          { expandable: true, style: styles.container },
          _Object$keys(palette).map(function (key) {
            return _this3.renderItem(key, styles);
          })
        ),
        React.createElement(
          Popover,
          {
            open: open,
            anchorEl: anchorEl,
            anchorOrigin: {
              horizontal: 'left',
              vertical: 'top'
            },
            targetOrigin: {
              horizontal: 'left',
              vertical: 'bottom'
            },
            onRequestClose: this.closePopover
          },
          limited ? React.createElement(TwitterPicker, {
            color: key && palette[key],
            onChangeComplete: this.handleChangeComplete
          }) : React.createElement(ChromePicker, {
            color: key && palette[key],
            onChangeComplete: this.handleChangeComplete
          })
        )
      );
    }
  }], [{
    key: 'icon',
    value: function icon() {
      return React.createElement(ImagePalette, null);
    }
  }]);

  return PaletteCard;
}(PureComponent);

PaletteCard.propTypes = {
  cardPropsBag: PropTypes.object.isRequired,
  getConfig: PropTypes.func.isRequired,
  setConfig: PropTypes.func.isRequired
};
PaletteCard.contextTypes = {
  muiTheme: PropTypes.object.isRequired
};
export default PaletteCard;