Web: Files: fixed ThirdPartyComboBox
This commit is contained in:
parent
c8a3adb5db
commit
3d7e841cf0
@ -24,103 +24,39 @@
|
||||
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
|
||||
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||
|
||||
import ExpanderDownReactSvgUrl from "PUBLIC_DIR/images/expander-down.react.svg?url";
|
||||
import React, { useEffect, useState, useRef } from "react";
|
||||
import styled from "styled-components";
|
||||
import { ReactSVG } from "react-svg";
|
||||
|
||||
import { StyledDropDown, StyledDropDownWrapper } from "../StyledDropdown";
|
||||
import { isMobile as isMobileUtil, DomHelpers } from "@docspace/shared/utils";
|
||||
import { isMobileOnly, isMobile } from "react-device-detect";
|
||||
|
||||
import { isMobile, DomHelpers } from "@docspace/shared/utils";
|
||||
|
||||
import { Text } from "@docspace/shared/components/text";
|
||||
import { Button } from "@docspace/shared/components/button";
|
||||
import { DropDownItem } from "@docspace/shared/components/drop-down-item";
|
||||
import { connectedCloudsTypeTitleTranslation as ProviderKeyTranslation } from "@docspace/client/src/helpers/filesUtils";
|
||||
import { Base } from "@docspace/shared/themes";
|
||||
import { toastr } from "@docspace/shared/components/toast";
|
||||
import { ComboBox } from "@docspace/shared/components/combobox";
|
||||
|
||||
const StyledStorageLocation = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.thirdparty-combobox {
|
||||
padding: 0px;
|
||||
|
||||
.dropdown-container {
|
||||
border: ${(props) =>
|
||||
`1px solid ${props.theme.createEditRoomDialog.thirdpartyStorage.combobox.dropdownBorderColor}`};
|
||||
}
|
||||
|
||||
.combo-button {
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.set_room_params-thirdparty {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
&-combobox {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 5px 7px;
|
||||
background: ${(props) =>
|
||||
props.theme.createEditRoomDialog.thirdpartyStorage.combobox.background};
|
||||
border-radius: 3px;
|
||||
max-height: 32px;
|
||||
|
||||
border: ${(props) =>
|
||||
`1px solid ${
|
||||
props.isOpen
|
||||
? props.theme.createEditRoomDialog.thirdpartyStorage.combobox
|
||||
.isOpenDropdownBorderColor
|
||||
: props.theme.createEditRoomDialog.thirdpartyStorage.combobox
|
||||
.dropdownBorderColor
|
||||
}`};
|
||||
|
||||
transition: all 0.2s ease;
|
||||
&:hover {
|
||||
border: ${(props) =>
|
||||
`1px solid ${
|
||||
props.isOpen
|
||||
? props.theme.createEditRoomDialog.thirdpartyStorage.combobox
|
||||
.isOpenDropdownBorderColor
|
||||
: props.theme.createEditRoomDialog.thirdpartyStorage.combobox
|
||||
.hoverDropdownBorderColor
|
||||
}`};
|
||||
}
|
||||
|
||||
&-text {
|
||||
font-weight: 400;
|
||||
font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
&-expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 6.35px;
|
||||
margin-top: -4px;
|
||||
svg {
|
||||
transform: ${(props) =>
|
||||
props.isOpen ? "rotate(180deg)" : "rotate(0)"};
|
||||
width: 6.35px;
|
||||
height: auto;
|
||||
path {
|
||||
fill: ${(props) =>
|
||||
props.theme.createEditRoomDialog.thirdpartyStorage.combobox
|
||||
.arrowFill};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-checkbox {
|
||||
margin-top: 8px;
|
||||
.checkbox {
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `margin-left: 8px;`
|
||||
: `margin-right: 8px;`}
|
||||
}
|
||||
.checkbox-text {
|
||||
font-weight: 400;
|
||||
font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
@ -144,13 +80,10 @@ const ThirdPartyComboBox = ({
|
||||
setConnectItem,
|
||||
getOAuthToken,
|
||||
|
||||
setIsScrollLocked,
|
||||
setIsOauthWindowOpen,
|
||||
|
||||
isDisabled,
|
||||
}) => {
|
||||
const dropdownRef = useRef(null);
|
||||
|
||||
const thirdparties = connectItems.map((item) => ({
|
||||
...item,
|
||||
title: item.category
|
||||
@ -158,34 +91,8 @@ const ThirdPartyComboBox = ({
|
||||
: ProviderKeyTranslation(item.providerKey, t),
|
||||
}));
|
||||
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [dropdownDirection, setDropdownDirection] = useState("bottom");
|
||||
|
||||
const toggleIsOpen = () => {
|
||||
if (isDisabled) return;
|
||||
if (isOpen) setIsScrollLocked(false);
|
||||
else {
|
||||
setIsScrollLocked(true);
|
||||
calculateDropdownDirection();
|
||||
}
|
||||
setIsOpen(!isOpen);
|
||||
};
|
||||
|
||||
const setStorageLocaiton = (thirparty) => {
|
||||
onChangeProvider(thirparty);
|
||||
setIsOpen(false);
|
||||
setIsScrollLocked(false);
|
||||
};
|
||||
|
||||
const calculateDropdownDirection = () => {
|
||||
const { top: offsetTop } = DomHelpers.getOffset(dropdownRef.current);
|
||||
const offsetBottom = window.innerHeight - offsetTop;
|
||||
|
||||
const neededHeightDesktop = Math.min(thirdparties.length * 32 + 16, 404);
|
||||
const neededHeightMobile = Math.min(thirdparties.length * 32 + 16, 180);
|
||||
const neededheight = isMobile() ? neededHeightMobile : neededHeightDesktop;
|
||||
|
||||
setDropdownDirection(neededheight > offsetBottom ? "top" : "bottom");
|
||||
};
|
||||
|
||||
const onShowService = async () => {
|
||||
@ -245,24 +152,51 @@ const ThirdPartyComboBox = ({
|
||||
setSaveThirdpartyResponse(null);
|
||||
}, [saveThirdpartyResponse]);
|
||||
|
||||
return (
|
||||
<StyledStorageLocation isOpen={isOpen}>
|
||||
<div className="set_room_params-thirdparty">
|
||||
<div
|
||||
id="shared_third-party-storage_combobox"
|
||||
className="set_room_params-thirdparty-combobox"
|
||||
onClick={toggleIsOpen}
|
||||
>
|
||||
<Text className="set_room_params-thirdparty-combobox-text" noSelect>
|
||||
{storageLocation?.provider?.title ||
|
||||
t("ThirdPartyStorageComboBoxPlaceholder")}
|
||||
</Text>
|
||||
<ReactSVG
|
||||
className="set_room_params-thirdparty-combobox-expander"
|
||||
src={ExpanderDownReactSvgUrl}
|
||||
/>
|
||||
</div>
|
||||
const options = thirdparties.map((item) => ({
|
||||
label: item.title,
|
||||
key: item?.category ?? item.id,
|
||||
}));
|
||||
|
||||
const onSelect = (elem) => {
|
||||
console.log("123a", elem);
|
||||
console.log("thirdparties", thirdparties);
|
||||
|
||||
const thirdparty = thirdparties.find(
|
||||
(t) => elem.key === t.id || elem.key === t.category,
|
||||
);
|
||||
console.log("thirdparty", thirdparty);
|
||||
|
||||
thirdparty && setStorageLocaiton(thirdparty);
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledStorageLocation>
|
||||
<div className="set_room_params-thirdparty">
|
||||
<ComboBox
|
||||
className="thirdparty-combobox"
|
||||
selectedOption={{
|
||||
key: "length",
|
||||
label:
|
||||
storageLocation?.provider?.title ||
|
||||
t("ThirdPartyStorageComboBoxPlaceholder"),
|
||||
}}
|
||||
options={options}
|
||||
scaled
|
||||
withBackdrop={isMobile}
|
||||
size="content"
|
||||
title={t("Common:Role")}
|
||||
manualWidth={"fit-content"}
|
||||
isMobileView={isMobileOnly}
|
||||
directionY="both"
|
||||
displaySelectedOption
|
||||
noBorder={false}
|
||||
fixedDirection
|
||||
isDefaultMode={false}
|
||||
hideMobileView={false}
|
||||
forceCloseClickOutside
|
||||
scaledOptions
|
||||
onSelect={onSelect}
|
||||
/>
|
||||
<Button
|
||||
id="shared_third-party-storage_connect"
|
||||
isDisabled={
|
||||
@ -276,34 +210,6 @@ const ThirdPartyComboBox = ({
|
||||
onClick={onShowService}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<StyledDropDownWrapper
|
||||
className="dropdown-content-wrapper"
|
||||
ref={dropdownRef}
|
||||
>
|
||||
<StyledDropDown
|
||||
className="dropdown-content"
|
||||
open={isOpen}
|
||||
forwardedRef={dropdownRef}
|
||||
clickOutsideAction={toggleIsOpen}
|
||||
maxHeight={isMobile() ? 158 : 382}
|
||||
directionY={dropdownDirection}
|
||||
marginTop={dropdownDirection === "bottom" ? "4px" : "-36px"}
|
||||
hasItems={isOpen}
|
||||
>
|
||||
{thirdparties.map((thirdparty) => (
|
||||
<DropDownItem
|
||||
id={thirdparty.id}
|
||||
className={`dropdown-item ${thirdparty.className ?? ""}`}
|
||||
label={thirdparty.title}
|
||||
key={thirdparty.id}
|
||||
height={32}
|
||||
heightTablet={32}
|
||||
onClick={() => setStorageLocaiton(thirdparty)}
|
||||
/>
|
||||
))}
|
||||
</StyledDropDown>
|
||||
</StyledDropDownWrapper>
|
||||
</StyledStorageLocation>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user