@douyinfe/semi-ui 2.6.0 → 2.7.0-beta.0

package/button/__test__/button.test.js

@@ -8,6 +8,7 @@ describe('Button', () => {
     it('button with custom className & style', () => {
         const wrapper = mount(<Button className="test" style={{ color: 'red' }} />);
         expect(wrapper.hasClass('test')).toEqual(true);
+        expect(wrapper.find('button').getDOMNode().style.color).toBe('red');
     });
 
     it(`button with icon`, () => {
@@ -61,4 +62,10 @@ describe('Button', () => {
         );
         expect(buttonGroup.getDOMNode().textContent).toEqual('1查询剪切');
     });
+
+    it('button group with custom className & style', () => {
+        const wrapper = mount(<ButtonGroup className="test" style={{ color: 'red' }} />);
+        expect(wrapper.hasClass('test')).toEqual(true);
+        expect(wrapper.find('button').getDOMNode().style.color).toBe('red');
+    });
 });

package/button/buttonGroup.tsx

@@ -1,6 +1,7 @@
 import React, { isValidElement, cloneElement } from 'react';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/button/constants';
 import { Type, Size } from './Button';
 
@@ -13,6 +14,7 @@ export interface ButtonGroupProps extends BaseProps {
     type?: Type;
     size?: Size;
     theme?: Theme;
+    className?: string;
     'aria-label'?: React.AriaAttributes['aria-label'];
 }
 
@@ -36,8 +38,9 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
     };
 
     render() {
-        const { children, disabled, size, type, 'aria-label': ariaLabel, ...rest } = this.props;
+        const { children, disabled, size, type, className, 'aria-label': ariaLabel, ...rest } = this.props;
         let inner;
+        const cls = classNames(`${prefixCls}-group`, className);
 
         if (children) {
             inner = ((Array.isArray(children) ? children : [children])).map((itm, index) => (
@@ -46,6 +49,6 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
                     : itm
             ));
         }
-        return <div className={`${prefixCls}-group`} role="group" aria-label={ariaLabel}>{inner}</div>;
+        return <div className={cls} role="group" aria-label={ariaLabel}>{inner}</div>;
     }
 }

package/cascader/__test__/cascader.test.js

@@ -16,13 +16,13 @@ const getPopupContainer = () => document.querySelector(`.${BASE_CLASS_PREFIX}-ca
 const treeData = [
     {
         label: '亚洲',
-        value: 'Yazhou',
-        key: 'yazhou',
+        value: 'Asia',
+        key: 'Asia',
         children: [
             {
                 label: '中国',
-                value: 'Zhongguo',
-                key: 'zhongguo',
+                value: 'China',
+                key: 'China',
                 children: [
                     {
                         label: '北京',
@@ -40,18 +40,18 @@ const treeData = [
     },
     {
         label: '北美洲',
-        value: 'Beimeizhou',
-        key: 'beimeizhou',
+        value: 'North America',
+        key: 'North America',
         children: [
             {
                 label: '美国',
-                value: 'Meiguo',
-                key: 'meiguo',
+                value: 'United States',
+                key: 'United States',
             },
             {
                 label: '加拿大',
-                value: 'Jianada',
-                key: 'jianada',
+                value: 'Canada',
+                key: 'Canada',
             },
         ],
     },
@@ -60,13 +60,13 @@ const treeData = [
 const treeDataWithDisabled = [
     {
         label: '亚洲',
-        value: 'Yazhou',
-        key: 'yazhou',
+        value: 'Asia',
+        key: 'Asia',
         children: [
             {
                 label: '中国',
-                value: 'Zhongguo',
-                key: 'zhongguo',
+                value: 'China',
+                key: 'China',
                 disabled: true,
                 children: [
                     {
@@ -90,6 +90,38 @@ const treeDataWithDisabled = [
     }
 ];
 
+const treeDataWithReactNode = [
+    {
+        label: <strong>亚洲</strong>,
+        value: 'Asia',
+        key: 'Asia',
+        children: [
+            {
+                label: '中国',
+                value: 'China',
+                key: 'China',
+                children: [
+                    {
+                        label: '北京',
+                        value: 'Beijing',
+                        key: 'beijing',
+                    },
+                    {
+                        label: <div>上海</div>,
+                        value: 'Shanghai',
+                        key: 'shanghai',
+                    },
+                ],
+            }
+        ],
+    },
+    {
+        label: <p>北美洲</p>,
+        value: 'North America',
+        key: 'North America',
+    }
+];
+
 let commonProps = {
     // Cascader use Popup Layer to show candidate option,
     // but all Popup Layer which extends from Tooltip (eg Popover, Dropdown) have animation and delay.
@@ -197,7 +229,7 @@ describe('Cascader', () => {
 
     it('dynamic treeData in multiple and uncontrolled mode', () => {
         const cascader = render({
-            defaultValue: 'Yazhou',
+            defaultValue: 'Asia',
             multiple: true,
         });
         const opt = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-selection-multiple .${BASE_CLASS_PREFIX}-tag`);
