[v4] fix type definition (#3851)

- location, history, match 等定义改为从 umi 引入继承
- 更新部分依赖的版本
- 一些其他的类型定义优化

package.json

@@ -33,8 +33,8 @@
     "docker:push": "npm run docker-hub:build && npm run docker:tag && docker push antdesign/ant-design-pro"
   },
   "dependencies": {
-    "ant-design-pro": "^2.1.1",
-    "antd": "^3.10.9",
+    "ant-design-pro": "^2.3.0",
+    "antd": "^3.15.0",
     "classnames": "^2.2.6",
     "dva": "^2.4.0",
     "lodash": "^4.17.10",
@@ -43,13 +43,13 @@
     "moment": "^2.22.2",
     "omit.js": "^1.0.0",
     "path-to-regexp": "^2.4.0",
-    "prop-types": "^15.5.10",
     "rc-animate": "^2.4.4",
-    "react": "^16.6.3",
+    "react": "^16.8.5",
     "react-container-query": "^0.11.0",
     "react-copy-to-clipboard": "^5.0.1",
     "react-document-title": "^2.0.3",
     "react-media-hook2": "^1.0.2",
+    "umi": "^2.6.10",
     "umi-request": "^1.0.0"
   },
   "devDependencies": {
@@ -60,7 +60,6 @@
     "@types/memoize-one": "^4.1.0",
     "@types/react": "^16.8.1",
     "@types/react-document-title": "^2.0.3",
-    "@types/react-dom": "^16.0.11",
     "antd-pro-merge-less": "^1.0.0",
     "antd-theme-webpack-plugin": "^1.2.0",
     "babel-eslint": "^10.0.1",
@@ -98,7 +97,6 @@
     "tslint-config-prettier": "^1.17.0",
     "tslint-eslint-rules": "^5.4.0",
     "tslint-react": "^3.6.0",
-    "umi": "^2.4.4",
     "umi-plugin-ga": "^1.1.3",
     "umi-plugin-pro-block": "^1.2.0",
     "umi-plugin-react": "^1.3.4",

src/components/GlobalHeader/RightContent.tsx

@@ -170,7 +170,7 @@ export default class GlobalHeaderRight extends Component<GlobalHeaderRightProps>
             title="notification"
             emptyText={formatMessage({ id: 'component.globalHeader.notification.empty' })}
             emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg"
-            showViewMore // todo:showViewMore?: boolean;  skeletonProps?: SkeletonProps;
+            showViewMore
           />
           <NoticeIcon.Tab
             count={unreadMsg.message}

src/components/SiderMenu/BaseMenu.tsx

@@ -4,6 +4,7 @@ import { Icon, Menu } from 'antd';
 import { MenuMode, MenuTheme } from 'antd/es/menu';
 import classNames from 'classnames';
 import React, { Component } from 'react';
+import { RouterTypes } from 'umi';
 import Link from 'umi/link';
 import { urlToList } from '../_utils/pathTools';
 import styles from './index.less';
@@ -29,10 +30,7 @@ const getIcon = (icon?: string | React.ReactNode) => {
   return icon;
 };
 
-/**
- * @type R: is route
- */
-export interface MenuDataItem<R extends boolean = false> {
+export interface MenuDataItem {
   authority?: string[] | string;
   children?: MenuDataItem[];
   hideChildrenInMenu?: boolean;
@@ -41,17 +39,19 @@ export interface MenuDataItem<R extends boolean = false> {
   locale?: string;
   name?: string;
   path: string;
-  routes?: R extends true ? MenuDataItem<R>[] : never;
   [key: string]: any;
 }
 
-export interface BaseMenuProps {
+export interface Route extends MenuDataItem {
+  routes?: Route[];
+}
+
+export interface BaseMenuProps extends Partial<RouterTypes<Route>> {
   className?: string;
   collapsed?: boolean;
   flatMenuKeys?: any[];
   handleOpenChange?: (openKeys: string[]) => void;
   isMobile?: boolean;
-  location?: Location;
   menuData?: MenuDataItem[];
   mode?: MenuMode;
   onCollapse?: (collapsed: boolean) => void;
@@ -62,9 +62,8 @@ export interface BaseMenuProps {
 }
 
 export default class BaseMenu extends Component<BaseMenuProps> {
-  static defaultProps: BaseMenuProps = {
+  static defaultProps: Partial<BaseMenuProps> = {
     flatMenuKeys: [],
-    location: window.location,
     onCollapse: () => void 0,
     isMobile: false,
     openKeys: [],
@@ -107,7 +106,7 @@ export default class BaseMenu extends Component<BaseMenuProps> {
             item.icon ? (
               <span>
                 {getIcon(item.icon)}
-                <span>{name}</span>
+                <span>{item.name}</span>
               </span>
             ) : (
               item.name

src/components/SiderMenu/SiderMenu.tsx

@@ -25,9 +25,8 @@ interface SiderMenuState {
 }
 
 export default class SiderMenu extends Component<SiderMenuProps, SiderMenuState> {
-  static defaultProps: SiderMenuProps = {
+  static defaultProps: Partial<SiderMenuProps> = {
     flatMenuKeys: [],
-    location: window.location,
     onCollapse: () => void 0,
     isMobile: false,
     openKeys: [],

src/components/SiderMenu/index.tsx

@@ -5,7 +5,7 @@ import SiderMenu from './SiderMenu';
 import { getFlatMenuKeys } from './SiderMenuUtils';
 
 export { SiderMenuProps };
-export { MenuDataItem } from './BaseMenu';
+export { MenuDataItem, Route } from './BaseMenu';
 
 const SiderMenuWrapper: React.FC<SiderMenuProps> = props => {
   const { isMobile, menuData, collapsed, onCollapse } = props;

src/layouts/BasicLayout.tsx

@@ -1,4 +1,3 @@
-import PageLoading from '@/components/PageLoading';
 import SiderMenu, { MenuDataItem, SiderMenuProps } from '@/components/SiderMenu';
 import { ConnectProps, ConnectState, SettingModelState } from '@/models/connect';
 import getPageTitle from '@/utils/getPageTitle';
@@ -51,13 +50,11 @@ export interface BasicLayoutProps
     HeaderViewProps,
     Partial<SettingModelState> {
   breadcrumbNameMap: { [path: string]: MenuDataItem };
-  route: MenuDataItem;
 }
 
-export interface BasicLayoutContext {
-  location: Location;
+export type BasicLayoutContext = { [K in 'location']: BasicLayoutProps[K] } & {
   breadcrumbNameMap: { [path: string]: MenuDataItem };
-}
+};
 
 const BasicLayout: React.FC<BasicLayoutProps> = props => {
   const {
@@ -71,8 +68,9 @@ const BasicLayout: React.FC<BasicLayoutProps> = props => {
     location,
     menuData,
     navTheme,
-    route: { routes, authority },
+    route,
   } = props;
+  const { routes, authority } = route!;
   /**
    * constructor
    */
@@ -130,13 +128,13 @@ const BasicLayout: React.FC<BasicLayoutProps> = props => {
       <DocumentTitle title={getPageTitle(location!.pathname, breadcrumbNameMap)}>
         <ContainerQuery query={query}>
           {params => (
-            <Context.Provider value={{ location: location!, breadcrumbNameMap }}>
+            <Context.Provider value={{ location, breadcrumbNameMap }}>
               <div className={classNames(params)}>{layout}</div>
             </Context.Provider>
           )}
         </ContainerQuery>
       </DocumentTitle>
-      <Suspense fallback={<PageLoading />}>{renderSettingDrawer()}</Suspense>
+      <Suspense fallback={null}>{renderSettingDrawer()}</Suspense>
     </React.Fragment>
   );
 };

src/layouts/Footer.tsx

@@ -28,7 +28,7 @@ const FooterView = () => (
       ]}
       copyright={
         <Fragment>
-          Copyright <Icon type="copyright" /> 2018 蚂蚁金服体验技术部出品
+          Copyright <Icon type="copyright" /> 2019 蚂蚁金服体验技术部出品
         </Fragment>
       }
     />

src/layouts/Header.tsx

@@ -25,7 +25,7 @@ interface HeaderViewState {
 }
 
 class HeaderView extends Component<HeaderViewProps, HeaderViewState> {
-  static defaultProps: HeaderViewProps = {
+  static defaultProps: Partial<HeaderViewProps> = {
     handleMenuCollapse: () => void 0,
   };
 

src/layouts/UserLayout.tsx

@@ -37,17 +37,14 @@ const copyright = (
 );
 
 export interface UserLayoutProps extends ConnectProps {
-  route: MenuDataItem;
   breadcrumbNameMap: { [path: string]: MenuDataItem };
   navTheme: string;
 }
 
 class UserLayout extends Component<UserLayoutProps> {
   componentDidMount() {
-    const {
-      dispatch,
-      route: { routes, authority },
-    } = this.props;
+    const { dispatch, route } = this.props;
+    const { routes, authority } = route!;
     dispatch!({
       type: 'menu/getMenuData',
       payload: { routes, authority },

src/models/connect.d.ts

@@ -1,5 +1,7 @@
+import { Route } from '@/components/SiderMenu';
 import { EffectsCommandMap } from 'dva';
 import { AnyAction } from 'redux';
+import { RouterTypes } from 'umi';
 import { GlobalModelState } from './global';
 import { MenuModelState } from './menu';
 import { UserModelState } from './user';
@@ -44,18 +46,10 @@ export interface ConnectState {
 
 /**
  * @type T: Params matched in dynamic routing
- * @type R: Instance type of ref
  */
-export interface ConnectProps<T extends { [key: string]: any } = {}, R = any>
-  extends React.Props<R> {
+export interface ConnectProps<T extends { [key: string]: any } = {}>
+  extends Partial<RouterTypes<Route>> {
   dispatch?: Dispatch;
-  location?: Location;
-  match?: {
-    isExact: boolean;
-    params: T;
-    path: string;
-    url: string;
-  };
 }
 
 export default ConnectState;

src/models/global.ts

@@ -2,9 +2,9 @@ import { queryNotices } from '@/services/user';
 import { Subscription } from 'dva';
 import { Reducer } from 'redux';
 import { Effect } from './connect';
-import { INoticeIconData } from 'ant-design-pro/lib/NoticeIcon/NoticeIconTab';
+import { NoticeIconData } from 'ant-design-pro/lib/NoticeIcon/NoticeIconTab';
 
-export interface NoticeItem extends INoticeIconData {
+export interface NoticeItem extends NoticeIconData {
   id: string;
   type: string;
   [key: string]: any;

src/models/menu.ts

@@ -1,4 +1,4 @@
-import { MenuDataItem } from '@/components/SiderMenu';
+import { MenuDataItem, Route } from '@/components/SiderMenu';
 import Authorized from '@/utils/Authorized';
 import { Effect } from 'dva';
 import isEqual from 'lodash/isEqual';
@@ -10,7 +10,7 @@ import defaultSettings from '../../config/defaultSettings';
 
 // Conversion router to menu.
 function formatter(
-  data: MenuDataItem[],
+  data: Route[],
   parentAuthority?: string[] | string,
   parentName?: string,
 ): MenuDataItem[] {
@@ -27,6 +27,7 @@ function formatter(
         ...item,
         name,
         locale,
+        routes: void 0,
         authority: item.authority || parentAuthority,
       };
       if (item.routes) {
@@ -34,7 +35,6 @@ function formatter(
         // Reduce memory usage
         result.children = children;
       }
-      delete result.routes;
       return result;
     });
 }

src/pages/Authorized.tsx

@@ -1,18 +1,17 @@
 import Authorized from '@/utils/Authorized';
+import { Route } from '@/components/SiderMenu';
 import { ConnectProps, ConnectState, UserModelState } from '@/models/connect';
 import { connect } from 'dva';
 import pathToRegexp from 'path-to-regexp';
 import React from 'react';
 import Redirect from 'umi/redirect';
-import { IRoute } from 'umi-types';
 
 interface AuthComponentProps extends ConnectProps {
-  location: Location;
-  routerData: IRoute[];
+  routerData: Route[];
   user: UserModelState;
 }
 
-const getRouteAuthority = (path: string, routeData: IRoute[]) => {
+const getRouteAuthority = (path: string, routeData: Route[]) => {
   let authorities: string[] | string | undefined = void 0;
   routeData.forEach(route => {
     // match prefix
@@ -32,7 +31,7 @@ const AuthComponent: React.FC<AuthComponentProps> = ({ children, location, route
   const isLogin = currentUser && currentUser.name;
   return (
     <Authorized
-      authority={getRouteAuthority(location.pathname, routerData)!}
+      authority={getRouteAuthority(location!.pathname, routerData)!}
       noMatch={isLogin ? <Redirect to="/exception/403" /> : <Redirect to="/user/login" />}
     >
       {children}

src/typings.d.ts

@@ -13,29 +13,3 @@ declare module 'rc-animate';
 declare module 'omit.js';
 declare module 'react-copy-to-clipboard';
 declare var APP_TYPE: string;
-declare module 'ant-design-pro' {
-  import React from 'react';
-  import { INoticeIconProps } from 'ant-design-pro/lib/NoticeIcon';
-  import { INoticeIconTabProps } from 'ant-design-pro/lib/NoticeIcon/NoticeIconTab';
-
-  type PartialNoticeIconProps = {
-    [K in Exclude<keyof INoticeIconProps, 'locale'>]?: INoticeIconProps[K]
-  };
-  interface MixinNoticeIconProps extends PartialNoticeIconProps {
-    locale?: {
-      emptyText: string;
-      clear: string;
-      viewMore: string;
-      [key: string]: string;
-    };
-    onViewMore?: (tabProps: INoticeIconProps) => void;
-  }
-  interface MixinNoticeIconTabProps extends Partial<INoticeIconTabProps> {
-    showViewMore?: boolean;
-  }
-  class NoticeIconTab extends React.Component<MixinNoticeIconTabProps, any> {}
-  export class NoticeIcon extends React.Component<MixinNoticeIconProps, any> {
-    public static Tab: typeof NoticeIconTab;
-  }
-  export * from 'ant-design-pro/lib';
-}