fix: #1189, fix foundation include react special event and type (#1193)

* fix: #1189, AutoComplete、Image、Rating、InputNumber event define and use

* fix: #1189, TextArea use ref.current in foundation

* fix: #1189, Table use e.native in foundation

* fix: #1189, Image use e.nativeEvent & use ref.current

* fix: #1189, optimize code

* fix: #1189, slider foundation use ref.current

* fix: @douyinfe/semi-ui proptypes

* fix: #1189, e.persist move to baseComponent

* fix: #1189, checkbox e.nativeEvent

Co-authored-by: zhangyumei.0319 <[email protected]>

packages/semi-foundation/autoComplete/foundation.ts

@@ -39,6 +39,7 @@ export interface AutoCompleteAdapter<P = Record<string, any>, S = Record<string,
     notifyFocus: (event?: any) => void;
     notifyBlur: (event?: any) => void;
     rePositionDropdown: () => void;
+    persistEvent: (event: any) => void;
 }
 
 class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<AutoCompleteAdapter<P, S>, P, S> {
@@ -416,8 +417,9 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
     }
 
     handleBlur(e: any) {
+        // only need persist on react adapter
         // https://reactjs.org/docs/legacy-event-pooling.html
-        e.persist();
+        this._persistEvent(e);
         // In order to handle the problem of losing onClick binding when clicking on the padding area, the onBlur event is triggered first to cause the react view to be updated
         // internal-issues:1231
         setTimeout(() => {

packages/semi-foundation/base/foundation.ts

@@ -21,6 +21,7 @@ export interface DefaultAdapter<P = Record<string, any>, S = Record<string, any>
     getCaches(): any;
     setCache(key: any, value: any): void;
     stopPropagation(e: any): void;
+    persistEvent: (event: any) => void;
 }
 
 class BaseFoundation<T extends Partial<DefaultAdapter<P, S>>, P = Record<string, any>, S = Record<string, any>> {
@@ -61,6 +62,7 @@ class BaseFoundation<T extends Partial<DefaultAdapter<P, S>>, P = Record<string,
             setCache: noop,
             getCaches: noop,
             stopPropagation: noop,
+            persistEvent: noop,
         };
     }
 
@@ -141,5 +143,10 @@ class BaseFoundation<T extends Partial<DefaultAdapter<P, S>>, P = Record<string,
     log(text: string, ...rest: any) {
         log(text, ...rest);
     }
+
+    _persistEvent(e: any) {
+        // only work for react adapter for now
+        this._adapter.persistEvent(e);
+    }
 }
 export default BaseFoundation;

packages/semi-foundation/checkbox/checkboxFoundation.ts

@@ -10,22 +10,24 @@ export interface BasicCheckboxEvent {
     target: BasicTargetObject;
     stopPropagation: () => void;
     preventDefault: () => void;
-    nativeEvent: {
-        stopImmediatePropagation: () => void;
-    }
+    [x: string]: any;
+    // nativeEvent: {
+    //     stopImmediatePropagation: () => void;
+    // }
 }
 export interface CheckboxAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getIsInGroup: () => boolean;
     getGroupValue: () => any[];
-    notifyGroupChange: (event: BasicCheckboxEvent) => void;
+    notifyGroupChange: (e: any) => void;
     getGroupDisabled: () => boolean;
     setNativeControlChecked: (checked: boolean) => void;
     getState: noopFunction;
-    notifyChange: (event: BasicCheckboxEvent) => void;
+    notifyChange: (e: any) => void;
     setAddonId: () => void;
     setExtraId: () => void;
     setFocusVisible: (focusVisible: boolean) => void;
     focusCheckboxEntity: () => void;
+    generateEvent: (checked: boolean, e: any) => any; // 1.modify checked value 2.add nativeEvent on react adapter
 }
 
 class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<CheckboxAdapter<P, S>, P, S> {
@@ -46,32 +48,8 @@ class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> exten
         }
     }
 
