@douyinfe/semi-foundation 2.6.0 → 2.7.1

package/lib/cjs/datePicker/datePicker.css

@@ -4,6 +4,7 @@
 .semi-datepicker {
   box-sizing: border-box;
   display: inline-block;
+  vertical-align: top;
 }
 .semi-datepicker-month-grid {
   user-select: none;
@@ -29,6 +30,24 @@
 .semi-datepicker-month-grid[x-type=date] .semi-datepicker-yam-showing {
   min-height: 325px;
 }
+.semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-left[x-open-type=year],
+.semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-right[x-open-type=year] {
+  min-height: 312px;
+}
+.semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-left[x-open-type=time],
+.semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-right[x-open-type=time] {
+  min-height: 314px;
+}
+.semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-navigation {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-tpk {
+  min-height: 100%;
+}
+.semi-datepicker-month-grid[x-insetInput=true][x-type=dateTime] .semi-datepicker-yam, .semi-datepicker-month-grid[x-insetInput=true][x-type=dateTimeRange] .semi-datepicker-yam {
+  height: 100%;
+}
 .semi-datepicker-month-grid .semi-datepicker-yearmonth-header {
   background: var(--semi-color-bg-3);
   padding: 12px 16px;
@@ -70,6 +89,7 @@
   line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   min-height: 24px;
+  line-height: 24px;
 }
 .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=left] .semi-datepicker-weeks, .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=right] .semi-datepicker-weeks {
   min-height: 216px;
@@ -370,6 +390,34 @@
 .semi-datepicker .semi-datepicker-input-readonly {
   cursor: pointer;
 }
+.semi-datepicker-inset-input-wrapper {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  box-sizing: border-box;
+  column-gap: 8px;
+  padding: 12px 16px;
+  padding-bottom: 0;
+  width: 284px;
+}
+.semi-datepicker-inset-input-wrapper[x-type=dateRange], .semi-datepicker-inset-input-wrapper[x-type=dateTimeRange] {
+  width: 568px;
+}
+.semi-datepicker-inset-input-wrapper[x-type=month] {
+  width: 204px;
+}
+.semi-datepicker-inset-input-wrapper .semi-input-wrapper {
+  flex: 1;
+  flex-shrink: 0;
+}
+.semi-datepicker-inset-input-separator {
+  flex-grow: 0;
+  flex-shrink: 0;
+  height: 32px;
+  line-height: 32px;
+  padding: 0 4px;
+  color: var(--semi-color-text-3);
+}
 .semi-datepicker-range-input {
   display: flex;
   align-items: center;
@@ -572,6 +620,23 @@
 .semi-datepicker-compact .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=left] .semi-datepicker-weeks, .semi-datepicker-compact .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=right] .semi-datepicker-weeks {
   min-height: 168px;
 }
+.semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-left[x-open-type=year],
+.semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-right[x-open-type=year] {
+  min-height: 236px;
+}
+.semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-left[x-open-type=time],
+.semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-month-grid-right[x-open-type=time] {
+  min-height: 236px;
+}
+.semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-yam-showing {
+  min-height: 236px;
+}
+.semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true] .semi-datepicker-tpk {
+  min-height: 100%;
+}
+.semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true][x-type=dateTime] .semi-datepicker-yam, .semi-datepicker-compact .semi-datepicker-month-grid[x-insetInput=true][x-type=dateTimeRange] .semi-datepicker-yam {
+  height: 100%;
+}
 .semi-datepicker-compact.semi-datepicker-panel-yam .semi-scrolllist {
   font-size: 12px;
   line-height: 16px;
@@ -687,11 +752,42 @@
   padding-right: 8px;
   padding-bottom: 10px;
 }
+.semi-datepicker-compact .semi-datepicker-inset-input-wrapper {
+  column-gap: 4px;
+  padding: 8px 8px;
+  padding-bottom: 0;
+  width: 216px;
+}
+.semi-datepicker-compact .semi-datepicker-inset-input-wrapper[x-type=dateRange], .semi-datepicker-compact .semi-datepicker-inset-input-wrapper[x-type=dateTimeRange] {
+  width: 432px;
+  padding-top: 0;
+}
+.semi-datepicker-compact .semi-datepicker-inset-input-wrapper[x-type=dateRange] .semi-input-wrapper, .semi-datepicker-compact .semi-datepicker-inset-input-wrapper[x-type=dateTimeRange] .semi-input-wrapper {
+  margin-top: 8px;
+}
+.semi-datepicker-compact .semi-datepicker-inset-input-wrapper[x-type=month] {
+  width: 195px;
+}
+.semi-datepicker-compact .semi-datepicker-inset-input-wrapper .semi-input-wrapper {
+  height: 28px;
+  box-sizing: border-box;
+}
+.semi-datepicker-compact .semi-datepicker-inset-input-wrapper .semi-input-wrapper .semi-input {
+  font-size: 12px;
+  line-height: 26px;
+  height: 26px;
+  vertical-align: top;
+}
+.semi-datepicker-compact .semi-datepicker-inset-input-separator {
+  border-left: 1px solid var(--semi-color-border);
+  transform: translateX(50%);
+  height: auto;
+}
 
