overleaf/services/web/frontend/js/shared/hooks/use-scope-value-setter-only.ts
Alf Eaton 309742c37b Merge pull request #8103 from overleaf/ae-state-hooks-types
Add types to scope state hooks

GitOrigin-RevId: 61f903120b84a1770b1047953deb3a76ccfc50f0
2022-05-25 08:11:00 +00:00

38 lines
1.1 KiB
TypeScript

import {
type Dispatch,
type SetStateAction,
useCallback,
useState,
} from 'react'
import { useIdeContext } from '../context/ide-context'
import _ from 'lodash'
/**
* Similar to `useScopeValue`, but instead of creating a two-way binding, only
* changes in react-> angular direction are propagated, with `value` remaining
* local and independent of its value in the Angular scope.
*
* The interface is compatible with React.useState(), including
* the option of passing a function to the setter.
*/
export default function useScopeValueSetterOnly<T = any>(
path: string, // dot '.' path of a property in the Angular scope.
defaultValue?: T
): [T, Dispatch<SetStateAction<T>>] {
const { $scope } = useIdeContext()
const [value, setValue] = useState<T>(defaultValue)
const scopeSetter = useCallback(
(newValue: SetStateAction<T>) => {
setValue(val => {
const actualNewValue = _.isFunction(newValue) ? newValue(val) : newValue
$scope.$applyAsync(() => _.set($scope, path, actualNewValue))
return actualNewValue
})
},
[path, $scope]
)
return [value, scopeSetter]
}