fix(useToggle): fix hook returned value

sheinsight · Aug 9, 2024 · dd976b9 · dd976b9
1 parent 69b7f5d
commit dd976b9
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 11 deletions.
diff --git a/src/use-toggle/demo.tsx b/src/use-toggle/demo.tsx
@@ -2,7 +2,7 @@ import { Button, Card, KeyValue, Zone } from '@/components'
 import { useCircularList, useToggle } from '@shined/react-use'
 
 export function App() {
-  const [mode, toggleMode, actions] = useToggle(['light', 'dark'] as const)
+  const [mode, actions] = useToggle(['light', 'dark'] as const)
   const [value, listActions] = useCircularList(['A', 'B', 'C', 'D', 'F', 'G'])
 
   return (
@@ -12,7 +12,7 @@ export function App() {
         <KeyValue label="value" value={value} />
       </Zone>
       <Zone>
-        <Button onClick={toggleMode}>Toggle mode</Button>
+        <Button onClick={actions.toggle}>Toggle mode</Button>
         <Button onClick={actions.setLeft}>Set left</Button>
         <Button onClick={actions.setRight}>Set right</Button>
         <Button onClick={() => listActions.prev()}>Prev value</Button>

diff --git a/src/use-toggle/index.mdx b/src/use-toggle/index.mdx
@@ -34,8 +34,8 @@ import { Source } from '@/components'
 ## API
 
 ```tsx
-const [value, toggle, actions] = useToggle(bool)
-const [value, toggle, actions] = useToggle(one, theOther)
+const [value, actions] = useToggle(bool)
+const [value, actions] = useToggle(one, theOther)
 ```
 
 ### Parameters
@@ -50,6 +50,10 @@ It accepts one or two parameters:
 
 ```tsx
 export interface UseToggleReturnsActions<O, T> {
+  /**
+   * Toggle the state.
+   */
+  toggle(): void
   /**
    * Set the state to the left value.
    */
@@ -64,5 +68,5 @@ export interface UseToggleReturnsActions<O, T> {
   setState: ReactSetState<O | T>
 }
 
-export type UseToggleReturns<O, T> = [O | T, () => void, UseToggleReturnsActions<O, T>]
+export type UseToggleReturns<O, T> = [O | T, UseToggleReturnsActions<O, T>]
 ```
diff --git a/src/use-toggle/index.ts b/src/use-toggle/index.ts
@@ -8,6 +8,10 @@ import { unwrapArrayable } from '../utils/unwrap'
 import type { ReactSetState } from '../use-safe-state'
 
 export interface UseToggleReturnsActions<O, T> {
+  /**
+   * Toggle the state between the left and right values.
+   */
+  toggle(): void
   /**
    * Set the state to the left value.
    */
@@ -22,7 +26,7 @@ export interface UseToggleReturnsActions<O, T> {
   setState: ReactSetState<O | T>
 }
 
-export type UseToggleReturns<O, T> = readonly [O | T, () => void, UseToggleReturnsActions<O, T>]
+export type UseToggleReturns<O, T> = readonly [O | T, UseToggleReturnsActions<O, T>]
 
 /**
  * A React Hook that helps to manage a togglable state.
@@ -45,7 +49,7 @@ export function useToggle<O, T>(maybeTuple: O | T | readonly [one: O, theOther:
 
   const setLeft = useStableFn(() => setState(latest.current.one))
   const setRight = useStableFn(() => setState(latest.current.theOther))
-  const actions = useCreation(() => ({ setLeft, setRight, setState }))
+  const actions = useCreation(() => ({ setLeft, toggle, setRight, setState }))
 
-  return [state, toggle, actions] as const
+  return [state, actions] as const
 }
diff --git a/src/use-toggle/index_zh-cn.mdx b/src/use-toggle/index_zh-cn.mdx
@@ -34,8 +34,8 @@ import { Source } from '@/components'
 ## API \{#api}
 
 ```tsx
-const [value, toggle, actions] = useToggle(bool)
-const [value, toggle, actions] = useToggle(one, theOther)
+const [value, actions] = useToggle(bool)
+const [value, actions] = useToggle(one, theOther)
 ```
 
 ### 参数 Parameters \{#parameters}
@@ -50,6 +50,10 @@ const [value, toggle, actions] = useToggle(one, theOther)
 
 ```tsx
 export interface UseToggleReturnsActions<O, T> {
+  /**
+   * 切换状态。
+   */
+  toggle(): void
   /**
    * 设置状态为左值。
    */
@@ -64,5 +68,5 @@ export interface UseToggleReturnsActions<O, T> {
   setState: ReactSetState<O | T>
 }
 
-export type UseToggleReturns<O, T> = [O | T, () => void, UseToggleReturnsActions<O, T>]
+export type UseToggleReturns<O, T> = [O | T, UseToggleReturnsActions<O, T>]
 ```