-.semi-popover-wrapper[x-placement*=top] .semi-datepicker .semi-datepicker-weeks, .semi-popover-wrapper[x-placement*=Top] .semi-datepicker .semi-datepicker-weeks {
+.semi-popover-wrapper[x-placement^=top] .semi-datepicker .semi-datepicker-weeks, .semi-popover-wrapper[x-placement=leftTop] .semi-datepicker .semi-datepicker-weeks, .semi-popover-wrapper[x-placement=rightTop] .semi-datepicker .semi-datepicker-weeks, .semi-popover-wrapper[x-placement*=BottomOver] .semi-datepicker .semi-datepicker-weeks {
   min-height: 216px;
 }
-.semi-popover-wrapper[x-placement*=top] .semi-datepicker-compact .semi-datepicker-weeks, .semi-popover-wrapper[x-placement*=Top] .semi-datepicker-compact .semi-datepicker-weeks {
+.semi-popover-wrapper[x-placement^=top] .semi-datepicker-compact .semi-datepicker-weeks, .semi-popover-wrapper[x-placement=leftTop] .semi-datepicker-compact .semi-datepicker-weeks, .semi-popover-wrapper[x-placement=rightTop] .semi-datepicker-compact .semi-datepicker-weeks, .semi-popover-wrapper[x-placement*=BottomOver] .semi-datepicker-compact .semi-datepicker-weeks {
   min-height: 168px;
 }
 
@@ -836,4 +932,10 @@
 .semi-portal-rtl .semi-datepicker-compact .semi-datepicker-footer {
   padding-left: 8px;
   padding-right: auto;
+}
+.semi-rtl .semi-datepicker-compact .semi-datepicker-inset-input-separator,
+.semi-portal-rtl .semi-datepicker-compact .semi-datepicker-inset-input-separator {
+  border-right: 1px solid var(--semi-color-border);
+  border-left: 0;
+  transform: translateX(-50%);
 }

package/lib/cjs/datePicker/datePicker.scss

@@ -6,6 +6,7 @@ $module: #{$prefix}-datepicker;
 .#{$module} {
     box-sizing: border-box;
     display: inline-block;
+    vertical-align: top;
 
     // 双月网格
 
@@ -45,6 +46,34 @@ $module: #{$prefix}-datepicker;
             min-height: $height-datepicker_dateType_yamShowing_min;
         }
 
+        &[x-insetInput=true] {
+            .#{$module}-month-grid-left,
+            .#{$module}-month-grid-right {
+                &[x-open-type=year] {
+                    min-height: $height-datepicker_month_grid_yearType_insetInput;
+                }
+                &[x-open-type=time] {
+                    min-height: $height-datepicker_month_grid_timeType_insetInput;
+                }
+            }
+
+            .#{$module}-navigation {
+                padding-top: $spacing-datepicker_navigation_insetInput-paddingY;
+                padding-bottom: $spacing-datepicker_navigation_insetInput-paddingY;
+            }
+
+            .#{$module}-tpk {
+                min-height: $height-datepicker_timeType_insetInput_tpk;
+            }
+
+            &[x-type=dateTime],
+            &[x-type=dateTimeRange] {
+                .#{$module}-yam {
+                    height: $height-datepicker_timeType_insetInput_yam;
+                }
+            }
+        }
+
         // 年月选择返回主面板
         .#{$module}-yearmonth-header {
             background: $color-datepicker_header-bg-default;
@@ -92,6 +121,7 @@ $module: #{$prefix}-datepicker;
 
                 @include font-size-regular;
                 min-height: $height-datepicker_timepicker_header_min;
+                line-height: $height-datepicker_timepicker_header_min;
             }
         }
 
@@ -581,6 +611,41 @@ $module: #{$prefix}-datepicker;
         cursor: pointer;
     }
 
