wix-style-react/dist/stories/DataTable/index.js

wix-style-react

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _react3 = require('@storybook/react');

var _Markdown = require('wix-storybook-utils/Markdown');

var _Markdown2 = _interopRequireDefault(_Markdown);

var _CodeExample = require('wix-storybook-utils/CodeExample');

var _CodeExample2 = _interopRequireDefault(_CodeExample);

var _TabbedView = require('wix-storybook-utils/TabbedView');

var _TabbedView2 = _interopRequireDefault(_TabbedView);

var _README = require('../../src/DataTable/README.md');

var _README2 = _interopRequireDefault(_README);

var _READMETESTKIT = require('../../src/DataTable/README.TESTKIT.md');

var _READMETESTKIT2 = _interopRequireDefault(_READMETESTKIT);

var _Example = require('./Example');

var _Example2 = _interopRequireDefault(_Example);

var _Example3 = require('!raw-loader!./Example');

var _Example4 = _interopRequireDefault(_Example3);

var _ExampleCallingServer = require('./ExampleCallingServer');

var _ExampleCallingServer2 = _interopRequireDefault(_ExampleCallingServer);

var _ExampleCallingServer3 = require('!raw-loader!./ExampleCallingServer');

var _ExampleCallingServer4 = _interopRequireDefault(_ExampleCallingServer3);

var _ExampleWithoutHeader = require('./ExampleWithoutHeader');

var _ExampleWithoutHeader2 = _interopRequireDefault(_ExampleWithoutHeader);

var _ExampleWithoutHeader3 = require('!raw-loader!./ExampleWithoutHeader');

var _ExampleWithoutHeader4 = _interopRequireDefault(_ExampleWithoutHeader3);

var _ExampleWithAnimatedRowDetails = require('./ExampleWithAnimatedRowDetails');

var _ExampleWithAnimatedRowDetails2 = _interopRequireDefault(_ExampleWithAnimatedRowDetails);

var _ExampleWithAnimatedRowDetails3 = require('!raw-loader!./ExampleWithAnimatedRowDetails');

var _ExampleWithAnimatedRowDetails4 = _interopRequireDefault(_ExampleWithAnimatedRowDetails3);

var _ExampleSortable = require('./ExampleSortable');

var _ExampleSortable2 = _interopRequireDefault(_ExampleSortable);

var _ExampleSortable3 = require('!raw-loader!./ExampleSortable');

var _ExampleSortable4 = _interopRequireDefault(_ExampleSortable3);

var _ExampleSortableOldDesign = require('./ExampleSortableOldDesign');

var _ExampleSortableOldDesign2 = _interopRequireDefault(_ExampleSortableOldDesign);

var _ExampleSortableOldDesign3 = require('!raw-loader!./ExampleSortableOldDesign');

var _ExampleSortableOldDesign4 = _interopRequireDefault(_ExampleSortableOldDesign3);

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

(0, _react3.storiesOf)('10. Tables', module).add('10.1 DataTable (Legacy)', function () {
  return _react2.default.createElement(
    _TabbedView2.default,
    { tabs: ['API', 'TestKits'] },
    _react2.default.createElement(
      'div',
      null,
      _react2.default.createElement(_Markdown2.default, { source: _README2.default }),
      _react2.default.createElement(
        'h1',
        null,
        'Usage examples'
      ),
      _react2.default.createElement(
        'h2',
        null,
        'IMPORTANT NOTE - New Design!!!'
      ),
      _react2.default.createElement(
        'p',
        { style: { fontSize: 24 } },
        'These examples are using a prop `newDesign=true` which applies new css rules from updates UX specs.',
        _react2.default.createElement('br', null),
        'These rules include layout changes that could potentialy break design.',
        ' ',
        _react2.default.createElement('br', null),
        _react2.default.createElement(
          'span',
          { style: { fontWeight: 'bold' } },
          'Please enable this flag so you can adapt to the changes before the breaking version is released'
        ),
        '.'
      ),
      _react2.default.createElement(
        _CodeExample2.default,
        { title: 'With infinite scroll', code: _Example4.default },
        _react2.default.createElement(_Example2.default, null)
      ),
      _react2.default.createElement(
        _CodeExample2.default,
        {
          title: 'With animated row details',
          code: _ExampleWithAnimatedRowDetails4.default
        },
        _react2.default.createElement(_ExampleWithAnimatedRowDetails2.default, null)
      ),
      _react2.default.createElement(
        _CodeExample2.default,
        {
          title: 'Within a dynamic width container (80%)',
          code: _ExampleSortable4.default
        },
        _react2.default.createElement(_ExampleSortable2.default, {
          style: { width: '80%' },
          dataHook: 'storybook-responsive-width'
        })
      ),
      _react2.default.createElement(
        _CodeExample2.default,
        {
          title: 'With sorting & info tooltip',
          code: _ExampleSortable4.default
        },
        _react2.default.createElement(_ExampleSortable2.default, null)
      ),
      _react2.default.createElement(
        _CodeExample2.default,
        {
          title: 'With sorting - old design',
          code: _ExampleSortableOldDesign4.default
        },
        _react2.default.createElement(_ExampleSortableOldDesign2.default, null)
      ),
      _react2.default.createElement(
        _CodeExample2.default,
        { title: 'Without header', code: _ExampleWithoutHeader4.default },
        _react2.default.createElement(_ExampleWithoutHeader2.default, null)
      ),
      _react2.default.createElement(
        _CodeExample2.default,
        {
          title: 'With server calling (up to 100 items)',
          code: _ExampleCallingServer4.default
        },
        _react2.default.createElement(_ExampleCallingServer2.default, null)
      )
    ),
    _react2.default.createElement(_Markdown2.default, { source: _READMETESTKIT2.default })
  );
});