Merge 1a5542a into 412e840

danreeves · Oct 25, 2019 · d5f32e5 · d5f32e5
2 parents 412e840 + 1a5542a
commit d5f32e5
Show file tree

Hide file tree

Showing 7 changed files with 253 additions and 34 deletions.
diff --git a/example/index.html b/example/index.html
@@ -17,5 +17,9 @@
     <a id="typescript" href="./tests/typescript/index.html"></a>
     <a id="umd" href="./tests/umd/index.html"></a>
     <a id="renderelementto" href="./tests/renderelementto/index.html"></a>
+    <a
+      id="html-class-stability"
+      href="./tests/html-class-stability/index.html"
+    ></a>
   </body>
 </html>
diff --git a/example/tests/html-class-stability/index.css b/example/tests/html-class-stability/index.css
@@ -0,0 +1,33 @@
+html,
+body,
+#app {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  flex-shrink: 0;
+}
+
+@keyframes flyout-expand {
+  0% {
+    height: 0;
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.tether-content {
+  height: 300px;
+  width: 300px;
+  overflow: scroll;
+  background-color: yellow;
+}
+
+.flyout.tether-target-attached-bottom .tether-content {
+  animation: flyout-expand 2s;
+  transition: height 2s;
+}
diff --git a/example/tests/html-class-stability/index.html b/example/tests/html-class-stability/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>HTML class stability example</title>
+    <link rel="stylesheet" href="./index.css" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="./index.js"></script>
+  </body>
+</html>
diff --git a/example/tests/html-class-stability/index.js b/example/tests/html-class-stability/index.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import { render } from 'react-dom';
+import ReactTether from '../../../lib/react-tether';
+
+class App extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      isOpen: false,
+      content: '',
+      classes: 'flyout',
+    };
+  }
+
+  render() {
+    const { classes, isOpen, content } = this.state;
+    return (
+      <>
+        <h1>HTML class stability example</h1>
+        <ReactTether
+          className={classes}
+          attachment="top center"
+          constraints={[
+            {
+              to: 'scrollParent',
+              attachment: 'together',
+            },
+          ]}
+        >
+          <div>
+            <button
+              onClick={() => {
+                this.setState({ isOpen: !isOpen });
+              }}
+            >
+              Toggle Tethered Content
+            </button>
+            <button
+              onClick={() => {
+                this.setState({
+                  classes: `flyout rand-class-${Math.floor(
+                    Math.random() * 100
+                  )}`,
+                });
+              }}
+            >
+              Change Classes
+            </button>
+          </div>
+
+          {isOpen && (
+            <div className="tether-content">
+              <h2>Tethered Content</h2>
+              <p>A paragraph to accompany the title.</p>
+              <button
+                onClick={() => {
+                  this.setState({
+                    content: content + ' MORE CONTENT',
+                  });
+                }}
+              >
+                Add More Content
+              </button>
+              <p>{content}</p>
+            </div>
+          )}
+        </ReactTether>
+      </>
+    );
+  }
+}
+
+render(<App />, document.querySelector('#app'));