[IMPL] useDialogBox hook

Author: nDriaDev

apps/react-tools-demo/src/components/hooks/useDialogBox/UseDialogBox.tsx

@@ -0,0 +1,41 @@
+import { useState } from "react";
+import { useDialogBox } from "../../../../../../packages/react-tools/src"
+
+/**
+The component renders three button that execute three _useDialogBox_ hook with a __type__ for each one.
+ */
+export const UseDialogBox = () => {
+	const [response, setResponse] = useState("");
+	const openPrompt = useDialogBox("prompt");
+	const openAlert = useDialogBox("alert");
+	const openConfirm = useDialogBox("confirm");
+
+	return <div style={{ display: 'flex', flexDirection: "column", justifyContent: "center" }}>
+		<p>Response: {response}</p>
+		<div style={{ display: 'flex', gap: 10, justifyContent: "center" }}>
+			<button
+				onClick={() => {
+					const resp = openPrompt("Are you open a prompt?");
+					setResponse(resp!);
+				}}
+			>
+				Open Prompt
+			</button>
+			<button
+				onClick={() => {
+					openAlert("You open a alert");
+				}}
+			>
+				Open Alert
+			</button>
+			<button
+				onClick={() => {
+					const resp = openConfirm("You open a confirm. it's ok?");
+					setResponse(resp ? "ok" : "ko");
+				}}
+			>
+				Open Confirm
+			</button>
+		</div>
+	</div>
+}

apps/react-tools-demo/src/components/hooks/useEyeDropper/UseEyeDropper.tsx

@@ -18,6 +18,6 @@ export const UseEyeDropper = () => {
 		<button onClick={onClick}>Get Color</button>
 		<br />
 		<br />
-		<label>Color </label><input type="color" value={color}/>
+		<label>Color </label><input type="color" defaultValue={color}/>
 	</div>
 }

apps/react-tools-demo/src/constants/components.ts

@@ -82,7 +82,8 @@ export const COMPONENTS = [
 			"useBattery",
 			"useGeolocation",
 			"useShare",
-			"useEyeDropper"
+			"useEyeDropper",
+			"useDialogBox"
 		]
 	],
 	//UTILS

apps/react-tools-demo/src/markdown/useDialogBox.md

@@ -0,0 +1,66 @@
+# useDialogBox
+Hook to use Dialog Box _prompt_, _alert_ or _confirm_.
+
+## Usage
+
+```tsx
+export const UseDialogBox = () => {
+	const [response, setResponse] = useState("");
+	const openPrompt = useDialogBox("prompt");
+	const openAlert = useDialogBox("alert");
+	const openConfirm = useDialogBox("confirm");
+
+	return <div style={{ display: 'flex', flexDirection: "column", justifyContent: "center" }}>
+		<p>Response: {response}</p>
+		<div style={{ display: 'flex', gap: 10, justifyContent: "center" }}>
+			<button
+				onClick={() => {
+					const resp = openPrompt("Are you open a prompt?");
+					setResponse(resp!);
+				}}
+			>
+				Open Prompt
+			</button>
+			<button
+				onClick={() => {
+					openAlert("You open a alert");
+				}}
+			>
+				Open Alert
+			</button>
+			<button
+				onClick={() => {
+					const resp = openConfirm("You open a confirm. it's ok?");
+					setResponse(resp ? "ok" : "ko");
+				}}
+			>
+				Open Confirm
+			</button>
+		</div>
+	</div>
+}
+```
+
+> The component renders three button that execute three _useDialogBox_ hook with a __type__ for each one.
+
+
+## API
+
+```tsx
+useDialogBox(type: "prompt" | "confirm" | "alert"): ((message?: string, _default?: string) => string | null) | ((message?: any) => void) | ((message?: string) => boolean) 
+```
+
+> ### Params
+>
+> - __type__: _"prompt"|"alert"|"confirm"_  
+set dialog box type.
+>
+
+> ### Returns
+>
+> __open__: function to activate dialog box.
+> - __Union of__:  
+>     - _((message?: string, default?: string) => string|null)_  
+>     - _((message?: any) => void)_  
+>     - _((message?: string) => boolean)_  
+>

apps/react-tools-demo/src/markdown/useEventListener.md

