From ecc172f5f355288d324fb118ec8b4c0c320d46e8 Mon Sep 17 00:00:00 2001 From: dengfuping Date: Thu, 7 Dec 2023 17:31:27 +0800 Subject: [PATCH] feat(ui): Export components' TypeScript definition --- packages/charts/src/index.ts | 2 + packages/ui/src/Action/index.ts | 2 + packages/ui/src/BatchOperationBar/index.tsx | 4 +- packages/ui/src/Dialog/index.tsx | 18 +++--- packages/ui/src/DocDialog/index.tsx | 14 ++--- packages/ui/src/IconFont/index.tsx | 2 +- packages/ui/src/NavMenu/index.tsx | 10 +-- packages/ui/src/Ranger/Ranger.tsx | 3 +- packages/ui/src/TreeSearch/index.tsx | 4 +- packages/ui/src/index.ts | 69 +++++++++++++++++---- packages/util/src/index.ts | 2 + 11 files changed, 91 insertions(+), 39 deletions(-) diff --git a/packages/charts/src/index.ts b/packages/charts/src/index.ts index bd998d350..20fa395a3 100644 --- a/packages/charts/src/index.ts +++ b/packages/charts/src/index.ts @@ -2,6 +2,8 @@ import './index.less'; export * from '@ant-design/charts'; +export { version } from '../package.json'; + export { default as Stat } from './Stat'; export type { StatConfig } from './Stat'; diff --git a/packages/ui/src/Action/index.ts b/packages/ui/src/Action/index.ts index 9991442d3..e72f32f96 100644 --- a/packages/ui/src/Action/index.ts +++ b/packages/ui/src/Action/index.ts @@ -1,4 +1,6 @@ import Group from './Group'; import { ActionButton, ActionLink } from './Item'; +export type { GroupProps as ActionGroupProps } from './Group'; + export default { Group, Button: ActionButton, Link: ActionLink }; diff --git a/packages/ui/src/BatchOperationBar/index.tsx b/packages/ui/src/BatchOperationBar/index.tsx index 0e77020a4..08c4ff7c8 100644 --- a/packages/ui/src/BatchOperationBar/index.tsx +++ b/packages/ui/src/BatchOperationBar/index.tsx @@ -19,7 +19,7 @@ export type RenderFun = ((props: AlertRenderParams) => ReactNode) | false; export type Vertical = 'top' | 'bottom'; export type Horizontal = 'left' | 'right'; -export interface Props extends LocaleWrapperProps { +export interface BatchOperationBarProps extends LocaleWrapperProps { width?: number | string; title?: ReactNode; selectedRows?: any[]; @@ -41,7 +41,7 @@ export interface Props extends LocaleWrapperProps { const prefix = 'ob-batch-operation-bar'; -const BatchOperationBar = (props: Props) => { +const BatchOperationBar = (props: BatchOperationBarProps) => { const locale = props?.locale; const { title, diff --git a/packages/ui/src/Dialog/index.tsx b/packages/ui/src/Dialog/index.tsx index e40ba1c06..d66b6f5b6 100644 --- a/packages/ui/src/Dialog/index.tsx +++ b/packages/ui/src/Dialog/index.tsx @@ -31,17 +31,17 @@ const DEFAULT_BORDER_WIDTH = 24; // 预留滚动条宽度 const SCROLL_BAR_WIDTH = 1; -export interface IDialogLocale { +export interface DialogLocale { helpDocument: string; openHelpCenter: string; } -export interface IDialogExtLink { +export interface DialogExtLink { text?: string; link: string; } -export interface IDialogProps extends LocaleWrapperProps { +export interface DialogProps extends LocaleWrapperProps { className?: string; visible?: boolean; children?: React.ReactNode; @@ -58,15 +58,15 @@ export interface IDialogProps extends LocaleWrapperProps { resizable?: boolean; draggable?: boolean; enableMaximization?: boolean; - locale?: IDialogLocale; - extLink?: IDialogExtLink; + locale?: DialogLocale; + extLink?: DialogExtLink; // 内部修改外部容器宽度 setRootWidth?: (newWidth: string) => void; // 是否嵌入模式 isEmbed?: boolean; } -interface IDialogStates { +interface DialogState { mask?: boolean; width?: number; height?: number; @@ -79,7 +79,7 @@ interface IDialogStates { headerStyle?: Record; } -class DialogComp extends React.PureComponent { +class DialogComp extends React.PureComponent { state = { mask: true, width: this.props.width ?? DEFAULT_WIDTH_MEMBER, @@ -135,7 +135,7 @@ class DialogComp extends React.PureComponent { DialogComp.container.appendChild(this.host); } - componentDidUpdate(prevProps: Readonly, _: Readonly): void { + componentDidUpdate(prevProps: Readonly, _: Readonly): void { const { visible: preVisible, clientWidth: preClientWidth, @@ -546,7 +546,7 @@ class DialogComp extends React.PureComponent { checkSize(width: number, height: number) { const { max } = this; const { min } = this; - const newModel: IDialogStates = {}; + const newModel: DialogState = {}; const result = { widthShouldChange: true, diff --git a/packages/ui/src/DocDialog/index.tsx b/packages/ui/src/DocDialog/index.tsx index f6d91c628..71b9b26f5 100644 --- a/packages/ui/src/DocDialog/index.tsx +++ b/packages/ui/src/DocDialog/index.tsx @@ -1,6 +1,6 @@ import { debounce } from 'lodash'; import React, { useEffect, useMemo, useState } from 'react'; -import type { IDialogProps } from '../Dialog'; +import type { DialogProps } from '../Dialog'; import Dialog from '../Dialog'; import type { LocaleWrapperProps } from '../locale/LocaleWrapper'; import LocaleWrapper from '../locale/LocaleWrapper'; @@ -12,7 +12,7 @@ const MIN_EMBED_WIDTH = 0.3; const DEFAULT_MOBILE_CLIENT_WIDTH = 1280; const DEFAULT_TOP_HEIGHT = 0; -interface IDialogConfig { +interface DialogConfig { height?: number; width?: number; top?: number; @@ -21,13 +21,13 @@ interface IDialogConfig { max?: [number, number]; } -export interface IDocDialogProps extends LocaleWrapperProps { +export interface DocDialogProps extends LocaleWrapperProps { className?: string; title?: string; fallbackUrl: string; docUrls?: Record; - embedConfig?: IDialogConfig; - normalConfig?: IDialogConfig; + embedConfig?: DialogConfig; + normalConfig?: DialogConfig; normalModeWidth?: number; defautTop?: number; visible: boolean; @@ -35,7 +35,7 @@ export interface IDocDialogProps extends LocaleWrapperProps { setVisible: (payload: boolean) => void; } -const DocDialogComp = (props: IDocDialogProps) => { +const DocDialogComp = (props: DocDialogProps) => { const { fallbackUrl, docUrls, @@ -74,7 +74,7 @@ const DocDialogComp = (props: IDocDialogProps) => { const DialogProps = useMemo(() => { const maxDialogHeight = clientHeight - defautTop; - let result: IDialogProps = { + let result: DialogProps = { className, visible, title, diff --git a/packages/ui/src/IconFont/index.tsx b/packages/ui/src/IconFont/index.tsx index 3987892af..4699081f5 100644 --- a/packages/ui/src/IconFont/index.tsx +++ b/packages/ui/src/IconFont/index.tsx @@ -2,7 +2,7 @@ import { createFromIconfontCN } from '@oceanbase/icons'; import React from 'react'; import './font/iconfont.css'; -interface IconFontProps { +export interface IconFontProps { type: string; className?: string; style?: React.CSSProperties; diff --git a/packages/ui/src/NavMenu/index.tsx b/packages/ui/src/NavMenu/index.tsx index 58ebc76c8..2d6d633e1 100644 --- a/packages/ui/src/NavMenu/index.tsx +++ b/packages/ui/src/NavMenu/index.tsx @@ -8,7 +8,7 @@ import './index.less'; const prefix = getPrefix('menu'); -export interface IMenu { +export interface NavMenuItem { key: string; title: string; link: string | string[]; @@ -16,16 +16,16 @@ export interface IMenu { openNewTab?: boolean; // 不在本应用内打开 href?: boolean; id?: string; - children?: IMenu[]; + children?: NavMenuItem[]; } -interface MenuProps { - menuList: IMenu[]; +export interface NavMenuProps { + menuList: NavMenuItem[]; className?: string; style?: React.CSSProperties; } -export default (props: MenuProps) => { +export default (props: NavMenuProps) => { const { menuList, className, style } = props; const [selectedKeys, setSelectedKeys] = useState(['0']); const [menus, setMenus] = useState([]); diff --git a/packages/ui/src/Ranger/Ranger.tsx b/packages/ui/src/Ranger/Ranger.tsx index 990780166..a58d9f11a 100644 --- a/packages/ui/src/Ranger/Ranger.tsx +++ b/packages/ui/src/Ranger/Ranger.tsx @@ -31,7 +31,8 @@ export type RangeDateValue = { range: RangeValue; }; -interface RangerProps extends Omit { +export interface RangerProps + extends Omit { // 数据相关 selects?: RangeOption[]; defaultQuickValue?: string; diff --git a/packages/ui/src/TreeSearch/index.tsx b/packages/ui/src/TreeSearch/index.tsx index 516e906b0..cf11e27db 100644 --- a/packages/ui/src/TreeSearch/index.tsx +++ b/packages/ui/src/TreeSearch/index.tsx @@ -32,7 +32,7 @@ export interface TreeSearchRef { invertSelect: () => void; } -interface TreeSearchProps { +export interface TreeSearchProps { treeData: Node[]; titleRender?: (nodeData: DataNode) => React.ReactNode; checkable?: boolean; @@ -47,7 +47,7 @@ interface TreeSearchProps { followLeaf?: boolean; /** 异步请求节点数据的回调函数 */ loadData?: (data: unknown) => Promise; - searchStyle?: {}; + searchStyle?: React.CSSProperties; } export default forwardRef( diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index efa678133..acadc169d 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -1,34 +1,56 @@ import './index.less'; export * from '@ant-design/pro-components'; + export { version } from '../package.json'; + +export * from './constant'; + +export * from './interface'; + export { default as Action } from './Action'; -export { - BackgroundTaskManagerConstants, - default as BackgroundTaskManager, -} from './BackgroundTaskManager'; -export type { - BackgroundTaskManagerRef, - ITaskMgrPreset, - ITaskMgrQueue, - TaskMgrID, -} from './BackgroundTaskManager'; +export type { ActionGroupProps } from './Action'; + export { default as BasicLayout } from './BasicLayout'; +export type { BasicLayoutProps } from './BasicLayout'; + export { default as BatchOperationBar } from './BatchOperationBar'; +export type { BatchOperationBarProps } from './BatchOperationBar'; + export { default as Boundary } from './Boundary'; -export * from './constant'; + export { default as ContentWithQuestion } from './ContentWithQuestion'; +export type { ContentWithQuestionProps } from './ContentWithQuestion'; + export { default as ContentWithIcon } from './ContentWithIcon'; +export type { ContentWithIconProps } from './ContentWithIcon'; + export { default as Dialog } from './Dialog'; +export type { DialogProps } from './Dialog'; + export { default as DocDialog } from './DocDialog'; +export type { DocDialogProps } from './DocDialog'; + export { default as FullscreenBox } from './FullscreenBox'; +export type { FullscreenBoxProps } from './FullscreenBox'; + export { default as GraphToolbar } from './GraphToolbar'; +export type { GraphToolbarProps } from './GraphToolbar'; + export { default as Highlight } from './Highlight'; +export type { HighlightProps } from './Highlight'; + export { default as IconFont } from './IconFont'; -export * from './interface'; +export type { IconFontProps } from './IconFont'; + export { default as Login } from './Login'; +export type { LoginProps } from './Login'; + export { default as Lottie } from './Lottie'; +export type { LottieProps } from './Lottie'; + export { default as NavMenu } from './NavMenu'; +export type { NavMenuProps, NavMenuItem } from './NavMenu'; export { default as PageContainer } from './PageContainer'; export type { PageContainerProps } from './PageContainer'; @@ -37,9 +59,32 @@ export { default as FooterToolbar } from './FooterToolbar'; export type { FooterToolbarProps } from './FooterToolbar'; export { default as Password } from './Password'; +export type { PasswordProps } from './Password'; + export { default as Ranger } from './Ranger'; +export type { RangerProps } from './Ranger'; + export { default as SideTip } from './SideTip'; +export type { SideTipProps } from './SideTip'; + export { default as TaskGraph } from './TaskGraph'; +export type { TaskGraphProps } from './TaskGraph'; + export { default as TreeSearch } from './TreeSearch'; +export type { TreeSearchProps, TreeSearchRef } from './TreeSearch'; + export { default as Welcome } from './Welcome'; +export type { WelcomeProps } from './Welcome'; + export { default as TagSelect } from './TagSelect'; + +export { + BackgroundTaskManagerConstants, + default as BackgroundTaskManager, +} from './BackgroundTaskManager'; +export type { + BackgroundTaskManagerRef, + ITaskMgrPreset, + ITaskMgrQueue, + TaskMgrID, +} from './BackgroundTaskManager'; diff --git a/packages/util/src/index.ts b/packages/util/src/index.ts index bb0c5d387..a44bb9cd1 100644 --- a/packages/util/src/index.ts +++ b/packages/util/src/index.ts @@ -1,3 +1,5 @@ +export { version } from '../package.json'; + export * from './format'; export * from './robust'; export * from './sort';