@arkui/hooks - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

lib/index.cjs.js

@@ -11,6 +11,10 @@ 'use strict';
 
-var useInput=function(a,b,c,d){void 0===a&&(a=null),void 0===b&&(b=null),void 0===d&&(d=null);var e=react.useMemo(function(){return "undefined"!=typeof c},[c]),f=react.useState(e?c:""),g=f[0],h=f[1],i=react.useState(!1),j=i[0],k=i[1],l=react.useState(!1),m=l[0],n=l[1],o=react.useState(!1),p=o[0],q=o[1],r=usePrevious(d),s=react.useMemo(function(){return e?c:g},[e,c,g]);react.useEffect(function(){q(!!(s&&null!==s&&s!==void 0));},[p,s]);var t=react.useCallback(function(a){b&&b(a),n(!1),k(function(a){return !a||a});},[b]),u=react.useCallback(function(b){return a?a(b):h(b.target.value)},[a]),v=react.useCallback(function(){n(!0);},[]);return [{error:j?d||r:null,focused:m,hasValue:p,touched:j},{onBlur:t,onChange:u,onFocus:v,value:s}]};
+var useInput=function(a,b,c,d){void 0===a&&(a=null),void 0===b&&(b=null),void 0===d&&(d=null);var e=react.useMemo(function(){return "undefined"!=typeof c},[c]),f=react.useState(e?c:""),g=f[0],h=f[1],i=react.useState(!1),j=i[0],k=i[1],l=react.useState(!1),m=l[0],n=l[1],o=react.useState(!1),p=o[0],q=o[1],r=usePrevious(d),s=react.useMemo(function(){return e?c:g},[e,c,g]);react.useEffect(function(){q(!!(s&&null!==s&&s!==void 0));},[p,s]);var t=react.useCallback(function(a){b&&b(a),n(!1),k(function(a){return !a||a});},[b]),u=react.useCallback(function(b){return a?a(b):h("checkbox"===b.target.type?b.target.checked:b.target.value)},[a]),v=react.useCallback(function(){return n(!0)},[]),w=react.useMemo(function(){return {error:j?d||r:null,focused:m,hasValue:p,touched:j}},[d,m,p,r,j]),x=react.useMemo(function(){return {onBlur:t,onChange:u,onFocus:v,value:s}},[t,u,v,s]);return [w,x]};
 
+var useIsMounted=function(){var a=react.useRef(!0);return react.useEffect(function(){return function(){a.current=!1;}},[]),a};
+
 var useMatchMedia=function(a){var b=react.useState(),c=b[0],d=b[1],e=react.useCallback(function(a){var b=a.matches;return d(b)},[]);return react.useEffect(function(){if("undefined"!=typeof window&&"matchMedia"in window&&a){var b=window.matchMedia(a);return d(b.matches),b.addEventListener("change",e),function(){return b.removeEventListener("change",e)}}},[e,a]),c};
 
+var useSharedRef=function(a,b){var c=react.useRef(a),d=function(a){c.current=a,b.forEach(function(b){"function"==typeof b?b(a):b&&(b.current=a);});};return Object.defineProperty(d,"current",{get:function get(){return c.current}}),d};
+
 var useSwitch=function(a){void 0===a&&(a=!1);var b=react.useState(a),c=b[0],d=b[1],e=react.useCallback(function(){return d(!1)},[]),f=react.useCallback(function(){return d(!0)},[]),g=react.useCallback(function(){return d(function(a){return !a})},[]);return [c,{off:e,on:f,toggle:g}]};
@@ -22,5 +26,7 @@
 exports.useInput = useInput;
+exports.useIsMounted = useIsMounted;
 exports.useMatchMedia = useMatchMedia;
 exports.usePrevious = usePrevious;
+exports.useSharedRef = useSharedRef;
 exports.useSwitch = useSwitch;
 exports.useSystemDarkMode = useSystemDarkMode;

lib/index.esm.js

@@ -7,6 +7,10 @@ import { useEffect, useRef, useMemo, useState, useCallback } from 'react';
 
