@nocobase/client-v2 2.2.0-alpha.2 → 2.2.0-alpha.4

package/src/flow/models/blocks/form/value-runtime/runtime.ts

@@ -38,6 +38,11 @@ type FormBlockModel = FlowModel & {
   getAclActionName?: () => string;
 };
 
+export type FormValuePatch = {
+  path: NamePath;
+  value: unknown;
+};
+
 export class FormValueRuntime {
   private readonly model: FormBlockModel;
   private readonly getForm: () => FormInstance;
@@ -142,6 +147,49 @@ export class FormValueRuntime {
     return this.getForm().getFieldsValue(true);
   }
 
+  getUserEditedValuePatches(): FormValuePatch[] {
+    const snapshot = this.getFormValuesSnapshot();
+    if (!snapshot || typeof snapshot !== 'object') {
+      return [];
+    }
+
+    const patches: FormValuePatch[] = [];
+    const pathKeys = Array.from(this.userEditedSet).sort(
+      (a, b) => pathKeyToNamePath(a).length - pathKeyToNamePath(b).length,
+    );
+
+    for (const pathKey of pathKeys) {
+      if (!this.isCurrentUserEditedPath(pathKey)) {
+        continue;
+      }
+
+      const namePath = pathKeyToNamePath(pathKey);
+      if (!namePath.length || !_.has(snapshot, namePath as any)) {
+        continue;
+      }
+
+      const value = _.get(snapshot, namePath as any);
+      if (typeof value === 'undefined') {
+        continue;
+      }
+
+      patches.push({
+        path: namePath,
+        value: this.omitNonUserDescendantValues(pathKey, this.toMirrorSnapshot(value)),
+      });
+    }
+
+    return patches;
+  }
+
+  getUserEditedValuesSnapshot(): Record<string, unknown> {
+    const values: Record<string, unknown> = {};
+    for (const patch of this.getUserEditedValuePatches()) {
+      _.set(values, patch.path as any, patch.value);
+    }
+    return values;
+  }
+
   private toMirrorSnapshot(value: any) {
     const raw = isObservable(value) ? toJS(value) : value;
     return _.cloneDeepWith(raw, (item) => {
@@ -1453,6 +1501,49 @@ export class FormValueRuntime {
     return null;
   }
 
+  private findLatestWriteMeta(pathKey: string): FormValueWriteMeta | undefined {
+    let latest: FormValueWriteMeta | undefined;
+    const namePath = pathKeyToNamePath(pathKey);
+    const prefix: NamePath = [];
+
+    for (let i = 0; i < namePath.length; i++) {
+      prefix.push(namePath[i]);
+      const meta = this.lastWriteMetaByPathKey.get(namePathToPathKey(prefix as any));
+      if (!meta) {
+        continue;
+      }
+      if (!latest || meta.writeSeq >= latest.writeSeq) {
+        latest = meta;
+      }
+    }
+
+    return latest;
+  }
+
+  private isCurrentUserEditedPath(pathKey: string) {
+    const lastWrite = this.findLatestWriteMeta(pathKey);
+    return !lastWrite || lastWrite.source === 'user';
+  }
+
+  private omitNonUserDescendantValues(pathKey: string, value: unknown) {
+    if (!value || typeof value !== 'object') {
+      return value;
+    }
+
+    const namePath = pathKeyToNamePath(pathKey);
+    for (const childKey of this.lastWriteMetaByPathKey.keys()) {
+      if (!this.isDescendantPathKey(childKey, pathKey)) {
+        continue;
+      }
+      if (this.isCurrentUserEditedPath(childKey)) {
+        continue;
+      }
+      _.unset(value as Record<string, unknown>, pathKeyToNamePath(childKey).slice(namePath.length) as any);
+    }
+
+    return value;
+  }
+
   private isDescendantPathKey(candidateKey: string, parentKey: string) {
     if (!candidateKey || !parentKey || candidateKey === parentKey) return false;
     const candidatePath = pathKeyToNamePath(candidateKey);

package/src/flow/models/blocks/js-block/JSBlock.tsx

@@ -16,24 +16,238 @@ import { CodeEditor } from '../../../components/code-editor';
 
 const NAMESPACE = 'client';
 
+const getRootElement = (element: HTMLElement | null) => {
+  if (!element) return document.documentElement;
+  return (
+    (element.closest('.nb-block-grid') as HTMLElement | null) ||
+    (element.closest('.nb-page-wrapper') as HTMLElement | null) ||
+    (element.closest('.nb-page') as HTMLElement | null) ||
+    document.documentElement
+  );
+};
+
+const getOuterHeight = (element?: HTMLElement | null) => {
+  if (!element) return 0;
+  const rect = element.getBoundingClientRect();
+  const style = window.getComputedStyle(element);
+  const marginTop = parseFloat(style.marginTop) || 0;
+  const marginBottom = parseFloat(style.marginBottom) || 0;
+  return rect.height + marginTop + marginBottom;
+};
+
+const getPadding = (element: HTMLElement | null) => {
+  if (!element || element === document.documentElement) {
+    return { top: 0, bottom: 0 };
+  }
+  const style = window.getComputedStyle(element);
+  return {
+    top: parseFloat(style.paddingTop) || 0,
+    bottom: parseFloat(style.paddingBottom) || 0,
+  };
+};
+
+const getPageHeader = (root: HTMLElement) => {
+  const page = root.closest('.nb-page') as HTMLElement | null;
+  if (!page) return null;
+  return (
+    (page.querySelector('.ant-page-header') as HTMLElement | null) ||
+    (page.querySelector('.pageHeaderCss') as HTMLElement | null)
+  );
+};
+
+const getAddBlockContainer = (root: HTMLElement) => {
+  const button = root.querySelector('[data-flow-add-block]') as HTMLElement | null;
+  if (!button) return null;
+  return (button.parentElement as HTMLElement | null) || button;
+};
+
+function getValidPageTop(a: number, b: number) {
+  const aValid = a > 0;
+  const bValid = b > 0;
+
+  if (aValid) return a;
+  if (bValid) return b;
+  return 0;
+}
+
+const usePlainHostHeight = ({
+  height,
+  heightMode,
+  hostRef,
+  marginBlock,
+}: {
+  height?: number;
+  heightMode?: string;
+  hostRef: React.RefObject<HTMLDivElement>;
+  marginBlock: number;
+}) => {
+  const [fullHeight, setFullHeight] = React.useState<number>();
+  const updateFullHeight = React.useCallback(() => {
+    if (heightMode !== 'fullHeight' || typeof window === 'undefined') {
+      setFullHeight((prev) => (prev === undefined ? prev : undefined));
+      return;
+    }
+    const hostEl = hostRef.current;
+    if (!hostEl) return;
+    const root = getRootElement(hostEl);
+    const hostRect = hostEl.getBoundingClientRect();
+    const rootRect = root === document.documentElement ? { top: 0 } : root.getBoundingClientRect();
+    const padding = getPadding(root);
+    const addBlockContainer = getAddBlockContainer(root);
+    const pageTop = rootRect.top + padding.top;
+    const topOffset = Math.max(0, hostRect.top - pageTop);
+    let bottomOffset = padding.bottom + marginBlock;
+    if (addBlockContainer) {
+      const gapBetween = marginBlock;
+      bottomOffset = gapBetween + getOuterHeight(addBlockContainer) + padding.bottom;
+    }
+    const nextHeight = Math.max(
+      0,
+      Math.floor(window.innerHeight - getValidPageTop(pageTop, 110) - topOffset - bottomOffset - 1),
+    );
+    setFullHeight((prev) => (prev === nextHeight ? prev : nextHeight));
+  }, [heightMode, hostRef, marginBlock]);
+
+  React.useLayoutEffect(() => {
+    updateFullHeight();
+  }, [updateFullHeight]);
+
+  React.useEffect(() => {
+    if (heightMode !== 'fullHeight' || typeof window === 'undefined') return;
+    const hostEl = hostRef.current;
+    if (!hostEl || typeof ResizeObserver === 'undefined') return;
+    const root = getRootElement(hostEl);
+    const pageHeader = getPageHeader(root);
+    const addBlockContainer = getAddBlockContainer(root);
+    const observer = new ResizeObserver(() => updateFullHeight());
+    observer.observe(hostEl);
+    if (root instanceof HTMLElement) {
+      observer.observe(root);
+    }
+    if (pageHeader) observer.observe(pageHeader);
+    if (addBlockContainer) observer.observe(addBlockContainer);
+    window.addEventListener('resize', updateFullHeight);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener('resize', updateFullHeight);
+    };
+  }, [heightMode, hostRef, updateFullHeight]);
+
+  if (heightMode === 'specifyValue') {
+    return height;
+  }
+  if (heightMode === 'fullHeight') {
+    return fullHeight;
+  }
+  return null;
+};
+
+const JSBlockPlainHost = ({
+  uid,
+  className,
+  heightMode,
+  height,
+  style,
+  beforeContent,
+  afterContent,
+  contentRef,
+  marginBlock,
+  ...rest
+}: React.HTMLAttributes<HTMLDivElement> & {
+  uid: string;
+  heightMode?: string;
+  height?: number;
+  beforeContent?: React.ReactNode;
+  afterContent?: React.ReactNode;
+  contentRef: React.RefObject<HTMLDivElement>;
+  marginBlock: number;
+}) => {
+  const hostRef = React.useRef<HTMLDivElement | null>(null);
+  const resolvedHeight = usePlainHostHeight({ height, heightMode, hostRef, marginBlock });
+
+  return (
+    <div
+      {...rest}
+      ref={hostRef}
+      id={`model-${uid}`}
+      className={className}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: resolvedHeight ?? undefined,
+        minHeight: 0,
+        overflow: 'auto',
+        ...(style || {}),
+      }}
+    >
+      {beforeContent}
+      <div ref={contentRef} />
+      {afterContent}
+    </div>
+  );
+};
+
 export class JSBlockModel extends BlockModel {
   // Avoid double-run on first mount; only rerun after remounts
   private _mountedOnce = false;
+
+  get showBlockCard() {
+    return this.getStepParams('jsSettings', 'showBlockCard')?.showBlockCard !== false;
+  }
+
   renderComponent(): React.ReactNode {
     return <div ref={this.context.ref} />;
   }
   render() {
     const decoratorProps = this.decoratorProps || {};
-    const { className, id: _ignoredId, title, description, ...rest } = decoratorProps;
+    const {
+      className,
+      id: _ignoredId,
+      title,
+      description,
+      showCard: _ignoredShowCard,
+      heightMode,
+      height,
+      style,
+      beforeContent,
+      afterContent,
+      ...rest
+    } = decoratorProps;
     const mergedClassName = ['code-block', className].filter(Boolean).join(' ');
 
+    if (!this.showBlockCard) {
+      return (
+        <JSBlockPlainHost
+          {...rest}
+          uid={this.uid}
+          className={mergedClassName}
+          heightMode={heightMode}
+          height={height}
+          style={style}
+          beforeContent={beforeContent}
+          afterContent={afterContent}
+          contentRef={this.context.ref}
+          marginBlock={this.context.themeToken?.marginBlock ?? 0}
+        />
+      );
+    }
+
+    const cardProps = {
+      ...rest,
+      height,
+      style,
+      ...(beforeContent === undefined ? {} : { beforeContent }),
+      ...(afterContent === undefined ? {} : { afterContent }),
+    };
+
     return (
       <BlockItemCard
         id={`model-${this.uid}`}
         className={mergedClassName}
         title={title}
         description={description}
-        {...rest}
+        heightMode={heightMode}
+        {...cardProps}
       >
         <div ref={this.context.ref} />
       </BlockItemCard>
@@ -61,6 +275,13 @@ JSBlockModel.registerFlow({
   key: 'jsSettings',
   title: 'JavaScript settings',
   steps: {
+    showBlockCard: {
+      title: tExpr('Show block card'),
+      uiMode: { type: 'switch', key: 'showBlockCard' },
+      defaultParams: {
+        showBlockCard: true,
+      },
+    },
     runJs: {
       title: tExpr('Write JavaScript'),
       useRawParams: true,

package/src/flow/models/blocks/js-block/__tests__/JSBlockModel.test.tsx

@@ -0,0 +1,150 @@
+/**
+ * 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 { App, ConfigProvider } from 'antd';
+import { render } from '@nocobase/test/client';
+import { describe, expect, it, vi } from 'vitest';
+import { FlowEngine, FlowEngineProvider } from '@nocobase/flow-engine';
+import { JSBlockModel } from '../JSBlock';
+
+function createJSBlock(uid: string, showBlockCard?: boolean, decoratorProps?: Record<string, unknown>) {
+  const engine = new FlowEngine();
+  engine.registerModels({ JSBlockModel });
+  const model = engine.createModel<JSBlockModel>({
+    use: 'JSBlockModel',
+    uid,
+    stepParams:
+      typeof showBlockCard === 'boolean'
+        ? {
+            jsSettings: {
+              showBlockCard: {
+                showBlockCard,
+              },
+            },
+          }
+        : undefined,
+  });
+  model.setDecoratorProps({
+    className: 'custom-js-block-shell',
+    style: {
+      minHeight: 120,
+    },
+    ...(decoratorProps || {}),
+  });
+  return { engine, model };
+}
+
+function renderBlock(engine: FlowEngine, model: JSBlockModel) {
+  return render(
+    <FlowEngineProvider engine={engine}>
+      <ConfigProvider>
+        <App>{model.render()}</App>
+      </ConfigProvider>
+    </FlowEngineProvider>,
+  );
+}
+
+describe('JSBlockModel', () => {
+  it('renders with the outer block card by default', () => {
+    const { engine, model } = createJSBlock('js-block-with-card');
+    const { container } = renderBlock(engine, model);
+    const host = container.querySelector('#model-js-block-with-card');
+
+    expect(host).toBeTruthy();
+    expect(host?.classList.contains('ant-card')).toBe(true);
+    expect(host?.classList.contains('code-block')).toBe(true);
+    expect(host?.classList.contains('custom-js-block-shell')).toBe(true);
+  });
+
+  it('renders a plain host without the outer card when showBlockCard is false', () => {
+    const { engine, model } = createJSBlock('js-block-without-card', false, {
+      showCard: true,
+    });
+    const { container } = renderBlock(engine, model);
+    const host = container.querySelector('#model-js-block-without-card') as HTMLElement | null;
+
+    expect(container.querySelector('.ant-card')).toBeNull();
+    expect(host).toBeInstanceOf(HTMLDivElement);
+    expect(host?.classList.contains('code-block')).toBe(true);
+    expect(host?.classList.contains('custom-js-block-shell')).toBe(true);
+    expect(host?.style.minHeight).toBe('120px');
+    expect(model.context.ref.current).toBe(host?.firstElementChild);
+  });
+
+  it('keeps cardless specified-height content scrollable inside the plain host', () => {
+    const { engine, model } = createJSBlock('js-block-without-card-height', false, {
+      heightMode: 'specifyValue',
+      height: 80,
+      style: undefined,
+    });
+    const { container } = renderBlock(engine, model);
+    const host = container.querySelector('#model-js-block-without-card-height') as HTMLElement | null;
+    const overflowContent = document.createElement('div');
+    overflowContent.style.height = '200px';
+    model.context.ref.current?.appendChild(overflowContent);
+
+    expect(host?.style.height).toBe('80px');
+    expect(host?.style.minHeight).toBe('0');
+    expect(host?.style.overflow).toBe('auto');
+    expect(model.context.ref.current?.firstElementChild).toBe(overflowContent);
+  });
+
+  it('calculates cardless full-height on the plain host', () => {
+    const originalInnerHeight = window.innerHeight;
+    Object.defineProperty(window, 'innerHeight', {
+      configurable: true,
+      value: 500,
+    });
+    const rectSpy = vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function () {
+      if ((this as HTMLElement).id === 'model-js-block-without-card-full-height') {
+        return {
+          x: 0,
+          y: 150,
+          top: 150,
+          left: 0,
+          bottom: 150,
+          right: 0,
+          width: 0,
+          height: 0,
+          toJSON: () => ({}),
+        } as DOMRect;
+      }
+      return {
+        x: 0,
+        y: 0,
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+        width: 0,
+        height: 0,
+        toJSON: () => ({}),
+      } as DOMRect;
+    });
+
+    try {
+      const { engine, model } = createJSBlock('js-block-without-card-full-height', false, {
+        heightMode: 'fullHeight',
+        style: undefined,
+      });
+      const { container } = renderBlock(engine, model);
+      const host = container.querySelector('#model-js-block-without-card-full-height') as HTMLElement | null;
+
+      expect(parseInt(host?.style.height || '0', 10)).toBeGreaterThan(0);
+      expect(host?.style.overflow).toBe('auto');
+    } finally {
+      rectSpy.mockRestore();
+      Object.defineProperty(window, 'innerHeight', {
+        configurable: true,
+        value: originalInnerHeight,
+      });
+    }
+  });
+});

package/src/flow/models/blocks/table/TableColumnModel.tsx

@@ -373,14 +373,18 @@ TableColumnModel.registerFlow({
               currentProps: ctx.model.props,
             })
           : undefined;
+        const collectionFieldComponentProps = collectionField.getComponentProps();
         const componentProps =
           collectionField.isAssociationField() && titleField
             ? {
-                ...collectionField.getComponentProps(),
+                ...collectionFieldComponentProps,
                 ...targetCollectionField?.getComponentProps?.(),
                 ...savedDateTimeDisplayProps,
               }
-            : collectionField.getComponentProps();
+            : {
+                ...collectionFieldComponentProps,
+                ...savedDateTimeDisplayProps,
+              };
         ctx.model.setProps('title', collectionField.title);
         ctx.model.setProps('dataIndex', collectionField.name);
         // for quick edit

package/src/flow/models/blocks/table/__tests__/TableColumnModel.test.tsx

@@ -327,6 +327,57 @@ describe('TableColumnModel sorter settings', () => {
     );
   });
 
+  it('keeps saved ordinary datetime format when table column initializes again', async () => {
+    const engine = new FlowEngine();
+    const model = new TableColumnModel({
+      uid: 'table-column-saved-datetime-format',
+      flowEngine: engine,
+    } as any);
+    const initStep = model.getFlow('tableColumnSettings')?.steps?.init as any;
+    const setProps = vi.fn();
+
+    await initStep.handler({
+      model: {
+        context: {
+          collectionField: {
+            title: 'Datetime',
+            name: 'datetime',
+            isAssociationField: () => false,
+            getComponentProps: () => ({
+              dateFormat: 'YYYY-MM-DD',
+              showTime: false,
+            }),
+          },
+        },
+        props: {},
+        subModels: {
+          field: {
+            getStepParams: (flowKey, stepKey) =>
+              flowKey === 'datetimeSettings' && stepKey === 'dateFormat'
+                ? {
+                    picker: 'date',
+                    dateFormat: 'YYYY-MM-DD',
+                    showTime: true,
+                    timeFormat: 'HH:mm:ss',
+                  }
+                : undefined,
+          },
+        },
+        applySubModelsBeforeRenderFlows: vi.fn(),
+        setProps,
+      },
+    });
+
+    expect(setProps).toHaveBeenCalledWith(
+      expect.objectContaining({
+        dateFormat: 'YYYY-MM-DD',
+        format: 'YYYY-MM-DD HH:mm:ss',
+        showTime: true,
+        timeFormat: 'HH:mm:ss',
+      }),
+    );
+  });
+
   it('does not update field component setting when title field refresh fails', async () => {
     const engine = new FlowEngine();
     const model = new TableColumnModel({ uid: 'table-column-title-field-component-failed', flowEngine: engine } as any);

package/src/flow/models/fields/AssociationFieldModel/RecordSelectFieldModel.tsx

@@ -198,6 +198,48 @@ const useFieldPermissionMessage = (model, allowEdit) => {
   return messageValue;
 };
 
+const recordSelectClassName = css`
+  min-width: 0;
+
+  .ant-select-selector {
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .ant-select-selection-search,
+  .ant-select-selection-item,
+  .ant-select-selection-placeholder,
+  .ant-select-selection-overflow,
+  .ant-select-selection-overflow-item {
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .ant-select-selection-item,
+  .ant-select-selection-item-content {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
+
+const recordSelectLabelClassName = css`
+  display: block;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  * {
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap !important;
+  }
+`;
+
 const LazySelect = (props: Readonly<LazySelectProps>) => {
   const {
     fieldNames,
@@ -210,6 +252,7 @@ const LazySelect = (props: Readonly<LazySelectProps>) => {
     onChange,
     allowCreate = true,
     allowEdit = true,
+    className,
     ...others
   } = props;
   const model: any = useFlowModel();
@@ -317,6 +360,7 @@ const LazySelect = (props: Readonly<LazySelectProps>) => {
       <Select
         style={{ width: '100%' }}
         {...others}
+        className={[recordSelectClassName, className].filter(Boolean).join(' ')}
         allowClear
         showSearch
         maxTagCount="responsive"
@@ -409,19 +453,7 @@ const LazySelect = (props: Readonly<LazySelectProps>) => {
         }}
         popupMatchSelectWidth
         labelRender={(data) => {
-          return (
-            <div
-              className={css`
-                div {
-                  white-space: nowrap !important;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                }
-              `}
-            >
-              {data.label}
-            </div>
-          );
+          return <div className={recordSelectLabelClassName}>{data.label}</div>;
         }}
         dropdownRender={(menu) => {
           const isFullMatch = realOptions.some((v) => v[normalizedFieldNames.label] === others.searchText);