@arkui/hooks - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3-alpha.0

lib/index.cjs.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react"),t=require("react-popper");function e(r,t){return function(r){if(Array.isArray(r))return r}(r)||function(r,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(r)))return;var e=[],n=!0,u=!1,o=void 0;try{for(var i,a=r[Symbol.iterator]();!(n=(i=a.next()).done)&&(e.push(i.value),!t||e.length!==t);n=!0);}catch(r){u=!0,o=r}finally{try{n||null==a.return||a.return()}finally{if(u)throw o}}return e}(r,t)||function(r,t){if(!r)return;if("string"==typeof r)return n(r,t);var e=Object.prototype.toString.call(r).slice(8,-1);"Object"===e&&r.constructor&&(e=r.constructor.name);if("Map"===e||"Set"===e)return Array.from(r);if("Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e))return n(r,t)}(r,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function n(r,t){(null==t||t>r.length)&&(t=r.length);for(var e=0,n=new Array(t);e<t;e++)n[e]=r[e];return n}exports.usePopover=function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},u=r.useState(null),o=e(u,2),i=o[0],a=o[1],c=r.useState(null),l=e(c,2),f=l[0],s=l[1],p=t.usePopper(i,f,n),y=p.styles,v=p.attributes;return[y,v,a,s]},exports.usePrevious=function(t){var e=r.useRef();return r.useEffect((function(){e.current=t})),e.current},exports.useSwitch=function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],n=r.useState(t),u=e(n,2),o=u[0],i=u[1],a=r.useCallback((function(){return i(!1)}),[]),c=r.useCallback((function(){return i(!0)}),[]),l=r.useCallback((function(){return i((function(r){return!r}))}),[]);return[o,{off:a,on:c,toggle:l}]};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/slicedToArray"),t=require("react"),r=require("@babel/runtime/helpers/defineProperty"),n=require("react-popper");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=u(e),l=u(r),a=function(e){var r=t.useRef();return t.useEffect((function(){r.current=e})),r.current};function c(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function s(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(Object(r),!0).forEach((function(t){l.default(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}exports.useInput=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=arguments.length>2?arguments[2]:void 0,u=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,l=t.useMemo((function(){return void 0!==n}),[n]),c=t.useState(l?n:""),s=o.default(c,2),f=s[0],i=s[1],p=t.useState(!1),b=o.default(p,2),d=b[0],v=b[1],y=t.useState(!1),O=o.default(y,2),g=O[0],h=O[1],m=t.useState(!1),j=o.default(m,2),P=j[0],w=j[1],S=a(u),k=t.useMemo((function(){return l?n:f}),[l,n,f]);t.useEffect((function(){w(Boolean(k&&null!=k))}),[P,k]);var C=t.useCallback((function(e){r&&r(e),h(!1),v((function(e){return e||!0}))}),[r]),x=t.useCallback((function(t){return e?e(t):i(t.target.value)}),[e]),q=t.useCallback((function(){h(!0)}),[]);return[{error:d?u||S:null,focused:g,hasValue:P,touched:d},{onBlur:C,onChange:x,onFocus:q,value:k}]},exports.usePopover=function(e){var r=t.useState(null),u=o.default(r,2),l=u[0],a=u[1],c=t.useState(null),f=o.default(c,2),i=f[0],p=f[1],b=t.useMemo((function(){return{modifiers:[{name:"arrow",options:{element:i}},{name:"offset",options:{offset:[0,8]}}],placement:"bottom",strategy:"fixed"}}),[i]),d=n.usePopper(e,l,b),v=d.styles,y=d.attributes;return[s({ref:a,style:v.popper},y.popper),s({ref:p,style:v.arrow},y.arrow)]},exports.usePrevious=a,exports.useSwitch=function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],r=t.useState(e),n=o.default(r,2),u=n[0],l=n[1],a=t.useCallback((function(){return l(!1)}),[]),c=t.useCallback((function(){return l(!0)}),[]),s=t.useCallback((function(){return l((function(e){return!e}))}),[]);return[u,{off:a,on:c,toggle:s}]};

lib/index.esm.js

