@douyinfe/semi-ui 2.1.4-alpha.0 → 2.2.0-beta.0

package/_base/_story/a11y.scss

@@ -0,0 +1,49 @@
+body[data-page="a11y"] {
+    overflow: hidden;
+
+    #root {
+        padding: 0 !important;
+
+        .semi-slider {
+            padding: 0;
+        }
+
+        .rows-container > .semi-row {
+            margin-bottom: 24px;
+        }
+
+        .mt12 {
+            margin-top: 12px;
+        }
+
+        .mb12 {
+            margin-bottom: 12px;
+        }
+    }
+    
+    .grid {
+    
+        .semi-row,
+        .semi-row-flex {
+            text-align: center;
+    
+            .semi-col {
+                min-height: 30px;
+                line-height: 30px;
+                background: var(--semi-color-primary-light-default);
+                outline: 1px solid var(--semi-color-primary-light-active);
+            }
+        }
+    
+        &.grid-gutter {
+    
+            .semi-col {
+    
+                .gutter-box,
+                .col-content {
+                    background: var(--semi-color-primary-light-hover);
+                }
+            }
+        }
+    }
+}

package/_base/_story/index.scss

@@ -5,6 +5,7 @@ body {
     color: var(--semi-color-text-0);
 }
 
+
 // 给每个组件的 story 区域加个 padding，如果需要更大的 padding 可以在组件内自定义样式
 .sb-show-main.sb-main-padded {
 

package/_base/_story/index.stories.js

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import { Button, Typography, Card, Tooltip, Tag, Avatar, Rating, Nav, Layout } from '../../index';
 import { IconHelpCircle, IconUser, IconStar, IconSetting } from '@douyinfe/semi-icons';
+import SemiA11y from './a11y';
 import './index.scss';
 
 export default {
@@ -8,7 +9,8 @@ export default {
 };
 
 export {
-  TestAlwaysDarkLight
+  TestAlwaysDarkLight,
+  SemiA11y
 };
 
 const TestAlwaysDarkLight = () => {

package/_utils/index.ts

@@ -83,7 +83,7 @@ export const getHighLightTextHTML = ({
     const markEle = option.highlightTag || 'mark';
     const highlightClassName = option.highlightClassName || '';
     const highlightStyle = option.highlightStyle || {};
-    return chunks.map((chunk: HighLightTextHTMLChunk) => {
+    return chunks.map((chunk: HighLightTextHTMLChunk, index: number) => {
         const { end, start, highlight } = chunk;
         const text = sourceString.substr(start, end - start);
         if (highlight) {
@@ -92,6 +92,7 @@ export const getHighLightTextHTML = ({
                 {
                     style: highlightStyle,
                     className: highlightClassName,
+                    key: text + index
                 },
                 text
             );

package/button/Button.tsx

@@ -15,6 +15,7 @@ export type Theme = 'solid' | 'borderless' | 'light';
 export type Type = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
 
 export interface ButtonProps {
+    id?: string;
     block?: boolean;
     circle?: boolean;
     disabled?: boolean;

package/button/__test__/button.test.js

@@ -1,4 +1,5 @@
 import Button from '../index';
+import ButtonGroup from '../index';
 import { mount } from 'enzyme';
 import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
 import { IconEdit } from '@douyinfe/semi-icons';
@@ -46,4 +47,18 @@ describe('Button', () => {
         expect(elem.find(`.${BASE_CLASS_PREFIX}-button-content-left`).length).toBe(1);
         expect(elem.find(`.${BASE_CLASS_PREFIX}-button-content-right`).length).toBe(0);
     });
+
+    it(`button group with invalid child`, () => {
+        const buttonGroup = mount(
+            <ButtonGroup>
+                {false}
+                {null}
+                {undefined}
+                {1}
+                <Button>查询</Button>
+                <Button>剪切</Button>
+            </ButtonGroup>
+        );
+        expect(buttonGroup.getDOMNode().textContent).toEqual('1查询剪切');
+    });
 });

package/button/_story/button.stories.js

@@ -122,6 +122,19 @@ export const ButtonGroupDemo = () => (
       </Button>
     </ButtonGroup>
     <br />
+    <div>ButtonGroup children 不是合法元素的情况:</div>
+    <ButtonGroup>
+      {false}
+      {123}
+      {null}
+      {undefined}
+      text
+      <span>span</span>
+      {true && <Button>拷贝</Button>}
+      <Button>查询</Button>
+      <Button>剪切</Button>
+    </ButtonGroup>
+    <br />
   </div>
 );
 

package/button/buttonGroup.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { isValidElement, cloneElement } from 'react';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/button/constants';
@@ -38,9 +38,11 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
         let inner;
 
         if (children) {
-            inner = ((Array.isArray(children) ? children : [children]) as React.ReactElement[]).map((itm, index) =>
-                React.cloneElement(itm, { disabled, size, type, ...itm.props, ...rest, key: index })
-            );
+            inner = ((Array.isArray(children) ? children : [children])).map((itm, index) => (
+                isValidElement(itm)
+                    ? cloneElement(itm, { disabled, size, type, ...itm.props, ...rest, key: index })
+                    : itm
+            ));
         }
         return <div className={`${prefixCls}-group`}>{inner}</div>;
     }

package/cascader/__test__/cascader.test.js

@@ -997,6 +997,149 @@ describe('Cascader', () => {
         ).toEqual('美国');
     });
 
+    it('multiple select enableLeafClick', () => {
+        const cascaderWithMultiple = render({
+            multiple: true,
+            enableLeafClick: true,
+            treeData: [
+                {
+                    label: '北美洲',
+                    value: 'Beimeizhou',
+                    key: 'beimeizhou',
+                    children: [
+                        {
+                            label: '美国',
+                            value: 'Meiguo',
+                            key: 'meiguo',
+                        },
+                        {
+                            label: '加拿大',
+                            value: 'Jianada',
+                            key: 'jianada',
+                        },
+                    ],
+                },
+                {
+                    label: '南美洲',
+                    value: 'Nanmeiguo',
+                    key: 'Nanmeiguo',
+                }
+            ]
+        })
+        const selectBox = cascaderWithMultiple.find(`.${BASE_CLASS_PREFIX}-cascader-selection`).at(0);
+        selectBox.simulate('click');
+        // click checkbox
+        cascaderWithMultiple
+            .find(`.${BASE_CLASS_PREFIX}-cascader-option-list`)
+            .at(0)
+            .find(`.${BASE_CLASS_PREFIX}-cascader-option`)
+            .at(1)
+            .find(`.${BASE_CLASS_PREFIX}-cascader-option-label`)
+            .at(0)
+            .find(`.${BASE_CLASS_PREFIX}-checkbox`)
+            .at(0)
+            .simulate('click');
+        expect(cascaderWithMultiple.state().checkedKeys.size).toEqual(1);
+        // click option cancel checked
+        cascaderWithMultiple
+            .find(`.${BASE_CLASS_PREFIX}-cascader-option-list`)
+            .at(0)
+            .find(`.${BASE_CLASS_PREFIX}-cascader-option`)
+            .at(1)
+            .simulate('click')
+        expect(cascaderWithMultiple.state().checkedKeys.size).toEqual(0);
+        // click option select
+        cascaderWithMultiple
+            .find(`.${BASE_CLASS_PREFIX}-cascader-option-list`)
+            .at(0)
+            .find(`.${BASE_CLASS_PREFIX}-cascader-option`)
+            .at(0)
+            .simulate('click')
+        cascaderWithMultiple
+            .find(`.${BASE_CLASS_PREFIX}-cascader-option-list`)
+            .at(1)
+            .find(`.${BASE_CLASS_PREFIX}-cascader-option`)
+            .at(0)
+            .simulate('click')
+        expect(cascaderWithMultiple.state().checkedKeys.size).toEqual(1);
+        const states = cascaderWithMultiple.state()
+        cascaderWithMultiple.unmount();
+    })
+
+    it('multiple select disable enableLeafClick', () => {
+        const cascaderWithMultiple = render({
+            multiple: true,
+            treeData: [
+                {
+                    label: '北美洲',
+                    value: 'Beimeizhou',
+                    key: 'beimeizhou',
+                    children: [
+                        {
+                            label: '美国',
+                            value: 'Meiguo',
+                            key: 'meiguo',
+                        },
+                        {
+                            label: '加拿大',
+                            value: 'Jianada',
+                            key: 'jianada',
+                        },
+                    ],
+                },
+                {
+                    label: '南美洲',
+                    value: 'Nanmeiguo',
+                    key: 'Nanmeiguo',
+                }
+            ]
+        })
+        const selectBox = cascaderWithMultiple.find(`.${BASE_CLASS_PREFIX}-cascader-selection`).at(0);
+        selectBox.simulate('click');
+        // click checkbox
+        cascaderWithMultiple
+            .find(`.${BASE_CLASS_PREFIX}-cascader-option-list`)
+            .at(0)
+            .find(`.${BASE_CLASS_PREFIX}-cascader-option`)
+            .at(1)
+            .find(`.${BASE_CLASS_PREFIX}-cascader-option-label`)
+            .at(0)
+            .find(`.${BASE_CLASS_PREFIX}-checkbox`)
+            .at(0)
+            .simulate('click');
+        expect(cascaderWithMultiple.state().checkedKeys.size).toEqual(1);
+        // click option can't cancel checked
+        cascaderWithMultiple
+            .find(`.${BASE_CLASS_PREFIX}-cascader-option-list`)
+            .at(0)
+            .find(`.${BASE_CLASS_PREFIX}-cascader-option`)
+            .at(1)
+            .simulate('click')
+        expect(cascaderWithMultiple.state().checkedKeys.size).toEqual(1);
+        cascaderWithMultiple.unmount();
+    })
+
+    it('separator', () => {
+        const cascader = render({
+            filterTreeNode: true,
+            defaultValue: ['Yazhou', 'Zhongguo', 'Beijing'],
+            separator: ' > ',
+            defaultOpen: true,
+        });
+        const input = cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection input`);
+        expect(input.props().placeholder).toEqual('亚洲 > 中国 > 北京'); 
+        const event = { target: { value: '中国' } };
+        input.simulate('change', event);
+        expect(
+            cascader
+            .find(`.${BASE_CLASS_PREFIX}-cascader-option-list li`)
+            .at(0)
+            .getDOMNode()
+            .textContent
+        ).toEqual('亚洲 > 中国 > 北京');
+        cascader.unmount();
+    });
+
     it('triggerRender', () => {
         const spyTriggerRender = sinon.spy(() => <span>123</span>);
         const cascaderAutoMerge = render({
@@ -1027,4 +1170,82 @@ describe('Cascader', () => {
         expect(args2.value).toEqual(new Set(['0','0-0','0-0-1','0-0-0']));
         cascaderNoAutoMerge.unmount();
     });
+
+    it('autoMergeValue', () => {
+        const cascader = render({
+            multiple: true,
+            autoMergeValue: false,
+            defaultValue: 'Yazhou',
+        });
+        const tags = cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection .${BASE_CLASS_PREFIX}-tag`)
+        expect(tags.length).toEqual(4);
+        cascader.unmount();
+
+        const cascaderAutoMerge = render({
+            multiple: true,
+            autoMergeValue: true,
+            defaultValue: 'Yazhou',
+        });
+        const tags2 = cascaderAutoMerge.find(`.${BASE_CLASS_PREFIX}-cascader-selection .${BASE_CLASS_PREFIX}-tag`)
+        expect(tags2.length).toEqual(1);
+        expect(
+            tags2
+                .find(`.${BASE_CLASS_PREFIX}-tag-content`)
+                .getDOMNode()
+                .textContent
+        ).toEqual('亚洲');
+        cascaderAutoMerge.unmount();
+    });
+
+    it('leafOnly', () => {
+        /* autoMergeValue and leafOnly are both false */
+        const cascader = render({
+            multiple: true,
+            autoMergeValue: false,
+            leafOnly: false,
+            defaultValue: 'Yazhou',
+        });
+        const tags = cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection .${BASE_CLASS_PREFIX}-tag`)
+        expect(tags.length).toEqual(4);
+        cascader.unmount();
+
+        /* autoMergeValue and leafOnly are both true */
+        const cascader2 = render({
+            multiple: true,
+            autoMergeValue: true,
+            leafOnly: true,
+            defaultValue: 'Yazhou',
+        });
+        const tags2 = cascader2.find(`.${BASE_CLASS_PREFIX}-cascader-selection .${BASE_CLASS_PREFIX}-tag`)
+        expect(tags2.length).toEqual(2);
+        cascader2.unmount();
+
+        /* autoMergeValue is false, leafOnly is true */
+        const cascader3 = render({
+            multiple: true,
+            autoMergeValue: false,
+            leafOnly: true,
+            defaultValue: 'Yazhou',
+        });
+        const tags3 = cascader3.find(`.${BASE_CLASS_PREFIX}-cascader-selection .${BASE_CLASS_PREFIX}-tag`)
+        expect(tags3.length).toEqual(2);
+        cascader3.unmount();
+
+        /* autoMergeValue is true, leafOnly is false */
+        const cascader4 = render({
+            multiple: true,
+            autoMergeValue: true,
+            leafOnly: false,
+            defaultValue: 'Yazhou',
+        });
+        const tags4 = cascader4.find(`.${BASE_CLASS_PREFIX}-cascader-selection .${BASE_CLASS_PREFIX}-tag`)
+        expect(tags4.length).toEqual(1);
+        expect(
+            tags4
+                .find(`.${BASE_CLASS_PREFIX}-tag-content`)
+                .getDOMNode()
+                .textContent
+        ).toEqual('亚洲');
+        cascader4.unmount();
+    });
 });

package/cascader/_story/cascader.stories.js

@@ -273,6 +273,25 @@ export const _Cascader = () => {
       />
       <br />
       <br />
+      <Cascader
+        style={{ width: 300 }}
+        treeData={treeData1}
+        placeholder="Multiple select"
+        multiple
+        motion={false}
+      />
+      <br />
+      <br />
+      <Cascader
+        style={{ width: 300 }}
+        treeData={treeData1}
+        placeholder="Multiple select enableLeafClick"
+        multiple
+        enableLeafClick
+        motion={false}
+      />
+      <br />
+      <br />
       <Cascader
         style={{ width: 300 }}
         treeData={[]}
@@ -374,6 +393,23 @@ export const Disabled = () => {
         filterTreeNode
         disabled
       />
+      <br /><br />
+      <Cascader
+        defaultValue={['yazhou', 'zhongguo']}
+        style={{ width: 300 }}
+        treeData={treeData2}
+        multiple
+        filterTreeNode
+        disabled
+      />
+      <br /><br />
+      <Cascader
+        defaultValue={['yazhou', 'zhongguo']}
+        style={{ width: 300 }}
+        treeData={treeData2}
+        multiple
+        disabled
+      />
     </div>
   );
 };
@@ -420,6 +456,20 @@ export const DisabledOption = () => {
         defaultValue={['yazhou', 'riben']}
         placeholder="Japan node is disabled"
       />
+      <br />
+      <br />
+      <div>multiple selection + filterTreeNode + defaultValue is disabled option</div>
+      <Cascader
+          filterTreeNode
+          multiple
+          style={{ width: 300 }}
+          treeData={treeData2}
+          defaultValue={[
+              ['yazhou', 'riben'],
+              ['beimeizhou', 'jianada']
+          ]}
+          placeholder="Japan node is disabled"
+      />
     </div>
   );
 };
@@ -1211,3 +1261,91 @@ export const OnChangeWithObject = () => (
     />
   </>
 );
+
+export const LeafOnly = () => {
+  const [value, setValue] = useState([])
+  return (
+      <div>
+          <div>autoMergeValue=false,leafOnly=false</div>
+          <Cascader
+              style={{ width: 300 }}
+              treeData={treeData4}
+              placeholder="请选择所在地区"
+              multiple
+              autoMergeValue={false}
+              leafOnly={false}
+              defaultValue={['zhejiang']}
+          />
+          <br />
+          <br />
+          <div>autoMergeValue=false,leafOnly=true, leafOnly生效</div>
+          <Cascader
+              style={{ width: 300 }}
+              treeData={treeData4}
+              placeholder="请选择所在地区"
+              multiple
+              autoMergeValue={false}
+              leafOnly={true}
+              defaultValue={['zhejiang']}
+          />
+          <br />
+          <br />
+          <div>受控，autoMergeValue=false,leafOnly=true, leafOnly生效</div>
+          <Cascader
+              style={{ width: 300 }}
+              treeData={treeData4}
+              placeholder="请选择所在地区"
+              multiple
+              onChange={v=>{
+                  console.log(v);
+                  setValue(v)
+              }}
+              autoMergeValue={false}
+              leafOnly={true}
+              value={value}
+          />
+          <br />
+          <br />
+          <div>受控 onChangeWithObject, autoMergeValue=false,leafOnly=true, leafOnly生效</div>
+          <Cascader
+              style={{ width: 300 }}
+              treeData={treeData4}
+              placeholder="请选择所在地区"
+              multiple
+              onChange={v=>{
+                  console.log(v);
+                  setValue(v)
+              }}
+              onChangeWithObject
+              autoMergeValue={false}
+              leafOnly={true}
+              value={value}
+          />
+          <br />
+          <br />
+          <div>autoMergeValue=true,leafOnly=false</div>
+          <Cascader
+              style={{ width: 300 }}
+              treeData={treeData4}
+              placeholder="请选择所在地区"
+              multiple
+              autoMergeValue={true}
+              leafOnly={false}
+              defaultValue={['zhejiang']}
+          />
+          <br />
+          <br />
+          <br />
+          <div>autoMergeValue=true,leafOnly=true</div>
+          <Cascader
+              style={{ width: 300 }}
+              treeData={treeData4}
+              placeholder="请选择所在地区"
+              multiple
+              autoMergeValue={true}
+              leafOnly={true}
+              defaultValue={['zhejiang']}
+          />
+      </div>
+  );
+}