-var useInput=function(a,b,c,d){void 0===a&&(a=null),void 0===b&&(b=null),void 0===d&&(d=null);var e=useMemo(function(){return "undefined"!=typeof c},[c]),f=useState(e?c:""),g=f[0],h=f[1],i=useState(!1),j=i[0],k=i[1],l=useState(!1),m=l[0],n=l[1],o=useState(!1),p=o[0],q=o[1],r=usePrevious(d),s=useMemo(function(){return e?c:g},[e,c,g]);useEffect(function(){q(!!(s&&null!==s&&s!==void 0));},[p,s]);var t=useCallback(function(a){b&&b(a),n(!1),k(function(a){return !a||a});},[b]),u=useCallback(function(b){return a?a(b):h(b.target.value)},[a]),v=useCallback(function(){n(!0);},[]);return [{error:j?d||r:null,focused:m,hasValue:p,touched:j},{onBlur:t,onChange:u,onFocus:v,value:s}]};
+var useInput=function(a,b,c,d){void 0===a&&(a=null),void 0===b&&(b=null),void 0===d&&(d=null);var e=useMemo(function(){return "undefined"!=typeof c},[c]),f=useState(e?c:""),g=f[0],h=f[1],i=useState(!1),j=i[0],k=i[1],l=useState(!1),m=l[0],n=l[1],o=useState(!1),p=o[0],q=o[1],r=usePrevious(d),s=useMemo(function(){return e?c:g},[e,c,g]);useEffect(function(){q(!!(s&&null!==s&&s!==void 0));},[p,s]);var t=useCallback(function(a){b&&b(a),n(!1),k(function(a){return !a||a});},[b]),u=useCallback(function(b){return a?a(b):h("checkbox"===b.target.type?b.target.checked:b.target.value)},[a]),v=useCallback(function(){return n(!0)},[]),w=useMemo(function(){return {error:j?d||r:null,focused:m,hasValue:p,touched:j}},[d,m,p,r,j]),x=useMemo(function(){return {onBlur:t,onChange:u,onFocus:v,value:s}},[t,u,v,s]);return [w,x]};
 
+var useIsMounted=function(){var a=useRef(!0);return useEffect(function(){return function(){a.current=!1;}},[]),a};
+
 var useMatchMedia=function(a){var b=useState(),c=b[0],d=b[1],e=useCallback(function(a){var b=a.matches;return d(b)},[]);return useEffect(function(){if("undefined"!=typeof window&&"matchMedia"in window&&a){var b=window.matchMedia(a);return d(b.matches),b.addEventListener("change",e),function(){return b.removeEventListener("change",e)}}},[e,a]),c};
 
+var useSharedRef=function(a,b){var c=useRef(a),d=function(a){c.current=a,b.forEach(function(b){"function"==typeof b?b(a):b&&(b.current=a);});};return Object.defineProperty(d,"current",{get:function get(){return c.current}}),d};
+
 var useSwitch=function(a){void 0===a&&(a=!1);var b=useState(a),c=b[0],d=b[1],e=useCallback(function(){return d(!1)},[]),f=useCallback(function(){return d(!0)},[]),g=useCallback(function(){return d(function(a){return !a})},[]);return [c,{off:e,on:f,toggle:g}]};
@@ -16,2 +20,2 @@
 
-export { useClickaway, useInput, useMatchMedia, usePrevious, useSwitch, useSystemDarkMode };
+export { useClickaway, useInput, useIsMounted, useMatchMedia, usePrevious, useSharedRef, useSwitch, useSystemDarkMode };

package.json

 {
     "name": "@arkui/hooks",
-    "version": "0.1.2",
+    "version": "0.2.0",
     "license": "MIT",
@@ -15,3 +15,3 @@ "main": "lib/index.cjs.js",
     },
-    "gitHead": "d291ebc224cf2bb442ff7db09b119ea0e0ad5aba"
+    "gitHead": "e0cdbf6503fb65b2abc679bea4056b5c0052742e"
 }

src/index.js

 export * from './useClickaway';
 export * from './useInput';
+export * from './useIsMounted';
 export * from './useMatchMedia';
 export * from './usePrevious';
+export * from './useSharedRef';
 export * from './useSwitch';
 export * from './useSystemDarkMode';

src/useClickaway/useClickaway.js

@@ -0,1 +1,8 @@
+/**
+ * @name ArkUI/Hooks/useClickaway
+ * @desc Detect a click anywhere other than the targeted node.
+ *
+ * > Useful for closing a modal or popover when the user clicks outside of said element.
+ */
+
 import {useEffect} from 'react';
@@ -2,0 +9,0 @@

src/useInput/useInput.js

@@ -0,1 +1,6 @@
+/**
+ * @name ArkUI/Hooks/useInput
+ * @desc Create custom "input primitives" with no opinion on how the input and its controls are presented to the user.
+ */
+
 import {useCallback, useEffect, useState, useMemo} from 'react';
