feat: sidecar FocusLock

theKashey · May 28, 2019 · 5493986 · 5493986
1 parent 187c3c8
commit 5493986
Show file tree

Hide file tree

Showing 29 changed files with 7,179 additions and 202 deletions.
diff --git a/.babelrc b/.babelrc
@@ -28,6 +28,7 @@
         "@babel/preset-react"
       ],
       "plugins": [
+        "@babel/plugin-syntax-dynamic-import",
         "@babel/plugin-proposal-class-properties",
         "@babel/plugin-transform-runtime",
         [

diff --git a/.size-limit b/.size-limit
@@ -3,5 +3,15 @@
     path: "dist/es2015/index.js",
     limit: "5 KB",
     ignore: ["prop-types", "\\@babel/runtime"]
-  }
-]
+  },
+  {
+    path: "dist/es2015/UI.js",
+    limit: "1.8 KB",
+    ignore: ["prop-types", "\\@babel/runtime"]
+  },
+  {
+    path: "dist/es2015/sidecar.js",
+    limit: "3.5 KB",
+    ignore: ["prop-types", "\\@babel/runtime"]
+   },
+]
diff --git a/UI/UI.d.ts b/UI/UI.d.ts
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import {ReactFocusLockProps, AutoFocusProps, FreeFocusProps, InFocusGuardProps} from "../interfaces";
+
+/**
+ * Traps Focus inside a Lock
+ */
+export default class ReactFocusLock extends React.Component<ReactFocusLockProps & {
+  sideCar: React.SFC
+}> {
+}
+
+/**
+ * Autofocus on children on Lock activation
+ */
+export class AutoFocusInside extends React.Component<AutoFocusProps> {
+}
+
+/**
+ * Autofocus on children
+ */
+export class MoveFocusInside extends React.Component<AutoFocusProps> {
+}
+
+/**
+ * Allow free focus inside on children
+ */
+export class FreeFocusInside extends React.Component<FreeFocusProps> {
+}
+
+/**
+ * Secures the focus around the node
+ */
+export class InFocusGuard extends React.Component<InFocusGuardProps> {
+}
diff --git a/UI/package.json b/UI/package.json
@@ -0,0 +1,8 @@
+{
+  "private": true,
+  "main": "../dist/cjs/sidecar.js",
+  "jsnext:main": "../dist/es2015/sidecar.js",
+  "module": "../dist/es2015/sidecar.js",
+  "types": "sidecar.d.ts",
+  "sideEffects": false
+}
diff --git a/examples/preact-parcel/app/Lock.js b/examples/preact-parcel/app/Lock.js
@@ -0,0 +1,69 @@
+import { h } from 'preact';
+import React, {Component} from "react";
+import {FocusLockUI} from "react-focus-lock";
+import {sidecar} from "use-sidecar";
+
+const styles = {
+  fontFamily: "sans-serif",
+  textAlign: "center",
+  fontSize: "16px"
+};
+
+const bg = {
+  backgroundColor: '#FEE'
+};
+
+const FocusLockSidecar = sidecar(() => import("react-focus-lock/sidecar"));
+
+class Trap extends Component {
+  state = {
+    disabled: true
+  }
+
+  toggle = () => this.setState({disabled: !this.state.disabled});
+
+  render() {
+    const {disabled} = this.state;
+    return (
+      <FocusLockUI
+        disabled={this.state.disabled}
+        sideCar={FocusLockSidecar}
+      >
+        {disabled && <div>
+          <button onClick={this.toggle}>!ACTIVATE THE TRAP!</button>
+          <br/>
+          <br/>
+        </div>
+        }
+        You will cycle over this. Never leaving <br/>
+        <input placeholder="input1"/>
+
+        <input placeholder="input2"/>
+
+        <input placeholder="input3"/> <br/>
+
+        <button>A BUTTON</button>
+        <br/>
+
+        <a href='#'>link somethere</a> <br/>
+
+        {!disabled && <div>
+          <br/><br/>PRESS this to end the trial.<br/><br/>
+          <button onClick={this.toggle}>ESCAPE!!!</button>
+          <br/>
+        </div>}
+      </FocusLockUI>
+    )
+  }
+}
+
+const Lock = () =>
+  <div style={styles}>
+    <input placeholder="input1"/>
+    <div style={bg}> Inaccessible <a href='#'>Link</a> outside</div>
+    <Trap/>
+    <div style={bg}> Inaccessible <a href='#'>Link</a> outside</div>
+    <input placeholder="input1"/>
+  </div>;
+
+export default Lock;
diff --git a/examples/preact-parcel/app/client.js b/examples/preact-parcel/app/client.js
@@ -0,0 +1,10 @@
+import { h } from 'preact';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Lock from "./Lock";
+
+const element = document.getElementById('app');
+const app = (<Lock/>);
+
+
+ReactDOM.render(app, element);
diff --git a/examples/preact-parcel/app/index.html b/examples/preact-parcel/app/index.html
@@ -0,0 +1,14 @@
+<!-- This file will be used as is in development mode -->
+<!-- In production, it will be used as a template on server-rendering -->
+<!-- and changed on the fly using cheerio -->
+<!-- You can also use your own template engine if you want -->
+<!-- but I like to keep things simple -->
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+  <div id="app"></div>
+  <script src="./client.js"></script>
+</body>
+</html>
diff --git a/examples/preact-parcel/dist/1.js b/examples/preact-parcel/dist/1.js