plain-design 1.0.0-beta.145 → 1.0.0-beta.147

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

@@ -1,168 +1,168 @@
-import {computed, designComponent, getComponentCls, iMouseEvent, PropType, reactive, useClasses, useRefs, useStyles, watch} from '@peryl/react-compose';
-import './image.scss';
-import {unit} from "@peryl/utils/unit";
-import {createEnum} from "@peryl/utils/createEnum";
-import {Icon} from "../Icon";
-import {LoadingMask} from "../LoadingMask";
-import i18n from "../i18n";
-import {$previewer} from "../$previewer";
-
-/**
- * 图片填充类型
- * @author  韦胜健
- * @date    2022.10.5 14:32
- */
-export const eImageFit = createEnum(['fill', 'contain', 'cover', 'none', 'scale-down'] as const);
-
-/**
- * 图片状态
- * @author  韦胜健
- * @date    2022.10.5 14:32
- */
-export const eImageStatus = createEnum(['success', 'error', 'pending', 'empty'] as const);
-
-/**
- * 图片的属性
- * @author  韦胜健
- * @date    2022.10.5 14:32
- */
-export const ImagePropsOptions = {
-  alt: { type: String },                                                        // 图片描述
-  fit: { type: String as PropType<typeof eImageFit.TYPE>, default: eImageFit.cover },// 图片 object-fit 属性
-  position: { type: String, default: 'top center' },                            // 图片 object-position 属性
-  maxHeight: { type: [String, Number] },                                        // 最大高度
-  minHeight: { type: [String, Number] },                                        // 最小高度
-  maxWidth: { type: [String, Number] },                                         // 最大宽度
-  minWidth: { type: [String, Number] },                                         // 最小宽度
-  width: { type: [String, Number] },                                            // 图片宽度
-  height: { type: [String, Number] },                                           // 图片高度
-  hideTips: { type: Boolean },                                                  // 隐藏提示文本
-  urlPrefix: { type: String },                                                  // 图片地址前缀
-};
-
-/**
- * 格式化图片路径
- * @author  韦胜健
- * @date    2022.10.5 14:33
- */
-export const formatImagePath = (() => {
-  const PathPattern = /^(https?|data:image)/;
-  return (url: string | null | undefined, urlPrefix?: string) => {
-    if (!url) {return '';}
-    if (!urlPrefix) {return url;}
-    if (url == null) {return url;}
-    if (PathPattern.test(url)) {return url;}
-    urlPrefix = urlPrefix[urlPrefix.length - 1] === '/' ? urlPrefix.slice(0, -1) : urlPrefix;
-    const imgUrl = url[0] === '/' ? url.slice(1) : url;
-    return [urlPrefix, imgUrl].join('/');
-  };
-})();
-
-export const Image = designComponent({
-  name: '-image',
-  expose: {
-    formatImagePath,
-  },
-  props: {
-    src: { type: String as PropType<string | null> },                           // 图片地址
-    status: { type: String as PropType<typeof eImageStatus.TYPE> },             // 当前状态
-    previewOnClick: { type: Boolean, default: true },                           // 是否点击的时候放大预览图片
-    ...ImagePropsOptions,
-  },
-  emits: {
-    onClick: (e: iMouseEvent) => true,
-    onSuccess: (val: string) => true,
-    onError: (e: string | Event) => true,
-  },
-  setup({ props, event: { emit } }) {
-
-    const { refs, onRef } = useRefs({
-      el: HTMLDivElement,
-      img: HTMLImageElement,
-    });
-
-    const state = reactive({
-      src: undefined as string | undefined | null,
-      status: eImageStatus.empty as typeof eImageStatus.TYPE,
-    });
-
-    const status = computed(() => props.status == null ? state.status : props.status);
-
-    watch(() => props.src, val => {
-      state.src = formatImagePath(val, props.urlPrefix);
-      if (!val) {
-        return state.status = eImageStatus.empty;
-      }
-      state.status = eImageStatus.pending;
-      const image = new window.Image();
-      image.onload = () => {
-        state.status = eImageStatus.success;
-        emit.onSuccess(state.src!);
-      };
-      image.onerror = (e) => {
-        console.error(`load image error: ${image.src}`, e, props.urlPrefix);
-        state.status = eImageStatus.error;
-        emit.onError(e);
-      };
-      image.src = state.src;
-    }, { immediate: true });
-
-    const classes = useClasses(() => [
-      getComponentCls('image'),
-      `image-status-${status.value}`,
-      {
-        'image-preview-on-click': props.previewOnClick,
-      },
-    ]);
-
-    const styles = useStyles(style => {
-      if (!!props.height) style.height = unit(props.height);
-      if (!!props.width) style.width = unit(props.width);
-      if (!!props.minHeight) style.minHeight = unit(props.minHeight);
-      if (!!props.minWidth) style.minWidth = unit(props.minWidth);
-      if (!!props.maxHeight) style.maxHeight = unit(props.maxHeight);
-      if (!!props.maxWidth) style.maxWidth = unit(props.maxWidth);
-      if (!!props.fit) style.objectFit = props.fit;
-      if (!!props.position) style.objectPosition = props.position;
-    });
-
-    const tip = {
-      [eImageStatus.empty]: i18n.$it('image.noPicture').d('无图片'),
-      [eImageStatus.pending]: i18n.$it('base.loading').d('加载中'),
-      [eImageStatus.error]: i18n.$it('base.loadFailed').d('加载失败'),
-    };
-
-    const handler = {
-      onClick: (e: iMouseEvent) => {
-        if (state.status === eImageStatus.success && props.previewOnClick) {
-          $previewer.preview(state.src!, e.currentTarget as any);
-        }
-        emit.onClick(e);
-      }
-    };
-
-    return {
-      refer: {
-        refs,
-      },
-      render: () => {
-        if (status.value === eImageStatus.empty || status.value === eImageStatus.pending || status.value === eImageStatus.error) {
-          return (
-            <div className={classes.value} style={styles.value} onClick={handler.onClick} ref={onRef.el}>
-              <Icon icon={status.value === eImageStatus.error ? 'pi-image-close' : 'pi-image'}/>
-              {!props.hideTips && <span>{tip[status.value]}</span>}
-              {status.value === eImageStatus.pending && (<LoadingMask modelValue={true} maskColor="rgba(255,255,255,0.15)"/>)}
-            </div>
-          );
-        }
-        if (status.value === eImageStatus.success) {
-          return (
-            <img src={state.src || ''} className={classes.value} style={styles.value} onClick={handler.onClick} ref={onRef.img}/>
-          );
-        }
-      }
-    };
-  },
-});
-
-export default Image;
+import {computed, designComponent, getComponentCls, iMouseEvent, PropType, reactive, useClasses, useRefs, useStyles, watch} from '@peryl/react-compose';
+import './image.scss';
+import {unit} from "@peryl/utils/unit";
+import {createEnum} from "@peryl/utils/createEnum";
+import {Icon} from "../Icon";
+import {LoadingMask} from "../LoadingMask";
+import i18n from "../i18n";
+import {$previewer} from "../$previewer";
+
+/**
+ * 图片填充类型
+ * @author  韦胜健
+ * @date    2022.10.5 14:32
+ */
+export const eImageFit = createEnum(['fill', 'contain', 'cover', 'none', 'scale-down'] as const);
+
+/**
+ * 图片状态
+ * @author  韦胜健
+ * @date    2022.10.5 14:32
+ */
+export const eImageStatus = createEnum(['success', 'error', 'pending', 'empty'] as const);
+
+/**
+ * 图片的属性
+ * @author  韦胜健
+ * @date    2022.10.5 14:32
+ */
+export const ImagePropsOptions = {
+  alt: { type: String },                                                        // 图片描述
+  fit: { type: String as PropType<typeof eImageFit.TYPE>, default: eImageFit.cover },// 图片 object-fit 属性
+  position: { type: String, default: 'top center' },                            // 图片 object-position 属性
+  maxHeight: { type: [String, Number] },                                        // 最大高度
+  minHeight: { type: [String, Number] },                                        // 最小高度
+  maxWidth: { type: [String, Number] },                                         // 最大宽度
+  minWidth: { type: [String, Number] },                                         // 最小宽度
+  width: { type: [String, Number] },                                            // 图片宽度
+  height: { type: [String, Number] },                                           // 图片高度
+  hideTips: { type: Boolean },                                                  // 隐藏提示文本
+  urlPrefix: { type: String },                                                  // 图片地址前缀
+};
+
+/**
+ * 格式化图片路径
+ * @author  韦胜健
+ * @date    2022.10.5 14:33
+ */
+export const formatImagePath = (() => {
+  const PathPattern = /^(https?|data:image)/;
+  return (url: string | null | undefined, urlPrefix?: string) => {
+    if (!url) {return '';}
+    if (!urlPrefix) {return url;}
+    if (url == null) {return url;}
+    if (PathPattern.test(url)) {return url;}
+    urlPrefix = urlPrefix[urlPrefix.length - 1] === '/' ? urlPrefix.slice(0, -1) : urlPrefix;
+    const imgUrl = url[0] === '/' ? url.slice(1) : url;
+    return [urlPrefix, imgUrl].join('/');
+  };
+})();
+
+export const Image = designComponent({
+  name: '-image',
+  expose: {
+    formatImagePath,
+  },
+  props: {
+    src: { type: String as PropType<string | null> },                           // 图片地址
+    status: { type: String as PropType<typeof eImageStatus.TYPE> },             // 当前状态
+    previewOnClick: { type: Boolean, default: true },                           // 是否点击的时候放大预览图片
+    ...ImagePropsOptions,
+  },
+  emits: {
+    onClick: (e: iMouseEvent) => true,
+    onSuccess: (val: string) => true,
+    onError: (e: string | Event) => true,
+  },
+  setup({ props, event: { emit } }) {
+
+    const { refs, onRef } = useRefs({
+      el: HTMLDivElement,
+      img: HTMLImageElement,
+    });
+
+    const state = reactive({
+      src: undefined as string | undefined | null,
+      status: eImageStatus.empty as typeof eImageStatus.TYPE,
+    });
+
+    const status = computed(() => props.status == null ? state.status : props.status);
+
+    watch(() => props.src, val => {
+      state.src = formatImagePath(val, props.urlPrefix);
+      if (!val) {
+        return state.status = eImageStatus.empty;
+      }
+      state.status = eImageStatus.pending;
+      const image = new window.Image();
+      image.onload = () => {
+        state.status = eImageStatus.success;
+        emit.onSuccess(state.src!);
+      };
+      image.onerror = (e) => {
+        console.error(`load image error: ${image.src}`, e, props.urlPrefix);
+        state.status = eImageStatus.error;
+        emit.onError(e);
+      };
+      image.src = state.src;
+    }, { immediate: true });
+
+    const classes = useClasses(() => [
+      getComponentCls('image'),
+      `image-status-${status.value}`,
+      {
+        'image-preview-on-click': props.previewOnClick,
+      },
+    ]);
+
+    const styles = useStyles(style => {
+      if (!!props.height) style.height = unit(props.height);
+      if (!!props.width) style.width = unit(props.width);
+      if (!!props.minHeight) style.minHeight = unit(props.minHeight);
+      if (!!props.minWidth) style.minWidth = unit(props.minWidth);
+      if (!!props.maxHeight) style.maxHeight = unit(props.maxHeight);
+      if (!!props.maxWidth) style.maxWidth = unit(props.maxWidth);
+      if (!!props.fit) style.objectFit = props.fit;
+      if (!!props.position) style.objectPosition = props.position;
+    });
+
+    const tip = {
+      [eImageStatus.empty]: i18n.$it('image.noPicture').d('无图片'),
+      [eImageStatus.pending]: i18n.$it('base.loading').d('加载中'),
+      [eImageStatus.error]: i18n.$it('base.loadFailed').d('加载失败'),
+    };
+
+    const handler = {
+      onClick: (e: iMouseEvent) => {
+        if (state.status === eImageStatus.success && props.previewOnClick) {
+          $previewer.preview(state.src!, e.currentTarget as any);
+        }
+        emit.onClick(e);
+      }
+    };
+
+    return {
+      refer: {
+        refs,
+      },
+      render: () => {
+        if (status.value === eImageStatus.empty || status.value === eImageStatus.pending || status.value === eImageStatus.error) {
+          return (
+            <div className={classes.value} style={styles.value} onClick={handler.onClick} ref={onRef.el}>
+              <Icon icon={status.value === eImageStatus.error ? 'pi-image-close' : 'pi-image'}/>
+              {!props.hideTips && <span>{tip[status.value]}</span>}
+              {status.value === eImageStatus.pending && (<LoadingMask modelValue={true} maskColor="rgba(255,255,255,0.15)"/>)}
+            </div>
+          );
+        }
+        if (status.value === eImageStatus.success) {
+          return (
+            <img src={state.src || ''} className={classes.value} style={styles.value} onClick={handler.onClick} ref={onRef.img}/>
+          );
+        }
+      }
+    };
+  },
+});
+
+export default Image;