wix-style-react/dist/es/stories/TableActionCell/examples/PopoverMenuPropsExample.js

wix-style-react

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

import style from '../TableActionCell.story.st.css';

var Example = function Example() {
  return React.createElement(
    'div',
    { className: style.exampleRow },
    React.createElement(TableActionCell, {
      dataHook: 'story-popover-menu-props',
      primaryAction: {
        text: 'Edit',
        theme: 'fullblue',
        onClick: function onClick() {
          return window.alert('Primary action was triggered!');
        }
      },
      secondaryActions: [{
        text: 'Star',
        icon: React.createElement(Star, null),
        onClick: function onClick() {
          return window.alert('Star action was triggered.');
        }
      }, {
        text: 'Download',
        icon: React.createElement(Download, null),
        onClick: function onClick() {
          return window.alert('Download action was triggered.');
        }
      }, {
        text: 'Duplicate Duplicate',
        icon: React.createElement(Duplicate, null),
        onClick: function onClick() {
          return window.alert('Duplicate action was triggered.');
        }
      }, {
        text: 'A very long option name',
        icon: React.createElement(Print, null),
        onClick: function onClick() {
          return window.alert('Print action was triggered.');
        }
      }],
      numOfVisibleSecondaryActions: 0,
      popoverMenuProps: {
        placement: 'bottom'
      }
    })
  );
};

export default Example;