Merge pull request #768 from remap-keys/support-delay-feature-for-macro

Support a delay feature for Macro

src/components/configure/macroeditor/DropKeyArea.tsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+
+type DropKeyAreaProps = {
+  index: number;
+  noKeys: boolean;
+  // eslint-disable-next-line no-unused-vars
+  onDrop: (droppedIndex: number) => void;
+};
+export function DropKeyArea(props: DropKeyAreaProps) {
+  const [onDragOver, setOnDragOver] = useState<boolean>(false);
+  return (
+    <div
+      className={['macro-hold-wrapper', 'macro-drop-key-area'].join(' ')}
+      onDragOver={(event) => {
+        event.preventDefault();
+        setOnDragOver(true);
+      }}
+      onDragLeave={() => {
+        setOnDragOver(false);
+      }}
+      onDrop={() => {
+        setOnDragOver(false);
+        props.onDrop(props.index);
+      }}
+    >
+      <div
+        className={[
+          'macro-drop-key-content',
+          props.noKeys && 'macro-drop-key-area-with-message',
+          onDragOver && 'drag-over-left',
+        ].join(' ')}
+      >
+        {props.noKeys ? 'Please drop a keycode or enter text here!' : ''}
+      </div>
+    </div>
+  );
+}

src/components/configure/macroeditor/MacroDropSpacer.tsx

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+
+type MacroDropSpacerProps = {
+  index: number;
+  // eslint-disable-next-line no-unused-vars
+  onDrop: (droppedIndex: number) => void;
+};
+export function MacroDropSpacer(props: MacroDropSpacerProps) {
+  const [onDragOver, setOnDragOver] = useState<boolean>(false);
+  return (
+    <div
+      className={[
+        'macro-drop-spacer',
+        onDragOver && 'macro-drop-spacer-over',
+      ].join(' ')}
+      onDragOver={(event) => {
+        event.preventDefault();
+        setOnDragOver(true);
+      }}
+      onDragLeave={() => {
+        setOnDragOver(false);
+      }}
+      onDrop={() => {
+        setOnDragOver(false);
+        props.onDrop(props.index);
+      }}
+    ></div>
+  );
+}

src/components/configure/macroeditor/MacroEditor.scss

@@ -146,12 +146,28 @@
       &-top {
         display: flex;
         width: 100%;
-        padding: 0 4px;
-        justify-content: flex-end;
+        justify-content: space-between;
+
+        &-left {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          height: 14px;
+          cursor: pointer;
+
+          span {
+            display: inline-block;
+            font-size: 0.6rem;
+            font-weight: 600;
+            color: $primary;
+          }
+        }
+
         a {
           font-size: 0.7rem;
           cursor: pointer;
           color: $primary-light;
+          margin-right: 2px;
         }
       }