feat: 支持sfc 形式的渲染器 (#10336)

2024-11-29 18:48:45 +08:00 · 2024-05-31 11:30:28 +08:00 · 2024-05-31 11:30:28 +08:00 · 30b0d0d749
commit 30b0d0d749
parent 7ab42eed7b
9 changed files with 53 additions and 87 deletions
--- a/packages/amis-core/src/SchemaRenderer.tsx
+++ b/packages/amis-core/src/SchemaRenderer.tsx
@ -225,6 +225,12 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
      ref = ref.getWrappedInstance();
    }

+    if (ref && !ref.props) {
+      Object.defineProperty(ref, 'props', {
+        get: () => this.props
+      });
+    }
+
    this.cRef = ref;
  }

@ -447,8 +453,10 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
      exprProps = {};
    }

-    const isClassComponent = Component.prototype?.isReactComponent;
-    let props = {
+    const supportRef =
+      Component.prototype?.isReactComponent ||
+      (Component as any).$$typeof === Symbol.for('react.forward_ref');
+    let props: any = {
      ...theme.getRendererConfig(renderer.name),
      ...restSchema,
      ...chainEvents(rest, restSchema),
@ -460,7 +468,6 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
      propKey: propKey,
      $path: $path,
      $schema: schema,
-      ref: this.refFn,
      render: this.renderChild,
      rootStore,
      statusStore,
@ -504,10 +511,10 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
      }
    }

