2020-10-16 13:16:01 +00:00
|
|
|
import React from "react";
|
2021-03-14 00:17:30 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
import Row from "../row";
|
|
|
|
import Avatar from "../avatar";
|
|
|
|
import Link from "../link";
|
|
|
|
import RowContent from "../row-content";
|
2021-03-14 00:17:30 +00:00
|
|
|
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" } } },
|
|
|
|
};
|
|
|
|
|
2019-08-20 13:07:30 +00:00
|
|
|
const fakeUsers = [
|
2019-07-03 11:36:42 +00:00
|
|
|
{
|
2020-10-16 13:16:01 +00:00
|
|
|
id: "1",
|
|
|
|
userName: "Helen Walton",
|
|
|
|
avatar: "",
|
|
|
|
role: "owner",
|
|
|
|
status: "normal",
|
2019-07-03 11:36:42 +00:00
|
|
|
isHead: false,
|
2020-10-16 13:16:01 +00:00
|
|
|
department: "Administration",
|
|
|
|
mobilePhone: "+5 104 6473420",
|
|
|
|
email: "percival1979@yahoo.com",
|
2019-07-03 11:36:42 +00:00
|
|
|
contextOptions: [
|
2020-10-16 13:16:01 +00:00
|
|
|
{
|
|
|
|
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"),
|
|
|
|
},
|
|
|
|
],
|
2019-07-03 11:36:42 +00:00
|
|
|
},
|
|
|
|
{
|
2020-10-16 13:16:01 +00:00
|
|
|
id: "2",
|
|
|
|
userName: "Nellie Harder",
|
|
|
|
avatar: "",
|
|
|
|
role: "user",
|
|
|
|
status: "normal",
|
2019-07-03 11:36:42 +00:00
|
|
|
isHead: true,
|
2020-10-16 13:16:01 +00:00
|
|
|
department: "Development",
|
|
|
|
mobilePhone: "+1 716 3748605",
|
|
|
|
email: "herta.reynol@yahoo.com",
|
|
|
|
contextOptions: [],
|
2019-07-03 11:36:42 +00:00
|
|
|
},
|
|
|
|
{
|
2020-10-16 13:16:01 +00:00
|
|
|
id: "3",
|
|
|
|
userName: "Alan Mason",
|
|
|
|
avatar: "",
|
|
|
|
role: "admin",
|
|
|
|
status: "normal",
|
2019-07-03 11:36:42 +00:00
|
|
|
isHead: true,
|
2020-10-16 13:16:01 +00:00
|
|
|
department: "",
|
|
|
|
mobilePhone: "+3 956 2064314",
|
|
|
|
email: "davin_lindgr@hotmail.com",
|
2019-07-03 11:36:42 +00:00
|
|
|
contextOptions: [
|
2020-10-16 13:16:01 +00:00
|
|
|
{
|
|
|
|
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"),
|
|
|
|
},
|
|
|
|
],
|
2019-07-03 11:36:42 +00:00
|
|
|
},
|
|
|
|
{
|
2020-10-16 13:16:01 +00:00
|
|
|
id: "4",
|
|
|
|
userName: "Michael Goldstein",
|
|
|
|
avatar: "",
|
|
|
|
role: "guest",
|
|
|
|
status: "normal",
|
2019-07-03 11:36:42 +00:00
|
|
|
isHead: false,
|
2020-10-16 13:16:01 +00:00
|
|
|
department: "Visitors",
|
|
|
|
mobilePhone: "+7 715 6018678",
|
|
|
|
email: "fidel_kerlu@hotmail.com",
|
2019-07-03 11:36:42 +00:00
|
|
|
contextOptions: [
|
2020-10-16 13:16:01 +00:00
|
|
|
{
|
|
|
|
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"),
|
|
|
|
},
|
|
|
|
],
|
2019-07-03 11:36:42 +00:00
|
|
|
},
|
|
|
|
{
|
2020-10-16 13:16:01 +00:00
|
|
|
id: "5",
|
|
|
|
userName: "Robert Gardner Robert Gardner",
|
|
|
|
avatar: "",
|
|
|
|
role: "user",
|
|
|
|
status: "pending",
|
2019-07-03 11:36:42 +00:00
|
|
|
isHead: false,
|
2020-10-16 13:16:01 +00:00
|
|
|
department: "",
|
|
|
|
mobilePhone: "",
|
|
|
|
email: "robert_gardner@hotmail.com",
|
2019-07-03 11:36:42 +00:00
|
|
|
contextOptions: [
|
2020-10-16 13:16:01 +00:00
|
|
|
{
|
|
|
|
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"),
|
|
|
|
},
|
|
|
|
],
|
2019-07-03 11:36:42 +00:00
|
|
|
},
|
|
|
|
{
|
2020-10-16 13:16:01 +00:00
|
|
|
id: "6",
|
|
|
|
userName1: "Timothy Morphis",
|
|
|
|
avatar: "",
|
|
|
|
role: "user",
|
|
|
|
status: "disabled",
|
2019-07-03 11:36:42 +00:00
|
|
|
isHead: false,
|
2020-10-16 13:16:01 +00:00
|
|
|
department: "Disabled",
|
|
|
|
mobilePhone: "",
|
|
|
|
email: "timothy_j_morphis@hotmail.com",
|
2019-07-03 11:36:42 +00:00
|
|
|
contextOptions: [
|
2020-10-16 13:16:01 +00:00
|
|
|
{
|
|
|
|
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"),
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
2019-07-03 11:36:42 +00:00
|
|
|
];
|
|
|
|
|
2021-03-14 00:17:30 +00:00
|
|
|
const Template = (args) => {
|
2020-10-16 13:16:01 +00:00
|
|
|
return (
|
2021-03-14 00:17:30 +00:00
|
|
|
<>
|
2020-10-16 13:16:01 +00:00
|
|
|
{fakeUsers.map((user) => {
|
|
|
|
const element = (
|
|
|
|
<Avatar
|
2020-11-05 08:35:44 +00:00
|
|
|
size="min"
|
2020-10-16 13:16:01 +00:00
|
|
|
role={user.role}
|
|
|
|
userName={user.userName}
|
|
|
|
source={user.avatar}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
const nameColor = user.status === "pending" ? "#A3A9AE" : "#333333";
|
|
|
|
const sideInfoColor = user.status === "pending" ? "#D0D5DA" : "#A3A9AE";
|
2019-08-20 13:07:30 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
return (
|
|
|
|
<Row
|
|
|
|
key={user.id}
|
|
|
|
status={user.status}
|
|
|
|
checked={false}
|
|
|
|
data={user}
|
|
|
|
element={element}
|
|
|
|
contextOptions={user.contextOptions}
|
|
|
|
>
|
|
|
|
<RowContent>
|
|
|
|
<Link
|
|
|
|
type="page"
|
|
|
|
title={user.userName}
|
|
|
|
isBold={true}
|
|
|
|
fontSize="15px"
|
|
|
|
color={nameColor}
|
|
|
|
isTextOverflow={true}
|
|
|
|
>
|
|
|
|
{user.userName}
|
|
|
|
</Link>
|
|
|
|
<>
|
|
|
|
{user.status === "pending" && (
|
2021-02-23 19:14:42 +00:00
|
|
|
<SendClockIcon size="small" isfill={true} color="#3B72A7" />
|
2020-10-16 13:16:01 +00:00
|
|
|
)}
|
|
|
|
{user.status === "disabled" && (
|
2021-02-23 19:14:42 +00:00
|
|
|
<CatalogSpamIcon size="small" isfill={true} color="#3B72A7" />
|
2020-10-16 13:16:01 +00:00
|
|
|
)}
|
|
|
|
</>
|
|
|
|
{user.isHead ? (
|
|
|
|
<Link
|
|
|
|
containerWidth="110px"
|
|
|
|
type="page"
|
|
|
|
title="Head of department"
|
|
|
|
fontSize="12px"
|
|
|
|
color={sideInfoColor}
|
|
|
|
isTextOverflow={true}
|
|
|
|
>
|
|
|
|
Head of department
|
|
|
|
</Link>
|
|
|
|
) : (
|
|
|
|
<div style={{ width: "110px" }}></div>
|
|
|
|
)}
|
|
|
|
<Link
|
|
|
|
type="action"
|
|
|
|
title={user.department}
|
|
|
|
fontSize="12px"
|
|
|
|
color={sideInfoColor}
|
|
|
|
isTextOverflow={true}
|
|
|
|
>
|
|
|
|
{user.department}
|
|
|
|
</Link>
|
|
|
|
<Link
|
|
|
|
type="page"
|
|
|
|
title={user.mobilePhone}
|
|
|
|
fontSize="12px"
|
|
|
|
color={sideInfoColor}
|
|
|
|
isTextOverflow={true}
|
|
|
|
>
|
|
|
|
{user.mobilePhone}
|
|
|
|
</Link>
|
|
|
|
<Link
|
|
|
|
containerWidth="220px"
|
|
|
|
type="page"
|
|
|
|
title={user.email}
|
|
|
|
fontSize="12px"
|
|
|
|
color={sideInfoColor}
|
|
|
|
isTextOverflow={true}
|
|
|
|
>
|
|
|
|
{user.email}
|
|
|
|
</Link>
|
|
|
|
</RowContent>
|
|
|
|
</Row>
|
|
|
|
);
|
|
|
|
})}
|
2021-03-14 00:17:30 +00:00
|
|
|
</>
|
2020-10-16 13:16:01 +00:00
|
|
|
);
|
2021-03-14 00:17:30 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export const people = Template.bind({});
|