Web:Client:Pages: integrate RoomSelector for review

This commit is contained in:
TimofeyBoyko 2022-09-07 11:47:57 +03:00
parent 67cdfd1a9e
commit 2f821e92d4
2 changed files with 75 additions and 53 deletions

View File

@ -8,6 +8,7 @@ import { RoomsType } from "@docspace/common/constants";
import Loaders from "@docspace/common/components/Loaders";
import Selector from "@docspace/components/selector";
import { Backdrop } from "@docspace/components";
const pageCount = 100;
@ -153,61 +154,78 @@ const RoomSelector = ({
}, [searchValue]);
return (
<Selector
id={id}
className={className}
style={style}
headerLabel={headerLabel || t("RoomList")}
onBackClick={onBackClick}
searchPlaceholder={searchPlaceholder || t("Common:Search")}
searchValue={searchValue}
onSearch={onSearchAction}
onClearSearch={onClearSearchAction}
onSelect={onSelect}
items={items}
acceptButtonLabel={acceptButtonLabel || t("Common:SelectAction")}
onAccept={onAccept}
withCancelButton={withCancelButton}
cancelButtonLabel={cancelButtonLabel || t("Common:CancelButton")}
onCancel={onCancel}
isMultiSelect={isMultiSelect}
selectedItems={selectedItems}
withSelectAll={withSelectAll}
selectAllLabel={selectAllLabel}
selectAllIcon={selectAllIcon}
onSelectAll={onSelectAll}
withAccessRights={withAccessRights}
accessRights={accessRights}
selectedAccessRight={selectedAccessRight}
onAccessRightsChange={onAccessRightsChange}
emptyScreenImage={emptyScreenImage || "images/empty_screen_corporate.png"}
emptyScreenHeader={emptyScreenHeader || t("EmptyRoomsHeader")}
emptyScreenDescription={
emptyScreenDescription || t("EmptyRoomsDescription")
}
searchEmptyScreenImage={
searchEmptyScreenImage || "images/empty_screen_corporate.png"
}
searchEmptyScreenHeader={
searchEmptyScreenHeader || t("SearchEmptyRoomsHeader")
}
searchEmptyScreenDescription={
searchEmptyScreenDescription || t("SearchEmptyRoomsDescription")
}
totalItems={total}
hasNextPage={hasNextPage}
isNextPageLoading={isNextPageLoading}
loadNextPage={onLoadNextPage}
isLoading={isFirstLoad}
searchLoader={<Loaders.SelectorSearchLoader />}
rowLoader={
<Loaders.SelectorRowLoader
<>
<Backdrop visible={true} withBackground={true} zIndex={500} />
<div
style={{
width: "480px",
height: "100%",
position: "fixed",
right: "0",
top: "0",
background: "white",
zIndex: 500,
}}
>
<Selector
id={id}
className={className}
style={style}
headerLabel={headerLabel || t("RoomList")}
onBackClick={onBackClick}
searchPlaceholder={searchPlaceholder || t("Common:Search")}
searchValue={searchValue}
onSearch={onSearchAction}
onClearSearch={onClearSearchAction}
onSelect={onSelect}
items={items}
acceptButtonLabel={acceptButtonLabel || t("Common:SelectAction")}
onAccept={onAccept}
withCancelButton={withCancelButton}
cancelButtonLabel={cancelButtonLabel || t("Common:CancelButton")}
onCancel={onCancel}
isMultiSelect={isMultiSelect}
isContainer={isFirstLoad}
isUser={false}
selectedItems={selectedItems}
withSelectAll={withSelectAll}
selectAllLabel={selectAllLabel}
selectAllIcon={selectAllIcon}
onSelectAll={onSelectAll}
withAccessRights={withAccessRights}
accessRights={accessRights}
selectedAccessRight={selectedAccessRight}
onAccessRightsChange={onAccessRightsChange}
emptyScreenImage={
emptyScreenImage || "images/empty_screen_corporate.png"
}
emptyScreenHeader={emptyScreenHeader || t("EmptyRoomsHeader")}
emptyScreenDescription={
emptyScreenDescription || t("EmptyRoomsDescription")
}
searchEmptyScreenImage={
searchEmptyScreenImage || "images/empty_screen_corporate.png"
}
searchEmptyScreenHeader={
searchEmptyScreenHeader || t("SearchEmptyRoomsHeader")
}
searchEmptyScreenDescription={
searchEmptyScreenDescription || t("SearchEmptyRoomsDescription")
}
totalItems={total}
hasNextPage={hasNextPage}
isNextPageLoading={isNextPageLoading}
loadNextPage={onLoadNextPage}
isLoading={isFirstLoad}
searchLoader={<Loaders.SelectorSearchLoader />}
rowLoader={
<Loaders.SelectorRowLoader
isMultiSelect={isMultiSelect}
isContainer={isFirstLoad}
isUser={false}
/>
}
/>
}
/>
</div>
</>
);
};

View File

@ -11,6 +11,8 @@ import withPeopleLoader from "SRC_DIR/HOCs/withPeopleLoader";
import PeopleRowContainer from "./RowView/PeopleRowContainer";
import TableView from "./TableView/TableContainer";
import RoomSelector from "SRC_DIR/components/RoomSelector";
class SectionBodyContent extends React.Component {
componentDidMount() {
window.addEventListener("mousedown", this.onMouseDown);
@ -46,6 +48,7 @@ class SectionBodyContent extends React.Component {
viewAs === "table" ? (
<>
<TableView sectionWidth={context.sectionWidth} tReady={tReady} />
<RoomSelector />
</>
) : (
<>
@ -53,6 +56,7 @@ class SectionBodyContent extends React.Component {
sectionWidth={context.sectionWidth}
tReady={tReady}
/>
<RoomSelector />
</>
)
}