@douyinfe/semi-foundation 2.3.1 → 2.4.0-beta.0

package/input/textarea.scss

@@ -55,11 +55,7 @@ $module: #{$prefix}-input;
         }
     }
 
-    &-readonly {
-        cursor: default;
-    }
-
-    &-disabled {
+    &-disabled, &-readonly {
         cursor: not-allowed;
         // border: $border-thickness-control $color-input_disabled-border-default solid;
         color: $color-input_disabled-text-default;
@@ -74,6 +70,10 @@ $module: #{$prefix}-input;
         }
     }
 
+    &-readonly {
+        cursor: text;
+    }
+
     &-error {
         background-color: $color-input_danger-bg-default;
         border-color: $color-input_danger-border-default;
@@ -151,7 +151,7 @@ $module: #{$prefix}-input;
         padding-right: $spacing-textarea_withShowClear-paddingRight;
     }
 
-    &-disabled {
+    &-disabled, &-readonly {
         cursor: not-allowed;
         color: $color-input_disabled-text-default;
         background-color: transparent;
@@ -165,10 +165,14 @@ $module: #{$prefix}-input;
         }
     }
 
+    &-readonly {
+        cursor: text;
+    }
+
     &-autosize {
         overflow: hidden;
     }
-    
+
     &-counter {
         @include font-size-small;
         display: flex;

package/inputNumber/constants.ts

@@ -10,6 +10,7 @@ const numbers = {
     DEFAULT_SHIFT_STEP: 1,
     DEFAULT_PRESS_TIMEOUT: 250,
     DEFAULT_PRESS_INTERVAL: 0,
+    MOUSE_BUTTON_LEFT: 0, // left mouse button
 };
 
 const strings = {

package/inputNumber/foundation.ts

@@ -4,7 +4,7 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import keyCode from '../utils/keyCode';
 import { numbers } from './constants';
-import { toNumber, toString } from 'lodash';
+import { toNumber, toString, get } from 'lodash';
 import { minus as numberMinus } from '../utils/number';
 
 export interface InputNumberAdapter extends DefaultAdapter {
@@ -286,6 +286,9 @@ class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
     }
 
     handleUpClick(event: any) {
+        if (!this._isMouseButtonLeft(event)) {
+            return;
+        }
         this._adapter.setClickUpOrDown(true);
         if (event) {
             event.persist();
@@ -303,6 +306,9 @@ class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
     }
 
     handleDownClick(event: any) {
+        if (!this._isMouseButtonLeft(event)) {
+            return;
+        }
         this._adapter.setClickUpOrDown(true);
         if (event) {
             event.persist();
@@ -317,6 +323,14 @@ class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
         });
     }
 
+    /**
+     * Whether it is a left mouse button click
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+     */
+    _isMouseButtonLeft(event: any) {
+        return get(event, 'button') === numbers.MOUSE_BUTTON_LEFT;
+    }
+
     _preventDefault(event: any) {
         const keepFocus = this._adapter.getProp('keepFocus');
         if (keepFocus) {

package/lib/cjs/input/textarea.css

@@ -44,20 +44,20 @@
 .semi-input-textarea-wrapper .semi-input-clearbtn-hidden {
   visibility: hidden;
 }
-.semi-input-textarea-wrapper-readonly {
-  cursor: default;
-}
-.semi-input-textarea-wrapper-disabled {
+.semi-input-textarea-wrapper-disabled, .semi-input-textarea-wrapper-readonly {
   cursor: not-allowed;
   color: var(--semi-color-disabled-text);
   background-color: var(--semi-color-disabled-fill);
 }
-.semi-input-textarea-wrapper-disabled:hover {
+.semi-input-textarea-wrapper-disabled:hover, .semi-input-textarea-wrapper-readonly:hover {
   background-color: var(--semi-color-disabled-fill);
 }
-.semi-input-textarea-wrapper-disabled::placeholder {
+.semi-input-textarea-wrapper-disabled::placeholder, .semi-input-textarea-wrapper-readonly::placeholder {
   color: var(--semi-color-disabled-text);
 }
+.semi-input-textarea-wrapper-readonly {
+  cursor: text;
+}
 .semi-input-textarea-wrapper-error {
   background-color: var(--semi-color-danger-light-default);
   border-color: var(--semi-color-danger-light-default);
@@ -114,17 +114,20 @@
 .semi-input-textarea-showClear {
   padding-right: 36px;
 }
-.semi-input-textarea-disabled {
+.semi-input-textarea-disabled, .semi-input-textarea-readonly {
   cursor: not-allowed;
   color: var(--semi-color-disabled-text);
   background-color: transparent;
 }
-.semi-input-textarea-disabled:hover {
+.semi-input-textarea-disabled:hover, .semi-input-textarea-readonly:hover {
   background-color: transparent;
 }
-.semi-input-textarea-disabled::placeholder {
+.semi-input-textarea-disabled::placeholder, .semi-input-textarea-readonly::placeholder {
   color: var(--semi-color-disabled-text);
 }
+.semi-input-textarea-readonly {
+  cursor: text;
+}
 .semi-input-textarea-autosize {
   overflow: hidden;
 }

package/lib/cjs/input/textarea.scss

@@ -55,11 +55,7 @@ $module: #{$prefix}-input;
         }
     }
 
-    &-readonly {
-        cursor: default;
-    }
-
-    &-disabled {
+    &-disabled, &-readonly {
         cursor: not-allowed;
         // border: $border-thickness-control $color-input_disabled-border-default solid;
         color: $color-input_disabled-text-default;
@@ -74,6 +70,10 @@ $module: #{$prefix}-input;
         }
     }
 
+    &-readonly {
+        cursor: text;
+    }
+
     &-error {
         background-color: $color-input_danger-bg-default;
         border-color: $color-input_danger-border-default;
@@ -151,7 +151,7 @@ $module: #{$prefix}-input;
         padding-right: $spacing-textarea_withShowClear-paddingRight;
     }
 
-    &-disabled {
+    &-disabled, &-readonly {
         cursor: not-allowed;
         color: $color-input_disabled-text-default;
         background-color: transparent;
@@ -165,10 +165,14 @@ $module: #{$prefix}-input;
         }
     }
 
+    &-readonly {
+        cursor: text;
+    }
+
     &-autosize {
         overflow: hidden;
     }
-    
+
     &-counter {
         @include font-size-small;
         display: flex;

package/lib/cjs/inputNumber/constants.d.ts

@@ -6,6 +6,7 @@ declare const numbers: {
     DEFAULT_SHIFT_STEP: number;
     DEFAULT_PRESS_TIMEOUT: number;
     DEFAULT_PRESS_INTERVAL: number;
+    MOUSE_BUTTON_LEFT: number;
 };
 declare const strings: {
     SIZE: readonly ["small", "large", "default"];

package/lib/cjs/inputNumber/constants.js

@@ -20,7 +20,8 @@ const numbers = (0, _assign.default)((0, _assign.default)({}, _constants.numbers
   DEFAULT_STEP: 1,
   DEFAULT_SHIFT_STEP: 1,
   DEFAULT_PRESS_TIMEOUT: 250,
-  DEFAULT_PRESS_INTERVAL: 0
+  DEFAULT_PRESS_INTERVAL: 0,
+  MOUSE_BUTTON_LEFT: 0
 });
 exports.numbers = numbers;
 const strings = (0, _assign.default)({}, _constants.strings);

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

@@ -47,6 +47,11 @@ declare class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
     handleMouseUp(e?: any): void;
     handleUpClick(event: any): void;
     handleDownClick(event: any): void;
+    /**
+     * Whether it is a left mouse button click
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+     */
+    _isMouseButtonLeft(event: any): boolean;
     _preventDefault(event: any): void;
     handleMouseLeave(event: any): void;
     upClick(event: any): void;

package/lib/cjs/inputNumber/foundation.js

@@ -22,6 +22,8 @@ var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-st
 
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
 var _toString2 = _interopRequireDefault(require("lodash/toString"));
 
 var _toNumber2 = _interopRequireDefault(require("lodash/toNumber"));
@@ -315,6 +317,10 @@ class InputNumberFoundation extends _foundation.default {
   }
 
   handleUpClick(event) {
+    if (!this._isMouseButtonLeft(event)) {
+      return;
+    }
+
     this._adapter.setClickUpOrDown(true);
 
     if (event) {
@@ -334,6 +340,10 @@ class InputNumberFoundation extends _foundation.default {
   }
 
   handleDownClick(event) {
+    if (!this._isMouseButtonLeft(event)) {
+      return;
+    }
+
     this._adapter.setClickUpOrDown(true);
 
     if (event) {
@@ -351,6 +361,15 @@ class InputNumberFoundation extends _foundation.default {
       });
     });
   }
+  /**
+   * Whether it is a left mouse button click
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+   */
+
+
+  _isMouseButtonLeft(event) {
+    return (0, _get2.default)(event, 'button') === _constants.numbers.MOUSE_BUTTON_LEFT;
+  }
 
   _preventDefault(event) {
     const keepFocus = this._adapter.getProp('keepFocus');

package/lib/cjs/table/table.css

@@ -52,6 +52,9 @@
   color: var(--semi-color-text-0);
   width: 100%;
 }
+.semi-table-wrapper[data-column-fixed=true] {
+  z-index: 1;
+}
 .semi-table-middle .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
   padding-top: 12px;
   padding-bottom: 12px;

package/lib/cjs/table/table.scss

@@ -22,6 +22,10 @@ $module: #{$prefix}-table;
         @include font-size-regular;
         color: $color-table-text-default;
         width: 100%;
+
+        &[data-column-fixed=true] {
+            z-index: 1;
+        }
     }
 
     &-middle {

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

@@ -6,7 +6,8 @@ export interface TimePickerAdapter<P = Record<string, any>, S = Record<string, a
     setInputValue: (inputValue: string, cb?: () => void) => void;
     unregisterClickOutSide: () => void;
     notifyOpenChange: (open: boolean) => void;
-    notifyChange: (value: Date | Date[], input: string | string[]) => void;
+    notifyChange(value: Date | Date[], input: string | string[]): void;
+    notifyChange(input: string | string[], value: Date | Date[]): void;
     notifyFocus: (e: any) => void;
     notifyBlur: (e: any) => void;
     isRangePicker: () => boolean;

package/lib/cjs/timePicker/foundation.js

@@ -440,7 +440,13 @@ class TimePickerFoundation extends _foundation.default {
       }
     }
 
-    this._adapter.notifyChange(_value, str);
+    const onChangeWithDateFirst = this.getProp('onChangeWithDateFirst');
+
+    if (onChangeWithDateFirst) {
+      this._adapter.notifyChange(_value, str);
+    } else {
+      this._adapter.notifyChange(str, _value);
+    }
   }
 
   _hasChanged() {

package/lib/es/input/textarea.css

@@ -44,20 +44,20 @@
 .semi-input-textarea-wrapper .semi-input-clearbtn-hidden {
   visibility: hidden;
 }
-.semi-input-textarea-wrapper-readonly {
-  cursor: default;
-}
-.semi-input-textarea-wrapper-disabled {
+.semi-input-textarea-wrapper-disabled, .semi-input-textarea-wrapper-readonly {
   cursor: not-allowed;
   color: var(--semi-color-disabled-text);
   background-color: var(--semi-color-disabled-fill);
 }
-.semi-input-textarea-wrapper-disabled:hover {
+.semi-input-textarea-wrapper-disabled:hover, .semi-input-textarea-wrapper-readonly:hover {
   background-color: var(--semi-color-disabled-fill);
 }
-.semi-input-textarea-wrapper-disabled::placeholder {
+.semi-input-textarea-wrapper-disabled::placeholder, .semi-input-textarea-wrapper-readonly::placeholder {
   color: var(--semi-color-disabled-text);
 }
+.semi-input-textarea-wrapper-readonly {
+  cursor: text;
+}
 .semi-input-textarea-wrapper-error {
   background-color: var(--semi-color-danger-light-default);
   border-color: var(--semi-color-danger-light-default);
@@ -114,17 +114,20 @@
 .semi-input-textarea-showClear {
   padding-right: 36px;
 }
-.semi-input-textarea-disabled {
+.semi-input-textarea-disabled, .semi-input-textarea-readonly {
   cursor: not-allowed;
   color: var(--semi-color-disabled-text);
   background-color: transparent;
 }
-.semi-input-textarea-disabled:hover {
+.semi-input-textarea-disabled:hover, .semi-input-textarea-readonly:hover {
   background-color: transparent;
 }
-.semi-input-textarea-disabled::placeholder {
+.semi-input-textarea-disabled::placeholder, .semi-input-textarea-readonly::placeholder {
   color: var(--semi-color-disabled-text);
 }
+.semi-input-textarea-readonly {
+  cursor: text;
+}
 .semi-input-textarea-autosize {
   overflow: hidden;
 }

package/lib/es/input/textarea.scss

@@ -55,11 +55,7 @@ $module: #{$prefix}-input;
         }
     }
 
-    &-readonly {
-        cursor: default;
-    }
-
-    &-disabled {
+    &-disabled, &-readonly {
         cursor: not-allowed;
         // border: $border-thickness-control $color-input_disabled-border-default solid;
         color: $color-input_disabled-text-default;
@@ -74,6 +70,10 @@ $module: #{$prefix}-input;
         }
     }
 
+    &-readonly {
+        cursor: text;
+    }
+
     &-error {
         background-color: $color-input_danger-bg-default;
         border-color: $color-input_danger-border-default;
@@ -151,7 +151,7 @@ $module: #{$prefix}-input;
         padding-right: $spacing-textarea_withShowClear-paddingRight;
     }
 
-    &-disabled {
+    &-disabled, &-readonly {
         cursor: not-allowed;
         color: $color-input_disabled-text-default;
         background-color: transparent;
@@ -165,10 +165,14 @@ $module: #{$prefix}-input;
         }
     }
 
+    &-readonly {
+        cursor: text;
+    }
+
     &-autosize {
         overflow: hidden;
     }
-    
+
     &-counter {
         @include font-size-small;
         display: flex;

package/lib/es/inputNumber/constants.d.ts

@@ -6,6 +6,7 @@ declare const numbers: {
     DEFAULT_SHIFT_STEP: number;
     DEFAULT_PRESS_TIMEOUT: number;
     DEFAULT_PRESS_INTERVAL: number;
+    MOUSE_BUTTON_LEFT: number;
 };
 declare const strings: {
     SIZE: readonly ["small", "large", "default"];

package/lib/es/inputNumber/constants.js

@@ -7,7 +7,8 @@ const numbers = _Object$assign(_Object$assign({}, inputNumbers), {
   DEFAULT_STEP: 1,
   DEFAULT_SHIFT_STEP: 1,
   DEFAULT_PRESS_TIMEOUT: 250,
-  DEFAULT_PRESS_INTERVAL: 0
+  DEFAULT_PRESS_INTERVAL: 0,
+  MOUSE_BUTTON_LEFT: 0
 });
 
 const strings = _Object$assign({}, inputStrings);

package/lib/es/inputNumber/foundation.d.ts

@@ -47,6 +47,11 @@ declare class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
     handleMouseUp(e?: any): void;
     handleUpClick(event: any): void;
     handleDownClick(event: any): void;
+    /**
+     * Whether it is a left mouse button click
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+     */
+    _isMouseButtonLeft(event: any): boolean;
     _preventDefault(event: any): void;
     handleMouseLeave(event: any): void;
     upClick(event: any): void;

package/lib/es/inputNumber/foundation.js

@@ -1,3 +1,4 @@
+import _get from "lodash/get";
 import _toString from "lodash/toString";
 import _toNumber from "lodash/toNumber";
 import _setInterval from "@babel/runtime-corejs3/core-js-stable/set-interval";
@@ -293,6 +294,10 @@ class InputNumberFoundation extends BaseFoundation {
   }
 
   handleUpClick(event) {
+    if (!this._isMouseButtonLeft(event)) {
+      return;
+    }
+
     this._adapter.setClickUpOrDown(true);
 
     if (event) {
@@ -312,6 +317,10 @@ class InputNumberFoundation extends BaseFoundation {
   }
 
   handleDownClick(event) {
+    if (!this._isMouseButtonLeft(event)) {
+      return;
+    }
+
     this._adapter.setClickUpOrDown(true);
 
     if (event) {
@@ -329,6 +338,15 @@ class InputNumberFoundation extends BaseFoundation {
       });
     });
   }
+  /**
+   * Whether it is a left mouse button click
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+   */
+
+
+  _isMouseButtonLeft(event) {
+    return _get(event, 'button') === numbers.MOUSE_BUTTON_LEFT;
+  }
 
   _preventDefault(event) {
     const keepFocus = this._adapter.getProp('keepFocus');

package/lib/es/table/table.css

@@ -52,6 +52,9 @@
   color: var(--semi-color-text-0);
   width: 100%;
 }
+.semi-table-wrapper[data-column-fixed=true] {
+  z-index: 1;
+}
 .semi-table-middle .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
   padding-top: 12px;
   padding-bottom: 12px;

package/lib/es/table/table.scss

@@ -22,6 +22,10 @@ $module: #{$prefix}-table;
         @include font-size-regular;
         color: $color-table-text-default;
         width: 100%;
+
+        &[data-column-fixed=true] {
+            z-index: 1;
+        }
     }
 
     &-middle {

package/lib/es/timePicker/foundation.d.ts

@@ -6,7 +6,8 @@ export interface TimePickerAdapter<P = Record<string, any>, S = Record<string, a
     setInputValue: (inputValue: string, cb?: () => void) => void;
     unregisterClickOutSide: () => void;
     notifyOpenChange: (open: boolean) => void;
-    notifyChange: (value: Date | Date[], input: string | string[]) => void;
+    notifyChange(value: Date | Date[], input: string | string[]): void;
+    notifyChange(input: string | string[], value: Date | Date[]): void;
     notifyFocus: (e: any) => void;
     notifyBlur: (e: any) => void;
     isRangePicker: () => boolean;

package/lib/es/timePicker/foundation.js

@@ -418,7 +418,13 @@ class TimePickerFoundation extends BaseFoundation {
       }
     }
 
-    this._adapter.notifyChange(_value, str);
+    const onChangeWithDateFirst = this.getProp('onChangeWithDateFirst');
+
+    if (onChangeWithDateFirst) {
+      this._adapter.notifyChange(_value, str);
+    } else {
+      this._adapter.notifyChange(str, _value);
+    }
   }
 
   _hasChanged() {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.3.1",
+    "version": "2.4.0-beta.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -8,7 +8,7 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.3.1",
+        "@douyinfe/semi-animation": "2.4.0-beta.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.9.0",
@@ -24,7 +24,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "c77d5f7c20ea94158c0c79458879c7d884d99c21",
+    "gitHead": "ebf8a78f5152f9733af771cd567f042eccb8c4b9",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",

package/table/table.scss

@@ -22,6 +22,10 @@ $module: #{$prefix}-table;
         @include font-size-regular;
         color: $color-table-text-default;
         width: 100%;
+
+        &[data-column-fixed=true] {
+            z-index: 1;
+        }
     }
 
     &-middle {

package/timePicker/foundation.ts

@@ -37,7 +37,8 @@ export interface TimePickerAdapter<P = Record<string, any>, S = Record<string, a
     setInputValue: (inputValue: string, cb?: () => void) => void;
     unregisterClickOutSide: () => void;
     notifyOpenChange: (open: boolean) => void;
-    notifyChange: (value: Date | Date[], input: string | string[]) => void;
+    notifyChange(value: Date | Date[], input: string | string[]): void;
+    notifyChange(input: string | string[], value: Date | Date[]): void;
     notifyFocus: (e: any) => void;
     notifyBlur: (e: any) => void;
     isRangePicker: () => boolean;
@@ -413,8 +414,12 @@ class TimePickerFoundation<P = Record<string, any>, S = Record<string, any>> ext
                 str = format(_value, formatToken);
             }
         }
-
-        this._adapter.notifyChange(_value, str);
+        const onChangeWithDateFirst = this.getProp('onChangeWithDateFirst');
+        if (onChangeWithDateFirst) {
+            this._adapter.notifyChange(_value, str);
+        } else {
+            this._adapter.notifyChange(str, _value);
+        }
     }
 
     _hasChanged(dates: Date[] = [], oldDates: Date[] = []) {