Merge pull request #467 from easyops-cn/steve/jsx

Steve/jsx

Author: weareoutman

bricks/advanced/src/cascader/index.tsx

@@ -49,6 +49,7 @@ export interface CascaderProps
  * @author nlicroshan
  * @category form-input-basic
  */
+export
 @defineElement("eo-cascader", {
   alias: ["advanced.general-cascader"],
   styleTexts: [styleText],
@@ -280,5 +281,3 @@ function CascaderElement(props: CascaderProps): React.ReactElement {
     </ConfigProvider>
   );
 }
-
-export { CascaderBrick };

bricks/advanced/src/jsx.ts

@@ -0,0 +1,105 @@
+import type { DetailedHTMLProps, HTMLAttributes } from "react";
+import type { DefaultOptionType } from "antd/es/cascader";
+import type { RowSelectMethod } from "antd/es/table/interface";
+import type { EoTree, EoTreeProps } from "./tree";
+import type { TreeSelectBrick, TreeSelectProps } from "./tree-select";
+import type { CascaderBrick, CascaderProps } from "./cascader";
+import type { PdfViewer, PdfViewerProps } from "./pdf-viewer";
+import type { EoTextTooltip, EoTextTooltipProps } from "./text-tooltip";
+import type { EoNextTable, NextTableProps } from "./next-table";
+import type { RecordType, Sort } from "./next-table/interface";
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      "eo-text-tooltip": DetailedHTMLProps<
+        HTMLAttributes<EoTextTooltip>,
+        EoTextTooltip
+      > &
+        EoTextTooltipProps;
+
+      "eo-tree": DetailedHTMLProps<HTMLAttributes<EoTree>, EoTree> &
+        EoTreeProps & {
+          onCheck?: (event: CustomEvent<(string | number)[]>) => void;
+          onCheckDetail?: (
+            event: CustomEvent<{
+              checkedKeys: (string | number)[];
+              halfCheckedKeys: (string | number)[];
+            }>
+          ) => void;
+          onExpand?: (event: CustomEvent<(string | number)[]>) => void;
+          onNodeDrop?: (event: CustomEvent) => void;
+          onSelect?: (event: CustomEvent<(string | number)[]>) => void;
+          onSelectNode?: (event: CustomEvent) => void;
+        };
+
+      "eo-tree-select": DetailedHTMLProps<
+        HTMLAttributes<TreeSelectBrick>,
+        TreeSelectBrick
+      > &
+        TreeSelectProps & {
+          onChange?: (event: CustomEvent<{ value: any }>) => void;
+          onSearch?: (event: CustomEvent<string>) => void;
+          onSelect?: (event: CustomEvent<{ value: any }>) => void;
+          onExpand?: (event: CustomEvent<{ keys: React.Key[] }>) => void;
+        };
+
+      "eo-cascader": DetailedHTMLProps<
+        HTMLAttributes<CascaderBrick>,
+        CascaderBrick
+      > &
+        CascaderProps & {
+          onCascaderChange?: (
+            event: CustomEvent<{
+              value: (string | number | null)[] | undefined;
+              selectedOptions: DefaultOptionType[] | DefaultOptionType[][];
+            }>
+          ) => void;
+        };
+
+      "eo-next-table": DetailedHTMLProps<
+        HTMLAttributes<EoNextTable>,
+        EoNextTable
+      > &
+        NextTableProps & {
+          onPageChange?: (
+            event: CustomEvent<{ page: number; pageSize: number }>
+          ) => void;
+          onSortChange?: (
+            event: CustomEvent<Sort | Sort[] | undefined>
+          ) => void;
+          onRowSelect?: (
+            event: CustomEvent<{
+              keys: (string | number)[];
+              rows: RecordType[];
+              info: { type: RowSelectMethod };
+            }>
+          ) => void;
+          onRowSelectV2?: (event: CustomEvent<RecordType[]>) => void;
+          onRowExpand?: (
+            event: CustomEvent<{
+              expanded: boolean;
+              record: RecordType;
+            }>
+          ) => void;
+          onExpandedRowsChange?: (
+            event: CustomEvent<(string | number)[]>
+          ) => void;
+          onRowDrag?: (
+            event: CustomEvent<{
+              list: RecordType[];
+              active: RecordType;
+              over: RecordType;
+            }>
+          ) => void;
+        };
+
+      "advanced.pdf-viewer": DetailedHTMLProps<
+        HTMLAttributes<PdfViewer>,
+        PdfViewer
+      > &
+        PdfViewerProps;
+    }
+  }
+}

bricks/advanced/src/text-tooltip/index.tsx

@@ -26,7 +26,7 @@ export
 @defineElement("eo-text-tooltip", {
   styleTexts: [styleText],
 })
