@nocobase/client-v2 2.1.0-beta.37 → 2.1.0-beta.38

package/src/flow/utils/__tests__/dateTimeFormat.test.ts

@@ -0,0 +1,91 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { describe, expect, it, vi } from 'vitest';
+import { dateTimeFormat } from '../../actions/dateTimeFormat';
+
+describe('dateTimeFormat', () => {
+  it('only shows the time format schema for interface time fields', () => {
+    const ctx = {
+      model: {
+        context: {
+          collectionField: {
+            type: 'string',
+            interface: 'time',
+          },
+        },
+      },
+    };
+
+    expect(Object.keys(dateTimeFormat.uiSchema(ctx))).toEqual(['timeFormat']);
+  });
+
+  it('treats interface time fields as time fields', () => {
+    const setProps = vi.fn();
+    const ctx = {
+      model: {
+        context: {
+          collectionField: {
+            type: 'string',
+            interface: 'time',
+          },
+        },
+        setProps,
+      },
+    };
+
+    dateTimeFormat.handler(ctx, { timeFormat: 'hh:mm:ss a' });
+
+    expect(setProps).toHaveBeenCalledWith({
+      timeFormat: 'hh:mm:ss a',
+      format: 'hh:mm:ss a',
+    });
+  });
+
+  it('uses format as the default time format when timeFormat is missing', () => {
+    const ctx = {
+      model: {
+        props: {},
+        context: {
+          collectionField: {
+            interface: 'time',
+            getComponentProps: () => ({
+              format: 'hh:mm:ss a',
+            }),
+          },
+        },
+      },
+    };
+
+    expect(dateTimeFormat.defaultParams(ctx)).toMatchObject({
+      timeFormat: 'hh:mm:ss a',
+    });
+  });
+
+  it('does not use datetime format as the default time format for non-time fields', () => {
+    const ctx = {
+      model: {
+        props: {},
+        context: {
+          collectionField: {
+            type: 'datetime',
+            interface: 'datetime',
+            getComponentProps: () => ({
+              format: 'YYYY-MM-DD hh:mm:ss a',
+            }),
+          },
+        },
+      },
+    };
+
+    expect(dateTimeFormat.defaultParams(ctx)).toMatchObject({
+      timeFormat: 'HH:mm:ss',
+    });
+  });
+});

package/src/index.ts

@@ -26,6 +26,7 @@ export * from './WebSocketClient';
 export * from './RouterManager';
 export * from './PluginManager';
 export * from './PluginSettingsManager';
+export * from './layout-manager';
 export * from './hooks';
 export { default as languageCodes } from './locale/languageCodes';
 export * from './nocobase-buildin-plugin';

package/src/layout-manager/LayoutContentRoute.tsx

@@ -0,0 +1,90 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { type FlowEngine, useFlowEngine } from '@nocobase/flow-engine';
+import React, { useEffect, useMemo, useRef } from 'react';
+import { useLocation, useMatches } from 'react-router-dom';
+import { AppNotFound } from '../components';
+import { getLayoutModel, type BaseLayoutModel, type LayoutRouteLike } from '../flow/admin-shell/BaseLayoutModel';
+import FlowRoute from '../flow/components/FlowRoute';
+import { useApp } from '../hooks/useApp';
+
+export interface LayoutContentRouteProps {
+  layoutRouteName: string;
+}
+
+const getRefCurrent = <T,>(ref: React.MutableRefObject<T>) => ref.current;
+
+export const LayoutContentRoute = (props: LayoutContentRouteProps) => {
+  const { layoutRouteName } = props;
+  const app = useApp();
+  const flowEngine = useFlowEngine();
+  const layout = app.layoutManager.getLayout(layoutRouteName);
+  const location = useLocation();
+  const matches = useMatches();
+  const model = getLayoutModel<BaseLayoutModel>(flowEngine, layout.uid, { required: true });
+  const legacyPageBehavior = layout.routeName === 'admin' ? 'redirect' : 'notFound';
+  const syncVersionRef = useRef(0);
+  const routeLike = useMemo<LayoutRouteLike>(() => {
+    const lastMatch = matches[matches.length - 1];
+    const layoutMatch = matches.find((match) => match.id === layout.routeName);
+    return {
+      id: lastMatch?.id,
+      name: lastMatch?.id,
+      pathname: location.pathname,
+      params: (lastMatch?.params || {}) as Record<string, string | undefined>,
+      layoutRouteName: layout.routeName,
+      layoutBasePathname: layoutMatch?.pathname,
+    };
+  }, [layout.routeName, location.pathname, matches]);
+  if (!model) {
+    throw new Error(`[NocoBase] Layout '${layout.routeName}' model '${layout.uid}' is not mounted.`);
+  }
+
+  const layoutRoute = model.resolveLayoutRoute(routeLike);
+  const getCurrentLayoutModel = useMemo(
+    () => (flowEngine: FlowEngine) => getLayoutModel<BaseLayoutModel>(flowEngine, layout.uid, { required: true }),
+    [layout.uid],
+  );
+
+  useEffect(() => {
+    const syncVersion = ++syncVersionRef.current;
+    model.syncLayoutRoute(routeLike);
+    return () => {
+      Promise.resolve()
+        .then(() => {
+          if (getRefCurrent(syncVersionRef) !== syncVersion) {
+            return;
+          }
+          model.clearLayoutRoute(routeLike);
+        })
+        .catch(() => {
+          // ignore
+        });
+    };
+  }, [model, routeLike]);
+
+  if (layoutRoute.type === 'root') {
+    return null;
+  }
+
+  if (layoutRoute.type === 'notFound') {
+    return <AppNotFound />;
+  }
+
+  return (
+    <FlowRoute
+      pageUid={layoutRoute.pageUid}
+      getLayoutModel={getCurrentLayoutModel}
+      legacyPageBehavior={legacyPageBehavior}
+    />
+  );
+};
+
+export default LayoutContentRoute;

