storybook-addon-scissors/build/Select.js

Addon for React Storybook providing responsive containers for stories

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactVirtualizedSelect = require('react-virtualized-select');

var _reactVirtualizedSelect2 = _interopRequireDefault(_reactVirtualizedSelect);

require('!style-loader!css-loader!react-select/dist/react-select.css');

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

var optionRenderer = function optionRenderer(_ref) {
  var option = _ref.option,
      style = _ref.style,
      selectValue = _ref.selectValue,
      focusedOption = _ref.focusedOption;

  var focusedClass = focusedOption.uid === option.uid ? 'focused' : '';
  return _react2.default.createElement(
    'div',
    {
      className: 'storybook-addon-scissors option ' + focusedClass,
      onClick: function onClick() {
        return selectValue(option);
      },
      style: style,
      key: option.uid
    },
    _react2.default.createElement(
      'span',
      { className: 'storybook-addon-scissors col name' },
      option.title
    ),
    _react2.default.createElement(
      'span',
      { className: 'storybook-addon-scissors col width' },
      option.width,
      ' W'
    ),
    _react2.default.createElement(
      'span',
      { className: 'storybook-addon-scissors col height' },
      option.height,
      ' H'
    )
  );
};

var valueRenderer = function valueRenderer(option) {
  return _react2.default.createElement(
    'div',
    { className: 'storybook-addon-scissors value' },
    _react2.default.createElement(
      'span',
      { className: 'storybook-addon-scissors col name' },
      option.title
    ),
    _react2.default.createElement(
      'span',
      { className: 'storybook-addon-scissors col width' },
      option.width,
      ' W'
    ),
    _react2.default.createElement(
      'span',
      { className: 'storybook-addon-scissors col height' },
      option.height,
      ' H'
    )
  );
};

exports.default = function (_ref2) {
  var selectedDevice = _ref2.selectedDevice,
      devices = _ref2.devices,
      onChange = _ref2.onChange;
  return _react2.default.createElement(_reactVirtualizedSelect2.default, {
    value: selectedDevice,
    options: devices,
    onChange: onChange,
    valueKey: 'title',
    optionRenderer: optionRenderer,
    valueRenderer: valueRenderer
  });
};