@douyinfe/semi-foundation 2.21.0 → 2.21.2

package/lib/cjs/modal/modalContentFoundation.d.ts

@@ -28,7 +28,7 @@ export default class ModalContentFoundation extends BaseFoundation<ModalContentA
     destroy(): void;
     handleDialogMouseDown(): void;
     handleMaskMouseUp(): void;
-    handleKeyDown(e: any): void;
+    handleKeyDown: (e: any) => void;
     handleKeyDownEventListenerMount(): void;
     handleKeyDownEventListenerUnmount(): void;
     getMouseState(): void;

package/lib/cjs/modal/modalContentFoundation.js

@@ -14,6 +14,18 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 class ModalContentFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign(Object.assign({}, ModalContentFoundation.defaultAdapter), adapter));
+
+    this.handleKeyDown = e => {
+      const {
+        closeOnEsc
+      } = this.getProps();
+
+      if (closeOnEsc && e.keyCode === _keyCode.default.ESC) {
+        e.stopPropagation();
+        this.close(e);
+        return;
+      }
+    };
   }
 
   destroy() {
@@ -30,18 +42,6 @@ class ModalContentFoundation extends _foundation.default {
     this._adapter.notifyDialogMouseUp();
   }
 
-  handleKeyDown(e) {
-    const {
-      closeOnEsc
-    } = this.getProps();
-
-    if (closeOnEsc && e.keyCode === _keyCode.default.ESC) {
-      e.stopPropagation();
-      this.close(e);
-      return;
-    }
-  }
-
   handleKeyDownEventListenerMount() {
     this._adapter.addKeyDownEventListener();
   }

package/lib/cjs/select/select.scss

@@ -1,7 +1,7 @@
 //@import '../theme/variables.scss';
 @import "./animation.scss";
-@import './variables.scss';
 @import './option.scss';
+@import './variables.scss';
 @import './mixin.scss';
 
 $module: #{$prefix}-select;

package/lib/cjs/timePicker/timePicker.css

@@ -7,6 +7,14 @@
 .semi-timepicker-panel .semi-scrolllist-body {
   height: 252px;
 }
+.semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer-nocycle > ul:before,
+.semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item > ul:before {
+  height: 108px;
+}
+.semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item > ul,
+.semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul {
+  padding-bottom: 108px;
+}
 .semi-timepicker-panel .semi-scrolllist-item,
 .semi-timepicker-panel .semi-scrolllist-item-wheel {
   flex: none;

package/lib/cjs/timePicker/timePicker.scss

@@ -8,6 +8,22 @@ $module-list: #{$prefix}-scrolllist;
     &-panel {
         .#{$module-list}-body {
             height: $height-timePicker_panel_body;
+
+            .#{$module-list}-item-wheel .#{$module-list}-list-outer-nocycle,
+            .#{$module-list}-item {
+                & > ul {
+                    &:before {
+                        height: ($height-timePicker_panel_body - $height-scrollList_item) * 0.5;
+                    }
+                }
+            }
+
+            .#{$module-list}-item,
+            .#{$module-list}-item-wheel .#{$module-list}-list-outer {
+                & > ul {
+                    padding-bottom: ($height-timePicker_panel_body - $height-scrollList_item) * 0.5;
+                }
+            }
         }
 
         .#{$module-list}-item,

package/lib/cjs/timePicker/variables.scss

@@ -5,6 +5,7 @@ $color-timePicker_range_panel-border: rgba(0, 0, 0, .1); // 时间选择器描
 // Width/Height
 $width-timePicker_range_panel-border: 1px; // 时间选择器菜单分割线宽度
 $height-timePicker_panel_body: 252px; // 时间选择器菜单高度
+$height-scrollList_item: 36px; 
 $width-timePicker_panel_list_ampm: 72px; // 时间选择器菜单中列宽度 - 上午下午
 $width-timePicker_panel_list_hour: 64px; // 时间选择器菜单中列宽度 - 小时
 $width-timePicker_panel_list_minute: 64px; // 时间选择器菜单中列宽度 - 分钟

package/lib/es/modal/modalContentFoundation.d.ts

@@ -28,7 +28,7 @@ export default class ModalContentFoundation extends BaseFoundation<ModalContentA
     destroy(): void;
     handleDialogMouseDown(): void;
     handleMaskMouseUp(): void;
-    handleKeyDown(e: any): void;
+    handleKeyDown: (e: any) => void;
     handleKeyDownEventListenerMount(): void;
     handleKeyDownEventListenerUnmount(): void;
     getMouseState(): void;

package/lib/es/modal/modalContentFoundation.js

@@ -3,6 +3,18 @@ import KeyCode from '../utils/keyCode';
 export default class ModalContentFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign(Object.assign({}, ModalContentFoundation.defaultAdapter), adapter));
