-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(hooks): Added
useBattery, useClickAway, and `useCopyToClipbo…
…ard` hooks
- Loading branch information
1 parent
babb4b0
commit 556db4d
Showing
9 changed files
with
208 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| /*------------------------------------------------------------------- | ||
| ⚡ Storm Software - Storm Stack | ||
| This code was released as part of the Storm Stack project. Storm Stack | ||
| is maintained by Storm Software under the Apache-2.0 License, and is | ||
| free for commercial and private use. For more information, please visit | ||
| our licensing page. | ||
| Website: https://stormsoftware.com | ||
| Repository: https://github.com/storm-software/storm-stack | ||
| Documentation: https://stormsoftware.com/projects/storm-stack/docs | ||
| Contact: https://stormsoftware.com/contact | ||
| License: https://stormsoftware.com/projects/storm-stack/license | ||
| -------------------------------------------------------------------*/ | ||
|
|
||
| import { isFunction } from "@storm-stack/types/type-checks/is-function"; | ||
| import { BatteryManager } from "@storm-stack/types/utility-types/navigator"; | ||
| import React from "react"; | ||
|
|
||
| const defaultBatteryManagerState = { | ||
| supported: true, | ||
| loading: true, | ||
| level: null, | ||
| charging: null, | ||
| chargingTime: null, | ||
| dischargingTime: null | ||
| }; | ||
|
|
||
| /** | ||
| * Listens for updates to the mobile/desktop battery status | ||
| */ | ||
| export function useBattery() { | ||
| const [state, setState] = React.useState< | ||
| Omit<BatteryManager, "addEventListener" | "removeEventListener"> | ||
| >(defaultBatteryManagerState); | ||
|
|
||
| const key = "getBattery" as keyof typeof navigator; | ||
| const getBattery = navigator[key] as () => Promise<BatteryManager>; | ||
|
|
||
| React.useEffect(() => { | ||
| if (!isFunction(getBattery)) { | ||
| setState(s => ({ | ||
| ...s, | ||
| supported: false, | ||
| loading: false | ||
| })); | ||
| return; | ||
| } | ||
|
|
||
| let battery = null as BatteryManager | null; | ||
|
|
||
| const handleChange = () => { | ||
| setState({ | ||
| ...defaultBatteryManagerState, | ||
| supported: true, | ||
| loading: false, | ||
| ...battery | ||
| }); | ||
| }; | ||
|
|
||
| getBattery().then(b => { | ||
| battery = b; | ||
| handleChange(); | ||
|
|
||
| b?.addEventListener("levelchange", handleChange); | ||
| b?.addEventListener("chargingchange", handleChange); | ||
| b?.addEventListener("chargingtimechange", handleChange); | ||
| b?.addEventListener("dischargingtimechange", handleChange); | ||
| }); | ||
|
|
||
| return () => { | ||
| if (battery) { | ||
| battery.removeEventListener("levelchange", handleChange); | ||
| battery.removeEventListener("chargingchange", handleChange); | ||
| battery.removeEventListener("chargingtimechange", handleChange); | ||
| battery.removeEventListener("dischargingtimechange", handleChange); | ||
| } | ||
| }; | ||
| }, []); | ||
|
|
||
| return state; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| /*------------------------------------------------------------------- | ||
| ⚡ Storm Software - Storm Stack | ||
| This code was released as part of the Storm Stack project. Storm Stack | ||
| is maintained by Storm Software under the Apache-2.0 License, and is | ||
| free for commercial and private use. For more information, please visit | ||
| our licensing page. | ||
| Website: https://stormsoftware.com | ||
| Repository: https://github.com/storm-software/storm-stack | ||
| Documentation: https://stormsoftware.com/projects/storm-stack/docs | ||
| Contact: https://stormsoftware.com/contact | ||
| License: https://stormsoftware.com/projects/storm-stack/license | ||
| -------------------------------------------------------------------*/ | ||
|
|
||
| import { useEffect, useLayoutEffect, useRef } from "react"; | ||
|
|
||
| /** | ||
| * Listens for when a click is away from the element | ||
| * | ||
| * @param cb - Callback function | ||
| * @returns A Ref object | ||
| */ | ||
| export function useClickAway(cb: any) { | ||
| const ref = useRef<HTMLElement | null>(null); | ||
| const refCb = useRef(cb); | ||
|
|
||
| useLayoutEffect(() => { | ||
| refCb.current = cb; | ||
| }); | ||
|
|
||
| useEffect(() => { | ||
| const handler = (e: { target: any }) => { | ||
| const element = ref.current; | ||
| if (element && !element.contains(e.target)) { | ||
| refCb.current(e); | ||
| } | ||
| }; | ||
|
|
||
| document.addEventListener("mousedown", handler); | ||
| document.addEventListener("touchstart", handler); | ||
|
|
||
| return () => { | ||
| document.removeEventListener("mousedown", handler); | ||
| document.removeEventListener("touchstart", handler); | ||
| }; | ||
| }, []); | ||
|
|
||
| return ref; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| /*------------------------------------------------------------------- | ||
| ⚡ Storm Software - Storm Stack | ||
| This code was released as part of the Storm Stack project. Storm Stack | ||
| is maintained by Storm Software under the Apache-2.0 License, and is | ||
| free for commercial and private use. For more information, please visit | ||
| our licensing page. | ||
| Website: https://stormsoftware.com | ||
| Repository: https://github.com/storm-software/storm-stack | ||
| Documentation: https://stormsoftware.com/projects/storm-stack/docs | ||
| Contact: https://stormsoftware.com/contact | ||
| License: https://stormsoftware.com/projects/storm-stack/license | ||
| -------------------------------------------------------------------*/ | ||
|
|
||
| import { EMPTY_STRING } from "@storm-stack/types/utility-types/base"; | ||
| import { useCallback, useState } from "react"; | ||
|
|
||
| function oldSchoolCopy(text: string) { | ||
| const tempTextArea = document.createElement("textarea"); | ||
| tempTextArea.value = text; | ||
| document.body.appendChild(tempTextArea); | ||
| tempTextArea.select(); | ||
| document.execCommand("copy"); | ||
| document.body.removeChild(tempTextArea); | ||
| } | ||
|
|
||
| /** | ||
| * Copies a value to the clipboard | ||
| * | ||
| * @returns A tuple with the copied value and a function to copy a value to the clipboard | ||
| */ | ||
| export function useCopyToClipboard() { | ||
| const [state, setState] = useState<string | null>(null); | ||
|
|
||
| const copyToClipboard = useCallback((value: string | null) => { | ||
| const handleCopy = async () => { | ||
| try { | ||
| if (navigator?.clipboard?.writeText) { | ||
| await navigator.clipboard.writeText(value ?? EMPTY_STRING); | ||
| setState(value ?? EMPTY_STRING); | ||
| } else { | ||
| throw new Error("writeText not supported"); | ||
| } | ||
| } catch (e) { | ||
| oldSchoolCopy(value ?? EMPTY_STRING); | ||
| setState(value ?? EMPTY_STRING); | ||
| } | ||
| }; | ||
|
|
||
| handleCopy(); | ||
| }, []); | ||
|
|
||
| return [state, copyToClipboard]; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| export type BatteryManager = { | ||
| supported: boolean; | ||
| loading: boolean; | ||
| level: number | null; | ||
| charging: boolean | null; | ||
| chargingTime: number | null; | ||
| dischargingTime: number | null; | ||
| addEventListener: (type: string, listener: () => void) => void; | ||
| removeEventListener: (type: string, listener: () => void) => void; | ||
| }; |