@douyinfe/semi-ui 2.1.4 → 2.2.0-beta.1

package/cascader/item.tsx

@@ -54,6 +54,7 @@ export interface CascaderItemProps {
     emptyContent: React.ReactNode;
     loadData: (selectOptions: CascaderData[]) => Promise<void>;
     data: Array<Data | Entity>;
+    separator: string;
     multiple: boolean;
     checkedKeys: Set<string>;
     halfCheckedKeys: Set<string>;
@@ -75,6 +76,7 @@ export default class Item extends PureComponent<CascaderItemProps> {
         checkedKeys: PropTypes.object,
         halfCheckedKeys: PropTypes.object,
         onItemCheckboxClick: PropTypes.func,
+        separator: PropTypes.string,
         keyword: PropTypes.string
     };
 
@@ -142,7 +144,7 @@ export default class Item extends PureComponent<CascaderItemProps> {
 
     highlight = (searchText: React.ReactNode[]) => {
         const content: React.ReactNode[] = [];
-        const { keyword } = this.props;
+        const { keyword, separator } = this.props;
         searchText.forEach((item, idx) => {
             if (typeof item === 'string' && includes(item, keyword)) {
                 item.split(keyword).forEach((node, index) => {
@@ -159,7 +161,7 @@ export default class Item extends PureComponent<CascaderItemProps> {
                 content.push(item);
             }
             if (idx !== searchText.length - 1) {
-                content.push(' / ');
+                content.push(separator);
             }
         });
         return content;

package/checkbox/checkbox.tsx

@@ -123,6 +123,7 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
             onMouseLeave,
             extra,
             value,
+            id,
         } = this.props;
         const { checked } = this.state;
         const props: Record<string, any> = {
@@ -174,6 +175,7 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
             <span
                 style={style}
                 className={wrapper}
+                id={id}
                 onMouseEnter={onMouseEnter}
                 onMouseLeave={onMouseLeave}
                 onClick={this.handleChange}

package/checkbox/checkboxGroup.tsx

@@ -25,6 +25,7 @@ export type CheckboxGroupProps = {
     style?: React.CSSProperties;
     className?: string;
     type?: CheckboxType;
+    id?: string;
 };
 
 export type CheckboxGroupState = {
@@ -96,7 +97,7 @@ class CheckboxGroup extends BaseComponent<CheckboxGroupProps, CheckboxGroupState
     }
 
     render() {
-        const { children, options, prefixCls, direction, className, style, type } = this.props;
+        const { children, options, prefixCls, direction, className, id, style, type } = this.props;
 
         const isPureCardType = type === strings.TYPE_PURECARD;
         const isCardType = type === strings.TYPE_CARD || isPureCardType;
@@ -148,7 +149,7 @@ class CheckboxGroup extends BaseComponent<CheckboxGroupProps, CheckboxGroupState
         }
 
         return (
-            <div className={prefixClsDisplay} style={style}>
+            <div className={prefixClsDisplay} style={style} id={id}>
                 <Context.Provider
                     value={{
                         checkboxGroup: {

package/datePicker/__test__/datePicker.test.js

@@ -280,10 +280,12 @@ describe(`DatePicker`, () => {
         const rightPanel = document.querySelector(`.${BASE_CLASS_PREFIX}-datepicker-month-grid-right`);
         const rightNavBtns = rightPanel.querySelectorAll(`.${BASE_CLASS_PREFIX}-datepicker-navigation .${BASE_CLASS_PREFIX}-button`);
 
-        _.get(rightNavBtns, 1).click();
+        // 点击右边面板下一月
+        _.get(rightNavBtns, 2).click();
         await sleep();
 
-        _.times(leftPrevClickTimes).forEach(() => _.first(leftNavBtns).click());
+        // 点击左边面板上一月
+        _.times(leftPrevClickTimes).forEach(() => _.get(leftNavBtns, 1).click());
 
         const leftSecondWeek = leftPanel.querySelectorAll(`.${BASE_CLASS_PREFIX}-datepicker-week`)[1];
         const leftSecondWeekDays = leftSecondWeek.querySelectorAll(`.${BASE_CLASS_PREFIX}-datepicker-day`);
@@ -870,4 +872,85 @@ describe(`DatePicker`, () => {
         expect(allSeparators[0].textContent.trim()).toBe(rangeSeparator);
         expect(allSeparators[1].textContent.trim()).toBe(rangeSeparator);
     });
+
+    /**
+     * fix https://github.com/DouyinFE/semi-design/issues/422
+     */
+    it('test input year length larger than 4', async () => {
+        const props = {
+            motion: false,
+            defaultOpen: true,
+            defaultValue: '2021-12-21',
+        };
+        const handleChange = sinon.spy();
+        const elem = mount(
+            <DatePicker {...props} onChange={handleChange} />
+        );
+
+        elem.find('input').simulate('change', { target: { value: '20221-12-21' }});
+        expect(handleChange.called).toBeFalsy();
+    });
+
+    it('test click next/prev year buttons', () => {
+        let props = {
+          type: 'dateRange',
+          motion: false,
+          style: { width: 300 },
+          defaultPickerValue: new Date('2021-12-01'),
+          defaultOpen: true,
+        };
+        const elem = mount(<DatePicker {...props} />);
+
+        const leftPanel = document.querySelector(`.semi-datepicker-month-grid-left`);
+        const leftNavBtns = leftPanel.querySelector(`.semi-datepicker-navigation`).children;
+        const rightPanel = document.querySelector(`.semi-datepicker-month-grid-right`);
+        const rightNavBtns = rightPanel.querySelector(`.semi-datepicker-navigation`).children;
+
+        // 点击左边面板上一年
+        _.get(leftNavBtns, 0).click();
+        expect(document.querySelector(`.semi-datepicker-month-grid-left .semi-datepicker-navigation-month`).textContent).toBe('2020年 12月');
+        // 点击左边面板下一年
+        _.get(leftNavBtns, 4).click();
+        expect(document.querySelector(`.semi-datepicker-month-grid-left .semi-datepicker-navigation-month`).textContent).toBe('2021年 12月');
+
+        // 点击右边面板下一年
+        _.get(rightNavBtns, 4).click();
+        expect(document.querySelector(`.semi-datepicker-month-grid-right .semi-datepicker-navigation-month`).textContent).toBe('2023年 1月');
+        // 点击右边面板上一年
+        _.get(rightNavBtns, 0).click();
+        expect(document.querySelector(`.semi-datepicker-month-grid-right .semi-datepicker-navigation-month`).textContent).toBe('2022年 1月');
+    });
+
+    const testMonthSyncChange = type => {
+        let props = {
+            type,
+            motion: false,
+            style: { width: 300 },
+            defaultPickerValue: new Date('2021-12-01'),
+            defaultOpen: true,
+          };
+          const elem = mount(<DatePicker {...props} />);
+  
+          const leftPanel = document.querySelector(`.semi-datepicker-month-grid-left`);
+          const leftNavBtns = leftPanel.querySelector(`.semi-datepicker-navigation`).children;
+          const rightPanel = document.querySelector(`.semi-datepicker-month-grid-right`);
+          const rightNavBtns = rightPanel.querySelector(`.semi-datepicker-navigation`).children;
+  
+          // 点击左边面板下一月，自动切换右面板
+          _.get(leftNavBtns, 3).click();
+          expect(document.querySelector(`.semi-datepicker-month-grid-left .semi-datepicker-navigation-month`).textContent).toBe('2022年 1月');
+          expect(document.querySelector(`.semi-datepicker-month-grid-right .semi-datepicker-navigation-month`).textContent).toBe('2022年 2月');
+          // 点击右边面板上一月，自动切换左面板
+          _.get(rightNavBtns, 1).click();
+          expect(document.querySelector(`.semi-datepicker-month-grid-left .semi-datepicker-navigation-month`).textContent).toBe('2021年 12月');
+          expect(document.querySelector(`.semi-datepicker-month-grid-right .semi-datepicker-navigation-month`).textContent).toBe('2022年 1月');
+  
+          // 点击左边面板上一月，不需要自动切换右面板
+          _.get(leftNavBtns, 1).click();
+          expect(document.querySelector(`.semi-datepicker-month-grid-left .semi-datepicker-navigation-month`).textContent).toBe('2021年 11月');
+          elem.unmount();
+    }
+
+    it('test month sync change dateRange type', () => { testMonthSyncChange('dateRange') });
+    it('test month sync change dateTimeRange type', () => { testMonthSyncChange('dateTimeRange')});
 });

package/datePicker/_story/datePicker.stories.js

@@ -36,6 +36,7 @@ import DatePickerSlot from './DatePickerSlot';
 import DatePickerTimeZone from './DatePickerTimeZone';
 import BetterRangePicker from './BetterRangePicker';
 import SyncSwitchMonth from './SyncSwitchMonth';
+import { YearButton } from './v2';
 
 export default {
   title: 'DatePicker',
@@ -65,7 +66,8 @@ export {
   DatePickerSlot,
   DatePickerTimeZone,
   BetterRangePicker,
-  SyncSwitchMonth
+  SyncSwitchMonth,
+  YearButton
 }
 
 const demoDiv = {
@@ -634,3 +636,29 @@ export const RangeSeparator = () => (
     </div>
   </Space>
 );
+
+/**
+ * 修复输入 '20221-12-20' 类似这种年份的日期会崩溃问题
+ * https://github.com/DouyinFE/semi-design/issues/422
+ * 
+ * 非法日期的来源
+ *  - 用户输入
+ *  - 受控传入
+ * @returns 
+ */
+export const FixParseISOBug = () => (
+  <div>
+    <label>
+      <div>选择一个合法值，然后输入一个非法年份</div>
+      <DatePicker defaultValue={'2021-12-20'} onChange={v => console.log('onChange', v)} />
+    </label>
+    <label>
+      <div>defaultValue='20221-12-20'</div>
+      <DatePicker defaultValue={'20221-12-20'} defaultOpen={true} motion={false} onChange={v => console.log('onChange', v)} />
+    </label>
+  </div>
+);
+FixParseISOBug.storyName = '修复 parseISO bug';
+FixParseISOBug.parameters = {
+  chromatic: { disableSnapshot: false },
+};

package/datePicker/_story/v2/YearButton.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { DatePicker } from '../../../index';
+
+export default function App() {
+    return (
+        <div>
+            <h4>type=date</h4>
+            <DatePicker />
+            <h4>type=dateRange</h4>
+            <DatePicker type="dateRange" defaultPickerValue="2021-12" />
+            <h4>type=dateTimeRange</h4>
+            <DatePicker type="dateTimeRange" />
+            <h4>type=dateRange + compact</h4>
+            <DatePicker type="dateRange" density="compact" />
+        </div>
+    );
+}

package/datePicker/_story/v2/index.js

@@ -0,0 +1 @@
+export { default as YearButton } from './YearButton';

package/datePicker/monthsGrid.tsx

@@ -446,6 +446,10 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
         });
     };
 
+    getYAMOpenType = () => {
+        return this.foundation.getYAMOpenType();
+    }
+
     renderTimePicker(panelType: PanelType, panelDetail: MonthInfo) {
         const { type, locale, format, hideDisabledOptions, timePickerOpts, dateFnsLocale } = this.props;
         const { pickerDate } = panelDetail;
@@ -606,8 +610,15 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
         } else if (type === 'year' || type === 'month') {
             content = 'year month';
         }
+        const yearOpenType = this.getYAMOpenType();
+
         return (
-            <div className={monthGridCls} x-type={type} ref={current => this.cacheRefCurrent('monthGrid', current)}>
+            <div
+                className={monthGridCls}
+                x-type={type}
+                x-panel-yearandmonth-open-type={yearOpenType}
+                ref={current => this.cacheRefCurrent('monthGrid', current)}
+            >
                 {content}
             </div>
         );

package/datePicker/navigation.tsx

@@ -6,7 +6,7 @@ import { noop } from 'lodash';
 import IconButton from '../iconButton';
 import Button from '../button';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/datePicker/constants';
-import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
+import { IconChevronLeft, IconChevronRight, IconDoubleChevronLeft, IconDoubleChevronRight } from '@douyinfe/semi-icons';
 import { PanelType } from '@douyinfe/semi-foundation/datePicker/monthsGridFoundation';
 
 const prefixCls = cssClasses.NAVIGATION;
@@ -68,6 +68,8 @@ export default class Navigation extends PureComponent<NavigationProps> {
             onMonthClick,
             onNextMonth,
             onPrevMonth,
+            onPrevYear,
+            onNextYear,
             density,
             shouldBimonthSwitch,
             panelType
@@ -77,43 +79,67 @@ export default class Navigation extends PureComponent<NavigationProps> {
         const iconBtnSize = density === 'compact' ? 'default' : 'large';
         const btnNoHorizontalPadding = true;
         const buttonSize = density === 'compact' ? 'small' : 'default';
-        // Enable dual-panel synchronous switching, and the current panel is the left panel
-        const bimonthSwitchWithLeftPanel = shouldBimonthSwitch && panelType === strings.PANEL_TYPE_LEFT;
-        // Enable dual-panel synchronous switching, and the current panel is the right panel
-        const bimonthSwitchWithRightPanel = shouldBimonthSwitch && panelType === strings.PANEL_TYPE_RIGHT;
+        const isLeftPanel = panelType === strings.PANEL_TYPE_LEFT;
+        const isRightPanel =  panelType === strings.PANEL_TYPE_RIGHT;
+
+        // syncSwitchMonth and the current panel is the left
+        const hiddenLeftPanelRightButtons = shouldBimonthSwitch && isLeftPanel;
+        // syncSwitchMonth and the current panel is the right
+        const hiddenRightPanelLeftButtons = shouldBimonthSwitch && isRightPanel;
+        // `visibility: hidden` will keep the icon in position
+        const leftButtonStyle: React.CSSProperties = {};
+        const rightButtonStyle: React.CSSProperties = {};
+        if (hiddenRightPanelLeftButtons) {
+            leftButtonStyle.visibility = 'hidden';
+        }
+        if (hiddenLeftPanelRightButtons) {
+            rightButtonStyle.visibility = 'hidden';
+        }
 
         const ref = forwardRef || this.navRef;
         return (
             <div className={prefixCls} ref={ref}>
-                {
-                    !bimonthSwitchWithRightPanel &&
-                    (
-                        <IconButton
-                            icon={<IconChevronLeft size={iconBtnSize} />}
-                            size={buttonSize}
-                            onClick={onPrevMonth}
-                            theme={btnTheme}
-                            noHorizontalPadding={btnNoHorizontalPadding}
-                        />
-                    )
-                }
+                <IconButton
+                    key="double-chevron-left"
+                    icon={<IconDoubleChevronLeft size={iconBtnSize}/>} 
+                    size={buttonSize}
+                    theme={btnTheme}
+                    noHorizontalPadding={btnNoHorizontalPadding}
+                    onClick={onPrevYear}
+                    style={leftButtonStyle}
+                />
+                <IconButton
+                    key="chevron-left"
+                    icon={<IconChevronLeft size={iconBtnSize} />}
+                    size={buttonSize}
+                    onClick={onPrevMonth}
+                    theme={btnTheme}
+                    noHorizontalPadding={btnNoHorizontalPadding}
+                    style={leftButtonStyle}
+                />
                 <div className={`${prefixCls}-month`}>
                     <Button onClick={onMonthClick} theme={btnTheme} size={buttonSize}>
                         <span>{monthText}</span>
                     </Button>
                 </div>
-                {
-                    !bimonthSwitchWithLeftPanel &&
-                    (
-                        <IconButton
-                            icon={<IconChevronRight size={iconBtnSize} />}
-                            size={buttonSize}
-                            onClick={onNextMonth}
-                            theme={btnTheme}
-                            noHorizontalPadding={btnNoHorizontalPadding}
-                        />
-                    )
-                }
+                <IconButton
+                    key="chevron-right"
+                    icon={<IconChevronRight size={iconBtnSize} />}
+                    size={buttonSize}
+                    onClick={onNextMonth}
+                    theme={btnTheme}
+                    noHorizontalPadding={btnNoHorizontalPadding}
+                    style={rightButtonStyle}
+                />
+                <IconButton
+                    key="double-chevron-right"
+                    icon={<IconDoubleChevronRight size={iconBtnSize}/>} 
+                    size={buttonSize}
+                    theme={btnTheme}
+                    noHorizontalPadding={btnNoHorizontalPadding}
+                    onClick={onNextYear}
+                    style={rightButtonStyle}
+                />
             </div>
         );
     }

package/descriptions/__test__/descriptions.test.js

@@ -17,6 +17,14 @@ const dataWithHide = [
     { key: '认证状态', value: '未认证' },
 ];
 
+const dataWithKeyIsNode = [
+    { key: <strong>实际用户数量</strong>, value: '1,480,000' },
+    { key: '7天留存', value: '98%' },
+    { key: '安全等级', value: '3级' },
+    { key: '垂类标签', value: <Tag>电商</Tag> },
+    { key: '认证状态', value: '未认证' },
+];
+
 function renderDescriptions(props) {
     const realProps = {
         data,
@@ -134,7 +142,6 @@ describe('Descriptions', () => {
         largeDesc.unmount();
     });
 
-
     it('Descriptions with jsx', () => {
         const desc = mount(
             <Descriptions>
@@ -164,4 +171,23 @@ describe('Descriptions', () => {
         ).toEqual('1,480,000');
         desc.unmount();
     });
+
+    it('Descriptions with key is node', () => {
+        const desc = renderDescriptions({ data: dataWithKeyIsNode });
+        expect(
+            desc
+                .find(`.${BASE_CLASS_PREFIX}-descriptions-key strong`)
+                .at(0)
+                .getDOMNode()
+                .textContent
+        ).toEqual('实际用户数量');
+        expect(
+            desc
+                .find(`.${BASE_CLASS_PREFIX}-descriptions-key`)
+                .at(1)
+                .getDOMNode()
+                .textContent
+        ).toEqual('7天留存');
+        desc.unmount();
+    });
 })

package/descriptions/_story/descriptions.stories.js

@@ -1,7 +1,6 @@
 import React from 'react';
-// import { withKnobs, text, boolean } from '@storybook/addon-knobs';
-
 import Descriptions from '../index';
+import Tag from '../../tag';
 
 export default {
   title: 'Descriptions',
@@ -93,3 +92,54 @@ export const DescriptionsItem = () => (
   </div>
 );
 
+export const DescriptionsKeyIsNode = () => {
+  const data = [
+      { key: <strong style={{color: 'red'}}>实际用户数量</strong>, value: '1,480,000' },
+      { key: '7天留存', value: '98%' },
+      { key: '安全等级', value: '3级' },
+      { key: '垂类标签', value: <Tag style={{ margin: 0 }}>电商</Tag> },
+      { key: '认证状态', value: '未认证' },
+  ];
+  const style = {
+      boxShadow: 'var(--shadow-elevated)',
+      backgroundColor: 'var(--color-bg-2)',
+      borderRadius: '4px',
+      padding: '10px',
+      margin: '10px',
+      width: '200px',
+  };
+  return (
+    <>
+      <div>data 传入的写法</div>
+      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+        <Descriptions align="center" data={data} style={style} />
+        <Descriptions align="justify" data={data} style={style} />
+        <Descriptions align="left" data={data} style={style} />
+        <Descriptions align="plain" data={data} style={style} />
+      </div>
+      <div>JSX 写法</div>
+      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+        <Descriptions style={style} align="center" >
+          <Descriptions.Item itemKey={<strong style={{ color: 'red' }}>实际用户数量</strong>}>1,480,000</Descriptions.Item>
+          <Descriptions.Item itemKey="7天留存">98%</Descriptions.Item>
+          <Descriptions.Item itemKey="认证状态">未认证</Descriptions.Item>
+        </Descriptions>
+        <Descriptions style={style} align="justify">
+          <Descriptions.Item itemKey={<strong style={{ color: 'red' }}>实际用户数量</strong>}>1,480,000</Descriptions.Item>
+          <Descriptions.Item itemKey="7天留存">98%</Descriptions.Item>
+          <Descriptions.Item itemKey="认证状态">未认证</Descriptions.Item>
+        </Descriptions>
+        <Descriptions style={style} align="left">
+          <Descriptions.Item itemKey={<strong style={{ color: 'red' }}>实际用户数量</strong>}>1,480,000</Descriptions.Item>
+          <Descriptions.Item itemKey="7天留存">98%</Descriptions.Item>
+          <Descriptions.Item itemKey="认证状态">未认证</Descriptions.Item>
+        </Descriptions>
+        <Descriptions style={style} align="plain">
+          <Descriptions.Item itemKey={<strong style={{ color: 'red' }}>实际用户数量</strong>}>1,480,000</Descriptions.Item>
+          <Descriptions.Item itemKey="7天留存">98%</Descriptions.Item>
+          <Descriptions.Item itemKey="认证状态">未认证</Descriptions.Item>
+        </Descriptions>
+      </div>
+    </>
+  );
+};

package/descriptions/item.tsx

@@ -36,7 +36,7 @@ export default class Item extends PureComponent<DescriptionsItemProps> {
                 <tr className={className} style={style}>
                     <td className={`${prefixCls}-item`}>
                         <span className={keyCls}>
-                            {`${itemKey}:`}
+                            {itemKey}:
                         </span>
                         <span className={valCls}>
                             {typeof children === 'function' ? children() : children}