Merge branch 'clearnet' into pin-conversations
Warrick Corfe-Tan
4 years ago
commit
4decda9cff
@ -1,84 +1,63 @@
|
||||
import React from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { updateConfirmModal } from '../../state/ducks/modalDialog';
|
||||
import { useDispatch } from 'react-redux';
|
||||
|
||||
interface Props {
|
||||
type Props = {
|
||||
active: boolean;
|
||||
onClick: any;
|
||||
onClick: () => void;
|
||||
confirmationDialogParams?: any | undefined;
|
||||
};
|
||||
|
||||
updateConfirmModal?: any;
|
||||
}
|
||||
export const SessionToggle = (props: Props) => {
|
||||
const [active, setActive] = useState(false);
|
||||
|
||||
interface State {
|
||||
active: boolean;
|
||||
}
|
||||
|
||||
export class SessionToggle extends React.PureComponent<Props, State> {
|
||||
public static defaultProps = {
|
||||
onClick: () => null,
|
||||
};
|
||||
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
this.clickHandler = this.clickHandler.bind(this);
|
||||
|
||||
const { active } = this.props;
|
||||
const dispatch = useDispatch();
|
||||
|
||||
this.state = {
|
||||
active: active,
|
||||
};
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<div
|
||||
className={classNames('session-toggle', this.state.active ? 'active' : '')}
|
||||
role="button"
|
||||
onClick={this.clickHandler}
|
||||
>
|
||||
<div className="knob" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
useEffect(() => {
|
||||
setActive(props.active);
|
||||
}, []);
|
||||
|
||||
private clickHandler(event: any) {
|
||||
const clickHandler = (event: any) => {
|
||||
const stateManager = (e: any) => {
|
||||
this.setState({
|
||||
active: !this.state.active,
|
||||
});
|
||||
|
||||
if (this.props.onClick) {
|
||||
e.stopPropagation();
|
||||
this.props.onClick();
|
||||
}
|
||||
setActive(!active);
|
||||
e.stopPropagation();
|
||||
props.onClick();
|
||||
};
|
||||
|
||||
if (
|
||||
this.props.confirmationDialogParams &&
|
||||
this.props.updateConfirmModal &&
|
||||
this.props.confirmationDialogParams.shouldShowConfirm()
|
||||
) {
|
||||
if (props.confirmationDialogParams && props.confirmationDialogParams.shouldShowConfirm()) {
|
||||
// If item needs a confirmation dialog to turn ON, render it
|
||||
const closeConfirmModal = () => {
|
||||
this.props.updateConfirmModal(null);
|
||||
dispatch(updateConfirmModal(null));
|
||||
};
|
||||
|
||||
this.props.updateConfirmModal({
|
||||
onClickOk: () => {
|
||||
stateManager(event);
|
||||
closeConfirmModal();
|
||||
},
|
||||
onClickClose: () => {
|
||||
this.props.updateConfirmModal(null);
|
||||
},
|
||||
...this.props.confirmationDialogParams,
|
||||
updateConfirmModal,
|
||||
});
|
||||
dispatch(
|
||||
updateConfirmModal({
|
||||
onClickOk: () => {
|
||||
stateManager(event);
|
||||
closeConfirmModal();
|
||||
},
|
||||
onClickClose: () => {
|
||||
updateConfirmModal(null);
|
||||
},
|
||||
...props.confirmationDialogParams,
|
||||
updateConfirmModal,
|
||||
})
|
||||
);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
stateManager(event);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames('session-toggle', active ? 'active' : '')}
|
||||
role="button"
|
||||
onClick={clickHandler}
|
||||
>
|
||||
<div className="knob" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,36 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
// tslint:disable-next-line: no-submodule-imports
|
||||
import useNetworkState from 'react-use/lib/useNetworkState';
|
||||
import styled from 'styled-components';
|
||||
|
||||
type ContainerProps = {
|
||||
show: boolean;
|
||||
};
|
||||
|
||||
const OfflineContainer = styled.div<ContainerProps>`
|
||||
background: ${props => props.theme.colors.accent};
|
||||
color: ${props => props.theme.colors.textColor};
|
||||
padding: ${props => (props.show ? props.theme.common.margins.sm : '0px')};
|
||||
margin: ${props => (props.show ? props.theme.common.margins.xs : '0px')};
|
||||
height: ${props => (props.show ? 'auto' : '0px')};
|
||||
overflow: hidden;
|
||||
transition: ${props => props.theme.common.animations.defaultDuration};
|
||||
`;
|
||||
|
||||
const OfflineTitle = styled.h3`
|
||||
padding-top: 0px;
|
||||
margin-top: 0px;
|
||||
`;
|
||||
|
||||
const OfflineMessage = styled.div``;
|
||||
|
||||
export const SessionOffline = () => {
|
||||
const isOnline = useNetworkState().online;
|
||||
return (
|
||||
<OfflineContainer show={!isOnline}>
|
||||
<OfflineTitle>{window.i18n('offline')}</OfflineTitle>
|
||||
<OfflineMessage>{window.i18n('checkNetworkConnection')}</OfflineMessage>
|
||||
</OfflineContainer>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue