97 lines
2.3 KiB
JavaScript
97 lines
2.3 KiB
JavaScript
import React, { useState } from "react";
|
|
import styled from "@emotion/styled";
|
|
import GroupButtonsMenu from "../group-buttons-menu";
|
|
import DropDownItem from "../drop-down-item";
|
|
import Button from "../button";
|
|
|
|
export default {
|
|
title: "Examples/GroupButtonsMenu",
|
|
component: GroupButtonsMenu,
|
|
subcomponents: { DropDownItem, Button },
|
|
parameters: { docs: { description: { component: "Example" } } },
|
|
argTypes: {
|
|
closeAction: { action: "close action", table: { disable: true } },
|
|
},
|
|
};
|
|
|
|
const GroupButtonsMenuContainer = styled.div`
|
|
height: 2000px;
|
|
`;
|
|
|
|
const peopleItems = [
|
|
{
|
|
label: "Select",
|
|
isDropdown: true,
|
|
isSeparator: true,
|
|
isSelect: true,
|
|
fontWeight: "bold",
|
|
children: [
|
|
<DropDownItem key="active" label="Active" />,
|
|
<DropDownItem key="disabled" label="Disabled" />,
|
|
<DropDownItem key="invited" label="Invited" />,
|
|
],
|
|
onSelect: (a) => console.log(a),
|
|
},
|
|
{
|
|
label: "Make employee",
|
|
onClick: () => console.log("Make employee action"),
|
|
},
|
|
{
|
|
label: "Make guest",
|
|
onClick: () => console.log("Make guest action"),
|
|
},
|
|
{
|
|
label: "Set active",
|
|
onClick: () => console.log("Set active action"),
|
|
},
|
|
{
|
|
label: "Set disabled",
|
|
onClick: () => console.log("Set disabled action"),
|
|
},
|
|
{
|
|
label: "Invite again",
|
|
onClick: () => console.log("Invite again action"),
|
|
},
|
|
{
|
|
label: "Send e-mail",
|
|
onClick: () => console.log("Send e-mail action"),
|
|
},
|
|
{
|
|
label: "Delete",
|
|
onClick: () => console.log("Delete action"),
|
|
},
|
|
];
|
|
|
|
const Template = ({ closeAction, closeTitle, moreLabel, ...args }) => {
|
|
const [visible, setVisible] = useState(false);
|
|
const [checked, setChecked] = useState(false);
|
|
return (
|
|
<>
|
|
<Button
|
|
label="Show menu"
|
|
onClick={() => {
|
|
setVisible(!visible);
|
|
}}
|
|
/>
|
|
<GroupButtonsMenuContainer>
|
|
<GroupButtonsMenu
|
|
checked={checked}
|
|
menuItems={peopleItems}
|
|
visible={visible}
|
|
moreLabel={moreLabel}
|
|
closeTitle={closeTitle}
|
|
onClose={closeAction}
|
|
onChange={() => setChecked(!checked)}
|
|
selected={peopleItems[0].label}
|
|
/>
|
|
</GroupButtonsMenuContainer>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export const people = Template.bind({});
|
|
people.args = {
|
|
closeTitle: "Close",
|
|
moreLabel: "More",
|
|
};
|