94 lines
2.8 KiB
JavaScript
94 lines
2.8 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { List, Typography, Tooltip } from 'antd';
|
|
import { FaKeyboard } from 'react-icons/fa';
|
|
import { DefaultModal } from '../../../../Components/Modal/DefaultModal';
|
|
import '../../../../Styles/OverAllStyle/OverAllStyle.scss';
|
|
const { Title, Text } = Typography;
|
|
const ShortcutKeyHelper = ({}) => {
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
|
|
const shortcuts = [
|
|
{ key: 'Alt + Z', description: 'Customer' },
|
|
{ key: 'Alt + A', description: 'Extra Charge' },
|
|
{ key: 'Alt + N', description: 'Quick Add' },
|
|
{ key: 'Alt + R', description: 'Reprint' },
|
|
{ key: 'Alt + S', description: 'Split Payment' },
|
|
{ key: 'F4', description: 'Quick Pay' },
|
|
{ key: 'Alt + W', description: 'Hold and Recall' },
|
|
{ key: 'Ctrl + Q', description: 'Qty Change' },
|
|
{ key: 'Ctrl + E', description: 'Price Change' },
|
|
{ key: 'Ctrl + Y', description: 'Packing' },
|
|
{ key: 'Ctrl + B', description: 'Weight / Amount' },
|
|
{ key: 'Alt + P', description: 'Change Total Amount' },
|
|
{ key: 'Ctrl + I', description: 'Customer Rate History' },
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<Tooltip title="Keyboard Shortcuts">
|
|
<div
|
|
onClick={() => setIsModalOpen(true)}
|
|
style={{
|
|
cursor: 'pointer',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '5px',
|
|
padding: '5px 10px',
|
|
borderRadius: '4px',
|
|
fontSize: '18px',
|
|
}}
|
|
>
|
|
<FaKeyboard />
|
|
{/* <span>Shortcuts</span> */}
|
|
</div>
|
|
</Tooltip>
|
|
|
|
<DefaultModal
|
|
title={
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
|
<FaKeyboard />
|
|
Keyboard Shortcuts
|
|
</div>
|
|
}
|
|
open={isModalOpen}
|
|
handleCancel={() => setIsModalOpen(false)}
|
|
footer={null}
|
|
width={500}
|
|
>
|
|
<List
|
|
className="Shot-KeyBoard"
|
|
dataSource={shortcuts}
|
|
renderItem={(item) => (
|
|
<List.Item>
|
|
<div
|
|
className="KBwithKey"
|
|
style={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
width: '100%',
|
|
}}
|
|
>
|
|
<Text
|
|
className="KBwithKey"
|
|
strong
|
|
style={{
|
|
fontFamily: 'monospace',
|
|
backgroundColor: '#f5f5f5',
|
|
padding: '2px 6px',
|
|
borderRadius: '3px',
|
|
}}
|
|
>
|
|
{item.key}
|
|
</Text>
|
|
<Text>{item.description}</Text>
|
|
</div>
|
|
</List.Item>
|
|
)}
|
|
/>
|
|
</DefaultModal>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ShortcutKeyHelper;
|