-class EoTextTooltip extends ReactNextElement {
+class EoTextTooltip extends ReactNextElement implements EoTextTooltipProps {
   /**
    * 文案
    * @default
@@ -48,12 +48,12 @@ class EoTextTooltip extends ReactNextElement {
   }
 }
 
-interface TooltipPropsEoTextTooltipProps {
+export interface EoTextTooltipProps {
   label?: string;
   lineClamp?: number;
 }
 
-export function EoTextTooltipComponent(props: TooltipPropsEoTextTooltipProps) {
+export function EoTextTooltipComponent(props: EoTextTooltipProps) {
   const { lineClamp, label } = props;
   const ref = useRef<HTMLDivElement>(null);
   // 是否显示tooltip

bricks/advanced/src/tree-select/index.tsx

@@ -50,7 +50,6 @@ export interface TreeSelectProps
   dropdownStyle?: CSSProperties;
   maxTagCount?: number | "responsive";
   popupMatchSelectWidth?: boolean;
-  onChange?: (value: AntdTreeSelectProps["value"]) => void;
 }
 
 /**
@@ -236,7 +235,13 @@ class TreeSelectBrick extends FormItemElementBase implements TreeSelectProps {
   }
 }
 
-function TreeSelectElement(props: TreeSelectProps): React.ReactElement {
+interface TreeSelectComponentProps extends TreeSelectProps {
+  onChange?: (value: AntdTreeSelectProps["value"]) => void;
+}
+
+function TreeSelectElement(
+  props: TreeSelectComponentProps
+): React.ReactElement {
   const {
     shadowRoot,
     checkable,

bricks/ai-portal/src/action-buttons/index.tsx

@@ -18,7 +18,7 @@ const WrapperButton = wrapBrick<Button, ButtonProps>("eo-button");
 
 const { defineElement, property, event } = createDecorators();
 
-interface ActionItem {
+export interface ActionItem {
   text: string;
   key: string;
   icon?: GeneralIconProps;

bricks/ai-portal/src/chat-stream/index.tsx

@@ -40,6 +40,7 @@ export interface ChatStreamProps {
   aiEmployees?: AIEmployee[];
   commands?: Command[];
   uploadOptions?: UploadOptions;
+  hideMermaid?: boolean;
 }
 
 export interface ConversationDetail {

bricks/ai-portal/src/cruise-canvas/index.tsx

@@ -43,6 +43,7 @@ export interface CruiseCanvasProps {
   aiEmployees?: AIEmployee[];
   commands?: Command[];
   uploadOptions?: UploadOptions;
+  hideMermaid?: boolean;
 }
 
 export interface ConversationDetail {

bricks/ai-portal/src/dropdown-select/index.tsx

@@ -65,7 +65,7 @@ export interface DropdownSelectProps {
   loading?: boolean;
 }
 
-interface DropdownOptions {
+export interface DropdownOptions {
   label: string;
   value: string;
   disabled?: boolean;

bricks/ai-portal/src/home-container/index.tsx

@@ -6,14 +6,18 @@ import styleText from "./styles.shadow.css";
 
 const { defineElement, property } = createDecorators();
 
+export interface HomeContainerProps {
+  sticky?: boolean;
+}
+
 /**
  * 构件 `ai-portal.home-container`
  */
 export
 @defineElement("ai-portal.home-container", {
   styleTexts: [styleText],
 })
-class HomeContainer extends ReactNextElement {
+class HomeContainer extends ReactNextElement implements HomeContainerProps {
   @property({ type: Boolean, render: false })
   accessor sticky: boolean | undefined;
 

bricks/ai-portal/src/icon-button/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useRef, type HTMLAttributes } from "react";
 import { createDecorators } from "@next-core/element";
 import { ReactNextElement, wrapBrick } from "@next-core/react-element";
 import "@next-core/theme";
@@ -16,11 +16,12 @@ const WrappedTooltip = wrapBrick<EoTooltip, ToolTipProps>("eo-tooltip");
 const { defineElement, property } = createDecorators();
 
 export interface IconButtonProps {
-  icon?: GeneralIconProps;
+  icon?: GeneralIconProps & HTMLAttributes<GeneralIcon>;
   tooltip?: string;
   tooltipHoist?: boolean;
   disabled?: boolean;
   variant?: IconButtonVariant;
+  reduceIconSize?: boolean;
 }
 
 export type IconButtonVariant =
@@ -39,7 +40,7 @@ export
 })
 class IconButton extends ReactNextElement implements IconButtonProps {
   @property({ attribute: false })
-  accessor icon: GeneralIconProps | undefined;
+  accessor icon: (GeneralIconProps & HTMLAttributes<GeneralIcon>) | undefined;
 
   @property()
   accessor tooltip: string | undefined;