diff --git a/components/dropdown/dropdown-button.tsx b/components/dropdown/dropdown-button.tsx index acdacad89b..0fe00bb589 100644 --- a/components/dropdown/dropdown-button.tsx +++ b/components/dropdown/dropdown-button.tsx @@ -5,7 +5,18 @@ import Dropdown from './dropdown'; const ButtonGroup = Button.Group; import classNames from 'classnames'; import splitObject from '../_util/splitObject'; -export default class DropdownButton extends React.Component { + +export interface DropdownButtonProps { + type?: 'primary' | 'ghost' | 'dash'; + onClick?: React.FormEventHandler; + trigger?: 'click' | 'hover'; + overlay: React.ReactNode; + visible?: boolean; + onVisibleChange?: (visible: boolean) => void; + style?: React.CSSProperties; +} + +export default class DropdownButton extends React.Component { static defaultProps = { align: { points: ['tr', 'br'], diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx index e10fa7280e..10d4685fe3 100644 --- a/components/dropdown/dropdown.tsx +++ b/components/dropdown/dropdown.tsx @@ -2,10 +2,11 @@ import * as React from 'react'; import RcDropdown from 'rc-dropdown'; export interface DropDownProps { - trigger: string[]; + trigger?: Array<'click'|'hover'>; overlay: React.ReactNode; - visible: boolean; + style?: React.CSSProperties; onVisibleChange: (visible: boolean) => void; + visible: boolean; } export default class Dropdown extends React.Component { diff --git a/components/form/Form.tsx b/components/form/Form.tsx index 140dad9637..1ae7dbb232 100644 --- a/components/form/Form.tsx +++ b/components/form/Form.tsx @@ -3,8 +3,84 @@ import classNames from 'classnames'; import PureRenderMixin from 'react-addons-pure-render-mixin'; import omit from 'object.omit'; import warning from 'warning'; +import FormItem from './FormItem'; -export default class Form extends React.Component { +interface FormCreateOption { + onFieldsChange?: (props: any, fields: Array) => void; + /** 把 props 转为对应的值,可用于把 Redux store 中的值读出 */ + mapPropsToFields?: (props: any) => void; +} + +interface FormProps { + prefixCls?: string; + /** 水平排列布局*/ + horizontal?: boolean; + /** 行内排列布局*/ + inline?: boolean; + /** 经 `Form.create()` 包装过的组件会自带 `this.props.form` 属性,直接传给 Form 即可*/ + form?: Object; + /** 数据验证成功后回调事件*/ + onSubmit?: React.FormEventHandler; + + style?: React.CSSProperties; + className?: string; + vertical?: boolean; +} + +// function create +type CreateFormOptions = { + /** 获取一组输入控件的值,如不传入参数,则获取全部组件的值*/ + getFieldsValue(): (fieldNames?: Array) => any; + /** 获取一个输入控件的值*/ + getFieldValue(): (fieldName: string) => any; + /** 设置一组输入控件的值*/ + setFieldsValue(): (obj: Object) => void; + /** 设置一组输入控件的值*/ + setFields(): (obj: Object) => void; + /** 校验并获取一组输入域的值与 Error*/ + validateFields(): (fieldNames?: Array, options?: Object, callback?: (erros: any, values: any) => void) => any; + /** 与 `validateFields` 相似,但校验完后,如果校验不通过的菜单域不在可见范围内,则自动滚动进可见范围 */ + validateFieldsAndScroll(): ( + fieldNames?: Array, + options?: Object, + callback?: (erros: any, values: any) => void + ) => any; + /** 获取某个输入控件的 Error */ + getFieldError(): (name: string) => Object; + /** 判断一个输入控件是否在校验状态*/ + isFieldValidating(): (name: string) => Object; + /**重置一组输入控件的值与状态,如不传入参数,则重置所有组件*/ + resetFields(): (names?: Array) => void; + + getFieldsValue(): (id: string, options: { + /** 子节点的值的属性,如 Checkbox 的是 'checked'*/ + valuePropName?: string; + /** 子节点的初始值,类型、可选值均由子节点决定*/ + initialValue?: any; + /** 收集子节点的值的时机*/ + trigger?: string; + /** 校验子节点值的时机*/ + validateTrigger?: string; + /** 校验规则,参见 [async-validator](https://github.com/yiminghe/async-validator) */ + rules?: Array; + /** 必填输入控件唯一标志*/ + id?: string; + }) => Array; +} + +interface FormComponentProps { + form: CreateFormOptions; +} + +export class FormComponent extends React.Component { +} + +interface ComponentDecorator { + (component: T): T; +} + +export default class Form extends React.Component { + static Item: typeof FormItem; static defaultProps = { prefixCls: 'ant-form', onSubmit(e) { @@ -21,6 +97,7 @@ export default class Form extends React.Component { onSubmit: React.PropTypes.func, }; + static create(options?: FormCreateOption): ComponentDecorator; constructor(props) { super(props); diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx index 5e237bfc09..7f1d826d4d 100644 --- a/components/form/FormItem.tsx +++ b/components/form/FormItem.tsx @@ -5,7 +5,26 @@ import Row from '../row'; import Col from '../col'; import { FIELD_META_PROP } from './constants'; -export default class FormItem extends React.Component { +export interface FormItemLabelColOption { + span: number; + offset: number; +} + +export interface FormItemProps { + prefixCls?: string; + label?: React.ReactNode; + labelCol?: FormItemLabelColOption; + wrapperCol?: FormItemLabelColOption; + help?: React.ReactNode; + extra?: string; + validateStatus?: 'success' | 'warning' | 'error' | 'validating'; + hasFeedback?: boolean; + className?: string; + required?: boolean; + style?: React.CSSProperties; +} + +export default class FormItem extends React.Component { static defaultProps = { hasFeedback: false, prefixCls: 'ant-form',