@@ -35,7 +35,7 @@ export { UseEventListener };
 ## API
 
 ```tsx
-useEventListener ({ type, listener, element = window, listenerOpts }: { type: string, listener: (evt: Event | CustomEvent) => void, element?: RefObject<HTMLElement> | Window, listenerOpts?: boolean | AddEventListenerOptions}) 
+useEventListener ({ type, listener, element = window, listenerOpts, effectType="normal" }: { type: string, listener: (evt: Event | CustomEvent) => void, element?: RefObject<HTMLElement> | Window, listenerOpts?: boolean | AddEventListenerOptions, effectType?: "normal" | "layout" }) 
 ```
 
 > ### Params
@@ -49,6 +49,8 @@ listener to be executed on specified event
 element on which attaching eventListener
 > - __options.listenerOpts?__: _boolean | AddEventListenerOptions_  
 options for listener
+> - __options.effectType="normal"?__: _"normal"|"layout"_  
+option to set which hook is used to attach event listener.
 >
 
 > ### Returns

apps/react-tools-demo/src/markdown/useEyeDropper.md

@@ -15,8 +15,10 @@ export const UseEyeDropper = () => {
 
 	return <div style={{ textAlign: "center" }}>
 		<p>Is supported: {isSupported.toString()}</p>
-		<p>Color: {color}</p>
 		<button onClick={onClick}>Get Color</button>
+		<br />
+		<br />
+		<label>Color </label><input type="color" defaultValue={color}/>
 	</div>
 }
 ```

packages/react-tools/README.md

@@ -96,6 +96,7 @@
 	- [x] useGeolocation
 	- [x] useShare
 	- [x] useEyeDropper
+	- [x] useDialogBox
 	- [ ] useSpeech (https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance#examples)
 	- [ ] useFetch (with suspense ???)
 	- [ ] useAsync

packages/react-tools/src/hooks/index.ts

@@ -63,4 +63,5 @@ export { useLongPress } from './useLongPress';
 export { useBattery } from './useBattery';
 export { useGeolocation } from './useGeolocation';
 export { useShare } from './useShare';
-export { useEyeDropper } from './useEyeDropper';
+export { useEyeDropper } from './useEyeDropper';
+export { useDialogBox } from './useDialogBox';

packages/react-tools/src/hooks/useDialogBox.ts

@@ -0,0 +1,26 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useCallback } from "react"
+
+
+/**
+ * **`useDialogBox`**: Hook to use Dialog Box _prompt_, _alert_ or _confirm_.
+ * @param {"prompt"|"alert"|"confirm"} type - set dialog box type.
+ * @returns {((message?: string, default?: string) => string|null) | ((message?: any) => void) | ((message?: string) => boolean)} open - function to activate dialog box.
+ */
+function useDialogBox(type: "prompt"): ((message?: string, _default?: string) => string | null);
+function useDialogBox(type: "alert"): ((message?: any) => void);
+function useDialogBox(type: "confirm"): ((message?: string) => boolean);
+function useDialogBox(type: "prompt" | "confirm" | "alert"): ((message?: string, _default?: string) => string | null) | ((message?: any) => void) | ((message?: string) => boolean) {
+	const prompt = useCallback((message?: string, _default?: string) => window.prompt(message, _default), []);
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const alert = useCallback((message?: any) => window.alert(message), []);
+	const confirm = useCallback((message?: string) => window.confirm(message), []);
+
+	return type === "prompt"
+		? prompt
+		: type === "alert"
+			? alert
+			: confirm;
+}
+
+export { useDialogBox };

packages/react-tools/src/hooks/useSyncExternalStore.ts

@@ -8,14 +8,13 @@ import { useSyncExternalStore as legacy, useCallback, useEffect, useRef, useStat
  */
 function useSyncExternalStorePolyfill<Snapshot>(subscribe: (onStoreChange: () => void) => () => void, getSnapshot: () => Snapshot): Snapshot {
 	const [state, setState] = useState<Snapshot>(getSnapshot());
-	const subscribeRef = useRef(subscribe);
 	const getSnapshotRef = useRef(getSnapshot);
 	const update = useCallback(() => { setState(getSnapshotRef.current()) }, []);
 
 	useEffect(() => {
 		update();
-		return subscribeRef.current(update);
-	}, [update]);
+		return subscribe(update);
+	}, [update, subscribe]);
 
 	return state;
 }