@douyinfe/semi-ui 2.2.1 → 2.2.2

package/datePicker/__test__/datePicker.test.js

@@ -968,4 +968,97 @@ describe(`DatePicker`, () => {
 
     it('test month sync change dateRange type', () => { testMonthSyncChange('dateRange') });
     it('test month sync change dateTimeRange type', () => { testMonthSyncChange('dateTimeRange')});
+
+    it(`test preset given null`, async () => {
+        const props = {
+            presets: [
+                {
+                    text: 'Today',
+                    start: null,
+                    end: null,
+                }
+            ],
+            defaultValue: baseDate,
+            defaultOpen: true,
+            motion: false,
+            type: 'dateRange'
+        }
+        const handleChange = sinon.spy();
+        const demo = mount(<DatePicker {...props} onChange={handleChange} />);
+        const elem = demo.find(BaseDatePicker);
+
+        const btns = document.querySelectorAll('.semi-datepicker-quick-control-item');
+
+        btns[0].click();
+        expect(handleChange.called).toBeTruthy();
+        const args = handleChange.getCall(0).args;
+        expect(args[0].length).toEqual(0);
+        expect(elem.state('panelShow')).toBeFalsy();
+    });
+
+    it(`test preset given null + needConfirm`, async () => {
+        const props = {
+            presets: [
+                {
+                    text: 'Today',
+                    start: null,
+                    end: null,
+                }
+            ],
+            defaultValue: baseDate,
+            defaultOpen: true,
+            motion: false,
+            type: 'dateTimeRange',
+            needConfirm: true,
+        }
+        const handleChange = sinon.spy();
+        const handleConfirm = sinon.spy();
+        const demo = mount(<DatePicker {...props} onChange={handleChange} onConfirm={handleConfirm} />);
+        const elem = demo.find(BaseDatePicker);
+
+        const btns = document.querySelectorAll('.semi-datepicker-quick-control-item');
+
+        // 点击 preset
+        btns[0].click();
+        expect(handleChange.called).toBe(true);
+        const argsChange = handleChange.getCall(0).args;
+        expect(argsChange[0].length).toBe(0);
+        expect(elem.state('panelShow')).toBe(true);
+        // 点击确定
+        const footerBtns = document.querySelectorAll('.semi-datepicker-footer .semi-button');
+        footerBtns[1].click();
+        expect(handleConfirm.called).toBe(true);
+        const argsConfirm = handleConfirm.getCall(0).args;
+        expect(argsConfirm[0].length).toBe(0);
+        expect(elem.state('panelShow')).toBe(false);
+    });
+    
+    it('test dateRange triggerRender', async () => {
+        const elem = mount(
+            <DatePicker
+                motion={false}
+                // defaultOpen
+                type="dateRange"
+                triggerRender={({ placeholder }) => (
+                    <button>
+                        {placeholder}
+                    </button>
+                )}
+            />
+        );
+        const trigger = document.querySelector('button');
+        trigger.click();
+        await sleep();
+        const leftPanel = document.querySelector(`.${BASE_CLASS_PREFIX}-datepicker-month-grid-left`);
+        const leftSecondWeek = leftPanel.querySelectorAll(`.${BASE_CLASS_PREFIX}-datepicker-week`)[1];
+        const leftSecondWeekDays = leftSecondWeek.querySelectorAll(`.${BASE_CLASS_PREFIX}-datepicker-day`);
+        const rightPanel = document.querySelector(`.${BASE_CLASS_PREFIX}-datepicker-month-grid-right`);
+        const rightSecondWeek = rightPanel.querySelectorAll(`.${BASE_CLASS_PREFIX}-datepicker-week`)[1];
+        const rightSecondWeekDays = rightSecondWeek.querySelectorAll(`.${BASE_CLASS_PREFIX}-datepicker-day`);
+        leftSecondWeekDays[0].click();
+        rightSecondWeekDays[0].click();
+
+        const baseElem = elem.find(BaseDatePicker);
+        expect(baseElem.state('panelShow')).toBeFalsy();
+    });
 });

package/datePicker/_story/datePicker.stories.js

@@ -10,7 +10,7 @@ import {
   startOfWeek,
   endOfWeek,
 } from 'date-fns';
-import { Space, ConfigProvider, InputGroup, InputNumber, Form, withField } from '../../index';
+import { Space, ConfigProvider, InputGroup, InputNumber, Form, withField, Button } from '../../index';
 
 // stores
 import NeedConfirmDemo from './NeedConfirm';
