import React from "react";
import Row from "../row";
import Avatar from "../avatar";
import Link from "../link";
import RowContent from "../row-content";
import SendClockIcon from "../public/static/images/send.clock.react.svg";
import CatalogSpamIcon from "../public/static/images/catalog.spam.react.svg";
export default {
title: "Examples/Row",
component: Row,
subcomponents: { Avatar, Link, RowContent },
parameters: { docs: { description: { component: "Example" } } },
};
const fakeUsers = [
{
id: "1",
userName: "Helen Walton",
avatar: "",
role: "owner",
status: "normal",
isHead: false,
department: "Administration",
mobilePhone: "+5 104 6473420",
email: "percival1979@yahoo.com",
contextOptions: [
{
key: "key1",
label: "Send e-mail",
onClick: () => console.log("Context action: Send e-mail"),
},
{
key: "key2",
label: "Send message",
onClick: () => console.log("Context action: Send message"),
},
{ key: "key3", isSeparator: true },
{
key: "key4",
label: "Edit",
onClick: () => console.log("Context action: Edit"),
},
{
key: "key5",
label: "Change password",
onClick: () => console.log("Context action: Change password"),
},
{
key: "key6",
label: "Change e-mail",
onClick: () => console.log("Context action: Change e-mail"),
},
{
key: "key7",
label: "Disable",
onClick: () => console.log("Context action: Disable"),
},
],
},
{
id: "2",
userName: "Nellie Harder",
avatar: "",
role: "user",
status: "normal",
isHead: true,
department: "Development",
mobilePhone: "+1 716 3748605",
email: "herta.reynol@yahoo.com",
contextOptions: [],
},
{
id: "3",
userName: "Alan Mason",
avatar: "",
role: "admin",
status: "normal",
isHead: true,
department: "",
mobilePhone: "+3 956 2064314",
email: "davin_lindgr@hotmail.com",
contextOptions: [
{
key: "key1",
label: "Send e-mail",
onClick: () => console.log("Context action: Send e-mail"),
},
{
key: "key2",
label: "Send message",
onClick: () => console.log("Context action: Send message"),
},
{ key: "key3", isSeparator: true },
{
key: "key4",
label: "Edit",
onClick: () => console.log("Context action: Edit"),
},
{
key: "key5",
label: "Change password",
onClick: () => console.log("Context action: Change password"),
},
{
key: "key6",
label: "Change e-mail",
onClick: () => console.log("Context action: Change e-mail"),
},
{
key: "key7",
label: "Disable",
onClick: () => console.log("Context action: Disable"),
},
],
},
{
id: "4",
userName: "Michael Goldstein",
avatar: "",
role: "guest",
status: "normal",
isHead: false,
department: "Visitors",
mobilePhone: "+7 715 6018678",
email: "fidel_kerlu@hotmail.com",
contextOptions: [
{
key: "key1",
label: "Send e-mail",
onClick: () => console.log("Context action: Send e-mail"),
},
{
key: "key2",
label: "Send message",
onClick: () => console.log("Context action: Send message"),
},
{ key: "key3", isSeparator: true },
{
key: "key4",
label: "Edit",
onClick: () => console.log("Context action: Edit"),
},
{
key: "key5",
label: "Change password",
onClick: () => console.log("Context action: Change password"),
},
{
key: "key6",
label: "Change e-mail",
onClick: () => console.log("Context action: Change e-mail"),
},
{
key: "key7",
label: "Disable",
onClick: () => console.log("Context action: Disable"),
},
],
},
{
id: "5",
userName: "Robert Gardner Robert Gardner",
avatar: "",
role: "user",
status: "pending",
isHead: false,
department: "",
mobilePhone: "",
email: "robert_gardner@hotmail.com",
contextOptions: [
{
key: "key1",
label: "Edit",
onClick: () => console.log("Context action: Edit"),
},
{
key: "key2",
label: "Invite again",
onClick: () => console.log("Context action: Invite again"),
},
{
key: "key3",
label: "Delete profile",
onClick: () => console.log("Context action: Delete profile"),
},
],
},
{
id: "6",
userName1: "Timothy Morphis",
avatar: "",
role: "user",
status: "disabled",
isHead: false,
department: "Disabled",
mobilePhone: "",
email: "timothy_j_morphis@hotmail.com",
contextOptions: [
{
key: "key1",
label: "Edit",
onClick: () => console.log("Context action: Edit"),
},
{
key: "key2",
label: "Reassign data",
onClick: () => console.log("Context action: Reassign data"),
},
{
key: "key3",
label: "Delete personal data",
onClick: () => console.log("Context action: Delete personal data"),
},
{
key: "key4",
label: "Delete profile",
onClick: () => console.log("Context action: Delete profile"),
},
],
},
];
const Template = (args) => {
return (
<>
{fakeUsers.map((user) => {
const element = (
);
const nameColor = user.status === "pending" ? "#A3A9AE" : "#333333";
const sideInfoColor = user.status === "pending" ? "#D0D5DA" : "#A3A9AE";
return (
{user.userName}
<>
{user.status === "pending" && (
)}
{user.status === "disabled" && (
)}
>
{user.isHead ? (
Head of department
) : (
)}
{user.department}
{user.mobilePhone}
{user.email}
);
})}
>
);
};
export const people = Template.bind({});