add example and migrate to microbundle

cluk3 · Jul 8, 2019 · 023d109 · 023d109
1 parent 94246be
commit 023d109
Show file tree

Hide file tree

Showing 7 changed files with 11,881 additions and 4,326 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,6 @@
 /node_modules
 /dist
+/exampleDist
 .DS_Store
-npm-debug.log*
+npm-debug.log*
+.cache
diff --git a/example/App.js b/example/App.js
@@ -0,0 +1,75 @@
+import React, { useState } from "react";
+import ReactDOM from "react-dom";
+import useContextMenu from "../src";
+import Menu from "./Menu";
+
+import "./styles.css";
+
+const list = [
+  {
+    id: "0",
+    name: "Lorem"
+  },
+  {
+    id: "1",
+    name: "Ipsum"
+  },
+  {
+    id: "2",
+    name: "Dolor"
+  },
+  {
+    id: "3",
+    name: "Sit"
+  }
+];
+
+const ListItem = ({ name, useContextTrigger }) => {
+  const [bindTrigger] = useContextTrigger({
+    collect: () => name
+  });
+  return <li {...bindTrigger}>{name}</li>;
+};
+
+function App() {
+  const [
+    useContextTrigger,
+    { data, coords, bindMenu, hideMenu },
+    bindMenuItem
+  ] = useContextMenu();
+  const [bindTrigger] = useContextTrigger({
+    collect: () => "Title"
+  });
+  const [clickedCmd, setClickedCmd] = useState();
+  return (
+    <div className="App">
+      <h1 {...bindTrigger}>useContextMenu</h1>
+      <h2>Right click to see some magic happen!</h2>
+      {clickedCmd && (
+        <p>
+          You clicked the <b>{clickedCmd}</b> command!
+        </p>
+      )}
+      <ul>
+        {list.map(item => (
+          <ListItem
+            useContextTrigger={useContextTrigger}
+            name={item.name}
+            key={item.id}
+          />
+        ))}
+      </ul>
+      <Menu
+        bindMenu={bindMenu}
+        data={data}
+        bindMenuItem={bindMenuItem}
+        coords={coords}
+        setClickedCmd={setClickedCmd}
+        hideMenu={hideMenu}
+      />
+    </div>
+  );
+}
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(<App />, rootElement);
diff --git a/example/Menu.jsx b/example/Menu.jsx
@@ -0,0 +1,45 @@
+import React from "react";
+
+const Menu = props => {
+  const {
+    bindMenu,
+    data,
+    bindMenuItem,
+    coords,
+    setClickedCmd,
+    hideMenu
+  } = props;
+
+  const handleMenuItemClick = n => () => {
+    setClickedCmd(n);
+    hideMenu();
+  };
+  return (
+    <div {...bindMenu} className="menu">
+      <p>
+        It works! <span>Click coords: {JSON.stringify(coords)}</span>
+      </p>
+      <p>Triggered by {data}</p>
+      <p>Navigate with arrows</p>
+      <p>Enter will trigger an onClick</p>
+      <p>Esc will close the menu</p>
+      <hr />
+      <p
+        {...bindMenuItem}
+        onFocus={() => console.log("focused")}
+        onClick={handleMenuItemClick("first")}
+      >
+        First command
+      </p>
+      <p {...bindMenuItem} onClick={handleMenuItemClick("second")}>
+        Second command
+      </p>
+      <hr />
+      <p {...bindMenuItem} onClick={handleMenuItemClick("third")}>
+        Third command
+      </p>
+    </div>
+  );
+};
+
+export default Menu;
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>useContextMenu example</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+  <div id="root"></div>
+  <script src="./App.js"></script>
+</body>
+</html>
diff --git a/example/styles.css b/example/styles.css
@@ -0,0 +1,24 @@
+.App {
+    font-family: sans-serif;
+    text-align: center;
+    height: 110vh;
+  }
+
+  .menu {
+    background-color: blueviolet;
+    color: white;
+    box-shadow: 0 3px 6px rgba(91, 65, 209, 0.16),
+      0 3px 6px rgba(91, 65, 209, 0.23);
+    padding: 0 2em 0 2em;
+    text-align: left;
+  }
+
+  .menu > [role="menuitem"] {
+    cursor: pointer;
+  }
+
+  html {
+    background-color: cornflowerblue;
+    color: white;
+  }
+