@douyinfe/semi-ui 2.9.0-beta.0 → 2.9.1

package/tree/index.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable max-lines-per-function */
-import React, { MouseEvent } from 'react';
+import React, { MouseEvent, KeyboardEvent } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
-import ConfigContext from '../configProvider/context';
+import ConfigContext, { ContextValue } from '../configProvider/context';
 import TreeFoundation, { TreeAdapter } from '@douyinfe/semi-foundation/tree/foundation';
 import {
     convertDataToEntities,
@@ -143,6 +143,7 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
     dragNode: any;
     onNodeClick: any;
     onMotionEnd: any;
+    context: ContextValue;
 
     constructor(props: TreeProps) {
         super(props);
@@ -545,7 +546,7 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
         }
     };
 
-    onNodeSelect = (e: MouseEvent, treeNode: TreeNodeProps) => {
+    onNodeSelect = (e: MouseEvent | KeyboardEvent, treeNode: TreeNodeProps) => {
         this.foundation.handleNodeSelect(e, treeNode);
     };
 
@@ -558,11 +559,11 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
         })
     );
 
-    onNodeCheck = (e: MouseEvent, treeNode: TreeNodeProps) => {
+    onNodeCheck = (e: MouseEvent | KeyboardEvent, treeNode: TreeNodeProps) => {
         this.foundation.handleNodeSelect(e, treeNode);
     };
 
-    onNodeExpand = (e: MouseEvent, treeNode: TreeNodeProps) => {
+    onNodeExpand = (e: MouseEvent | KeyboardEvent, treeNode: TreeNodeProps) => {
         this.foundation.handleNodeExpand(e, treeNode);
     };
 
@@ -574,27 +575,27 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
         this.foundation.handleNodeDoubleClick(e, treeNode);
     };
 
-    onNodeDragStart = (e: React.DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => {
+    onNodeDragStart = (e: React.DragEvent<HTMLLIElement>, treeNode: TreeNodeProps) => {
         this.foundation.handleNodeDragStart(e, treeNode);
     };
 
-    onNodeDragEnter = (e: React.DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => {
+    onNodeDragEnter = (e: React.DragEvent<HTMLLIElement>, treeNode: TreeNodeProps) => {
         this.foundation.handleNodeDragEnter(e, treeNode, this.dragNode);
     };
 
-    onNodeDragOver = (e: React.DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => {
+    onNodeDragOver = (e: React.DragEvent<HTMLLIElement>, treeNode: TreeNodeProps) => {
         this.foundation.handleNodeDragOver(e, treeNode, this.dragNode);
     };
 
-    onNodeDragLeave = (e: React.DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => {
+    onNodeDragLeave = (e: React.DragEvent<HTMLLIElement>, treeNode: TreeNodeProps) => {
         this.foundation.handleNodeDragLeave(e, treeNode);
     };
 
-    onNodeDragEnd = (e: React.DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => {
+    onNodeDragEnd = (e: React.DragEvent<HTMLLIElement>, treeNode: TreeNodeProps) => {
         this.foundation.handleNodeDragEnd(e, treeNode);
     };
 
-    onNodeDrop = (e: React.DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => {
+    onNodeDrop = (e: React.DragEvent<HTMLLIElement>, treeNode: TreeNodeProps) => {
         this.foundation.handleNodeDrop(e, treeNode, this.dragNode);
     };
 

package/tree/treeContext.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, MouseEvent, DragEvent } from 'react';
+import React, { ReactNode, MouseEvent, DragEvent, KeyboardEvent } from 'react';
 import { Virtualize, ExpandAction } from '@douyinfe/semi-foundation/tree/foundation';
 import {
     TreeNodeData,
@@ -17,18 +17,18 @@ export interface TreeContextValue {
     filterTreeNode?: boolean | ((inputValue: string, treeNodeString: string) => void);
     keyEntities?: KeyEntities;
     onNodeClick?: any;
-    onNodeExpand?: (e: MouseEvent, treeNode: TreeNodeProps) => void;
-    onNodeSelect?: (e: MouseEvent, treeNode: TreeNodeProps) => void;
-    onNodeCheck?: (e: MouseEvent, treeNode: TreeNodeProps) => void;
+    onNodeExpand?: (e: MouseEvent | KeyboardEvent, treeNode: TreeNodeProps) => void;
+    onNodeSelect?: (e: MouseEvent | KeyboardEvent, treeNode: TreeNodeProps) => void;
+    onNodeCheck?: (e: MouseEvent | KeyboardEvent, treeNode: TreeNodeProps) => void;
     onNodeRightClick?: (e: MouseEvent, treeNode: TreeNodeProps) => void;
     onNodeDoubleClick?: (e: MouseEvent, treeNode: TreeNodeProps) => void;
     renderTreeNode?: (treeNode: FlattenNode, ind?: number, style?: React.CSSProperties) => ReactNode;
-    onNodeDragStart?: (e: DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => void;
-    onNodeDragEnter?: (e: DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => void;
-    onNodeDragOver?: (e: DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => void;
-    onNodeDragLeave?: (e: DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => void;
-    onNodeDragEnd?: (e: DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => void;
-    onNodeDrop?: (e: DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => void;
+    onNodeDragStart?: (e: DragEvent<HTMLLIElement>, treeNode: TreeNodeProps) => void;
+    onNodeDragEnter?: (e: DragEvent<HTMLLIElement>, treeNode: TreeNodeProps) => void;
+    onNodeDragOver?: (e: DragEvent<HTMLLIElement>, treeNode: TreeNodeProps) => void;
+    onNodeDragLeave?: (e: DragEvent<HTMLLIElement>, treeNode: TreeNodeProps) => void;
+    onNodeDragEnd?: (e: DragEvent<HTMLLIElement>, treeNode: TreeNodeProps) => void;
+    onNodeDrop?: (e: DragEvent<HTMLLIElement>, treeNode: TreeNodeProps) => void;
     expandAction?: ExpandAction;
     directory?: boolean;
     multiple?: boolean;

package/tree/treeNode.tsx

@@ -6,7 +6,7 @@ import isEnterPress from '@douyinfe/semi-foundation/utils/isEnterPress';
 import { debounce, isFunction, isString, get, isEmpty } from 'lodash';
 import { IconTreeTriangleDown, IconFile, IconFolder, IconFolderOpen } from '@douyinfe/semi-icons';
 import { Checkbox } from '../checkbox';
-import TreeContext from './treeContext';
+import TreeContext, { TreeContextValue } from './treeContext';
 import Spin from '../spin';
 import { TreeNodeProps, TreeNodeState } from './interface';
 
@@ -42,6 +42,7 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
 
     debounceSelect: any;
     refNode: HTMLElement;
+    context: TreeContextValue;
 
     constructor(props: TreeNodeProps) {
         super(props);
@@ -121,7 +122,7 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
         }
     };
 
-    onDragStart = (e: React.DragEvent) => {
+    onDragStart = (e: React.DragEvent<HTMLLIElement>) => {
         const { onNodeDragStart } = this.context;
         e.stopPropagation();
         onNodeDragStart(e, { ...this.props, nodeInstance: this.refNode });
@@ -135,33 +136,33 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
         }
     };
 
-    onDragEnter = (e: React.DragEvent) => {
+    onDragEnter = (e: React.DragEvent<HTMLLIElement>) => {
         const { onNodeDragEnter } = this.context;
         e.preventDefault();
         e.stopPropagation();
         onNodeDragEnter(e, { ...this.props, nodeInstance: this.refNode });
     };
 
-    onDragOver = (e: React.DragEvent) => {
+    onDragOver = (e: React.DragEvent<HTMLLIElement>) => {
         const { onNodeDragOver } = this.context;
         e.preventDefault();
         e.stopPropagation();
         onNodeDragOver(e, { ...this.props, nodeInstance: this.refNode });
     };
 
-    onDragLeave = (e: React.DragEvent) => {
+    onDragLeave = (e: React.DragEvent<HTMLLIElement>) => {
         const { onNodeDragLeave } = this.context;
         e.stopPropagation();
         onNodeDragLeave(e, { ...this.props, nodeInstance: this.refNode });
     };
 
-    onDragEnd = (e: React.DragEvent) => {
+    onDragEnd = (e: React.DragEvent<HTMLLIElement>) => {
         const { onNodeDragEnd } = this.context;
         e.stopPropagation();
         onNodeDragEnd(e, { ...this.props, nodeInstance: this.refNode });
     };
 
-    onDrop = (e: React.DragEvent) => {
+    onDrop = (e: React.DragEvent<HTMLLIElement>) => {
         const { onNodeDrop } = this.context;
         e.preventDefault();
         e.stopPropagation();
@@ -387,6 +388,7 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
         if (renderFullLabel) {
             const customLabel = renderFullLabel({ ...labelProps });
             if (draggable) {
+                // @ts-ignore skip cloneElement type check
                 return React.cloneElement(customLabel, {
                     ref: this.setRef,
                     ...dragProps
@@ -396,6 +398,7 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
                     return customLabel;
                 } else {
                     // In virtualization, props.style will contain location information
+                    // @ts-ignore skip cloneElement type check
                     return React.cloneElement(customLabel, {
                         style: { ...get(customLabel, ['props', 'style']), ...style }
                     });

package/treeSelect/index.tsx

@@ -32,7 +32,7 @@ import { FixedSizeList as VirtualList, ListItemKeySelector } from 'react-window'
 import '@douyinfe/semi-foundation/tree/tree.scss';
 import '@douyinfe/semi-foundation/treeSelect/treeSelect.scss';
 import BaseComponent, { ValidateStatus } from '../_base/baseComponent';
-import ConfigContext from '../configProvider/context';
+import ConfigContext, { ContextValue } from '../configProvider/context';
 import TagGroup from '../tag/group';
 import Tag, { TagProps } from '../tag/index';
 import Input, { InputProps } from '../input/index';
@@ -294,6 +294,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
     onNodeDoubleClick: any;
     onMotionEnd: any;
     treeSelectID: string;
+    context: ContextValue;
 
     constructor(props: TreeSelectProps) {
         super(props);
@@ -1177,15 +1178,15 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
 
     onNodeLoad = (data: TreeNodeData) => new Promise(resolve => this.foundation.setLoadKeys(data, resolve));
 
-    onNodeSelect = (e: React.MouseEvent, treeNode: TreeNodeProps) => {
+    onNodeSelect = (e: React.MouseEvent | React.KeyboardEvent, treeNode: TreeNodeProps) => {
         this.foundation.handleNodeSelect(e, treeNode);
     };
 
-    onNodeCheck = (e: React.MouseEvent, treeNode: TreeNodeProps) => {
+    onNodeCheck = (e: React.MouseEvent | React.KeyboardEvent, treeNode: TreeNodeProps) => {
         this.foundation.handleNodeSelect(e, treeNode);
     };
 
-    onNodeExpand = (e: React.MouseEvent, treeNode: TreeNodeProps) => {
+    onNodeExpand = (e: React.MouseEvent | React.KeyboardEvent, treeNode: TreeNodeProps) => {
         this.foundation.handleNodeExpand(e, treeNode);
     };
 

package/typography/__test__/typography.test.js

@@ -24,6 +24,7 @@ describe(`Typography`, () => {
         const typographyParagraph = mount(<Typography.Paragraph {...props}>Semi Design</Typography.Paragraph>)
         const p = typographyParagraph.find('div.semi-typography-paragraph');
         expect(p.length).toEqual(1);
+        typographyParagraph.unmount();
     });
 
     it('typography copyable', () => {

package/upload/__test__/upload.test.js

@@ -564,6 +564,7 @@ describe('Upload', () => {
         requests[0].respond(200, { 'Content-Type': 'application/json' }, 'success');
         const previewContent = upload.find(`.${BASE_CLASS_PREFIX}-upload-file-card-preview`);
         expect(previewContent.contains(specificContent)).toEqual(true);
+        upload.unmount();
     });
 
     it('afterUpload', () => {
@@ -642,6 +643,7 @@ describe('Upload', () => {
         ).toEqual(true);
         expect(stateFileList.every(item => item.name !== 'remove.jpg')).toEqual(true);
         expect(stateFileList[3].status === 'uploadFail' && stateFileList[3].name === rename).toEqual(true);
+        upload.unmount();
     });
 
     it('uploadTrigger', () => {

package/upload/_story/upload.stories.js

@@ -572,8 +572,8 @@ export const Draggable = () => (
     <Upload
       {...commonProps}
       draggable={true}
-      disabled
-      accept="application/pdf,.jpeg"
+      // disabled
+      accept="application/image/*,.md"
       dragMainText={'点击上传文件或拖拽文件到这里'}
       dragSubText="支持的文件类型：.jpg、.pdf"
     ></Upload>

package/upload/index.tsx

@@ -24,7 +24,7 @@ export interface UploadProps {
     beforeUpload?: (object: BeforeUploadProps) => BeforeUploadObjectResult | Promise<BeforeUploadObjectResult> | boolean;
     beforeClear?: (fileList: Array<FileItem>) => boolean | Promise<boolean>;
     beforeRemove?: (file: FileItem, fileList: Array<FileItem>) => boolean | Promise<boolean>;
-    capture?: boolean | string | undefined;
+    capture?: boolean | 'user' | 'environment' | undefined;
     children?: ReactNode;
     className?: string;
     customRequest?: (object: customRequestArgs) => void;