orcs-design-system/es/components/ActionsMenu/ActionsMenu.stories.js

TeamForm's Design System, aka: ORCS

import React, { useRef, useState, useImperativeHandle } from "react";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
import { action } from "@storybook/addon-actions";
import useOnclickOutside from "react-cool-onclickoutside";
import { BrowserRouter } from "react-router-dom";
import ActionsMenu, { ActionsMenuBody, ActionsMenuHeading, ActionsMenuItem } from ".";
import Flex from "../Flex";
import Icon from "../Icon";
import Box from "../Box";
import Button from "../Button";
import TextArea from "../TextArea";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export default {
  title: "Components/ActionsMenu",
  decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
    pb: "150px",
    children: storyFn()
  })],
  component: ActionsMenu
};
export const defaultActionsMenu = () => /*#__PURE__*/_jsxs(ActionsMenu, {
  children: [/*#__PURE__*/_jsx(ActionsMenuItem, {
    href: "https://orchestrated.io/",
    children: "Open details page"
  }), /*#__PURE__*/_jsx(BrowserRouter, {
    children: /*#__PURE__*/_jsx(ActionsMenuItem, {
      as: Link,
      to: "/",
      children: "Edit"
    })
  }), /*#__PURE__*/_jsx(ActionsMenuItem, {
    onClick: action("clicked"),
    children: "Remove"
  })]
});
defaultActionsMenu.storyName = "Default";
export const leftOffsetActionsMenu = () => /*#__PURE__*/_jsx(Flex, {
  justifyContent: "flex-end",
  children: /*#__PURE__*/_jsxs(ActionsMenu, {
    ariaLabel: "Options Menu",
    direction: "left-start",
    children: [/*#__PURE__*/_jsx(ActionsMenuItem, {
      href: "https://orchestrated.io/",
      children: "Open details page"
    }), /*#__PURE__*/_jsx(BrowserRouter, {
      children: /*#__PURE__*/_jsx(ActionsMenuItem, {
        as: Link,
        to: "/",
        children: "Edit"
      })
    }), /*#__PURE__*/_jsx(ActionsMenuItem, {
      onClick: action("clicked"),
      children: "Remove"
    })]
  })
});
leftOffsetActionsMenu.storyName = "Left offset";
const MenuItems = /*#__PURE__*/React.forwardRef((_ref, ref) => {
  let {
    closeMenu,
    reasons
  } = _ref;
  const [showOther, setShowOther] = useState(false);
  const [selectedReason, setSelectedReason] = useState(null);
  const [otherReason, setOtherReason] = useState("");
  const reset = () => {
    setShowOther(false);
  };
  const resetAndCloseMenu = () => {
    reset();
    closeMenu();
  };
  useImperativeHandle(ref, () => ({
    reset
  }));
  const clickOther = () => {
    setSelectedReason("other");
    setShowOther(true);
  };
  const setReason = id => () => {
    // TODO: Make the call to back end
    setSelectedReason(id);
    setOtherReason("");
    resetAndCloseMenu();
  };
  const onOtherReasonChange = e => {
    setOtherReason(e.target.value);
  };
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsxs(ActionsMenuHeading, {
      onClick: reset,
      canClick: showOther,
      children: [showOther && /*#__PURE__*/_jsx(Icon, {
        icon: ["fas", "angle-left"],
        mr: "xs"
      }), " Select reason"]
    }), !showOther && /*#__PURE__*/_jsx(_Fragment, {
      children: reasons.map(_ref2 => {
        let {
          id,
          label
        } = _ref2;
        if (id === "other") {
          return /*#__PURE__*/_jsx(ActionsMenuItem, {
            type: "button",
            id: "other",
            selected: selectedReason === id,
            onClick: clickOther,
            children: /*#__PURE__*/_jsxs(Flex, {
              alignItems: "center",
              justifyContent: "space-between",
              children: [label, /*#__PURE__*/_jsx(Icon, {
                icon: ["fas", "pen"],
                size: "sm"
              })]
            })
          }, id);
        }
        return /*#__PURE__*/_jsx(ActionsMenuItem, {
          type: "button",
          selected: selectedReason === id,
          onClick: setReason(id),
          children: label
        }, id);
      })
    }), showOther && /*#__PURE__*/_jsxs(Box, {
      id: "editableContent",
      p: "s",
      children: [/*#__PURE__*/_jsx(TextArea, {
        id: "TextArea01",
        label: "Reason for rejection",
        cols: "35",
        rows: "3",
        defaultValue: otherReason,
        onChange: onOtherReasonChange
      }), /*#__PURE__*/_jsx(Button, {
        onClick: resetAndCloseMenu,
        small: true,
        variant: "danger",
        mt: "s",
        children: "Reject request"
      })]
    })]
  });
});
MenuItems.propTypes = {
  closeMenu: PropTypes.bool,
  reasons: PropTypes.array
};
const Reasons = [{
  id: "tooMany",
  label: "Too many people"
}, {
  id: "notEnough",
  label: "Not enough people"
}, {
  id: "noPeopleWithSkills",
  label: "No people with the desired skills"
}, {
  id: "other",
  label: "Other"
}];
export const advancedActionsMenu = () => {
  const ref = /*#__PURE__*/React.createRef(null);
  const closeMenu = () => {
    if (ref.current) {
      ref.current.closeMenu();
    }
  };
  return /*#__PURE__*/_jsx(Flex, {
    justifyContent: "flex-end",
    children: /*#__PURE__*/_jsx(ActionsMenu, {
      ref: ref,
      direction: "left-start",
      className: "ignore-onclickoutside",
      customTriggerComponent: /*#__PURE__*/_jsx(Button, {
        variant: "default",
        iconOnly: true,
        type: "button",
        width: "30px",
        height: "30px",
        children: /*#__PURE__*/_jsx(Icon, {
          icon: ["fas", "pen"],
          size: "sm"
        })
      }),
      closeOnClick: false,
      children: /*#__PURE__*/_jsx(MenuItems, {
        closeMenu: closeMenu,
        reasons: Reasons
      })
    })
  });
};
advancedActionsMenu.storyName = "Advanced Actions Menu";
export const customActionsMenu = () => {
  const AdvancedActionsMenu = () => {
    const [toggleState, setToggle] = useState(false);
    const menuItemsRef = useRef(null);
    const closeMenu = () => {
      setToggle(false);
    };
    const onToggle = e => {
      e.stopPropagation();
      setToggle(!toggleState);
    };
    return /*#__PURE__*/_jsx("div", {
      children: /*#__PURE__*/_jsx(Flex, {
        justifyContent: "flex-end",
        children: /*#__PURE__*/_jsx(ActionsMenuBody, {
          toggleState: toggleState,
          onToggle: onToggle,
          direction: "left-start",
          customTriggerComponent: /*#__PURE__*/_jsx(Button, {
            variant: "danger",
            iconOnly: true,
            type: "button",
            width: "30px",
            height: "30px",
            children: /*#__PURE__*/_jsx(Icon, {
              icon: ["fas", "times"]
            })
          }),
          children: /*#__PURE__*/_jsx(MenuItems, {
            ref: menuItemsRef,
            closeMenu: closeMenu,
            reasons: Reasons
          })
        })
      })
    });
  };
  return /*#__PURE__*/_jsx(AdvancedActionsMenu, {});
};
customActionsMenu.storyName = "Custom Actions Menu";
export const textButtonActionsMenu = () => {
  const TextButtonActionsMenu = () => {
    const [toggleState, setToggle] = useState(false);
    const menuItemsRef = useRef(null);
    const closeMenu = () => {
      setToggle(false);
    };
    const resetAndCloseMenu = () => {
      if (menuItemsRef.current) {
        menuItemsRef.current.reset();
      }
      closeMenu();
    };
    const menuRef = useOnclickOutside(resetAndCloseMenu, {
      disabled: !toggleState
    });
    const onToggle = e => {
      e.stopPropagation();
      setToggle(!toggleState);
    };
    return /*#__PURE__*/_jsx("div", {
      ref: menuRef,
      children: /*#__PURE__*/_jsxs(ActionsMenuBody, {
        toggleState: toggleState,
        onToggle: onToggle,
        menuWidth: "120px",
        direction: "bottom-start",
        customTriggerComponent: /*#__PURE__*/_jsxs(Button, {
          variant: "ghost",
          type: "button",
          iconRight: true,
          small: true,
          children: ["Contact via...", /*#__PURE__*/_jsx(Icon, {
            icon: ["fas", "chevron-down"]
          })]
        }),
        children: [/*#__PURE__*/_jsx(ActionsMenuItem, {
          href: "#",
          children: "Email"
        }), /*#__PURE__*/_jsx(ActionsMenuItem, {
          href: "#",
          children: "Phone"
        }), /*#__PURE__*/_jsx(ActionsMenuItem, {
          href: "#",
          children: "MS Teams"
        }), /*#__PURE__*/_jsx(ActionsMenuItem, {
          href: "#",
          children: "Slack"
        })]
      })
    });
  };
  return /*#__PURE__*/_jsx(TextButtonActionsMenu, {});
};
textButtonActionsMenu.storyName = "Text Button Actions Menu";
export const keepInViewExample = () => /*#__PURE__*/_jsxs(Flex, {
  alignItems: "flex-end",
  width: "100%",
  flexDirection: "column",
  children: [/*#__PURE__*/_jsxs(ActionsMenu, {
    mb: "r",
    children: [/*#__PURE__*/_jsx(ActionsMenuItem, {
      href: "https://orchestrated.io/",
      children: "Open details page"
    }), /*#__PURE__*/_jsx(BrowserRouter, {
      children: /*#__PURE__*/_jsx(ActionsMenuItem, {
        as: Link,
        to: "/",
        children: "Edit"
      })
    }), /*#__PURE__*/_jsx(ActionsMenuItem, {
      onClick: action("clicked"),
      children: "Remove"
    })]
  }), /*#__PURE__*/_jsxs(ActionsMenu, {
    direction: "bottom-start",
    menuWidth: "200px",
    customTriggerComponent: /*#__PURE__*/_jsxs(Button, {
      variant: "ghost",
      type: "button",
      iconRight: true,
      small: true,
      children: ["Contact via...", /*#__PURE__*/_jsx(Icon, {
        icon: ["fas", "chevron-down"]
      })]
    }),
    children: [/*#__PURE__*/_jsx(ActionsMenuItem, {
      href: "#",
      children: "Email"
    }), /*#__PURE__*/_jsx(ActionsMenuItem, {
      href: "#",
      children: "Phone"
    }), /*#__PURE__*/_jsx(ActionsMenuItem, {
      href: "#",
      children: "MS Teams"
    }), /*#__PURE__*/_jsx(ActionsMenuItem, {
      href: "#",
      children: "Slack"
    })]
  })]
});
keepInViewExample.storyName = "Keep In View Example";
defaultActionsMenu.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "defaultActionsMenu"
};
leftOffsetActionsMenu.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "leftOffsetActionsMenu"
};
advancedActionsMenu.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "advancedActionsMenu"
};
customActionsMenu.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "customActionsMenu"
};
textButtonActionsMenu.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "textButtonActionsMenu"
};
keepInViewExample.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "keepInViewExample"
};