storybook-addon-scissors/build/register.js

Addon for React Storybook providing responsive containers for stories

'use strict';

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

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _addons = require('@storybook/addons');

var _addons2 = _interopRequireDefault(_addons);

var _reactToggle = require('react-toggle');

var _reactToggle2 = _interopRequireDefault(_reactToggle);

var _Select = require('./Select');

var _Select2 = _interopRequireDefault(_Select);

require('!style-loader!css-loader!./main.css');

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Scissors = function (_Component) {
  _inherits(Scissors, _Component);

  function Scissors(props) {
    _classCallCheck(this, Scissors);

    var _this = _possibleConstructorReturn(this, (Scissors.__proto__ || Object.getPrototypeOf(Scissors)).call(this, props));

    _this.onSelectDevice = function (device) {
      _this.setState({ selectedDevice: device });
    };

    _this.toggleRotate = function () {
      return _this.setState(function (state) {
        return { rotated: !state.rotated };
      });
    };

    _this.state = {
      selectedDevice: null,
      rotated: false
    };
    return _this;
  }

  _createClass(Scissors, [{
    key: 'render',
    value: function render() {
      var _state = this.state,
          selectedDevice = _state.selectedDevice,
          rotated = _state.rotated;
      var devices = this.props.devices;


      var isEnabled = selectedDevice !== null;
      var deviceWidth = selectedDevice ? rotated ? Number.parseInt(selectedDevice.height) : Number.parseInt(selectedDevice.width) : 0;
      var deviceHeight = selectedDevice ? rotated ? Number.parseInt(selectedDevice.width) : Number.parseInt(selectedDevice.height) : 0;

      return _react2.default.createElement(
        'div',
        { className: 'storybook-addon-scissors scissors-panel' },
        _react2.default.createElement(
          'label',
          null,
          'Device'
        ),
        _react2.default.createElement(_Select2.default, {
          selectedDevice: selectedDevice,
          devices: devices,
          onChange: this.onSelectDevice
        }),
        _react2.default.createElement(
          'div',
          { className: 'storybook-addon-scissors-rotate' },
          _react2.default.createElement(
            'label',
            { htmlFor: 'storybook-addon-scissors-rotate-toggle' },
            'Rotate'
          ),
          _react2.default.createElement(_reactToggle2.default, {
            id: 'storybook-addon-scissors-rotate-toggle',
            defaultChecked: rotated,
            onChange: this.toggleRotate,
            disabled: !isEnabled
          })
        ),
        isEnabled && _react2.default.createElement('style', {
          dangerouslySetInnerHTML: {
            __html: '\n            #storybook-preview-iframe {\n              display: block !important;\n              background: #fff !important;\n              margin: 40px auto !important;\n              width: ' + deviceWidth + 'px !important;\n              height: ' + deviceHeight + 'px !important;\n              box-shadow: 0 2px 6px 0px #cccccc;\n              transition: all 200ms !important;\n            }\n            .Pane.horizontal.Pane1 > div > div, .Pane.vertical.Pane2 .SplitPane .Pane.vertical.Pane1 > div > div {\n              overflow: auto !important;\n              background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAAAAACo4kLRAAAAF0lEQVR4AWP4CQf/4WBoCyKYCOkhLQgAFBGJ0NmZHwYAAAAASUVORK5CYII=) !important;\n            }\n          '
          }
        })
      );
    }
  }]);

  return Scissors;
}(_react.Component);

exports.default = function (devices) {
  _addons2.default.register('PeterPanen/storybook-addon-scissors', function () {
    // Add panel with unique name.
    _addons2.default.addPanel('PeterPanen/storybook-addon-scissors/panel', {
      title: 'Scissors',
      render: function render() {
        return _react2.default.createElement(Scissors, { devices: devices, channel: _addons2.default.getChannel() });
      }
    });
  });
};