@tamagui/use-controllable-state 1.0.1-beta.59 → 1.0.1-beta.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/use-controllable-state",
-  "version": "1.0.1-beta.59",
+  "version": "1.0.1-beta.60",
   "sideEffects": false,
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
@@ -8,6 +8,7 @@
   "module": "dist/esm",
   "module:jsx": "dist/jsx",
   "files": [
+    "src",
     "types",
     "dist"
   ],
@@ -25,7 +26,7 @@
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.59",
+    "@tamagui/build": "^1.0.1-beta.60",
     "react": "*",
     "react-dom": "*"
   },

package/src/index.ts

@@ -0,0 +1 @@
+export * from './useControllableState'

package/src/useControllableState.ts

@@ -0,0 +1,54 @@
+import { useCallbackRef } from '@radix-ui/react-use-callback-ref'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+
+// can configure to allow most-recent-wins or prop-wins
+// defaults to prop-wins
+
+export function useControllableState<T>({
+  prop,
+  defaultProp,
+  onChange,
+  strategy = 'prop-wins',
+}: {
+  prop?: T | undefined
+  defaultProp: T
+  onChange?: ((next: T) => void) | React.Dispatch<React.SetStateAction<T>>
+  strategy?: 'prop-wins' | 'most-recent-wins'
+}): [T, React.Dispatch<React.SetStateAction<T>>] {
+  const currentProp = useRef(prop)
+  const handleChange = useCallbackRef(onChange)
+  const [val, setVal] = useState(prop ?? defaultProp)
+  const propWins = strategy === 'prop-wins'
+
+  useEffect(() => {
+    currentProp.current = prop
+    setVal((prev) => getNextStateWithCallback(prev, prop, handleChange))
+  }, [prop])
+
+  return [
+    val,
+    useCallback(
+      (next: any) => {
+        if (propWins && currentProp.current !== undefined) {
+          return
+        }
+        setVal((prev) => {
+          return getNextStateWithCallback(
+            prev,
+            typeof next === 'function' ? next(prev) : next,
+            handleChange
+          )
+        })
+      },
+      [setVal, propWins]
+    ) as any,
+  ]
+}
+
+const getNextStateWithCallback = (prev: any, next: any, handleChange: any) => {
+  if (prev === next || next === undefined) {
+    return prev
+  }
+  handleChange(next)
+  return next
+}