2020-10-16 13:16:01 +00:00
|
|
|
import React from "react";
|
|
|
|
import Row from ".";
|
|
|
|
import Text from "../text";
|
|
|
|
import Avatar from "../avatar";
|
|
|
|
import ComboBox from "../combobox";
|
2021-03-10 10:02:57 +00:00
|
|
|
import CatalogFolderIcon from "../public/static/images/catalog.folder.react.svg";
|
2019-08-20 13:07:30 +00:00
|
|
|
|
2021-03-10 10:02:57 +00:00
|
|
|
export default {
|
|
|
|
title: "Components/Row",
|
|
|
|
component: Row,
|
|
|
|
parameters: {
|
|
|
|
docs: { description: { component: "Displays content as row" } },
|
|
|
|
},
|
|
|
|
argTypes: {
|
|
|
|
element: {
|
|
|
|
control: {
|
|
|
|
type: "select",
|
|
|
|
options: ["", "Avatar", "Icon", "ComboBox"],
|
|
|
|
},
|
|
|
|
},
|
|
|
|
content: { control: "text" },
|
|
|
|
onSelectComboBox: { action: "onSelectComboBox", table: { disable: true } },
|
|
|
|
contextItemClick: { action: "contextItemClick", table: { disable: true } },
|
|
|
|
checkbox: { description: "Disable checkbox" },
|
|
|
|
},
|
|
|
|
};
|
2019-08-20 13:07:30 +00:00
|
|
|
|
2021-03-10 10:02:57 +00:00
|
|
|
const elementAvatar = <Avatar size="min" role="user" userName="Demo Avatar" />;
|
|
|
|
const elementIcon = <CatalogFolderIcon size="big" />;
|
2019-08-20 13:07:30 +00:00
|
|
|
|
2021-03-10 10:02:57 +00:00
|
|
|
const renderElementComboBox = (onSelect) => (
|
|
|
|
<ComboBox
|
|
|
|
options={[
|
|
|
|
{
|
|
|
|
key: 1,
|
|
|
|
icon: "static/images/item.active.react.svg",
|
|
|
|
label: "Open",
|
|
|
|
},
|
|
|
|
{ key: 2, icon: "static/images/check.react.svg", label: "Closed" },
|
|
|
|
]}
|
|
|
|
onSelect={(option) => onSelect(option)}
|
|
|
|
selectedOption={{
|
|
|
|
key: 0,
|
|
|
|
icon: "static/images/item.active.react.svg",
|
|
|
|
label: "",
|
|
|
|
}}
|
|
|
|
scaled={false}
|
|
|
|
size="content"
|
|
|
|
isDisabled={false}
|
|
|
|
/>
|
|
|
|
);
|
2019-12-04 09:36:13 +00:00
|
|
|
|
2021-03-10 10:02:57 +00:00
|
|
|
const Template = ({
|
|
|
|
element,
|
|
|
|
contextButton,
|
|
|
|
content,
|
|
|
|
onSelectComboBox,
|
|
|
|
contextItemClick,
|
|
|
|
checkbox,
|
|
|
|
checked,
|
|
|
|
...args
|
|
|
|
}) => {
|
|
|
|
const getElementProps = (element) =>
|
|
|
|
element === "Avatar"
|
|
|
|
? { element: elementAvatar }
|
|
|
|
: element === "Icon"
|
|
|
|
? { element: elementIcon }
|
|
|
|
: element === "ComboBox"
|
|
|
|
? { element: renderElementComboBox(onSelectComboBox) }
|
|
|
|
: {};
|
|
|
|
|
|
|
|
const elementProps = getElementProps(element);
|
|
|
|
const checkedProps = checkbox ? { checked: checked } : {};
|
|
|
|
return (
|
|
|
|
<Row
|
|
|
|
{...args}
|
|
|
|
key="1"
|
|
|
|
{...checkedProps}
|
|
|
|
{...elementProps}
|
|
|
|
contextOptions={
|
|
|
|
contextButton
|
|
|
|
? [
|
|
|
|
{
|
|
|
|
key: "key1",
|
|
|
|
label: "Edit",
|
|
|
|
onClick: () => contextItemClick("Context action: Edit"),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: "key2",
|
|
|
|
label: "Delete",
|
|
|
|
onClick: () => contextItemClick("Context action: Delete"),
|
|
|
|
},
|
|
|
|
]
|
|
|
|
: []
|
|
|
|
}
|
|
|
|
>
|
|
|
|
<Text truncate={true}>{content}</Text>
|
|
|
|
</Row>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export const Default = Template.bind({});
|
|
|
|
Default.args = {
|
|
|
|
contextButton: true,
|
|
|
|
checked: true,
|
|
|
|
element: "",
|
|
|
|
content: "Sample text",
|
|
|
|
checkbox: true,
|
|
|
|
};
|