@para-ui/core 2.2.5-beta → 2.2.7

package/Upload/index.d.ts

@@ -1,180 +1,9 @@
-import React__default, { ReactNode, FunctionComponent, FC } from 'react';
-import { Action, UploadRequestMethod, UploadRequestHeader, BeforeUploadFileType, UploadRequestOption, RcFile as RcFile$1 } from 'rc-upload/lib/interface';
-import styleInject from './node_modules/style-inject/dist/style-inject.es.js';
-import { CropperProps } from 'react-easy-crop';
-
-declare type UploadType = 'drag' | 'select';
-
-interface RcFile extends RcFile$1 {
-    readonly lastModifiedDate: Date;
-}
-interface UploadFile<T = any> {
-    /** uid */
-    uid: string;
-    /** file name */
-    name: string;
-    /** file mime type */
-    type?: string;
-    /** file size */
-    size?: number;
-    /** file 时间戳 */
-    lastModified?: number;
-    /** file 日期 */
-    lastModifiedDate?: Date;
-    /** file 默认显示url */
-    url?: string;
-    /** file 上传时 dataUrl */
-    dataUrl?: string;
-    /** 原始文件 */
-    originFileObj?: RcFile;
-}
-interface IShowUploadList {
-    /** 是否显示删除图标 */
-    showRemoveIcon?: boolean;
-    /** 删除图标 */
-    removeIcon?: React__default.ReactNode;
-}
-declare type ItemRender<T = any> = (file: UploadFile, fileList?: Array<UploadFile<T>>) => React__default.ReactNode;
-interface UploadProps<T = any> {
-    /**上传类型*/
-    type?: UploadType;
-    /**发到后台的文件参数名*/
-    name?: string;
-    /**样式*/
-    style?: React__default.CSSProperties;
-    /**cls*/
-    className?: string;
-    /**禁用*/
-    disabled?: boolean;
-    /**控件默认span*/
-    component?: React__default.JSXElementConstructor<any>;
-    /**上传地址*/
-    action?: Action;
-    /**http method*/
-    method?: UploadRequestMethod;
-    /**文件夹上传*/
-    directory?: boolean;
-    /**上传所需额外参数或返回上传额外参数的方法*/
-    data?: object | ((file: RcFile | string | Blob) => object);
-    /**设置上传的请求头部，IE10 以上有效*/
-    headers?: UploadRequestHeader;
-    /**接受上传的文件类型*/
-    accept?: string;
-    /**是否支持多选文件,开启后按住 ctrl 可选择多个文件*/
-    multiple?: boolean;
-    /**上传文件改变时的状态*/
-    onChange?: (info: UploadFile[]) => void;
-    /**上传开始*/
-    onStart?: (file: RcFile) => void;
-    /**上传错误*/
-    onError?: (error: Error, ret?: object, file?: RcFile) => void;
-    /**上传成功*/
-    onSuccess?: (response: object, file: RcFile, xhr?: object) => void;
-    /**上传进度*/
-    onProgress?: (event: {
-        percent: number;
-    }, file?: RcFile) => void;
-    /**上传之前*/
-    beforeUpload?: (file: RcFile, FileList?: RcFile[]) => BeforeUploadFileType | Promise<void | BeforeUploadFileType>;
-    /**通过覆盖默认的上传行为，可以自定义自己的上传实现*/
-    customRequest?: (option: UploadRequestOption) => void;
-    /**上传请求时是否携带 cookie*/
-    withCredentials?: boolean;
-    /**点击打开弹框*/
-    openFileDialogOnClick?: boolean;
-    /**点击移除文件时的回调*/
-    onRemove?: (file: UploadFile<T>) => void | boolean | Promise<void | boolean>;
-    /**默认已上传的文件列表*/
-    defaultFileList?: Array<UploadFile<T>>;
-    /**已经上传的文件列表（受控）*/
-    fileList?: Array<UploadFile<T>>;
-    /**限制上传数量*/
-    maxCount?: number;
-    /**是否展示文件列表*/
-    showUploadList?: boolean | IShowUploadList;
-    /**子节点*/
-    children?: React__default.ReactNode;
-    /**自定义上传列表项*/
-    itemRender?: ItemRender<T>;
-    /**是否显示错误提示 leaveDelay 负数为不自动关闭*/
-    showUploadError?: boolean | {
-        uploadErrorMsg?: string;
-        leaveDelay?: number;
-    };
-    /**大小*/
-    size?: 'small' | 'medium' | 'large';
-    /** 开启暂存文件，beforeUpload 需返回 false 停止上传 */
-    stash?: boolean;
-    /** 是否显示上传loading*/
-    showLoading?: boolean;
-    /** 是否显示上传loading，后期删除*/
-    uploading?: boolean;
-    /** 当文件被拖入上传区域时执行的回调功能 */
-    onDrop?: (event: React__default.DragEvent) => void;
-    /** 拖拽上传时 拖拽区域元素 */
-    dragArea?: {
-        /** 图标 */
-        areaIcon?: ReactNode;
-        /** 文本 */
-        areaText?: ReactNode;
-        /** 描述 */
-        areaDesc?: ReactNode;
-    };
-}
-
-var css_248z$2 = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/11 下午7:31\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-upload-image {\n  display: inline-flex;\n  align-items: center;\n}\n.paraui-upload-image-select {\n  position: relative;\n  width: 100px;\n  height: 100px;\n  background-color: rgba(171, 176, 185, 0.12);\n  border-radius: 4px;\n  cursor: pointer;\n  transition: 0.3s;\n}\n.paraui-upload-image-select--loading {\n  pointer-events: none;\n}\n.paraui-upload-image-select .rc-upload {\n  display: inline-block;\n  width: 100%;\n  height: 100%;\n}\n.paraui-upload-image-select:hover {\n  background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-upload-image-select:hover .paraui-upload-image-picture-card {\n  color: rgb(54, 102, 214);\n}\n.paraui-upload-image-picture-card {\n  display: inline-flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  justify-content: center;\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n}\n.paraui-upload-image-picture-card .paraui-upload-img-wrapper {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  cursor: default;\n}\n.paraui-upload-image-picture-card .paraui-upload-img-wrapper img {\n  width: 100%;\n  height: 100%;\n  border-radius: 4px;\n}\n.paraui-upload-image-picture-card .paraui-upload-img-wrapper::before {\n  content: \" \";\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  background-color: rgba(46, 55, 67, 0.7);\n  border-radius: 4px;\n  opacity: 0;\n  transition: 0.3s;\n}\n.paraui-upload-image-picture-card .paraui-upload-img-wrapper-name {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  padding: 0 10px;\n  font-size: 12px;\n  line-height: 24px;\n  text-align: center;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  background-color: rgba(46, 55, 67, 0.7);\n  border-radius: 0 0 4px 4px;\n  color: rgb(255, 255, 255);\n  transition: 0.3s;\n}\n.paraui-upload-image-picture-card .paraui-upload-img-wrapper-action {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  opacity: 0;\n  line-height: 0;\n  cursor: pointer;\n  transition: 0.3s;\n}\n.paraui-upload-image-picture-card .paraui-upload-img-wrapper-action svg {\n  color: rgb(255, 255, 255);\n}\n.paraui-upload-image-picture-card .paraui-upload-img-wrapper:hover::before {\n  opacity: 1;\n}\n.paraui-upload-image-picture-card .paraui-upload-img-wrapper:hover .paraui-upload-img-wrapper-name {\n  opacity: 0;\n}\n.paraui-upload-image-picture-card .paraui-upload-img-wrapper:hover .paraui-upload-img-wrapper-action {\n  opacity: 1;\n}\n.paraui-upload-image-picture-card .paraui-upload-image-icon {\n  color: rgb(54, 102, 214);\n  font-size: 30px;\n}\n.paraui-upload-image-picture-card .paraui-upload-image-loading {\n  color: rgb(54, 102, 214);\n  font-size: 30px;\n  animation: loadingCircle 1s infinite linear;\n}\n.paraui-upload-image-picture-card .paraui-upload-image-text {\n  margin-top: 6px;\n  color: inherit;\n  transition: 0.3s;\n}\n.paraui-upload-image-picture-card .paraui-upload-image-text--loading {\n  color: rgb(54, 102, 214);\n}\n@keyframes loadingCircle {\n  100% {\n    transform: rotate(360deg);\n  }\n}";
-styleInject(css_248z$2);
-
-declare type ImageUploadProps = Omit<UploadProps, 'type'> & {
-    /** 默认图片 showUploadList为false时有效 */
-    defaultImage?: {
-        /** 图片地址 */
-        imageUrl: string;
-        /** 图片名称 */
-        imageName?: string;
-    };
-};
-declare const ImageUpload: FunctionComponent<ImageUploadProps>;
-
-/**
- * @author Hanz
- * @date 2021/11/15 下午2:12
- * @description
- */
-
-declare type DraggerProps = Omit<UploadProps, 'type'>;
-declare const Dragger: FunctionComponent<DraggerProps>;
-
-interface ImgCropProps {
-    aspect?: number;
-    shape?: 'rect' | 'round';
-    grid?: boolean;
-    quality?: number;
-    fillColor?: string;
-    zoom?: boolean;
-    rotate?: boolean;
-    minZoom?: number;
-    maxZoom?: number;
-    modalTitle?: React.ReactNode;
-    modalWidth?: number | string;
-    modalOk?: string;
-    modalCancel?: string;
-    onModalOk?: (file: void | boolean | string | Blob | File) => void;
-    onModalCancel?: () => void;
-    beforeCrop?: (file: File, fileList: File[]) => boolean | Promise<boolean>;
-    onUploadFail?: (err: Error) => void;
-    cropperProps?: Partial<CropperProps>;
-    children: JSX.Element;
-}
-
-var css_248z$1 = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/4/20 下午4:44\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-img-crop-modal .paraui-img-crop-container {\n  position: relative;\n  width: 100%;\n  height: 40vh;\n}\n.paraui-img-crop-modal .paraui-img-crop-control {\n  display: flex;\n  align-items: center;\n  width: 60%;\n  margin-left: auto;\n  margin-right: auto;\n}\n.paraui-img-crop-modal .paraui-img-crop-control:first-of-type {\n  margin-top: 16px;\n}\n.paraui-img-crop-modal .paraui-img-crop-control:last-of-type {\n  margin-bottom: -8px;\n}\n.paraui-img-crop-modal .paraui-img-crop-control button {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 34px;\n  height: 34px;\n  padding: 0;\n  font-style: normal;\n  background: transparent;\n  border: 0;\n  outline: 0;\n  cursor: pointer;\n}\n.paraui-img-crop-modal .paraui-img-crop-control button[disabled] {\n  cursor: default;\n}\n.paraui-img-crop-modal .paraui-img-crop-control button + div:only-of-type {\n  flex: 1;\n  margin: 0 8px;\n}\n.paraui-img-crop-modal .paraui-img-crop-control-zoom button {\n  font-size: 18px;\n}\n.paraui-img-crop-modal .paraui-img-crop-control-rotate button {\n  font-size: 16px;\n}\n.paraui-img-crop-modal .paraui-img-crop-control-rotate button:first-of-type {\n  transform: rotate(-20deg);\n}\n.paraui-img-crop-modal .paraui-img-crop-control-rotate button:last-of-type {\n  transform: rotate(20deg);\n}";
-styleInject(css_248z$1);
-
-declare const ImgCrop: FC<ImgCropProps>;
-
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/11 下午1:40\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-upload .rc-upload {\n  position: relative;\n  display: inline-block;\n}\n.paraui-upload--loading {\n  pointer-events: none;\n}\n.paraui-upload .paraui-button {\n  color: rgb(54, 102, 214);\n  border-color: rgb(54, 102, 214);\n}\n.paraui-upload .paraui-button:hover {\n  border-color: rgba(54, 102, 214, 0.8);\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-upload .paraui-button--loading .start-icon {\n  animation: loadingCircle 1s infinite linear;\n}\n@keyframes loadingCircle {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.paraui-upload-drag {\n  position: relative;\n}\n.paraui-upload-drag .rc-upload {\n  display: block;\n}\n.paraui-upload-drag--loading {\n  pointer-events: none;\n}\n.paraui-upload-drag--hover .paraui-upload-drag-container {\n  border-color: rgba(54, 102, 214, 0.4);\n  background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-upload-drag-container {\n  display: inline-flex;\n  width: 100%;\n  max-width: 960px;\n  height: 220px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  font-size: 14px;\n  line-height: 1;\n  border: 2px dashed rgba(171, 176, 185, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border-radius: 4px;\n  cursor: pointer;\n  transition: 0.3s;\n}\n.paraui-upload-drag-container:hover {\n  border-color: rgba(54, 102, 214, 0.4);\n  background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-upload-drag-container .paraui-upload-drag-icon {\n  line-height: 0;\n}\n.paraui-upload-drag-container .paraui-upload-drag-icon svg {\n  font-size: 48px;\n  color: rgb(54, 102, 214);\n}\n.paraui-upload-drag-container .paraui-upload-drag-icon .paraui-upload-drag-loading {\n  animation: loadingCircle 1s infinite linear;\n}\n.paraui-upload-drag-container .paraui-upload-drag-text {\n  margin: 20px 0 12px 0;\n  color: rgb(46, 55, 67);\n}\n.paraui-upload-drag-container .paraui-upload-drag-text--loading {\n  color: rgb(54, 102, 214);\n}\n.paraui-upload-drag-container .paraui-upload-drag-text-filename {\n  margin-right: 5px;\n  color: rgb(46, 55, 67);\n}\n.paraui-upload-drag-container .paraui-upload-drag-hint {\n  color: rgba(46, 55, 67, 0.7);\n  padding: 0 20px;\n  text-align: center;\n}\n@keyframes loadingCircle {\n  100% {\n    transform: rotate(360deg);\n  }\n}";
-styleInject(css_248z);
-
+import { FunctionComponent } from 'react';
+import { UploadProps } from './interface';
+import ImageUpload, { ImageUploadProps } from './ImageUpload';
+import Dragger, { DraggerProps } from "./Dragger";
+import ImgCrop, { ImgCropProps } from "./ImgCrop";
+import './index.scss';
 declare const InternalUpload: FunctionComponent<UploadProps>;
 declare type MergedUploadType = typeof InternalUpload & {
     ImageUpload: typeof ImageUpload;
@@ -182,5 +11,5 @@ declare type MergedUploadType = typeof InternalUpload & {
     ImgCrop: typeof ImgCrop;
 };
 declare const Upload: MergedUploadType;
-
-export { DraggerProps, ImageUploadProps, ImgCropProps, UploadProps, Upload as default };
+export type { UploadProps, ImageUploadProps, DraggerProps, ImgCropProps };
+export default Upload;