wix-style-react/dist/es/stories/Table/DefaultToolbar.js

wix-style-react

import React from 'react';
import { TableContextPropTypes } from 'wix-style-react/Table';
import { TableToolbar, ItemGroup, Item, Title, Label, SelectedCount, Divider } from 'wix-style-react/TableToolbar';

import Search from 'wix-style-react/Search';
import Dropdown from 'wix-style-react/Dropdown';
import Button from 'wix-style-react/Button';
import { Edit, Duplicate, Upload } from 'wix-style-react/new-icons';

export var renderMyTableToolbar = function renderMyTableToolbar(selectionContext) {
  return selectionContext.selectedCount === 0 ? React.createElement(MainToolbar, null) : React.createElement(BulkActionsToolbar, selectionContext);
};

var MainToolbar = function MainToolbar() {
  var collectionOptions = [{ id: 0, value: 'All Products' }, { id: 1, value: 'Towels' }, { id: 2, value: 'Slippers' }];

  var filterOptions = [{ id: 0, value: 'All' }, { id: 1, value: 'Red' }, { id: 2, value: 'Cyan' }];

  return React.createElement(
    TableToolbar,
    null,
    React.createElement(
      ItemGroup,
      { position: 'start' },
      React.createElement(
        Item,
        null,
        React.createElement(
          Title,
          null,
          'My Table'
        )
      ),
      React.createElement(
        Item,
        null,
        React.createElement(
          Label,
          null,
          'Collection',
          React.createElement(
            'span',
            { style: { width: '150px' } },
            React.createElement(Dropdown, { options: collectionOptions, selectedId: 0, roundInput: true })
          )
        )
      ),
      React.createElement(
        Item,
        null,
        React.createElement(
          Label,
          null,
          'Filter By',
          React.createElement(
            'span',
            { style: { width: '86px' } },
            React.createElement(Dropdown, { options: filterOptions, selectedId: 0, roundInput: true })
          )
        )
      )
    ),
    React.createElement(
      ItemGroup,
      { position: 'end' },
      React.createElement(
        Item,
        null,
        React.createElement(Search, null)
      )
    )
  );
};

var BulkActionsToolbar = function BulkActionsToolbar(props) {
  return React.createElement(
    TableToolbar,
    null,
    React.createElement(
      ItemGroup,
      { position: 'start' },
      React.createElement(
        Item,
        null,
        React.createElement(
          SelectedCount,
          null,
          props.selectedCount + ' Selected'
        )
      )
    ),
    React.createElement(
      ItemGroup,
      { position: 'end' },
      React.createElement(
        Item,
        { layout: 'button' },
        React.createElement(
          Button,
          {
            theme: 'whiteblueprimary',
            prefixIcon: React.createElement(Upload, null),
            onClick: function onClick() {
              return window.alert('Exporting selectedIds=' + props.getSelectedIds());
            }
          },
          'Export'
        )
      ),
      React.createElement(
        Item,
        { layout: 'button' },
        React.createElement(
          Button,
          {
            theme: 'whiteblueprimary',
            prefixIcon: React.createElement(Duplicate, null),
            onClick: function onClick() {
              return window.alert('Duplicating selectedIds=' + props.getSelectedIds());
            }
          },
          'Duplicate'
        )
      ),
      React.createElement(
        Item,
        { layout: 'button' },
        React.createElement(
          Button,
          {
            theme: 'whiteblueprimary',
            prefixIcon: React.createElement(Edit, null),
            onClick: function onClick() {
              return window.alert('Editing selectedIds=' + props.getSelectedIds());
            }
          },
          'Edit'
        )
      ),
      React.createElement(Divider, null),
      React.createElement(
        Item,
        null,
        React.createElement(Search, { expandable: true })
      )
    )
  );
};
BulkActionsToolbar.propTypes = TableContextPropTypes;