refactor: Ts rewrite patination notification modal menu (#2699)

components/index.tsx

@@ -37,6 +37,18 @@ export { LocaleProvider };
 import message from './message';
 export { message };
 
+import Menu from './menu';
+export { Menu };
+
+import Modal from './modal';
+export { Modal };
+
+import notification from './notification';
+export { notification };
+
+import Pagination from './pagination';
+export { Pagination };
+
 import Popconfirm from './popconfirm';
 export { Popconfirm };
 

components/menu/index.tsx

@@ -5,7 +5,65 @@ import animation from '../_util/openAnimation';
 function noop() {
 }
 
-export default class Menu extends React.Component {
+interface OpenCloseParam {
+  openKeys: Array<string>;
+  key: string;
+  item: any;
+  trigger: string;
+  open: boolean;
+  keyPath: Array<string>;
+}
+
+interface SelectParam {
+  key: string;
+  keyPath: Array<string>;
+  item: any;
+  domEvent: any;
+  selectedKeys: Array<string>;
+}
+
+interface ClickParam {
+  key: string;
+  keyPath: Array<string>;
+  item: any;
+  domEvent: any;
+}
+
+export interface MenuProps {
+  id?: string;
+  /** 主题颜色*/
+  theme?: 'light' | 'dark';
+  /** 菜单类型  enum: `vertical` `horizontal` `inline`*/
+  mode?: 'vertical' | 'horizontal' | 'inline';
+  /** 当前选中的菜单项 key 数组*/
+  selectedKeys?: Array<string>;
+  /** 初始选中的菜单项 key 数组*/
+  defaultSelectedKeys?: Array<string>;
+  /** 当前展开的菜单项 key 数组*/
+  openKeys?: Array<string>;
+  /** 初始展开的菜单项 key 数组*/
+  defaultOpenKeys?: Array<string>;
+  onOpen?: (param: OpenCloseParam) => void;
+  onClose?: (param: OpenCloseParam) => void;
+  /**
+   * 被选中时调用
+   *
+   * @type {(item: any, key: string, selectedKeys: Array<string>) => void}
+   */
+  onSelect?: (param: SelectParam) => void;
+  /** 取消选中时调用*/
+  onDeselect?: (param: SelectParam) => void;
+  /** 点击 menuitem 调用此函数*/
+  onClick?: (param: ClickParam) => void;
+  /** 根节点样式*/
+  style?: React.CSSProperties;
+  openAnimation?: string | Object;
+  openTransitionName?: string | Object;
+  className?: string;
+  prefixCls?: string;
+}
+
+export default class Menu extends React.Component<MenuProps, any> {
   static Divider = Divider;
   static Item = Item;
   static SubMenu = SubMenu;
@@ -18,6 +76,7 @@ export default class Menu extends React.Component {
     className: '',
     theme: 'light',  // or dark
   };
+  switchModeFromInline: boolean;
   constructor(props) {
     super(props);
     this.state = {

components/modal/Modal.tsx

@@ -9,7 +9,50 @@ function noop() {}
 let mousePosition;
 let mousePositionEventBinded;
 
-export default class Modal extends React.Component {
+export interface ModalProps {
+  /** 对话框是否可见*/
+  visible?: boolean;
+  /** 确定按钮 loading*/
+  confirmLoading?: boolean;
+  /** 标题*/
+  title?: React.ReactNode;
+  /** 是否显示右上角的关闭按钮*/
+  closable?: boolean;
+  /** 点击确定回调*/
+  onOk?: () => void;
+  /** 点击遮罩层或右上角叉或取消按钮的回调*/
+  onCancel?: (e: React.MouseEvent) => void;
+  /** 宽度*/
+  width?: string | number;
+  /** 底部内容*/
+  footer?: React.ReactNode;
+  /** 确认按钮文字*/
+  okText?: string;
+  /** 取消按钮文字*/
+  cancelText?: string;
+  /** 点击蒙层是否允许关闭*/
+  maskClosable?: boolean;
+  style?: React.CSSProperties;
+  wrapClassName?: string;
+  maskTransitionName?: string;
+  transitionName?: string;
+  className?: string;
+}
+
+export interface ModalContext {
+  antLocale?: {
+    Modal?: any,
+  };
+}
+
+export default class Modal extends React.Component<ModalProps, any> {
+  static info: any;
+  static success: any;
+  static error: any;
+  static warn: any;
+  static warning: any;
+  static confirm: any;
+
   static defaultProps = {
     prefixCls: 'ant-modal',
     onOk: noop,
@@ -40,6 +83,8 @@ export default class Modal extends React.Component {
     antLocale: React.PropTypes.object,
   };
 
+  context: ModalContext;
+
   handleCancel = (e) => {
     this.props.onCancel(e);
   }

components/modal/confirm.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom';
 import Dialog from './Modal';
 import Icon from '../icon';
 import Button from '../button';

components/modal/index.tsx

@@ -1,7 +1,20 @@
+import * as React from 'react';
 import Modal from './Modal';
 import confirm from './confirm';
 import assign from 'object-assign';
-Modal.info = function (props) {
+
+export interface ModalFuncProps {
+  visible?: boolean;
+  title?: React.ReactNode;
+  content?: React.ReactNode;
+  onOk?: (func: Function) => any;
+  onCancel?: (func: Function) => any;
+  width?: string | number;
+  iconClassName?: string;
+  okText?: string;
+  cancelText?: string;
+}
+Modal.info = function (props: ModalFuncProps) {
   const config = assign({}, {
     type: 'info',
     iconType: 'info-circle',
@@ -10,7 +23,7 @@ Modal.info = function (props) {
   return confirm(config);
 };
 
-Modal.success = function (props) {
+Modal.success = function (props: ModalFuncProps) {
   const config = assign({}, {
     type: 'success',
     iconType: 'check-circle',
@@ -19,7 +32,7 @@ Modal.success = function (props) {
   return confirm(config);
 };
 
-Modal.error = function (props) {
+Modal.error = function (props: ModalFuncProps) {
   const config = assign({}, {
     type: 'error',
     iconType: 'cross-circle',
@@ -28,7 +41,7 @@ Modal.error = function (props) {
   return confirm(config);
 };
 
-Modal.warning = Modal.warn = function (props) {
+Modal.warning = Modal.warn = function (props: ModalFuncProps) {
   const config = assign({}, {
     type: 'warning',
     iconType: 'exclamation-circle',
@@ -37,7 +50,7 @@ Modal.warning = Modal.warn = function (props) {
   return confirm(config);
 };
 
-Modal.confirm = function (props) {
+Modal.confirm = function (props: ModalFuncProps) {
   const config = assign({}, {
     type: 'confirm',
     okCancel: true,

components/notification/index.tsx

@@ -6,11 +6,26 @@ let defaultTop = 24;
 let notificationInstance;
 let defaultDuration = 4.5;
 
+export interface ArgsProps {
+  /** 通知提醒标题，必选 */
+  message: React.ReactNode;
+  /** 通知提醒内容，必选*/
+  description: React.ReactNode;
+  /** 自定义关闭按钮*/
+  btn?: React.ReactNode;
+  /** 当前通知唯一标志*/
+  key?: string;
+  /** 点击默认关闭按钮时触发的回调函数*/
+  onClose?: () => void;
+  /** 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭*/
+  duration?: number;
+}
+
 function getNotificationInstance() {
   if (notificationInstance) {
     return notificationInstance;
   }
-  notificationInstance = Notification.newInstance({
+  notificationInstance = (Notification as any).newInstance({
     prefixCls: 'ant-notification',
     style: {
       top: defaultTop,
@@ -91,9 +106,9 @@ const api = {
 };
 
 ['success', 'info', 'warning', 'error'].forEach((type) => {
-  api[type] = (args) => api.open(assign({}, args, { icon: type }));
+  api[type] = (args: ArgsProps) => api.open(assign({}, args, { icon: type }));
 });
 
-api.warn = api.warning;
+(api as any).warn = (api as any).warning;
 
 export default api;

components/pagination/MiniSelect.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Select from '../select';
 
-export default class MiniSelect extends React.Component {
+export default class MiniSelect extends React.Component<any, any> {
   static Option = Select.Option;
 
   render() {

components/pagination/Pagination.tsx

@@ -4,7 +4,45 @@ import Select from '../select';
 import MiniSelect from './MiniSelect';
 import zhCN from './locale/zh_CN';
 
-export default class Pagination extends React.Component {
+export interface PaginationProps {
+  /** 当前页数*/
+  current?: number;
+  /** 默认的当前页数*/
+  defaultCurrent?: number;
+  /** 数据总数*/
+  total: number;
+  /** 初始的每页条数*/
+  defaultPageSize?: number;
+  /** 每页条数*/
+  pageSize?: number;
+  /** 页码改变的回调，参数是改变后的页码*/
+  onChange?: (page: number) => void;
+  /** 是否可以改变 pageSize */
+  showSizeChanger?: boolean;
+  /** 指定每页可以显示多少条*/
+  pageSizeOptions?: Array<string>;
+  /** pageSize 变化的回调  */
+  onShowSizeChange?: (current: number, size: number) => void;
+  /** 是否可以快速跳转至某页*/
+  showQuickJumper?: boolean;
+  /** 当为「small」时，是小尺寸分页 */
+  size?: string;
+  /** 当添加该属性时，显示为简单分页*/
+  simple?: Object;
+  /** 用于显示总共有多少条数据*/
+  showTotal?: (total: number) => React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+  locale?: Object;
+}
+
+export interface PaginationContext {
+  antLocale?: {
+    Pagination?: any,
+  };
+}
+
+export default class Pagination extends React.Component<PaginationProps, any> {
   static defaultProps = {
     locale: zhCN,
     className: '',
@@ -15,6 +53,8 @@ export default class Pagination extends React.Component {
     antLocale: React.PropTypes.object,
   };
 
+  context: PaginationContext;
+
   render() {
     let className = this.props.className;
     let selectComponentClass = Select;