upd access-right-select
This commit is contained in:
Yaroslavna Gaivoronyuk
parent
1057cfa6a0
commit
6a7515eec6
@ -36,7 +36,8 @@ import AccessRightSelect from "@appserver/components/access-right-secelt";
|
||||
{
|
||||
key: "key1",
|
||||
title: "Room administrator",
|
||||
description: "Администрирование комнат, архивирование комнат, приглашение и управление пользователями в комнатах.",
|
||||
description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua.`,
|
||||
icon: CrownIcon,
|
||||
}
|
||||
```
|
||||
|
||||
@ -12,15 +12,20 @@ export const data = [
|
||||
{
|
||||
key: "key1",
|
||||
title: "Room administrator",
|
||||
description:
|
||||
"Администрирование комнат, архивирование комнат, приглашение и управление пользователями в комнатах.",
|
||||
description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.`,
|
||||
icon: CrownIcon,
|
||||
},
|
||||
{
|
||||
key: "key2",
|
||||
title: "Full access",
|
||||
description:
|
||||
"Редактирование, загрузка, создание, просмотр, скачивание, удаление файлов и папок",
|
||||
description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
|
||||
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
||||
culpa qui officia deserunt mollit anim id est laborum.`,
|
||||
icon: CheckRoundIcon,
|
||||
},
|
||||
|
||||
@ -28,28 +33,39 @@ export const data = [
|
||||
{
|
||||
key: "key4",
|
||||
title: "Editing",
|
||||
description:
|
||||
"Редактирование, просмотр, скачивание файлов и папок, заполнение форм",
|
||||
description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
`,
|
||||
icon: PencilIcon,
|
||||
},
|
||||
{
|
||||
key: "key5",
|
||||
title: "Review",
|
||||
description:
|
||||
"Рецензирование, просмотр, скачивание файлов и папок, заполнение форм",
|
||||
description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua.`,
|
||||
icon: ReviewIcon,
|
||||
},
|
||||
{
|
||||
key: "key6",
|
||||
title: "Comment",
|
||||
description:
|
||||
"Комментирование файлов, просмотр, скачивание файлов и папок, заполнение форм",
|
||||
description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
|
||||
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
||||
culpa qui officia deserunt mollit anim id est laborum.`,
|
||||
icon: CommentIcon,
|
||||
},
|
||||
{
|
||||
key: "key7",
|
||||
title: "Read only",
|
||||
description: "Просмотр, скачивание файлов и папок, заполнение форм",
|
||||
description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
|
||||
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
||||
culpa qui officia deserunt mollit anim id est laborum.`,
|
||||
icon: EyeIcon,
|
||||
},
|
||||
{
|
||||
|
||||
@ -1,39 +1,77 @@
|
||||
import React, { useState } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import LinkWithDropdown from "../link-with-dropdown/index.js";
|
||||
import AccessRightItem from "./sub-components/access-right-item.js";
|
||||
import ComboBox from "../combobox/index.js";
|
||||
import DropDownItem from "../drop-down-item/index.js";
|
||||
import Badge from "../badge/index.js";
|
||||
|
||||
import {
|
||||
StyledAccessRightWrapper,
|
||||
StyledAccessRightIcon,
|
||||
StyledAccessRightDescriptionItem,
|
||||
StyledAccessRightItem,
|
||||
StyledAccessRightItemIcon,
|
||||
StyledAccessRightItemContent,
|
||||
StyledAccessRightItemTitleAndBadge,
|
||||
} from "./styled-accessright.js";
|
||||
|
||||
const AccessRightSelect = ({ accessRightsList, quotaList, ...props }) => {
|
||||
const [currentItem, setCurrentItem] = useState(accessRightsList[6]);
|
||||
|
||||
const formatToAccessRightItem = (data) => {
|
||||
return data.map((it) => {
|
||||
const itQuota = quotaList.find((elem) => elem.accessRightKey == it.key);
|
||||
return it.isSeparator
|
||||
? { ...it }
|
||||
: {
|
||||
key: it.key,
|
||||
children: (
|
||||
<AccessRightItem
|
||||
key={it.key}
|
||||
title={it.title}
|
||||
description={it.description}
|
||||
icon={it.icon}
|
||||
quota={itQuota}
|
||||
/>
|
||||
),
|
||||
onClick: () => setCurrentItem(it),
|
||||
};
|
||||
});
|
||||
return (
|
||||
<>
|
||||
{data.map((it) => {
|
||||
const itQuota = quotaList.find(
|
||||
(elem) => elem.accessRightKey == it.key
|
||||
);
|
||||
return it.isSeparator ? (
|
||||
<DropDownItem isSeparator />
|
||||
) : (
|
||||
<DropDownItem key={it.key} onClick={() => setCurrentItem(it)}>
|
||||
<StyledAccessRightItem>
|
||||
<StyledAccessRightItemIcon src={it.icon} />
|
||||
<StyledAccessRightItemContent>
|
||||
<StyledAccessRightItemTitleAndBadge>
|
||||
{it.title}
|
||||
{itQuota && (
|
||||
<Badge
|
||||
label={itQuota.quota}
|
||||
backgroundColor={itQuota.color}
|
||||
fontSize="8px"
|
||||
/>
|
||||
)}
|
||||
</StyledAccessRightItemTitleAndBadge>
|
||||
<StyledAccessRightDescriptionItem>
|
||||
{it.description}
|
||||
</StyledAccessRightDescriptionItem>
|
||||
</StyledAccessRightItemContent>
|
||||
</StyledAccessRightItem>
|
||||
</DropDownItem>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ display: "flex" }}>
|
||||
<img src={currentItem?.icon} style={{ marginRight: "4.18px" }} />
|
||||
<LinkWithDropdown data={formatToAccessRightItem(accessRightsList)}>
|
||||
{currentItem?.title}
|
||||
</LinkWithDropdown>
|
||||
</div>
|
||||
<StyledAccessRightWrapper>
|
||||
<StyledAccessRightIcon src={currentItem?.icon} />
|
||||
<ComboBox
|
||||
advancedOptions={formatToAccessRightItem(accessRightsList)}
|
||||
directionX="left"
|
||||
directionY="bottom"
|
||||
opened
|
||||
noBorder
|
||||
options={[]}
|
||||
scaled={false}
|
||||
selectedOption={{
|
||||
default: true,
|
||||
key: 0,
|
||||
label: currentItem?.title,
|
||||
}}
|
||||
size="content"
|
||||
/>
|
||||
</StyledAccessRightWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -0,0 +1,59 @@
|
||||
import styled from "styled-components";
|
||||
import Base from "../themes/base";
|
||||
|
||||
const StyledAccessRightWrapper = styled.div`
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
const StyledAccessRightIcon = styled.img`
|
||||
margin-right: 4.18px;
|
||||
`;
|
||||
|
||||
const StyledAccessRightItem = styled.div`
|
||||
width: 424px;
|
||||
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
align-content: center;
|
||||
|
||||
padding: 7px 0px;
|
||||
|
||||
line-height: 16px;
|
||||
font-style: normal;
|
||||
`;
|
||||
|
||||
const StyledAccessRightDescriptionItem = styled.div`
|
||||
margin: 1px 0px;
|
||||
|
||||
font-size: 13px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 16px;
|
||||
color: #a3a9ae;
|
||||
`;
|
||||
|
||||
const StyledAccessRightItemIcon = styled.img`
|
||||
margin-right: 8px;
|
||||
`;
|
||||
|
||||
const StyledAccessRightItemContent = styled.div`
|
||||
width: 100%;
|
||||
white-space: normal;
|
||||
`;
|
||||
|
||||
const StyledAccessRightItemTitleAndBadge = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
StyledAccessRightItem.defaultProps = { theme: Base };
|
||||
export {
|
||||
StyledAccessRightItem,
|
||||
StyledAccessRightDescriptionItem,
|
||||
StyledAccessRightItemIcon,
|
||||
StyledAccessRightItemContent,
|
||||
StyledAccessRightItemTitleAndBadge,
|
||||
StyledAccessRightWrapper,
|
||||
StyledAccessRightIcon,
|
||||
};
|
||||
@ -1,46 +0,0 @@
|
||||
import React from "react";
|
||||
import Badge from "../../badge";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
import {
|
||||
StyledAccessRightDescriptionItem,
|
||||
StyledAccessRightItem,
|
||||
} from "./styled-accessrightitem";
|
||||
|
||||
const AccessRightItem = ({ title, description, icon, quota, ...props }) => {
|
||||
return (
|
||||
<StyledAccessRightItem>
|
||||
<img src={icon} style={{ marginRight: "8px" }} />
|
||||
<div style={{ width: "100%", whiteSpace: "normal" }}>
|
||||
<div style={{ display: "flex", alignItems: "center" }}>
|
||||
{title}
|
||||
{quota && (
|
||||
<Badge
|
||||
label={quota.quota}
|
||||
backgroundColor={quota.color}
|
||||
fontSize="8px"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<StyledAccessRightDescriptionItem>
|
||||
{description}
|
||||
</StyledAccessRightDescriptionItem>
|
||||
</div>
|
||||
</StyledAccessRightItem>
|
||||
);
|
||||
};
|
||||
|
||||
AccessRightItem.propTypes = {
|
||||
title: PropTypes.string,
|
||||
description: PropTypes.string,
|
||||
icon: PropTypes.node,
|
||||
quota: PropTypes.arrayOf(PropTypes.object),
|
||||
/** Accepts id */
|
||||
id: PropTypes.string,
|
||||
/** Accepts class */
|
||||
className: PropTypes.string,
|
||||
/** Accepts CSS style */
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
};
|
||||
|
||||
export default AccessRightItem;
|
||||
@ -1,29 +0,0 @@
|
||||
import styled from "styled-components";
|
||||
import Base from "../../themes/base";
|
||||
|
||||
const StyledAccessRightItem = styled.div`
|
||||
width: 424px;
|
||||
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
align-content: center;
|
||||
|
||||
padding: 7px 0px;
|
||||
|
||||
line-height: 16px;
|
||||
font-style: normal;
|
||||
`;
|
||||
|
||||
const StyledAccessRightDescriptionItem = styled.div`
|
||||
margin: 1px 0px;
|
||||
|
||||
font-size: 13px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 16px;
|
||||
color: #a3a9ae;
|
||||
`;
|
||||
|
||||
StyledAccessRightItem.defaultProps = { theme: Base };
|
||||
export { StyledAccessRightItem, StyledAccessRightDescriptionItem };
|
||||
@ -44,10 +44,11 @@ class LinkWithDropdown extends React.Component {
|
||||
this.setIsOpen(this.props.isOpen);
|
||||
}
|
||||
}
|
||||
// TODO: added new arg - _key
|
||||
onClickDropDownItem = (e, _key) => {
|
||||
|
||||
onClickDropDownItem = (e) => {
|
||||
const { key } = e.target.dataset;
|
||||
const item = this.props.data.find((x) => x.key === key || x.key === _key);
|
||||
console.log(e);
|
||||
const item = this.props.data.find((x) => x.key === key);
|
||||
this.setIsOpen(!this.state.isOpen);
|
||||
item && item.onClick && item.onClick(e);
|
||||
};
|
||||
@ -117,8 +118,7 @@ class LinkWithDropdown extends React.Component {
|
||||
className="drop-down-item"
|
||||
key={item.key}
|
||||
{...item}
|
||||
// TODO: added item.key
|
||||
onClick={(e) => this.onClickDropDownItem(e, item.key)}
|
||||
onClick={(e) => this.onClickDropDownItem(e)}
|
||||
data-key={item.key}
|
||||
/>
|
||||
))}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user