Merge branch 'master' of github.com:ant-design/ant-design

components/_util/getScroll.tsx

@@ -1,4 +1,4 @@
-export default function getScroll(target, top) {
+export default function getScroll(target, top): number {
   if (typeof window === 'undefined') {
     return 0;
   }

components/affix/index.tsx

@@ -6,13 +6,13 @@ import shallowequal from 'shallowequal';
 import omit from 'omit.js';
 import getScroll from '../_util/getScroll';
 
-function getTargetRect(target): any {
+function getTargetRect(target): ClientRect {
   return target !== window ?
     target.getBoundingClientRect() :
     { top: 0, left: 0, bottom: 0 };
 }
 
-function getOffset(element, target) {
+function getOffset(element: HTMLElement, target) {
   const elemRect = element.getBoundingClientRect();
   const targetRect = getTargetRect(target);
 
@@ -31,6 +31,13 @@ function getOffset(element, target) {
   };
 }
 
+function noop() {}
+
+function getDefaultTarget() {
+  return typeof window !== 'undefined' ?
+    window : null;
+};
+
 // Affix
 export interface AffixProps {
   /**
@@ -42,7 +49,7 @@ export interface AffixProps {
   offsetBottom?: number;
   style?: React.CSSProperties;
   /** 固定状态改变时触发的回调函数 */
-  onChange?: (affixed?: boolean) => any;
+  onChange?: (affixed?: boolean) => void;
   /** 设置 Affix 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 */
   target?: () => Window | HTMLElement;
   prefixCls?: string;
@@ -55,19 +62,9 @@ export default class Affix extends React.Component<AffixProps, any> {
     target: React.PropTypes.func,
   };
 
-  static defaultProps = {
-    target() {
-      return typeof window !== 'undefined' ?
-        window : null;
-    },
-    onChange() {},
-    prefixCls: 'ant-affix',
-  };
-
   scrollEvent: any;
   resizeEvent: any;
   refs: {
-    [key: string]: any;
     fixedNode: HTMLElement;
   };
 
@@ -80,7 +77,7 @@ export default class Affix extends React.Component<AffixProps, any> {
   }
 
   setAffixStyle(e, affixStyle) {
-    const { onChange, target } = this.props;
+    const { onChange = noop, target = getDefaultTarget } = this.props;
     const originalAffixStyle = this.state.affixStyle;
     const isWindow = target() === window;
     if (e.type === 'scroll' && originalAffixStyle && affixStyle && isWindow) {
@@ -110,7 +107,7 @@ export default class Affix extends React.Component<AffixProps, any> {
   }
 
   updatePosition = (e) => {
-    let { offsetTop, offsetBottom, offset, target } = this.props;
+    let { offsetTop, offsetBottom, offset, target = getDefaultTarget } = this.props;
     const targetNode = target();
 
     // Backwards support
@@ -124,8 +121,8 @@ export default class Affix extends React.Component<AffixProps, any> {
     };
 
     const offsetMode = {
-      top: null as boolean,
-      bottom: null as boolean,
+      top: false,
+      bottom: false,
     };
     // Default to `offsetTop=0`.
     if (typeof offsetTop !== 'number' && typeof offsetBottom !== 'number') {
@@ -174,7 +171,7 @@ export default class Affix extends React.Component<AffixProps, any> {
   }
 
   componentDidMount() {
-    const target = this.props.target;
+    const target = this.props.target || getDefaultTarget;
     this.setTargetEventListeners(target);
   }
 
@@ -208,7 +205,7 @@ export default class Affix extends React.Component<AffixProps, any> {
 
   render() {
     const className = classNames({
-      [this.props.prefixCls]: this.state.affixStyle,
+      [this.props.prefixCls || 'ant-affix']: this.state.affixStyle,
     });
 
     const props = omit(this.props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target']);

components/alert/index.tsx

@@ -4,6 +4,8 @@ import Animate from 'rc-animate';
 import Icon from '../icon';
 import classNames from 'classnames';
 
+function noop() {}
+
 export interface AlertProps {
   /**
    * Type of Alert styles, options:`success`, `info`, `warning`, `error`
@@ -28,9 +30,6 @@ export interface AlertProps {
 
 export default class Alert extends React.Component<AlertProps, any> {
   static defaultProps = {
-    prefixCls: 'ant-alert',
-    showIcon: false,
-    onClose() {},
     type: 'info',
   };
   constructor(props) {
@@ -51,7 +50,7 @@ export default class Alert extends React.Component<AlertProps, any> {
     this.setState({
       closing: false,
     });
-    this.props.onClose(e);
+    (this.props.onClose || noop)(e);
   }
   animationEnd = () => {
     this.setState({
@@ -61,7 +60,7 @@ export default class Alert extends React.Component<AlertProps, any> {
   }
   render() {
     let {
-      closable, description, type, prefixCls, message, closeText, showIcon, banner,
+      closable, description, type, prefixCls = 'ant-alert', message, closeText, showIcon, banner,
     } = this.props;
 
     // banner模式默认有 Icon

components/auto-complete/index.tsx

@@ -46,7 +46,7 @@ export default class AutoComplete extends React.Component<AutoCompleteProps, any
 
   render() {
     let {
-      size, className, notFoundContent, prefixCls, optionLabelProp, dataSource, children,
+      size, className = '', notFoundContent, prefixCls, optionLabelProp, dataSource, children,
     } = this.props;
 
     const cls = classNames({

components/back-top/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import Animate from 'rc-animate';
-import Icon from '../icon';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import classNames from 'classnames';
 import omit from 'omit.js';
+import Icon from '../icon';
 import getScroll from '../_util/getScroll';
 import getRequestAnimationFrame from '../_util/getRequestAnimationFrame';
 
@@ -23,6 +23,13 @@ const easeInOutCubic = (t, b, c, d) => {
   }
 };
 
+function noop() {}
+
+function getDefaultTarget() {
+  return typeof window !== 'undefined' ?
+    window : null;
+}
+
 export interface BackTopProps {
   visibilityHeight?: number;
   onClick?: React.MouseEventHandler<any>;
@@ -34,13 +41,7 @@ export interface BackTopProps {
 
 export default class BackTop extends React.Component<BackTopProps, any> {
   static defaultProps = {
-    onClick() {},
     visibilityHeight: 400,
-    target() {
-      return typeof window !== 'undefined' ?
-        window : null;
-    },
-    prefixCls: 'ant-back-top',
   };
 
   scrollEvent: any;
@@ -64,11 +65,11 @@ export default class BackTop extends React.Component<BackTopProps, any> {
       }
     };
     reqAnimFrame(frameFunc);
-    this.props.onClick(e);
+    (this.props.onClick || noop)(e);
   }
 
   setScrollTop(value) {
-    const targetNode = this.props.target();
+    const targetNode = (this.props.target || getDefaultTarget)();
     if (targetNode === window) {
       document.body.scrollTop = value;
       document.documentElement.scrollTop = value;
@@ -78,7 +79,7 @@ export default class BackTop extends React.Component<BackTopProps, any> {
   }
 
   handleScroll = () => {
-    const { visibilityHeight, target } = this.props;
+    const { visibilityHeight, target = getDefaultTarget } = this.props;
     const scrollTop = getScroll(target(), true);
     this.setState({
       visible: scrollTop > visibilityHeight,
@@ -87,7 +88,7 @@ export default class BackTop extends React.Component<BackTopProps, any> {
 
   componentDidMount() {
     this.handleScroll();
-    this.scrollEvent = addEventListener(this.props.target(), 'scroll', this.handleScroll);
+    this.scrollEvent = addEventListener((this.props.target || getDefaultTarget)(), 'scroll', this.handleScroll);
   }
 
   componentWillUnmount() {
@@ -97,7 +98,7 @@ export default class BackTop extends React.Component<BackTopProps, any> {
   }
 
   render() {
-    const { prefixCls, className, children } = this.props;
+    const { prefixCls = 'ant-back-top', className = '', children } = this.props;
     const classString = classNames({
       [prefixCls]: true,
       [className]: !!className,

components/card/index.tsx

@@ -11,6 +11,7 @@ export interface CardProps {
   loading?: boolean;
   children?: any;
   id?: string;
+  className?: string;
 }
 
 export default (props: CardProps) => {

components/date-picker/demo/time.md

@@ -16,8 +16,9 @@ This property provide an additional time selection. When `showTime` is an Object
 ````jsx
 import { DatePicker } from 'antd';
 
-function onChange(value) {
+function onChange(value, dateString) {
   console.log('Selected Time: ', value);
+  console.log('Formatted Selected Time: ', dateString);
 }
 
 ReactDOM.render(

components/date-picker/index.tsx

@@ -32,10 +32,13 @@ export interface DatePickerProps extends PickerProps, SinglePickerProps {
   showTime?: TimePickerProps | boolean;
   open?: boolean;
   toggleOpen?: (e: {open: boolean}) => void;
+  disabledDate?: (current: moment.Moment) => boolean;
+  onOpenChange?: (status: boolean) => void;
 }
 const DatePicker = wrapPicker(createPicker(RcCalendar)) as React.ClassicComponentClass<DatePickerProps>;
 
 export interface MonthPickerProps extends PickerProps, SinglePickerProps {
+  disabledDate?: (current: moment.Moment) => boolean;
 }
 const MonthPicker = wrapPicker(createPicker(MonthCalendar), 'YYYY-MM');
 

components/form/demo/inline-form.md

@@ -14,7 +14,7 @@ title:
 Inline form is often used for login.
 
 ````jsx
-import { Form, Input, Button, Checkbox } from 'antd';
+import { Form, Icon, Input, Button, Checkbox } from 'antd';
 const FormItem = Form.Item;
 
 let Demo = React.createClass({
@@ -27,18 +27,14 @@ let Demo = React.createClass({
     const { getFieldDecorator } = this.props.form;
     return (
       <Form inline onSubmit={this.handleSubmit}>
-        <FormItem
-          label="Account"
-        >
+        <FormItem>
           {getFieldDecorator('userName')(
-            <Input placeholder="Please input the account" />
+            <Input addonBefore={<Icon type="user" />} placeholder="Please input the account" />
           )}
         </FormItem>
-        <FormItem
-          label="Password"
-        >
+        <FormItem>
           {getFieldDecorator('password')(
-            <Input type="password" placeholder="Please input the password" />
+            <Input addonBefore={<Icon type="lock" />} type="password" placeholder="Please input the password" />
           )}
         </FormItem>
         <FormItem>

components/form/style/index.less

@@ -62,6 +62,7 @@ input[type="checkbox"] {
   font-size: @font-size-base;
   margin-bottom: @form-item-margin-bottom;
   color: #666;
+  vertical-align: top;
 
   // nested FormItem
   & > &,

components/icon/index.tsx

@@ -8,6 +8,7 @@ export interface IconProps {
   title?: string;
   onClick?: React.MouseEventHandler<any>;
   spin?: boolean;
+  style?: React.CSSProperties;
 }
 
 export default (props: IconProps) => {

components/input/style/mixin.less

@@ -130,7 +130,7 @@
 
   &-addon,
   &-wrap {
-    width: 1%;
+    width: 1px; // To make addon/wrap as small as possible
     white-space: nowrap;
     vertical-align: middle;
   }

components/slider/style/index.less

@@ -91,6 +91,7 @@
     position: absolute;
     width: 100%;
     height: 4px;
+    margin: 5px 0;
     background: transparent;
     z-index: 1;
   }