@douyinfe/semi-ui 2.2.0 → 2.2.1

package/datePicker/__test__/datePicker.test.js

@@ -191,12 +191,27 @@ describe(`DatePicker`, () => {
         btns[0].click();
         await sleep();
         expect(_.first(elem.state('value')).getDate() === currentValue.getDate()).toBeTruthy();
+        expect(_.isEqual(elem.state('cachedSelectedValue'), [currentValue])).toBe(true);
 
         /**
          * click ensure button
          */
         btns[1].click();
         await sleep();
+        expect(_.first(elem.state('value')).getDate() === currentValue.getDate()).toBe(true);
+
+        /**
+         * re click next day
+         */
+        nextOffsetDayElem.click();
+        await sleep();
+        expect(_.first(elem.state('value')).getDate() === currentValue.getDate()).toBeTruthy();
+
+        /**
+         * re click ensure button
+         */
+        btns[1].click();
+        await sleep();
         expect(_.first(elem.state('value')).getDate() - currentValue.getDate()).toBe(dayOffset);
 
         demo.unmount();

package/datePicker/_story/datePicker.stories.js

@@ -661,4 +661,65 @@ export const FixParseISOBug = () => (
 FixParseISOBug.storyName = '修复 parseISO bug';
 FixParseISOBug.parameters = {
   chromatic: { disableSnapshot: false },
-};
+};
+
+export const FixNeedConfirm = () => {
+  const defaultDate = '2021-12-27 10:37:13';
+  const defaultDateRange = ['2021-12-27 10:37:13', '2022-01-28 10:37:13' ];
+  const props = {
+    needConfirm: true,
+    onConfirm: (...args) => {
+      console.log('Confirmed: ', ...args);
+    },
+    onChange: (...args) => {
+      console.log('Changed: ', ...args);
+    },
+    onCancel: (...args) => {
+      console.log('Canceled: ', ...args);
+    },
+  };
+
+  return (
+    <div>
+      <div data-cy="1">
+        <span>dateTime + needConfirm + defaultValue</span>
+        <div>
+          <DatePicker
+            type="dateTime"
+            defaultValue={defaultDate}
+            {...props}
+          />
+        </div>
+      </div>
+      <div data-cy="2">
+        <span>dateTime + needConfirm</span>
+        <div>
+          <DatePicker
+            type="dateTime"
+            {...props}
+          />
+        </div>
+      </div>
+      <div data-cy="3">
+        <span>dateTimeRange + needConfirm + defaultValue</span>
+        <div>
+          <DatePicker
+            type="dateTimeRange"
+            defaultValue={defaultDateRange}
+            {...props}
+          />
+        </div>
+      </div>
+      <div data-cy="4">
+        <span>dateTimeRange + needConfirm</span>
+        <div>
+          <DatePicker
+            type="dateTimeRange"
+            {...props}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+FixNeedConfirm.storyName = '修复 needConfirm 取消后输入框显示错误';

package/datePicker/datePicker.tsx

@@ -206,6 +206,9 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
                     this.clickOutSideHandler = null;
                 }
                 this.clickOutSideHandler = e => {
+                    if (this.adapter.needConfirm()) {
+                        return;
+                    }
                     const triggerEl = this.triggerElRef && this.triggerElRef.current;
                     const panelEl = this.panelRef && this.panelRef.current;
                     const isInTrigger = triggerEl && triggerEl.contains(e.target as Node);

package/dist/css/semi.css

@@ -3524,6 +3524,12 @@ body[theme-mode=dark], body .semi-always-dark {
   text-align: right;
   background-color: var(--semi-color-fill-0);
 }
+.semi-datepicker-footer .semi-button:first-of-type {
+  margin-right: 12px;
+}
+.semi-datepicker-footer .semi-button:nth-of-type(2) {
+  margin-right: 8px;
+}
 .semi-datepicker-yam {
   position: absolute;
   top: 0;
@@ -4131,6 +4137,16 @@ body[theme-mode=dark], body .semi-always-dark {
   padding-left: 8px;
   text-align: left;
 }
+.semi-rtl .semi-datepicker-footer .semi-button:first-of-type,
+.semi-portal-rtl .semi-datepicker-footer .semi-button:first-of-type {
+  margin-left: 0;
+  margin-right: 0;
+}
+.semi-rtl .semi-datepicker-footer .semi-button:nth-of-type(2),
+.semi-portal-rtl .semi-datepicker-footer .semi-button:nth-of-type(2) {
+  margin-right: 12px;
+  margin-left: 0;
+}
 .semi-rtl .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main,
 .semi-portal-rtl .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main {
   border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
@@ -4166,12 +4182,20 @@ body[theme-mode=dark], body .semi-always-dark {
   margin-right: 8px;
 }
 .semi-rtl .semi-datepicker-navigation .semi-icon-chevron_left,
-.semi-rtl .semi-datepicker-navigation .semi-icon-chevron_right, .semi-rtl .semi-datepicker-yam .semi-icon-chevron_left,
+.semi-rtl .semi-datepicker-navigation .semi-icon-chevron_right,
+.semi-rtl .semi-datepicker-navigation .semi-icon-double_chevron_left,
+.semi-rtl .semi-datepicker-navigation .semi-icon-double_chevron_right, .semi-rtl .semi-datepicker-yam .semi-icon-chevron_left,
 .semi-rtl .semi-datepicker-yam .semi-icon-chevron_right,
+.semi-rtl .semi-datepicker-yam .semi-icon-double_chevron_left,
+.semi-rtl .semi-datepicker-yam .semi-icon-double_chevron_right,
 .semi-portal-rtl .semi-datepicker-navigation .semi-icon-chevron_left,
 .semi-portal-rtl .semi-datepicker-navigation .semi-icon-chevron_right,
+.semi-portal-rtl .semi-datepicker-navigation .semi-icon-double_chevron_left,
+.semi-portal-rtl .semi-datepicker-navigation .semi-icon-double_chevron_right,
 .semi-portal-rtl .semi-datepicker-yam .semi-icon-chevron_left,
-.semi-portal-rtl .semi-datepicker-yam .semi-icon-chevron_right {
+.semi-portal-rtl .semi-datepicker-yam .semi-icon-chevron_right,
+.semi-portal-rtl .semi-datepicker-yam .semi-icon-double_chevron_left,
+.semi-portal-rtl .semi-datepicker-yam .semi-icon-double_chevron_right {
   transform: scaleX(-1);
 }
 .semi-rtl .semi-datepicker-range-input-prefix,
@@ -16104,12 +16128,10 @@ body[theme-mode=dark], body .semi-always-dark {
   color: var(--semi-color-text-0);
   width: 100%;
 }
-.semi-table-middle .semi-table-thead > .semi-table-row > .semi-table-row-head,
 .semi-table-middle .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
   padding-top: 12px;
   padding-bottom: 12px;
 }
-.semi-table-small .semi-table-thead > .semi-table-row > .semi-table-row-head,
 .semi-table-small .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
   padding-top: 8px;
   padding-bottom: 8px;