wix-style-react/dist/stories/Table/Table.story.js

wix-style-react

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _TableStory = require('./Table.story.scss');

var _TableStory2 = _interopRequireDefault(_TableStory);

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

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

var _CodeExample2 = _interopRequireDefault(_CodeExample);

var _Table = require('../../src/Table/Table');

var _TableExample = require('./TableExample');

var _TableExample2 = require('!raw-loader!./TableExample');

var _TableExample3 = _interopRequireDefault(_TableExample2);

var _TablePageExample = require('./TablePageExample');

var _TablePageExample2 = require('!raw-loader!./TablePageExample');

var _TablePageExample3 = _interopRequireDefault(_TablePageExample2);

var _TableInfiniteScrollExample = require('./TableInfiniteScrollExample');

var _TableInfiniteScrollExample2 = require('!raw-loader!./TableInfiniteScrollExample');

var _TableInfiniteScrollExample3 = _interopRequireDefault(_TableInfiniteScrollExample2);

var _ActionCellPrimaryExample = require('./ActionCellPrimaryExample');

var _ActionCellPrimaryExample2 = require('!raw-loader!./ActionCellPrimaryExample');

var _ActionCellPrimaryExample3 = _interopRequireDefault(_ActionCellPrimaryExample2);

var _ActionCellPrimarySecondaryExample = require('./ActionCellPrimarySecondaryExample');

var _ActionCellPrimarySecondaryExample2 = require('!raw-loader!./ActionCellPrimarySecondaryExample');

var _ActionCellPrimarySecondaryExample3 = _interopRequireDefault(_ActionCellPrimarySecondaryExample2);

var _TableEmptyStateExample = require('./TableEmptyStateExample');

var _TableEmptyStateExample2 = require('!raw-loader!./TableEmptyStateExample');

var _TableEmptyStateExample3 = _interopRequireDefault(_TableEmptyStateExample2);

var _TableColumnAlignmentExample = require('./TableColumnAlignmentExample');

var _TableColumnAlignmentExample2 = require('!raw-loader!./TableColumnAlignmentExample');

var _TableColumnAlignmentExample3 = _interopRequireDefault(_TableColumnAlignmentExample2);

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

var data = [{ firstName: 'Meghan', lastName: 'Bishop' }, { firstName: 'Sara', lastName: 'Porter' }, { firstName: 'Deborah', lastName: 'Rhodes' }, { firstName: 'Walter', lastName: 'Jenning' }];

var dataLong = [1, 2, 3, 4, 5].reduce(function (accum) {
  return accum.concat(data);
}, []);

var columnsOption1 = [{ title: 'First', width: '30%', render: function render(row) {
    return row.firstName;
  } }, { title: 'Last', width: '30%', render: function render(row) {
    return row.lastName;
  } }];

var columnsOption2 = [{ title: 'Row Num', render: function render(row, rowNum) {
    return rowNum;
  } }, { title: 'First', render: function render(row) {
    return row.firstName;
  } }, { title: 'Last', render: function render(row) {
    return row.lastName;
  } }, { title: 'Full', render: function render(row) {
    return row.firstName + row.lastName;
  } }];

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

  component: _Table.Table,
  componentPath: '../../src/Table/Table.js',

  componentProps: {
    dataHook: _storySettings.storySettings.dataHook,
    id: 'id',
    data: data,
    columns: columnsOption1,
    showSelection: true
  },
  exampleProps: {
    columns: [{ label: '2 columns example', value: columnsOption1 }, { label: '4 columns example', value: columnsOption2 }],
    data: [{ label: '4 rows', value: data }, { label: '40 rows', value: dataLong }]
  },
  codeExample: false,
  examples: _react2.default.createElement(
    'div',
    null,
    _react2.default.createElement(
      'div',
      { className: _TableStory2.default.examples },
      _react2.default.createElement(
        'div',
        { className: _TableStory2.default.example },
        _react2.default.createElement(
          _CodeExample2.default,
          { title: 'Typical (With Toolbar)', code: _TableExample3.default },
          _react2.default.createElement(_TableExample.TableExample, null)
        )
      ),
      _react2.default.createElement(
        'div',
        { className: _TableStory2.default.example },
        _react2.default.createElement(
          _CodeExample2.default,
          {
            title: 'Table in a Page (Fixed Header)',
            code: _TablePageExample3.default
          },
          _react2.default.createElement(_TablePageExample.TablePageExample, null)
        )
      ),
      _react2.default.createElement(
        'div',
        { className: _TableStory2.default.example },
        _react2.default.createElement(
          _CodeExample2.default,
          {
            title: 'Table in a Page (Infinite Scroll)',
            code: _TableInfiniteScrollExample3.default
          },
          _react2.default.createElement(_TableInfiniteScrollExample.TableInfiniteScrollExample, null)
        )
      ),
      _react2.default.createElement(
        'div',
        { className: _TableStory2.default.example },
        _react2.default.createElement(
          _CodeExample2.default,
          {
            title: 'Table with Action Cell (Primary Action Only)',
            code: _ActionCellPrimaryExample3.default
          },
          _react2.default.createElement(_ActionCellPrimaryExample.ActionCellPrimaryExample, null)
        )
      ),
      _react2.default.createElement(
        'div',
        { className: _TableStory2.default.example },
        _react2.default.createElement(
          _CodeExample2.default,
          {
            title: 'Table with Action Cell (Primary and Secondary Actions)',
            code: _ActionCellPrimarySecondaryExample3.default
          },
          _react2.default.createElement(_ActionCellPrimarySecondaryExample.ActionCellPrimarySecondaryExample, null)
        )
      ),
      _react2.default.createElement(
        'div',
        { className: _TableStory2.default.example },
        _react2.default.createElement(
          _CodeExample2.default,
          {
            title: 'Table with EmptyState',
            code: _TableEmptyStateExample3.default
          },
          _react2.default.createElement(_TableEmptyStateExample.TableEmptyStateExample, null)
        )
      ),
      _react2.default.createElement(
        'div',
        { className: _TableStory2.default.example },
        _react2.default.createElement(
          _CodeExample2.default,
          {
            title: 'Table with column alignments',
            code: _TableColumnAlignmentExample3.default
          },
          _react2.default.createElement(_TableColumnAlignmentExample.TableColumnAlignmentExample, null)
        )
      )
    )
  )
};