package/src/layout-manager/LayoutManager.tsx

@@ -0,0 +1,185 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import React from 'react';
+import type { BaseApplication } from '../BaseApplication';
+import { LayoutContentRoute } from './LayoutContentRoute';
+import { LayoutRoute } from './LayoutRoute';
+import type { LayoutDefinition, LayoutRegisterOptions } from './types';
+import {
+  getLayoutPageRouteName,
+  getLayoutPageTabRouteName,
+  getLayoutPageTabViewRouteName,
+  getLayoutPageViewRouteName,
+} from './utils';
+
+const DEFAULT_ROOT_PAGE_MODEL_CLASS = 'RootPageModel';
+const DEFAULT_CHILD_PAGE_MODEL_CLASS = 'ChildPageModel';
+
+const assertNonEmptyString = (value: unknown, fieldName: string) => {
+  if (typeof value !== 'string' || value.trim() === '') {
+    throw new Error(`[NocoBase] layoutManager.registerLayout() requires '${fieldName}' to be a non-empty string.`);
+  }
+};
+
+const assertString = (value: unknown, fieldName: string) => {
+  if (typeof value !== 'string') {
+    throw new Error(`[NocoBase] layoutManager.registerLayout() requires '${fieldName}' to be a string.`);
+  }
+};
+
+const assertOptionalNonEmptyString = (value: unknown, fieldName: string) => {
+  if (value !== undefined) {
+    assertNonEmptyString(value, fieldName);
+  }
+};
+
+const assertOptionalBoolean = (value: unknown, fieldName: string) => {
+  if (value !== undefined && typeof value !== 'boolean') {
+    throw new Error(`[NocoBase] layoutManager.registerLayout() requires '${fieldName}' to be a boolean.`);
+  }
+};
+
+function assertValidRouteName(routeName: string) {
+  if (routeName.includes('..') || routeName.startsWith('.') || routeName.endsWith('.')) {
+    throw new Error(`[NocoBase] layoutManager.registerLayout() received invalid routeName '${routeName}'.`);
+  }
+}
+
+export function normalizeLayoutRoutePath(routeName: string, routePath: string) {
+  const trimmed = routePath.trim();
+  const isNestedRoute = routeName.includes('.');
+  if (isNestedRoute && trimmed.startsWith('/')) {
+    throw new Error(`[NocoBase] nested layout routePath '${routePath}' must be relative.`);
+  }
+
+  const normalized = isNestedRoute
+    ? trimmed.replace(/^\/+/, '').replace(/\/+$/, '')
+    : `/${trimmed.replace(/^\/+/, '').replace(/\/+$/, '')}`;
+
+  if (!isNestedRoute && (!normalized || normalized === '/')) {
+    throw new Error(`[NocoBase] layoutManager.registerLayout() does not support root routePath '/'.`);
+  }
+
+  if (normalized.includes('*')) {
+    throw new Error(`[NocoBase] layoutManager.registerLayout() does not support wildcard routePath '${routePath}'.`);
+  }
+
+  return normalized;
+}
+
+function normalizeLayoutDefinition(options: LayoutRegisterOptions): LayoutDefinition {
+  assertNonEmptyString(options.routeName, 'routeName');
+  assertString(options.routePath, 'routePath');
+  assertNonEmptyString(options.uid, 'uid');
+  assertNonEmptyString(options.layoutModelClass, 'layoutModelClass');
+  assertOptionalNonEmptyString(options.rootPageModelClass, 'rootPageModelClass');
+  assertOptionalNonEmptyString(options.childPageModelClass, 'childPageModelClass');
+  assertOptionalBoolean(options.authCheck, 'authCheck');
+  assertValidRouteName(options.routeName);
+
+  const routePath = normalizeLayoutRoutePath(options.routeName, options.routePath);
+
+  return {
+    routeName: options.routeName,
+    rootRouteName: options.routeName.split('.')[0],
+    routePath,
+    uid: options.uid,
+    layoutModelClass: options.layoutModelClass,
+    rootPageModelClass: options.rootPageModelClass || DEFAULT_ROOT_PAGE_MODEL_CLASS,
+    childPageModelClass: options.childPageModelClass || DEFAULT_CHILD_PAGE_MODEL_CLASS,
+    authCheck: options.authCheck ?? true,
+  };
+}
+
+export class LayoutManager<TApp extends BaseApplication<any> = BaseApplication<any>> {
+  private readonly app: TApp;
+  private readonly layouts = new Map<string, LayoutDefinition>();
+  private readonly uidIndex = new Map<string, string>();
+
+  constructor(app: TApp) {
+    this.app = app;
+  }
+
+  registerLayout(options: LayoutRegisterOptions) {
+    const layout = normalizeLayoutDefinition(options);
+
+    if (this.layouts.has(layout.routeName)) {
+      throw new Error(`[NocoBase] Layout '${layout.routeName}' has already been registered.`);
+    }
+
+    const existingUidName = this.uidIndex.get(layout.uid);
+    if (existingUidName) {
+      throw new Error(`[NocoBase] Layout uid '${layout.uid}' has already been registered by '${existingUidName}'.`);
+    }
+
+    this.layouts.set(layout.routeName, layout);
+    this.uidIndex.set(layout.uid, layout.routeName);
+    this.addStandardRoutes(layout);
+
+    return layout;
+  }
+
+  getLayout(routeName: string) {
+    const layout = this.layouts.get(routeName);
+    if (!layout) {
+      throw new Error(`[NocoBase] Layout '${routeName}' is not registered.`);
+    }
+    return layout;
+  }
+
+  hasLayout(routeName: string) {
+    return this.layouts.has(routeName);
+  }
+
+  listLayouts() {
+    return Array.from(this.layouts.values());
+  }
+
+  private addStandardRoutes(layout: LayoutDefinition) {
+    const routeBaseName = layout.routeName;
+    const authCheck = layout.authCheck;
+    const skipAuthCheck = authCheck === false;
+
+    this.app.router.add(routeBaseName, {
+      path: layout.routePath,
+      authCheck,
+      skipAuthCheck,
+      element: <LayoutRoute layoutRouteName={layout.routeName} />,
+    });
+
+    this.app.router.add(getLayoutPageRouteName(routeBaseName), {
+      path: ':name',
+      authCheck,
+      skipAuthCheck,
+      element: <LayoutContentRoute layoutRouteName={layout.routeName} />,
+    });
+
+    this.app.router.add(getLayoutPageTabRouteName(routeBaseName), {
+      path: ':name/tab/:tabUid',
+      authCheck,
+      skipAuthCheck,
+      element: <LayoutContentRoute layoutRouteName={layout.routeName} />,
+    });
+
+    this.app.router.add(getLayoutPageViewRouteName(routeBaseName), {
+      path: ':name/view/*',
+      authCheck,
+      skipAuthCheck,
+      element: <LayoutContentRoute layoutRouteName={layout.routeName} />,
+    });
+
+    this.app.router.add(getLayoutPageTabViewRouteName(routeBaseName), {
+      path: ':name/tab/:tabUid/view/*',
+      authCheck,
+      skipAuthCheck,
+      element: <LayoutContentRoute layoutRouteName={layout.routeName} />,
+    });
+  }
+}