+    &-inset-input {
+        &-wrapper {
+            display: flex;
+            flex-wrap: nowrap;
+            justify-content: space-between;
+            box-sizing: border-box;
+            column-gap: $spacing-datepicker_insetInput_wrapper-margin;
+            padding: $spacing-datepicker_insetInput_wrapper-paddingY $spacing-datepicker_insetInput_wrapper-paddingX;
+            padding-bottom: $spacing-datepicker_insetInput_wrapper-paddingBottom;
+
+            width: $width-datepicker_insetInput_date_type_wrapper;
+            &[x-type=dateRange],
+            &[x-type=dateTimeRange] {
+                width: $width-datepicker_insetInput_date_range_type_wrapper;
+            }
+            &[x-type=month] {
+                width: $width-datepicker_insetInput_month_type_wrapper;
+            }
+
+            .#{$prefix}-input-wrapper {
+                flex: 1;
+                flex-shrink: 0;
+            }
+        }
+
+        &-separator {
+            flex-grow: 0;
+            flex-shrink: 0;
+            height: $height-datepicker_insetInput_separator;
+            line-height: $height-datepicker_insetInput_separator;
+            padding: $spacing-datepicker_insetInput_separator-paddingY $spacing-datepicker_insetInput_separator-paddingX;
+            color: $color-datepicker_insetInput_separator;
+        }
+    }
+
     &-range {
 
         &-input {
@@ -862,6 +927,33 @@ $module: #{$prefix}-datepicker;
                 min-height: 6 * $width-datepicker_day_compact;
             }
         }
+
+        &[x-insetInput=true] {
+            .#{$module}-month-grid-left,
+            .#{$module}-month-grid-right {
+                &[x-open-type=year] {
+                    min-height: $height-datepicker_tpk_compact;
+                }
+                &[x-open-type=time] {
+                    min-height: $height-datepicker_tpk_compact;
+                }
+            }
+
+            .#{$module}-yam-showing {
+                min-height: $height-datepicker_tpk_compact;
+            }
+
+            .#{$module}-tpk {
+                min-height: $height-datepicker_insetInput_tpk_compact;
+            }
+
+            &[x-type=dateTime],
+            &[x-type=dateTimeRange] {
+                .#{$module}-yam {
+                    height: $height-datepicker_timeType_insetInput_yam_compact;
+                }
+            }
+        }
     }
 
     // 年月选择器
@@ -1039,6 +1131,46 @@ $module: #{$prefix}-datepicker;
         padding-right: $spacing-datepicker_footer_compact-paddintRight;
         padding-bottom: $spacing-datepicker_footer_compact-paddintBottom;
     }
+
+    .#{$module}-inset-input {
+        &-wrapper {
+            column-gap: $spacing-datepicker_insetInput_wrapper_compact-margin;
+            padding: $spacing-datepicker_insetInput_wrapper_compact-paddingY $spacing-datepicker_insetInput_wrapper_compact-paddingX;
+            padding-bottom: $spacing-datepicker_insetInput_wrapper_compact-paddingBottom;
+
+            width: $width-datepicker_insetInput_date_type_wrapper_compact;
+            &[x-type=dateRange],
+            &[x-type=dateTimeRange] {
+                width: $width-datepicker_insetInput_date_range_type_wrapper_compact;
+                padding-top: $spacing-datepicker_insetInput_wrapper_rangeType_compact-paddingTop;
+
+                .#{$prefix}-input-wrapper {
+                    margin-top: $spacing-datepicker_insetInput_wrapper_compact-paddingY;
+                }
+            }
+            &[x-type=month] {
+                width: $width-datepicker_insetInput_month_type_wrapper_compact;
+            }
+
+            .#{$prefix}-input-wrapper {
+                height: $height-datepicker_insetInput_wrapper_compact;
+                box-sizing: border-box;
+
+                .#{$prefix}-input {
+                    font-size: $fontSize-datepicker_insetInput_compact-fontSize;
+                    line-height: $height-datepicker_insetInput_compact;
+                    height: $height-datepicker_insetInput_compact;
+                    vertical-align: top;
+                }
+            }
+        }
+
+        &-separator {
+            border-left: $width-datepicker-border solid $color-datepicker_border-bg-default;
+            transform: translateX(50%);
+            height: auto;
+        }
+    }
 }
 
 // 向上弹出时固定高度为6周 #1042
@@ -1046,8 +1178,10 @@ $module: #{$prefix}-datepicker;
 
     &-wrapper {
 
-        &[x-placement*="top"],
-        &[x-placement*="Top"] {
+        &[x-placement^="top"],
+        &[x-placement="leftTop"],
+        &[x-placement="rightTop"],
+        &[x-placement*="BottomOver"] {
             .#{$module} .#{$module}-weeks {
                 min-height: 6 * $width-datepicker_day;
             }
@@ -1056,7 +1190,6 @@ $module: #{$prefix}-datepicker;
                 min-height: 6 * $width-datepicker_day_compact;
             }
         }
-        
     }
 }
 

package/lib/cjs/datePicker/foundation.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { strings } from './constants';
-import { Type, DateInputFoundationProps } from './inputFoundation';
+import { Type, DateInputFoundationProps, InsetInputValue } from './inputFoundation';
 import { MonthsGridFoundationProps } from './monthsGridFoundation';
 import { WeekStartNumber } from './_utils/getMonthTable';
 import { ArrayElement, Motion } from '../utils/type';
