重新设计记录上下文

src/core/record.tsx

@@ -1,4 +1,5 @@
-import { createContext, useContext, useMemo } from "react";
+import { createContext, type ReactNode, useContext, useMemo } from "react";
+import { type Validator } from "./types";
 
 /**
  * 定义上下文记录结构
@@ -12,19 +13,163 @@ export type RecordContextValue<T extends object = object> = {
 /**
  * 声明通用的记录上下文，配合下面 Component 和 hook 管理数据:
  *
- * - RecordProvider 数据提供组件
+ * - RecordContextProvider 数据提供组件
- * - useRecord  根据位置获取最近的数据
+ * - useRecordContext  根据位置获取最近的数据
- * - useNamedRecord 获取指定名称的数据
+ *
+ * @internal
  */
 const RecordContext = createContext<RecordContextValue | null>(null);
 
-type RecordProviderProps<T extends object> = {
+/**
-  children: React.ReactNode;
+ * 获取最近的一个记录值
+ *
+ * @example
+ *
+ * 获取最近的记录值
+ *
+ * ```jsx
+ * <RecordContextProvider name="..." value={{ name: 'John', age: 30 }}>
+ *   {useRecordContext().name}
+ * </RecordContextProvider>
+ * ```
+ *
+ * @example
+ *
+ * 获取最近的记录值并验证
+ *
+ * ```jsx
+ * <RecordContextProvider name="..." value={{ name: 'John', age: 30 }}>
+ *   <RecordContextProvider name="..." value={{ email: 'Jane@example.com', phone: '1234567890' }}>
+ *     {useRecordContext((value) => 'email' in value).phone}
+ *   </RecordContextProvider>
+ * </RecordContextProvider>
+ * ```
+ *
+ * @example
+ *
+ * 根据名称获取记录值
+ *
+ * ```jsx
+ * <RecordContextProvider name="user.2" value={{ id: 2, name: 'John', age: 30 }}>
+ *   {useRecordContext('user.2').name}
+ * </RecordContextProvider>
+ * ```
+ */
+export function useRecordContext<T extends object = object>(): T | null;
+export function useRecordContext<T extends object = object>(name: string): T | null;
+export function useRecordContext<T extends object = object>(validator: Validator<object>): T | null;
+export function useRecordContext<T extends object = object>(name: string, validator: Validator<object>): T | null;
+export function useRecordContext<T extends object = object>(...args: unknown[]): T | null {
+  let name: string | undefined;
+  let validator: Validator<object> | undefined;
+
+  if (typeof args[0] === 'string') {
+    name = args[0];
+    if (typeof args[1] === 'function') {
+      validator = args[1] as Validator<object>;
+    }
+  } else if (typeof args[0] === 'function') {
+    validator = args[0] as Validator<object>;
+  }
+
+  let context = useContext(RecordContext);
+
+  if (!context) {
+    throw new Error("useRecordContext must be used within RecordContextProvider");
+  }
+
+  if (validator == null && name == null) {
+    return context.value as T;
+  }
+
+  return resolveRecord(context, c => {
+    return (name == null || c.name === name)
+      && (validator == null || validator(c.value));
+  })
+}
+
+function resolveRecord<T extends object = object>(
+  context: RecordContextValue,
+  validate: (ctx: RecordContextValue) => boolean,
+): T | null {
+  while (true) {
+    if (validate(context)) {
+      return context.value as T;
+    }
+    if (!context.parent) {
+      return null;
+    }
+    context = context.parent;
+  }
+}
+
+/**
+ * 记录值提供者属性
+ */
+export interface RecordProviderProps<T extends object> {
+  /**
+   * 子组件
+   *
+   * 必须提供一个值，否则毫无意义。
+   */
+  children: ReactNode;
+
+  /**
+   * 记录名称
+   *
+   * 配合 useRecordContext 获取指定名称的数据。
+   *
+   * @example
+   *
+   * ```jsx
+   * function UserName({ id }: { id: number }) {
+   *   const user = useRecordContext<User>(`user.${id}`);
+   *   return <div>{user.name}</div>
+   * }
+   *
+   * <RecordContextProvider name="user.1" value={{ id: 1, name: "John" }}>
+   *   <RecordContextProvider name="user.2" value={{ id: 2, name: "Jane" }}>
+   *     <p>
+   *       user name for id equal 2 is
+   *       <UserName id={2} />
+   *     </p>
+   *     <p>
+   *       user name for id equal 1 is
+   *       <UserName id={1} />
+   *     </p>
+   *   </RecordContextProvider>
+   * </RecordContextProvider>
+   * ```
+   */
   name: string;
+
+  /**
+   * 记录值
+   */
   value: T;
 };
 
-export function RecordProvider<T extends object>({
+/**
+ * 通过上下文实现跨组件传递记录值
+ *
+ * @example
+ *
+ * ```jsx
+ * <RecordContextProvider name="user.1" value={{ id: 1, name: "John" }}>
+ *   <RecordContextProvider name="user.2" value={{ id: 2, name: "Jane" }}>
+ *     <p>
+ *       user name for id equal 2 is
+ *       <UserName id={2} />
+ *     </p>
+ *     <p>
+ *       user name for id equal 1 is
+ *       <UserName id={1} />
+ *     </p>
+ *   </RecordContextProvider>
+ * </RecordContextProvider>
+ * ```
+ */
+export function RecordContextProvider<T extends object>({
   children,
   ...context
 }: RecordProviderProps<T>) {
@@ -36,48 +181,109 @@ export function RecordProvider<T extends object>({
     Object.values(context),
   ) as RecordContextValue;
 
-  return <RecordContext value={value}>{children}</RecordContext>;
+  return (
+    <RecordContext value={value}>
+      {children}
+    </RecordContext>
+  );
 }
 
-export function useRecord<T extends object = object>(
+/**
-  validate?: (value: unknown) => boolean,
+ * 可选记录提供器
-): T | null {
+ *
-  let context = useContext(RecordContext);
+ * 只有在定义了记录值的情况下，才用 RecordContextProvider 子元素，
-  if (!context) {
+ * 即允许组件在记录上下文之外正常运行。
-    throw new Error("useRecord must be used within RecordProvider");
+ *
-  }
+ * @example
-  if (validate == null) {
+ *
-    return context.value as T;
+ * ```jsx
-  }
+ * const RecordTitle = ({ record }) => (
-  while (true) {
+ *   <OptionalRecordProvider name="post.1" value={record}>
-    if (validate(context.value)) {
+ *     <TextField source="title" />
-      return context.value as T;
+ *   </OptionalRecordProvider>
-    }
+ * );
-    if (!context.parent) {
+ * ```
-      return null;
+ */
-    }
+export function OptionalRecordProvider<T extends object>({
-    context = context.parent;
+  children,
-  }
+  name,
+  value,
+}: Omit<RecordProviderProps<T>, 'value'> & {
+  value?: T | null | undefined;
+}) {
+  if (value != null) {
+    return (
+      <RecordContextProvider
+        name={name}
+        value={value}
+      >
+        {children}
+      </RecordContextProvider>
+    );
   }
 
-export function useNamedRecord<T extends object = object>(
+  return children;
-  name: string,
-  validate?: (value: unknown) => boolean,
-): T | null {
-  let context = useContext(RecordContext);
-  if (!context) {
-    throw new Error("useNamedRecord must be used within RecordProvider");
 }
-  while (true) {
+
-    if (context!.name === name) {
+export interface WithRecordProps<T extends object = object> {
-      if (validate && !validate(context.value)) {
+  /**
-        throw new Error("Invalid record value");
+   * 指定要查询的记录名称
+   *
+   * @type {string} 可选
+   */
+  name?: string;
+
+  /**
+   * 当记录存在时的渲染函数
+   *
+   * @param {T} record 找到的记录值
+   * @returns {ReactNode}
+   */
+  render: (record: T) => ReactNode;
+
+  /**
+   * 记录不存在或上下文不存在时渲染
+   *
+   * @param {boolean} hasContext 是否存在记录上下文
+   * @returns {ReactNode}
+   */
+  fallback?: ReactNode | ((hasContext: boolean) => ReactNode);
 }
-      return context!.value as T;
+
+/**
+ * 查询并渲染记录
+ *
+ * 内部自动使用 useRecordContext 的来完成记录查询，
+ * 实现快速渲染记录。
+ *
+ * @example
+ *
+ * ```jsx
+ * const BookShow = () => (
+ *    <Show>
+ *       <SimpleShowLayout>
+ *          <WithRecord render={record => <span>{record.title}</span>} />
+ *      </SimpleShowLayout>
+ *   </Show>
+ * );
+ * ```
+ */
+export function WithRecord<T extends object = object>({
+  name,
+  render,
+  fallback,
+}: WithRecordProps<T>) {
+  const context = useContext(RecordContext);
+  const record = context != null
+    ? resolveRecord<T>(context, c => name == null || c.name == name)
+    : null;
+
+  if (record == null) {
+    if (typeof fallback === 'function') {
+      return fallback(context != null);
     }
-    if (!context.parent) {
+    return fallback ?? null;
-      return null;
-    }
-    context = context!.parent;
   }
+
+  return <>{render(record)}</>
 }