@@ -723,3 +723,86 @@ export const FixNeedConfirm = () => {
   )
 }
 FixNeedConfirm.storyName = '修复 needConfirm 取消后输入框显示错误';
+
+/**
+ * fix https://github.com/DouyinFE/semi-design/issues/388
+ */
+export const FixPresetsClick = () => {
+  const presets = [
+    {
+      text: '清空',
+      start: '',
+      end: '',
+    },
+    {
+      text: 'Tomorrow',
+      start: new Date(new Date().valueOf() + 1000 * 3600 * 24),
+      end: new Date(new Date().valueOf() + 1000 * 3600 * 24),
+    },
+  ];
+
+  const handleChange = v => {
+    console.log('change', v);
+  };
+
+  const handleConfirm = v => {
+    console.log('confirm', v);
+  }
+
+  return (
+    <div>
+      <div>
+        <label>
+          <span>不设置 needConfirm</span>
+          <DatePicker onChange={console.log} type="dateRange" presets={presets} />
+        </label>
+      </div>
+      <div>
+        <label>
+          <span>设置 needConfirm</span>
+          <DatePicker needConfirm onChange={handleChange} onConfirm={handleConfirm} type="dateTimeRange" presets={presets} />
+        </label>
+      </div>
+    </div>
+  );
+};
+FixPresetsClick.storyName = '修复 presets 点击后不收起问题';
+
+/**
+ * fix https://github.com/DouyinFE/semi-design/issues/410
+ */
+export const FixTriggerRenderClosePanel = () => {
+  const [value, setValue] = useState([]);
+
+  const handleChange = v => {
+    console.log('change', v);
+    setValue(v);
+  };
+
+  const formatValue = (dates) => {
+    const dateStrs = dates.map(v => String(v));
+    return dateStrs.join(' ~ ');
+  };
+
+  const showClear = Array.isArray(value) && value.length > 1;
+
+  return (
+    <Space>
+      <DatePicker
+        value={value}
+        type="dateRange"
+        onChange={handleChange}
+        motion={false}
+        triggerRender={({ placeholder }) => (
+            <Button>
+                {(value && formatValue(value)) || placeholder}
+            </Button>
+        )}
+      />
+      {showClear && (
+        <Button onClick={() => setValue([])}>清除</Button>
+      )}
+    </Space>
+  );
+};
+FixTriggerRenderClosePanel.storyName = "fix triggerRender close bug"

package/datePicker/datePicker.tsx

@@ -363,6 +363,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             syncSwitchMonth,
             onPanelChange,
             timeZone,
+            triggerRender
         } = this.props;
         const { value, cachedSelectedValue, motionEnd, rangeInputFocus } = this.state;
 
@@ -408,6 +409,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
                 onPanelChange={onPanelChange}
                 timeZone={timeZone}
                 focusRecordsRef={this.focusRecordsRef}
+                triggerRender={triggerRender}
             />
         );
     }

package/datePicker/monthsGrid.tsx

@@ -71,7 +71,8 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
         syncSwitchMonth: PropTypes.bool,
         // Callback function for panel date switching
         onPanelChange: PropTypes.func,