@@ -70,6 +70,7 @@ export interface RenderProps {
     renderFullDate?: RenderFullDateType;
     triggerRender?: TriggerRenderType;
 }
+export declare type RangeType = 'rangeStart' | 'rangeEnd' | false;
 export interface EventHandlerProps {
     onCancel?: OnCancelType;
     onChange?: OnChangeType;
@@ -78,7 +79,7 @@ export interface EventHandlerProps {
     onConfirm?: OnConfirmType;
     onBlur?: (e: any) => void;
     onClear?: (e: any) => void;
-    onFocus?: (e: any, rangType: 'rangeStart' | 'rangeEnd') => void;
+    onFocus?: (e: any, rangType: RangeType) => void;
     onPresetClick?: OnPresetClickType;
 }
 export interface DatePickerFoundationProps extends ElementProps, RenderProps, EventHandlerProps {
@@ -130,6 +131,7 @@ export interface DatePickerFoundationProps extends ElementProps, RenderProps, Ev
     dateFnsLocale?: any;
     localeCode?: string;
     rangeSeparator?: string;
+    insetInput?: boolean;
 }
 export interface DatePickerFoundationState {
     panelShow: boolean;
@@ -139,8 +141,10 @@ export interface DatePickerFoundationState {
     cachedSelectedValue: Date[];
     prevTimeZone: string | number;
     motionEnd: boolean;
-    rangeInputFocus: 'rangeStart' | 'rangeEnd' | boolean;
+    rangeInputFocus: RangeType;
     autofocus: boolean;
+    insetInputValue: InsetInputValue;
+    triggerDisabled: boolean;
 }
 export { Type, DateInputFoundationProps };
 export interface DatePickerAdapter extends DefaultAdapter<DatePickerFoundationProps, DatePickerFoundationState> {
@@ -165,6 +169,9 @@ export interface DatePickerAdapter extends DefaultAdapter<DatePickerFoundationPr
     setRangeInputFocus: (rangeInputFocus: DatePickerFoundationState['rangeInputFocus']) => void;
     couldPanelClosed: () => boolean;
     isEventTarget: (e: any) => boolean;
+    updateInsetInputValue: (insetInputValue: InsetInputValue) => void;
+    setInsetInputFocus: () => void;
+    setTriggerDisabled: (disabled: boolean) => void;
 }
 /**
  * The datePicker foundation.js is responsible for maintaining the date value and the input box value, as well as the callback of both
@@ -207,6 +214,10 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      * clear input value when selected date is not confirmed
      */
     needConfirmSideEffectsWhenClosePanel(willUpdateDates: Date[] | null | undefined): void;
+    /**
+     * clear inset input value when close panel
+     */
+    clearInsetInputValue(): void;
     resetCachedSelectedValue(willUpdateDates?: Date[]): void;
     /**
      * timing to call closePanel
@@ -233,6 +244,17 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      * @param {Event} e
      */
     handleInputChange(input: string, e: any): void;
+    /**
+     * inset input 变化时需要更新以下 state 状态
+     *  - insetInputValue（总是）
+     *  - inputValue（可以解析为合法日期时）
+     *  - value（可以解析为合法日期时）
+     */
+    handleInsetInputChange(options: {
+        insetInputStr: string;
+        format: string;
+        insetInputValue: InsetInputValue;
+    }): void;
     /**
      * Input box blur
      * @param {String} input
@@ -250,7 +272,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      * @param {String} range 'rangeStart' or 'rangeEnd', use when type is range
      */
     handleInputFocus(e: any, range: 'rangeStart' | 'rangeEnd'): void;
-    handleSetRangeFocus(rangeInputFocus: boolean | 'rangeStart' | 'rangeEnd'): void;
+    handleSetRangeFocus(rangeInputFocus: RangeType): void;
     handleInputClear(e: any): void;
     /**
      * 范围选择清除按钮回调
@@ -269,7 +291,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      * @param {string} input
      * @returns  {Date [] | '}
      */
-    parseInput(input?: string): Date[];
+    parseInput(input?: string, format?: string): Date[];
     /**
      * Parses the input when multiple is true, if valid,
      *  returns a list of time objects, otherwise returns an array
@@ -286,14 +308,14 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      * @param {Date[]} dates
      * @returns {string}
      */
-    formatDates(dates?: Date[]): string;
+    formatDates(dates?: Date[], customFormat?: string): string;
     /**
      * dates[] => string
      *
      * @param {Date[]} dates
      * @returns {string}
      */
-    formatMultipleDates(dates?: Date[], separator?: string): string;
+    formatMultipleDates(dates?: Date[], separator?: string, customFormat?: string): string;
     /**
      * Update date value and the value of the input box
      * 1. Select Update
@@ -414,4 +436,5 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      * @returns
      */
     handleTriggerWrapperClick(e: any): void;
+    handlePanelVisibleChange(visible: boolean): void;
 }