feat(TreeSelect): support preview mode

Author: myronliu347

src/tree-select/tree-select.jsx

@@ -5,6 +5,7 @@ import React, {
     cloneElement,
 } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import Select from '../select';
 import Tree from '../tree';
 import {
@@ -175,6 +176,15 @@ export default class TreeSelect extends Component {
          * 是否跟随滚动
          */
         followTrigger: PropTypes.bool,
+        /**
+         * 是否为预览态
+         */
+        isPreview: PropTypes.bool,
+        /**
+         * 预览态模式下渲染的内容
+         * @param {number} value 评分值
+         */
+        renderPreview: PropTypes.func,
     };
 
     static defaultProps = {
@@ -732,6 +742,33 @@ export default class TreeSelect extends Component {
             </div>
         );
     }
+
+    renderPreview(data, others) {
+        const { prefix, renderPreview } = this.props;
+
+        const previewCls = classNames({
+            [`${prefix}form-preview`]: true,
+        });
+        let items = data;
+
+        if (data && !Array.isArray(data)) {
+            items = [data];
+        }
+
+        if (typeof renderPreview === 'function') {
+            return (
+                <div {...others} className={previewCls}>
+                    {renderPreview(items, this.props)}
+                </div>
+            );
+        }
+
+        return (
+            <p {...others} className={previewCls}>
+                {items.map(({ label }) => label).join(', ')}
+            </p>
+        );
+    }
     /*eslint-enable*/
     render() {
         const {
@@ -755,6 +792,7 @@ export default class TreeSelect extends Component {
             popupContainer,
             popupProps,
             followTrigger,
+            isPreview,
         } = this.props;
         const others = pickOthers(
             Object.keys(TreeSelect.propTypes),
@@ -771,6 +809,10 @@ export default class TreeSelect extends Component {
             data = data[0];
         }
 
+        if (isPreview) {
+            return this.renderPreview(data, others);
+        }
+
         return (
             <Select
                 prefix={prefix}

test/tree-select/index-spec.js

@@ -408,6 +408,47 @@ describe('TreeSelect', () => {
         assert.deepEqual(getLabels(wrapper), []);
     });
 
+    it('should support preview mode render', () => {
+        const dataSource = [
+            {
+                value: '2973',
+                label: '陕西',
+                children: [
+                    {
+                        value: '2974',
+                        label: '西安',
+                        children: [
+                            {
+                                value: '2975',
+                                label: '西安市',
+                            },
+                            {
+                                value: '2976',
+                                label: '高陵县',
+                            },
+                        ],
+                    },
+                    {
+                        value: '2980',
+                        label: '铜川',
+                    },
+                ],
+            },
+        ];
+
+        wrapper = mount(<TreeSelect dataSource={dataSource} isPreview defaultValue={'2975'} />);
+        assert(wrapper.find('.next-form-preview').length > 0);
+        assert(wrapper.find('.next-form-preview').text() === '西安市');
+        wrapper.setProps({
+            renderPreview: (items) => {
+                assert(items.length === 1);
+                assert(items[0].label === '西安市');
+                return 'Hello World';
+            }
+        });
+        assert(wrapper.find('.next-form-preview').text() === 'Hello World');
+    })
+
     it('should trigger onChange when remove tag', () => {
         let triggered = false;
         const value = ['6'];