import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { ActionCreators, LiftedAction } from '@redux-devtools/core'; import { Button, Toolbar, Divider } from '@redux-devtools/ui'; import { Action } from 'redux'; import RecordButton from './buttons/RecordButton'; import PersistButton from './buttons/PersistButton'; import LockButton from './buttons/LockButton'; import InstanceSelector from './InstanceSelector'; import SyncButton from './buttons/SyncButton'; import { Options, State } from '../reducers/instances'; // eslint-disable-next-line @typescript-eslint/unbound-method const { reset, rollback, commit, sweep } = ActionCreators; interface Props { dispatch: (action: LiftedAction, unknown>) => void; liftedState: State; options: Options; } export default class TopButtons extends Component { static propTypes = { // shouldSync: PropTypes.bool, liftedState: PropTypes.object.isRequired, dispatch: PropTypes.func.isRequired, options: PropTypes.object.isRequired, }; shouldComponentUpdate(nextProps: Props) { return ( nextProps.options !== this.props.options || nextProps.liftedState !== this.props.liftedState ); } handleRollback = () => { this.props.dispatch(rollback()); }; handleSweep = () => { this.props.dispatch(sweep()); }; handleCommit = () => { this.props.dispatch(commit()); }; handleReset = () => { this.props.dispatch(reset()); }; render() { const options = this.props.options; const features = options.features; const { computedStates, skippedActionIds, isPaused, isLocked } = this.props.liftedState; const noStates = computedStates.length < 2; return ( {features.pause && } {features.persist && } {features.lock && ( )} {features.sync && } ); } }