plain-design 1.0.0-beta.4 → 1.0.0-beta.6

package/src/packages/components/ImageUploader/index.tsx

@@ -1,224 +1,224 @@
-import {computed, designComponent, getComponentCls, PropType, reactive, useClasses, useModel, useRefs, useStyles, watch} from "plain-design-composition";
-import {unit} from "plain-utils/string/unit";
-import {deepcopy} from "plain-utils/object/deepcopy";
-import {defer} from "plain-utils/utils/defer";
-import {Image, ImagePropsOptions} from "../Image";
-import {$image} from "../$image";
-import {Icon} from "../Icon";
-import {PlainObject} from "plain-utils/utils/event";
-import {createEnum} from "plain-utils/utils/createEnum";
-import {EditProps, useEdit} from "../../uses/useEdit";
-import {$file, FileServiceDefaultAccept, FileServiceUploadConfig} from "../$file";
-import $configuration from "../$configuration";
-import {iUploadService} from "../$upload/createUploadService";
-import i18n from "../i18n";
-
-/**
- * ImageUploader的状态
- * empty          当前无图片
- * pending        加载中
- * success        图片加载成功或者上传成功
- * error          图片加载失败
- * fail           图片上传失败
- * upload         图片加载中
- * @author  韦胜健
- * @date    2022.10.5 15:42
- */
-export const eImageUploaderStatus = createEnum(["empty", "pending", "success", "error", "fail", "upload",] as const);
-
-export const ImageUploader = designComponent({
-  name: 'image-uploader',
-  props: {
-    ...EditProps,
-    ...ImagePropsOptions,
-    modelValue: { type: String },                                                             // 图片路径
-    width: { type: [String, Number], default: '80px' },                                       // 图片宽度
-    height: { type: [String, Number], default: '80px' },                                      // 图片高度
-    accept: { type: String, default: FileServiceDefaultAccept.image },                        // 选择文件的时候，图片类型
-    uploadConfig: { type: Object as PropType<Omit<FileServiceUploadConfig, 'file'>> },        // 上传配置信息对象
-    previewImage: { type: String },                                                           // 预览的时候显示的图片
-    handleDelete: { type: Function as PropType<() => void | Promise<void>> },                 // 自定义删除图片逻辑
-    handleUpload: { type: Function as PropType<(file: File) => void | Promise<void>> },       // 自定义上传图片逻辑
-    handlePreview: { type: Function as PropType<(url?: string) => void> },                    // 自定义预览逻辑
-    urlPrefix: { type: String },
-    service: { type: Object as PropType<iUploadService> },
-  },
-  inheritPropsType: HTMLDivElement,
-  emits: {
-    onUpdateModelValue: (val?: string) => true,
-    onLoadSuccess: (url: string) => true,
-    onLoadError: (e: string | Event) => true,
-    onUploadSuccess: (resp: PlainObject | string) => true,
-    onUploadProgress: (percent: number, e: ProgressEvent) => true,
-    onUploadFail: (e: any) => true,
-  },
-  setup({ props, event: { emit } }) {
-
-    const upload = props.service || $configuration.use('upload');
-
-    const urlPrefix = computed(() => props.urlPrefix || upload?.config.prefix);
-
-    const { refs, onRef } = useRefs({ el: HTMLDivElement });
-    const model = useModel(() => props.modelValue, emit.onUpdateModelValue, { autoWatch: false });
-
-    const { editComputed } = useEdit();
-
-    const state = reactive({
-      status: eImageUploaderStatus.empty as typeof eImageUploaderStatus.TYPE,
-      percent: null as null | number,
-      chooseBase64: undefined as string | undefined,
-    });
-
-    watch(() => props.modelValue, val => {
-      model.value = Image.formatImagePath(val, urlPrefix.value);
-      state.chooseBase64 = undefined;
-      if (!model.value) {
-        return state.status = eImageUploaderStatus.empty;
-      }
-      state.status = eImageUploaderStatus.pending;
-      const image = new window.Image();
-      image.onload = () => {
-        state.status = eImageUploaderStatus.success;
-        emit.onLoadSuccess(model.value!);
-      };
-      image.onerror = (e) => {
-        state.status = eImageUploaderStatus.error;
-        emit.onLoadError(e);
-      };
-      image.src = model.value;
-    }, { immediate: true });
-
-    const classes = useClasses(() => [
-      getComponentCls('image-uploader'),
-      `image-uploader-status-${state.status}`,
-      {
-        'image-disabled': editComputed.value.disabled,
-        'image-editable': editComputed.value.editable,
-      }
-    ]);
-
-    const styles = useStyles(style => {
-      if (!!props.height) {style.height = unit(props.height);}
-      if (!!props.width) {style.width = unit(props.width);}
-    });
-
-    const methods = {
-      choose: async () => {
-        const dfd = defer<void | string | Record<string, string>>();
-        const file = await $file.chooseImage() as File;
-        state.chooseBase64 = await $file.readAsDataURL(file) as string;
-
-        if (!!props.handleUpload) {
-          await props.handleUpload(file);
-          dfd.resolve();
-        } else if (!!props.uploadConfig || !!upload) {
-          const config = deepcopy(props.uploadConfig);
-          state.status = eImageUploaderStatus.upload;
-          const publicUploadConfig: Omit<FileServiceUploadConfig, 'action' | 'filename'> = {
-            file,
-            onProgress: (percent, e) => {
-              if (!!config?.onProgress) config.onProgress(percent, e);
-              console.log('percent', percent);
-              state.percent = percent;
-              emit.onUploadProgress(percent, e);
-            },
-            onSuccess: (resp) => {
-              if (!!config?.onSuccess) config.onSuccess(resp);
-              console.log('upload success, resp:', resp);
-              model.value = String(state.chooseBase64);
-              state.chooseBase64 = undefined;
-              state.status = eImageUploaderStatus.success;
-              emit.onUploadSuccess(resp);
-              dfd.resolve(resp);
-            },
-            onError: (e) => {
-              if (!!config?.onError) config.onError(e);
-              console.log('upload fail, e:', e);
-              state.status = eImageUploaderStatus.fail;
-              emit.onUploadFail(e);
-              dfd.reject(e);
-            },
-          };
-
-          if (!!config) {
-            (upload?.upload || $file.upload)({ ...publicUploadConfig, ...config });
-          } else {
-            if (!!upload) {
-              upload.upload(publicUploadConfig);
-            }
-          }
-        } else {
-          dfd.reject('image-uploader: no props.uploadConfig and props.handleUpload, do nothing');
-        }
-
-        return dfd.promise;
-      },
-    };
-
-    const handler = {
-      onClick: async () => {
-        if (!editComputed.value.editable) return;
-        await methods.choose();
-      },
-      onClickImage: async () => {
-        if (state.status === eImageUploaderStatus.error) {
-          return await handler.onClick();
-        }
-        const url = Image.formatImagePath(props.previewImage! || model.value! || state.chooseBase64!, urlPrefix.value);
-        if (!!props.handlePreview) {
-          return props.handlePreview(url);
-        } else {
-          !!url && $image.preview(url);
-        }
-      },
-      onClickDelete: async () => {
-        if (!!props.handleDelete) {
-          await props.handleDelete();
-        }
-        model.value = undefined;
-        state.chooseBase64 = undefined;
-      },
-    };
-
-    return {
-      refer: {
-        refs,
-      },
-      render: () => (
-        <div className={classes.value} style={styles.value} ref={onRef.el}>
-          {(!!model.value || !!state.chooseBase64) && (
-            <Image
-              src={model.value || state.chooseBase64}
-              fit={props.fit}
-              alt={props.alt}
-              position={props.position}
-              previewOnClick={false}
-              height={props.height}
-              width={props.width}
-              urlPrefix={urlPrefix.value}
-              onClick={handler.onClickImage}
-            />
-          )}
-          {state.status === eImageUploaderStatus.empty && <div className="image-uploader-empty" onClick={handler.onClick}>
-            <Icon icon="pi-image"/>
-            <span>{i18n('file.toBeUpload').d('待上传')}</span>
-          </div>}
-          {state.status === eImageUploaderStatus.fail && <div className="image-uploader-fail" onClick={handler.onClick}>
-            <Icon icon="pi-image-close"/>
-            <span>{i18n('file.uploadFailed').d('上传失败')}</span>
-          </div>}
-          <div className="image-uploader-button-group">
-            <div className="image-uploader-button" onClick={handler.onClick}>
-              <Icon icon="pi-upload"/>
-            </div>
-            <div className="image-uploader-button" onClick={handler.onClickDelete}>
-              <Icon icon="pi-close"/>
-            </div>
-          </div>
-        </div>
-      )
-    };
-  },
-});
-
-export default ImageUploader;
+import {computed, designComponent, getComponentCls, PropType, reactive, useClasses, useModel, useRefs, useStyles, watch} from "plain-design-composition";
+import {unit} from "plain-utils/string/unit";
+import {deepcopy} from "plain-utils/object/deepcopy";
+import {defer} from "plain-utils/utils/defer";
+import {Image, ImagePropsOptions} from "../Image";
+import {$image} from "../$image";
+import {Icon} from "../Icon";
+import {PlainObject} from "plain-utils/utils/event";
+import {createEnum} from "plain-utils/utils/createEnum";
+import {EditProps, useEdit} from "../../uses/useEdit";
+import {$file, FileServiceDefaultAccept, FileServiceUploadConfig} from "../$file";
+import $configuration from "../$configuration";
+import {iUploadService} from "../$upload/createUploadService";
+import i18n from "../i18n";
+
+/**
+ * ImageUploader的状态
+ * empty          当前无图片
+ * pending        加载中
+ * success        图片加载成功或者上传成功
+ * error          图片加载失败
+ * fail           图片上传失败
+ * upload         图片加载中
+ * @author  韦胜健
+ * @date    2022.10.5 15:42
+ */
+export const eImageUploaderStatus = createEnum(["empty", "pending", "success", "error", "fail", "upload",] as const);
+
+export const ImageUploader = designComponent({
+  name: 'image-uploader',
+  props: {
+    ...EditProps,
+    ...ImagePropsOptions,
+    modelValue: { type: String },                                                             // 图片路径
+    width: { type: [String, Number], default: '80px' },                                       // 图片宽度
+    height: { type: [String, Number], default: '80px' },                                      // 图片高度
+    accept: { type: String, default: FileServiceDefaultAccept.image },                        // 选择文件的时候，图片类型
+    uploadConfig: { type: Object as PropType<Omit<FileServiceUploadConfig, 'file'>> },        // 上传配置信息对象
+    previewImage: { type: String },                                                           // 预览的时候显示的图片
+    handleDelete: { type: Function as PropType<() => void | Promise<void>> },                 // 自定义删除图片逻辑
+    handleUpload: { type: Function as PropType<(file: File) => void | Promise<void>> },       // 自定义上传图片逻辑
+    handlePreview: { type: Function as PropType<(url?: string) => void> },                    // 自定义预览逻辑
+    urlPrefix: { type: String },
+    service: { type: Object as PropType<iUploadService> },
+  },
+  inheritPropsType: HTMLDivElement,
+  emits: {
+    onUpdateModelValue: (val?: string) => true,
+    onLoadSuccess: (url: string) => true,
+    onLoadError: (e: string | Event) => true,
+    onUploadSuccess: (resp: PlainObject | string) => true,
+    onUploadProgress: (percent: number, e: ProgressEvent) => true,
+    onUploadFail: (e: any) => true,
+  },
+  setup({ props, event: { emit } }) {
+
+    const upload = props.service || $configuration.use('upload');
+
+    const urlPrefix = computed(() => props.urlPrefix || upload?.config.prefix);
+
+    const { refs, onRef } = useRefs({ el: HTMLDivElement });
+    const model = useModel(() => props.modelValue, emit.onUpdateModelValue, { autoWatch: false });
+
+    const { editComputed } = useEdit();
+
+    const state = reactive({
+      status: eImageUploaderStatus.empty as typeof eImageUploaderStatus.TYPE,
+      percent: null as null | number,
+      chooseBase64: undefined as string | undefined,
+    });
+
+    watch(() => props.modelValue, val => {
+      model.value = Image.formatImagePath(val, urlPrefix.value);
+      state.chooseBase64 = undefined;
+      if (!model.value) {
+        return state.status = eImageUploaderStatus.empty;
+      }
+      state.status = eImageUploaderStatus.pending;
+      const image = new window.Image();
+      image.onload = () => {
+        state.status = eImageUploaderStatus.success;
+        emit.onLoadSuccess(model.value!);
+      };
+      image.onerror = (e) => {
+        state.status = eImageUploaderStatus.error;
+        emit.onLoadError(e);
+      };
+      image.src = model.value;
+    }, { immediate: true });
+
+    const classes = useClasses(() => [
+      getComponentCls('image-uploader'),
+      `image-uploader-status-${state.status}`,
+      {
+        'image-disabled': editComputed.value.disabled,
+        'image-editable': editComputed.value.editable,
+      }
+    ]);
+
+    const styles = useStyles(style => {
+      if (!!props.height) {style.height = unit(props.height);}
+      if (!!props.width) {style.width = unit(props.width);}
+    });
+
+    const methods = {
+      choose: async () => {
+        const dfd = defer<void | string | Record<string, string>>();
+        const file = await $file.chooseImage() as File;
+        state.chooseBase64 = await $file.readAsDataURL(file) as string;
+
+        if (!!props.handleUpload) {
+          await props.handleUpload(file);
+          dfd.resolve();
+        } else if (!!props.uploadConfig || !!upload) {
+          const config = deepcopy(props.uploadConfig);
+          state.status = eImageUploaderStatus.upload;
+          const publicUploadConfig: Omit<FileServiceUploadConfig, 'action' | 'filename'> = {
+            file,
+            onProgress: (percent, e) => {
+              if (!!config?.onProgress) config.onProgress(percent, e);
+              console.log('percent', percent);
+              state.percent = percent;
+              emit.onUploadProgress(percent, e);
+            },
+            onSuccess: (resp) => {
+              if (!!config?.onSuccess) config.onSuccess(resp);
+              console.log('upload success, resp:', resp);
+              model.value = String(state.chooseBase64);
+              state.chooseBase64 = undefined;
+              state.status = eImageUploaderStatus.success;
+              emit.onUploadSuccess(resp);
+              dfd.resolve(resp);
+            },
+            onError: (e) => {
+              if (!!config?.onError) config.onError(e);
+              console.log('upload fail, e:', e);
+              state.status = eImageUploaderStatus.fail;
+              emit.onUploadFail(e);
+              dfd.reject(e);
+            },
+          };
+
+          if (!!config) {
+            (upload?.upload || $file.upload)({ ...publicUploadConfig, ...config });
+          } else {
+            if (!!upload) {
+              upload.upload(publicUploadConfig);
+            }
+          }
+        } else {
+          dfd.reject('image-uploader: no props.uploadConfig and props.handleUpload, do nothing');
+        }
+
+        return dfd.promise;
+      },
+    };
+
+    const handler = {
+      onClick: async () => {
+        if (!editComputed.value.editable) return;
+        await methods.choose();
+      },
+      onClickImage: async () => {
+        if (state.status === eImageUploaderStatus.error) {
+          return await handler.onClick();
+        }
+        const url = Image.formatImagePath(props.previewImage! || model.value! || state.chooseBase64!, urlPrefix.value);
+        if (!!props.handlePreview) {
+          return props.handlePreview(url);
+        } else {
+          !!url && $image.preview(url);
+        }
+      },
+      onClickDelete: async () => {
+        if (!!props.handleDelete) {
+          await props.handleDelete();
+        }
+        model.value = undefined;
+        state.chooseBase64 = undefined;
+      },
+    };
+
+    return {
+      refer: {
+        refs,
+      },
+      render: () => (
+        <div className={classes.value} style={styles.value} ref={onRef.el}>
+          {(!!model.value || !!state.chooseBase64) && (
+            <Image
+              src={model.value || state.chooseBase64}
+              fit={props.fit}
+              alt={props.alt}
+              position={props.position}
+              previewOnClick={false}
+              height={props.height}
+              width={props.width}
+              urlPrefix={urlPrefix.value}
+              onClick={handler.onClickImage}
+            />
+          )}
+          {state.status === eImageUploaderStatus.empty && <div className="image-uploader-empty" onClick={handler.onClick}>
+            <Icon icon="pi-image"/>
+            <span>{i18n('file.toBeUpload').d('待上传')}</span>
+          </div>}
+          {state.status === eImageUploaderStatus.fail && <div className="image-uploader-fail" onClick={handler.onClick}>
+            <Icon icon="pi-image-close"/>
+            <span>{i18n('file.uploadFailed').d('上传失败')}</span>
+          </div>}
+          <div className="image-uploader-button-group">
+            <div className="image-uploader-button" onClick={handler.onClick}>
+              <Icon icon="pi-upload"/>
+            </div>
+            <div className="image-uploader-button" onClick={handler.onClickDelete}>
+              <Icon icon="pi-close"/>
+            </div>
+          </div>
+        </div>
+      )
+    };
+  },
+});
+
+export default ImageUploader;