fix: useModal return type error #833 (#836)

* fix: useModal return type error  #833

* chore: add \n

* fix: modal type more specific

packages/semi-ui/modal/Modal.tsx

@@ -50,7 +50,7 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
         centered: PropTypes.bool,
         visible: PropTypes.bool,
         width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        height:  PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
         confirmLoading: PropTypes.bool,
         cancelLoading: PropTypes.bool,
         okText: PropTypes.string,
@@ -193,23 +193,23 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
 
 
     static info = function (props: ModalReactProps) {
-        return confirm(withInfo(props));
+        return confirm<ReturnType<typeof withInfo>>(withInfo(props));
     };
 
     static success = function (props: ModalReactProps) {
-        return confirm(withSuccess(props));
+        return confirm<ReturnType<typeof withSuccess>>(withSuccess(props));
     };
 
     static error = function (props: ModalReactProps) {
-        return confirm(withError(props));
+        return confirm<ReturnType<typeof withError>>(withError(props));
     };
 
     static warning = function (props: ModalReactProps) {
-        return confirm(withWarning(props));
+        return confirm<ReturnType<typeof withWarning>>(withWarning(props));
     };
 
     static confirm = function (props: ModalReactProps) {
-        return confirm(withConfirm(props));
+        return confirm<ReturnType<typeof withConfirm>>(withConfirm(props));
     };
 
     static destroyAll = function destroyAllFn() {

packages/semi-ui/modal/confirm.tsx

@@ -5,14 +5,14 @@ import ConfirmModal from './ConfirmModal';
 
 import '@douyinfe/semi-foundation/modal/modal.scss';
 import { get } from 'lodash';
-import { IconAlertTriangle, IconInfoCircle, IconTickCircle, IconHelpCircle, IconAlertCircle } from '@douyinfe/semi-icons';
+import { IconAlertCircle, IconAlertTriangle, IconHelpCircle, IconInfoCircle, IconTickCircle } from '@douyinfe/semi-icons';
 import { Motion } from '../_base/base';
 
-export interface ConfirmProps extends ModalReactProps{
+export interface ConfirmProps extends ModalReactProps {
     type: 'success' | 'info' | 'warning' | 'error' | 'confirm';
 }
 
-export default function confirm(props: ConfirmProps) {
+export default function confirm<T>(props: ConfirmProps) {
     // create a dom in adapter?
     const div = document.createElement('div');
     document.body.appendChild(div);
@@ -51,7 +51,7 @@ export default function confirm(props: ConfirmProps) {
     } : false;
 
     function render(renderProps: ConfirmProps) {
-        ReactDOM.render(<ConfirmModal {...renderProps} motion={mergedMotion} />, div);
+        ReactDOM.render(<ConfirmModal {...renderProps} motion={mergedMotion}/>, div);
     }
 
     function close() {
@@ -62,7 +62,7 @@ export default function confirm(props: ConfirmProps) {
         render(currentConfig);
     }
 
-    function update(newConfig: ConfirmProps) {
+    function update(newConfig: T extends { type: Exclude<ConfirmProps['type'], 'confirm'> } ? ModalReactProps : ConfirmProps) {
         currentConfig = {
             ...currentConfig,
             ...newConfig,
@@ -79,11 +79,10 @@ export default function confirm(props: ConfirmProps) {
 }
 
 
-
 export function withInfo(props: ModalReactProps) {
     return {
         type: 'info' as const,
-        icon: <IconInfoCircle />,
+        icon: <IconInfoCircle/>,
         ...props
     };
 }
@@ -91,7 +90,7 @@ export function withInfo(props: ModalReactProps) {
 export function withSuccess(props: ModalReactProps) {
     return {
         type: 'success' as const,
-        icon: <IconTickCircle />,
+        icon: <IconTickCircle/>,
         ...props
     };
 }
@@ -99,7 +98,7 @@ export function withSuccess(props: ModalReactProps) {
 export function withWarning(props: ModalReactProps) {
     return {
         type: 'warning' as const,
-        icon: <IconAlertTriangle />,
+        icon: <IconAlertTriangle/>,
         ...props
     };
 }
@@ -107,7 +106,7 @@ export function withWarning(props: ModalReactProps) {
 export function withError(props: ModalReactProps) {
     return {
         type: 'error' as const,
-        icon: <IconAlertCircle />,
+        icon: <IconAlertCircle/>,
         ...props
     };
 }
@@ -115,7 +114,7 @@ export function withError(props: ModalReactProps) {
 export function withConfirm(props: ModalReactProps) {
     return {
         type: 'confirm' as const,
-        icon: <IconHelpCircle />,
+        icon: <IconHelpCircle/>,
         ...props
     };
 }

packages/semi-ui/modal/useModal/index.tsx

@@ -19,7 +19,15 @@ function usePatchElement(): ([ReactNode[], (element: ReactNode) => () => void])
     return [elements, patchElement];
 }
 
-export default function useModal() {
+type UseModalReturnHooksType = (config: ModalReactProps) => { destroy: () => void, update: (newConfig: ConfirmProps) => void };
+
+export default function useModal(): [{
+    info: UseModalReturnHooksType,
+    success: UseModalReturnHooksType,
+    error:UseModalReturnHooksType,
+    warning: UseModalReturnHooksType,
+    confirm: UseModalReturnHooksType
+}, ReactNode] {
     const [elements, patchElement] = usePatchElement();
 
     // eslint-disable-next-line max-len