Bug: NodeCollapsePanel icon Cannot customize

[lqPrototype]

Describe the bug

/** 折叠面板 */
export interface ICollapsePanel {
    /** panel Id */
    id: string;
    /** 是否可折叠或指定可折叠触发区域 */
    collapsible?: boolean;
    /** 是否折叠 */
    isCollapsed?: boolean;
    /** 自定义渲染每个面板右上角的内容 */
    extra?: React.ComponentType<ICollapsePanel>;
    /** header的渲染 支持组件和string */
    header: React.ComponentType<ICollapsePanel> | string;
    /** 自定义 icon */
    icon?: React.ComponentType<{
        isCollapsed: boolean;
    }>;
    /** 折叠面板的子元素 */
    children?: IPanelNode[];
    /** 自定义panel的children */
    render?: React.ComponentType<ICollapsePanel>;
    /** 自定义数据 */
    data?: any;
}

icon?: React.ComponentType<{ isCollapsed: boolean;}>

renderHeader

const renderHeader = (item: ICollapsePanel) => {
    const { header, extra, icon, isCollapsed } = item
    const onClick = (e: React.MouseEvent) => {
      e.preventDefault()
      onActiveKeyChange(item.id)
    }
    return (
      <div className={`xflow-collapse-header`} onClick={onClick}>
        <div className={`xflow-collapse-header-icon`}>
          {isReactComponent(icon) ? (
            React.createElement(icon, { isCollapsed })
          ) : (
            <CaretRightOutlined rotate={isCollapsed ? 0 : 90} style={{ fontSize: '12px' }} />
          )}
        </div>
        <div className={`xflow-collapse-header-label`}>
          {isReactComponent(header) ? React.createElement(header, item) : header}
        </div>
        <div className={`xflow-collapse-header-extra`}>
          {isReactComponent(extra) ? React.createElement(extra, item) : extra}
        </div>
      </div>
    )
  }

isReactComponent

// refer:https://stackoverflow.com/questions/33199959/how-to-detect-a-react-component-vs-a-react-element

export function isClassComponent(component: unknown): component is React.ComponentClass {
  return typeof component === 'function' && !!component.prototype.isReactComponent
}

export function isFunctionComponent(component: unknown): component is React.FunctionComponent {
  return typeof component === 'function' && String(component).includes('return React.createElement')
}

export function isReactComponent(component: unknown): component is React.ComponentType {
  return isClassComponent(component) || isFunctionComponent(component)
}

Bug：String(component).includes('return React.createElement') 永远是false。因为React 在运行时React已经被替换了。如下图：

Your Example Website or App

React.isValidElement(icon)

Steps to Reproduce the Bug or Issue

1. XFlow NodeCollapsePanel add nodeDataService
2. nodeDataService return：

export const nodeDataService: NsNodeCollapsePanel.INodeDataService = async (
    meta,
    modelService,
) => {
    function IconCustorm() {
        return <SafetyOutlined />;
    }
    return [
        {
            id: "1",
            header: "训练节点",
            icon: <IconCustorm />,
            extra: (
                <span>
                    <b className="badge">2</b>
                    <RightOutlined className="rotate" />
                </span>
            ),
    ];
};

Expected behavior

因为用户传的jsx、函数组件和类组件比较多，而不应该去判断函数类型。

<div className={`xflow-collapse-header-icon`}>
      {React.isValidElement(icon) ? (
          React.cloneElement(icon, { isCollapsed })
      ) : (
          <CaretRightOutlined
              rotate={isCollapsed ? 0 : 90}
              style={{ fontSize: "12px" }}
          />
      )}
  </div>

Screenshots or Videos

No response

Platform

• OS: [macOS]
• Browser: [Chrome]
• Version: [1.0.48]

Additional context

No response

[xflow-bot[bot]]

👋 @lqPrototype

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.

To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[xflow-bot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not-stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the AntV community! 💪💯

[xflow-bot[bot]]

Hey again!

It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot 🤖, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the AntV community! 💪💯

[xflow-bot[bot]]

This thread has been automatically locked because it has not had recent activity.

Please open a new issue for related bugs and link to relevant comments in this thread.