+
+    this.handleKeyDown = e => {
+      const {
+        closeOnEsc
+      } = this.getProps();
+
+      if (closeOnEsc && e.keyCode === KeyCode.ESC) {
+        e.stopPropagation();
+        this.close(e);
+        return;
+      }
+    };
   }
 
   destroy() {
@@ -19,18 +31,6 @@ export default class ModalContentFoundation extends BaseFoundation {
     this._adapter.notifyDialogMouseUp();
   }
 
-  handleKeyDown(e) {
-    const {
-      closeOnEsc
-    } = this.getProps();
-
-    if (closeOnEsc && e.keyCode === KeyCode.ESC) {
-      e.stopPropagation();
-      this.close(e);
-      return;
-    }
-  }
-
   handleKeyDownEventListenerMount() {
     this._adapter.addKeyDownEventListener();
   }

package/lib/es/select/select.scss

@@ -1,7 +1,7 @@
 //@import '../theme/variables.scss';
 @import "./animation.scss";
-@import './variables.scss';
 @import './option.scss';
+@import './variables.scss';
 @import './mixin.scss';
 
 $module: #{$prefix}-select;

package/lib/es/timePicker/timePicker.css

@@ -7,6 +7,14 @@
 .semi-timepicker-panel .semi-scrolllist-body {
   height: 252px;
 }
+.semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer-nocycle > ul:before,
+.semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item > ul:before {
+  height: 108px;
+}
+.semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item > ul,
+.semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul {
+  padding-bottom: 108px;
+}
 .semi-timepicker-panel .semi-scrolllist-item,
 .semi-timepicker-panel .semi-scrolllist-item-wheel {
   flex: none;

package/lib/es/timePicker/timePicker.scss

@@ -8,6 +8,22 @@ $module-list: #{$prefix}-scrolllist;
     &-panel {
         .#{$module-list}-body {
             height: $height-timePicker_panel_body;
+
+            .#{$module-list}-item-wheel .#{$module-list}-list-outer-nocycle,
+            .#{$module-list}-item {
+                & > ul {
+                    &:before {
+                        height: ($height-timePicker_panel_body - $height-scrollList_item) * 0.5;
+                    }
+                }
+            }
+
+            .#{$module-list}-item,
+            .#{$module-list}-item-wheel .#{$module-list}-list-outer {
+                & > ul {
+                    padding-bottom: ($height-timePicker_panel_body - $height-scrollList_item) * 0.5;
+                }
+            }
         }
 
         .#{$module-list}-item,

package/lib/es/timePicker/variables.scss

@@ -5,6 +5,7 @@ $color-timePicker_range_panel-border: rgba(0, 0, 0, .1); // 时间选择器描
 // Width/Height
 $width-timePicker_range_panel-border: 1px; // 时间选择器菜单分割线宽度
 $height-timePicker_panel_body: 252px; // 时间选择器菜单高度
+$height-scrollList_item: 36px; 
 $width-timePicker_panel_list_ampm: 72px; // 时间选择器菜单中列宽度 - 上午下午
 $width-timePicker_panel_list_hour: 64px; // 时间选择器菜单中列宽度 - 小时
 $width-timePicker_panel_list_minute: 64px; // 时间选择器菜单中列宽度 - 分钟

package/modal/modalContentFoundation.ts

@@ -48,7 +48,7 @@ export default class ModalContentFoundation extends BaseFoundation<ModalContentA
         this._adapter.notifyDialogMouseUp();
     }
 
-    handleKeyDown(e: any) {
+    handleKeyDown = (e: any) => {
         const { closeOnEsc } = this.getProps();
         if (closeOnEsc && e.keyCode === KeyCode.ESC) {
             e.stopPropagation();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.21.0",
+    "version": "2.21.2",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -23,7 +23,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "9c4b8b64c225231a1bd5c8ff85c701b8dd7b144b",
+    "gitHead": "c587f9996fa14bbe90539099a176d79b52c849f4",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/select/select.scss

@@ -1,7 +1,7 @@
 //@import '../theme/variables.scss';
 @import "./animation.scss";
-@import './variables.scss';
 @import './option.scss';
+@import './variables.scss';
 @import './mixin.scss';
 
 $module: #{$prefix}-select;

package/timePicker/timePicker.scss

@@ -8,6 +8,22 @@ $module-list: #{$prefix}-scrolllist;
     &-panel {
         .#{$module-list}-body {
             height: $height-timePicker_panel_body;
+
+            .#{$module-list}-item-wheel .#{$module-list}-list-outer-nocycle,
+            .#{$module-list}-item {
+                & > ul {
+                    &:before {
+                        height: ($height-timePicker_panel_body - $height-scrollList_item) * 0.5;
+                    }
+                }
+            }
+
+            .#{$module-list}-item,
+            .#{$module-list}-item-wheel .#{$module-list}-list-outer {
+                & > ul {
+                    padding-bottom: ($height-timePicker_panel_body - $height-scrollList_item) * 0.5;
+                }
+            }
         }
 
         .#{$module-list}-item,

package/timePicker/variables.scss

@@ -5,6 +5,7 @@ $color-timePicker_range_panel-border: rgba(0, 0, 0, .1); // 时间选择器描
 // Width/Height
 $width-timePicker_range_panel-border: 1px; // 时间选择器菜单分割线宽度
 $height-timePicker_panel_body: 252px; // 时间选择器菜单高度
+$height-scrollList_item: 36px; 
 $width-timePicker_panel_list_ampm: 72px; // 时间选择器菜单中列宽度 - 上午下午
 $width-timePicker_panel_list_hour: 64px; // 时间选择器菜单中列宽度 - 小时
 $width-timePicker_panel_list_minute: 64px; // 时间选择器菜单中列宽度 - 分钟