You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Lidarr/frontend/src/Settings/SettingsToolbarConnector.js

148 lines
3.1 KiB

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import { toggleAdvancedSettings } from 'Store/Actions/settingsActions';
import SettingsToolbar from './SettingsToolbar';
function mapStateToProps(state) {
return {
advancedSettings: state.settings.advancedSettings
};
}
const mapDispatchToProps = {
toggleAdvancedSettings
};
class SettingsToolbarConnector extends Component {
//
// Lifecycle
constructor(props, context) {
super(props, context);
this.state = {
nextLocation: null,
nextLocationAction: null,
confirmed: false
};
this._unblock = null;
}
componentDidMount() {
this._unblock = this.props.history.block(this.routerWillLeave);
}
componentWillUnmount() {
if (this._unblock) {
this._unblock();
}
}
//
// Control
routerWillLeave = (nextLocation, nextLocationAction) => {
if (this.state.confirmed) {
this.setState({
nextLocation: null,
nextLocationAction: null,
confirmed: false
});
return true;
}
if (this.props.hasPendingChanges ) {
this.setState({
nextLocation,
nextLocationAction
});
return false;
}
return true;
};
//
// Listeners
onAdvancedSettingsPress = () => {
this.props.toggleAdvancedSettings();
};
onConfirmNavigation = () => {
const {
nextLocation,
nextLocationAction
} = this.state;
const history = this.props.history;
const path = `${nextLocation.pathname}${nextLocation.search}`;
this.setState({
confirmed: true
}, () => {
if (nextLocationAction === 'PUSH') {
history.push(path);
} else {
// Unfortunately back and forward both use POP,
// which means we don't actually know which direction
// the user wanted to go, assuming back.
history.goBack();
}
});
};
onCancelNavigation = () => {
this.setState({
nextLocation: null,
nextLocationAction: null,
confirmed: false
});
};
//
// Render
render() {
const hasPendingLocation = this.state.nextLocation !== null;
return (
<SettingsToolbar
hasPendingLocation={hasPendingLocation}
onSavePress={this.props.onSavePress}
onAdvancedSettingsPress={this.onAdvancedSettingsPress}
onConfirmNavigation={this.onConfirmNavigation}
onCancelNavigation={this.onCancelNavigation}
{...this.props}
/>
);
}
}
const historyShape = {
block: PropTypes.func.isRequired,
goBack: PropTypes.func.isRequired,
push: PropTypes.func.isRequired
};
SettingsToolbarConnector.propTypes = {
hasPendingChanges: PropTypes.bool.isRequired,
history: PropTypes.shape(historyShape).isRequired,
onSavePress: PropTypes.func,
toggleAdvancedSettings: PropTypes.func.isRequired
};
SettingsToolbarConnector.defaultProps = {
hasPendingChanges: false
};
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(SettingsToolbarConnector));