93 lines
2.2 KiB
TypeScript
93 lines
2.2 KiB
TypeScript
import { SearchOutlined } from '@ant-design/icons';
|
|
import { Input, Table, Tag } from 'antd';
|
|
import _ from 'lodash';
|
|
import React from 'react';
|
|
import './index.less';
|
|
import KeyMapConfig from './keymap';
|
|
|
|
const ShortCuts: React.FC<{ intl: any }> = ({ intl }) => {
|
|
const [dataList, setDataList] = React.useState<any[]>(KeyMapConfig);
|
|
|
|
const columns = [
|
|
{
|
|
title: 'Scope',
|
|
dataIndex: 'scope',
|
|
key: 'scope',
|
|
width: 160
|
|
},
|
|
{
|
|
title: 'Action',
|
|
dataIndex: 'command',
|
|
key: 'command',
|
|
render: (text: string, row: any) => {
|
|
return <span>{intl.formatMessage({ id: text })}</span>;
|
|
}
|
|
},
|
|
{
|
|
title: 'Keybinding',
|
|
dataIndex: 'keybinding',
|
|
key: 'keybinding',
|
|
width: 180,
|
|
render: (text: string, row: any) => {
|
|
return <Tag>{row.keybinding}</Tag>;
|
|
}
|
|
}
|
|
];
|
|
|
|
const handleInputChange = (e: any) => {
|
|
const value = e.target.value;
|
|
const list = _.filter(KeyMapConfig, (item: any) => {
|
|
return (
|
|
item.command.toLowerCase().includes(value.toLowerCase()) ||
|
|
item.scope.toLowerCase().includes(value.toLowerCase())
|
|
);
|
|
});
|
|
setDataList(list);
|
|
};
|
|
|
|
const debounceHandleInputChange = _.debounce(handleInputChange, 300);
|
|
return (
|
|
<div className="short-cuts">
|
|
<h3 style={{ marginBottom: 20, fontWeight: 'var(--font-weight-bold)' }}>
|
|
{intl.formatMessage({ id: 'shortcuts.title' })}
|
|
</h3>
|
|
<Input
|
|
allowClear
|
|
placeholder={intl.formatMessage({ id: 'shortcuts.search.placeholder' })}
|
|
style={{ marginBottom: 16 }}
|
|
onChange={debounceHandleInputChange}
|
|
prefix={
|
|
<>
|
|
<SearchOutlined
|
|
style={{
|
|
fontSize: '16px',
|
|
color: 'var(--ant-color-text-quaternary)'
|
|
}}
|
|
/>
|
|
</>
|
|
}
|
|
></Input>
|
|
<Table
|
|
rowKey={(record) => record.command}
|
|
columns={columns}
|
|
dataSource={dataList}
|
|
pagination={false}
|
|
scroll={{ y: 450 }}
|
|
></Table>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const modalConfig = {
|
|
icon: null,
|
|
centered: false,
|
|
maskClosable: true,
|
|
footer: null,
|
|
style: {
|
|
top: '10%'
|
|
},
|
|
width: 700
|
|
};
|
|
|
|
export default React.memo(ShortCuts);
|