@douyinfe/semi-ui 2.50.0-alpha.1 → 2.50.0

package/lib/cjs/index.js

@@ -51,6 +51,18 @@ Object.defineProperty(exports, "Banner", {
     return _banner.default;
   }
 });
+Object.defineProperty(exports, "BaseComponent", {
+  enumerable: true,
+  get: function () {
+    return _baseComponent.default;
+  }
+});
+Object.defineProperty(exports, "BaseFoundation", {
+  enumerable: true,
+  get: function () {
+    return _foundation.default;
+  }
+});
 Object.defineProperty(exports, "Breadcrumb", {
   enumerable: true,
   get: function () {
@@ -562,6 +574,8 @@ Object.defineProperty(exports, "withFormState", {
   }
 });
 require("./_base/base.css");
+var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/base/foundation"));
+var _baseComponent = _interopRequireDefault(require("./_base/baseComponent"));
 var _anchor = _interopRequireDefault(require("./anchor"));
 var _autoComplete = _interopRequireDefault(require("./autoComplete"));
 var _avatar = _interopRequireDefault(require("./avatar"));

package/lib/cjs/notification/index.js

@@ -117,6 +117,7 @@ class NotificationList extends _baseComponent.default {
   }
   static addNotice(notice) {
     var _a;
+    notice = Object.assign(Object.assign({}, defaultConfig), notice);
     const id = (_a = notice.id) !== null && _a !== void 0 ? _a : (0, _uuid.default)('notification');
     if (!ref) {
       const {
@@ -160,27 +161,27 @@ class NotificationList extends _baseComponent.default {
     return id;
   }
   static info(opts) {
-    return this.addNotice(Object.assign(Object.assign(Object.assign({}, defaultConfig), opts), {
+    return this.addNotice(Object.assign(Object.assign({}, opts), {
       type: 'info'
     }));
   }
   static success(opts) {
-    return this.addNotice(Object.assign(Object.assign(Object.assign({}, defaultConfig), opts), {
+    return this.addNotice(Object.assign(Object.assign({}, opts), {
       type: 'success'
     }));
   }
   static error(opts) {
-    return this.addNotice(Object.assign(Object.assign(Object.assign({}, defaultConfig), opts), {
+    return this.addNotice(Object.assign(Object.assign({}, opts), {
       type: 'error'
     }));
   }
   static warning(opts) {
-    return this.addNotice(Object.assign(Object.assign(Object.assign({}, defaultConfig), opts), {
+    return this.addNotice(Object.assign(Object.assign({}, opts), {
       type: 'warning'
     }));
   }
   static open(opts) {
-    return this.addNotice(Object.assign(Object.assign(Object.assign({}, defaultConfig), opts), {
+    return this.addNotice(Object.assign(Object.assign({}, opts), {
       type: 'default'
     }));
   }

package/lib/cjs/select/index.d.ts

@@ -139,7 +139,7 @@ export type SelectProps = {
     onDeselect?: (value: SelectProps['value'], option: Record<string, any>) => void;
     onSelect?: (value: SelectProps['value'], option: Record<string, any>) => void;
     allowCreate?: boolean;
-    triggerRender?: (props?: TriggerRenderProps) => React.ReactNode;
+    triggerRender?: (props: TriggerRenderProps) => React.ReactNode;
     onClear?: () => void;
     virtualize?: virtualListProps;
     onFocus?: (e: React.FocusEvent) => void;

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

@@ -63,7 +63,7 @@ export type TimePickerProps = {
     secondStep?: number;
     showClear?: boolean;
     size?: InputSize;
-    stopPropagation: boolean;
+    stopPropagation?: boolean;
     style?: React.CSSProperties;
     timeZone?: string | number;
     triggerRender?: (props?: any) => React.ReactNode;

package/lib/cjs/treeSelect/index.d.ts

@@ -77,7 +77,7 @@ export interface TreeSelectProps extends Omit<BasicTreeSelectProps, OverrideComm
     onSelect?: (selectedKey: string, selected: boolean, selectedNode: TreeNodeData) => void;
     renderSelectedItem?: RenderSelectedItem;
     getPopupContainer?: () => HTMLElement;
-    triggerRender?: (props?: TriggerRenderProps) => React.ReactNode;
+    triggerRender?: (props: TriggerRenderProps) => React.ReactNode;
     onBlur?: (e: React.MouseEvent) => void;
     onChange?: OnChange;
     onFocus?: (e: React.MouseEvent) => void;
@@ -191,7 +191,6 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
     triggerRef: React.RefObject<HTMLDivElement>;
     optionsRef: React.RefObject<any>;
     clickOutsideHandler: any;
-    _flattenNodes: TreeState['flattenNodes'];
     onNodeClick: any;
     onNodeDoubleClick: any;
     onMotionEnd: any;
@@ -248,6 +247,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
     };
     getTreeNodeKey: (treeNode: TreeNodeData) => string;
     handlePopoverClose: (isVisible: any) => void;
+    afterClose: () => void;
     renderTreeNode: (treeNode: FlattenNode, ind: number, style: React.CSSProperties) => JSX.Element;
     itemKey: (index: number, data: Record<string, any>) => any;
     renderNodeList: () => JSX.Element;

package/lib/cjs/treeSelect/index.js

@@ -689,13 +689,27 @@ class TreeSelect extends _baseComponent.default {
         searchAutoFocus,
         searchPosition
       } = this.props;
-      if (isVisible === false && Boolean(filterTreeNode)) {
-        this.foundation.clearInput();
+      // 将 inputValue 清空，如果有选中值的话，选中项能够快速回显
+      // Clear the inputValue. If there is a selected value, the selected item can be quickly echoed.
+      if (isVisible === false && filterTreeNode) {
+        this.foundation.clearInputValue();
       }
       if (filterTreeNode && searchPosition === _constants.strings.SEARCH_POSITION_DROPDOWN && isVisible && searchAutoFocus) {
         this.foundation.focusInput(true);
       }
     };
+    this.afterClose = () => {
+      // flattenNode 的变化将导致弹出层面板中的选项数目变化
+      // 在弹层完全收起之后，再通过 clearInput 重新计算 state 中的 expandedKey， flattenNode
+      // 防止在弹出层未收起时弹层面板中选项数目变化导致视觉上出现弹层闪动问题
+      // Changes to flattenNode will cause the number of options in the popup panel to change
+      // After the pop-up layer is completely closed, recalculate the expandedKey and flattenNode in the state through clearInput.
+      // Prevent the pop-up layer from flickering visually due to changes in the number of options in the pop-up panel when the pop-up layer is not collapsed.
+      const {
+        filterTreeNode
+      } = this.props;
+      filterTreeNode && this.foundation.clearInput();
+    };
     this.renderTreeNode = (treeNode, ind, style) => {
       const {
         data,
@@ -732,6 +746,7 @@ class TreeSelect extends _baseComponent.default {
     this.renderNodeList = () => {
       const {
         flattenNodes,
+        cachedFlattenNodes,
         motionKeys,
         motionType,
         filteredKeys
@@ -747,7 +762,7 @@ class TreeSelect extends _baseComponent.default {
       if (!virtualize || (0, _isEmpty2.default)(virtualize)) {
         return /*#__PURE__*/_react.default.createElement(_nodeList.default, {
           flattenNodes: flattenNodes,
-          flattenList: this._flattenNodes,
+          flattenList: cachedFlattenNodes,
           motionKeys: motionExpand ? motionKeys : new Set([]),
           motionType: motionType,
           // When motionKeys is empty, but filteredKeys is not empty (that is, the search hits), this situation should be distinguished from ordinary motionKeys
@@ -866,6 +881,7 @@ class TreeSelect extends _baseComponent.default {
       keyEntities: {},
       treeData: [],
       flattenNodes: [],
+      cachedFlattenNodes: undefined,
       selectedKeys: [],
       checkedKeys: new Set(),
       halfCheckedKeys: new Set(),
@@ -895,6 +911,7 @@ class TreeSelect extends _baseComponent.default {
     };
   }
   static getDerivedStateFromProps(props, prevState) {
+    var _a;
     const {
       prevProps,
       rePosKey
@@ -912,6 +929,8 @@ class TreeSelect extends _baseComponent.default {
     };
     const needUpdateTreeData = needUpdate('treeData');
     const needUpdateExpandedKeys = needUpdate('expandedKeys');
+    const isExpandControlled = ('expandedKeys' in props);
+    const isSearching = Boolean(props.filterTreeNode && prevState.inputValue && prevState.inputValue.length);
     // TreeNode
     if (needUpdateTreeData) {
       treeData = props.treeData;
@@ -930,31 +949,97 @@ class TreeSelect extends _baseComponent.default {
       }
     }
     const expandAllWhenDataChange = needUpdateTreeData && props.expandAll;
-    // expandedKeys
-    if (needUpdateExpandedKeys || prevProps && needUpdate('autoExpandParent')) {
-      newState.expandedKeys = (0, _treeUtil.calcExpandedKeys)(props.expandedKeys, keyEntities, props.autoExpandParent || !prevProps);
-      // only show animation when treeData does not change
-      if (prevProps && props.motion && !treeData) {
-        const {
-          motionKeys,
-          motionType
-        } = (0, _treeUtil.calcMotionKeys)(prevState.expandedKeys, newState.expandedKeys, keyEntities);
-        newState.motionKeys = new Set(motionKeys);
-        newState.motionType = motionType;
+    if (!isSearching) {
+      // expandedKeys
+      if (needUpdateExpandedKeys || prevProps && needUpdate('autoExpandParent')) {
+        newState.expandedKeys = (0, _treeUtil.calcExpandedKeys)(props.expandedKeys, keyEntities, props.autoExpandParent || !prevProps);
+        // only show animation when treeData does not change
+        if (prevProps && props.motion && !treeData) {
+          const {
+            motionKeys,
+            motionType
+          } = (0, _treeUtil.calcMotionKeys)(prevState.expandedKeys, newState.expandedKeys, keyEntities);
+          newState.motionKeys = new Set(motionKeys);
+          newState.motionType = motionType;
+          if (motionType === 'hide') {
+            // cache flatten nodes: expandedKeys changed may not be triggered by interaction
+            newState.cachedFlattenNodes = (0, _treeUtil2.cloneDeep)(prevState.flattenNodes);
+          }
+        }
+      } else if (!prevProps && (props.defaultExpandAll || props.expandAll) || expandAllWhenDataChange) {
+        newState.expandedKeys = new Set(Object.keys(keyEntities));
+      } else if (!prevProps && props.defaultExpandedKeys) {
+        newState.expandedKeys = (0, _treeUtil.calcExpandedKeys)(props.defaultExpandedKeys, keyEntities);
+      } else if (!prevProps && props.defaultValue) {
+        newState.expandedKeys = (0, _treeUtil.calcExpandedKeysForValues)((0, _treeUtil.normalizeValue)(props.defaultValue, withObject, keyMaps), keyEntities, props.multiple, valueEntities);
+      } else if (!prevProps && props.value) {
+        newState.expandedKeys = (0, _treeUtil.calcExpandedKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject, keyMaps), keyEntities, props.multiple, valueEntities);
+      } else if (!isExpandControlled && needUpdateTreeData && props.value) {
+        // 当 treeData 已经设置具体的值，并且设置了 props.loadData ，则认为 treeData 的更新是因为 loadData 导致的
+        // 如果是因为 loadData 导致 treeData改变， 此时在这里重新计算 key 会导致为未选中的展开项目被收起
+        // 所以此时不需要重新计算 expandedKeys，因为在点击展开按钮时候已经把被展开的项添加到 expandedKeys 中
+        // When treeData has a specific value and props.loadData is set, it is considered that the update of treeData is caused by loadData
+        // If the treeData is changed because of loadData, recalculating the key here will cause the unselected expanded items to be collapsed
+        // So there is no need to recalculate expandedKeys at this time, because the expanded item has been added to expandedKeys when the expand button is clicked
+        if (!(prevState.treeData && ((_a = prevState.treeData) === null || _a === void 0 ? void 0 : _a.length) > 0 && props.loadData)) {
+          newState.expandedKeys = (0, _treeUtil.calcExpandedKeysForValues)(props.value, keyEntities, props.multiple, valueEntities);
+        }
+      }
+      if (!newState.expandedKeys) {
+        delete newState.expandedKeys;
+      }
+      if (treeData || newState.expandedKeys) {
+        const flattenNodes = (0, _treeUtil.flattenTreeData)(treeData || prevState.treeData, newState.expandedKeys || prevState.expandedKeys, keyMaps);
+        newState.flattenNodes = flattenNodes;
+      }
+    } else {
+      let filteredState;
+      // treeData changed while searching
+      if (treeData) {
+        // Get filter data
+        filteredState = (0, _treeUtil.filterTreeData)({
+          treeData,
+          inputValue: prevState.inputValue,
+          filterTreeNode: props.filterTreeNode,
+          filterProps: props.treeNodeFilterProp,
+          showFilteredOnly: props.showFilteredOnly,
+          keyEntities: newState.keyEntities,
+          prevExpandedKeys: [...prevState.filteredExpandedKeys],
+          keyMaps: keyMaps
+        });
+        newState.flattenNodes = filteredState.flattenNodes;
+        newState.motionKeys = new Set([]);
+        newState.filteredKeys = filteredState.filteredKeys;
+        newState.filteredShownKeys = filteredState.filteredShownKeys;
+        newState.filteredExpandedKeys = filteredState.filteredExpandedKeys;
+      }
+      // expandedKeys changed while searching
+      if (props.expandedKeys) {
+        newState.filteredExpandedKeys = (0, _treeUtil.calcExpandedKeys)(props.expandedKeys, keyEntities, props.autoExpandParent || !prevProps);
+        if (prevProps && props.motion) {
+          const prevKeys = prevState ? prevState.filteredExpandedKeys : new Set([]);
+          // only show animation when treeData does not change
+          if (!treeData) {
+            const motionResult = (0, _treeUtil.calcMotionKeys)(prevKeys, newState.filteredExpandedKeys, keyEntities);
+            let {
+              motionKeys
+            } = motionResult;
+            const {
+              motionType
+            } = motionResult;
+            if (props.showFilteredOnly) {
+              motionKeys = motionKeys.filter(key => prevState.filteredShownKeys.has(key));
+            }
+            if (motionType === 'hide') {
+              // cache flatten nodes: expandedKeys changed may not be triggered by interaction
+              newState.cachedFlattenNodes = (0, _treeUtil2.cloneDeep)(prevState.flattenNodes);
+            }
+            newState.motionKeys = new Set(motionKeys);
+            newState.motionType = motionType;
+          }
+        }
+        newState.flattenNodes = (0, _treeUtil.flattenTreeData)(treeData || prevState.treeData, newState.filteredExpandedKeys || prevState.filteredExpandedKeys, keyMaps, props.showFilteredOnly && prevState.filteredShownKeys);
       }
-    } else if (!prevProps && (props.defaultExpandAll || props.expandAll) || expandAllWhenDataChange) {
-      newState.expandedKeys = new Set(Object.keys(keyEntities));
-    } else if (!prevProps && props.defaultExpandedKeys) {
-      newState.expandedKeys = (0, _treeUtil.calcExpandedKeys)(props.defaultExpandedKeys, keyEntities);
-    } else if (!prevProps && props.defaultValue) {
-      newState.expandedKeys = (0, _treeUtil.calcExpandedKeysForValues)((0, _treeUtil.normalizeValue)(props.defaultValue, withObject, keyMaps), keyEntities, props.multiple, valueEntities);
-    } else if (!prevProps && props.value) {
-      newState.expandedKeys = (0, _treeUtil.calcExpandedKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject, keyMaps), keyEntities, props.multiple, valueEntities);
-    }
-    // flattenNodes
-    if (treeData || needUpdateExpandedKeys) {
-      const flattenNodes = (0, _treeUtil.flattenTreeData)(treeData || prevState.treeData, newState.expandedKeys || prevState.expandedKeys, keyMaps);
-      newState.flattenNodes = flattenNodes;
     }
     // selectedKeys: single mode controlled
     const isMultiple = props.multiple;
@@ -1061,7 +1146,9 @@ class TreeSelect extends _baseComponent.default {
         this.props.onSearch && this.props.onSearch(input, filteredExpandedKeys);
       },
       cacheFlattenNodes: bool => {
-        this._flattenNodes = bool ? (0, _treeUtil2.cloneDeep)(this.state.flattenNodes) : null;
+        this.setState({
+          cachedFlattenNodes: bool ? (0, _treeUtil2.cloneDeep)(this.state.flattenNodes) : undefined
+        });
       },
       notifyLoad: (newLoadedKeys, data) => {
         const {
@@ -1206,7 +1293,8 @@ class TreeSelect extends _baseComponent.default {
       autoAdjustOverflow: autoAdjustOverflow,
       mouseLeaveDelay: mouseLeaveDelay,
       mouseEnterDelay: mouseEnterDelay,
-      onVisibleChange: this.handlePopoverClose
+      onVisibleChange: this.handlePopoverClose,
+      afterClose: this.afterClose
     }, selection);
   }
 }

package/lib/es/datePicker/yearAndMonth.js

@@ -124,11 +124,7 @@ class YearAndMonth extends BaseComponent {
     const right = strings.PANEL_TYPE_RIGHT;
     const needDisabled = year => {
       if (panelType === right && currentYear[left]) {
-        if (currentMonth[left] <= currentMonth[right]) {
-          return currentYear[left] > year;
-        } else {
-          return currentYear[left] >= year;
-        }
+        return currentYear[left] > year;
       }
       return false;
     };

package/lib/es/form/baseForm.d.ts

@@ -130,7 +130,7 @@ declare class Form<Values extends Record<string, any> = any> extends BaseCompone
         onDeselect?: (value: string | number | any[] | Record<string, any>, option: Record<string, any>) => void;
         onSelect?: (value: string | number | any[] | Record<string, any>, option: Record<string, any>) => void;
         allowCreate?: boolean;
-        triggerRender?: (props?: import("../select").TriggerRenderProps) => React.ReactNode;
+        triggerRender?: (props: import("../select").TriggerRenderProps) => React.ReactNode;
         onClear?: () => void;
         virtualize?: import("../select").virtualListProps;
         onFocus?: (e: React.FocusEvent<Element, Element>) => void;

package/lib/es/form/field.d.ts

@@ -76,7 +76,7 @@ declare const FormSelect: import("react").ComponentType<import("utility-types").
     onDeselect?: (value: string | number | any[] | Record<string, any>, option: Record<string, any>) => void;
     onSelect?: (value: string | number | any[] | Record<string, any>, option: Record<string, any>) => void;
     allowCreate?: boolean;
-    triggerRender?: (props?: import("../select/index").TriggerRenderProps) => import("react").ReactNode;
+    triggerRender?: (props: import("../select/index").TriggerRenderProps) => import("react").ReactNode;
     onClear?: () => void;
     virtualize?: import("../select/index").virtualListProps;
     onFocus?: (e: import("react").FocusEvent<Element, Element>) => void;

package/lib/es/image/interface.d.ts

@@ -53,6 +53,8 @@ export interface PreviewProps extends BaseProps {
     zIndex?: number;
     children?: ReactNode;
     crossOrigin?: "anonymous" | "use-credentials";
+    maxZoom?: number;
+    minZoom?: number;
     renderHeader?: (info: any) => ReactNode;
     renderPreviewMenu?: (props: MenuProps) => ReactNode;
     getPopupContainer?: () => HTMLElement;
@@ -138,14 +140,12 @@ export interface FooterProps extends SliderProps {
     onRotate?: (direction: string) => void;
     onDownload?: () => void;
     renderPreviewMenu?: (props: MenuProps) => ReactNode;
+    forwardRef?: React.RefObject<HTMLElement>;
 }
 export interface PreviewImageProps {
     src?: string;
     rotation?: number;
     style?: React.CSSProperties;
-    maxZoom?: number;
-    minZoom?: number;
-    zoomStep?: number;
     zoom?: number;
     ratio?: RatioType;
     disableDownload?: boolean;

package/lib/es/image/previewFooter.js

@@ -12,14 +12,9 @@ import PreviewFooterFoundation from '@douyinfe/semi-foundation/lib/es/image/prev
 import LocaleConsumer from "../locale/localeConsumer";
 const prefixCls = cssClasses.PREFIX;
 const footerPrefixCls = `${cssClasses.PREFIX}-preview-footer`;
-let mouseActiveTime = 0;
 export default class Footer extends BaseComponent {
   get adapter() {
-    return Object.assign(Object.assign({}, super.adapter), {
-      setStartMouseOffset: time => {
-        mouseActiveTime = time;
-      }
-    });
+    return Object.assign({}, super.adapter);
   }
   constructor(props) {
     super(props);
@@ -259,13 +254,15 @@ export default class Footer extends BaseComponent {
   render() {
     const {
       className,
-      renderPreviewMenu
+      renderPreviewMenu,
+      forwardRef
     } = this.props;
     const menuCls = cls(footerPrefixCls, `${footerPrefixCls}-wrapper`, className, {
       [`${footerPrefixCls}-content`]: !Boolean(renderPreviewMenu)
     });
     return /*#__PURE__*/React.createElement("section", {
-      className: menuCls
+      className: menuCls,
+      ref: forwardRef
     }, renderPreviewMenu ? this.customRenderViewMenu() : this.getFooterMenu());
   }
 }

package/lib/es/image/previewHeader.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { HeaderProps } from "./interface";
-declare const Header: React.FC<HeaderProps>;
+declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLElement>>;
 export default Header;

package/lib/es/image/previewHeader.js

@@ -1,10 +1,10 @@
-import * as React from "react";
+import React, { forwardRef } from "react";
 import { IconClose } from "@douyinfe/semi-icons";
 import { cssClasses } from '@douyinfe/semi-foundation/lib/es/image/constants';
 import cls from "classnames";
 import { PreviewContext } from "./previewContext";
 const prefixCls = `${cssClasses.PREFIX}-preview-header`;
-const Header = _ref => {
+const Header = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     onClose,
     titleStyle,
@@ -21,6 +21,7 @@ const Header = _ref => {
       title = titles[currentIndex];
     }
     return /*#__PURE__*/React.createElement("section", {
+      ref: ref,
       className: cls(prefixCls, className)
     }, /*#__PURE__*/React.createElement("section", {
       className: `${prefixCls}-title`,
@@ -30,5 +31,5 @@ const Header = _ref => {
       onMouseUp: onClose
     }, /*#__PURE__*/React.createElement(IconClose, null)));
   });
-};
+});
 export default Header;

package/lib/es/image/previewImage.d.ts

@@ -8,9 +8,6 @@ export default class PreviewImage extends BaseComponent<PreviewImageProps, Previ
         src: PropTypes.Requireable<string>;
         rotation: PropTypes.Requireable<number>;
         style: PropTypes.Requireable<object>;
-        maxZoom: PropTypes.Requireable<number>;
-        minZoom: PropTypes.Requireable<number>;
-        zoomStep: PropTypes.Requireable<number>;
         zoom: PropTypes.Requireable<number>;
         ratio: PropTypes.Requireable<string>;
         disableDownload: PropTypes.Requireable<boolean>;
@@ -21,29 +18,21 @@ export default class PreviewImage extends BaseComponent<PreviewImageProps, Previ
         onError: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: {
-        maxZoom: number;
-        minZoom: number;
-        zoomStep: number;
         zoom: any;
     };
     get adapter(): PreviewImageAdapter<PreviewImageProps, PreviewImageStates>;
     containerRef: React.RefObject<HTMLDivElement>;
-    imageRef: HTMLImageElement | null;
+    imageRef: React.RefObject<HTMLImageElement>;
     foundation: PreviewImageFoundation;
     constructor(props: any);
     componentDidMount(): void;
     componentWillUnmount(): void;
     componentDidUpdate(prevProps: PreviewImageProps, prevStates: PreviewImageStates): void;
     onWindowResize: () => void;
-    handleZoomChange: (newZoom: any, e: any) => void;
     handleRightClickImage: (e: any) => void;
-    handleWheel: (e: any) => void;
     handleLoad: (e: any) => void;
     handleError: (e: any) => void;
-    resizeImage: () => void;
     handleMoveImage: (e: any) => void;
-    registryImageRef: (ref: any) => void;
     onImageMouseDown: (e: React.MouseEvent<HTMLImageElement>) => void;
-    onImageMouseUp: () => void;
     render(): JSX.Element;
 }