@@ -46,3 +51,3 @@
 
-            return setInputValue(e.target.value);
+            return setInputValue(e.target.type === 'checkbox' ? e.target.checked : e.target.value);
         },
@@ -52,8 +57,6 @@ [handleChange]
 
-    const onFocus = useCallback(() => {
-        setFocus(true);
-    }, []);
+    const onFocus = useCallback(() => setFocus(true), []);
 
-    return [
-        {
+    const inputState = useMemo(
+        () => ({
             error: touched ? error || prevError : null,
@@ -63,4 +66,8 @@ focused,
             touched,
-        },
-        {
+        }),
+        [error, focused, hasValue, prevError, touched]
+    );
+
+    const inputProps = useMemo(
+        () => ({
             onBlur,
@@ -70,4 +77,7 @@ onChange,
             value,
-        },
-    ];
+        }),
+        [onBlur, onChange, onFocus, value]
+    );
+
+    return [inputState, inputProps];
 };

src/useInput/useInput.spec.js

@@ -117,1 +117,21 @@ import React from 'react';
 });
+
+test('Should set the value as booleans for type="checkbox"', () => {
+    const {result} = renderHook(() => useInput());
+
+    const {getByTestId} = render(<input data-testid="input" type="checkbox" {...result.current[1]} />);
+
+    const input = getByTestId('input');
+
+    act(() => {
+        fireEvent.click(input);
+    });
+
+    expect(result.current[1].value).toStrictEqual(true);
+
+    act(() => {
+        fireEvent.click(input);
+    });
+
+    expect(result.current[1].value).toStrictEqual(false);
+});

src/useInput/useInput.stories.js

@@ -60,2 +60,18 @@ import React from 'react';
 
+export const Checkbox = () => {
+    const [{error, focused, hasValue, touched}, props] = useInput();
+
+    return (
+        <>
+            <input {...props} placeholder="Type Something..." type="checkbox" />
+            <p>{`Value: ${props.value}`}</p>
+            <h4>{'State'}</h4>
+            <p>{`error: ${error}`}</p>
+            <p>{`focused: ${focused}`}</p>
+            <p>{`hasValue: ${hasValue}`}</p>
+            <p>{`touched: ${touched}`}</p>
+        </>
+    );
+};
+
 export {Material} from './examples';
@@ -62,0 +78,0 @@

src/useMatchMedia/useMatchMedia.js

@@ -0,1 +1,8 @@
+/**
+ * @name ArkUI/Hooks/useMatchMedia
+ * @desc Accepts a matchMedia query string as its argument and instantiates a listener for wether or not the condition is met.
+ *
+ * > Better than using a resize observer for "JS Media Queries" because the callback is only ever called when the `matches` property changes.
+ */
+
 import {useCallback, useEffect, useState} from 'react';
@@ -2,0 +9,0 @@

src/usePrevious/usePrevious.js

@@ -0,1 +1,15 @@
+/**
+ * @name ArkUI/Hooks/usePrevious
+ * @desc Store the previous value that was passed to the hook.
+ *
+ * > Useful for creating componentDidUpdate-style comparisons of values.
+ *
+ * i.e.
+ * 		const wasOpen = usePrevious(open);
+ *
+ * 		if (open !== wasOpen) {
+ * 			console.log(`open changed to ${open} from ${wasOpen}`);
+ * 		}
+ */
+
 import {useEffect, useRef} from 'react';
@@ -2,0 +16,0 @@

src/useSwitch/useSwitch.js

@@ -0,1 +1,8 @@
+/**
+ * @name ArkUI/Hooks/useSwitch
+ * @desc a wrapper around useState to return a boolean value and methods for toggling and setting the value.
+ *
+ * > Useful for open/close state of a modal.
+ */
+
 import {useCallback, useState} from 'react';
@@ -2,0 +9,0 @@

src/useSystemDarkMode/useSystemDarkMode.js

@@ -0,1 +1,9 @@
+/**
+ * @name ArkUI/Hooks/useSystemDarkMode
+ * @desc uses matchMedia to provide a realtime updating value of the users device theme preference
+ *
+ * > Wrap a styled-components ThemeProvider (or whatever lib) to control the theme that is passed to your components
+ * 	 based on the users device-level preference.
+ */
+
 import {useCallback, useEffect, useState} from 'react';
@@ -2,0 +10,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

43323

increased by56.83%

Number of package files

48

increased by50%

Lines of code

1054

increased by63.41%

No dependency changes