-    getEvent(checked: boolean, e: any) {
-        const props = this.getProps();
-        const cbValue = {
-            target: {
-                ...props,
-                checked,
-            },
-            stopPropagation: () => {
-                e.stopPropagation();
-            },
-            preventDefault: () => {
-                e.preventDefault();
-            },
-            nativeEvent: {
-                stopImmediatePropagation: () => {
-                    if (e.nativeEvent && typeof e.nativeEvent.stopImmediatePropagation === 'function') {
-                        e.nativeEvent.stopImmediatePropagation();
-                    }
-                }
-            },
-        };
-        return cbValue;
-    }
-
     notifyChange(checked: boolean, e: any) {
-        const cbValue = this.getEvent(checked, e);
+        const cbValue = this._adapter.generateEvent(checked, e);
         this._adapter.notifyChange(cbValue);
     }
 
@@ -114,7 +92,7 @@ class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> exten
         const groupValue = this._adapter.getGroupValue();
         const checked = groupValue.includes(value);
         const newChecked = !checked;
-        const event = this.getEvent(newChecked, e);
+        const event = this._adapter.generateEvent(newChecked, e);
         this._adapter.notifyChange(event);
         this._adapter.notifyGroupChange(event);
     }
@@ -160,7 +138,7 @@ export interface BaseCheckboxProps {
     defaultChecked?: boolean;
     disabled?: boolean;
     indeterminate?: boolean;
-    onChange?: (e: BasicCheckboxEvent) => any;
+    onChange?: (e: any) => any;
     value?: any;
     style?: Record<string, any>;
     className?: string;

packages/semi-foundation/form/utils.ts

@@ -47,6 +47,7 @@ export function isValid(errors: any): boolean {
         errors.$$typeof.toString() === 'Symbol(react.element)'
     ) {
         // when error message is reactNode
+        // only work with React Adapter
         valid = false;
     }
     return valid;

packages/semi-foundation/image/previewImageFoundation.ts

@@ -5,13 +5,14 @@ import { throttle, isUndefined } from "lodash";
 export interface PreviewImageAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getOriginImageSize: () => { originImageWidth: number; originImageHeight: number; }; 
     setOriginImageSize: (size: { originImageWidth: number; originImageHeight: number; }) => void;
-    getContainerRef: () => any;
-    getImageRef: () => any;
+    getContainer: () => HTMLDivElement;
+    getImage: () => HTMLImageElement;
     getMouseMove: () => boolean;
     setStartMouseMove: (move: boolean) => void;
     getMouseOffset: () => { x: number; y: number };
     setStartMouseOffset: (offset: { x: number; y: number }) => void;
     setLoading: (loading: boolean) => void;
+    setImageCursor: (canDrag: boolean) => void;
 }
 
 export interface DragDirection {
@@ -29,6 +30,17 @@ export interface ImageOffset {
     y: number;
 }
 
+const DefaultDOMRect = {
+    bottom: 0,
+    height: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    width: 0,
+    x: 0,
+    y: 0,
+    toJSON: () => ({})
+};
 export default class PreviewImageFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<PreviewImageAdapter<P, S>, P, S> {
     constructor(adapter: PreviewImageAdapter<P, S>) {
         super({ ...adapter });
@@ -37,13 +49,19 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
     _isImageVertical = (): boolean => this.getProp("rotation") % 180 !== 0;
 
     _getImageBounds = (): DOMRect => {
-        const imageRef = this._adapter.getImageRef();
-        return imageRef?.getBoundingClientRect();
+        const imageDOM = this._adapter.getImage();
+        if (imageDOM) {
+            return imageDOM.getBoundingClientRect();
+        }
+        return DefaultDOMRect;
     };
 
     _getContainerBounds = (): DOMRect => {
-        const containerRef = this._adapter.getContainerRef();
-        return containerRef?.current?.getBoundingClientRect();
+        const containerDOM = this._adapter.getContainer();
+        if (containerDOM) {
+            return containerDOM.getBoundingClientRect();
+        }
+        return DefaultDOMRect;
     }
 
     _getOffset = (e: any): ImageOffset => {
@@ -98,8 +116,8 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
         const imgWidth = horizontal ? originImageWidth : originImageHeight;
         const imgHeight = horizontal ? originImageHeight : originImageWidth;
         const { onZoom } = this.getProps();
-        const containerRef = this._adapter.getContainerRef();
-        if (containerRef && containerRef.current) {
+        const containerDOM = this._adapter.getContainer();
+        if (containerDOM) {
             const { width: containerWidth, height: containerHeight } = this._getContainerBounds();
             const reservedWidth = containerWidth - 80;
             const reservedHeight = containerHeight - 80;
@@ -121,12 +139,14 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
         }
     };
 
-    handleWheel = (e: React.WheelEvent<HTMLImageElement>) => {
+    // e: WheelEvent<HTMLImageElement>
+    handleWheel = (e: any) => {
         this.onWheel(e);
         handlePrevent(e);
     }
 
-    onWheel = throttle((e: React.WheelEvent<HTMLImageElement>): void => {
+    // e: WheelEvent<HTMLImageElement>
+    onWheel = throttle((e: any): void => {
         const { onZoom, zoomStep, maxZoom, minZoom } = this.getProps();
         const { currZoom } = this.getStates();
         let _zoom:number;
@@ -163,7 +183,7 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
     };
 
     handleZoomChange = (newZoom: number, e: any): void => {
-        const imageRef = this._adapter.getImageRef();
+        const imageDOM = this._adapter.getImage();
         const { originImageWidth, originImageHeight } = this._adapter.getOriginImageSize();
         const { canDragVertical, canDragHorizontal } = this.calcCanDragDirection();
         const canDrag = canDragVertical || canDragHorizontal;
@@ -201,7 +221,9 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
             top: newTop,
             currZoom: newZoom,
         } as any);
-        imageRef && (imageRef.style.cursor = canDrag ? "grab" : "default");
+        if (imageDOM) {
+            this._adapter.setImageCursor(canDrag);
+        }
     };
 
     calcExtremeBounds = (): ExtremeBounds => {

packages/semi-foundation/image/previewInnerFoundation.ts

@@ -57,7 +57,7 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
     }
 
     handleMouseMoveEvent = (e: any, event: string) => {
-        const isTarget = isTargetEmit(e.nativeEvent, STOP_CLOSE_TARGET);
+        const isTarget = isTargetEmit(e, STOP_CLOSE_TARGET);
         if (isTarget && event === "over") {
             this._adapter.setStopTiming(true);
         } else if (isTarget && event === "out") {
@@ -74,7 +74,7 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
 
     handleMouseUp = (e: any) => {
         const { maskClosable } = this.getProps();
-        let couldClose = !isTargetEmit(e.nativeEvent, NOT_CLOSE_TARGETS);
+        let couldClose = !isTargetEmit(e, NOT_CLOSE_TARGETS);
         const { clientX, clientY } = e;
         const { x, y } = this._adapter.getStartMouseDown();
         // 对鼠标移动做容错处理，当 x 和 y 方向在 mouseUp 的时候移动距离都小于等于 5px 时候就可以关闭预览

packages/semi-foundation/input/textareaFoundation.ts

@@ -7,7 +7,6 @@ import {
 } from 'lodash';
 import calculateNodeHeight from './util/calculateNodeHeight';
 import getSizingData from './util/getSizingData';
-import isEnterPress from '../utils/isEnterPress';
 
 export interface TextAreaDefaultAdapter {
     notifyChange: noopFunction;
@@ -24,7 +23,7 @@ export interface TextAreaDefaultAdapter {
 export interface TextAreaAdapter extends Partial<DefaultAdapter>, Partial<TextAreaDefaultAdapter> {
     setMinLength(length: number): void;
     notifyPressEnter(e: any): void;
-    getRef(): any;
+    getRef(): HTMLInputElement;
     notifyHeightUpdate(e: any): void;
 }
 
@@ -175,7 +174,7 @@ export default class TextAreaFoundation extends BaseFoundation<TextAreaAdapter>
     resizeTextarea = (cb?: any) => {
         const { height } = this.getStates();
         const { rows } = this.getProps();
-        const node = this._adapter.getRef().current;
+        const node = this._adapter.getRef();
         const nodeSizingData = getSizingData(node);
 
         if (!nodeSizingData) {
@@ -199,11 +198,13 @@ export default class TextAreaFoundation extends BaseFoundation<TextAreaAdapter>
         cb && cb();
     };
 
-    handleMouseEnter(e) {
+    // e: MouseEvent
+    handleMouseEnter(e: any) {
         this._adapter.toggleHovering(true);
     }
 
-    handleMouseLeave(e) {
+    // e: MouseEvent
+    handleMouseLeave(e: any) {
         this._adapter.toggleHovering(false);
     }
 

packages/semi-foundation/inputNumber/foundation.ts

@@ -300,7 +300,7 @@ class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
         }
         this._adapter.setClickUpOrDown(true);
         if (event) {
-            event.persist();
+            this._persistEvent(event);
             event.stopPropagation();
             // Prevent native blurring events
             this._preventDefault(event);
@@ -321,7 +321,7 @@ class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
         }
         this._adapter.setClickUpOrDown(true);
         if (event) {
-            event.persist();
+            this._persistEvent(event);
             event.stopPropagation();
             this._preventDefault(event);
         }

packages/semi-foundation/rating/foundation.ts

@@ -170,7 +170,8 @@ export default class RatingFoundation<P = Record<string, any>, S = Record<string
         }
     }
 
-    handleStarBlur = (event: React.FocusEvent) => {
+    // e: FocusEvent
+    handleStarBlur = (e: any) => {
         const { emptyStarFocusVisible } = this.getStates();
         if (emptyStarFocusVisible) {
             this._adapter.setEmptyStarFocusVisible(false);
@@ -205,7 +206,8 @@ export class RatingItemFoundation<P = Record<string, any>, S = Record<string, an
         }
     }
 
-    handleBlur = (event: React.FocusEvent, star: string) => {
+    // e: FocusEvent
+    handleBlur = (e: any, star: string) => {
         const { firstStarFocus, secondStarFocus } = this.getStates();
         if (star === 'first') {
             firstStarFocus && this._adapter.setFirstStarFocus(false);

packages/semi-foundation/slider/foundation.ts

@@ -82,8 +82,8 @@ export interface SliderAdapter extends DefaultAdapter<SliderProps, SliderState>{
     setDragging: (value: boolean[]) => void;
     updateCurrentValue: (value: SliderState['currentValue']) => void;
     setOverallVars: (key: string, value: any) => void;
-    getMinHandleEl: () => { current: HTMLElement };
-    getMaxHandleEl: () => { current: HTMLElement };
+    getMinHandleEl: () => HTMLSpanElement;
+    getMaxHandleEl: () => HTMLSpanElement;
     onHandleDown: (e: any) => any;
     onHandleMove: (mousePos: number, isMin: boolean, stateChangeCallback?: () => void, clickTrack?: boolean, outPutValue?: number | number[]) => boolean | void;
     setEventDefault: (e: any) => void;
@@ -520,8 +520,8 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
 
     // run when user touch left or right handle.
     onHandleTouchStart = (e: any, handler: 'min' | 'max') => {
-        const handleMinDom = this._adapter.getMinHandleEl().current;
-        const handleMaxDom = this._adapter.getMaxHandleEl().current;
+        const handleMinDom = this._adapter.getMinHandleEl();
+        const handleMaxDom = this._adapter.getMaxHandleEl();
         if (e.target === handleMinDom || e.target === handleMaxDom) {
             handlePrevent(e);
             const touch = touchEventPolyfill(e.touches[0], e);
@@ -531,8 +531,8 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
     };
 
     onHandleTouchMove = (e: any) => {
-        const handleMinDom = this._adapter.getMinHandleEl().current;
-        const handleMaxDom = this._adapter.getMaxHandleEl().current;
+        const handleMinDom = this._adapter.getMinHandleEl();
+        const handleMaxDom = this._adapter.getMaxHandleEl();
         if (e.target === handleMinDom || e.target === handleMaxDom) {
             const touch = touchEventPolyfill(e.touches[0], e);
             this.onHandleMove(touch);

packages/semi-foundation/table/foundation.ts

@@ -562,16 +562,7 @@ class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType
     handleMouseLeave(e: any) { }
 
     stopPropagation(e: any) {
-        if (e && typeof e === 'object') {
-            if (typeof e.stopPropagation === 'function') {
-                e.stopPropagation();
-            }
-            if (e.nativeEvent && typeof e.nativeEvent.stopPropagation === 'function') {
-                e.nativeEvent.stopPropagation();
-            } else if (typeof e.stopImmediatePropagation === 'function') {
-                e.stopImmediatePropagation();
-            }
-        }
+        this._adapter.stopPropagation(e);
     }
 
     /**

packages/semi-ui/_base/baseComponent.tsx

@@ -66,6 +66,9 @@ export default class BaseComponent<P extends BaseProps = {}, S = {}> extends Com
                 } catch (error) {
 
                 }
+            },
+            persistEvent: (e: React.KeyboardEvent | React.MouseEvent) => {
+                e && e.persist && typeof e.persist === 'function' ? e.persist() : null;
             }
         };
     }

packages/semi-ui/autoComplete/index.tsx

@@ -293,7 +293,7 @@ class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<AutoComple
                 let { rePosKey } = this.state;
                 rePosKey = rePosKey + 1;
                 this.setState({ rePosKey });
-            },
+            }
         };
     }
 

packages/semi-ui/checkbox/checkbox.tsx

@@ -11,7 +11,13 @@ import { Context, CheckboxContextType } from './context';
 import { isUndefined, isBoolean, noop } from 'lodash';
 import { getUuidShort } from '@douyinfe/semi-foundation/utils/uuid';
 import { CheckboxType } from './checkboxGroup';
-export type CheckboxEvent = BasicCheckboxEvent;
+
+
+export interface CheckboxEvent extends BasicCheckboxEvent {
+    nativeEvent: {
+        stopImmediatePropagation: () => void;
+    }
+}
 export type TargetObject = BasicTargetObject;
 
 export interface CheckboxProps extends BaseCheckboxProps {
@@ -96,6 +102,29 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
                 const { onChange } = this.props;
                 onChange && onChange(cbContent);
             },
+            generateEvent: (checked, e) => {
+                const { props } = this;
+                const cbValue = {
+                    target: {
+                        ...props,
+                        checked,
+                    },
+                    stopPropagation: () => {
+                        e.stopPropagation();
+                    },
+                    preventDefault: () => {
+                        e.preventDefault();
+                    },
+                    nativeEvent: {
+                        stopImmediatePropagation: () => {
+                            if (e.nativeEvent && typeof e.nativeEvent.stopImmediatePropagation === 'function') {
+                                e.nativeEvent.stopImmediatePropagation();
+                            }
+                        }
+                    },
+                };
+                return cbValue;
+            },
             getIsInGroup: () => this.isInGroup(),
             getGroupValue: () => (this.context && this.context.checkboxGroup.value) || [],
             notifyGroupChange: cbContent => {

packages/semi-ui/checkbox/checkboxGroup.tsx

@@ -74,8 +74,8 @@ class CheckboxGroup extends BaseComponent<CheckboxGroupProps, CheckboxGroupState
             updateGroupValue: value => {
                 this.setState({ value });
             },
-            notifyChange: evt => {
-                this.props.onChange && this.props.onChange(evt);
+            notifyChange: value => {
+                this.props.onChange && this.props.onChange(value);
             },
         };
     }

packages/semi-ui/checkbox/context.ts

@@ -1,8 +1,9 @@
 import React from 'react';
-import { BasicCheckboxEvent } from '@douyinfe/semi-foundation/checkbox/checkboxFoundation';
+// import { BasicCheckboxEvent } from '@douyinfe/semi-foundation/checkbox/checkboxFoundation';
 type CheckboxContextType = {
     checkboxGroup?: {
-        onChange: (evt: BasicCheckboxEvent) => void;
+        // onChange: (evt: BasicCheckboxEvent) => void;
+        onChange: (evt: any) => void;
         value: any[];
         disabled: boolean;
         name: any;

packages/semi-ui/image/previewFooter.tsx

@@ -214,7 +214,7 @@ export default class Footer extends BaseComponent<FooterProps> {
             onClick={!disableDownload ? onDownload : undefined}
             className={cls(`${footerPrefixCls}-gap`,
                 {
-                    [`${footerPrefixCls}-disabled`] : disableDownload,
+                    [`${footerPrefixCls}-disabled`]: disableDownload,
                 },
             )}
         />;

packages/semi-ui/image/previewImage.tsx

@@ -47,10 +47,10 @@ export default class PreviewImage extends BaseComponent<PreviewImageProps, Previ
                 originImageWidth = size.originImageWidth;
                 originImageHeight = size.originImageHeight;
             },
-            getContainerRef: () => {
-                return this.containerRef;
+            getContainer: () => {
+                return this.containerRef.current;
             },
-            getImageRef: () => {
+            getImage: () => {
                 return this.imageRef;
             },
             getMouseMove: () => startMouseMove,
@@ -62,11 +62,14 @@ export default class PreviewImage extends BaseComponent<PreviewImageProps, Previ
                     loading,
                 });
             },
+            setImageCursor: (canDrag: boolean) => {
+                this.imageRef.style.cursor = canDrag ? "grab" : "default";
+            }
         };
     }
 
     containerRef: React.RefObject<HTMLDivElement>;
-    imageRef: React.RefObject<HTMLImageElement>;
+    imageRef: HTMLImageElement | null;
     foundation: PreviewImageFoundation;
 
     constructor(props) {
@@ -81,7 +84,7 @@ export default class PreviewImage extends BaseComponent<PreviewImageProps, Previ
             left: 0,
         };
         this.containerRef = React.createRef<HTMLDivElement>();
-        this.imageRef = React.createRef<HTMLImageElement>();
+        this.imageRef = null;
         this.foundation = new PreviewImageFoundation(this.adapter);
     }
 
@@ -161,7 +164,7 @@ export default class PreviewImage extends BaseComponent<PreviewImageProps, Previ
     // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners。
     
     registryImageRef = (ref): void => {
-        if (this.imageRef && this.imageRef.current) {
+        if (this.imageRef) {
             (this.imageRef as any).removeEventListener("wheel", this.handleWheel);
         }
         if (ref) {

packages/semi-ui/image/previewInner.tsx

@@ -42,10 +42,10 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
         closeOnEsc: PropTypes.bool,
         prevTip: PropTypes.string,
         nextTip: PropTypes.string,
-        zoomInTip:PropTypes.string,
+        zoomInTip: PropTypes.string,
         zoomOutTip: PropTypes.string,
         downloadTip: PropTypes.string,
-        adaptiveTip:PropTypes.string,
+        adaptiveTip: PropTypes.string,
         originTip: PropTypes.string,
         lazyLoad: PropTypes.bool,
         preLoad: PropTypes.bool,
@@ -241,7 +241,7 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
     }
 
     handleMouseUp = (e): void => {
-        this.foundation.handleMouseUp(e);
+        this.foundation.handleMouseUp(e.nativeEvent);
     }
 
     handleMouseMove = (e): void => {
@@ -333,8 +333,8 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
                     onMouseDown={this.handleMouseDown}
                     onMouseUp={this.handleMouseUp}
                     onMouseMove={this.handleMouseMove}
-                    onMouseOver={(e): void => this.handleMouseEvent(e, "over")}
-                    onMouseOut={(e): void => this.handleMouseEvent(e, "out")}
+                    onMouseOver={(e): void => this.handleMouseEvent(e.nativeEvent, "over")}
+                    onMouseOut={(e): void => this.handleMouseEvent(e.nativeEvent, "out")}
                 >
                     <Header className={cls(hideViewerCls)} onClose={this.handlePreviewClose} renderHeader={renderHeader}/>
                     <PreviewImage 

packages/semi-ui/input/textarea.tsx

@@ -98,7 +98,7 @@ class TextArea extends BaseComponent<TextAreaProps, TextAreaState> {
     };
 
     focusing: boolean;
-    libRef: React.RefObject<React.ReactNode>;
+    libRef: React.RefObject<HTMLInputElement>;
     _resizeLock: boolean;
     _resizeListener: any;
     foundation: TextAreaFoundation;
@@ -115,7 +115,7 @@ class TextArea extends BaseComponent<TextAreaProps, TextAreaState> {
         this.focusing = false;
         this.foundation = new TextAreaFoundation(this.adapter);
 
-        this.libRef = React.createRef();
+        this.libRef = React.createRef<HTMLInputElement>();
         this._resizeLock = false;
     }
 
@@ -127,7 +127,7 @@ class TextArea extends BaseComponent<TextAreaProps, TextAreaState> {
                     this.foundation.resizeTextarea();
                 }
             }),
-            getRef: () => this.libRef,
+            getRef: () => this.libRef.current,
             toggleFocusing: (focusing: boolean) => this.setState({ isFocus: focusing }),
             toggleHovering: (hovering: boolean) => this.setState({ isHover: hovering }),
             notifyChange: (val: string, e: React.MouseEvent<HTMLTextAreaElement>) => {

packages/semi-ui/inputNumber/index.tsx

@@ -222,7 +222,7 @@ class InputNumber extends BaseComponent<InputNumberProps, InputNumberState> {
             },
             updateStates: (states, callback) => {
                 this.setState(states, callback);
-            }
+            },
         };
     }
 

packages/semi-ui/package.json

@@ -97,7 +97,6 @@
         "jsdom": "^15.2.1",
         "merge2": "^1.4.1",
         "null-loader": "^3.0.0",
-        "prop-types": "15.7.2",
         "react-dnd": "^9.5.1",
         "react-infinite-scroller": "^1.2.4",
         "react-storybook-addon-props-combinations": "^1.1.0",

packages/semi-ui/rating/item.tsx

@@ -182,7 +182,7 @@ export default class Item extends BaseComponent<RatingItemProps, RatingItemState
         const AriaSetSize = allowHalf ? count * 2 + 1 : count + 1;
         const firstStarProps = {
             ref: this.saveFirstStar as any,
-            role:"radio",
+            role: "radio",
             'aria-checked': value === index + 0.5,
             'aria-posinset': 2 * index + 1,
             'aria-setsize': AriaSetSize,
@@ -195,7 +195,7 @@ export default class Item extends BaseComponent<RatingItemProps, RatingItemState
             onFocus: (e) => {
                 this.onFocus(e, 'first');
             },
-            onBlur:(e) => {
+            onBlur: (e) => {
                 this.onBlur(e, 'first');
             },
         };
@@ -203,7 +203,7 @@ export default class Item extends BaseComponent<RatingItemProps, RatingItemState
         const secondStarTabIndex = !disabled && ((value === index + 1) || (isEmpty && value === 0)) ? 0 : -1;
         const secondStarProps = {
             ref: this.saveSecondStar as any,
-            role:"radio",
+            role: "radio",
             'aria-checked': isEmpty ? value === 0 : value === index + 1,
             'aria-posinset': allowHalf ? 2 * (index + 1) : index + 1,
             'aria-setsize': AriaSetSize, 
@@ -216,7 +216,7 @@ export default class Item extends BaseComponent<RatingItemProps, RatingItemState
             onFocus: (e) => {
                 this.onFocus(e, 'second');
             },
-            onBlur:(e) => {
+            onBlur: (e) => {
                 this.onBlur(e, 'second');
             },
         };

packages/semi-ui/slider/index.tsx

@@ -74,8 +74,8 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
         verticalReverse: false
     };
     private sliderEl: React.RefObject<HTMLDivElement>;
-    private minHanleEl: React.RefObject<HTMLDivElement>;
-    private maxHanleEl: React.RefObject<HTMLDivElement>;
+    private minHanleEl: React.RefObject<HTMLSpanElement>;
+    private maxHanleEl: React.RefObject<HTMLSpanElement>;
     private dragging: boolean[];
     private eventListenerSet: Set<() => void>;
     foundation: SliderFoundation;
@@ -185,8 +185,8 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
             setOverallVars: (key: string, value: any) => {
                 this[key] = value;
             },
-            getMinHandleEl: () => this.minHanleEl,
-            getMaxHandleEl: () => this.maxHanleEl,
+            getMinHandleEl: () => this.minHanleEl.current,
+            getMaxHandleEl: () => this.maxHanleEl.current,
             onHandleDown: (e: React.MouseEvent) => {
                 this._addEventListener(document.body, 'mousemove', this.foundation.onHandleMove, false);
                 this._addEventListener(document.body, 'mouseup', this.foundation.onHandleUp, false);

packages/semi-ui/table/Table.tsx

@@ -341,6 +341,19 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
                 if (bodyHasScrollBar !== this.state.bodyHasScrollBar) {
                     this.setState({ bodyHasScrollBar });
                 }
+            },
+            stopPropagation(e: TableSelectionCellEvent) {
+                // The event definition here is not very accurate for now, it belongs to a broad structure definition
+                if (e && typeof e === 'object') {
+                    if (typeof e.stopPropagation === 'function') {
+                        e.stopPropagation();
+                    }
+                    if (e.nativeEvent && typeof e.nativeEvent.stopPropagation === 'function') {
+                        e.nativeEvent.stopPropagation();
+                    } else if (typeof e.stopImmediatePropagation === 'function') {
+                        e.stopImmediatePropagation();
+                    }
+                }
             }
         };
     }