@douyinfe/semi-foundation 2.43.0-alpha.0 → 2.43.0

package/cascader/cascader.scss

@@ -395,7 +395,6 @@ $module: #{$prefix}-cascader;
         padding-right: $spacing-cascader_option-paddingRight;
     }
 
-
     .#{$module}-option-list {
         box-sizing: border-box;
         display: inline-block;

package/cascader/foundation.ts

@@ -28,12 +28,6 @@ export interface BasicData {
     pathData?: BasicCascaderData[]
 }
 
-export interface Virtualize {
-    itemSize: number;
-    height?: number | string;
-    width?: number | string
-}
-
 export interface BasicEntities {
     [idx: string]: BasicEntity
 }
@@ -163,7 +157,6 @@ export interface BasicCascaderProps {
     leafOnly?: boolean;
     enableLeafClick?: boolean;
     preventScroll?: boolean;
-    virtualizeInSearch?: Virtualize;
     onClear?: () => void;
     triggerRender?: (props: BasicTriggerRenderProps) => any;
     onListScroll?: (e: any, panel: BasicScrollPanelProps) => void;

package/lib/cjs/cascader/cascader.scss

@@ -395,7 +395,6 @@ $module: #{$prefix}-cascader;
         padding-right: $spacing-cascader_option-paddingRight;
     }
 
-
     .#{$module}-option-list {
         box-sizing: border-box;
         display: inline-block;

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

@@ -6,11 +6,6 @@ export interface BasicData {
     searchText: any[];
     pathData?: BasicCascaderData[];
 }
-export interface Virtualize {
-    itemSize: number;
-    height?: number | string;
-    width?: number | string;
-}
 export interface BasicEntities {
     [idx: string]: BasicEntity;
 }