-    const component = isClassComponent ? (
+    const component = supportRef ? (
      <Component {...props} ref={this.childRef} />
    ) : (
-      <Component {...props} />
+      <Component {...props} forwardedRef={this.childRef} />
    );

    return this.props.env.enableAMISDebug ? (
--- a/packages/amis-core/src/WithStore.tsx
+++ b/packages/amis-core/src/WithStore.tsx
@ -402,13 +402,19 @@ export function HocStoreFactory(renderer: {
          return null;
        }

+        const refConfig =
+          Component.prototype?.isReactComponent ||
+          (Component as any).$$typeof === Symbol.for('react.forward_ref')
+            ? {ref: this.refFn}
+            : {forwardedRef: this.refFn};
+
        return (
          <Component
            {
              ...(rest as any) /* todo */
            }
            {...this.state}
-            ref={this.refFn}
+            {...refConfig}
            data={this.store.data}
            dataUpdatedAt={this.store.updatedAt}
            store={this.store}
--- a/packages/amis-core/src/renderers/Item.tsx
+++ b/packages/amis-core/src/renderers/Item.tsx
@ -2099,7 +2099,9 @@ export const detectProps = [

 export function asFormItem(config: Omit<FormItemConfig, 'component'>) {
  return (Control: FormControlComponent) => {
-    const isSFC = !(Control.prototype instanceof React.Component);
+    const supportRef =
+      Control.prototype instanceof React.Component ||
+      (Control as any).$$typeof === Symbol.for('react.forward_ref');

    // 兼容老的 FormItem 用法。
    if (config.validate && !Control.prototype.validate) {
@ -2232,8 +2234,8 @@ export function asFormItem(config: Omit<FormItemConfig, 'component'>) {
                  onBlur={this.handleBlur}
                  type={type}
                  classnames={cx}
-                  ref={isSFC ? undefined : this.refFn}
-                  forwardedRef={isSFC ? this.refFn : undefined}
+                  ref={supportRef ? this.refFn : undefined}
+                  forwardedRef={supportRef ? undefined : this.refFn}
                  formItem={model}
                  className={cx(
                    `Form-control`,
--- a/packages/amis-core/src/renderers/wrapControl.tsx
+++ b/packages/amis-core/src/renderers/wrapControl.tsx
@ -555,6 +555,12 @@ export function wrapControl<
              control = control.getWrappedInstance();
            }

+            if (control && !control.props) {
+              Object.defineProperty(control, 'props', {
+                get: () => this.props
+              });
+            }
+
            if (control && control.validate && this.model) {
              const formItem = this.model as IFormItemStore;
              let validate = promisify(control.validate.bind(control));
--- a/packages/amis-editor-core/src/component/NodeWrapper.tsx
+++ b/packages/amis-editor-core/src/component/NodeWrapper.tsx
@ -98,6 +98,10 @@ export class NodeWrapper extends React.Component<NodeWrapperProps> {
      );
    }

+    const supportRef =
+      renderer.component.prototype?.isReactComponent ||
+      (renderer.component as any).$$typeof === Symbol.for('react.forward_ref');
+
    return (
      <renderer.component
        {...rest}
@ -105,7 +109,7 @@ export class NodeWrapper extends React.Component<NodeWrapperProps> {
        {...$$node?.state}
        $$editor={$$editor}
        {...$$editor.wrapperProps}
-        ref={this.refFn}
+        ref={supportRef ? this.refFn : undefined}
      />
    );
  }
--- a/packages/amis-ui/scss/components/_result-box.scss
+++ b/packages/amis-ui/scss/components/_result-box.scss
@ -117,6 +117,7 @@

  &-value-wrap {
    flex-grow: 1;
+    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
@ -171,6 +172,10 @@
    }
  }

+  &-clear-wrap {
+    line-height: 1;
+  }
+
  > svg {
    display: inline-block;
    width: px2rem(14px);
--- a/packages/amis-ui/scss/components/form/_combo.scss
+++ b/packages/amis-ui/scss/components/form/_combo.scss
@ -24,82 +24,6 @@
    margin-right: px2rem(12px);
  }

-  &-addBtn {
-    > svg {
-      width: var(--Combo-addBtn-fontSize);
-      height: var(--Combo-addBtn-fontSize);
-      top: 0;
-    }
-
-    @include button-size(
-      var(--Combo-addBtn-fontSize),
-      var(--Combo-addBtn-fontWeight),
-      var(--Combo-addBtn-lineHeight),
-      var(--combo-multi-addBtn-top-left-border-radius),
-      var(--combo-multi-addBtn-top-right-border-radius),
-      var(--combo-multi-addBtn-bottom-right-border-radius),
-      var(--combo-multi-addBtn-bottom-left-border-radius),
-      var(--Combo-addBtn-height),
-      var(--combo-multi-addBtn-paddingTop),
-      var(--combo-multi-addBtn-paddingBottom),
-      var(--combo-multi-addBtn-paddingLeft),
-      var(--combo-multi-addBtn-paddingRight)
-    );
-
-    @include button-variant(
-      var(--Combo-addBtn-bg),
-      var(--Combo-addBtn-color),
-      var(--Combo-addBtn-border),
-      var(--Combo-addBtn-border),
-      var(--Combo-addBtn-border),
-      var(--Combo-addBtn-border),
-      var(--button-default-default-top-border-width),
-      var(--button-default-default-right-border-width),
-      var(--button-default-default-bottom-border-width),
-      var(--button-default-default-left-border-width),
-      var(--button-default-default-top-border-style),
-      var(--button-default-default-right-border-style),
-      var(--button-default-default-bottom-border-style),
-      var(--button-default-default-left-border-style),
-      var(--button-default-default-shadow),
-      var(--Combo-addBtn-onHover-bg),
-      var(--Combo-addBtn-onHover-color),
-      var(--Combo-addBtn-onHover-border),
-      var(--Combo-addBtn-onHover-border),
-      var(--Combo-addBtn-onHover-border),
-      var(--Combo-addBtn-onHover-border),
-      var(--button-default-hover-top-border-width),
-      var(--button-default-hover-right-border-width),
-      var(--button-default-hover-bottom-border-width),
-      var(--button-default-hover-left-border-width),
-      var(--button-default-hover-top-border-style),
-      var(--button-default-hover-right-border-style),
-      var(--button-default-hover-bottom-border-style),
-      var(--button-default-hover-left-border-style),
-      var(--button-default-hover-shadow),
-      var(--Combo-addBtn-onActive-bg),
-      var(--Combo-addBtn-onActive-color),
-      var(--Combo-addBtn-onActive-border),
-      var(--Combo-addBtn-onActive-border),
-      var(--Combo-addBtn-onActive-border),
-      var(--Combo-addBtn-onActive-border),
-      var(--button-default-active-top-border-width),
-      var(--button-default-active-right-border-width),
-      var(--button-default-active-bottom-border-width),
-      var(--button-default-active-left-border-width),
-      var(--button-default-active-top-border-style),
-      var(--button-default-active-right-border-style),
-      var(--button-default-active-bottom-border-style),
-      var(--button-default-active-left-border-style),
-      var(--button-default-active-shadow)
-    );
-
-    &.is-disabled {
-      pointer-events: none;
-      opacity: var(--Button-onDisabled-opacity);
-    }
-  }
-
  &-delBtn {
    color: var(--combo-multi-delBtn-color);
    cursor: pointer;
--- a/packages/amis-ui/src/components/Combo.tsx
+++ b/packages/amis-ui/src/components/Combo.tsx
@ -114,6 +114,8 @@ export interface ComboProps<T = any>
  scaffold?: Record<string, any>;
  addButtonClassName?: string;
  addButtonText?: string;
+  addButtonLevel?: string;
+  addButtonSize?: string;
  addable?: boolean;
  // draggable?: boolean;
  // draggableTip?: string;
@ -138,6 +140,8 @@ export function Combo({
  itemsWrapperClassName,
  itemClassName,
  addButtonClassName,
+  addButtonLevel,
+  addButtonSize,
  itemRender,
  translate: __,
  classnames: cx,
@ -272,7 +276,9 @@ export function Combo({
          <div className={cx(`Combo-toolbar`)}>
            <Button
              className={cx(`Combo-addBtn`, addButtonClassName)}
+              level={addButtonLevel ?? 'primary'}
              onClick={() => append({...scaffold})}
+              size={(addButtonSize as any) ?? 'sm'}
            >
              <Icon icon="plus" className="icon" />
              <span>{__(addButtonText || 'add')}</span>
@ -349,7 +355,10 @@ export function ComboItem({
    child = (
      <div className={cx('Form-row')}>
        {child.map((child, index) => (
-          <div className={cx('Form-col')} key={child.key || index}>
+          <div
+            className={cx('Form-col', child?.props.columnClassName)}
+            key={child.key || index}
+          >
            {child}
          </div>
        ))}
--- a/packages/amis-ui/src/components/FormField.tsx
+++ b/packages/amis-ui/src/components/FormField.tsx
@ -166,6 +166,9 @@ export interface ControllerProps
    [propName: string]: any;
  };

+  // combo 里面有用
+  columnClassName?: string;
+
  className?: string;

  /**