100 lines
2.3 KiB
JavaScript
100 lines
2.3 KiB
JavaScript
|
import React from "react";
|
||
|
|
|
||
|
|
import ContextMenuButton from "./";
|
||
|
|
import icon from "../../../public/images/vertical-dots.react.svg";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
title: "Components/ContextMenuButton",
|
||
|
|
component: ContextMenuButton,
|
||
|
|
argTypes: {},
|
||
|
|
parameters: {
|
||
|
|
docs: {
|
||
|
|
description: {
|
||
|
|
component: `ContextMenuButton is used for displaying context menu actions on a list's item`,
|
||
|
|
},
|
||
|
|
source: {
|
||
|
|
code: `
|
||
|
|
import ContextMenuButton from "@appserver/components/context-menu-button";
|
||
|
|
|
||
|
|
<ContextMenuButton
|
||
|
|
iconName="static/images/vertical-dots.react.svg"
|
||
|
|
size={16}
|
||
|
|
color="#A3A9AE"
|
||
|
|
isDisabled={false}
|
||
|
|
title="Actions"
|
||
|
|
getData={() => [
|
||
|
|
{
|
||
|
|
key: "key",
|
||
|
|
label: "label",
|
||
|
|
onClick: () => alert("label"),
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
`,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
function getData() {
|
||
|
|
console.log("getData");
|
||
|
|
return [
|
||
|
|
{ key: "key1", label: "label1", onClick: () => console.log("label1") },
|
||
|
|
{ key: "key2", label: "label2", onClick: () => console.log("label2") },
|
||
|
|
];
|
||
|
|
}
|
||
|
|
|
||
|
|
const Template = (args) => (
|
||
|
|
<ContextMenuButton
|
||
|
|
{...args}
|
||
|
|
title={"Actions"}
|
||
|
|
iconName={icon}
|
||
|
|
size={16}
|
||
|
|
color={"#A3A9AE"}
|
||
|
|
getData={getData}
|
||
|
|
isDisabled={false}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
|
||
|
|
export const Default = Template.bind({});
|
||
|
|
/*import { storiesOf } from "@storybook/react";
|
||
|
|
import {
|
||
|
|
withKnobs,
|
||
|
|
text,
|
||
|
|
select,
|
||
|
|
number,
|
||
|
|
color,
|
||
|
|
boolean,
|
||
|
|
} from "@storybook/addon-knobs/react";
|
||
|
|
import withReadme from "storybook-readme/with-readme";
|
||
|
|
import Readme from "./README.md";
|
||
|
|
import Section from "../../../.storybook/decorators/section";
|
||
|
|
import ContextMenuButton from ".";
|
||
|
|
import { Icons } from "../icons";
|
||
|
|
|
||
|
|
const iconNames = Object.keys(Icons);
|
||
|
|
|
||
|
|
function getData() {
|
||
|
|
console.log("getData");
|
||
|
|
return [
|
||
|
|
{ key: "key1", label: "label1", onClick: () => console.log("label1") },
|
||
|
|
{ key: "key2", label: "label2", onClick: () => console.log("label2") },
|
||
|
|
];
|
||
|
|
}
|
||
|
|
|
||
|
|
storiesOf("Components|ContextMenuButton", module)
|
||
|
|
.addDecorator(withKnobs)
|
||
|
|
.addDecorator(withReadme(Readme))
|
||
|
|
.add("base", () => (
|
||
|
|
<Section>
|
||
|
|
<ContextMenuButton
|
||
|
|
title={text("title", "Actions")}
|
||
|
|
iconName={select("iconName", iconNames, "VerticalDotsIcon")}
|
||
|
|
size={number("size", 16)}
|
||
|
|
color={color("loaderColor", "#A3A9AE")}
|
||
|
|
getData={getData}
|
||
|
|
isDisabled={boolean("isDisabled", false)}
|
||
|
|
/>
|
||
|
|
</Section>
|
||
|
|
));*/
|