@@ -110,7 +105,6 @@ export interface BasicCascaderProps {
     leafOnly?: boolean;
     enableLeafClick?: boolean;
     preventScroll?: boolean;
-    virtualizeInSearch?: Virtualize;
     onClear?: () => void;
     triggerRender?: (props: BasicTriggerRenderProps) => any;
     onListScroll?: (e: any, panel: BasicScrollPanelProps) => void;

package/lib/cjs/tagInput/foundation.js

@@ -41,10 +41,15 @@ class TagInputFoundation extends _foundation.default {
       }
     };
     this.handleInputCompositionStart = e => {
+      const {
+        maxLength
+      } = this.getProps();
+      if (!(0, _isNumber2.default)(maxLength)) {
+        return;
+      }
       this._adapter.setEntering(true);
     };
     this.handleInputCompositionEnd = e => {
-      this._adapter.setEntering(false);
       const {
         value
       } = e.target;
@@ -53,27 +58,31 @@ class TagInputFoundation extends _foundation.default {
         onInputExceed,
         separator
       } = this.getProps();
+      if (!(0, _isNumber2.default)(maxLength)) {
+        return;
+      }
+      this._adapter.setEntering(false);
       let allowChange = true;
-      const {
-        inputValue
-      } = this.getStates();
-      if ((0, _isNumber2.default)(maxLength)) {
-        const inputArr = (0, _getSplitedArray.default)(inputValue, separator);
-        let index = 0;
-        for (; index < inputArr.length; index++) {
-          if (inputArr[index].length > maxLength) {
-            allowChange = false;
-            (0, _isFunction2.default)(onInputExceed) && onInputExceed(value);
-            break;
-          }
+      const inputArr = (0, _getSplitedArray.default)(value, separator);
+      let index = 0;
+      for (; index < inputArr.length; index++) {
+        if (inputArr[index].length > maxLength) {
+          allowChange = false;
+          (0, _isFunction2.default)(onInputExceed) && onInputExceed(value);
+          break;
         }
-        if (!allowChange) {
-          const newInputArr = inputArr.slice(0, index);
-          if (index < inputArr.length) {
-            newInputArr.push(inputArr[index].slice(0, maxLength));
-          }
-          this._adapter.setInputValue(newInputArr.join(separator));
+      }
+      if (!allowChange) {
+        const newInputArr = inputArr.slice(0, index);
+        if (index < inputArr.length) {
+          newInputArr.push(inputArr[index].slice(0, maxLength));
         }
+        this._adapter.setInputValue(newInputArr.join(separator));
+      } else {
+        // Why does it need to be updated here instead of in onChange when the value meets the maxLength limit?
+        // Because in firefox, the state change in InputCompositionEnd causes onChange to not be triggered after 
+        // the composition input completes input.
+        this._adapter.setInputValue(value);
       }
     };
     /**

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

@@ -111,6 +111,8 @@ export interface BasicRenderFullLabelProps {
         expanded: boolean;
         loading: boolean;
     };
+    filtered: boolean | undefined;
+    searchWord: string | undefined;
 }
 export interface BasicSearchRenderProps {
     className: string;

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

@@ -73,9 +73,14 @@ export interface UploadAdapter<P = Record<string, any>, S = Record<string, any>>
     notifyPreviewClick: (file: any) => void;
     notifyDrop: (e: any, files: Array<File>, fileList: Array<BaseFileItem>) => void;
     notifyAcceptInvalid: (invalidFiles: Array<File>) => void;
+    registerPastingHandler: (cb?: (params?: any) => void) => void;
+    unRegisterPastingHandler: () => void;
+    isMac: () => boolean;
+    notifyPastingError: (error: Error | PermissionStatus) => void;
 }
 declare class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<UploadAdapter<P, S>, P, S> {
     constructor(adapter: UploadAdapter<P, S>);
+    init(): void;
     destroy(): void;
     getError({ action, xhr, message, fileName }: {
         action: string;
@@ -163,5 +168,9 @@ declare class UploadFoundation<P = Record<string, any>, S = Record<string, any>>
     checkFileFormat(accept: string, file: File): boolean;
     retry(fileItem: BaseFileItem): void;
     handlePreviewClick(fileItem: BaseFileItem): void;
+    readFileFromClipboard(clipboardItems: any): void;
+    handlePasting(e: any): void;
+    bindPastingHandler(): void;
+    unbindPastingHandler(): void;
 }
 export default UploadFoundation;

package/lib/cjs/upload/foundation.js

@@ -51,8 +51,24 @@ class UploadFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign({}, adapter));
   }
+  init() {
+    const {
+      disabled,
+      addOnPasting
+    } = this.getProps();
+    if (addOnPasting && !disabled) {
+      this.bindPastingHandler();
+    }
+  }
   destroy() {
+    const {
+      disabled,
+      addOnPasting
+    } = this.getProps();
     this.releaseMemory();
+    if (addOnPasting && !disabled) {
+      this.unbindPastingHandler();
+    }
   }
   getError(_ref) {
     let {
@@ -912,6 +928,56 @@ class UploadFoundation extends _foundation.default {
   handlePreviewClick(fileItem) {
     this._adapter.notifyPreviewClick(fileItem);
   }
+  readFileFromClipboard(clipboardItems) {
+    for (const clipboardItem of clipboardItems) {
+      for (const type of clipboardItem.types) {
+        // types maybe: text/plain, image/png, text/html
+        if (type.startsWith('image')) {
+          clipboardItem.getType(type).then(blob => {
+            return blob.arrayBuffer();
+          }).then(buffer => {
+            const format = type.split('/')[1];
+            const file = new File([buffer], `upload.${format}`, {
+              type
+            });
+            this.handleChange([file]);
+          });
+        }
+      }
+    }
+  }
+  handlePasting(e) {
+    const isMac = this._adapter.isMac();
+    const isCombineKeydown = isMac ? e.metaKey : e.ctrlKey;
+    if (isCombineKeydown && e.code === 'KeyV' && e.target === document.body) {
+      // https://github.com/microsoft/TypeScript/issues/33923
+      const permissionName = "clipboard-read";
+      // The main thread should not be blocked by clipboard, so callback writing is required here. No await here
+      navigator.permissions.query({
+        name: permissionName
+      }).then(result => {
+        console.log(result);
+        if (result.state === 'granted' || result.state === 'prompt') {
+          // user has authorized or will authorize
+          navigator.clipboard.read().then(clipboardItems => {
+            // Process the data read from the pasteboard
+            // Check the returned data type to determine if it is image data, and process accordingly
+            this.readFileFromClipboard(clipboardItems);
+          });
+        } else {
+          this._adapter.notifyPastingError(result);
+        }
+      }).catch(error => {
+        this._adapter.notifyPastingError(error);
+      });
+    }
+  }
+  bindPastingHandler() {
+    this._adapter.registerPastingHandler(event => this.handlePasting(event));
+  }
+  unbindPastingHandler() {
+    this._adapter.unRegisterPastingHandler();
+  }
 }
 var _default = UploadFoundation;
 exports.default = _default;

package/lib/es/cascader/cascader.scss

@@ -395,7 +395,6 @@ $module: #{$prefix}-cascader;
         padding-right: $spacing-cascader_option-paddingRight;
     }
 
-
     .#{$module}-option-list {
         box-sizing: border-box;
         display: inline-block;

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

@@ -6,11 +6,6 @@ export interface BasicData {
     searchText: any[];
     pathData?: BasicCascaderData[];
 }
-export interface Virtualize {
-    itemSize: number;
-    height?: number | string;
-    width?: number | string;
-}
 export interface BasicEntities {
     [idx: string]: BasicEntity;
 }
@@ -110,7 +105,6 @@ export interface BasicCascaderProps {
     leafOnly?: boolean;
     enableLeafClick?: boolean;
     preventScroll?: boolean;
-    virtualizeInSearch?: Virtualize;
     onClear?: () => void;
     triggerRender?: (props: BasicTriggerRenderProps) => any;
     onListScroll?: (e: any, panel: BasicScrollPanelProps) => void;

package/lib/es/tagInput/foundation.js

@@ -34,10 +34,15 @@ class TagInputFoundation extends BaseFoundation {
       }
     };
     this.handleInputCompositionStart = e => {
+      const {
+        maxLength
+      } = this.getProps();
+      if (!_isNumber(maxLength)) {
+        return;
+      }
       this._adapter.setEntering(true);
     };
     this.handleInputCompositionEnd = e => {
-      this._adapter.setEntering(false);
       const {
         value
       } = e.target;
@@ -46,27 +51,31 @@ class TagInputFoundation extends BaseFoundation {
         onInputExceed,
         separator
       } = this.getProps();
+      if (!_isNumber(maxLength)) {
+        return;
+      }
+      this._adapter.setEntering(false);
       let allowChange = true;
-      const {
-        inputValue
-      } = this.getStates();
-      if (_isNumber(maxLength)) {
-        const inputArr = getSplitedArray(inputValue, separator);
-        let index = 0;
-        for (; index < inputArr.length; index++) {
-          if (inputArr[index].length > maxLength) {
-            allowChange = false;
-            _isFunction(onInputExceed) && onInputExceed(value);
-            break;
-          }
+      const inputArr = getSplitedArray(value, separator);
+      let index = 0;
+      for (; index < inputArr.length; index++) {
+        if (inputArr[index].length > maxLength) {
+          allowChange = false;
+          _isFunction(onInputExceed) && onInputExceed(value);
+          break;
         }
-        if (!allowChange) {
-          const newInputArr = inputArr.slice(0, index);
-          if (index < inputArr.length) {
-            newInputArr.push(inputArr[index].slice(0, maxLength));
-          }
-          this._adapter.setInputValue(newInputArr.join(separator));
+      }
+      if (!allowChange) {
+        const newInputArr = inputArr.slice(0, index);
+        if (index < inputArr.length) {
+          newInputArr.push(inputArr[index].slice(0, maxLength));
         }
+        this._adapter.setInputValue(newInputArr.join(separator));
+      } else {
+        // Why does it need to be updated here instead of in onChange when the value meets the maxLength limit?
+        // Because in firefox, the state change in InputCompositionEnd causes onChange to not be triggered after 
+        // the composition input completes input.
+        this._adapter.setInputValue(value);
       }
     };
     /**

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

@@ -111,6 +111,8 @@ export interface BasicRenderFullLabelProps {
         expanded: boolean;
         loading: boolean;
     };
+    filtered: boolean | undefined;
+    searchWord: string | undefined;
 }
 export interface BasicSearchRenderProps {
     className: string;

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

@@ -73,9 +73,14 @@ export interface UploadAdapter<P = Record<string, any>, S = Record<string, any>>
     notifyPreviewClick: (file: any) => void;
     notifyDrop: (e: any, files: Array<File>, fileList: Array<BaseFileItem>) => void;
     notifyAcceptInvalid: (invalidFiles: Array<File>) => void;
+    registerPastingHandler: (cb?: (params?: any) => void) => void;
+    unRegisterPastingHandler: () => void;
+    isMac: () => boolean;
+    notifyPastingError: (error: Error | PermissionStatus) => void;
 }
 declare class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<UploadAdapter<P, S>, P, S> {
     constructor(adapter: UploadAdapter<P, S>);
+    init(): void;
     destroy(): void;
     getError({ action, xhr, message, fileName }: {
         action: string;
@@ -163,5 +168,9 @@ declare class UploadFoundation<P = Record<string, any>, S = Record<string, any>>
     checkFileFormat(accept: string, file: File): boolean;
     retry(fileItem: BaseFileItem): void;
     handlePreviewClick(fileItem: BaseFileItem): void;
+    readFileFromClipboard(clipboardItems: any): void;
+    handlePasting(e: any): void;
+    bindPastingHandler(): void;
+    unbindPastingHandler(): void;
 }
 export default UploadFoundation;

package/lib/es/upload/foundation.js

@@ -44,8 +44,24 @@ class UploadFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
   }
+  init() {
+    const {
+      disabled,
+      addOnPasting
+    } = this.getProps();
+    if (addOnPasting && !disabled) {
+      this.bindPastingHandler();
+    }
+  }
   destroy() {
+    const {
+      disabled,
+      addOnPasting
+    } = this.getProps();
     this.releaseMemory();
+    if (addOnPasting && !disabled) {
+      this.unbindPastingHandler();
+    }
   }
   getError(_ref) {
     let {
@@ -905,5 +921,55 @@ class UploadFoundation extends BaseFoundation {
   handlePreviewClick(fileItem) {
     this._adapter.notifyPreviewClick(fileItem);
   }
+  readFileFromClipboard(clipboardItems) {
+    for (const clipboardItem of clipboardItems) {
+      for (const type of clipboardItem.types) {
+        // types maybe: text/plain, image/png, text/html
+        if (type.startsWith('image')) {
+          clipboardItem.getType(type).then(blob => {
+            return blob.arrayBuffer();
+          }).then(buffer => {
+            const format = type.split('/')[1];
+            const file = new File([buffer], `upload.${format}`, {
+              type
+            });
+            this.handleChange([file]);
+          });
+        }
+      }
+    }
+  }
+  handlePasting(e) {
+    const isMac = this._adapter.isMac();
+    const isCombineKeydown = isMac ? e.metaKey : e.ctrlKey;
+    if (isCombineKeydown && e.code === 'KeyV' && e.target === document.body) {
+      // https://github.com/microsoft/TypeScript/issues/33923
+      const permissionName = "clipboard-read";
+      // The main thread should not be blocked by clipboard, so callback writing is required here. No await here
+      navigator.permissions.query({
+        name: permissionName
+      }).then(result => {
+        console.log(result);
+        if (result.state === 'granted' || result.state === 'prompt') {
+          // user has authorized or will authorize
+          navigator.clipboard.read().then(clipboardItems => {
+            // Process the data read from the pasteboard
+            // Check the returned data type to determine if it is image data, and process accordingly
+            this.readFileFromClipboard(clipboardItems);
+          });
+        } else {
+          this._adapter.notifyPastingError(result);
+        }
+      }).catch(error => {
+        this._adapter.notifyPastingError(error);
+      });
+    }
+  }
+  bindPastingHandler() {
+    this._adapter.registerPastingHandler(event => this.handlePasting(event));
+  }
+  unbindPastingHandler() {
+    this._adapter.unRegisterPastingHandler();
+  }
 }
 export default UploadFoundation;

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.43.0-alpha.0",
+    "version": "2.43.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.43.0-alpha.0",
+        "@douyinfe/semi-animation": "2.43.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.29.3",
@@ -23,7 +23,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "fcc62b3fcb6a4247854f4a81471cef9259ffc284",
+    "gitHead": "aa918000b24c716c67439b47d1e7fdf5707d30ff",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/tagInput/foundation.ts

@@ -66,36 +66,45 @@ class TagInputFoundation extends BaseFoundation<TagInputAdapter> {
     };
 
     handleInputCompositionStart = (e: any) => {
+        const { maxLength } = this.getProps();
+        if (!isNumber(maxLength)) {
+            return;
+        }
         this._adapter.setEntering(true);
     }
 
     handleInputCompositionEnd = (e: any) => {
-        this._adapter.setEntering(false);
         const { value } = e.target;
         const {
             maxLength, 
             onInputExceed,
             separator
         } = this.getProps();
+        if (!isNumber(maxLength)) {
+            return;
+        }
+        this._adapter.setEntering(false);
         let allowChange = true;
-        const { inputValue } = this.getStates();
-        if (isNumber(maxLength)) {
-            const inputArr = getSplitedArray(inputValue, separator);
-            let index = 0;
-            for (; index < inputArr.length; index++) {
-                if (inputArr[index].length > maxLength) {
-                    allowChange = false;
-                    isFunction(onInputExceed) && onInputExceed(value);
-                    break;
-                }
+        const inputArr = getSplitedArray(value, separator);
+        let index = 0;
+        for (; index < inputArr.length; index++) {
+            if (inputArr[index].length > maxLength) {
+                allowChange = false;
+                isFunction(onInputExceed) && onInputExceed(value);
+                break;
             }
-            if (!allowChange) {
-                const newInputArr = inputArr.slice(0, index);
-                if (index < inputArr.length) {
-                    newInputArr.push(inputArr[index].slice(0, maxLength));
-                }
-                this._adapter.setInputValue(newInputArr.join(separator));
+        }
+        if (!allowChange) {
+            const newInputArr = inputArr.slice(0, index);
+            if (index < inputArr.length) {
+                newInputArr.push(inputArr[index].slice(0, maxLength));
             }
+            this._adapter.setInputValue(newInputArr.join(separator));
+        } else {
+            // Why does it need to be updated here instead of in onChange when the value meets the maxLength limit?
+            // Because in firefox, the state change in InputCompositionEnd causes onChange to not be triggered after 
+            // the composition input completes input.
+            this._adapter.setInputValue(value);
         }
     }
 

package/tree/foundation.ts

@@ -156,7 +156,11 @@ export interface BasicRenderFullLabelProps {
         expanded: boolean;
         /* Is it unfolding */
         loading: boolean
-    }
+    };
+    /* Whether the node meets the search conditions */
+    filtered: boolean | undefined;
+    /* Current search box input */
+    searchWord: string | undefined
 }
 
 export interface BasicSearchRenderProps {

package/upload/foundation.ts

@@ -84,7 +84,12 @@ export interface UploadAdapter<P = Record<string, any>, S = Record<string, any>>
     notifyClear: () => void;
     notifyPreviewClick: (file: any) => void;
     notifyDrop: (e: any, files: Array<File>, fileList: Array<BaseFileItem>) => void;
-    notifyAcceptInvalid: (invalidFiles: Array<File>) => void
+    notifyAcceptInvalid: (invalidFiles: Array<File>) => void;
+    registerPastingHandler: (cb?: (params?: any) => void) => void;
+    unRegisterPastingHandler: () => void;
+    isMac: () => boolean;
+    notifyPastingError: (error: Error | PermissionStatus) => void
+    // notifyPasting: () => void; 
 }
 
 class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<UploadAdapter<P, S>, P, S> {
@@ -92,8 +97,19 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
         super({ ...adapter });
     }
 
