diff --git a/src/index.tsx b/src/index.tsx index 9f88503..c4a5bd5 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -6,6 +6,7 @@ import { ImageUploadingPropsType, ErrorsType, ResolutionType, + ImageUploadingRef } from "./typings"; const { useRef, useState, useCallback } = React; @@ -17,19 +18,22 @@ const defaultErrors: ErrorsType = { resolution: false, }; -const ImageUploading: React.FC = ({ - multiple, +const ImageUploading: React.RefForwardingComponent< +ImageUploadingRef, +ImageUploadingPropsType +> = ({ onChange, - maxNumber, children, defaultValue, - acceptType, maxFileSize, resolutionWidth, resolutionHeight, resolutionType, onError, -}) => { + maxNumber = 1000, + multiple = false, + acceptType = [], +}, ref) => { const inputRef = useRef(null); const [imageList, setImageList] = useState(() => { let initImageList: Array = []; @@ -204,6 +208,13 @@ const ImageUploading: React.FC = ({ if (inputRef.current) inputRef.current.value = ""; }; + React.useImperativeHandle(ref, () => ({ + imageList, + onImageUpload, + onImageRemoveAll, + errors + })); + const acceptString = acceptType && acceptType.length > 0 ? acceptType.map((item) => `.${item}`).join(", ") @@ -230,13 +241,7 @@ const ImageUploading: React.FC = ({ ); }; -ImageUploading.defaultProps = { - maxNumber: 1000, - multiple: false, - acceptType: [], -}; - -export default ImageUploading; +export default React.forwardRef(ImageUploading); export { ImageType, @@ -244,4 +249,5 @@ export { ImageUploadingPropsType, ErrorsType, ResolutionType, + ImageUploadingRef }; diff --git a/src/typings.ts b/src/typings.ts index 2dfddfa..9b1fe6e 100644 --- a/src/typings.ts +++ b/src/typings.ts @@ -29,6 +29,8 @@ export interface ExportInterface { errors: Record; } +export type ImageUploadingRef = ExportInterface + export type ErrorsType = { maxFileSize: boolean; maxNumber: boolean;