Migration of jsx files to tsx 1 (#848)

In this PR I have changed some of the jsx files to tsx file. I'm starting off with the "leafs" so that migration of the rest will be easier, hopefully. What I'm basically doing is taking a jsx file, copy paste it into: https://mskelton.dev/ratchet And after that I'm fixing the types as needed. It's not a very long process. Hopefully more PRs will follow and this will be over soon. I don't plan to migrate the storybook as I generally don't understand why is it useful, I'll open an issue to see if anyone thinks differently.
2026-08-31 09:27:30 +00:00 · 2023-12-21 23:46:56 +02:00
parent 3bf0e510e6
commit fa182e66fa
64 changed files with 1009 additions and 859 deletions
@@ -0,0 +1,132 @@
+import React from 'react'
+
+import Modal from './Modal'
+
+
+type ModalShortcutsProps = {
+  isOpen: boolean
+  onOpenToggle(...args: unknown[]): unknown
+};
+
+
+export default class ModalShortcuts extends React.Component<ModalShortcutsProps> {
+  render() {
+    const help = [
+      {
+        key: <kbd>?</kbd>,
+        text: "Shortcuts menu"
+      },
+      {
+        key: <kbd>o</kbd>,
+        text: "Open modal"
+      },
+      {
+        key: <kbd>e</kbd>,
+        text: "Export modal"
+      },
+      {
+        key: <kbd>d</kbd>,
+        text: "Data Sources modal"
+      },
+      {
+        key: <kbd>s</kbd>,
+        text: "Style Settings modal"
+      },
+      {
+        key: <kbd>i</kbd>,
+        text: "Toggle inspect"
+      },
+      {
+        key: <kbd>m</kbd>,
+        text: "Focus map"
+      },
+      {
+        key: <kbd>!</kbd>,
+        text: "Debug modal"
+      },
+    ]
+
+
+    const mapShortcuts = [
+      {
+        key: <kbd>+</kbd>,
+        text: "Increase the zoom level by 1.",
+      },
+      {
+        key: <><kbd>Shift</kbd> + <kbd>+</kbd></>,
+        text: "Increase the zoom level by 2.",
+      },
+      {
+        key: <kbd>-</kbd>,
+        text: "Decrease the zoom level by 1.",
+      },
+      {
+        key: <><kbd>Shift</kbd> + <kbd>-</kbd></>,
+        text: "Decrease the zoom level by 2.",
+      },
+      {
+        key: <kbd>Up</kbd>,
+        text: "Pan up by 100 pixels.",
+      },
+      {
+        key: <kbd>Down</kbd>,
+        text: "Pan down by 100 pixels.",
+      },
+      {
+        key: <kbd>Left</kbd>,
+        text: "Pan left by 100 pixels.",
+      },
+      {
+        key: <kbd>Right</kbd>,
+        text: "Pan right by 100 pixels.",
+      },
+      {
+        key: <><kbd>Shift</kbd> + <kbd>Right</kbd></>,
+        text: "Increase the rotation by 15 degrees.",
+      },
+      {
+        key: <><kbd>Shift</kbd> + <kbd>Left</kbd></>,
+        text: "Decrease the rotation by 15 degrees."
+      },
+      {
+        key: <><kbd>Shift</kbd> + <kbd>Up</kbd></>,
+        text: "Increase the pitch by 10 degrees."
+      },
+      {
+        key: <><kbd>Shift</kbd> + <kbd>Down</kbd></>,
+        text: "Decrease the pitch by 10 degrees."
+      },
+    ]
+
+
+    return <Modal
+      data-wd-key="modal:shortcuts"
+      isOpen={this.props.isOpen}
+      onOpenToggle={this.props.onOpenToggle}
+      title={'Shortcuts'}
+    >
+      <section className="maputnik-modal-section maputnik-modal-shortcuts">
+        <p>
+          Press <code>ESC</code> to lose focus of any active elements, then press one of:
+        </p>
+        <dl>
+          {help.map((item, idx) => {
+            return <div key={idx} className="maputnik-modal-shortcuts__shortcut">
+              <dt key={"dt"+idx}>{item.key}</dt>
+              <dd key={"dd"+idx}>{item.text}</dd>
+            </div>
+          })}
+        </dl>
+        <p>If the Map is in focused you can use the following shortcuts</p>
+        <ul>
+          {mapShortcuts.map((item, idx) => {
+            return <li key={idx}>
+              <span>{item.key}</span> {item.text}
+            </li>
+          })}
+        </ul>
+      </section>
+    </Modal>
+  }
+}
+