feat(react-tinacms-inline): add useFieldRef hook

packages/@tinacms/rbie/src/hooks/use-field-ref.ts

@@ -0,0 +1,66 @@
+import * as React from 'react'
+import { useCMS } from 'tinacms'
+
+export const useFieldRef = (formId: string, fieldName: string) => {
+ const [node, setNode] = React.useState(null) as any
+
+ const cms = useCMS() // this is one instance where we need an "anywhere event bus" https://github.com/tinacms/rfcs/blob/ddb360eec21f91f1331ee18f49fc64cc4a69a2e7/0013-tina-anywhere.md#event-bus-as-the-primary-thing-doer
+
+ const handleClick = React.useCallback(
+ (e: React.MouseEvent<any>) => {
+ e.preventDefault()
+ e.stopPropagation()
+ cms.events.dispatch({
+ type: `form:${formId}:fields:${fieldName}:focus`,
+ form: formId,
+ field: fieldName,
+ })
+ },
+ [cms.events, formId, fieldName]
+ )
+
+ const handleHoverStart = React.useCallback(
+ (e: React.MouseEvent<any>) => {
+ e.preventDefault()
+ e.stopPropagation()
+ cms.events.dispatch({
+ type: `form:${formId}:fields:${fieldName}:attentionStart`,
+ form: formId,
+ field: fieldName,
+ })
+ },
+ [cms.events, formId, fieldName]
+ )
+
+ const handleHoverEnd = React.useCallback(
+ (e: React.MouseEvent<any>) => {
+ e.preventDefault()
+ e.stopPropagation()
+ cms.events.dispatch({
+ type: `form:${formId}:fields:${fieldName}:attentionEnd`,
+ form: formId,
+ field: fieldName,
+ })
+ },
+ [cms.events, formId, fieldName]
+ )
+
+ React.useEffect(() => {
+ if (!node) return
+
+ if (cms.enabled) {
+ node.addEventListener('click', handleClick)
+ node.addEventListener('mouseover', handleHoverStart)
+ node.addEventListener('mouseout', handleHoverEnd)
+ }
+ return () => {
+ node.removeEventListener('click', handleClick)
+ node.removeEventListener('mouseover', handleHoverStart)
+ node.removeEventListener('mouseout', handleHoverEnd)
+ }
+ }, [node, cms.enabled, handleClick, handleHoverStart, handleHoverEnd])
+
+ return React.useCallback((newNode: HTMLElement | null) => {
+ setNode(newNode)
+ }, [])
+}