@eureca/eureca-ui/src/components/Menu/stories/ellipsis-trigger.stories.js

UI component library of Eureca's user and admin apps

import React, { useState } from 'react';
import { withKnobs } from '@storybook/addon-knobs';
import { Box } from '@material-ui/core';

import { FaUserEdit } from 'react-icons/fa';

import { IconAndLabelMenuList } from '..';
import { EllipsisTrigger } from '..';

const options = [
  { id: 0, icon: <FaUserEdit />, label: 'Item 1', value: 'item-1' },
  { id: 1, icon: <FaUserEdit />, label: 'Item 2', value: 'item-2' },
  { id: 2, icon: <FaUserEdit />, label: 'Item 3', value: 'item-3' },
];

export default { title: 'Originals/Menu', decorators: [withKnobs], includeStories: [] };

export function EllipsisStory() {
  const [anchor, setAnchor] = useState();

  function handleClose() {
    setAnchor(null);
  }

  function handleClick(event) {
    setAnchor(event.currentTarget);
  }

  function handleSelect() {
    handleClose();
  }

  return (
    <Box>
      <EllipsisTrigger onClick={event => handleClick(event)} />
      <IconAndLabelMenuList
        options={options}
        anchor={anchor}
        onClose={handleClose}
        onClick={handleSelect}
        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
        transformOrigin={{ vertical: 'bottom', horizontal: 'center' }}
      />
    </Box>
  );
}