feat(TimePicker): support preview mode

Author: myronliu347

src/time-picker/time-picker.jsx

@@ -147,6 +147,15 @@ class TimePicker extends Component {
          * 是否禁用
          */
         disabled: PropTypes.bool,
+        /**
+         * 是否为预览态
+         */
+        isPreview: PropTypes.bool,
+        /**
+         * 预览态模式下渲染的内容
+         * @param {number} value 评分值
+         */
+        renderPreview: PropTypes.func,
         /**
          * 时间值改变时的回调
          * @param {Object|String} value 时间对象或时间字符串
@@ -316,6 +325,30 @@ class TimePicker extends Component {
         this.props.onVisibleChange(visible, type);
     };
 
+    renderPreview(others) {
+        const { prefix, format, renderPreview } = this.props;
+        const { value } = this.state;
+        const previewCls = classnames({
+            [`${prefix}form-preview`]: true,
+        });
+
+        const label = value ? value.format(format) : '';
+
+        if (typeof renderPreview === 'function') {
+            return (
+                <div {...others} className={previewCls}>
+                    {renderPreview(value, this.props)}
+                </div>
+            );
+        }
+
+        return (
+            <p {...others} className={previewCls}>
+                {label}
+            </p>
+        );
+    }
+
     render() {
         const {
             prefix,
@@ -346,11 +379,18 @@ class TimePicker extends Component {
             className,
             locale,
             rtl,
+            isPreview,
             ...others
         } = this.props;
 
         const { value, inputStr, inputing, visible } = this.state;
 
+        if (isPreview) {
+            return this.renderPreview(
+                obj.pickOthers(others, TimePicker.PropTypes)
+            );
+        }
+
         const triggerCls = classnames({
             [`${prefix}time-picker-trigger`]: true,
         });

test/time-picker/index-spec.js

@@ -133,6 +133,18 @@ describe('TimePicker', () => {
                 ).at(10).text() === '10'
             );
         });
+        it('should support preview mode render', () => {
+            wrapper = mount(<TimePicker defaultValue="12:00:00" isPreview />);
+            assert(wrapper.find('.next-form-preview').length > 0);
+            assert(wrapper.find('.next-form-preview').text() === '12:00:00');
+            wrapper.setProps({
+                renderPreview: (value) => {
+                    assert(value.format('HH:mm:ss') === '12:00:00');
+                    return 'Hello World';
+                }
+            });
+            assert(wrapper.find('.next-form-preview').text() === 'Hello World');
+        });
     });
 
     describe('action', () => {