@douyinfe/semi-foundation 2.4.1 → 2.5.1

package/lib/es/treeSelect/foundation.js

@@ -124,6 +124,7 @@ export default class TreeSelectFoundation extends BaseFoundation {
       selectedKeys = [],
       checkedKeys = new _Set([]),
       halfCheckedKeys = new _Set([]),
+      realCheckedKeys = new _Set([]),
       keyEntities = {},
       filteredKeys = new _Set([]),
       inputValue = '',
@@ -133,13 +134,26 @@ export default class TreeSelectFoundation extends BaseFoundation {
       disabledKeys = new _Set([])
     } = this.getStates();
     const {
-      treeNodeFilterProp
+      treeNodeFilterProp,
+      checkRelation
     } = this.getProps();
     const entity = keyEntities[key];
     const notExist = !entity;
 
     if (notExist) {
       return null;
+    } // if checkRelation is invalid, the checked status of node will be false
+
+
+    let realChecked = false;
+    let realHalfChecked = false;
+
+    if (checkRelation === 'related') {
+      realChecked = checkedKeys.has(key);
+      realHalfChecked = halfCheckedKeys.has(key);
+    } else if (checkRelation === 'unRelated') {
+      realChecked = realCheckedKeys.has(key);
+      realHalfChecked = false;
     }
 
     const isSearching = Boolean(inputValue);
@@ -147,8 +161,8 @@ export default class TreeSelectFoundation extends BaseFoundation {
       eventKey: key,
       expanded: isSearching ? filteredExpandedKeys.has(key) : expandedKeys.has(key),
       selected: _includesInstanceProperty(selectedKeys).call(selectedKeys, key),
-      checked: checkedKeys.has(key),
-      halfChecked: halfCheckedKeys.has(key),
+      checked: realChecked,
+      halfChecked: realHalfChecked,
       pos: String(entity ? entity.pos : ''),
       level: entity.level,
       filtered: filteredKeys.has(key),
@@ -214,9 +228,16 @@ export default class TreeSelectFoundation extends BaseFoundation {
       keyEntities
     } = this.getStates();
     const {
-      leafOnly
+      leafOnly,
+      checkRelation
     } = this.getProps();
-    const keyList = normalizeKeyList(key, keyEntities, leafOnly);
+    let keyList = [];
+
+    if (checkRelation === 'related') {
+      keyList = normalizeKeyList(key, keyEntities, leafOnly);
+    } else if (checkRelation === 'unRelated') {
+      keyList = key;
+    }
 
     const nodes = _mapInstanceProperty(keyList).call(keyList, i => keyEntities[i].data);
 
@@ -343,7 +364,8 @@ export default class TreeSelectFoundation extends BaseFoundation {
       this._adapter.updateState({
         selectedKeys: [],
         checkedKeys: new _Set(),
-        halfCheckedKeys: new _Set()
+        halfCheckedKeys: new _Set(),
+        realCheckedKeys: new _Set([])
       });
     } // When triggerSearch, clicking the clear button will trigger to clear Input
 
@@ -371,11 +393,13 @@ export default class TreeSelectFoundation extends BaseFoundation {
 
   removeTag(eventKey) {
     const {
-      disableStrictly
+      disableStrictly,
+      checkRelation
     } = this.getProps();
     const {
       keyEntities,
-      disabledKeys
+      disabledKeys,
+      realCheckedKeys
     } = this.getStates();
     const item = keyEntities[eventKey].data;
 
@@ -383,20 +407,35 @@ export default class TreeSelectFoundation extends BaseFoundation {
       return;
     }
 
-    const {
-      checkedKeys,
-      halfCheckedKeys
-    } = this.calcCheckedKeys(eventKey, false);
+    if (checkRelation === 'unRelated') {
+      const newRealCheckedKeys = new _Set(realCheckedKeys);
+      newRealCheckedKeys.delete(eventKey);
 
-    this._notifyChange([...checkedKeys], null);
+      this._notifyChange([...newRealCheckedKeys], null);
 
-    if (!this._isControlledComponent()) {
-      this._adapter.updateState({
+      if (!this._isControlledComponent()) {
+        this._adapter.updateState({
+          realCheckedKeys: newRealCheckedKeys
+        });
+
+        this._adapter.rePositionDropdown();
+      }
+    } else if (checkRelation === 'related') {
+      const {
         checkedKeys,
         halfCheckedKeys
-      });
+      } = this.calcCheckedKeys(eventKey, false);
 
-      this._adapter.rePositionDropdown();
+      this._notifyChange([...checkedKeys], null);
+
+      if (!this._isControlledComponent()) {
+        this._adapter.updateState({
+          checkedKeys,
+          halfCheckedKeys
+        });
+
+        this._adapter.rePositionDropdown();
+      }
     }
 
     this._adapter.notifySelect(eventKey, false, item); // reposition dropdown when selected values change
@@ -547,39 +586,67 @@ export default class TreeSelectFoundation extends BaseFoundation {
   handleMultipleSelect(e, treeNode) {
     const {
       searchPosition,
-      disableStrictly
+      disableStrictly,
+      checkRelation
     } = this.getProps();
     const {
-      inputValue
+      inputValue,
+      realCheckedKeys
     } = this.getStates();
     const {
       checked,
       eventKey,
       data
     } = treeNode;
-    const targetStatus = disableStrictly ? this.calcChekcedStatus(!checked, eventKey) : !checked;
-    const {
-      checkedKeys,
-      halfCheckedKeys
-    } = disableStrictly ? this.calcNonDisabedCheckedKeys(eventKey, targetStatus) : this.calcCheckedKeys(eventKey, targetStatus);
 
-    this._adapter.notifySelect(eventKey, targetStatus, data);
+    if (checkRelation === 'related') {
+      const targetStatus = disableStrictly ? this.calcChekcedStatus(!checked, eventKey) : !checked;
+      const {
+        checkedKeys,
+        halfCheckedKeys
+      } = disableStrictly ? this.calcNonDisabedCheckedKeys(eventKey, targetStatus) : this.calcCheckedKeys(eventKey, targetStatus);
 
-    this._notifyChange([...checkedKeys], e);
+      this._adapter.notifySelect(eventKey, targetStatus, data);
 
-    if (searchPosition === strings.SEARCH_POSITION_TRIGGER && inputValue !== '') {
-      this._adapter.updateState({
-        inputValue: ''
-      });
+      this._notifyChange([...checkedKeys], e);
+
+      if (!this._isControlledComponent()) {
+        this._adapter.updateState({
+          checkedKeys,
+          halfCheckedKeys
+        });
+
+        this._adapter.rePositionDropdown();
+      }
+    } else if (checkRelation === 'unRelated') {
+      const newRealCheckedKeys = new _Set(realCheckedKeys);
+      let targetStatus;
+
+      if (realCheckedKeys.has(eventKey)) {
+        newRealCheckedKeys.delete(eventKey);
+        targetStatus = false;
+      } else {
+        newRealCheckedKeys.add(eventKey);
+        targetStatus = true;
+      }
+
+      this._adapter.notifySelect(eventKey, targetStatus, data);
+
+      this._notifyChange([...newRealCheckedKeys], e);
+
+      if (!this._isControlledComponent()) {
+        this._adapter.updateState({
+          realCheckedKeys: newRealCheckedKeys
+        });
+
+        this._adapter.rePositionDropdown();
+      }
     }
 
-    if (!this._isControlledComponent()) {
+    if (searchPosition === strings.SEARCH_POSITION_TRIGGER && inputValue !== '') {
       this._adapter.updateState({
-        checkedKeys,
-        halfCheckedKeys
+        inputValue: ''
       });
-
-      this._adapter.rePositionDropdown();
     }
   }
 

package/lib/es/upload/upload.css

@@ -53,11 +53,10 @@
 }
 .semi-upload[x-prompt-pos=left] .semi-upload-add {
   display: inline-flex;
-  order: 2;
 }
 .semi-upload[x-prompt-pos=left] .semi-upload-prompt {
   display: inline-flex;
-  order: 1;
+  order: -1;
 }
 .semi-upload[x-prompt-pos=left] .semi-upload-file-list {
   order: 2;
@@ -237,15 +236,9 @@
 .semi-upload-picture[x-prompt-pos=bottom] .semi-upload-prompt {
   order: 1;
 }
-.semi-upload-picture[x-prompt-pos=bottom] .semi-upload-add {
-  order: 0;
-}
 .semi-upload-picture[x-prompt-pos=right] .semi-upload-prompt {
   order: 1;
 }
-.semi-upload-picture[x-prompt-pos=right] .semi-upload-add {
-  order: 0;
-}
 .semi-upload-picture-add {
   background-color: var(--semi-color-fill-0);
   height: 96px;
@@ -257,7 +250,6 @@
   border: 2px dashed var(--semi-color-border);
   color: var(--semi-color-tertiary);
   border-radius: var(--semi-border-radius-small);
-  order: 2;
   cursor: pointer;
 }
 .semi-upload-picture-add:hover {
@@ -297,35 +289,32 @@
   border-radius: var(--semi-border-radius-small);
 }
 .semi-upload-picture-file-card-close {
-  width: 16px;
-  height: 16px;
-  background-color: var(--semi-color-overlay-bg);
+  visibility: hidden;
+  display: inline-flex;
   position: absolute;
   top: 8px;
   right: 8px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  display: none;
   border-radius: var(--semi-border-radius-circle);
-  color: white;
   cursor: pointer;
   transition: all 0s;
 }
-.semi-upload-picture-file-card:hover .semi-upload-picture-file-card-close {
-  display: flex;
-}
-.semi-upload-picture-file-card:hover .semi-upload-picture-file-card-replace {
-  visibility: visible;
+.semi-upload-picture-file-card-icon-close {
+  font-size: 16px;
+  color: var(--semi-color-white);
 }
-.semi-upload-picture-file-card .semi-progress-circle {
+.semi-upload-picture-file-card::before {
+  visibility: hidden;
+  background-color: var(--semi-color-overlay-bg);
+  content: "";
   position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
 }
 .semi-upload-picture-file-card-retry {
-  background-color: #fff;
+  visibility: hidden;
+  background-color: var(--semi-color-white);
   width: 24px;
   height: 24px;
   position: absolute;
@@ -353,6 +342,15 @@
   color: var(--semi-color-white);
   transform: translate3D(-50%, -50%, 0);
 }
+.semi-upload-picture-file-card-preview {
+  visibility: hidden;
+  display: inline-flex;
+  position: absolute;
+  cursor: pointer;
+  top: 50%;
+  left: 50%;
+  transform: translate3D(-50%, -50%, 0);
+}
 .semi-upload-picture-file-card-pic-info {
   display: inline-flex;
   box-sizing: border-box;
@@ -384,6 +382,30 @@
 .semi-upload-picture-file-card-error {
   outline: 1px solid var(--semi-color-danger);
 }
+.semi-upload-picture-file-card:hover::before {
+  visibility: visible;
+}
+.semi-upload-picture-file-card:hover .semi-upload-picture-file-card-close {
+  visibility: visible;
+}
+.semi-upload-picture-file-card:hover .semi-upload-picture-file-card-replace {
+  visibility: visible;
+}
+.semi-upload-picture-file-card:hover .semi-upload-picture-file-card-retry {
+  visibility: visible;
+}
+.semi-upload-picture-file-card:hover .semi-upload-picture-file-card-preview {
+  visibility: visible;
+}
+.semi-upload-picture-file-card-uploading::before {
+  visibility: visible;
+}
+.semi-upload-picture-file-card .semi-progress-circle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 .semi-upload-drag-area {
   border-radius: var(--semi-border-radius-small);
   border: 2px dashed var(--semi-color-border);

package/lib/es/upload/upload.scss

@@ -1,4 +1,4 @@
-@import "./variables.scss";
+@import './variables.scss';
 
 $module: #{$prefix}-upload;
 
@@ -47,7 +47,7 @@ $module: #{$prefix}-upload;
         align-items: center;
     }
 
-    &[x-prompt-pos="right"] {
+    &[x-prompt-pos='right'] {
         .#{$module}-add {
             display: inline-flex;
         }
@@ -57,7 +57,7 @@ $module: #{$prefix}-upload;
         }
     }
 
-    &[x-prompt-pos="bottom"] {
+    &[x-prompt-pos='bottom'] {
         .#{$module}-add {
             display: flex;
         }
@@ -72,15 +72,14 @@ $module: #{$prefix}-upload;
         }
     }
 
-    &[x-prompt-pos="left"] {
+    &[x-prompt-pos='left'] {
         .#{$module}-add {
             display: inline-flex;
-            order: 2;
         }
 
         .#{$module}-prompt {
             display: inline-flex;
-            order: 1;
+            order: -1;
         }
 
         .#{$module}-file-list {
@@ -247,7 +246,6 @@ $module: #{$prefix}-upload;
         }
 
         &-icon {
-
             &-loading,
             &-error {
                 font-size: $width-upload_file_card-icon;
@@ -275,7 +273,6 @@ $module: #{$prefix}-upload;
             }
 
             .#{$module}-file-card {
-
                 &-info-validate-message {
                     color: $color-upload_file_card_fail_info-text;
                 }
@@ -288,26 +285,18 @@ $module: #{$prefix}-upload;
     &-picture {
         display: flex;
 
-        &[x-prompt-pos="bottom"] {
+        &[x-prompt-pos='bottom'] {
             flex-direction: column;
 
             .#{$module}-prompt {
                 order: 1;
             }
-
-            .#{$module}-add {
-                order: 0;
-            }
         }
 
-        &[x-prompt-pos="right"] {
+        &[x-prompt-pos='right'] {
             .#{$module}-prompt {
                 order: 1;
             }
-
-            .#{$module}-add {
-                order: 0;
-            }
         }
 
         &-add {
@@ -321,7 +310,6 @@ $module: #{$prefix}-upload;
             border: $width-upload_picture_add-border dashed $color-upload-border;
             color: $color-upload-icon;
             border-radius: $radius-upload_picture_add;
-            order: 2;
             cursor: pointer;
 
             &:hover {
@@ -370,38 +358,32 @@ $module: #{$prefix}-upload;
             }
 
             &-close {
-                width: $width-upload_picture_file_card_close;
-                height: $width-upload_picture_file_card_close;
-                background-color: $color-upload_pic_remove-bg;
+                visibility: hidden;
+                display: inline-flex;
                 position: absolute;
                 top: $spacing-upload_picture_file_card_close-top;
                 right: $spacing-upload_picture_file_card_close-right;
-                @include all-center;
-                display: none;
                 border-radius: $radius-upload_picture_file_card_close;
-                color: white;
                 cursor: pointer;
                 transition: all 0s;
             }
-
-            &:hover {
-                .#{$module}-picture-file-card-close {
-                    display: flex;
-                }
-
-                .#{$module}-picture-file-card-replace {
-                    visibility: visible;
-                }
+            &-icon-close {
+                font-size: $width-upload_picture_file_card_close;
+                color: $color-upload_picture_file_card_close-icon;
             }
 
-            .#{$prefix}-progress-circle {
+            &::before {
+                visibility: hidden;
+                background-color: $color-upload_picture_file_card_hover-bg;
+                content: '';
                 position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
+                left: 0;
+                right: 0;
+                top: 0;
+                bottom: 0;
             }
-
             &-retry {
+                visibility: hidden;
                 background-color: $color-upload_file_card_retry-bg;
                 width: $width-upload_file_card_retry;
                 height: $width-upload_file_card_retry;
@@ -416,7 +398,6 @@ $module: #{$prefix}-upload;
                 justify-content: center;
                 cursor: pointer;
             }
-
             &-icon-retry {
                 transform: scale(-1, 1);
                 font-size: $width-upload_file_card_retry-icon;
@@ -432,6 +413,17 @@ $module: #{$prefix}-upload;
                 color: $color-upload_replace-text;
                 transform: translate3D(-50%, -50%, 0);
             }
+
+            &-preview {
+                visibility: hidden;
+                display: inline-flex;
+                position: absolute;
+                cursor: pointer;
+                top: 50%;
+                left: 50%;
+                transform: translate3D(-50%, -50%, 0);
+            }
+
             &-pic-info {
                 display: inline-flex;
                 box-sizing: border-box;
@@ -468,6 +460,39 @@ $module: #{$prefix}-upload;
             &-error {
                 outline: 1px solid $color-upload_picture_file_card_error-border;
             }
+
+            &:hover {
+                &::before {
+                    visibility: visible;
+                }
+
+                .#{$module}-picture-file-card-close {
+                    visibility: visible;
+                }
+                .#{$module}-picture-file-card-replace {
+                    visibility: visible;
+                }
+
+                .#{$module}-picture-file-card-retry {
+                    visibility: visible;
+                }
+                .#{$module}-picture-file-card-preview {
+                    visibility: visible;
+                }
+            }
+
+            &-uploading {
+                &::before {
+                    visibility: visible;
+                }
+            }
+
+            .#{$prefix}-progress-circle {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+            }
         }
     }
 
@@ -542,4 +567,4 @@ $module: #{$prefix}-upload;
     }
 }
 
-@import "./rtl.scss";
+@import './rtl.scss';

package/lib/es/upload/variables.scss

@@ -16,7 +16,7 @@ $color-upload_drag_area_tips-text: var(--semi-color-primary); // 上传可拖拽
 $color-upload_file_card_fail_info-text: var(--semi-color-danger); // 上传文件卡片失败提示信息文本颜色
 $color-upload_file_card_preview_placeholder-bg: rgba(var(--semi-grey-3), 1); // 文件卡片默认预览背景颜色
 $color-upload_file_card_preview_placeholder-text: rgba(var(--semi-white), 1); // 文件卡片默认预览图颜色
-$color-upload_file_card_retry-bg: #fff; // 重新上传按钮背景颜色
+$color-upload_file_card_retry-bg: var(--semi-color-white); // 重新上传按钮背景颜色
 $color-upload_file_card_retry-text: var(--semi-color-primary); // 重新上传按钮文本颜色
 $color-upload-icon: var(--semi-color-tertiary); // 图片墙上传图标加号颜色
 $color-upload_pic_add-bg-active: var(--semi-color-fill-2); // 图片墙上传背景色 - 按下
@@ -26,6 +26,8 @@ $color-upload_pic_remove-bg: var(--semi-color-overlay-bg); // 图片墙上传移
 $color-upload_picture_file_card_loading_error-icon: var(--semi-color-danger); // 图片墙上传移除图标颜色
 $color-upload_picture_file_card_error-border: var(--semi-color-danger); // 图片墙上传移除图标颜色
 $color-upload_picture_file_card_pic_info-text: var(--semi-color-white); // 图片墙图片信息（序号）文字颜色
+$color-upload_picture_file_card_close-icon: var(--semi-color-white); // 图片墙关闭图标颜色
+$color-upload_picture_file_card_hover-bg: var(--semi-color-overlay-bg); // 图片墙预览悬浮背景色
 $color-upload_preview-icon: var(--semi-color-text-2); // 上传文件卡片文本颜色
 $color-upload_retry-text: var(--semi-color-primary); // 上传文件卡片重新上传按钮文本颜色
 $color-upload_replace-text: var(--semi-color-white); // 上传文件卡片重新替换按钮文本颜色

package/package.json

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

package/select/foundation.ts

@@ -44,7 +44,7 @@ export interface SelectAdapter<P = Record<string, any>, S = Record<string, any>>
     notifyMouseLeave(event: any): void;
     notifyMouseEnter(event: any): void;
     updateHovering(isHover: boolean): void;
-    updateScrollTop(): void;
+    updateScrollTop(index?: number): void;
 }
 
 type LabelValue = string | number;
