編集履歴

質問編集履歴

記述したファイルに誤りがあり、修正

2021/12/15 00:23

投稿

hayatoganbaru

スコア7

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -34,330 +34,224 @@
 ```
+import { createContext, mergeRefs } from "@chakra-ui/react-utils"
+import { RefCallback, useRef, useState } from "react"
+import { DescendantsManager, DescendantOptions } from "./descendant"
-import { sortNodes, isElement, getNextIndex, getPrevIndex } from "./utils"
+import { useSafeLayoutEffect, cast } from "./utils"
-export type DescendantOptions<T = {}> = T & {
-  /**
+/**
+ * @internal
-   * If `true`, the item will be registered in all nodes map
+ * React hook that initializes the DescendantsManager
-   * but omitted from enabled nodes map
-   */
+ */
+function useDescendants<T extends HTMLElement = HTMLElement, K = {}>() {
-  disabled?: boolean
+  const descendants = useRef(new DescendantsManager<T, K>())
-  /**
-   * The id of the item
+  useSafeLayoutEffect(() => {
+    return () => descendants.current.destroy()
-   */
+  })
-  id?: string
+  return descendants.current
 }
+export interface UseDescendantsReturn
+  extends ReturnType<typeof useDescendants> {}
+/* -------------------------------------------------------------------------------------------------
+ * Descendants context to be used in component-land.
-export type Descendant<T, K> = DescendantOptions<K> & {
+  - Mount the `DescendantsContextProvider` at the root of the component
+  - Call `useDescendantsContext` anywhere you need access to the descendants information
+  NB:  I recommend using `createDescendantContext` below
+ * -----------------------------------------------------------------------------------------------*/
+const [
+  DescendantsContextProvider,
+  useDescendantsContext,
+] = createContext<UseDescendantsReturn>({
+  name: "DescendantsProvider",
+  errorMessage: "useDescendantsContext must be used within DescendantsProvider",
+})
-  /**
+/**
+ * @internal
+ * This hook provides information a descendant such as:
-   * DOM element of the item
+ * - Its index compared to other descendants
+ * - ref callback to register the descendant
+ * - Its enabled index compared to other enabled descendants
-   */
+ */
+function useDescendant<T extends HTMLElement = HTMLElement, K = {}>(
+  options?: DescendantOptions<K>,
+) {
+  const descendants = useDescendantsContext()
+  const [index, setIndex] = useState(-1)
+  const ref = useRef<T>(null)
+  useSafeLayoutEffect(() => {
+    return () => {
+      if (!ref.current) return
+      descendants.unregister(ref.current)
+    }
+  }, [])
+  useSafeLayoutEffect(() => {
+    if (!ref.current) return
+    const dataIndex = Number(ref.current.dataset.index)
+    if (index != dataIndex && !Number.isNaN(dataIndex)) {
+      setIndex(dataIndex)
+    }
+  })
+  const refCallback = options
+    ? cast<RefCallback<T>>(descendants.register(options))
+    : cast<RefCallback<T>>(descendants.register)
+  return {
+    descendants,
-  node: T
+    index,
-  /**
-   * index of item in all nodes map and enabled nodes map
+    enabledIndex: descendants.enabledIndexOf(ref.current),
-   */
-  index: number
+    register: mergeRefs(refCallback, ref),
+  }
 }
-/**
- * @internal
- *
- * Class to manage descendants and their relative indices in the DOM.
- * It uses `node.compareDocumentPosition(...)` under the hood
- */
-export class DescendantsManager<
-  T extends HTMLElement,
-  K extends Record<string, any> = {}
-> {
-  private descendants = new Map<T, Descendant<T, K>>()
-  register = (nodeOrOptions: T | null | DescendantOptions<K>) => {
-    if (nodeOrOptions == null) return
-    if (isElement(nodeOrOptions)) {
-      return this.registerNode(nodeOrOptions)
-    }
-    return (node: T | null) => {
-      this.registerNode(node, nodeOrOptions)
-    }
-  }
-  unregister = (node: T) => {
-    this.descendants.delete(node)
-    const sorted = sortNodes(Array.from(this.descendants.keys()))
-    this.assignIndex(sorted)
-  }
-  destroy = () => {
-    this.descendants.clear()
-  }
-  private assignIndex = (descendants: Node[]) => {
-    this.descendants.forEach((descendant) => {
-      const index = descendants.indexOf(descendant.node)
-      descendant.index = index
-      descendant.node.dataset.index = descendant.index.toString()
-    })
-  }
-  count = () => this.descendants.size
-  enabledCount = () => this.enabledValues().length
-  values = () => {
-    const values = Array.from(this.descendants.values())
-    return values.sort((a, b) => a.index - b.index)
-  }
-  enabledValues = () => {
-    return this.values().filter((descendant) => !descendant.disabled)
-  }
-  item = (index: number) => {
-    if (this.count() === 0) return undefined
-    return this.values()[index]
-  }
-  enabledItem = (index: number) => {
-    if (this.enabledCount() === 0) return undefined
-    return this.enabledValues()[index]
-  }
-  first = () => this.item(0)
-  firstEnabled = () => this.enabledItem(0)
-  last = () => this.item(this.descendants.size - 1)
-  lastEnabled = () => {
-    const lastIndex = this.enabledValues().length - 1
-    return this.enabledItem(lastIndex)
-  }
-  indexOf = (node: T | null) => {
-    if (!node) return -1
-    return this.descendants.get(node)?.index ?? -1
-  }
-  enabledIndexOf = (node: T | null) => {
-    if (node == null) return -1
-    return this.enabledValues().findIndex((i) => i.node.isSameNode(node))
-  }
-  next = (index: number, loop = true) => {
-    const next = getNextIndex(index, this.count(), loop)
-    return this.item(next)
-  }
-  nextEnabled = (index: number, loop = true) => {
-    const item = this.item(index)
-    if (!item) return
-    const enabledIndex = this.enabledIndexOf(item.node)
-    const nextEnabledIndex = getNextIndex(
-      enabledIndex,
-      this.enabledCount(),
-      loop,
-    )
-    return this.enabledItem(nextEnabledIndex)
-  }
-  prev = (index: number, loop = true) => {
-    const prev = getPrevIndex(index, this.count() - 1, loop)
-    return this.item(prev)
-  }
-  prevEnabled = (index: number, loop = true) => {
-    const item = this.item(index)
-    if (!item) return
-    const enabledIndex = this.enabledIndexOf(item.node)
-    const prevEnabledIndex = getPrevIndex(
-      enabledIndex,
-      this.enabledCount() - 1,
-      loop,
-    )
-    return this.enabledItem(prevEnabledIndex)
-  }
-  private registerNode = (node: T | null, options?: DescendantOptions<K>) => {
-    if (!node || this.descendants.has(node)) return
-    const keys = Array.from(this.descendants.keys()).concat(node)
-    const sorted = sortNodes(keys)
-    if (options?.disabled) {
-      options.disabled = !!options.disabled
-    }
-    const descendant = { node, index: -1, ...options }
-    this.descendants.set(node, descendant as Descendant<T, K>)
-    this.assignIndex(sorted)
-  }
+/* -------------------------------------------------------------------------------------------------
+ * Function that provides strongly typed versions of the context provider and hooks above.
+   To be used in component-land
+ * -----------------------------------------------------------------------------------------------*/
+export function createDescendantContext<
+  T extends HTMLElement = HTMLElement,
+  K = {}
+>() {
+  type ContextProviderType = React.Provider<DescendantsManager<T, K>>
+  const ContextProvider = cast<ContextProviderType>(DescendantsContextProvider)
+  const _useDescendantsContext = () =>
+    cast<DescendantsManager<T, K>>(useDescendantsContext())
+  const _useDescendant = (options?: DescendantOptions<K>) =>
+    useDescendant<T, K>(options)
+  const _useDescendants = () => useDescendants<T, K>()
+  return [
+    // context provider
+    ContextProvider,
+    // call this when you need to read from context
+    _useDescendantsContext,
+    // descendants state information, to be called and passed to `ContextProvider`
+    _useDescendants,
+    // descendant index information
+    _useDescendant,
+  ] as const
 }
 ```

