Web:Client Added live chat toggle
This commit is contained in:
parent
a7f36603e5
commit
54ce892d69
@ -26,6 +26,8 @@ const PAYMENTS_URL = combineUrl(
|
||||
|
||||
//const VIDEO_GUIDES_URL = "https://onlyoffice.com/";
|
||||
|
||||
const LiveChatLocalStorageKey = "liveChatState";
|
||||
|
||||
class ProfileActionsStore {
|
||||
authStore = null;
|
||||
filesStore = null;
|
||||
@ -34,6 +36,7 @@ class ProfileActionsStore {
|
||||
selectedFolderStore = null;
|
||||
isAboutDialogVisible = false;
|
||||
isDebugDialogVisible = false;
|
||||
isShowLiveChat = false;
|
||||
|
||||
constructor(
|
||||
authStore,
|
||||
@ -48,9 +51,27 @@ class ProfileActionsStore {
|
||||
this.treeFoldersStore = treeFoldersStore;
|
||||
this.selectedFolderStore = selectedFolderStore;
|
||||
|
||||
this.isShowLiveChat = this.getStateLiveChat();
|
||||
|
||||
makeAutoObservable(this);
|
||||
}
|
||||
|
||||
getStateLiveChat = () => {
|
||||
const state = localStorage.getItem(LiveChatLocalStorageKey);
|
||||
|
||||
if (!state) return false;
|
||||
|
||||
return JSON.parse(state);
|
||||
};
|
||||
|
||||
setStateLiveChat = (state) => {
|
||||
if (typeof state !== "boolean") return;
|
||||
|
||||
localStorage.setItem(LiveChatLocalStorageKey, state.toString());
|
||||
|
||||
this.isShowLiveChat = state;
|
||||
};
|
||||
|
||||
setIsAboutDialogVisible = (visible) => {
|
||||
this.isAboutDialogVisible = visible;
|
||||
};
|
||||
@ -96,6 +117,8 @@ class ProfileActionsStore {
|
||||
};
|
||||
|
||||
onLiveChatClick = () => {
|
||||
this.setStateLiveChat(!this.isShowLiveChat);
|
||||
|
||||
//window.open(supportUrl, "_blank");
|
||||
};
|
||||
|
||||
@ -195,6 +218,8 @@ class ProfileActionsStore {
|
||||
icon: LiveChatReactSvgUrl,
|
||||
label: t("Common:LiveChat"),
|
||||
onClick: this.onLiveChatClick,
|
||||
checked: this.isShowLiveChat,
|
||||
withToggle: true,
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -4,8 +4,12 @@ import { ReactSVG } from "react-svg";
|
||||
|
||||
import RightArrowReactSvgUrl from "PUBLIC_DIR/images/right.arrow.react.svg?url";
|
||||
|
||||
import { StyledDropdownItem, IconWrapper } from "./styled-drop-down-item";
|
||||
import { isNull } from "lodash";
|
||||
import {
|
||||
StyledDropdownItem,
|
||||
IconWrapper,
|
||||
WrapperToggle,
|
||||
} from "./styled-drop-down-item";
|
||||
import ToggleButton from "../toggle-button";
|
||||
|
||||
const DropDownItem = (props) => {
|
||||
//console.log("DropDownItem render");
|
||||
@ -15,7 +19,6 @@ const DropDownItem = (props) => {
|
||||
icon,
|
||||
children,
|
||||
disabled,
|
||||
onClick,
|
||||
className,
|
||||
theme,
|
||||
fillIcon,
|
||||
@ -28,19 +31,31 @@ const DropDownItem = (props) => {
|
||||
isActiveDescendant,
|
||||
} = props;
|
||||
|
||||
const { withToggle, checked, onClick, ...rest } = props;
|
||||
|
||||
const onClickAction = (e) => {
|
||||
onClick && !disabled && onClick(e);
|
||||
};
|
||||
|
||||
const stopPropagation = (event) => {
|
||||
event.stopPropagation();
|
||||
};
|
||||
|
||||
const onChange = (event) => {
|
||||
stopPropagation(event);
|
||||
if (!disabled) onClick?.();
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledDropdownItem
|
||||
{...props}
|
||||
{...rest}
|
||||
noHover={noHover}
|
||||
className={className}
|
||||
onClick={onClickAction}
|
||||
disabled={disabled}
|
||||
isActive={isActive}
|
||||
isSelected={isSelected}
|
||||
withToggle={withToggle}
|
||||
isActiveDescendant={isActiveDescendant}
|
||||
>
|
||||
{icon && (
|
||||
@ -68,6 +83,12 @@ const DropDownItem = (props) => {
|
||||
/>
|
||||
</IconWrapper>
|
||||
)}
|
||||
|
||||
{withToggle && (
|
||||
<WrapperToggle onClick={stopPropagation}>
|
||||
<ToggleButton isChecked={checked} onChange={onChange} />
|
||||
</WrapperToggle>
|
||||
)}
|
||||
</StyledDropdownItem>
|
||||
);
|
||||
};
|
||||
|
@ -24,6 +24,17 @@ const disabledAndHeaderStyle = css`
|
||||
}
|
||||
`;
|
||||
|
||||
const WrapperToggle = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
width: 36px;
|
||||
|
||||
& label {
|
||||
position: static;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledDropdownItem = styled.div`
|
||||
display: ${(props) => (props.textOverflow ? "block" : "flex")};
|
||||
width: ${(props) => props.theme.dropDownItem.width};
|
||||
@ -184,4 +195,4 @@ const IconWrapper = styled.div`
|
||||
`;
|
||||
IconWrapper.defaultProps = { theme: Base };
|
||||
|
||||
export { StyledDropdownItem, IconWrapper };
|
||||
export { StyledDropdownItem, IconWrapper, WrapperToggle };
|
||||
|
Loading…
Reference in New Issue
Block a user