diff --git a/.gitignore b/.gitignore index 183b3b3..460431c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,23 +1,133 @@ -# Mac OSX Files -.DS_Store -.Trashes -.Spotlight-V100 +lib +dist +example-dist +.cache + +# Created by https://www.gitignore.io/api/osx,node,linux,windows + +### Linux ### +*~ + +# temporary files which can be created if a process still has a handle open of a deleted file +.fuse_hidden* + +# KDE directory preferences +.directory + +# Linux trash folder which might appear on any partition or disk +.Trash-* + +# .nfs files are created when an open file is removed but is still being accessed +.nfs* + +### Node ### +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (http://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# Typescript v1 declaration files +typings/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env + + +### OSX ### +*.DS_Store .AppleDouble .LSOverride -# APP -node_modules -npm-debug.log -/dist/ -/lib/ -/example/bundle.js -/example-dist - -# General Files -.sass-cache -.hg -.idea -.svn -.cache -.project -.tmp +# Icon must end with two \r +Icon + +# Thumbnails +._* + +# Files that might appear in the root of a volume +.DocumentRevisions-V100 +.fseventsd +.Spotlight-V100 +.TemporaryItems +.Trashes +.VolumeIcon.icns +.com.apple.timemachine.donotpresent + +# Directories potentially created on remote AFP share +.AppleDB +.AppleDesktop +Network Trash Folder +Temporary Items +.apdisk + +### Windows ### +# Windows thumbnail cache files +Thumbs.db +ehthumbs.db +ehthumbs_vista.db + +# Folder config file +Desktop.ini + +# Recycle Bin used on file shares +$RECYCLE.BIN/ + +# Windows Installer files +*.cab +*.msi +*.msm +*.msp + +# Windows shortcuts +*.lnk + + +# End of https://www.gitignore.io/api/osx,node,linux,windows diff --git a/README.md b/README.md index ebac40e..77a3115 100644 --- a/README.md +++ b/README.md @@ -73,6 +73,8 @@ The tag that is used to render the Tether element, defaults to `div`. Where in the DOM the Tether element is appended. Passes in any valid selector to `document.querySelector`. Defaults to `document.body`. +Tether requires this element to be `position: static;`, otherwise it will default to `document.body`. See [this example](https://danreeves.github.io/react-tether/renderelementto/) for more information. + #### `Tether Options`: Any valid [Tether options](http://tether.io/#options). diff --git a/bin/build-demo b/bin/build-demo new file mode 100755 index 0000000..d5a42b2 --- /dev/null +++ b/bin/build-demo @@ -0,0 +1,27 @@ +#!/usr/bin/env bash + +# Clean the folder dist folder +echo 'Deleting ./example-dist' +rm -rf ./example-dist + +# Build main demo +echo 'Building ./example' +npx parcel build ./example/index.html \ + --out-dir example-dist \ + --public-url /react-tether/ + +# Build the renderelemento demo +echo 'Building ./tests/examples/renderelementto' +npx parcel build ./tests/examples/renderelementto/index.html \ + --out-dir example-dist/renderelementto \ + --public-url /react-tether/renderelementto/ + +# Deploy to gh-pages +echo 'Deploying to gh-pages' +npx git-directory-deploy \ + --directory ./example-dist \ + --branch gh-pages + +# Tidy up after +echo 'Deleting ./example-dist' +rm -rf ./example-dist diff --git a/package.json b/package.json index 7875ac6..4e6e6c5 100644 --- a/package.json +++ b/package.json @@ -10,8 +10,7 @@ "prebuild": "rm -rf dist && mkdir dist", "prepublish": "npm run build", "demo": "parcel example/index.html", - "demo:build": "parcel build example/index.html --out-dir example-dist --public-url /react-tether/", - "demo:deploy": "npm run demo:build && git-directory-deploy --directory example-dist --branch gh-pages && rm -rf example-dist", + "demo:deploy": "./bin/build-demo", "unit": "jest tests/unit", "e2e": "testcafe chrome tests/e2e --app 'npm run demo'", "e2e:full": "testcafe \"saucelabs:Chrome\",\"saucelabs:Firefox\",\"saucelabs:Safari\",\"saucelabs:MicrosoftEdge\" tests/e2e --app 'npm run demo'", diff --git a/tests/examples/renderelementto/index.html b/tests/examples/renderelementto/index.html new file mode 100644 index 0000000..a016fb5 --- /dev/null +++ b/tests/examples/renderelementto/index.html @@ -0,0 +1,20 @@ + + + + renderElementTo example + + + +
+
+
+ + + diff --git a/tests/examples/renderelementto/index.js b/tests/examples/renderelementto/index.js new file mode 100644 index 0000000..0b2042e --- /dev/null +++ b/tests/examples/renderelementto/index.js @@ -0,0 +1,67 @@ +import React from 'react'; +import { render } from 'react-dom'; +import ReactTether from '../../../lib/react-tether'; + +const badParent = document.querySelector('#bad-parent'); +const goodParent = document.querySelector('#good-parent'); + +function App() { + return ( +
+

renderElementTo example

+
+
+ + Target 1 + Render to #bad-parent + +
+
+ + Target 1 + Render to #good-parent + +
+
+

fixing it with bodyElement

+

+ This might not behave in ways you expect so you should know what + you're doing! +

+
+
+ + Target 1 + Render to #bad-parent + +
+
+ + Target 1 + Render to #good-parent + +
+
+
+ ); +} + +render(, document.querySelector('#app'));