From efa569904280cfa126e4e7208825e030d70bb09c Mon Sep 17 00:00:00 2001 From: Ron Park <ronpark.dev@gmail.com> Date: Tue, 9 Jul 2024 12:08:59 +0900 Subject: [PATCH] feat: Let them start by setting up shortcuts in the settings layer --- src/components/TargetEditLayer/index.tsx | 48 +++++++++++++----------- 1 file changed, 26 insertions(+), 22 deletions(-) diff --git a/src/components/TargetEditLayer/index.tsx b/src/components/TargetEditLayer/index.tsx index ab9682a..fda7a8b 100644 --- a/src/components/TargetEditLayer/index.tsx +++ b/src/components/TargetEditLayer/index.tsx @@ -34,6 +34,10 @@ export const TargetEditLayer: FC<Props> = ({ onChangeHighlight, onClose, default const [isHotKeyListening, setHotKeyListening] = useState(false) + useEffect(() => { + keyRef.current?.focus() + }, []) + useEffect(() => { onChangeHighlight(selector) }, [selector]) @@ -80,6 +84,28 @@ export const TargetEditLayer: FC<Props> = ({ onChangeHighlight, onClose, default )} centered> <Form layout="vertical"> + <Form.Item + label={ + <Flex vertical> + <Text strong style={{ fontSize: '16px' }}> + Shortcut Key + </Text> + <Paragraph>Press the keys you want to set as a shortcut for this item.</Paragraph> + </Flex> + } + style={{ marginBottom: 12 }}> + <Button + ref={keyRef} + onFocus={() => setHotKeyListening(true)} + onBlur={() => setHotKeyListening(false)} + type={isHotKeyListening ? 'primary' : undefined}> + {hotKey + ? HotKeyService.getText(hotKey) + : isHotKeyListening + ? 'Press keys to record shortcut' + : 'Click here to record shortcut'} + </Button> + </Form.Item> <Form.Item label={ <Flex vertical> @@ -123,28 +149,6 @@ export const TargetEditLayer: FC<Props> = ({ onChangeHighlight, onClose, default tooltip={{ open: false }} /> </Form.Item> - <Form.Item - label={ - <Flex vertical> - <Text strong style={{ fontSize: '16px' }}> - Shortcut Key - </Text> - <Paragraph>Press the keys you want to set as a shortcut for this item.</Paragraph> - </Flex> - } - style={{ marginBottom: 12 }}> - <Button - ref={keyRef} - onFocus={() => setHotKeyListening(true)} - onBlur={() => setHotKeyListening(false)} - type={isHotKeyListening ? 'primary' : undefined}> - {hotKey - ? HotKeyService.getText(hotKey) - : isHotKeyListening - ? 'Press keys to record shortcut' - : 'Click here to record shortcut'} - </Button> - </Form.Item> </Form> </Modal> )