wix-style-react/dist/stories/DropdownBase/index.story.js

wix-style-react

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _storySettings = require('./storySettings');

var _LiveCodeExample = require('../utils/Components/LiveCodeExample');

var _LiveCodeExample2 = _interopRequireDefault(_LiveCodeExample);

var _Layout = require('../../src/Layout');

var _Popover = require('../../src/Popover');

var _DropdownBase = require('../../src/DropdownBase');

var _DropdownBase2 = _interopRequireDefault(_DropdownBase);

var _Button = require('../../src/Button');

var _Button2 = _interopRequireDefault(_Button);

var _ExampleUncontrolledClick = require('!raw-loader!./examples/ExampleUncontrolledClick');

var _ExampleUncontrolledClick2 = _interopRequireDefault(_ExampleUncontrolledClick);

var _ExampleUncontrolledIcon = require('!raw-loader!./examples/ExampleUncontrolledIcon');

var _ExampleUncontrolledIcon2 = _interopRequireDefault(_ExampleUncontrolledIcon);

var _ExampleControlledInput = require('!raw-loader!./examples/ExampleControlledInput');

var _ExampleControlledInput2 = _interopRequireDefault(_ExampleControlledInput);

var _ExampleControlledMouse = require('!raw-loader!./examples/ExampleControlledMouse');

var _ExampleControlledMouse2 = _interopRequireDefault(_ExampleControlledMouse);

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

var options = [{
  label: '4 options',
  value: [{ id: 0, value: 'First option' }, { id: 1, value: 'Second option' }, { id: 2, value: 'Third option' }, { id: 3, value: 'Fourth option' }]
}, {
  label: '10 options',
  value: Array(10).fill().map(function (v, i) {
    return { id: i, value: 'Option ' + i };
  })
}];

var children = [{
  label: 'Regular React node',
  value: _react2.default.createElement(
    _Button2.default,
    { upgrade: true },
    'I am a plain Button that does nothing!'
  )
}, {
  label: 'Render prop on click',
  value: function value(_ref) {
    var toggle = _ref.toggle,
        _ref$selectedOption = _ref.selectedOption,
        selectedOption = _ref$selectedOption === undefined ? {} : _ref$selectedOption;
    return _react2.default.createElement(
      _Button2.default,
      { upgrade: true, onClick: toggle },
      selectedOption.value || 'Click me'
    );
  }
}, {
  label: 'Render prop on hover',
  value: function value(_ref2) {
    var open = _ref2.open,
        close = _ref2.close,
        _ref2$selectedOption = _ref2.selectedOption,
        selectedOption = _ref2$selectedOption === undefined ? {} : _ref2$selectedOption;
    return _react2.default.createElement(
      _Button2.default,
      { upgrade: true, onMouseEnter: open, onMouseLeave: close },
      selectedOption.value || 'Hover me'
    );
  }
}];

var openProps = [{ label: 'false', value: false }, { label: 'true', value: true }];

exports.default = {
  category: _storySettings.storySettings.kind,
  storyName: _storySettings.storySettings.storyName,

  component: _DropdownBase2.default,
  componentPath: '../../src/DropdownBase/DropdownBase.js',

  componentProps: {
    dataHook: _storySettings.storySettings.dataHook,

    children: children[1].value,
    options: options[0].value,
    open: undefined,
    showArrow: false,
    placement: 'bottom'
  },

  exampleProps: {
    children: children,
    options: options,
    open: openProps,
    placement: _Popover.placements,

    onSelect: function onSelect(selectedOption) {
      return 'Triggered with: ' + JSON.stringify(selectedOption);
    },
    onClickOutside: function onClickOutside() {
      return 'Triggered!';
    }
  },

  examples: _react2.default.createElement(
    'div',
    {
      style: {
        maxWidth: 1254,
        padding: 10
      }
    },
    _react2.default.createElement(
      _Layout.Layout,
      null,
      _react2.default.createElement(
        _Layout.Cell,
        { span: 6 },
        _react2.default.createElement(_LiveCodeExample2.default, {
          compact: true,
          title: 'Uncontrolled example with click events',
          initialCode: _ExampleUncontrolledClick2.default
        })
      ),
      _react2.default.createElement(
        _Layout.Cell,
        { span: 6 },
        _react2.default.createElement(_LiveCodeExample2.default, {
          compact: true,
          title: 'Uncontrolled example with an icon',
          initialCode: _ExampleUncontrolledIcon2.default
        })
      ),
      _react2.default.createElement(
        _Layout.Cell,
        { span: 6 },
        _react2.default.createElement(_LiveCodeExample2.default, {
          compact: true,
          autoRender: false,
          title: 'Controlled example with mouse events',
          initialCode: _ExampleControlledMouse2.default
        })
      ),
      _react2.default.createElement(
        _Layout.Cell,
        { span: 6 },
        _react2.default.createElement(_LiveCodeExample2.default, {
          compact: true,
          autoRender: false,
          title: 'Controlled example with an input',
          initialCode: _ExampleControlledInput2.default
        })
      )
    )
  )
};