mirror of
https://github.com/pybricks/pybricks-code.git
synced 2026-09-12 09:36:27 +00:00
hub: convert StopButton to function
This commit is contained in:
+18
-23
@@ -1,7 +1,8 @@
|
|||||||
// SPDX-License-Identifier: MIT
|
// SPDX-License-Identifier: MIT
|
||||||
// Copyright (c) 2020 The Pybricks Authors
|
// Copyright (c) 2020-2021 The Pybricks Authors
|
||||||
|
|
||||||
import { connect } from 'react-redux';
|
import React from 'react';
|
||||||
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
import { RootState } from '../reducers';
|
import { RootState } from '../reducers';
|
||||||
import ActionButton, { ActionButtonProps } from '../toolbar/ActionButton';
|
import ActionButton, { ActionButtonProps } from '../toolbar/ActionButton';
|
||||||
import { TooltipId } from '../toolbar/i18n';
|
import { TooltipId } from '../toolbar/i18n';
|
||||||
@@ -9,29 +10,23 @@ import { stop } from './actions';
|
|||||||
import { HubRuntimeState } from './reducers';
|
import { HubRuntimeState } from './reducers';
|
||||||
import stopIcon from './stop.svg';
|
import stopIcon from './stop.svg';
|
||||||
|
|
||||||
type StateProps = Pick<ActionButtonProps, 'enabled'>;
|
type StopButtonProps = Pick<ActionButtonProps, 'id'> &
|
||||||
type DispatchProps = Pick<ActionButtonProps, 'onAction'>;
|
|
||||||
type OwnProps = Pick<ActionButtonProps, 'id'> &
|
|
||||||
Pick<ActionButtonProps, 'keyboardShortcut'>;
|
Pick<ActionButtonProps, 'keyboardShortcut'>;
|
||||||
|
|
||||||
const mapStateToProps = (state: RootState): StateProps => ({
|
const StopButton: React.FunctionComponent<StopButtonProps> = (props) => {
|
||||||
enabled: state.hub.runtime === HubRuntimeState.Running,
|
const runtime = useSelector((state: RootState) => state.hub.runtime);
|
||||||
});
|
|
||||||
|
|
||||||
const mapDispatchToProps: DispatchProps = {
|
const dispatch = useDispatch();
|
||||||
onAction: stop,
|
|
||||||
|
return (
|
||||||
|
<ActionButton
|
||||||
|
tooltip={TooltipId.Stop}
|
||||||
|
icon={stopIcon}
|
||||||
|
enabled={runtime === HubRuntimeState.Running}
|
||||||
|
onAction={() => dispatch(stop())}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const mergeProps = (
|
export default StopButton;
|
||||||
stateProps: StateProps,
|
|
||||||
dispatchProps: DispatchProps,
|
|
||||||
ownProps: OwnProps,
|
|
||||||
): ActionButtonProps => ({
|
|
||||||
tooltip: TooltipId.Stop,
|
|
||||||
icon: stopIcon,
|
|
||||||
...ownProps,
|
|
||||||
...stateProps,
|
|
||||||
...dispatchProps,
|
|
||||||
});
|
|
||||||
|
|
||||||
export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(ActionButton);
|
|
||||||
|
|||||||
Reference in New Issue
Block a user