@lyra/components/lib/menus/story.js

Basic UX components

'use strict';

var _range2 = require('lodash/range');

var _range3 = _interopRequireDefault(_range2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _default = require('part:@lyra/components/menus/default');

var _default2 = _interopRequireDefault(_default);

var _storybook = require('part:@lyra/storybook');

var _lyraLogoIcon = require('part:@lyra/base/lyra-logo-icon');

var _lyraLogoIcon2 = _interopRequireDefault(_lyraLogoIcon);

var _knobs = require('part:@lyra/storybook/addons/knobs');

var _lyra = require('part:@lyra/storybook/addons/lyra');

var _lyra2 = _interopRequireDefault(_lyra);

var _chance = require('chance');

var _chance2 = _interopRequireDefault(_chance);

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

const chance = new _chance2.default();

(0, _storybook.storiesOf)('Menus').addDecorator(_knobs.withKnobs).add('Default', () => {
  const icon = (0, _knobs.boolean)('icons', false) ? _lyraLogoIcon2.default : false;
  const items = (0, _range3.default)((0, _knobs.number)('#items', 30)).map((item, i) => {
    return {
      title: chance.name(),
      icon: icon,
      key: i
    };
  });

  const origins = {
    'top-left': 'Top Left',
    'top-right': 'Top Right',
    'bottom-right': 'Bottom Right',
    'bottom-left': 'Bottom left'
  };

  const scrollStyle = {
    width: '70vw',
    height: '70vh',
    border: '1px dotted #ccc',
    position: 'relative',
    overflow: 'scroll'
  };

  return _react2.default.createElement(
    _lyra2.default,
    { part: 'part:@lyra/components/menus/default', propTables: [_default2.default] },
    _react2.default.createElement(
      'div',
      { style: (0, _knobs.boolean)('is inside scroll', false) ? scrollStyle : {} },
      _react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(_default2.default, {
          onAction: (0, _storybook.action)('onAction'),
          onClose: (0, _storybook.action)('onClose'),
          onClickOutside: (0, _storybook.action)('prop:onClickOutside'),
          items: items,
          origin: (0, _knobs.select)('origin (prop)', origins),
          isOpen: (0, _knobs.boolean)('isOpen (prop)', true)
        })
      )
    )
  );
});