@@ -1,1 +0,1 @@
-import{useState as r,useRef as t,useEffect as n,useCallback as e}from"react";import{usePopper as o}from"react-popper";function u(r,t){return function(r){if(Array.isArray(r))return r}(r)||function(r,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(r)))return;var n=[],e=!0,o=!1,u=void 0;try{for(var i,a=r[Symbol.iterator]();!(e=(i=a.next()).done)&&(n.push(i.value),!t||n.length!==t);e=!0);}catch(r){o=!0,u=r}finally{try{e||null==a.return||a.return()}finally{if(o)throw u}}return n}(r,t)||function(r,t){if(!r)return;if("string"==typeof r)return i(r,t);var n=Object.prototype.toString.call(r).slice(8,-1);"Object"===n&&r.constructor&&(n=r.constructor.name);if("Map"===n||"Set"===n)return Array.from(r);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return i(r,t)}(r,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(r,t){(null==t||t>r.length)&&(t=r.length);for(var n=0,e=new Array(t);n<t;n++)e[n]=r[n];return e}var a=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=r(null),e=u(n,2),i=e[0],a=e[1],f=r(null),c=u(f,2),l=c[0],y=c[1],m=o(i,l,t),p=m.styles,s=m.attributes;return[p,s,a,y]},f=function(r){var e=t();return n((function(){e.current=r})),e.current},c=function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],n=r(t),o=u(n,2),i=o[0],a=o[1],f=e((function(){return a(!1)}),[]),c=e((function(){return a(!0)}),[]),l=e((function(){return a((function(r){return!r}))}),[]);return[i,{off:f,on:c,toggle:l}]};export{a as usePopover,f as usePrevious,c as useSwitch};
+import r from"@babel/runtime/helpers/slicedToArray";import{useRef as e,useEffect as t,useMemo as n,useState as o,useCallback as u}from"react";import i from"@babel/runtime/helpers/defineProperty";import{usePopper as c}from"react-popper";var f=function(r){var n=e();return t((function(){n.current=r})),n.current},l=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,c=arguments.length>2?arguments[2]:void 0,l=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,a=n((function(){return void 0!==c}),[c]),p=o(a?c:""),s=r(p,2),b=s[0],m=s[1],v=o(!1),g=r(v,2),y=g[0],O=g[1],d=o(!1),h=r(d,2),j=h[0],w=h[1],P=o(!1),D=r(P,2),x=D[0],B=D[1],E=f(l),S=n((function(){return a?c:b}),[a,c,b]);t((function(){B(Boolean(S&&null!=S))}),[x,S]);var k=u((function(r){i&&i(r),w(!1),O((function(r){return r||!0}))}),[i]),A=u((function(r){return e?e(r):m(r.target.value)}),[e]),C=u((function(){w(!0)}),[]);return[{error:y?l||E:null,focused:j,hasValue:x,touched:y},{onBlur:k,onChange:A,onFocus:C,value:S}]};function a(r,e){var t=Object.keys(r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(r);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),t.push.apply(t,n)}return t}function p(r){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{};e%2?a(Object(t),!0).forEach((function(e){i(r,e,t[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(t)):a(Object(t)).forEach((function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(t,e))}))}return r}var s=function(e){var t=o(null),u=r(t,2),i=u[0],f=u[1],l=o(null),a=r(l,2),s=a[0],b=a[1],m=n((function(){return{modifiers:[{name:"arrow",options:{element:s}},{name:"offset",options:{offset:[0,8]}}],placement:"bottom",strategy:"fixed"}}),[s]),v=c(e,i,m),g=v.styles,y=v.attributes;return[p({ref:f,style:g.popper},y.popper),p({ref:b,style:g.arrow},y.arrow)]},b=function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=o(e),n=r(t,2),i=n[0],c=n[1],f=u((function(){return c(!1)}),[]),l=u((function(){return c(!0)}),[]),a=u((function(){return c((function(r){return!r}))}),[]);return[i,{off:f,on:l,toggle:a}]};export{l as useInput,s as usePopover,f as usePrevious,b as useSwitch};

