React UI: Added shortcuts (#1230)
Boris Sekachev
6 years ago
committed by
GitHub
parent
8afb5dda2a
commit
78dad73de9
@ -0,0 +1,11 @@
|
||||
import { ActionUnion, createAction } from 'utils/redux';
|
||||
|
||||
export enum ShortcutsActionsTypes {
|
||||
SWITCH_SHORTCUT_DIALOG = 'SWITCH_SHORTCUT_DIALOG',
|
||||
}
|
||||
|
||||
export const shortcutsActions = {
|
||||
switchShortcutsDialog: () => createAction(ShortcutsActionsTypes.SWITCH_SHORTCUT_DIALOG),
|
||||
};
|
||||
|
||||
export type ShortcutsActions = ActionUnion<typeof shortcutsActions>;
|
||||
@ -0,0 +1,97 @@
|
||||
import React from 'react';
|
||||
import { getApplicationKeyMap } from 'react-hotkeys';
|
||||
import { Modal, Table } from 'antd';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { shortcutsActions } from 'actions/shortcuts-actions';
|
||||
import { CombinedState } from 'reducers/interfaces';
|
||||
|
||||
interface StateToProps {
|
||||
visible: boolean;
|
||||
}
|
||||
|
||||
interface DispatchToProps {
|
||||
switchShortcutsDialog(): void;
|
||||
}
|
||||
|
||||
function mapStateToProps(state: CombinedState): StateToProps {
|
||||
const {
|
||||
shortcuts: {
|
||||
visibleShortcutsHelp: visible,
|
||||
},
|
||||
} = state;
|
||||
|
||||
return {
|
||||
visible,
|
||||
};
|
||||
}
|
||||
|
||||
function mapDispatchToProps(dispatch: any): DispatchToProps {
|
||||
return {
|
||||
switchShortcutsDialog(): void {
|
||||
dispatch(shortcutsActions.switchShortcutsDialog());
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function ShorcutsDialog(props: StateToProps & DispatchToProps): JSX.Element | null {
|
||||
const { visible, switchShortcutsDialog } = props;
|
||||
const keyMap = getApplicationKeyMap();
|
||||
|
||||
const splitToRows = (data: string[]): JSX.Element[] => (
|
||||
data.map((item: string, id: number): JSX.Element => (
|
||||
// eslint-disable-next-line react/no-array-index-key
|
||||
<span key={id}>
|
||||
{item}
|
||||
<br />
|
||||
</span>
|
||||
))
|
||||
);
|
||||
|
||||
const columns = [{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
}, {
|
||||
title: 'Shortcut',
|
||||
dataIndex: 'shortcut',
|
||||
key: 'shortcut',
|
||||
render: splitToRows,
|
||||
}, {
|
||||
title: 'Action',
|
||||
dataIndex: 'action',
|
||||
key: 'action',
|
||||
render: splitToRows,
|
||||
}, {
|
||||
title: 'Description',
|
||||
dataIndex: 'description',
|
||||
key: 'description',
|
||||
}];
|
||||
|
||||
const dataSource = Object.keys(keyMap).map((key: string, id: number) => ({
|
||||
key: id,
|
||||
name: keyMap[key].name || key,
|
||||
description: keyMap[key].description || '',
|
||||
shortcut: keyMap[key].sequences.map((value) => value.sequence),
|
||||
action: keyMap[key].sequences.map((value) => value.action || 'keydown'),
|
||||
}));
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title='Active list of shortcuts'
|
||||
visible={visible}
|
||||
closable={false}
|
||||
width={800}
|
||||
onOk={switchShortcutsDialog}
|
||||
cancelButtonProps={{ style: { display: 'none' } }}
|
||||
zIndex={1001} /* default antd is 1000 */
|
||||
>
|
||||
<Table dataSource={dataSource} columns={columns} size='small' />
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps,
|
||||
)(ShorcutsDialog);
|
||||
@ -0,0 +1,20 @@
|
||||
import { ShortcutsActions, ShortcutsActionsTypes } from 'actions/shortcuts-actions';
|
||||
import { ShortcutsState } from './interfaces';
|
||||
|
||||
const defaultState: ShortcutsState = {
|
||||
visibleShortcutsHelp: false,
|
||||
};
|
||||
|
||||
export default (state = defaultState, action: ShortcutsActions): ShortcutsState => {
|
||||
switch (action.type) {
|
||||
case ShortcutsActionsTypes.SWITCH_SHORTCUT_DIALOG: {
|
||||
return {
|
||||
...state,
|
||||
visibleShortcutsHelp: !state.visibleShortcutsHelp,
|
||||
};
|
||||
}
|
||||
default: {
|
||||
return state;
|
||||
}
|
||||
}
|
||||
};
|
||||
Loading…
Reference in New Issue