wix-style-react/dist/es/stories/TableActionCell/TableActionCell.story.js

wix-style-react

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

/* eslint-disable no-console */
import React from 'react';
import CodeExample from 'wix-storybook-utils/CodeExample';

import { storySettings } from './storySettings';
import style from './TableActionCell.story.st.css';

import TableActionCell from '../../src/TableActionCell';

import PrimaryBlueExample from './examples/PrimaryBlueExample';
import PrimaryBlueExampleRaw from '!raw-loader!./examples/PrimaryBlueExample';

import PrimaryWhiteExample from './examples/PrimaryWhiteExample';
import PrimaryWhiteExampleRaw from '!raw-loader!./examples/PrimaryWhiteExample';

import PrimarySecondaryExample from './examples/PrimarySecondaryExample';
import PrimarySecondaryExampleRaw from '!raw-loader!./examples/PrimarySecondaryExample';

import PrimarySecondaryHiddenExample from './examples/PrimarySecondaryHiddenExample';
import PrimarySecondaryHiddenExampleRaw from '!raw-loader!./examples/PrimarySecondaryHiddenExample';

import PopoverMenuPropsExample from './examples/PopoverMenuPropsExample';
import PopoverMenuPropsExampleRaw from '!raw-loader!./examples/PopoverMenuPropsExample';

import AlwaysVisibleSecondaryExample from './examples/AlwaysVisibleSecondaryExample';
import AlwaysVisibleSecondaryExampleRaw from '!raw-loader!./examples/AlwaysVisibleSecondaryExample';

import OnlySecondaryExample from './examples/OnlySecondaryExample';
import OnlySecondaryExampleRaw from '!raw-loader!./examples/OnlySecondaryExample';

import OnlyVisibleSecondaryExample from './examples/OnlyVisibleSecondaryExample';
import OnlyVisibleSecondaryExampleRaw from '!raw-loader!./examples/OnlyVisibleSecondaryExample';

import PrimarySecondaryRTLExample from './examples/PrimarySecondaryRTLExample';
import PrimarySecondaryRTLExampleRaw from '!raw-loader!./examples/PrimarySecondaryRTLExample';

import DisabledSecondaryExample from './examples/DisabledSecondaryExample';
import DisabledSecondaryExampleRaw from '!raw-loader!./examples/DisabledSecondaryExample';

import { Star, Download, Duplicate, Print } from 'wix-style-react/new-icons';

var primaryActionOptions1 = {
  text: 'Details',
  theme: 'fullblue',
  onClick: function onClick() {
    return console.log('Details action called!');
  }
};

var primaryActionOptions2 = _extends({}, primaryActionOptions1, {
  theme: 'whiteblue'
});

var secondaryActionsOption = [{
  text: 'Star',
  icon: React.createElement(Star, null),
  onClick: function onClick() {
    return console.log('Star action called!');
  }
}, {
  text: 'Download',
  icon: React.createElement(Download, null),
  onClick: function onClick() {
    return console.log('Download action called!');
  }
}, {
  text: 'Duplicate',
  icon: React.createElement(Duplicate, null),
  onClick: function onClick() {
    return console.log('Duplicate action called!');
  }
}, {
  text: 'Print',
  icon: React.createElement(Print, null),
  onClick: function onClick() {
    return console.log('Print action called!');
  }
}];

var ExampleComponent = function ExampleComponent(props) {
  return React.createElement(
    'div',
    style('root', {}, props),
    React.createElement(
      'tr',
      { className: style.exampleRow },
      React.createElement(TableActionCell, props)
    )
  );
};

ExampleComponent.displayName = 'TableActionCell';

export default {
  category: storySettings.kind,
  storyName: storySettings.storyName,

  component: ExampleComponent,

  componentPath: '../../src/TableActionCell/TableActionCell.js',

  componentProps: {
    dataHook: storySettings.dataHook,
    primaryAction: primaryActionOptions1,
    secondaryActions: secondaryActionsOption,
    numOfVisibleSecondaryActions: 2,
    alwaysShowSecondaryActions: true
  },

  exampleProps: {
    primaryAction: [{ label: 'No primary action', value: null }, { label: 'Blue primary action', value: primaryActionOptions1 }, { label: 'White primary action', value: primaryActionOptions2 }],
    secondaryActions: [{ label: 'No secondary actions', value: [] }, { label: '4 secondary actions', value: secondaryActionsOption }]
  },

  examples: React.createElement(
    'div',
    style('root'),
    React.createElement(
      'div',
      { className: style.example },
      React.createElement(
        CodeExample,
        { title: 'Blue primary action', code: PrimaryBlueExampleRaw },
        React.createElement(PrimaryBlueExample, null)
      )
    ),
    React.createElement(
      'div',
      { className: style.example },
      React.createElement(
        CodeExample,
        { title: 'White primary action', code: PrimaryWhiteExampleRaw },
        React.createElement(PrimaryWhiteExample, null)
      )
    ),
    React.createElement(
      'div',
      { className: style.example },
      React.createElement(
        CodeExample,
        {
          title: 'Primary action and secondary actions',
          code: PrimarySecondaryExampleRaw
        },
        React.createElement(PrimarySecondaryExample, null)
      )
    ),
    React.createElement(
      'div',
      { className: style.example },
      React.createElement(
        CodeExample,
        {
          title: 'Primary action and hidden secondary action',
          code: PrimarySecondaryHiddenExampleRaw
        },
        React.createElement(PrimarySecondaryHiddenExample, null)
      )
    ),
    React.createElement(
      'div',
      { className: style.example },
      React.createElement(
        CodeExample,
        {
          title: 'With custom PopoverMenu props',
          code: PopoverMenuPropsExampleRaw
        },
        React.createElement(PopoverMenuPropsExample, null)
      )
    ),
    React.createElement(
      'div',
      { className: style.example },
      React.createElement(
        CodeExample,
        {
          title: 'Always visible secondary actions',
          code: AlwaysVisibleSecondaryExampleRaw
        },
        React.createElement(AlwaysVisibleSecondaryExample, null)
      )
    ),
    React.createElement(
      'div',
      { className: style.example },
      React.createElement(
        CodeExample,
        {
          title: 'Only secondary actions',
          code: OnlySecondaryExampleRaw
        },
        React.createElement(OnlySecondaryExample, null)
      )
    ),
    React.createElement(
      'div',
      { className: style.example },
      React.createElement(
        CodeExample,
        {
          title: 'Only visible secondary actions',
          code: OnlyVisibleSecondaryExampleRaw
        },
        React.createElement(OnlyVisibleSecondaryExample, null)
      )
    ),
    React.createElement(
      'div',
      { className: style.example },
      React.createElement(
        CodeExample,
        {
          title: 'Primary and secondary actions with RTL',
          code: PrimarySecondaryRTLExampleRaw
        },
        React.createElement(PrimarySecondaryRTLExample, null)
      )
    ),
    React.createElement(
      'div',
      { className: style.example },
      React.createElement(
        CodeExample,
        {
          title: 'Disabled secondary actions',
          code: DisabledSecondaryExampleRaw
        },
        React.createElement(DisabledSecondaryExample, null)
      )
    )
  )
};