-        focusRecordsRef: PropTypes.object
+        focusRecordsRef: PropTypes.object,
+        triggerRender: PropTypes.func,
     };
 
     static defaultProps = {

package/dist/umd/semi-ui.js

@@ -29600,6 +29600,7 @@ const IconUpload_IconComponent = convertIcon(IconUpload_SvgComponent, 'upload');
 
 
 
+
 
 
 // CONCATENATED MODULE: ../semi-icons/lib/es/index.js
@@ -52351,12 +52352,10 @@ class foundation_DatePickerFoundation extends foundation {
     };
 
     this._isRangeValueComplete = value => {
-      let result = true;
+      let result = false;
 
       if (is_array_default()(value)) {
         result = !some_default()(value).call(value, date => isNullOrUndefined(date));
-      } else {
-        result = false;
       }
 
       return result;
@@ -53014,7 +53013,7 @@ class foundation_DatePickerFoundation extends foundation {
 
     if (!this._someDateDisabled(changedDates)) {
       inputValue = this._isMultiple() ? this.formatMultipleDates(dates) : this.formatDates(dates);
-      const isRangeTypeAndInputIncomplete = this._isRangeType() && (isNullOrUndefined(dates[0]) || isNullOrUndefined(dates[1]));
+      const isRangeTypeAndInputIncomplete = this._isRangeType() && !this._isRangeValueComplete(dates);
       /**
        * If the input is incomplete when under control, the notifyChange is not triggered because
        * You need to update the value of the input box, otherwise there will be a problem that a date is selected but the input box does not show the date #1357
@@ -54542,6 +54541,7 @@ const getMonthTable = (month, weekStartsOn) => {
 
 
 
+
 /* eslint-disable max-len */
 
 
@@ -55235,13 +55235,16 @@ class monthsGridFoundation_MonthsGridFoundation extends foundation {
       rangeStart,
       rangeEnd
     } = this.getStates();
+
     const {
       startDateOffset,
       endDateOffset,
       type,
       dateFnsLocale,
-      rangeInputFocus
-    } = this.getProps();
+      rangeInputFocus,
+      triggerRender
+    } = this._adapter.getProps();
+
     const {
       fullDate
     } = day;
@@ -55322,9 +55325,17 @@ class monthsGridFoundation_MonthsGridFoundation extends foundation {
           date = [start, end];
         }
       }
+      /**
+       * no need to check focus then
+       *  - dateRange and isDateRangeAndHasOffset
+       *  - dateRange and triggerRender
+       */
+
+
+      const needCheckFocusRecord = !(type === 'dateRange' && (isDateRangeAndHasOffset || isFunction_default()(triggerRender)));
 
       this._adapter.notifySelectedChange(date, {
-        needCheckFocusRecord: !(type === 'dateRange' && isDateRangeAndHasOffset)
+        needCheckFocusRecord
       });
     }
   }
@@ -58913,7 +58924,8 @@ monthsGrid_MonthsGrid.propTypes = {
   syncSwitchMonth: prop_types_default.a.bool,
   // Callback function for panel date switching
   onPanelChange: prop_types_default.a.func,
-  focusRecordsRef: prop_types_default.a.object
+  focusRecordsRef: prop_types_default.a.object,
+  triggerRender: prop_types_default.a.func
 };
 monthsGrid_MonthsGrid.defaultProps = {
   type: 'date',
@@ -59445,7 +59457,8 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
       density,
       syncSwitchMonth,
       onPanelChange,
-      timeZone
+      timeZone,
+      triggerRender
     } = this.props;
     const {
       value,
@@ -59492,7 +59505,8 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
       syncSwitchMonth: syncSwitchMonth,
       onPanelChange: onPanelChange,
       timeZone: timeZone,
-      focusRecordsRef: this.focusRecordsRef
+      focusRecordsRef: this.focusRecordsRef,
+      triggerRender: triggerRender
     });
   }
 
@@ -63797,6 +63811,8 @@ class foundation_InputNumberFoundation extends foundation {
 
     this._adapter.setFocusing(true, null);
 
+    this._adapter.setClickUpOrDown(false);
+
     this._adapter.notifyFocus(e);
   }
   /**
@@ -64135,7 +64151,7 @@ class foundation_InputNumberFoundation extends foundation {
   }
   /**
    * format number to string
-   * @param {number} value
+   * @param {string|number} value
    * @param {boolean} needAdjustPrec
    * @returns {string}
    */
@@ -64688,7 +64704,11 @@ class inputNumber_InputNumber extends baseComponent_BaseComponent {
           if (this.foundation.isValidNumber(parsedNum) && parsedNum !== this.state.number) {
             const obj = {
               number: parsedNum
-            }; // Updates input when a button is clicked
+            };
+            /**
+             * If you are clicking the button, it will automatically format once
+             * We need to set the status to false after trigger focus event
+             */
 
             if (this.clickUpOrDown) {
               obj.value = this.foundation.doFormat(valueStr, true);
@@ -98708,11 +98728,11 @@ class transfer_Transfer extends baseComponent_BaseComponent {
     }, inputCom, content);
   }
 
-  renderGroupTitle(group) {
+  renderGroupTitle(group, index) {
     const groupCls = classnames_default()("".concat(transfer_prefixcls, "-group-title"));
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
       className: groupCls,
-      key: group.title
+      key: "title-".concat(index)
     }, group.title);
   }
 
@@ -98769,7 +98789,7 @@ class transfer_Transfer extends baseComponent_BaseComponent {
         // group content already insert
         content.push(optionContent);
       } else if (parentGroup) {
-        const groupContent = this.renderGroupTitle(parentGroup);
+        const groupContent = this.renderGroupTitle(parentGroup, index);
         groupStatus.set(parentGroup.title, true);
         content.push(groupContent);
         content.push(optionContent);