45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import React, { FC, memo } from '../../lib/teact/teact';
|
|
|
|
import useLang from '../../hooks/useLang';
|
|
import { ConnectionStatus } from '../../hooks/useConnectionStatus';
|
|
|
|
import Transition from '../ui/Transition';
|
|
import Spinner from '../ui/Spinner';
|
|
import Button from '../ui/Button';
|
|
|
|
import './ConnectionStatusOverlay.scss';
|
|
|
|
type OwnProps = {
|
|
connectionStatus: ConnectionStatus;
|
|
connectionStatusText: string;
|
|
onClick?: NoneToVoidFunction;
|
|
};
|
|
|
|
const ConnectionStatusOverlay: FC<OwnProps> = ({
|
|
connectionStatus,
|
|
connectionStatusText,
|
|
onClick,
|
|
}) => {
|
|
const lang = useLang();
|
|
|
|
return (
|
|
<div id="ConnectionStatusOverlay" dir={lang.isRtl ? 'rtl' : undefined} onClick={onClick}>
|
|
<Spinner color="black" />
|
|
<div className="state-text">
|
|
<Transition activeKey={connectionStatus} name="slide-fade">
|
|
{connectionStatusText}
|
|
</Transition>
|
|
</div>
|
|
<Button
|
|
round
|
|
size="tiny"
|
|
color="translucent-black"
|
|
>
|
|
<span className="icon-close" />
|
|
</Button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default memo(ConnectionStatusOverlay);
|