Merge pull request #63 from unix/image

feat(image): add a prop to control max duration of image animation

components/image/image.tsx

@@ -10,19 +10,21 @@ interface Props {
   height?: number
   className?: string
   scale?: string
+  maxDelay?: number
 }
 
 const defaultProps = {
   animation: true,
   className: '',
   scale: '100%',
+  maxDelay: 3000,
 }
 
 type NativeAttrs = Omit<React.ImgHTMLAttributes<any>, keyof Props>
 export type ImageProps = Props & typeof defaultProps & NativeAttrs
 
 const Image: React.FC<ImageProps> = React.memo(({
-  src, width, height, animation, className, scale, ...props
+  src, width, height, animation, className, scale, maxDelay, ...props
 }) => {
   const showAnimation = animation && width && height
   const theme = useTheme()
@@ -51,10 +53,10 @@ const Image: React.FC<ImageProps> = React.memo(({
         setShowSkeleton(false)
       }
       clearTimeout(timer)
-    }, 300)
+    }, maxDelay)
     return () => clearTimeout(timer)
   }, [loading])
-  
+
   return (
     <div className={`image ${className}`}>
       {(showSkeleton && showAnimation) && <ImageSkeleton opacity={loading ? .5 : 0} />}

pages/en-us/components/image.mdx

@@ -22,7 +22,8 @@ Display image content.
   desc="`Image` will show skeleton animation after `width` and `height` props are set."
   scope={{ Image }}
   code={`
-<Image width="540" height="160" src="/images/custom-domains.png" />
+<Image width="540" height="160"
+  src="http://www.deelay.me/2000/https://react.zeit-ui.co/images/custom-domains.png" />
 `} />
 
 <Playground
@@ -42,6 +43,7 @@ Display image content.
 | ---------- | ---------- | ---- |  -------------- | ------ |
 | **src** | image src | `string` | - | - |
 | **animation** | display animation when loading  | `boolean` | - | `true` |
+| **maxDelay**(ms) | max duration of animation | `number` | - | `3000` |
 | **width** | width | `number` | - | - |
 | **height** | height | `number` | - | - |
 | **scale** | scale value | `string` | - | `100%` |

pages/zh-cn/components/image.mdx

@@ -21,7 +21,8 @@ export const meta = {
   desc="组件在设置 `width` 与 `height` 属性后会在加载时显示骨架动画。"
   scope={{ Image }}
   code={`
-<Image width="540" height="160" src="/images/custom-domains.png" />
+<Image width="540" height="160"
+  src="http://www.deelay.me/2000/https://react.zeit-ui.co/images/custom-domains.png" />
 `} />
 
 <Playground
@@ -41,6 +42,7 @@ export const meta = {
 | ---------- | ---------- | ---- |  -------------- | ------ |
 | **src** | 图片地址 | `string` | - | - |
 | **animation** | 是否在加载时显示骨架动画  | `boolean` | - | `true` |
+| **maxDelay** | 动画持续最大时间 (毫秒)  | `number` | - | `3000` |
 | **width** | 宽度 | `number` | - | - |
 | **height** | 高度 | `number` | - | - |
 | **scale** | 缩放比例 | `string` | - | `100%` |