@@ -704,7 +704,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
         }
         // console.log('new:' + index);
         this._adapter.updateFocusIndex(index);
-        // TODO requires scrollIntoView
+        this._adapter.updateScrollTop(index);
     }
 
     _handleArrowKeyDown(offset: number) {
@@ -954,4 +954,5 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
     updateScrollTop() {
         this._adapter.updateScrollTop();
     }
+    
 }

package/select/optionFoundation.ts

@@ -29,13 +29,13 @@ export default class OptionFoundation extends BaseFoundation<OptionDefaultAdapte
     destroy() {}
 
     onOptionClick(option: BasicOptionProps) {
-        const isDisbled = this.isDisbled_();
-        if (!isDisbled) {
+        const isDisabled = this._isDisabled();
+        if (!isDisabled) {
             this._adapter.notifyClick(option);
         }
     }
 
-    isDisbled_() {
+    _isDisabled() {
         return this.getProp('disabled');
     }
 }

package/slider/foundation.ts

@@ -240,7 +240,7 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
         const scroll = (node: Element) => regex.test(style(node, 'overflow') + style(node, 'overflow-y') + style(node, 'overflow-x'));
 
         const scrollParent = (node: Element): Element => (
-            !node || node === document.body ? document.body : scroll(node) ? node : scrollParent(node.parentNode as Element)
+            !node || (node === document.body || !(node instanceof Element)) ? document.body : scroll(node) ? node : scrollParent(node.parentNode as Element)
         );
 
         return scrollParent(el);
@@ -320,7 +320,7 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
         } else {
             compareValue = currentValue;
         }
-        if (step !== 1) { // Find nearest step point 
+        if (step !== 1) { // Find nearest step point
             stepValue = Math.round(stepValue / step) * step;
         }
         if (range && stepValue !== compareValue) {