From 164e32ed32de21dca00c3262df2c1bfd37dbdcd5 Mon Sep 17 00:00:00 2001 From: heyjul3s Date: Fri, 26 Mar 2021 11:46:47 +1100 Subject: [PATCH 1/2] initial scaffoldinng --- packages/useclickaway/README.md | 11 +++++ .../__tests__/useclickaway.test.ts | 7 +++ packages/useclickaway/package.json | 42 ++++++++++++++++++ packages/useclickaway/src/index.ts | 3 ++ packages/useclickaway/tsconfig.json | 9 ++++ yarn.lock | 44 +++++++++---------- 6 files changed, 92 insertions(+), 24 deletions(-) create mode 100644 packages/useclickaway/README.md create mode 100644 packages/useclickaway/__tests__/useclickaway.test.ts create mode 100644 packages/useclickaway/package.json create mode 100644 packages/useclickaway/src/index.ts create mode 100644 packages/useclickaway/tsconfig.json diff --git a/packages/useclickaway/README.md b/packages/useclickaway/README.md new file mode 100644 index 0000000..856ef73 --- /dev/null +++ b/packages/useclickaway/README.md @@ -0,0 +1,11 @@ +# `@artifak/useclickaway` + +> TODO: description + +## Usage + +``` +const useclickaway = require('@artifak/useclickaway'); + +// TODO: DEMONSTRATE API +``` diff --git a/packages/useclickaway/__tests__/useclickaway.test.ts b/packages/useclickaway/__tests__/useclickaway.test.ts new file mode 100644 index 0000000..2b27ba5 --- /dev/null +++ b/packages/useclickaway/__tests__/useclickaway.test.ts @@ -0,0 +1,7 @@ +import { useClickAway } from '../src'; + +describe('@artifak/useclickaway', () => { + it('needs tests', () => { + // + }); +}); diff --git a/packages/useclickaway/package.json b/packages/useclickaway/package.json new file mode 100644 index 0000000..23936a6 --- /dev/null +++ b/packages/useclickaway/package.json @@ -0,0 +1,42 @@ +{ + "name": "@artifak/useclickaway", + "version": "1.0.0", + "description": "A hook to handle click events when not occurring on targeted element.", + "keywords": [], + "author": "Julian Low", + "license": "MIT", + "sideEffects": false, + "main": "dist/useclickaway.cjs.js", + "module": "dist/useclickaway.esm.js", + "src": "src/index.ts", + "types": "dist/src/index.d.ts", + "directories": { + "src": "src", + "test": "__tests__" + }, + "files": [ + "dist" + ], + "publishConfig": { + "access": "public" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/heyjul3s/artifak.git" + }, + "scripts": { + "build": "rimraf dist && builder", + "test": "echo \"Error: run tests from root\" && exit 1" + }, + "bugs": { + "url": "https://github.com/heyjul3s/artifak/issues" + }, + "homepage": "https://github.com/heyjul3s/artifak#readme", + "devDependencies": { + "@artifak/bundler": "^1.1.4" + }, + "peerDependencies": { + "react": ">=17.0.1", + "react-dom": ">=17.0.1" + } +} diff --git a/packages/useclickaway/src/index.ts b/packages/useclickaway/src/index.ts new file mode 100644 index 0000000..a3f5468 --- /dev/null +++ b/packages/useclickaway/src/index.ts @@ -0,0 +1,3 @@ +export function useClickAway() { + // TODO +} diff --git a/packages/useclickaway/tsconfig.json b/packages/useclickaway/tsconfig.json new file mode 100644 index 0000000..cd9bd18 --- /dev/null +++ b/packages/useclickaway/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "dist", + "rootDir": "." + }, + "references": [], + "include": ["src"] +} diff --git a/yarn.lock b/yarn.lock index 51a217b..754c6b8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2601,6 +2601,14 @@ estree-walker "^1.0.1" picomatch "^2.2.2" +"@rollup/pluginutils@^4.1.0": + version "4.1.0" + resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.1.0.tgz#0dcc61c780e39257554feb7f77207dceca13c838" + integrity sha512-TrBhfJkFxA+ER+ew2U2/fHbebhLT/l/2pRk0hfj9KusXUuRXd2v0R58AfaZK9VXDQ4TogOSEmICVrQAA3zFnHQ== + dependencies: + estree-walker "^2.0.1" + picomatch "^2.2.2" + "@scarf/scarf@^1.1.0": version "1.1.0" resolved "https://registry.yarnpkg.com/@scarf/scarf/-/scarf-1.1.0.tgz#b84b4a91cd938a688d36245b7a7db6fbc476a499" @@ -12870,14 +12878,7 @@ resolve-url@^0.2.1: resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a" integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo= -resolve@1.17.0: - version "1.17.0" - resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444" - integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w== - dependencies: - path-parse "^1.0.6" - -resolve@^1.1.6, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.17.0, resolve@^1.18.1, resolve@^1.19.0, resolve@^1.3.2: +resolve@1.20.0, resolve@^1.1.6, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.17.0, resolve@^1.18.1, resolve@^1.19.0, resolve@^1.3.2: version "1.20.0" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975" integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A== @@ -12948,16 +12949,16 @@ rollup-plugin-terser@^7.0.2: serialize-javascript "^4.0.0" terser "^5.0.0" -rollup-plugin-typescript2@^0.29.0: - version "0.29.0" - resolved "https://registry.yarnpkg.com/rollup-plugin-typescript2/-/rollup-plugin-typescript2-0.29.0.tgz#b7ad83f5241dbc5bdf1e98d9c3fca005ffe39e1a" - integrity sha512-YytahBSZCIjn/elFugEGQR5qTsVhxhUwGZIsA9TmrSsC88qroGo65O5HZP/TTArH2dm0vUmYWhKchhwi2wL9bw== +rollup-plugin-typescript2@^0.30.0: + version "0.30.0" + resolved "https://registry.yarnpkg.com/rollup-plugin-typescript2/-/rollup-plugin-typescript2-0.30.0.tgz#1cc99ac2309bf4b9d0a3ebdbc2002aecd56083d3" + integrity sha512-NUFszIQyhgDdhRS9ya/VEmsnpTe+GERDMmFo0Y+kf8ds51Xy57nPNGglJY+W6x1vcouA7Au7nsTgsLFj2I0PxQ== dependencies: - "@rollup/pluginutils" "^3.1.0" + "@rollup/pluginutils" "^4.1.0" find-cache-dir "^3.3.1" fs-extra "8.1.0" - resolve "1.17.0" - tslib "2.0.1" + resolve "1.20.0" + tslib "2.1.0" rollup@^2.39.0: version "2.39.0" @@ -14292,21 +14293,16 @@ ts-pnp@^1.1.6: resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92" integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw== -tslib@2.0.1: - version "2.0.1" - resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.1.tgz#410eb0d113e5b6356490eec749603725b021b43e" - integrity sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ== +tslib@2.1.0, tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3: + version "2.1.0" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a" + integrity sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A== tslib@^1.8.1, tslib@^1.9.0: version "1.14.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== -tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3: - version "2.1.0" - resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a" - integrity sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A== - tsutils@^3.17.1: version "3.20.0" resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.20.0.tgz#ea03ea45462e146b53d70ce0893de453ff24f698" From 3fd902f593901aecfaea1d96e82fd8f8790c6886 Mon Sep 17 00:00:00 2001 From: heyjul3s Date: Mon, 29 Mar 2021 21:54:24 +1100 Subject: [PATCH 2/2] implement useClickAway --- .../__tests__/useclickaway.test.ts | 7 ---- .../__tests__/useclickaway.test.tsx | 37 +++++++++++++++++++ packages/useclickaway/src/index.ts | 19 +++++++++- 3 files changed, 54 insertions(+), 9 deletions(-) delete mode 100644 packages/useclickaway/__tests__/useclickaway.test.ts create mode 100644 packages/useclickaway/__tests__/useclickaway.test.tsx diff --git a/packages/useclickaway/__tests__/useclickaway.test.ts b/packages/useclickaway/__tests__/useclickaway.test.ts deleted file mode 100644 index 2b27ba5..0000000 --- a/packages/useclickaway/__tests__/useclickaway.test.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { useClickAway } from '../src'; - -describe('@artifak/useclickaway', () => { - it('needs tests', () => { - // - }); -}); diff --git a/packages/useclickaway/__tests__/useclickaway.test.tsx b/packages/useclickaway/__tests__/useclickaway.test.tsx new file mode 100644 index 0000000..6199f36 --- /dev/null +++ b/packages/useclickaway/__tests__/useclickaway.test.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { useClickAway } from '../src'; + +describe('@artifak/useclickaway', () => { + const onClickAway = jest.fn(); + + const Dummy = () => { + const ref: React.RefObject = React.createRef(); + + useClickAway(ref, onClickAway); + + const onClick = () => { + console.log('Clicked'); + }; + + return ( +
+ Wrapper +
+ Click Me +
+
+ ); + }; + + it('calls the clickAway callback when click event occurs on non-target ref', () => { + render(); + + const Wrapper = screen.getByText('Wrapper'); + + Wrapper.focus(); + Wrapper.click(); + + expect(onClickAway).toHaveBeenCalled(); + }); +}); diff --git a/packages/useclickaway/src/index.ts b/packages/useclickaway/src/index.ts index a3f5468..f8a8768 100644 --- a/packages/useclickaway/src/index.ts +++ b/packages/useclickaway/src/index.ts @@ -1,3 +1,18 @@ -export function useClickAway() { - // TODO +import { useEffect, RefObject } from 'react'; + +export function useClickAway( + ref: RefObject, + onClickAway: (e: Event) => void +) { + const handleClick = (e: Event) => { + ref.current && !ref.current.contains(e.target as Node) && onClickAway(e); + }; + + useEffect(() => { + document.addEventListener('click', handleClick); + + return function unmountUseClickAway() { + document.removeEventListener('click', handleClick); + }; + }, [ref]); }