feat(CascaderSelect): support preview mode

alibaba-fusion · Nov 18, 2019 · 5344693 · 5344693
1 parent 66ece2f
commit 5344693
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 1 deletion.
diff --git a/src/cascader-select/cascader-select.jsx b/src/cascader-select/cascader-select.jsx
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import Select from '../select';
 import Cascader from '../cascader';
 import Menu from '../menu';
@@ -204,6 +205,15 @@ export default class CascaderSelect extends Component {
          * 是否跟随滚动
          */
         followTrigger: PropTypes.bool,
+        /**
+         * 是否为预览态
+         */
+        isPreview: PropTypes.bool,
+        /**
+         * 预览态模式下渲染的内容
+         * @param {number} value 评分值
+         */
+        renderPreview: PropTypes.func,
     };
 
     static defaultProps = {
@@ -798,6 +808,36 @@ export default class CascaderSelect extends Component {
         );
     }
 
+    renderPreview(others) {
+        const { prefix, multiple, renderPreview } = this.props;
+        const { value } = this.state;
+        const previewCls = classNames({
+            [`${prefix}form-preview`]: true,
+        });
+        let items =
+            (multiple
+                ? this.getMultipleData(value)
+                : this.getSignleData(value)) || [];
+
+        if (!Array.isArray(items)) {
+            items = [items];
+        }
+
+        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>
+        );
+    }
+
     render() {
         const {
             prefix,
@@ -818,16 +858,22 @@ export default class CascaderSelect extends Component {
             popupContainer,
             popupProps,
             followTrigger,
+            isPreview,
         } = this.props;
         const { value, searchValue, visible } = this.state;
         const others = pickOthers(
             Object.keys(CascaderSelect.propTypes),
             this.props
         );
-        const popupContent = this.renderPopupContent();
 
         this.updateCache(dataSource);
 
+        if (isPreview) {
+            return this.renderPreview(others);
+        }
+
+        const popupContent = this.renderPopupContent();
+
         const props = {
             prefix,
             className,

diff --git a/test/cascader-select/index-spec.js b/test/cascader-select/index-spec.js
@@ -451,6 +451,47 @@ describe('CascaderSelect', () => {
         const item00 = findItem(0, 0);
         ReactTestUtils.Simulate.click(item00);
     });
+
+    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(<CascaderSelect 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');
+    })
 });
 
 function findItem(menuIndex, itemIndex) {