updated the docs, props and methods

.github/workflows/publish.yml

@@ -21,6 +21,7 @@ jobs:
           check-latest: true
           registry-url: https://registry.npmjs.org/
       - run: yarn install --frozen-lockfile
+      - run: yarn test
       - run: git config --global user.name "tacos"
       - run: git config --global user.email "[email protected]"
       - run: yarn version --new-version ${{ github.event.release.tag_name }}

README.md

@@ -83,9 +83,27 @@ Function responsible for getting the focused component upon execution and if any
 ```ts
 import { blur } from 'react-native-focal'
 
-const onPress = () => {
-  blur()
-}
+blur()
+```
+
+#### `reset`
+
+Function responsible for retrieving the number of actual nodes in the focal object.
+
+```ts
+import { reset } from 'react-native-focal'
+
+reset()
+```
+
+#### `getByIndex`
+
+Function responsible for retrieving a certain node within the focal object via `index` if valid.
+
+```ts
+import { getByIndex } from 'react-native-focal'
+
+const { node, onBlur } = getByIndex(1)
 ```
 
 #### `getFocused`
@@ -98,21 +116,48 @@ import { getFocused } from 'react-native-focal'
 const { node, onBlur } = getFocused()
 ```
 
+#### `getFocusedId`
+
+Function responsible for getting the focused component's id.
+
+```ts
+import { getFocusedId } from 'react-native-focal'
+
+const privateId = getFocusedId()
+```
+
+#### `getLength`
+
+Function responsible for retrieving the number of actual nodes in the focal object.
+
+```ts
+import { getLength } from 'react-native-focal'
+
+const size = getLength()
+```
+
 ### Example
 
 ```tsx
 import { Container, Controller, blur } from 'react-native-focal'
 import { TextInput, Button } from 'react-native'
 
 const Screen = () => (
-  <Container>
+  <Container
+    onPress={() => {
+      Alert.alert('Pressed Outside')
+    }}
+  >
     {/* TextInput handled by the default `onBlur` */}
     <Controller>
       <TextInput />
     </Controller>
 
     {/* TextInput handled by the passed `onBlur` with a signal to not remove the node from the focus */}
     <Controller
+      onFocus={() => {
+        Alert.alert('Second Input Focused')
+      }}
       onBlur={(node) => {
         node.clear()
         return false
@@ -121,7 +166,7 @@ const Screen = () => (
       <TextInput />
     </Controller>
 
-    {/* Button handles blur onPress internally*/}
+    {/* Button handles blur onPress internally */}
     <Controller isFocusable={false}>
       <Button />
     </Controller>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-focal",
   "version": "0.1.1",
-  "description": "Humble kit to professionally handle components triggering one's focus and blurring others.",
+  "description": "Humble kit to professionally handle the focus/blur experience for controlled components.",
   "author": "yousseftarekkh",
   "license": "MIT",
   "repository": {

src/ref.ts

@@ -3,7 +3,6 @@ import unset from 'lodash.unset'
 import get from 'lodash.get'
 import set from 'lodash.set'
 import isFunction from 'lodash.isfunction'
-import uniqueId from 'lodash.uniqueid'
 
 type TComponent = {
   node: any
@@ -21,27 +20,9 @@ const focuses = createRef<
 >()
 export default focuses
 
-type TSubscribePayload = {
-  ref: React.MutableRefObject<any>
-  onBlur: any
-}
 /**
- * Function responsible for subscribing a component to the focuses.
+ * Method responsible for resetting the focal object ref to an empty object.
  */
-const subscribe = ({ ref, onBlur }: TSubscribePayload) => {
-  const id = uniqueId()
-  return {
-    subscriber: (node: any) => {
-      set(ref, 'current', node)
-      set(focuses, ['current', id], {
-        node,
-        onBlur
-      })
-    },
-    id
-  }
-}
-
 const reset = () => {
   set(focuses, ['current'], {})
 }
@@ -72,21 +53,20 @@ const getFocused = (): TComponent => {
 const getFocusedId = (): TComponent => {
   return get(focuses, ['current', 'focused'], {})
 }
+
+/**
+ * Method responsible for retrieving the number of actual nodes in the focal object.
+ */
 const getLength = () => {
   return Object.keys((focuses.current as any) || {}).length
 }
 
+/**
+ * Method responsible for retrieving a certain node within the focal object via index if valid.
+ */
 const getByIndex = (index: number) => {
   if (index >= getLength()) return null
   return Object.values((focuses.current as any) || {})[index]
 }
 
-export {
-  blur,
-  reset,
-  subscribe,
-  getByIndex,
-  getFocused,
-  getFocusedId,
-  getLength
-}
+export { blur, reset, getByIndex, getFocused, getFocusedId, getLength }