timepicker component feature fix

components/timepicker/demo/basic.md

@@ -1,5 +1,4 @@
-基本
-====
+# 基本
 
 -	order: 0
 

components/timepicker/demo/disabled.md

@@ -1,5 +1,4 @@
-禁用
-====
+# 禁用
 
 -	order: 4
 

components/timepicker/demo/no-default-value.md

@@ -0,0 +1,15 @@
+# 无默认值
+
+-	order: 5
+
+没有默认时间。
+
+---
+
+````jsx
+import { Timepicker } from 'antd';
+
+ReactDOM.render(
+  <Timepicker placeholder="Select sth." />
+, document.getElementById('components-timepicker-demo-no-default-value'));
+````

components/timepicker/demo/size.md

@@ -0,0 +1,19 @@
+# 三种大小
+
+-	order: 6
+
+三种大小的输入框，大的用在表单中，中的为默认。
+
+---
+
+````jsx
+import { Timepicker } from 'antd';
+
+ReactDOM.render(
+  <div>
+    <Timepicker defaultValue="12:08:23" size="large" />
+    <Timepicker defaultValue="12:08:23" />
+    <Timepicker defaultValue="12:08:23" size="small" />
+  </div>
+, document.getElementById('components-timepicker-demo-size'));
+````

components/timepicker/demo/special-minutes.md

@@ -1,5 +1,4 @@
-特定选项
-====
+# 特定选项
 
 -	order: 3
 

components/timepicker/demo/without-seconds.md

@@ -1,5 +1,4 @@
-不展示秒
-====
+# 不展示秒
 
 -	order: 2
 

components/timepicker/index.jsx

@@ -1,9 +1,6 @@
 import React from 'react';
-
 import DateTimeFormat from 'gregorian-calendar-format';
-
 import TimePicker from 'rc-time-picker/lib/TimePicker';
-import TimePanel from 'rc-time-picker/lib/TimePanel';
 
 // import defaultLocale from './locale';
 import TimePickerLocale from 'rc-time-picker/lib/locale/zh_CN';
@@ -17,54 +14,68 @@ const AntTimepicker = React.createClass({
       onChange() {},  // onChange 可用于 Validator
       locale: {},
       align: {
-        offset: [0, -8],
+        offset: [0, -1],
       },
       open: false,
       disabled: false,
       hourOptions: undefined,
       minuteOptions: undefined,
       secondOptions: undefined,
+      size: '',
+      placement: 'bottomLeft',
+      transitionName: 'slide-up',
     };
   },
 
