react-stickerpipe/dist/components/my-sticker-packs.js

React Component for StickerPipe API

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _sticker = require('./sticker');

var _sticker2 = _interopRequireDefault(_sticker);

var _iconAdd = require('./icons/icon-add');

var _iconAdd2 = _interopRequireDefault(_iconAdd);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function MyStickerPacks(_ref) {
  var stickerPacks = _ref.stickerPacks,
      shop = _ref.shop,
      toggleShop = _ref.toggleShop,
      showPack = _ref.showPack,
      colors = _ref.colors;

  var style = {
    stickers: {
      minWidth: stickerPacks.length * 48 + 'px'
    }
  };

  return _react2.default.createElement(
    'section',
    { className: 'my-packs' },
    _react2.default.createElement(
      'section',
      { className: 'pack-list' },
      _react2.default.createElement(
        'div',
        { className: 'stickers-tab' },
        _react2.default.createElement(
          'div',
          { className: 'stickers', style: style.stickers },
          stickerPacks.length > 0 ? stickerPacks.map(function (stickerPack) {
            return _react2.default.createElement(_sticker2.default, {
              key: 'my-sticker-packs-' + stickerPack.pack_name,
              src: stickerPack.main_icon.mdpi,
              onClick: function onClick() {
                return showPack(stickerPack.pack_name);
              }
            });
          }) : _react2.default.createElement(
            'p',
            null,
            'Loading...'
          )
        )
      ),
      _react2.default.createElement(
        'div',
        { onClick: toggleShop, className: 'button-shop' },
        _react2.default.createElement(_iconAdd2.default, { color: shop ? colors.primary : null })
      )
    )
  );
}

MyStickerPacks.propTypes = {
  stickerPacks: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    pack_name: _propTypes2.default.string.isRequired,
    main_icon: _propTypes2.default.shape({
      mdpi: _propTypes2.default.string.isRequired,
      hdpi: _propTypes2.default.string.isRequired,
      xhdpi: _propTypes2.default.string.isRequired,
      xxhdpi: _propTypes2.default.string.isRequired
    }).isRequired
  })).isRequired,
  showPack: _propTypes2.default.func.isRequired,
  toggleShop: _propTypes2.default.func.isRequired,
  shop: _propTypes2.default.bool.isRequired,
  colors: _propTypes2.default.shape({
    primary: _propTypes2.default.string.isRequired
  }).isRequired
};

exports.default = MyStickerPacks;
module.exports = exports['default'];