@douyinfe/semi-ui 2.16.1 → 2.17.0-beta.0

package/collapse/__test__/collapse.test.js

@@ -3,11 +3,13 @@ import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants'; //
 
 import { IconPlus, IconMinus, IconCopy } from '@douyinfe/semi-icons';
 
-let getCollapse = collapseProps => {
+let getCollapse = (collapseProps, panel1Props) => {
     let props = collapseProps ? collapseProps : {};
+    let panelProps = panel1Props ? panel1Props : {};
+
     return (
         <Collapse {...collapseProps}>
-            <Collapse.Panel header="This is panel header 1" itemKey="1">
+            <Collapse.Panel header="This is panel header 1" itemKey="1" {...panelProps}>
                 <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>
             </Collapse.Panel>
             <Collapse.Panel header="This is panel header 2" itemKey="2">
@@ -145,4 +147,22 @@ describe('Collapse', () => {
         expect(headers.at(1).getDOMNode().getAttribute(expandAttr)).toEqual("false");
         expect(headers.at(2).getDOMNode().getAttribute(expandAttr)).toEqual("true");
     });
+
+    it('disable Collapse', () => {
+        let props = {
+            disabled: true,
+        };
+        const disabledPanel = mount(getCollapse({}, props));
+        expect(disabledPanel.exists('.semi-collapse-header-disabled')).toEqual(true);
+    });
+
+    it('hide the panel icon', () => {
+        const hidePanelArrow = mount( 
+        <Collapse >
+            <Collapse.Panel header="This is panel header 1" itemKey="1" showArrow={false}>
+                <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>
+            </Collapse.Panel>
+        </Collapse>);
+        expect(hidePanelArrow.exists('.semi-collapse-header-icon')).toEqual(false);
+    });
 });

package/collapse/_story/accordion.stories.js

@@ -17,7 +17,7 @@ export default {
 export const RegularCollapse = () => (
   <div>
     <Collapse onChange={k => console.log(k)}>
-      <Panel header="This is panel header 1" itemKey="1">
+      <Panel header="This is panel header 1" itemKey="1" showArrow={false}>
         <p>{text}</p>
       </Panel>
       <Panel header="This is panel header 2" itemKey="2">
@@ -32,7 +32,7 @@ export const RegularCollapse = () => (
       <Panel header="This is panel header 1" itemKey="1">
         <p>{text}</p>
       </Panel>
-      <Panel header="This is panel header 2" itemKey="124">
+      <Panel header="This is panel header 2" itemKey="124" disabled>
         <p>{text}</p>
       </Panel>
       <Panel header="This is panel header 3" itemKey="3" disabled>

package/collapse/item.tsx

@@ -15,6 +15,8 @@ export interface CollapsePanelProps {
     children?: React.ReactNode;
     reCalcKey?: number | string;
     style?: CSSProperties;
+    showArrow?: boolean,
+    disabled?: boolean,
 }
 
 export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
@@ -32,6 +34,13 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
             PropTypes.string,
             PropTypes.number,
         ]),
+        showArrow: PropTypes.bool,
+        disabled: PropTypes.bool,
+    };
+
+    static defaultProps = {
+        showArrow: true,
+        disabled: false,
     };
 
     private ariaID = getUuidShort({});
@@ -40,6 +49,7 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
 
     renderHeader(active: boolean, expandIconEnable = true) {
         const {
+            showArrow,
             header,
             extra,
         } = this.props;
@@ -65,20 +75,20 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
         if (typeof header === 'string') {
             return (
                 <>
-                    {iconPosLeft ? icon : null}
+                    {showArrow && (iconPosLeft ? icon : null)}
                     <span>{header}</span>
                     <span className={`${cssClasses.PREFIX}-header-right`}>
                         <span>{extra}</span>
-                        {iconPosLeft ? null : icon}
+                        {showArrow && (iconPosLeft ? null : icon)}
                     </span>
                 </>
             );
         }
         return (
             <>
-                {iconPosLeft ? icon : null}
+                {showArrow && (iconPosLeft ? icon : null)}
                 {header}
-                {iconPosLeft ? null : icon}
+                {showArrow && (iconPosLeft ? null : icon)}
             </>
         );
     }
@@ -91,6 +101,8 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
             reCalcKey,
             header,
             extra,
+            showArrow,
+            disabled,
             ...restProps
         } = this.props;
         const {
@@ -106,6 +118,7 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
         });
         const headerCls = cls({
             [`${cssClasses.PREFIX}-header`]: true,
+            [`${cssClasses.PREFIX}-header-disabled`]: disabled,
             [`${cssClasses.PREFIX}-header-iconLeft`]: expandIconPosition === 'left',
         });
         const contentCls = cls({
@@ -120,11 +133,12 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
                     role="button"
                     tabIndex={0}
                     className={headerCls}
+                    aria-disabled={disabled}
                     aria-expanded={active ? 'true' : 'false'}
                     aria-owns={this.ariaID}
-                    onClick={e => onClick(itemKey, e)}
+                    onClick={e => !disabled && onClick(itemKey, e)}
                 >
-                    {this.renderHeader(active, children !== undefined)}
+                    {this.renderHeader(active, children !== undefined && !disabled)}
                 </div>
                 {
                     children && (

package/datePicker/__test__/datePicker.test.js

@@ -114,7 +114,7 @@ describe(`DatePicker`, () => {
         const demo = mount(<DatePicker presets={presets} motion={motion} open={open} defaultValue={defaultValue} />);
         const elem = demo.find(BaseDatePicker);
 
-        const btns = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-datepicker-quick-control-item`);
+        const btns = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-datepicker-quick-control button`);
 
         /**
          * click next day
@@ -560,7 +560,7 @@ describe(`DatePicker`, () => {
         };
         const demo = mount(<DatePicker {...props} />);
         const elem = demo.find(BaseDatePicker);
-        const btns = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-datepicker-quick-control-item`);
+        const btns = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-datepicker-quick-control button`);
 
         // click disabled date
         btns[0].click();
@@ -675,7 +675,7 @@ describe(`DatePicker`, () => {
         const demo = mount(<DatePicker onPresetClick={handlePresetClick} presets={presets} motion={motion} open={open} defaultValue={defaultValue} />);
         const elem = demo.find(BaseDatePicker);
 
-        const btns = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-datepicker-quick-control-item`);
+        const btns = document.querySelectorAll(`.${BASE_CLASS_PREFIX}-datepicker-quick-control button`);
 
         btns[0].click();
         btns[1].click();
@@ -987,7 +987,7 @@ describe(`DatePicker`, () => {
         const demo = mount(<DatePicker {...props} onChange={handleChange} />);
         const elem = demo.find(BaseDatePicker);
 
-        const btns = document.querySelectorAll('.semi-datepicker-quick-control-item');
+        const btns = document.querySelectorAll('.semi-datepicker-quick-control button');
 
         btns[0].click();
         expect(handleChange.called).toBeTruthy();
@@ -1016,7 +1016,7 @@ describe(`DatePicker`, () => {
         const demo = mount(<DatePicker {...props} onChange={handleChange} onConfirm={handleConfirm} />);
         const elem = demo.find(BaseDatePicker);
 
-        const btns = document.querySelectorAll('.semi-datepicker-quick-control-item');
+        const btns = document.querySelectorAll('.semi-datepicker-quick-control button');
 
         // 点击 preset
         btns[0].click();

package/datePicker/_story/datePicker.stories.js

@@ -10,7 +10,7 @@ import {
   startOfWeek,
   endOfWeek,
 } from 'date-fns';
-import { Space, ConfigProvider, InputGroup, InputNumber, Form, withField, Button } from '../../index';
+import { Space, ConfigProvider, InputGroup, InputNumber, Form, withField, Button, RadioGroup, Radio } from '../../index';
 
 // stores
 import NeedConfirmDemo from './NeedConfirm';
@@ -36,6 +36,7 @@ import DatePickerSlot from './DatePickerSlot';
 import DatePickerTimeZone from './DatePickerTimeZone';
 import BetterRangePicker from './BetterRangePicker';
 import SyncSwitchMonth from './SyncSwitchMonth';
+import { Checkbox } from '../../checkbox';
 export * from './v2';
 
 export default {
@@ -189,6 +190,11 @@ const presets = [
     start: addDays(new Date(), 1),
     end: addDays(new Date(), 1),
   },
+  {
+    text: 'Today After Tomorrow',
+    start: addDays(new Date(), 2),
+    end: addDays(new Date(), 2),
+  },
   {
     text: 'Next Week',
     start: addWeeks(new Date(), 1),
@@ -200,24 +206,14 @@ const presets = [
     end: endOfMonth(addMonths(new Date(), 1)),
   },
   {
-    text: 'Today',
-    start: new Date(),
-    end: new Date(),
-  },
-  {
-    text: 'Tomorrow',
-    start: addDays(new Date(), 1),
-    end: addDays(new Date(), 1),
-  },
-  {
-    text: 'Next Week',
-    start: addWeeks(new Date(), 1),
-    end: addWeeks(new Date(), 2),
+    text: 'Next Bimonthly',
+    start: startOfMonth(addMonths(new Date(), 1)),
+    end: endOfMonth(addMonths(new Date(), 2)),
   },
   {
-    text: 'Next Month',
-    start: startOfMonth(addMonths(new Date(), 1)),
-    end: endOfMonth(addMonths(new Date(), 1)),
+    text: 'Next Quarter',
+    start: startOfMonth(addMonths(new Date(), 3)),
+    end: endOfMonth(addMonths(new Date(), 3)),
   },
 ];
 
@@ -225,40 +221,160 @@ export const DatePickerWithPresets = () => {
   const onPresetClick = (item, e) => {
     console.log('preset click', item, e);
   };
+  const [presetPosition, setPresetPosition] = useState('right');
+  const [insetInput, setInsetInput] = useState(false);
+  const [presetArr, setPresetArr] = useState(presets);
+
+   const BottomSlot = function(props) {
+        const { style } = props;
+        return (
+            <div style={{ padding: '12px 20px', ...style }}>
+                <div strong style={{ color: 'var(--semi-color-text-2)' }}>
+                    定版前请阅读
+                </div>
+                <div link={{ href: 'https://semi.design/', target: '_blank' }}>发版须知</div>
+            </div>
+        );
+    };
   return (
     <div style={demoDiv}>
       <span>带快捷选择的DatePicker</span>
+      <br/>
+      <br/>
+       <RadioGroup onChange={e=>setPresetPosition(e.target.value)} value={presetPosition} aria-label="选择快捷选择面板位置" name="preset-radio-group">
+            <Radio value={'left'}>left</Radio>
+            <Radio value={'right'}>right</Radio>
+            <Radio value={'top'}>top</Radio>
+            <Radio value={'bottom'}>bottom</Radio>
+        </RadioGroup>
+        <Checkbox value={insetInput} onChange={e=>setInsetInput(e.target.checked)}>insetInput</Checkbox>
+        <Checkbox value={presetArr} onChange={e=>setPresetArr(e.target.checked ? [...presets, ...presets, ...presets]:presets)}>more presets</Checkbox>
+       <br/>
+      <div>type="date"</div>
       <DatePicker
-        type="dateRange"
-        presets={presets}
+        type="date"
+        presets={presetArr}
+        insetInput={insetInput}
+        presetPosition={presetPosition}
         onPresetClick={onPresetClick}
         onChange={(...args) => console.log(...args)}
       />
+      <br/>
+      <br/>
+      <div>type="dateTime"</div>
       <DatePicker
         type="dateTime"
-        presets={presets.map(preset => ({
+        insetInput={insetInput}
+        needConfirm
+        bottomSlot={<BottomSlot/>}
+        presetPosition={presetPosition}
+        presets={presetArr.map(preset => ({
+          text: preset.text,
+          start: preset.start,
+        }))}
+        onPresetClick={onPresetClick}
+        onChange={(...args) => console.log(...args)}
+      />
+      <br/>
+      <br/>
+      <div>type="dateRange"</div>
+      <DatePicker
+        type="dateRange"
+        presets={presetArr}
+        insetInput={insetInput}
+        presetPosition={presetPosition}
+        onPresetClick={onPresetClick}
+        onChange={(...args) => console.log(...args)}
+      />
+      <br/>
+      <br/>
+      <div>type="dateTimeRange"</div>
+      <DatePicker
+        type="dateTimeRange"
+        presets={presetArr}
+        insetInput={insetInput}
+        presetPosition={presetPosition}
+        onPresetClick={onPresetClick}
+        onChange={(...args) => console.log(...args)}
+      />
+      <br/>
+      <br/>
+      <div>type="month"</div>
+      <DatePicker
+        type="month"
+        insetInput={insetInput}
+        presetPosition={presetPosition}
+        presets={presetArr.map(preset => ({
           text: preset.text,
           start: preset.start,
         }))}
         onPresetClick={onPresetClick}
         onChange={(...args) => console.log(...args)}
       />
+      <br/>
+      <br/>
+      <div>type="date" density="compact"</div>
+      <DatePicker
+        type="date"
+        presets={presetArr}
+        insetInput={insetInput}
+        density="compact"
+        presetPosition={presetPosition}
+        onPresetClick={onPresetClick}
+        onChange={(...args) => console.log(...args)}
+      />
+      <br/>
+      <br/>
+      <div>type="dateTime" density="compact"</div>
       <DatePicker
         type="dateTime"
+        insetInput={insetInput}
         needConfirm
-        presets={presets.map(preset => ({
+        density="compact"
+        presetPosition={presetPosition}
+        presets={presetArr.map(preset => ({
           text: preset.text,
           start: preset.start,
         }))}
         onPresetClick={onPresetClick}
         onChange={(...args) => console.log(...args)}
       />
+      <br/>
+      <br/>
+      <div>type="dateRange" density="compact"</div>
+      <DatePicker
+        type="dateRange"
+        presets={presetArr}
+        density="compact"
+        insetInput={insetInput}
+        presetPosition={presetPosition}
+        onPresetClick={onPresetClick}
+        onChange={(...args) => console.log(...args)}
+      />
+      <br/>
+      <br/>
+      <div>type="dateTimeRange"  density="compact"</div>
+      <DatePicker
+        type="dateTimeRange"
+        density="compact"
+        presets={presetArr}
+        insetInput={insetInput}
+        presetPosition={presetPosition}
+        onPresetClick={onPresetClick}
+        onChange={(...args) => console.log(...args)}
+      />
+      <br/>
+      <br/>
+      <div>type="month" density="compact"</div>
       <DatePicker
         type="month"
-        presets={presets.map(preset => ({
+        insetInput={insetInput}
+        presetPosition={presetPosition}
+        presets={presetArr.map(preset => ({
           text: preset.text,
           start: preset.start,
         }))}
+        density="compact"
         onPresetClick={onPresetClick}
         onChange={(...args) => console.log(...args)}
       />

package/datePicker/datePicker.tsx

@@ -76,6 +76,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         max: PropTypes.number, // only work when multiple is true
         placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
         presets: PropTypes.array,
+        presetPosition: PropTypes.oneOf(strings.PRESET_POSITION_SET),
         onChange: PropTypes.func,
         onChangeWithDateFirst: PropTypes.bool,
         weekStartsOn: PropTypes.number,
@@ -134,6 +135,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         stopPropagation: true,
         motion: true,
         prefixCls: cssClasses.PREFIX,
+        presetPosition: 'bottom',
         // position: 'bottomLeft',
         zIndex: popoverNumbers.DEFAULT_Z_INDEX,
         type: 'date',
@@ -415,7 +417,8 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             onPanelChange,
             timeZone,
             triggerRender,
-            insetInput
+            insetInput,
+            presetPosition
         } = this.props;
         const { cachedSelectedValue, motionEnd, rangeInputFocus } = this.state;
 
@@ -456,21 +459,49 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
                 focusRecordsRef={this.focusRecordsRef}
                 triggerRender={triggerRender}
                 insetInput={insetInput}
+                presetPosition={presetPosition}
+                renderQuickControls={this.renderQuickControls()}
+                renderDateInput={this.renderDateInput()}
             />
         );
     }
 
     renderQuickControls() {
-        const { presets, type } = this.props;
+        const { presets, type, presetPosition, insetInput } = this.props;
         return (
             <QuickControl
                 type={type}
                 presets={presets}
+                insetInput={insetInput}
+                presetPosition={presetPosition}
                 onPresetClick={(item, e) => this.foundation.handlePresetClick(item, e)}
             />
         );
     }
 
+    renderDateInput() {
+        const { insetInput, dateFnsLocale, density, type, format, rangeSeparator, defaultPickerValue } = this.props;
+        const { insetInputValue, value } = this.state;
+
+        const insetInputProps = {
+            dateFnsLocale,
+            format,
+            insetInputValue,
+            rangeSeparator,
+            type,
+            value: value as Date[],
+            handleInsetDateFocus: this.handleInsetDateFocus,
+            handleInsetTimeFocus: this.handleInsetTimeFocus,
+            onInsetInputChange: this.handleInsetInputChange,
+            rangeInputStartRef: this.rangeInputStartRef,
+            rangeInputEndRef: this.rangeInputEndRef,
+            density,
+            defaultPickerValue
+        };
+
+        return insetInput ? <DateInput {...insetInputProps} insetInput={true} /> : null;
+    }
+
     handleOpenPanel = () => this.foundation.openPanel();
     handleInputChange: DatePickerFoundation['handleInputChange'] = (...args) => this.foundation.handleInputChange(...args);
     handleInsetInputChange = (options: InsetInputChangeProps) => this.foundation.handleInsetInputChange(options);
@@ -626,7 +657,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
     };
 
     renderPanel = (locale: Locale['DatePicker'], localeCode: string, dateFnsLocale: Locale['dateFnsLocale']) => {
-        const { dropdownClassName, dropdownStyle, density, topSlot, bottomSlot, insetInput, type, format, rangeSeparator, defaultPickerValue } = this.props;
+        const { dropdownClassName, dropdownStyle, density, topSlot, bottomSlot, insetInput, type, format, rangeSeparator, defaultPickerValue, presetPosition } = this.props;
         const { insetInputValue, value } = this.state;
         const wrapCls = classnames(
             cssClasses.PREFIX,
@@ -654,17 +685,18 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         };
 
         return (
-            <div ref={this.panelRef} className={wrapCls} style={dropdownStyle}>
+            <div ref={this.panelRef} className={wrapCls} style={dropdownStyle} >
                 {topSlot && (
                     <div className={`${cssClasses.PREFIX}-topSlot`} x-semi-prop="topSlot">
                         {topSlot}
                     </div>
                 )}
-                {insetInput && <DateInput {...insetInputProps} insetInput={true} />}
+                {presetPosition === "top" && this.renderQuickControls()}
+                {/* {insetInput && <DateInput {...insetInputProps} insetInput={true} />} */}
                 {this.adapter.typeIsYearOrMonth()
                     ? this.renderYearMonthPanel(locale, localeCode)
                     : this.renderMonthGrid(locale, localeCode, dateFnsLocale)}
-                {this.renderQuickControls()}
+                {presetPosition === "bottom" && this.renderQuickControls()}
                 {bottomSlot && (
                     <div className={`${cssClasses.PREFIX}-bottomSlot`} x-semi-prop="bottomSlot">
                         {bottomSlot}
@@ -676,7 +708,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
     };
 
     renderYearMonthPanel = (locale: Locale['DatePicker'], localeCode: string) => {
-        const { density } = this.props;
+        const { density, presetPosition } = this.props;
 
         const date = this.state.value[0];
         let year = 0;
@@ -698,6 +730,9 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
                 currentYear={year}
                 currentMonth={month}
                 density={density}
+                presetPosition={presetPosition}
+                renderQuickControls={this.renderQuickControls()}
+                renderDateInput={this.renderDateInput()}
             />
         );
     };

package/datePicker/monthsGrid.tsx

@@ -76,6 +76,9 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
         onPanelChange: PropTypes.func,
         focusRecordsRef: PropTypes.object,
         triggerRender: PropTypes.func,
+        presetPosition: PropTypes.oneOf(strings.PRESET_POSITION_SET),
+        renderQuickControls: PropTypes.node,
+        renderDateInput: PropTypes.node
     };
 
     static defaultProps = {
@@ -600,9 +603,10 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
         );
     }
 
+
     render() {
         const { monthLeft, monthRight } = this.state;
-        const { type, insetInput } = this.props;
+        const { type, insetInput, presetPosition, renderQuickControls, renderDateInput } = this.props;
         const monthGridCls = classnames({
             [`${prefixCls }-month-grid`]: true,
         });
@@ -622,15 +626,23 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
         const yearOpenType = this.getYAMOpenType();
 
         return (
-            <div
-                className={monthGridCls}
-                x-type={type}
-                x-panel-yearandmonth-open-type={yearOpenType}
-                // FIXME:
-                x-insetinput={insetInput ? "true" : "false"}
-                ref={current => this.cacheRefCurrent('monthGrid', current)}
-            >
-                {content}
+            <div style={{ display: 'flex' }}>
+                {presetPosition === "left" && renderQuickControls}
+                <div>
+                    {renderDateInput}
+                    <div
+                        className={monthGridCls}
+                        x-type={type}
+                        x-panel-yearandmonth-open-type={yearOpenType}
+                        // FIXME:
+                        x-insetinput={insetInput ? "true" : "false"}
+                        x-preset-position={renderQuickControls === null ? 'null' : presetPosition}
+                        ref={current => this.cacheRefCurrent('monthGrid', current)}
+                    >
+                        {content}
+                    </div>
+                </div>
+                {presetPosition === "right" && renderQuickControls}
             </div>
         );
     }