feat: image 支持 width height (#1624)

* 修复 string2regExp 报错, 传入的时候先转成字符

* 修复 diffEditor 报错

* 修复 default filter 问题

* 修复文档链接错误

* feat：image 支持设置高宽

Co-authored-by: 2betop <2betop.cn@gmail.com>

docs/zh-CN/components/image.md

@@ -165,6 +165,22 @@ order: 52
 }
 ```
 
+## 设置高宽
+
+通过 `width` 和 `height` 可以设置缩率图显示的高宽
+
+```schema
+{
+    "type": "page",
+    "body": {
+        "type": "image",
+        "width": "200px",
+        "height": "200px",
+        "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80"
+    }
+}
+```
+
 ## 用作 Field 时
 
 当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置`name`属性，映射同名变量
@@ -225,11 +241,16 @@ List 的内容、Card 卡片的内容配置同上
 }
 ```
 
+## 属性表
+
 | 属性名         | 类型      | 默认值    | 说明                                                                                   |
 | -------------- | --------- | --------- | -------------------------------------------------------------------------------------- |
 | type           | `string`  |           | 如果在 Table、Card 和 List 中，为`"color"`；在 Form 中用作静态展示，为`"static-color"` |
 | className      | `string`  |           | 外层 CSS 类名                                                                          |
 | imageClassName | `string`  |           | 图片 CSS 类名                                                                          |
+| thumbClassName | `string`  |           | 图片缩率图 CSS 类名                                                                    |
+| height         | `string`  |           | 图片缩率高度                                                                           |
+| width          | `string`  |           | 图片缩率宽度                                                                           |
 | title          | `string`  |           | 标题                                                                                   |
 | imageCaption   | `string`  |           | 描述                                                                                   |
 | placeholder    | `string`  |           | 占位文本                                                                               |

fis-conf.js

@@ -154,7 +154,7 @@ fis.match('{*.ts,*.jsx,*.tsx,/src/**.js,/src/**.ts}', {
       importHelpers: true,
       esModuleInterop: true,
       experimentalDecorators: true,
-      sourceMap: true,
+      inlineSourceMap: true,
       target: 4
     }),
 

package.json

@@ -86,20 +86,19 @@
     "video-react": "0.14.1"
   },
   "devDependencies": {
-    "@types/file-saver": "^2.0.1",
-    "@types/papaparse": "^5.2.2",
     "@types/async": "^2.0.45",
     "@types/classnames": "^2.2.3",
     "@types/dom-helpers": "^3.4.1",
     "@types/echarts": "^4.9.2",
+    "@types/file-saver": "^2.0.1",
     "@types/history": "^4.6.0",
-    "history": "4.7.2",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/jest": "^24.9.1",
     "@types/jquery": "^3.3.1",
     "@types/lodash": "^4.14.76",
     "@types/mkdirp": "^1.0.1",
     "@types/node": "^12.7.1",
+    "@types/papaparse": "^5.2.2",
     "@types/prop-types": "^15.5.2",
     "@types/qs": "^6.5.1",
     "@types/react": "^16.9.35",
@@ -137,6 +136,7 @@
     "font-awesome": "4.7.0",
     "fs-walk": "0.0.2",
     "glob": "^7.1.6",
+    "history": "4.7.2",
     "husky": "^2.2.0",
     "jest": "^26.6.3",
     "jest-canvas-mock": "^2.3.0",

scss/components/_images.scss

@@ -11,12 +11,11 @@
 
 .#{$ns}Image {
   display: inline-block;
-  width: px2rem(120px);
   border: var(--borderWidth) solid var(--borderColor);
   padding: var(--gap-xs);
 
   &-thumb {
-    width: 100%;
+    width: px2rem(108px);
     height: px2rem(108px);
     background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwMCIgaGVpZ2h0PSI0MDAiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgICAgICAgIDxyZWN0IGZpbGw9ImJsYWNrIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIG9wYWNpdHk9IjAuMSIgLz4KICAgICAgICAgICAgPHJlY3QgZmlsbD0id2hpdGUiIHg9IjEwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIC8+CiAgICAgICAgICAgIDxyZWN0IGZpbGw9ImJsYWNrIiB4PSIxMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgb3BhY2l0eT0iMC4xIiAvPgogICAgICAgICAgICA8cmVjdCBmaWxsPSJ3aGl0ZSIgeD0iMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgLz4KICAgICAgICA8L3BhdHRlcm4+CiAgICA8L2RlZnM+CiAgICA8cmVjdCBmaWxsPSJ1cmwoI2dyaWQpIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiAvPgo8L3N2Zz4=');
     overflow: hidden;

src/renderers/Image.tsx

@@ -57,9 +57,36 @@ export interface ImageSchema extends BaseSchema {
    */
   showDimensions?: boolean;
 
+  /**
+   * 图片无法显示时的替换文本
+   */
   alt?: string;
 
+  /**
+   * 高度
+   */
+  height?: number;
+
+  /**
+   * 宽度
+   */
+  width?: number;
+
+  /**
+   * 图片 css 类名
+   */
   imageClassName?: SchemaClassName;
+
+  /**
+   * 外层 css 类名
+   */
+  className?: SchemaClassName;
+
+  /**
+   * 图片缩率图外层 css 类名
+   */
+  thumbClassName?: SchemaClassName;
+
   caption?: SchemaTpl;
 
   /**
@@ -94,8 +121,11 @@ export class ImageThumb extends React.Component<ImageThumbProps> {
       classnames: cx,
       className,
       imageClassName,
+      thumbClassName,
       thumbMode,
       thumbRatio,
+      height,
+      width,
       src,
       alt,
       title,
@@ -110,9 +140,11 @@ export class ImageThumb extends React.Component<ImageThumbProps> {
         <div
           className={cx(
             'Image-thumb',
+            thumbClassName,
             thumbMode ? `Image-thumb--${thumbMode}` : '',
             thumbRatio ? `Image-thumb--${thumbRatio.replace(/:/g, '-')}` : ''
           )}
+          style={{height: height, width: width}}
         >
           <img
             onLoad={onLoad}
@@ -221,6 +253,9 @@ export class ImageField extends React.Component<ImageFieldProps, object> {
       title,
       data,
       imageClassName,
+      thumbClassName,
+      height,
+      width,
       classnames: cx,
       src,
       thumbMode,
@@ -239,6 +274,9 @@ export class ImageField extends React.Component<ImageFieldProps, object> {
         {value ? (
           <ThemedImageThumb
             imageClassName={imageClassName}
+            thumbClassName={thumbClassName}
+            height={height}
+            width={width}
             src={value}
             title={filter(title, data)}
             caption={filter(imageCaption, data)}