diff --git a/components/index.tsx b/components/index.tsx index c6deb547b4..9a66fa252d 100644 --- a/components/index.tsx +++ b/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 }; diff --git a/components/menu/index.tsx b/components/menu/index.tsx index 980e031b38..9855abae92 100644 --- a/components/menu/index.tsx +++ b/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; + key: string; + item: any; + trigger: string; + open: boolean; + keyPath: Array; +} + +interface SelectParam { + key: string; + keyPath: Array; + item: any; + domEvent: any; + selectedKeys: Array; +} + +interface ClickParam { + key: string; + keyPath: Array; + item: any; + domEvent: any; +} + +export interface MenuProps { + id?: string; + /** 主题颜色*/ + theme?: 'light' | 'dark'; + /** 菜单类型 enum: `vertical` `horizontal` `inline`*/ + mode?: 'vertical' | 'horizontal' | 'inline'; + /** 当前选中的菜单项 key 数组*/ + selectedKeys?: Array; + /** 初始选中的菜单项 key 数组*/ + defaultSelectedKeys?: Array; + /** 当前展开的菜单项 key 数组*/ + openKeys?: Array; + /** 初始展开的菜单项 key 数组*/ + defaultOpenKeys?: Array; + onOpen?: (param: OpenCloseParam) => void; + onClose?: (param: OpenCloseParam) => void; + /** + * 被选中时调用 + * + * @type {(item: any, key: string, selectedKeys: Array) => 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 { 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 = { diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx index 76578f06de..51c5deaae4 100644 --- a/components/modal/Modal.tsx +++ b/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 { + 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); } diff --git a/components/modal/confirm.tsx b/components/modal/confirm.tsx index a15c21e8cb..985fbc7687 100644 --- a/components/modal/confirm.tsx +++ b/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'; diff --git a/components/modal/index.tsx b/components/modal/index.tsx index 89cc01803b..15c355862c 100644 --- a/components/modal/index.tsx +++ b/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, diff --git a/components/notification/index.tsx b/components/notification/index.tsx index 7c00dd8540..86b6b352eb 100644 --- a/components/notification/index.tsx +++ b/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; diff --git a/components/pagination/MiniSelect.tsx b/components/pagination/MiniSelect.tsx index 945fe94fca..4da99813ea 100644 --- a/components/pagination/MiniSelect.tsx +++ b/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 { static Option = Select.Option; render() { diff --git a/components/pagination/Pagination.tsx b/components/pagination/Pagination.tsx index 496ada416c..59859f1445 100644 --- a/components/pagination/Pagination.tsx +++ b/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; + /** 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 { 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;