Use fullscreen bug fixes (#196)

* Update readme * v3.6.0
imbhargav5 · Dec 26, 2019 · d375600 · d375600
1 parent 68e4ac2
commit d375600
Show file tree

Hide file tree

Showing 46 changed files with 209 additions and 57 deletions.
diff --git a/lerna.json b/lerna.json
@@ -4,7 +4,7 @@
     "packages/*"
   ],
   "useWorkspaces": true,
-  "version": "3.6.0-canary.0",
+  "version": "3.6.0",
   "changelog": {
     "repo": "imbhargav5/rooks",
     "cacheDir": ".changelog",

diff --git a/packages/boundingclientrect-ref/package.json b/packages/boundingclientrect-ref/package.json
@@ -31,7 +31,7 @@
   "peerDependencies": {
     "react": ">=16.8.0"
   },
-  "version": "3.6.0-canary.0",
+  "version": "3.6.0",
   "_id": "@rooks/use-boundingclientrect-ref@",
   "readme": "ERROR: No README data found!",
   "publishConfig": {

diff --git a/packages/boundingclientrect/package.json b/packages/boundingclientrect/package.json
@@ -29,7 +29,7 @@
     "rooks",
     "react-hooks.org"
   ],
-  "version": "3.6.0-canary.0",
+  "version": "3.6.0",
   "_id": "@rooks/use-boundingclientrect@",
   "publishConfig": {
     "access": "public"

diff --git a/packages/countdown/package.json b/packages/countdown/package.json
@@ -31,7 +31,7 @@
   "peerDependencies": {
     "react": ">=16.8.0"
   },
-  "version": "3.6.0-canary.0",
+  "version": "3.6.0",
   "_id": "@rooks/use-countdown@",
   "readme": "ERROR: No README data found!",
   "publishConfig": {

diff --git a/packages/counter/package.json b/packages/counter/package.json
@@ -29,7 +29,7 @@
     "react-hooks.org",
     "counter hook"
   ],
-  "version": "3.6.0-canary.0",
+  "version": "3.6.0",
   "publishConfig": {
     "access": "public"
   },

diff --git a/packages/debounce/package.json b/packages/debounce/package.json
@@ -29,7 +29,7 @@
     "rooks",
     "react-hooks.org"
   ],
-  "version": "3.6.0-canary.0",
+  "version": "3.6.0",
   "_id": "@rooks/use-debounce@",
   "publishConfig": {
     "access": "public"

diff --git a/packages/did-mount/package.json b/packages/did-mount/package.json
@@ -30,7 +30,7 @@
     "componentDidMount",
     "lifecycle"
   ],
-  "version": "3.6.0-canary.0",
+  "version": "3.6.0",
   "_id": "@rooks/use-did-mount@",
   "publishConfig": {
     "access": "public"

diff --git a/packages/did-update/package.json b/packages/did-update/package.json
@@ -27,7 +27,7 @@
     "rooks",
     "react-hooks.org"
   ],
-  "version": "3.6.0-canary.0",
+  "version": "3.6.0",
   "_id": "@rooks/use-did-update@",
   "publishConfig": {
     "access": "public"

diff --git a/packages/docusaurus/package.json b/packages/docusaurus/package.json
@@ -1,6 +1,6 @@
 {
   "name": "docusaurus",
-  "version": "3.6.0-canary.0",
+  "version": "3.6.0",
   "private": true,
   "scripts": {
     "examples": "docusaurus-examples",

diff --git a/packages/eslint-config/package.json b/packages/eslint-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-rooks",
-  "version": "3.6.0-canary.0",
+  "version": "3.6.0",
   "description": "Eslint config for rooks.",
   "keywords": [
     "eslint",

diff --git a/packages/fork-ref/package.json b/packages/fork-ref/package.json
@@ -31,7 +31,7 @@
   "peerDependencies": {
     "react": ">=16.8.0"
   },
-  "version": "3.6.0-canary.0",
+  "version": "3.6.0",
   "_id": "@rooks/use-fork-ref@",
   "readme": "ERROR: No README data found!",
   "publishConfig": {

diff --git a/packages/fullscreen/README.md b/packages/fullscreen/README.md
@@ -21,19 +21,171 @@ import useFullscreen from "@rooks/use-fullscreen"
 ### Usage
 
 ```jsx
+import React, { useState, useRef } from "react";
+import ReactDOM from "react-dom";
+import { useFullscreen } from "rooks";
+
+const styles = {
+  html: {
+    fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif",
+    padding: "30px 10px 0 0",
+    fontSize: "20px",
+    lineHeight: "1.4",
+    color: "#737373",
+    background: "#f0f0f0",
+    WebkitFontSmoothing: "antialiased"
+  },
+  hr: {
+    border: "none",
+    borderTop: "1px solid #e6e6e6",
+    margin: "20px 0"
+  },
+  a: {
+    color: "#666"
+  },
+  h1: {
+    margin: "0",
+    fontSize: "40px",
+    textAlign: "center"
+  },
+  ul: {
+    padding: "0 0 0 40px",
+    margin: "1em 0",
+    padding: "0",
+    margin: "40px 0 0 0",
+    listStyle: "none"
+  },
+  button: {
+    fontSize: "13px"
+  },
+  container: {
+    width: "500px",
+    padding: "30px 20px",
+    margin: "0 auto 50px auto",
+    background: "#fcfcfc",
+    textAlign: "center",
+    border: "1px solid #b3b3b3",
+    borderRadius: "4px",
+    boxShadow: "0 1px 10px #a7a7a7, inset 0 1px 0 #fff"
+  },
+  demo_img: {
+    cursor: "pointer"
+  },
+  header_p: {
+    fontSize: "17px"
+  }
+};
+
 function Demo() {
-  const {isEnabled, toggle} = useFullscreen();
-  return (    
-    <img
-      src=""
-      onClick={(e) => {
-        if(isEnabled) {          
-          toggle(e.target)}
-        }
-      } 
-    />
-  )
+  const container = useRef();
+  const {
+    isEnabled,
+    toggle,
+    onChange,
+    onError,
+    request,
+    exit,
+    isFullscreen,
+    element
+  } = useFullscreen();
+  const [changeCount, setChangeCount] = useState(0);
+  const [errorCount, setErrorCount] = useState(0);
+
+  onChange(() => {
+    setChangeCount(changeCount + 1);
+  });
+  onError(() => {
+    setErrorCount(errorCount + 1);
+  });
+
+  return (
+    <div id="document" style={styles.html}>
+      <section ref={container} id="container" style={styles.container}>
+        <header>
+          <h1 styles={styles.h1}>useFullscreen</h1>
+          <p style={styles.header_p}>
+            Simple react hook for cross-browser usage of the JavaScript{" "}
+            <a
+              style={styles.a}
+              href="https://developer.mozilla.org/en/DOM/Using_full-screen_mode"
+            >
+              Fullscreen API
+            </a>
+            , which lets you bring the page or any element into fullscreen.
+            Smoothens out the browser implementation differences, so you don't
+            have too.
+          </p>
+        </header>
+        <hr style={styles.hr} />
+        <section>
+          <p>Try out the Fullscreen API</p>
+          <button
+            style={styles.button}
+            onClick={() => {
+              request(container.current);
+            }}
+          >
+            Request
+          </button>
+          <button
+            style={styles.button}
+            onClick={() => {
+              exit();
+            }}
+          >
+            Exit
+          </button>
+          <button
+            style={styles.button}
+            onClick={() => {
+              toggle();
+            }}
+          >
+            Toggle
+          </button>
+          <button style={styles.button} onClick={() => request()}>
+            Request document
+          </button>
+        </section>
+        <section>
+          <ul style={styles.ul}>
+            <li id="supported">
+              Supported/allowed: {JSON.stringify(isEnabled)}
+            </li>
+            <li id="status">Is fullscreen: {JSON.stringify(isFullscreen)}</li>
+            <li>
+              Changed {changeCount} {changeCount !== 1 ? "times" : "time"}
+            </li>
+            <li>
+              {errorCount} {errorCount !== 1 ? "errors" : "error"}
+            </li>
+            <li id="element">
+              Element:{" "}
+              {element
+                ? `${element.tagName.toLowerCase()} ${element.id}`
+                : "null"}
+            </li>
+          </ul>
+        </section>
+        <input placeholder="Keyboard test" />
+        <hr style={styles.hr} />
+        <section>
+          <p>Click the image to make it fullscreen</p>
+          <img
+            id="demo-img"
+            src="https://sindresorhus.com/unicorn"
+            width="500"
+            style={styles.demo_img}
+            onClick={e => {
+              toggle(e.target);
+            }}
+          />
+        </section>
+      </section>
+    </div>
+  );
 }
 
+
 render(<Demo/>)
 ```
diff --git a/packages/fullscreen/package.json b/packages/fullscreen/package.json
@@ -35,7 +35,7 @@
   "peerDependencies": {
     "react": ">=16.8.0"
   },
-  "version": "3.6.0-canary.0",
+  "version": "3.6.0",
   "_id": "@rooks/use-fullscreen@",
   "readme": "ERROR: No README data found!",
   "publishConfig": {

diff --git a/packages/geolocation/package.json b/packages/geolocation/package.json
@@ -31,7 +31,7 @@
   "peerDependencies": {
     "react": ">=16.8.0"
   },
-  "version": "3.6.0-canary.0",
+  "version": "3.6.0",
   "_id": "@rooks/use-geolocation@",
   "readme": "ERROR: No README data found!",
   "publishConfig": {

diff --git a/packages/input/package.json b/packages/input/package.json
@@ -28,7 +28,7 @@
     "rooks",
     "input hook"
   ],
-  "version": "3.6.0-canary.0",
+  "version": "3.6.0",
   "_id": "@rooks/use-input@",
   "publishConfig": {
     "access": "public"

diff --git a/packages/intersection-observer-ref/package.json b/packages/intersection-observer-ref/package.json
@@ -31,7 +31,7 @@
   "peerDependencies": {
     "react": ">=16.8.0"
   },
-  "version": "3.6.0-canary.0",
+  "version": "3.6.0",
   "_id": "@rooks/use-intersection-observer-ref@",
   "readme": "ERROR: No README data found!",
   "publishConfig": {

diff --git a/packages/interval/package.json b/packages/interval/package.json
@@ -29,7 +29,7 @@
     "setInterval",
     "interval"
   ],
-  "version": "3.6.0-canary.0",
+  "version": "3.6.0",
   "_id": "@rooks/use-interval@",
   "publishConfig": {
     "access": "public"

diff --git a/packages/isomorphic-effect/package.json b/packages/isomorphic-effect/package.json
@@ -31,7 +31,7 @@
   "peerDependencies": {
     "react": ">=16.8.0"
   },
-  "version": "3.6.0-canary.0",
+  "version": "3.6.0",
   "_id": "@rooks/use-isomorphic-effect@",
   "readme": "ERROR: No README data found!",
   "publishConfig": {

diff --git a/packages/key/package.json b/packages/key/package.json
@@ -29,7 +29,7 @@
     "keyboard event",
     "key"
   ],
-  "version": "3.6.0-canary.0",
+  "version": "3.6.0",
   "_id": "@rooks/use-key@",
   "publishConfig": {
     "access": "public"

diff --git a/packages/keys/package.json b/packages/keys/package.json
@@ -31,7 +31,7 @@
   "peerDependencies": {
     "react": ">=16.8.0"
   },
-  "version": "3.6.0-canary.0",
+  "version": "3.6.0",
   "_id": "@rooks/use-keys@",
   "publishConfig": {
     "access": "public"

diff --git a/packages/localstorage/package.json b/packages/localstorage/package.json
@@ -28,7 +28,7 @@
     "rooks",
     "hooks"
   ],
-  "version": "3.6.0-canary.0",
+  "version": "3.6.0",
   "_id": "@rooks/use-localstorage@",
   "publishConfig": {
     "access": "public"

diff --git a/packages/mouse/package.json b/packages/mouse/package.json
@@ -29,7 +29,7 @@
     "mouse",
     "mouse hook"
   ],
-  "version": "3.6.0-canary.0",
+  "version": "3.6.0",
   "_id": "@rooks/use-mouse@",
   "publishConfig": {
     "access": "public"

diff --git a/packages/mutation-observer-ref/package.json b/packages/mutation-observer-ref/package.json
@@ -31,7 +31,7 @@
   "peerDependencies": {
     "react": ">=16.8.0"
   },
-  "version": "3.6.0-canary.0",
+  "version": "3.6.0",
   "_id": "@rooks/use-mutation-observer-ref@",
   "readme": "ERROR: No README data found!",
   "publishConfig": {

diff --git a/packages/mutation-observer/package.json b/packages/mutation-observer/package.json
@@ -31,7 +31,7 @@
     "mutation observer",
     "mutation observer hook"
   ],
-  "version": "3.6.0-canary.0",
+  "version": "3.6.0",
   "_id": "@rooks/use-mutation-observer@",
   "publishConfig": {
     "access": "public"

diff --git a/packages/navigator-language/package.json b/packages/navigator-language/package.json
@@ -29,7 +29,7 @@
     "navigator language",
     "navigator language hook"
   ],
-  "version": "3.6.0-canary.0",
+  "version": "3.6.0",
   "_id": "@rooks/use-navigator-language@",
   "publishConfig": {
     "access": "public"