2020-10-16 13:16:01 +00:00
|
|
|
import React from "react";
|
|
|
|
import { storiesOf } from "@storybook/react";
|
|
|
|
import { withKnobs, text, boolean } from "@storybook/addon-knobs/react";
|
|
|
|
import { BooleanValue } from "react-values";
|
|
|
|
import withReadme from "storybook-readme/with-readme";
|
|
|
|
import styled from "@emotion/styled";
|
|
|
|
import Readme from "./README.md";
|
|
|
|
import GroupButtonsMenu from ".";
|
|
|
|
import DropDownItem from "../drop-down-item";
|
|
|
|
import Button from "../button";
|
2019-07-08 07:12:43 +00:00
|
|
|
|
|
|
|
const GroupButtonsMenuContainer = styled.div`
|
|
|
|
height: 2000px;
|
|
|
|
`;
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
storiesOf("Components|GroupButtonsMenu", module)
|
2019-07-30 11:17:19 +00:00
|
|
|
.addDecorator(withReadme(Readme))
|
|
|
|
.addDecorator(withKnobs)
|
2020-10-16 13:16:01 +00:00
|
|
|
.add("base", () => {
|
|
|
|
const disableEven = boolean("disable even", false);
|
|
|
|
const disableOdd = boolean("disable odd", false);
|
2019-08-22 08:05:03 +00:00
|
|
|
|
|
|
|
const groupItems = [
|
|
|
|
{
|
2020-10-16 13:16:01 +00:00
|
|
|
label: "Select",
|
2019-08-22 08:05:03 +00:00
|
|
|
isDropdown: true,
|
|
|
|
isSeparator: true,
|
|
|
|
isSelect: true,
|
2020-10-16 13:16:01 +00:00
|
|
|
fontWeight: "bold",
|
2019-08-22 08:05:03 +00:00
|
|
|
children: [
|
2020-10-16 13:16:01 +00:00
|
|
|
<DropDownItem key="aaa" label="aaa" />,
|
|
|
|
<DropDownItem key="bbb" label="bbb" />,
|
|
|
|
<DropDownItem key="ccc" label="ccc" />,
|
2019-08-22 08:05:03 +00:00
|
|
|
],
|
2020-10-16 13:16:01 +00:00
|
|
|
onSelect: (a) => console.log(a),
|
2019-08-22 08:05:03 +00:00
|
|
|
},
|
|
|
|
{
|
2020-10-16 13:16:01 +00:00
|
|
|
label: "Menu item",
|
2019-08-22 08:05:03 +00:00
|
|
|
disabled: disableEven,
|
2020-10-16 13:16:01 +00:00
|
|
|
onClick: () => console.log("Menu item action"),
|
2019-08-22 08:05:03 +00:00
|
|
|
},
|
|
|
|
{
|
2020-10-16 13:16:01 +00:00
|
|
|
label: "Menu item",
|
2019-08-22 08:05:03 +00:00
|
|
|
disabled: disableOdd,
|
2020-10-16 13:16:01 +00:00
|
|
|
onClick: () => console.log("Menu item action"),
|
2019-08-22 08:05:03 +00:00
|
|
|
},
|
|
|
|
{
|
2020-10-16 13:16:01 +00:00
|
|
|
label: "Menu item",
|
2019-08-22 08:05:03 +00:00
|
|
|
disabled: disableEven,
|
2020-10-16 13:16:01 +00:00
|
|
|
onClick: () => console.log("Menu item action"),
|
2019-08-22 08:05:03 +00:00
|
|
|
},
|
|
|
|
{
|
2020-10-16 13:16:01 +00:00
|
|
|
label: "Menu item",
|
2019-08-22 08:05:03 +00:00
|
|
|
disabled: disableOdd,
|
2020-10-16 13:16:01 +00:00
|
|
|
onClick: () => console.log("Menu item action"),
|
2019-08-22 08:05:03 +00:00
|
|
|
},
|
|
|
|
{
|
2020-10-16 13:16:01 +00:00
|
|
|
label: "Menu item",
|
2019-08-22 08:05:03 +00:00
|
|
|
disabled: disableEven,
|
2020-10-16 13:16:01 +00:00
|
|
|
onClick: () => console.log("Menu item action"),
|
2019-08-22 08:05:03 +00:00
|
|
|
},
|
|
|
|
{
|
2020-10-16 13:16:01 +00:00
|
|
|
label: "Menu item",
|
2019-08-22 08:05:03 +00:00
|
|
|
disabled: disableOdd,
|
2020-10-16 13:16:01 +00:00
|
|
|
onClick: () => console.log("Menu item action"),
|
2019-08-22 08:05:03 +00:00
|
|
|
},
|
|
|
|
{
|
2020-10-16 13:16:01 +00:00
|
|
|
label: "Menu item",
|
2019-08-22 08:05:03 +00:00
|
|
|
disabled: disableEven,
|
2020-10-16 13:16:01 +00:00
|
|
|
onClick: () => console.log("Menu item action"),
|
2019-08-22 08:05:03 +00:00
|
|
|
},
|
|
|
|
{
|
2020-10-16 13:16:01 +00:00
|
|
|
label: "Menu item",
|
2019-08-22 08:05:03 +00:00
|
|
|
disabled: disableOdd,
|
2020-10-16 13:16:01 +00:00
|
|
|
onClick: () => console.log("Menu item action"),
|
2019-08-22 08:05:03 +00:00
|
|
|
},
|
|
|
|
{
|
2020-10-16 13:16:01 +00:00
|
|
|
label: "Menu item",
|
2019-08-22 08:05:03 +00:00
|
|
|
disabled: disableEven,
|
2020-10-16 13:16:01 +00:00
|
|
|
onClick: () => console.log("Menu item action"),
|
2019-08-22 08:05:03 +00:00
|
|
|
},
|
|
|
|
{
|
2020-10-16 13:16:01 +00:00
|
|
|
label: "Menu item",
|
2019-08-22 08:05:03 +00:00
|
|
|
disabled: disableOdd,
|
2020-10-16 13:16:01 +00:00
|
|
|
onClick: () => console.log("Menu item action"),
|
2019-08-22 08:05:03 +00:00
|
|
|
},
|
|
|
|
{
|
2020-10-16 13:16:01 +00:00
|
|
|
label: "Menu item",
|
2019-08-22 08:05:03 +00:00
|
|
|
disabled: disableEven,
|
2020-10-16 13:16:01 +00:00
|
|
|
onClick: () => console.log("Menu item action"),
|
2019-08-22 08:05:03 +00:00
|
|
|
},
|
|
|
|
{
|
2020-10-16 13:16:01 +00:00
|
|
|
label: "Menu item",
|
2019-08-22 08:05:03 +00:00
|
|
|
disabled: disableOdd,
|
2020-10-16 13:16:01 +00:00
|
|
|
onClick: () => console.log("Menu item action"),
|
2019-08-22 08:05:03 +00:00
|
|
|
},
|
|
|
|
{
|
2020-10-16 13:16:01 +00:00
|
|
|
label: "Menu item",
|
2019-08-22 08:05:03 +00:00
|
|
|
disabled: disableEven,
|
2020-10-16 13:16:01 +00:00
|
|
|
onClick: () => console.log("Menu item action"),
|
2019-08-22 08:05:03 +00:00
|
|
|
},
|
|
|
|
{
|
2020-10-16 13:16:01 +00:00
|
|
|
label: "Menu item",
|
2019-08-22 08:05:03 +00:00
|
|
|
disabled: disableOdd,
|
2020-10-16 13:16:01 +00:00
|
|
|
onClick: () => console.log("Menu item action"),
|
2019-08-22 08:05:03 +00:00
|
|
|
},
|
|
|
|
{
|
2020-10-16 13:16:01 +00:00
|
|
|
label: "Menu item",
|
2019-08-22 08:05:03 +00:00
|
|
|
disabled: disableEven,
|
2020-10-16 13:16:01 +00:00
|
|
|
onClick: () => console.log("Menu item action"),
|
2019-08-22 08:05:03 +00:00
|
|
|
},
|
|
|
|
{
|
2020-10-16 13:16:01 +00:00
|
|
|
label: "Menu item",
|
2019-08-22 08:05:03 +00:00
|
|
|
disabled: disableOdd,
|
2020-10-16 13:16:01 +00:00
|
|
|
onClick: () => console.log("Menu item action"),
|
2019-08-22 08:05:03 +00:00
|
|
|
},
|
|
|
|
{
|
2020-10-16 13:16:01 +00:00
|
|
|
label: "Menu item",
|
2019-08-22 08:05:03 +00:00
|
|
|
disabled: disableEven,
|
2020-10-16 13:16:01 +00:00
|
|
|
onClick: () => console.log("Menu item action"),
|
2019-08-22 08:05:03 +00:00
|
|
|
},
|
|
|
|
{
|
2020-10-16 13:16:01 +00:00
|
|
|
label: "Menu item",
|
2019-08-22 08:05:03 +00:00
|
|
|
disabled: disableOdd,
|
2020-10-16 13:16:01 +00:00
|
|
|
onClick: () => console.log("Menu item action"),
|
|
|
|
},
|
2019-08-22 08:05:03 +00:00
|
|
|
];
|
|
|
|
|
2019-07-30 11:17:19 +00:00
|
|
|
return (
|
|
|
|
<BooleanValue>
|
|
|
|
{({ value: visible, toggle }) => (
|
|
|
|
<>
|
|
|
|
<Button
|
|
|
|
label="Show menu"
|
2019-09-09 13:06:22 +00:00
|
|
|
onClick={() => {
|
2019-07-30 11:17:19 +00:00
|
|
|
toggle(visible);
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
<GroupButtonsMenuContainer>
|
|
|
|
<BooleanValue>
|
|
|
|
{({ value: checked, toggle }) => (
|
|
|
|
<GroupButtonsMenu
|
|
|
|
checked={checked}
|
|
|
|
menuItems={groupItems}
|
|
|
|
visible={visible}
|
2020-10-16 13:16:01 +00:00
|
|
|
moreLabel={text("moreLabel", "More")}
|
|
|
|
closeTitle={text("closeTitle", "Close")}
|
|
|
|
onClose={() => console.log("Close action")}
|
2019-09-09 13:06:22 +00:00
|
|
|
onChange={() => toggle(checked)}
|
2019-07-30 11:17:19 +00:00
|
|
|
selected={groupItems[0].label}
|
|
|
|
/>
|
2019-07-22 07:59:31 +00:00
|
|
|
)}
|
2019-07-30 11:17:19 +00:00
|
|
|
</BooleanValue>
|
|
|
|
</GroupButtonsMenuContainer>
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
</BooleanValue>
|
|
|
|
);
|
2020-10-16 13:16:01 +00:00
|
|
|
});
|