-  render() {
-    const { defaultValue, format, placeholder, align, disabled, hourOptions, minuteOptions, secondOptions } = this.props;
-    const prefixCls = 'ant-timepicker';
-    const formatter = new DateTimeFormat(format);
+  /**
+   * 获得输入框的 className
+   */
+  getSizeClass() {
+    let sizeClass = '';
+    if (this.props.size === 'large') {
+      sizeClass = ' ant-input-lg';
+    } else if (this.props.size === 'small') {
+      sizeClass = ' ant-input-sm';
+    }
+    return sizeClass;
+  },
 
-    let showValue = undefined;
+  /**
+   * 获得输入框的默认值
+   */
+  getDefaultValue(formatter) {
+    const defaultValue = this.props.defaultValue;
     if (defaultValue) {
-      showValue = formatter.parse(defaultValue, {
+      return formatter.parse(defaultValue, {
         locale: defaultValue.locale,
         obeyCount: true,
       });
     }
+    return undefined;
+  },
 
-    const timePanel = (
-      <TimePanel
+  render() {
+    const { format, placeholder, align, disabled, hourOptions, minuteOptions, secondOptions, placement, transitionName } = this.props;
+    const prefixCls = 'ant-timepicker';
+    const formatter = new DateTimeFormat(format);
+
+    return (
+      <TimePicker
         prefixCls={prefixCls}
-        defaultValue={showValue}
         locale={TimePickerLocale}
         formatter={formatter}
         hourOptions={hourOptions}
         minuteOptions={minuteOptions}
         secondOptions={secondOptions}
+        disabled={disabled}
+        align={align}
+        placeholder={placeholder}
+        inputClassName={`ant-input ${this.getSizeClass()}`}
+        defaultValue={this.getDefaultValue(formatter)}
+        placement={placement}
+        transitionName={transitionName}
       />
     );
-    return (
-      <TimePicker prefixCls={prefixCls} panel={timePanel} align={align} disabled={disabled} value={showValue}>
-        {
-          ({value}) => {
-            return (
-              <span>
-                <input className={`${prefixCls}-picker-input ant-input`} type="text" placeholder={placeholder} readOnly disabled={disabled} value={value && formatter.format(value)} />
-                <span className={`${prefixCls}-picker-icon`} />
-              </span>
-            );
-          }
-        }
-      </TimePicker>
-    );
   }
 
 });

components/timepicker/index.md

@@ -1,5 +1,4 @@
-Timepicker
-==========
+# Timepicker
 
 -	category: Components
 -	chinese: 时间选择框
@@ -21,13 +20,17 @@ API
 <Timepicker value="13:30:56" />
 ```
 
-| 参数          | 说明                                                          | 类型     | 默认值                                                          |
-|---------------|---------------------------------------------------------------|----------|-----------------------------------------------------------------|
-| defaultValue  | 默认时间                                                      | string   | 无                                                              |
-| format        | 展示的时间格式                                                | string   | "HH:mm:ss"、"HH:mm"、"mm:ss"                                                      |
-| disabled      | 禁用                                                          | bool     | false                                                           |
-| hourOptions   | 特定可选择的小时 | array | 0 到 24 组成的数组 |
+| 参数            | 说明 | 类型 | 默认值 |
+|-----------------|-----|-----|-------|
+| defaultValue    | 默认时间 | string | 无 |
+| placeholder     | 没有值的时候显示的内容 | string | "请选择时间" |
+| format          | 展示的时间格式 | string | "HH:mm:ss"、"HH:mm"、"mm:ss" |
+| disabled        | 禁用 | bool | false |
+| hourOptions     | 特定可选择的小时 | array | 0 到 24 组成的数组 |
 | minuteOptions   | 特定可选择的分钟 | array | 0 到 60 组成的数组 |
 | secondOptions   | 特定可选择的秒 | array | 0 到 60 组成的数组 |
+| inputClassName  | 输入框的样式 | string |  |
+| placement       | 显示位置 | string | bottomLeft |
+| transitionName  | 显示动画 | string | slide-up |
 
 <style> .code-box-demo .ant-timepicker-picker { margin: 0 12px 12px 0; }</style>

package.json

@@ -57,7 +57,7 @@
     "rc-switch": "~1.3.1",
     "rc-table": "~3.6.1",
     "rc-tabs": "~5.5.0",
-    "rc-time-picker": "^0.2.0",
+    "rc-time-picker": "~0.5.6",
     "rc-tooltip": "~3.2.0",
     "rc-tree": "~0.19.0",
     "rc-trigger": "~1.0.6",

style/components/datepicker/Picker.less

@@ -1,4 +1,4 @@
-.@{calendar-prefix-cls}-picker-container  {
+.@{calendar-prefix-cls}-picker-container {
   position: absolute;
   z-index: 1070;
 

style/components/timepicker.less

@@ -1,7 +1,6 @@
 @timepicker-prefix-cls: ant-timepicker;
 
 .@{timepicker-prefix-cls} {
-  display: inline;
   box-sizing: border-box;
   * {
     box-sizing: border-box;
@@ -9,6 +8,6 @@
 }
 
 @import "timepicker/Picker";
-@import "timepicker/TimePanel";
+@import "timepicker/Panel";
 @import "timepicker/Header";
 @import "timepicker/Select";

style/components/timepicker/Picker.less

@@ -1,3 +1,32 @@
+.@{timepicker-prefix-cls}-picker-container {
+  z-index: 1070;
+  position: absolute;
+
+  &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
+  &.slide-up-enter.slide-up-enter-active&-placement-topRight,
+  &.slide-up-appear.slide-up-appear-active&-placement-topLeft,
+  &.slide-up-appear.slide-up-appear-active&-placement-topRight {
+    animation-name: antSlideDownIn;
+  }
+
+  &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
+  &.slide-up-enter.slide-up-enter-active&-placement-bottomRight,
+  &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft,
+  &.slide-up-appear.slide-up-appear-active&-placement-bottomRight {
+    animation-name: antSlideUpIn;
+  }
+
+  &.slide-up-leave.slide-up-leave-active&-placement-topLeft,
+  &.slide-up-leave.slide-up-leave-active&-placement-topRight {
+    animation-name: antSlideDownOut;
+  }
+
+  &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft,
+  &.slide-up-leave.slide-up-leave-active&-placement-bottomRight {
+    animation-name: antSlideUpOut;
+  }
+}
+
 .@{timepicker-prefix-cls}-picker {
   position: relative;
   display: inline-block;
@@ -5,8 +34,7 @@
   font-size: @font-size-base;
   transition: opacity 0.3s ease;
 
-  &-input {
-    outline: none;
+  > input {
     width: 100px;
   }
 
@@ -26,7 +54,7 @@
     top: 50%;
     margin-top: -6px;
     &:after {
-      content: "\e642";
+      content: "\e643";
       font-family: "anticon";
       font-size: 12px;
       color: #999;

style/components/timepicker/Select.less

@@ -45,6 +45,7 @@
 
     &:hover {
       background: tint(@primary-color, 90%);
+      transition: background 0.3s ease;
     }
   }
 }