added group menu items
This commit is contained in:
Elyor Djalilov
parent
456f6b6ea6
commit
f542baeae3
@ -1,20 +1,85 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import styled from "styled-components";
|
||||
import SearchInput from "@docspace/components/search-input";
|
||||
import RowContainer from "@docspace/components/row-container";
|
||||
import TableGroupMenu from "@docspace/components/table-container/TableGroupMenu";
|
||||
import ChangeTypeReactSvgUrl from "PUBLIC_DIR/images/change.type.react.svg?url";
|
||||
import UsersTypeRow from "./UsersTypeRow";
|
||||
import { mockData } from "../../mockData.js";
|
||||
|
||||
const StyledRowContainer = styled(RowContainer)`
|
||||
margin: 20px 0;
|
||||
|
||||
.table-group-menu {
|
||||
height: 60px;
|
||||
position: absolute;
|
||||
z-index: 201;
|
||||
left: -20px;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
|
||||
.table-container_group-menu {
|
||||
padding: 0px 20px;
|
||||
border-image-slice: 0;
|
||||
box-shadow: rgba(0, 0, 0, 0.07) 0px 4px 4px;
|
||||
}
|
||||
|
||||
.table-container_group-menu-checkbox {
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
.table-container_group-menu-separator {
|
||||
margin: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.header-container-text {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.table-container_header {
|
||||
position: absolute;
|
||||
}
|
||||
`;
|
||||
|
||||
const data = [
|
||||
{
|
||||
key: "docspace-admin",
|
||||
label: "DocSpace admin",
|
||||
onClick: () => console.log("changed-type"),
|
||||
},
|
||||
{
|
||||
key: "room-admin",
|
||||
label: "Room admin",
|
||||
onClick: () => console.log("changed-type"),
|
||||
},
|
||||
{
|
||||
key: "power-user",
|
||||
label: "Power user",
|
||||
onClick: () => console.log("changed-type"),
|
||||
},
|
||||
];
|
||||
|
||||
const RowView = (props) => {
|
||||
const { sectionWidth, viewAs, setViewAs } = props;
|
||||
const [isChecked, setIsChecked] = useState(false);
|
||||
const [checkbox, setCheckbox] = useState([]);
|
||||
const rowRef = useRef(null);
|
||||
|
||||
const onCheck = (checked) => {
|
||||
setIsChecked(checked);
|
||||
if (checked) {
|
||||
setCheckbox(mockData.map((data) => data.id));
|
||||
} else {
|
||||
setCheckbox([]);
|
||||
}
|
||||
};
|
||||
|
||||
const onChangeAllCheckbox = (e) => {
|
||||
onCheck(e.target.checked);
|
||||
};
|
||||
|
||||
const onChangeCheckbox = (id, checked) => {
|
||||
if (checked) {
|
||||
@ -34,8 +99,34 @@ const RowView = (props) => {
|
||||
}
|
||||
}, [sectionWidth]);
|
||||
|
||||
const headerMenu = [
|
||||
{
|
||||
id: "change-type",
|
||||
key: "change-type",
|
||||
label: "Change type",
|
||||
disabled: false,
|
||||
onClick: () => console.log("open-menu"),
|
||||
withDropDown: true,
|
||||
options: data,
|
||||
iconUrl: ChangeTypeReactSvgUrl,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<StyledRowContainer useReactWindow={false}>
|
||||
<StyledRowContainer forwardedRef={rowRef} useReactWindow={false}>
|
||||
<div className="table-group-menu">
|
||||
{checkbox.length > 0 && (
|
||||
<TableGroupMenu
|
||||
onChange={onCheck}
|
||||
headerMenu={headerMenu}
|
||||
isChecked={isChecked}
|
||||
isIndeterminate={checkbox.length && !isChecked}
|
||||
withoutInfoPanelToggler
|
||||
sectionWidth={sectionWidth}
|
||||
withComboBox={false}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<SearchInput
|
||||
id="search-users-input"
|
||||
onChange={() => console.log("changed")}
|
||||
|
||||
@ -6,15 +6,40 @@ import styled from "styled-components";
|
||||
|
||||
import UsersTypeTableHeader from "./UsersTypeTableHeader";
|
||||
import UsersTypeTableRow from "./UsersTypeTableRow";
|
||||
|
||||
import TableGroupMenu from "@docspace/components/table-container/TableGroupMenu";
|
||||
import TableContainer from "@docspace/components/table-container/TableContainer";
|
||||
import TableBody from "@docspace/components/table-container/TableBody";
|
||||
import SearchInput from "@docspace/components/search-input";
|
||||
import ChangeTypeReactSvgUrl from "PUBLIC_DIR/images/change.type.react.svg?url";
|
||||
|
||||
import { mockData } from "../../mockData.js";
|
||||
|
||||
const StyledTableContainer = styled(TableContainer)`
|
||||
margin: 20px 0;
|
||||
|
||||
.table-group-menu {
|
||||
height: 69px;
|
||||
position: absolute;
|
||||
z-index: 201;
|
||||
left: 0;
|
||||
top: 214px;
|
||||
width: 100%;
|
||||
|
||||
.table-container_group-menu {
|
||||
border-image-slice: 0;
|
||||
box-shadow: rgba(0, 0, 0, 0.07) 0px 4px 4px;
|
||||
}
|
||||
|
||||
.table-container_group-menu-checkbox {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.table-container_group-menu-separator {
|
||||
margin: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.header-container-text {
|
||||
font-size: 12px;
|
||||
}
|
||||
@ -35,6 +60,24 @@ const StyledTableContainer = styled(TableContainer)`
|
||||
|
||||
StyledTableContainer.defaultProps = { theme: Base };
|
||||
|
||||
const data = [
|
||||
{
|
||||
key: "docspace-admin",
|
||||
label: "DocSpace admin",
|
||||
onClick: () => console.log("changed-type"),
|
||||
},
|
||||
{
|
||||
key: "room-admin",
|
||||
label: "Room admin",
|
||||
onClick: () => console.log("changed-type"),
|
||||
},
|
||||
{
|
||||
key: "power-user",
|
||||
label: "Power user",
|
||||
onClick: () => console.log("changed-type"),
|
||||
},
|
||||
];
|
||||
|
||||
const TABLE_VERSION = "6";
|
||||
const COLUMNS_SIZE = `googleWorkspaceColumnsSize_ver-${TABLE_VERSION}`;
|
||||
const INFO_PANEL_COLUMNS_SIZE = `infoPanelGoogleWorkspaceColumnsSize_ver-${TABLE_VERSION}`;
|
||||
@ -45,15 +88,19 @@ const TableView = (props) => {
|
||||
const [checkbox, setCheckbox] = useState([]);
|
||||
const tableRef = useRef(null);
|
||||
|
||||
const onChangeAllCheckbox = (e) => {
|
||||
setIsChecked(e.target.checked);
|
||||
if (e.target.checked) {
|
||||
const onCheck = (checked) => {
|
||||
setIsChecked(checked);
|
||||
if (checked) {
|
||||
setCheckbox(mockData.map((data) => data.id));
|
||||
} else {
|
||||
setCheckbox([]);
|
||||
}
|
||||
};
|
||||
|
||||
const onChangeAllCheckbox = (e) => {
|
||||
onCheck(e.target.checked);
|
||||
};
|
||||
|
||||
const onChangeCheckbox = (id, checked) => {
|
||||
if (checked) {
|
||||
setCheckbox([...checkbox, id]);
|
||||
@ -74,8 +121,35 @@ const TableView = (props) => {
|
||||
const columnStorageName = `${COLUMNS_SIZE}=${userId}`;
|
||||
const columnInfoPanelStorageName = `${INFO_PANEL_COLUMNS_SIZE}=${userId}`;
|
||||
|
||||
const headerMenu = [
|
||||
{
|
||||
id: "change-type",
|
||||
key: "change-type",
|
||||
label: "Change type",
|
||||
disabled: false,
|
||||
onClick: () => console.log("open-menu"),
|
||||
withDropDown: true,
|
||||
options: data,
|
||||
iconUrl: ChangeTypeReactSvgUrl,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<StyledTableContainer forwardedRef={tableRef} useReactWindow>
|
||||
<div className="table-group-menu">
|
||||
{checkbox.length > 0 && (
|
||||
<TableGroupMenu
|
||||
onChange={onCheck}
|
||||
headerMenu={headerMenu}
|
||||
isChecked={isChecked}
|
||||
isIndeterminate={checkbox.length && !isChecked}
|
||||
withoutInfoPanelToggler
|
||||
sectionWidth={sectionWidth}
|
||||
withComboBox={false}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<SearchInput
|
||||
id="search-users-input"
|
||||
onChange={() => console.log("changed")}
|
||||
|
||||
@ -27,6 +27,7 @@ const TableGroupMenu = (props) => {
|
||||
withoutInfoPanelToggler,
|
||||
isMobileView,
|
||||
isBlocked,
|
||||
withComboBox,
|
||||
...rest
|
||||
} = props;
|
||||
const onCheckboxChange = (e) => {
|
||||
@ -48,19 +49,22 @@ const TableGroupMenu = (props) => {
|
||||
isIndeterminate={isIndeterminate}
|
||||
title={t("Common:MainHeaderSelectAll")}
|
||||
/>
|
||||
<ComboBox
|
||||
id="menu-combobox"
|
||||
comboIcon={TriangleNavigationDownReactSvgUrl}
|
||||
noBorder
|
||||
advancedOptions={checkboxOptions}
|
||||
className="table-container_group-menu-combobox not-selectable"
|
||||
options={[]}
|
||||
selectedOption={{}}
|
||||
manualY="42px"
|
||||
manualX="-32px"
|
||||
title={t("Common:TitleSelectFile")}
|
||||
isMobileView={isMobileView}
|
||||
/>
|
||||
{withComboBox && (
|
||||
<ComboBox
|
||||
id="menu-combobox"
|
||||
comboIcon={TriangleNavigationDownReactSvgUrl}
|
||||
noBorder
|
||||
advancedOptions={checkboxOptions}
|
||||
className="table-container_group-menu-combobox not-selectable"
|
||||
options={[]}
|
||||
selectedOption={{}}
|
||||
manualY="42px"
|
||||
manualX="-32px"
|
||||
title={t("Common:TitleSelectFile")}
|
||||
isMobileView={isMobileView}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="table-container_group-menu-separator" />
|
||||
<StyledScrollbar>
|
||||
{headerMenu.map((item, index) => (
|
||||
|
||||
3
public/images/change.type.react.svg
Normal file
3
public/images/change.type.react.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.70711 4.70711L11 3.41423L10.9999 8.99994L12.9999 8.99995L13 3.4142L14.2929 4.70711L15.7071 3.29289L12.7071 0.292893C12.3166 -0.0976311 11.6834 -0.097631 11.2929 0.292893L8.29289 3.29289L9.70711 4.70711ZM5 5.5C4.44772 5.5 4 5.94772 4 6.5C4 6.9348 4.10395 7.5205 4.32809 7.95941C4.54496 8.38408 4.76659 8.5 5 8.5C5.23341 8.5 5.45504 8.38408 5.67191 7.95941C5.89605 7.5205 6 6.9348 6 6.5C6 5.94772 5.55228 5.5 5 5.5ZM2 6.5C2 4.84315 3.34315 3.5 5 3.5C6.65685 3.5 8 4.84315 8 6.5C8 7.16977 7.85395 8.08407 7.45309 8.86902C7.04496 9.6682 6.26659 10.5 5 10.5C3.73341 10.5 2.95504 9.6682 2.54691 8.86902C2.14605 8.08407 2 7.16977 2 6.5ZM2.36826 13.7522C2.11634 14.3936 2 15.2591 2 16H0C0 15.1052 0.133657 13.9707 0.506736 13.021C0.860069 12.1215 1.60456 11 3 11C3.32012 11 3.56782 11.0878 3.75971 11.1837C3.8319 11.2198 3.90144 11.26 3.94436 11.2849L3.95675 11.292C4.006 11.3204 4.03849 11.3387 4.07221 11.3556C4.15907 11.399 4.3756 11.5 5 11.5C5.6244 11.5 5.84093 11.399 5.92779 11.3556C5.96151 11.3387 5.994 11.3204 6.04325 11.292L6.05563 11.2849C6.09855 11.26 6.16809 11.2198 6.24029 11.1837C6.43218 11.0878 6.67988 11 7 11C8.39544 11 9.13993 12.1215 9.49326 13.021C9.86634 13.9707 10 15.1052 10 16H8C8 15.2591 7.88366 14.3936 7.63174 13.7522C7.40843 13.1838 7.19604 13.0416 7.06943 13.009L7.04269 13.0244C6.99038 13.0546 6.91349 13.0988 6.82221 13.1444C6.40907 13.351 5.8756 13.5 5 13.5C4.1244 13.5 3.59093 13.351 3.17779 13.1444C3.08651 13.0988 3.00962 13.0546 2.95731 13.0244L2.93057 13.009C2.80396 13.0416 2.59157 13.1838 2.36826 13.7522Z" fill="#333333"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
Loading…
Reference in New Issue
Block a user