package.json

 {
     "name": "@arkui/hooks",
-    "version": "0.0.2",
+    "version": "0.0.3-alpha.0",
     "license": "MIT",
@@ -9,2 +9,3 @@ "main": "lib/index.cjs.js",
     "peerDependencies": {
+        "@arkui/portal": "^0.1.5",
         "@popperjs/core": "^2.4.4",
@@ -14,6 +15,3 @@ "react": "^16.13.1",
     },
-    "dependencies": {
-        "@popperjs/core": "^2.4.4",
-        "react-popper": "^2.2.3"
-    }
+    "gitHead": "a247eec01fbe36fcae9114caf0072390a2e7aae8"
 }

src/index.js

@@ -0,3 +1,4 @@
+export {default as useInput} from './useInput';
 export {default as usePopover} from './usePopover';
 export {default as usePrevious} from './usePrevious';
 export {default as useSwitch} from './useSwitch';

src/usePopover/usePopover.js

@@ -1,12 +0,48 @@
-import {useState} from 'react';
+import {useMemo, useState} from 'react';
 import {usePopper} from 'react-popper';
 
-const usePopover = (options = {}) => {
-    const [anchor, setAnchor] = useState(null);
-    const [popper, setPopper] = useState(null);
-    const {styles, attributes} = usePopper(anchor, popper, options);
+const usePopover = (anchor) => {
+    const [popover, setPopover] = useState(null);
+    const [arrow, setArrow] = useState(null);
 
-    return [styles, attributes, setAnchor, setPopper];
+    const options = useMemo(
+        () => ({
+            modifiers: [
+                {
+                    name: 'arrow',
+                    options: {
+                        element: arrow,
+                    },
+                },
+                {
+                    name: 'offset',
+                    options: {
+                        // TODO Dynamic Prop-base offsets / pass in the entire modifiers object.
+                        offset: [0, 8],
+                    },
+                },
+            ],
+            // TODO Dynamic Prop-based placement & strategy.
+            placement: 'bottom',
+            strategy: 'fixed',
+        }),
+        [arrow]
+    );
+
+    const {styles, attributes} = usePopper(anchor, popover, options);
+
+    return [
+        {
+            ref: setPopover,
+            style: styles.popper,
+            ...attributes.popper,
+        },
+        {
+            ref: setArrow,
+            style: styles.arrow,
+            ...attributes.arrow,
+        },
+    ];
 };
 
 export default usePopover;

src/usePopover/usePopover.spec.js

@@ -5,6 +5,7 @@ import {renderHook} from '@testing-library/react-hooks';
 
-test('should not return undefined.', () => {
+// TODO #10 Tests for usePopover
+test('should match expected intial state when initialized with no arguments.', () => {
     const {result} = renderHook(() => usePopover());
 
-    expect(result.current).toBeDefined();
+    expect(result.current[0]).not.toBeNull();
 });

src/usePopover/usePopover.stories.js

 import React from 'react';
-import {createPortal} from 'react-dom';
 
-import useSwitch from '../useSwitch';
-
-import usePopover from './usePopover';
-
-// TODO #5 create an animated usePopover example with react-spring
-export const Default = () => {
-    const [styles, attributes, ref, popperRef] = usePopover();
-    const [showTooltip, tooltipSwitch] = useSwitch();
-
-    return (
-        <>
-            <button onMouseEnter={tooltipSwitch.on} onMouseLeave={tooltipSwitch.off} ref={ref} type="button">
-                {'Hover Me!'}
-            </button>
-
-            {showTooltip
-                ? createPortal(
-                      <div ref={popperRef} style={styles.popper} {...attributes.popper}>
-                          {'tooltip'}
-                      </div>,
-                      document?.body
-                  )
-                : null}
-        </>
-    );
+export const Example = () => {
+    return <p>{'usePopover'}</p>;
 };
 
 export default {
-    component: usePopover,
+    component: Example,
     title: 'hooks/usePopover',
 };

No alert changes

Improved metrics

Total package byte prevSize

19652

increased by10.1%

Dependency count

4

decreased by-20%

Lines of code

449

increased by5.15%

Dependency changes

• - Removed@popperjs/core@^2.4.4

• - Removedreact-popper@^2.2.3