+    init(): void {
+        const { disabled, addOnPasting } = this.getProps();
+        if (addOnPasting && !disabled) {
+            this.bindPastingHandler();
+        }
+    }
+
     destroy() {
+        const { disabled, addOnPasting } = this.getProps();
         this.releaseMemory();
+        if (addOnPasting && !disabled) {
+            this.unbindPastingHandler();
+        }
     }
 
     getError({ action, xhr, message, fileName }: { action: string;xhr: XMLHttpRequest;message?: string;fileName: string }): XhrError {
@@ -847,6 +863,62 @@ class UploadFoundation<P = Record<string, any>, S = Record<string, any>> extends
     handlePreviewClick(fileItem: BaseFileItem): void {
         this._adapter.notifyPreviewClick(fileItem);
     }
+
+    readFileFromClipboard(clipboardItems) {
+        for (const clipboardItem of clipboardItems) {
+            for (const type of clipboardItem.types) {
+                // types maybe: text/plain, image/png, text/html
+                if (type.startsWith('image')) {
+                    clipboardItem.getType(type).then(blob => {
+                        return blob.arrayBuffer();
+                    }).then((buffer) => {
+                        const format = type.split('/')[1];
+                        const file = new File([buffer], `upload.${format}`, { type });
+                        this.handleChange([file]);
+                    });
+                }
+            }
+        }
+    }
+
+    handlePasting(e: any) {
+        const isMac = this._adapter.isMac();
+        const isCombineKeydown = isMac ? e.metaKey : e.ctrlKey;
+
+        if (isCombineKeydown && e.code === 'KeyV' && e.target === document.body) {
+            // https://github.com/microsoft/TypeScript/issues/33923
+            const permissionName = "clipboard-read" as PermissionName;
+            // The main thread should not be blocked by clipboard, so callback writing is required here. No await here
+            navigator.permissions
+                .query({ name: permissionName })
+                .then(result => {
+                    console.log(result);
+                    if (result.state === 'granted' || result.state === 'prompt') {
+                        // user has authorized or will authorize
+                        navigator.clipboard
+                            .read()
+                            .then(clipboardItems => {
+                                // Process the data read from the pasteboard
+                                // Check the returned data type to determine if it is image data, and process accordingly
+                                this.readFileFromClipboard(clipboardItems);
+                            });
+                    } else {
+                        this._adapter.notifyPastingError(result);
+                    }
+                })
+                .catch(error => {
+                    this._adapter.notifyPastingError(error);
+                });
+        }
+    }
+
+    bindPastingHandler(): void {
+        this._adapter.registerPastingHandler((event) => this.handlePasting(event));
+    }
+
+    unbindPastingHandler() {
+        this._adapter.unRegisterPastingHandler();
+    }
 }
 
 export default UploadFoundation;