53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { forceOfflineConfig as dForceOfflineConfig, TForceOfflineConfig } from 'actions/config';
|
|
import OfflineSymbol from 'components/ui/OfflineSymbol';
|
|
import { connect } from 'react-redux';
|
|
import { AppState } from 'reducers';
|
|
|
|
type sizeType = 'small' | 'medium' | 'large';
|
|
|
|
interface OfflineToggleProps {
|
|
offline: boolean;
|
|
forceOffline: boolean;
|
|
forceOfflineConfig: TForceOfflineConfig;
|
|
size?: sizeType;
|
|
}
|
|
|
|
class OfflineToggle extends React.Component<OfflineToggleProps, {}> {
|
|
public render() {
|
|
const { forceOfflineConfig, offline, forceOffline, size } = this.props;
|
|
|
|
return (
|
|
<div>
|
|
{!offline ? (
|
|
<div className="row text-center">
|
|
<div className="col-xs-3">
|
|
<OfflineSymbol offline={offline || forceOffline} size={size} />
|
|
</div>
|
|
<div className="col-xs-6">
|
|
<button className="btn-xs btn-info" onClick={forceOfflineConfig}>
|
|
{forceOffline ? 'Go Online' : 'Go Offline'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="text-center">
|
|
<h5>You are currently offline.</h5>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
function mapStateToProps(state: AppState) {
|
|
return {
|
|
offline: state.config.offline,
|
|
forceOffline: state.config.forceOffline
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps, {
|
|
forceOfflineConfig: dForceOfflineConfig
|
|
})(OfflineToggle);
|