feat(image): 新增Image组件

packages/ui/hiui/package.json

@@ -68,6 +68,7 @@
     "@hi-ui/form": "^4.0.6",
     "@hi-ui/grid": "^4.0.5",
     "@hi-ui/highlighter": "^4.0.5",
+    "@hi-ui/image": "^4.0.0-alpha.0",
     "@hi-ui/input": "^4.0.4",
     "@hi-ui/input-group": "^4.0.3",
     "@hi-ui/list": "^4.0.6",

packages/ui/hiui/src/index.ts

@@ -220,3 +220,6 @@ export { default as Anchor } from '@hi-ui/anchor'
 
 export * from '@hi-ui/back-top'
 export { default as BackTop } from '@hi-ui/back-top'
+
+export * from '@hi-ui/image'
+export { default as Image } from '@hi-ui/image'

packages/ui/image/README.md

@@ -0,0 +1,11 @@
+# `@hi-ui/image`
+
+> TODO: description
+
+## Usage
+
+```
+const Image = require('@hi-ui/image');
+
+// TODO: DEMONSTRATE API
+```

packages/ui/image/__tests__/image.test.js

@@ -0,0 +1,5 @@
+const Image = require('../src')
+
+describe('@hi-ui/image', () => {
+  it('needs tests', () => {})
+})

packages/ui/image/hi-docs.config.mdx

@@ -0,0 +1,17 @@
+# Image 图片
+
+展示和预览图片
+
+## 何时使用
+
+展示和预览图片时使用
+
+常见于表单，作为表单的组件类型之一
+
+## 使用示例
+
+<!-- Inject Stories -->
+
+## Props
+
+<!-- Inject Props -->

packages/ui/image/jest.config.js

@@ -0,0 +1 @@
+module.exports = require('../../../jest.config')

packages/ui/image/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@hi-ui/image",
+  "version": "4.0.0-alpha.0",
+  "description": "A sub-package for @hi-ui/hiui.",
+  "keywords": [],
+  "author": "HiUI <[email protected]>",
+  "homepage": "https://github.com/XiaoMi/hiui/tree/master/packages/ui/image#readme",
+  "license": "MIT",
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib"
+  ],
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
+  "types": "lib/types/index.d.ts",
+  "typings": "lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./lib/cjs/index.js",
+      "default": "./lib/esm/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/XiaoMi/hiui.git"
+  },
+  "scripts": {
+    "test": "jest",
+    "clean": "rimraf lib",
+    "prebuild": "yarn clean",
+    "build:esm": "hi-build ./src/index.ts --format esm -d ./lib/esm",
+    "build:cjs": "hi-build ./src/index.ts --format cjs -d ./lib/cjs",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib/types",
+    "build": "concurrently yarn:build:*"
+  },
+  "bugs": {
+    "url": "https://github.com/XiaoMi/hiui/issues"
+  },
+  "dependencies": {
+    "@hi-ui/classname": "^4.0.0",
+    "@hi-ui/env": "^4.0.0"
+  },
+  "peerDependencies": {
+    "@hi-ui/core": ">=4.0.0",
+    "react": ">=16.8.6",
+    "react-dom": ">=16.8.6"
+  },
+  "devDependencies": {
+    "@hi-ui/core": "^4.0.0",
+    "@hi-ui/core-css": "^4.0.0",
+    "@hi-ui/hi-build": "^4.0.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  }
+}

packages/ui/image/src/Image.tsx

@@ -0,0 +1,105 @@
+import React, { forwardRef, useMemo, useState } from 'react'
+import { cx, getPrefixCls } from '@hi-ui/classname'
+import { __DEV__ } from '@hi-ui/env'
+import { HiBaseHTMLProps } from '@hi-ui/core'
+import { useLatestCallback } from '@hi-ui/use-latest'
+import Preview, { PreviewProps } from '@hi-ui/preview'
+import { isObject } from '@hi-ui/type-assertion'
+import { useImage, UseImageProps } from './use-image'
+
+const IMAGE_PREFIX = getPrefixCls('image')
+
+/**
+ * TODO: What is Image
+ */
+export const Image = forwardRef<HTMLDivElement | null, ImageProps>(
+  (
+    {
+      prefixCls = IMAGE_PREFIX,
+      role = 'image',
+      className,
+      style,
+      src,
+      width,
+      height,
+      fallback,
+      placeholder,
+      preview,
+      onLoad,
+      onError,
+      onClick,
+      ...rest
+    },
+    ref
+  ) => {
+    const { status, imageProps, getImageRef } = useImage({
+      fallback,
+      placeholder,
+      onError,
+      src,
+    })
+
+    const [previewVisible, setPreViewVisible] = useState<boolean>(false)
+
+    const canPreviewMemo = useMemo(() => {
+      return preview && src && status !== 'error'
+    }, [preview, src, status])
+
+    const cls = cx(prefixCls, className, canPreviewMemo && `${prefixCls}--preview`)
+
+    const handleClick = useLatestCallback((e) => {
+      onClick?.(e)
+      setPreViewVisible(true)
+    })
+
+    const handleClosePreview = useLatestCallback(() => {
+      setPreViewVisible(false)
+    })
+
+    return (
+      <>
+        <div
+          ref={ref}
+          role={role}
+          className={cls}
+          style={{ ...style, width, height }}
+          onClick={handleClick}
+        >
+          <img
+            // @ts-ignore
+            ref={getImageRef}
+            className={`${prefixCls}-img`}
+            {...{ width, height }}
+            {...imageProps}
+            {...rest}
+          />
+          {status === 'loading' && (
+            <div aria-hidden="true" className={`${prefixCls}-placeholder`}>
+              {placeholder}
+            </div>
+          )}
+        </div>
+        {canPreviewMemo && (
+          <Preview
+            {...(isObject(preview) ? preview : {})}
+            // @ts-ignore
+            src={src}
+            visible={previewVisible}
+            onClose={handleClosePreview}
+          />
+        )}
+      </>
+    )
+  }
+)
+
+export interface ImageProps extends Omit<HiBaseHTMLProps<'img'>, 'placeholder'>, UseImageProps {
+  /**
+   * 图片预览参数
+   */
+  preview?: Partial<PreviewProps> | boolean
+}
+
+if (__DEV__) {
+  Image.displayName = 'Image'
+}

