From af70dd724709360f5d82ec3e9248de0b68f5d8ac Mon Sep 17 00:00:00 2001
From: 2betop <2betop.cn@gmail.com>
Date: Mon, 6 Jan 2020 19:32:12 +0800
Subject: [PATCH] =?UTF-8?q?Image=20caption=20=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 scss/components/_images.scss |  9 +++++++--
 src/renderers/Image.tsx      | 24 ++++++++++++------------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/scss/components/_images.scss b/scss/components/_images.scss
index 407d7da9..b6ff791b 100644
--- a/scss/components/_images.scss
+++ b/scss/components/_images.scss
@@ -11,13 +11,14 @@
 
 .#{$ns}Image {
   display: inline-block;
+  width: px2rem(120px);
   border: $borderWidth solid $borderColor;
   padding: $gap-xs;
 
   &-thumb {
-    width: px2rem(108px);
+    width: 100%;
     height: px2rem(108px);
-    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwMCIgaGVpZ2h0PSI0MDAiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgICAgICAgIDxyZWN0IGZpbGw9ImJsYWNrIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIG9wYWNpdHk9IjAuMSIgLz4KICAgICAgICAgICAgPHJlY3QgZmlsbD0id2hpdGUiIHg9IjEwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIC8+CiAgICAgICAgICAgIDxyZWN0IGZpbGw9ImJsYWNrIiB4PSIxMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgb3BhY2l0eT0iMC4xIiAvPgogICAgICAgICAgICA8cmVjdCBmaWxsPSJ3aGl0ZSIgeD0iMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgLz4KICAgICAgICA8L3BhdHRlcm4+CiAgICA8L2RlZnM+CiAgICA8cmVjdCBmaWxsPSJ1cmwoI2dyaWQpIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiAvPgo8L3N2Zz4=");
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwMCIgaGVpZ2h0PSI0MDAiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgICAgICAgIDxyZWN0IGZpbGw9ImJsYWNrIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIG9wYWNpdHk9IjAuMSIgLz4KICAgICAgICAgICAgPHJlY3QgZmlsbD0id2hpdGUiIHg9IjEwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIC8+CiAgICAgICAgICAgIDxyZWN0IGZpbGw9ImJsYWNrIiB4PSIxMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgb3BhY2l0eT0iMC4xIiAvPgogICAgICAgICAgICA8cmVjdCBmaWxsPSJ3aGl0ZSIgeD0iMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgLz4KICAgICAgICA8L3BhdHRlcm4+CiAgICA8L2RlZnM+CiAgICA8cmVjdCBmaWxsPSJ1cmwoI2dyaWQpIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiAvPgo8L3N2Zz4=');
     overflow: hidden;
     position: relative;
 
@@ -67,6 +68,10 @@
       object-fit: cover;
     }
   }
+
+  &-caption {
+    font-size: $fontSizeSm;
+  }
 }
 
 .#{$ns}ImageField {
diff --git a/src/renderers/Image.tsx b/src/renderers/Image.tsx
index 4ac096b8..6af34867 100644
--- a/src/renderers/Image.tsx
+++ b/src/renderers/Image.tsx
@@ -9,9 +9,9 @@ export interface ImageProps {
   alt?: string;
   className?: string;
   imageClassName?: string;
-  description?: string;
+  caption?: string;
   thumbMode?: 'w-full' | 'h-full' | 'contain' | 'cover';
-  thumbRatio?: '1-1' | '4-3' | '16-9';
+  thumbRatio?: '1:1' | '4:3' | '16:9';
   classnames: ClassNamesFn;
   classPrefix: string;
   onLoad?: React.EventHandler<any>;
@@ -28,7 +28,7 @@ export class Image extends React.Component<ImageProps> {
       src,
       alt,
       title,
-      description,
+      caption,
       onLoad
     } = this.props;
 
@@ -38,7 +38,7 @@ export class Image extends React.Component<ImageProps> {
           className={cx(
             'Image-thumb',
             thumbMode ? `Image-thumb--${thumbMode}` : '',
-            thumbRatio ? `Image-thumb--${thumbRatio}` : ''
+            thumbRatio ? `Image-thumb--${thumbRatio.replace(/:/g, '-')}` : ''
           )}
         >
           <img
@@ -48,11 +48,11 @@ export class Image extends React.Component<ImageProps> {
             alt={alt}
           />
         </div>
-        {title || description ? (
-          <div key="caption" className={cx('Image-caption')}>
+        {title || caption ? (
+          <div key="caption" className={cx('Image-info')}>
             {title ? <div className={cx('Image-title')}>{title}</div> : null}
-            {description ? (
-              <div className={cx('Image-description')}>{description}</div>
+            {caption ? (
+              <div className={cx('Image-caption')}>{caption}</div>
             ) : null}
           </div>
         ) : null}
@@ -69,7 +69,7 @@ export interface ImageFieldProps extends RendererProps {
   placeholder: string;
   description?: string;
   thumbMode: 'w-full' | 'h-full' | 'contain' | 'cover';
-  thumbRatio: '1-1' | '4-3' | '16-9';
+  thumbRatio: '1:1' | '4:3' | '16:9';
 }
 
 export class ImageField extends React.Component<ImageFieldProps, object> {
@@ -80,7 +80,7 @@ export class ImageField extends React.Component<ImageFieldProps, object> {
     defaultImage:
       'https://fex.bdstatic.com/n/static/amis/renderers/crud/field/placeholder_cfad9b1.png',
     thumbMode: 'contain',
-    thumbRatio: '1-1',
+    thumbRatio: '1:1',
     placeholder: '-'
   };
 
@@ -88,7 +88,7 @@ export class ImageField extends React.Component<ImageFieldProps, object> {
     const {
       className,
       defaultImage,
-      description,
+      imageCaption,
       title,
       data,
       imageClassName,
@@ -109,7 +109,7 @@ export class ImageField extends React.Component<ImageFieldProps, object> {
             imageClassName={imageClassName}
             src={value}
             title={filter(title, data)}
-            description={filter(description, data)}
+            caption={filter(imageCaption, data)}
             thumbMode={thumbMode}
             thumbRatio={thumbRatio}
           />