`unregister`の記載場所と詳細

2021/12/15 00:23

投稿

hayatoganbaru

スコア7

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -13,3 +13,351 @@
 'unregister'なんて記述はした覚えが全くないので困っています。
 解決へのアプローチをお教え頂けないでしょうか？
+# `unregister`の記載場所と詳細
+node_modules/@chakra-ui/descendant/src/use-descendant.tsに記述があるとのことです。
+実際にそのファイルは以下のようになっております。
+エラー箇所のような記述を私は見つけることができませんでした。
+```
+import { sortNodes, isElement, getNextIndex, getPrevIndex } from "./utils"
+export type DescendantOptions<T = {}> = T & {
+  /**
+   * If `true`, the item will be registered in all nodes map
+   * but omitted from enabled nodes map
+   */
+  disabled?: boolean
+  /**
+   * The id of the item
+   */
+  id?: string
+}
+export type Descendant<T, K> = DescendantOptions<K> & {
+  /**
+   * DOM element of the item
+   */
+  node: T
+  /**
+   * index of item in all nodes map and enabled nodes map
+   */
+  index: number
+}
+/**
+ * @internal
+ *
+ * Class to manage descendants and their relative indices in the DOM.
+ * It uses `node.compareDocumentPosition(...)` under the hood
+ */
+export class DescendantsManager<
+  T extends HTMLElement,
+  K extends Record<string, any> = {}
+> {
+  private descendants = new Map<T, Descendant<T, K>>()
+  register = (nodeOrOptions: T | null | DescendantOptions<K>) => {
+    if (nodeOrOptions == null) return
+    if (isElement(nodeOrOptions)) {
+      return this.registerNode(nodeOrOptions)
+    }
+    return (node: T | null) => {
+      this.registerNode(node, nodeOrOptions)
+    }
+  }
+  unregister = (node: T) => {
+    this.descendants.delete(node)
+    const sorted = sortNodes(Array.from(this.descendants.keys()))
+    this.assignIndex(sorted)
+  }
+  destroy = () => {
+    this.descendants.clear()
+  }
+  private assignIndex = (descendants: Node[]) => {
+    this.descendants.forEach((descendant) => {
+      const index = descendants.indexOf(descendant.node)
+      descendant.index = index
+      descendant.node.dataset.index = descendant.index.toString()
+    })
+  }
+  count = () => this.descendants.size
+  enabledCount = () => this.enabledValues().length
+  values = () => {
+    const values = Array.from(this.descendants.values())
+    return values.sort((a, b) => a.index - b.index)
+  }
+  enabledValues = () => {
+    return this.values().filter((descendant) => !descendant.disabled)
+  }
+  item = (index: number) => {
+    if (this.count() === 0) return undefined
+    return this.values()[index]
+  }
+  enabledItem = (index: number) => {
+    if (this.enabledCount() === 0) return undefined
+    return this.enabledValues()[index]
+  }
+  first = () => this.item(0)
+  firstEnabled = () => this.enabledItem(0)
+  last = () => this.item(this.descendants.size - 1)
+  lastEnabled = () => {
+    const lastIndex = this.enabledValues().length - 1
+    return this.enabledItem(lastIndex)
+  }
+  indexOf = (node: T | null) => {
+    if (!node) return -1
+    return this.descendants.get(node)?.index ?? -1
+  }
+  enabledIndexOf = (node: T | null) => {
+    if (node == null) return -1
+    return this.enabledValues().findIndex((i) => i.node.isSameNode(node))
+  }
+  next = (index: number, loop = true) => {
+    const next = getNextIndex(index, this.count(), loop)
+    return this.item(next)
+  }
+  nextEnabled = (index: number, loop = true) => {
+    const item = this.item(index)
+    if (!item) return
+    const enabledIndex = this.enabledIndexOf(item.node)
+    const nextEnabledIndex = getNextIndex(
+      enabledIndex,
+      this.enabledCount(),
+      loop,
+    )
+    return this.enabledItem(nextEnabledIndex)
+  }
+  prev = (index: number, loop = true) => {
+    const prev = getPrevIndex(index, this.count() - 1, loop)
+    return this.item(prev)
+  }
+  prevEnabled = (index: number, loop = true) => {
+    const item = this.item(index)
+    if (!item) return
+    const enabledIndex = this.enabledIndexOf(item.node)
+    const prevEnabledIndex = getPrevIndex(
+      enabledIndex,
+      this.enabledCount() - 1,
+      loop,
+    )
+    return this.enabledItem(prevEnabledIndex)
+  }
+  private registerNode = (node: T | null, options?: DescendantOptions<K>) => {
+    if (!node || this.descendants.has(node)) return
+    const keys = Array.from(this.descendants.keys()).concat(node)
+    const sorted = sortNodes(keys)
+    if (options?.disabled) {
+      options.disabled = !!options.disabled
+    }
+    const descendant = { node, index: -1, ...options }
+    this.descendants.set(node, descendant as Descendant<T, K>)
+    this.assignIndex(sorted)
+  }
+}
+```