package/src/layout-manager/LayoutRoute.tsx

@@ -0,0 +1,138 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { FlowEngine, FlowModel, FlowModelRenderer, isInheritedFrom, useFlowEngine } from '@nocobase/flow-engine';
+import type { ModelConstructor } from '@nocobase/flow-engine';
+import { useRequest } from 'ahooks';
+import React, { useEffect, useMemo, useRef } from 'react';
+import { useLocation, useMatches } from 'react-router-dom';
+import { SkeletonFallback } from '../flow/components/SkeletonFallback';
+import { useApp } from '../hooks/useApp';
+import { BaseLayoutModel } from '../flow/admin-shell/BaseLayoutModel';
+import type { LayoutDefinition } from './types';
+
+export interface LayoutRouteProps {
+  layoutRouteName: string;
+}
+
+const getRefCurrent = <T,>(ref: React.MutableRefObject<T>) => ref.current;
+
+function isBaseLayoutModelClass(ModelClass: ModelConstructor) {
+  return ModelClass === BaseLayoutModel || isInheritedFrom(ModelClass, BaseLayoutModel as ModelConstructor);
+}
+
+function assertLayoutModelInstance(model: FlowModel, layout: LayoutDefinition) {
+  if (!(model instanceof BaseLayoutModel)) {
+    throw new Error(
+      `[NocoBase] Layout '${layout.routeName}' requires model '${layout.uid}' to be an instance of BaseLayoutModel.`,
+    );
+  }
+}
+
+async function assertLayoutModelClass(flowEngine: FlowEngine, layout: LayoutDefinition) {
+  const ModelClass = await flowEngine.getModelClassAsync(layout.layoutModelClass);
+
+  if (!ModelClass) {
+    throw new Error(
+      `[NocoBase] Layout '${layout.routeName}' model class '${layout.layoutModelClass}' is not registered.`,
+    );
+  }
+
+  if (!isBaseLayoutModelClass(ModelClass)) {
+    throw new Error(
+      `[NocoBase] Layout '${layout.routeName}' model class '${layout.layoutModelClass}' must extend BaseLayoutModel.`,
+    );
+  }
+}
+
+export const LayoutRoute = (props: LayoutRouteProps) => {
+  const { layoutRouteName } = props;
+  const app = useApp();
+  const flowEngine = useFlowEngine();
+  const layout = app.layoutManager.getLayout(layoutRouteName);
+  const location = useLocation();
+  const matches = useMatches();
+  const lastMatch = matches[matches.length - 1];
+  const layoutMatch = matches.find((match) => match.id === layout.routeName);
+  const lastMatchParamsSignature = JSON.stringify(lastMatch?.params || {});
+  const lastMatchParams = useMemo(
+    () => JSON.parse(lastMatchParamsSignature) as Record<string, string | undefined>,
+    [lastMatchParamsSignature],
+  );
+  const syncVersionRef = useRef(0);
+  const routeLike = useMemo(() => {
+    return {
+      id: lastMatch?.id,
+      name: lastMatch?.id,
+      pathname: location.pathname,
+      params: lastMatchParams,
+      layoutRouteName: layout.routeName,
+      layoutBasePathname: layoutMatch?.pathname,
+    };
+  }, [lastMatch?.id, lastMatchParams, layout.routeName, layoutMatch?.pathname, location.pathname]);
+  const { loading, data, error } = useRequest(
+    async () => {
+      const existingModel = flowEngine.getModel<BaseLayoutModel>(layout.uid);
+
+      if (existingModel) {
+        assertLayoutModelInstance(existingModel, layout);
+        existingModel.setProps({ layout });
+        return existingModel;
+      }
+
+      await assertLayoutModelClass(flowEngine, layout);
+
+      const model = await flowEngine.createModelAsync<BaseLayoutModel>({
+        uid: layout.uid,
+        use: layout.layoutModelClass,
+        props: {
+          layout,
+        },
+      });
+      assertLayoutModelInstance(model, layout);
+      return model;
+    },
+    {
+      refreshDeps: [flowEngine, layout],
+    },
+  );
+
+  useEffect(() => {
+    if (!data) {
+      return;
+    }
+
+    const syncVersion = ++syncVersionRef.current;
+    data.syncLayoutRoute(routeLike);
+    return () => {
+      Promise.resolve()
+        .then(() => {
+          if (getRefCurrent(syncVersionRef) !== syncVersion) {
+            return;
+          }
+          data.clearLayoutRoute(routeLike);
+        })
+        .catch(() => {
+          // ignore
+        });
+    };
+  }, [data, routeLike]);
+
+  if (error) {
+    throw error;
+  }
+
+  if (loading || !data) {
+    return <SkeletonFallback style={{ margin: 16 }} />;
+  }
+
+  return <FlowModelRenderer model={data} />;
+};
+
+export default LayoutRoute;