@@ -209,7 +241,7 @@ describe('Cascader', () => {
 
     it('dynamic treeData in multiple and controlled mode', () => {
         const cascader = render({
-            value: 'Yazhou',
+            value: 'Asia',
             multiple: true,
         });
         const opt = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-selection-multiple .${BASE_CLASS_PREFIX}-tag`);
@@ -260,7 +292,7 @@ describe('Cascader', () => {
 
     it('defaultValue', () => {
         let cascader = render({
-            defaultValue: ['Yazhou', 'Zhongguo', 'Beijing'],
+            defaultValue: ['Asia', 'China', 'Beijing'],
             defaultOpen: true,
         });
         // await sleep();
@@ -282,25 +314,25 @@ describe('Cascader', () => {
 
     it('displayProp', () => {
         let cascader = render({
-            defaultValue: ['Yazhou', 'Zhongguo', 'Beijing'],
+            defaultValue: ['Asia', 'China', 'Beijing'],
             displayProp: 'value',
         });
         expect(cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection`).getDOMNode().textContent).toEqual(
-            'Yazhou / Zhongguo / Beijing'
+            'Asia / China / Beijing'
         );
     });
 
     it('displayRender', () => {
         let spyOnRender = sinon.spy(() => {});
         let cascader = render({
-            defaultValue: ['Yazhou', 'Zhongguo', 'Beijing'],
+            defaultValue: ['Asia', 'China', 'Beijing'],
             displayRender: spyOnRender,
         });
         expect(spyOnRender.calledWithMatch(['亚洲', '中国', '北京'])).toEqual(true);
         cascader.unmount();
 
         let cusRender = render({
-            defaultValue: ['Yazhou', 'Zhongguo', 'Beijing'],
+            defaultValue: ['Asia', 'China', 'Beijing'],
             displayRender: list => '已选择：' + list.join(' -> '),
         });
         expect(cusRender.find(`.${BASE_CLASS_PREFIX}-cascader-selection`).getDOMNode().textContent).toEqual(
@@ -308,6 +340,52 @@ describe('Cascader', () => {
         );
     });
 
+    it('label is ReactNode when unsearchable and single-selection mode', () => {
+        const cascader = render({
+            defaultValue: ['Asia', 'China', 'Shanghai'],
+            treeData: treeDataWithReactNode
+        });
+        expect(cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection span strong`).getDOMNode().textContent).toEqual(
+            '亚洲'
+        );
+        expect(cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection span div`).getDOMNode().textContent).toEqual(
+            '上海'
+        );
+        expect(cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection span`).getDOMNode().textContent).toEqual(
+            '亚洲 / 中国 / 上海'
+        );
+
+        cascader.unmount();
+
+        const cascader2 = render({
+            defaultValue: ['North America'],
+            treeData: treeDataWithReactNode,
+        });
+        expect(cascader2.find(`.${BASE_CLASS_PREFIX}-cascader-selection span p`).getDOMNode().textContent).toEqual(
+            '北美洲'
+        );
+        expect(cascader2.find(`.${BASE_CLASS_PREFIX}-cascader-selection span`).getDOMNode().textContent).toEqual(
+            '北美洲'
+        );
+        cascader2.unmount();
+
+        const cascader3 = render({
+            defaultValue: ['Asia', 'China', 'Shanghai'],
+            treeData: treeDataWithReactNode,
+            separator: ' - '
+        });
+        expect(cascader3.find(`.${BASE_CLASS_PREFIX}-cascader-selection span strong`).getDOMNode().textContent).toEqual(
+            '亚洲'
+        );
+        expect(cascader3.find(`.${BASE_CLASS_PREFIX}-cascader-selection span div`).getDOMNode().textContent).toEqual(
+            '上海'
+        );
+        expect(cascader3.find(`.${BASE_CLASS_PREFIX}-cascader-selection span`).getDOMNode().textContent).toEqual(
+            '亚洲 - 中国 - 上海'
+        );
+        cascader3.unmount();
+    });
+
     it('disabled', () => {
         let cascader = render({
             disabled: true,
@@ -330,7 +408,7 @@ describe('Cascader', () => {
         const cascaderWithSingle = render({
             treeData: treeDataWithDisabled,
             changeOnSelect: true,
-            defaultValue:['Yazhou', 'Zhongguo']
+            defaultValue:['Asia', 'China']
         });
         expect(
             cascaderWithSingle
@@ -345,7 +423,7 @@ describe('Cascader', () => {
             treeData: treeDataWithDisabled,
             changeOnSelect: true,
             filterTreeNode: true,
-            defaultValue:['Yazhou', 'Zhongguo']
+            defaultValue:['Asia', 'China']
         });
         expect(
             cascaderWithSingleFilter
@@ -358,7 +436,7 @@ describe('Cascader', () => {
         const cascaderWithSingleControlled = render({
             treeData: treeDataWithDisabled,
             changeOnSelect: true,
-            value: ['Yazhou', 'Zhongguo'],
+            value: ['Asia', 'China'],
         });
         expect(cascaderWithSingleControlled.find(`.${BASE_CLASS_PREFIX}-cascader-selection span`).getDOMNode().textContent).toEqual(
             '亚洲 / 中国'
@@ -368,7 +446,7 @@ describe('Cascader', () => {
         const cascaderWithMultiple = render({
             treeData: treeDataWithDisabled,
             multiple: true,
-            defaultValue:['Yazhou', 'Zhongguo']
+            defaultValue:['Asia', 'China']
         });
         expect(
             cascaderWithMultiple
@@ -383,7 +461,7 @@ describe('Cascader', () => {
             treeData: treeDataWithDisabled,
             multiple: true,
             filterTreeNode: true,
-            defaultValue:['Yazhou', 'Zhongguo']
+            defaultValue:['Asia', 'China']
         });
         expect(
             cascaderWithMultipleFilter
@@ -397,7 +475,7 @@ describe('Cascader', () => {
         const cascaderWithMultipleControlled = render({
             treeData: treeDataWithDisabled,
             multiple: true,
-            value:['Yazhou', 'Zhongguo']
+            value:['Asia', 'China']
         });
         expect(
             cascaderWithMultipleControlled
@@ -450,7 +528,7 @@ describe('Cascader', () => {
         expect(spyOnSelect.calledOnce).toBe(true);
         expect(spyOnChange.calledOnce).toBe(true);
         expect(spyOnSelect.calledWithMatch('Beijing')).toEqual(true);
-        expect(spyOnChange.calledWithMatch(['Yazhou', 'Zhongguo', 'Beijing'])).toEqual(true);
+        expect(spyOnChange.calledWithMatch(['Asia', 'China', 'Beijing'])).toEqual(true);
         expect(
             lists[2]
                 .querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option`)[0]
@@ -507,8 +585,8 @@ describe('Cascader', () => {
         lists[0].querySelectorAll('li')[0].click();
         expect(spyOnSelect.calledOnce).toBe(true);
         expect(spyOnChange.calledOnce).toBe(true);
-        expect(spyOnSelect.calledWithMatch('Yazhou')).toEqual(true);
-        expect(spyOnChange.calledWithMatch(['Yazhou'])).toEqual(true);
+        expect(spyOnSelect.calledWithMatch('Asia')).toEqual(true);
+        expect(spyOnChange.calledWithMatch(['Asia'])).toEqual(true);
         expect(
             lists[0]
                 .querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option`)[0]
@@ -518,8 +596,8 @@ describe('Cascader', () => {
 
         lists = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option-list`);
         lists[1].querySelectorAll('li')[0].click();
-        expect(spyOnSelect.calledWithMatch('Zhongguo')).toEqual(true);
-        expect(spyOnChange.calledWithMatch(['Yazhou', 'Zhongguo'])).toEqual(true);
+        expect(spyOnSelect.calledWithMatch('China')).toEqual(true);
+        expect(spyOnChange.calledWithMatch(['Asia', 'China'])).toEqual(true);
         expect(
             lists[0]
                 .querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option`)[0]
@@ -574,7 +652,7 @@ describe('Cascader', () => {
 
         // await sleep();
         let resList = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-cascader-option-label-highlight`);
-        expect(resList.length).toEqual(3);
+        expect(resList.length).toEqual(1);
         // debugger
         // expect(resList[0].textContent).toEqual('亚洲/中国/北京');
         // done();
@@ -615,7 +693,7 @@ describe('Cascader', () => {
 
     it('controlled: value shows correct', () => {
         let cascader = render({
-            value: ['Yazhou', 'Zhongguo', 'Beijing'],
+            value: ['Asia', 'China', 'Beijing'],
         });
         expect(cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection`).getDOMNode().textContent).toEqual(
             '亚洲 / 中国 / 北京'
@@ -625,7 +703,7 @@ describe('Cascader', () => {
     it('controlled: fire onChange and ui not update', () => {
         let spyOnChange = sinon.spy(() => {});
         let cascader = render({
-            value: ['Yazhou', 'Zhongguo', 'Beijing'],
+            value: ['Asia', 'China', 'Beijing'],
             defaultOpen: true,
             onChange: spyOnChange,
             changeOnSelect: true,
@@ -681,13 +759,13 @@ describe('Cascader', () => {
             spyOnChange.calledWithMatch([
                 {
                     label: '亚洲',
-                    value: 'Yazhou',
-                    key: 'yazhou',
+                    value: 'Asia',
+                    key: 'Asia',
                     children: [
                         {
                             label: '中国',
-                            value: 'Zhongguo',
-                            key: 'zhongguo',
+                            value: 'China',
+                            key: 'China',
                             children: [
                                 {
                                     label: '北京',
@@ -705,8 +783,8 @@ describe('Cascader', () => {
                 },
                 {
                     label: '中国',
-                    value: 'Zhongguo',
-                    key: 'zhongguo',
+                    value: 'China',
+                    key: 'China',
                     children: [
                         {
                             label: '北京',
@@ -753,13 +831,13 @@ describe('Cascader', () => {
             spyOnChange.calledWithMatch([
                 {
                     label: '亚洲',
-                    value: 'Yazhou',
-                    key: 'yazhou',
+                    value: 'Asia',
+                    key: 'Asia',
                     children: [
                         {
                             label: '中国',
-                            value: 'Zhongguo',
-                            key: 'zhongguo',
+                            value: 'China',
+                            key: 'China',
                             children: [
                                 {
                                     label: '北京',
@@ -790,13 +868,13 @@ describe('Cascader', () => {
             value: [
                 {
                     label: '亚洲',
-                    value: 'Yazhou',
-                    key: 'yazhou',
+                    value: 'Asia',
+                    key: 'Asia',
                     children: [
                         {
                             label: '中国',
-                            value: 'Zhongguo',
-                            key: 'zhongguo',
+                            value: 'China',
+                            key: 'China',
                             children: [
                                 {
                                     label: '北京',
@@ -814,8 +892,8 @@ describe('Cascader', () => {
                 },
                 {
                     label: '中国',
-                    value: 'Zhongguo',
-                    key: 'zhongguo',
+                    value: 'China',
+                    key: 'China',
                     children: [
                         {
                             label: '北京',
@@ -845,7 +923,7 @@ describe('Cascader', () => {
     it('onClear and showClear', () => {
         const spyOnClear = sinon.spy(() => { });
         const cascader = render({
-            defaultValue: ['Yazhou', 'Zhongguo', 'Beijing'],
+            defaultValue: ['Asia', 'China', 'Beijing'],
             showClear: true,
             onClear: spyOnClear,
             placeholder: "请选择所在地区"
@@ -989,25 +1067,25 @@ describe('Cascader', () => {
             defaultValue: [
                 {
                     label: '北美洲',
-                    value: 'Beimeizhou',
-                    key: 'beimeizhou',
+                    value: 'North America',
+                    key: 'North America',
                     children: [
                         {
                             label: '美国',
-                            value: 'Meiguo',
-                            key: 'meiguo',
+                            value: 'United States',
+                            key: 'United States',
                         },
                         {
                             label: '加拿大',
-                            value: 'Jianada',
-                            key: 'jianada',
+                            value: 'Canada',
+                            key: 'Canada',
                         },
                     ],
                 },
                 {
                     label: '美国',
-                    value: 'Meiguo',
-                    key: 'meiguo',
+                    value: 'United States',
+                    key: 'United States',
                 }
             ]
         });
@@ -1028,18 +1106,18 @@ describe('Cascader', () => {
             treeData: [
                 {
                     label: '北美洲',
-                    value: 'Beimeizhou',
-                    key: 'beimeizhou',
+                    value: 'North America',
+                    key: 'North America',
                     children: [
                         {
                             label: '美国',
-                            value: 'Meiguo',
-                            key: 'meiguo',
+                            value: 'United States',
+                            key: 'United States',
                         },
                         {
                             label: '加拿大',
-                            value: 'Jianada',
-                            key: 'jianada',
+                            value: 'Canada',
+                            key: 'Canada',
                         },
                     ],
                 },
@@ -1096,18 +1174,18 @@ describe('Cascader', () => {
             treeData: [
                 {
                     label: '北美洲',
-                    value: 'Beimeizhou',
-                    key: 'beimeizhou',
+                    value: 'North America',
+                    key: 'North America',
                     children: [
                         {
                             label: '美国',
-                            value: 'Meiguo',
-                            key: 'meiguo',
+                            value: 'United States',
+                            key: 'United States',
                         },
                         {
                             label: '加拿大',
-                            value: 'Jianada',
-                            key: 'jianada',
+                            value: 'Canada',
+                            key: 'Canada',
                         },
                     ],
                 },
@@ -1146,7 +1224,7 @@ describe('Cascader', () => {
     it('separator', () => {
         const cascader = render({
             filterTreeNode: true,
-            defaultValue: ['Yazhou', 'Zhongguo', 'Beijing'],
+            defaultValue: ['Asia', 'China', 'Beijing'],
             separator: ' > ',
             defaultOpen: true,
         });
@@ -1169,7 +1247,7 @@ describe('Cascader', () => {
         const cascaderAutoMerge = render({
             multiple: true,
             triggerRender: spyTriggerRender,
-            defaultValue: 'Yazhou'
+            defaultValue: 'Asia'
         });
         cascaderAutoMerge.simulate('click');
         const firstCall = spyTriggerRender.getCall(0);
@@ -1183,7 +1261,7 @@ describe('Cascader', () => {
         const cascaderNoAutoMerge = render({
             multiple: true,
             triggerRender: spyTriggerRender2,
-            defaultValue: 'Yazhou',
+            defaultValue: 'Asia',
             autoMergeValue: false,
         });
         cascaderNoAutoMerge.simulate('click');
@@ -1199,7 +1277,7 @@ describe('Cascader', () => {
         const cascader = render({
             multiple: true,
             autoMergeValue: false,
-            defaultValue: 'Yazhou',
+            defaultValue: 'Asia',
         });
         const tags = cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection .${BASE_CLASS_PREFIX}-tag`)
         expect(tags.length).toEqual(4);
@@ -1208,7 +1286,7 @@ describe('Cascader', () => {
         const cascaderAutoMerge = render({
             multiple: true,
             autoMergeValue: true,
-            defaultValue: 'Yazhou',
+            defaultValue: 'Asia',
         });
         const tags2 = cascaderAutoMerge.find(`.${BASE_CLASS_PREFIX}-cascader-selection .${BASE_CLASS_PREFIX}-tag`)
         expect(tags2.length).toEqual(1);
@@ -1227,7 +1305,7 @@ describe('Cascader', () => {
             multiple: true,
             autoMergeValue: false,
             leafOnly: false,
-            defaultValue: 'Yazhou',
+            defaultValue: 'Asia',
         });
         const tags = cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection .${BASE_CLASS_PREFIX}-tag`)
         expect(tags.length).toEqual(4);
@@ -1238,7 +1316,7 @@ describe('Cascader', () => {
             multiple: true,
             autoMergeValue: true,
             leafOnly: true,
-            defaultValue: 'Yazhou',
+            defaultValue: 'Asia',
         });
         const tags2 = cascader2.find(`.${BASE_CLASS_PREFIX}-cascader-selection .${BASE_CLASS_PREFIX}-tag`)
         expect(tags2.length).toEqual(2);
@@ -1249,7 +1327,7 @@ describe('Cascader', () => {
             multiple: true,
             autoMergeValue: false,
             leafOnly: true,
-            defaultValue: 'Yazhou',
+            defaultValue: 'Asia',
         });
         const tags3 = cascader3.find(`.${BASE_CLASS_PREFIX}-cascader-selection .${BASE_CLASS_PREFIX}-tag`)
         expect(tags3.length).toEqual(2);
@@ -1260,7 +1338,7 @@ describe('Cascader', () => {
             multiple: true,
             autoMergeValue: true,
             leafOnly: false,
-            defaultValue: 'Yazhou',
+            defaultValue: 'Asia',
         });
         const tags4 = cascader4.find(`.${BASE_CLASS_PREFIX}-cascader-selection .${BASE_CLASS_PREFIX}-tag`)
         expect(tags4.length).toEqual(1);