packages/ui/image/src/index.ts

@@ -0,0 +1,4 @@
+import './styles/index.scss'
+
+export * from './Image'
+export { Image as default } from './Image'

packages/ui/image/src/styles/image.scss

@@ -0,0 +1,24 @@
+@import '~@hi-ui/core-css/lib/index.scss';
+
+$prefix: '#{$component-prefix}-image' !default;
+
+.#{$prefix} {
+  position: relative;
+  display: inline-block;
+
+  &--preview {
+    cursor: pointer;
+  }
+
+  &-img {
+    vertical-align: middle;
+  }
+
+  &-placeholder {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+  }
+}

packages/ui/image/src/styles/index.scss

@@ -0,0 +1 @@
+@import './image.scss';

packages/ui/image/src/types.ts

@@ -0,0 +1 @@
+export type ImageStatus = 'normal' | 'error' | 'loading'

packages/ui/image/src/use-image.ts

@@ -0,0 +1,74 @@
+import React, { useState, useEffect, useMemo } from 'react'
+import { useLatestCallback, useLatestRef } from '@hi-ui/use-latest'
+import { ImageStatus } from './types'
+
+export const useImage = ({ placeholder, fallback, onLoad, onError, src }: UseImageProps) => {
+  const isCustomPlaceholder = placeholder && placeholder !== true
+  const [status, setStatus] = useState<ImageStatus>(isCustomPlaceholder ? 'loading' : 'normal')
+  const isError = status === 'error'
+  const isLoaded = useLatestRef(false)
+
+  const handleLoad = useLatestCallback((e) => {
+    onLoad?.(e)
+    setStatus('normal')
+  })
+
+  const handleError = useLatestCallback((e) => {
+    onError?.(e)
+    setStatus('error')
+  })
+
+  const imageProps = useMemo(() => {
+    return {
+      ...(isError && fallback
+        ? { src: fallback }
+        : { src, onLoad: handleLoad, onError: handleError }),
+    }
+  }, [fallback, handleError, handleLoad, src, isError])
+
+  const getImageRef = (img?: HTMLImageElement) => {
+    isLoaded.current = false
+
+    if (status !== 'loading') return
+
+    if (img?.complete && (img.naturalWidth || img.naturalHeight)) {
+      isLoaded.current = true
+      setStatus('normal')
+    }
+  }
+
+  useEffect(() => {
+    if (isError) {
+      setStatus('normal')
+    }
+
+    if (isCustomPlaceholder && !isLoaded.current) {
+      setStatus('loading')
+    }
+  }, [src])
+
+  return {
+    status,
+    imageProps,
+    getImageRef,
+  }
+}
+
+export interface UseImageProps {
+  /**
+   * 图片地址
+   */
+  src?: string
+  /**
+   * 加载失败容错地址
+   */
+  fallback?: string
+  /**
+   * 加载占位
+   */
+  placeholder?: React.ReactNode
+  onLoad?: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void
+  onError?: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void
+}
+
+export type useImageReturn = ReturnType<typeof useImage>

packages/ui/image/stories/basic.stories.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import Image from '../src'
+
+/**
+ * @title 基础用法
+ */
+export const Basic = () => {
+  return (
+    <>
+      <h1>Basic</h1>
+      <div className="image-basic__wrap">
+        <Image src="http://i1.mifile.cn/f/i/hiui/docs/card/pic_1.png" width={200} />
+      </div>
+    </>
+  )
+}

packages/ui/image/stories/fallback.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import Image from '../src'
+
+/**
+ * @title 容错处理
+ * @desc 设置 fallback，当图片加载失败时，显示占位图
+ */
+export const Fallback = () => {
+  return (
+    <>
+      <h1>Fallback</h1>
+      <div className="image-basic__wrap">
+        <Image
+          src="http://error.mifile.cn/f/i/hiui/docs/card/pic_1.png"
+          width={200}
+          fallback="http://i1.mifile.cn/f/i/hiui/docs/card/pic_1.png"
+        />
+      </div>
+    </>
+  )
+}

packages/ui/image/stories/index.stories.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import Image from '../src'
+
+export * from './basic.stories'
+export * from './placeholder.stories'
+export * from './fallback.stories'
+export * from './preview.stories'
+
+export default {
+  title: 'Data Display/Image',
+  component: Image,
+  decorators: [(story: Function) => <div>{story()}</div>],
+}