@lyra/components/lib/panes/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 _storybook = require('part:@lyra/storybook');

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

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

var _lyra2 = _interopRequireDefault(_lyra);

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

var _default2 = _interopRequireDefault(_default);

var _controller = require('part:@lyra/components/panes/controller');

var _controller2 = _interopRequireDefault(_controller);

var _splitController = require('part:@lyra/components/panes/split-controller');

var _splitController2 = _interopRequireDefault(_splitController);

var _splitPaneWrapper = require('part:@lyra/components/panes/split-pane-wrapper');

var _splitPaneWrapper2 = _interopRequireDefault(_splitPaneWrapper);

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

var _default4 = _interopRequireDefault(_default3);

var _plusIcon = require('part:@lyra/base/plus-icon');

var _plusIcon2 = _interopRequireDefault(_plusIcon);

var _trashOutlineIcon = require('part:@lyra/base/trash-outline-icon');

var _trashOutlineIcon2 = _interopRequireDefault(_trashOutlineIcon);

var _default5 = require('part:@lyra/components/buttons/default');

var _default6 = _interopRequireDefault(_default5);

var _renderFunctions = require('./styles/renderFunctions.css');

var _renderFunctions2 = _interopRequireDefault(_renderFunctions);

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

const menuItems = [{
  title: 'First item',
  key: '1'
}, {
  title: 'Second item',
  key: '1'
}, {
  title: 'Third item',
  key: '3'
}, {
  title: 'Extra item',
  key: '4',
  divider: true
}]; /* eslint-disable react/no-multi-comp */


const handleMenuAction = menuAction => {
  console.log('action', menuAction);
};

const renderMenu = isCollapsed => {
  return _react2.default.createElement(_default4.default, {
    items: menuItems,
    origin: isCollapsed ? 'top-left' : 'top-right',
    onAction: handleMenuAction,
    isOpen: true,
    onClickOutside: (0, _storybook.action)('Close menu')
  });
};

const renderFunctions = isCollapsed => {
  return _react2.default.createElement(
    'div',
    { className: _renderFunctions2.default.root },
    _react2.default.createElement(_default6.default, {
      kind: 'simple',
      icon: _plusIcon2.default,
      color: 'primary',
      title: 'Add',
      className: _renderFunctions2.default.button
    }),
    _react2.default.createElement(_default6.default, {
      kind: 'simple',
      icon: _trashOutlineIcon2.default,
      color: 'danger',
      title: 'Delete',
      className: _renderFunctions2.default.button
    })
  );
};

(0, _storybook.storiesOf)('Panes').addDecorator(_knobs.withKnobs).add('Pane', () => {
  return _react2.default.createElement(
    _lyra2.default,
    {
      part: 'part:@lyra/components/panes/default',
      propTables: [_default2.default]
    },
    _react2.default.createElement(_default2.default, {
      title: (0, _knobs.text)('title (prop)', 'This is the default pane title'),
      isCollapsed: (0, _knobs.boolean)('isCollapsed (prop)', false),
      onExpand: (0, _storybook.action)('onExpand'),
      onCollapse: (0, _storybook.action)('onCollapse'),
      minWidth: (0, _knobs.number)('minWidth (prop)', 300),
      renderFunctions: renderFunctions,
      renderMenu: renderMenu
    })
  );
})

// .add(
//   'Controller',
//   () => {
//     const panes = range(number('#Panes', 4)).map((pane, i) => {
//       return {
//         title: `Pane ${i} is the best pane`,
//         layout: i > 3 ? 'default' : 'main'
//       }
//     })
//
//     const selectedPaneIndex = number('Selected pane', 1)
//     const knobsPanes = object('Panes', panes)
//
//     return (
//       <Lyra part="part:@lyra/components/panes/controller" propTables={[PanesController]}>
//         <PanesController selectedIndex={selectedPaneIndex}>
//           {
//             knobsPanes.map((pane, i) => {
//               return (
//                 <DefaultPane
//                   title={pane.title}
//                   key={pane.title}
//                   renderFunctions={renderFunctions}
//                   renderMenu={renderMenu}
//                   onExpand={action('expand')}
//                   onCollapse={action('onCollapse')}
//                   onMenuToggle={action('onMenuToggle')}
//                   minWidth={300}
//                 />
//               )
//             })
//           }
//         </PanesController>
//       </Lyra>
//     )
//   }
// )

.add('Split', () => {
  const panes = (0, _range3.default)((0, _knobs.number)('#Panes', 2)).map((pane, i) => {
    return {
      title: `Pane ${i} is a long pane an it has a name and it should cap somewhere`,
      key: `pane${i}`,
      isCollapsed: [true][i],
      minWidth: [100, 100, 400][i] || 300,
      defaultWidth: [200, 200, 700][i] || 300
    };
  });

  const handleControllerCollapse = pane => {
    console.log('handleControllerCollapse', pane);
  };

  const handleControllerUnCollapse = pane => {
    console.log('handleControllerUnCollapse', pane);
  };

  const selectedPaneIndex = (0, _knobs.number)('Selected pane', 1);
  const knobsPanes = (0, _knobs.object)('Panes', panes);
  const showMenu = (0, _knobs.boolean)('Show menu', false);

  const renderSplitMenu = isCollapsed => {
    return _react2.default.createElement(_default4.default, {
      items: menuItems,
      origin: isCollapsed ? 'top-left' : 'top-right',
      onAction: handleMenuAction,
      isOpen: showMenu,
      onClickOutside: (0, _storybook.action)('Close menu')
    });
  };

  return _react2.default.createElement(
    _lyra2.default,
    {
      part: 'part:@lyra/components/panes/controller',
      propTables: [_controller2.default]
    },
    _react2.default.createElement(
      _splitController2.default,
      {
        selectedIndex: selectedPaneIndex,
        onCollapse: handleControllerCollapse,
        onUnCollapse: handleControllerUnCollapse
      },
      knobsPanes.map((pane, i) => {
        return _react2.default.createElement(
          _splitPaneWrapper2.default,
          {
            minWidth: pane.minWidth,
            defaultWidth: pane.defaultWidth,
            key: pane.key,
            isCollapsed: pane.isCollapsed
          },
          _react2.default.createElement(
            _default2.default,
            {
              title: pane.title,
              renderFunctions: renderFunctions,
              renderMenu: renderSplitMenu,
              onExpand: (0, _storybook.action)('expand'),
              onCollapse: (0, _storybook.action)('onCollapse'),
              isCollapsed: pane.isCollapsed,
              onMenuToggle: (0, _storybook.action)('onMenuToggle')
            },
            _react2.default.createElement(
              'div',
              null,
              'defaultWidth: ',
              pane.defaultWidth
            ),
            _react2.default.createElement(
              'div',
              null,
              'minWidth: ',
              pane.minWidth
            )
          )
        );
      })
    )
  );
});