图片懒加载组件

jest.config.base.js

@@ -19,6 +19,7 @@ module.exports = {
     '@arvinxu/heatmap-calendar': '<rootDir>/packages/heatmap-calendar/src',
     '@arvinxu/utils': '<rootDir>/packages/utils/src',
     '@arvinxu/i18n': '<rootDir>/packages/i18n/src',
+    '@arvinxu/lazy-image': '<rootDir>/packages/lazy-image/src',
     '@arvinxu/float-label-input': '<rootDir>/packages/float-label-input/src',
     '@arvinxu/page-loading': '<rootDir>/packages/page-loading/src',
     '@arvinxu/mindflow': '<rootDir>/packages/mindflow/src',

packages/lazy-image/.fatherrc.js

@@ -0,0 +1,5 @@
+const base = require('../../.fatherrc');
+
+module.exports = {
+  ...base,
+};

packages/lazy-image/README.md

@@ -0,0 +1,14 @@
+# @arvinxu/lazy-image
+
+[![NPM version][version-image]][version-url] [![NPM downloads][download-image]][download-url]
+
+## License
+
+[MIT](../../LICENSE) ® Arvin Xu
+
+<!-- npm url -->
+
+[version-image]: http://img.shields.io/npm/v/@arvinxu/lazy-image.svg?color=deepgreen&label=latest
+[version-url]: http://npmjs.org/package/@arvinxu/lazy-image
+[download-image]: https://img.shields.io/npm/dm/@arvinxu/lazy-image.svg
+[download-url]: https://npmjs.org/package/@arvinxu/lazy-image

packages/lazy-image/jest.config.js

@@ -0,0 +1,14 @@
+const base = require('../../jest.config.base');
+
+const packageName = '@arvinxu/lazy-image';
+
+const root = '<rootDir>/packages/lazy-image';
+
+module.exports = {
+  ...base,
+  rootDir: '../..',
+  roots: [root],
+  name: packageName,
+  displayName: packageName,
+  collectCoverageFrom: [`${root}/src/**/*.tsx`, `${root}/src/**/*.ts`],
+};

packages/lazy-image/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@arvinxu/lazy-image",
+  "version": "1.0.0",
+  "files": [
+    "lib",
+    "es"
+  ],
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "homepage": "https://github.com/arvinxx/components/tree/master/packages/lazy-image#readme",
+  "repository": "git+https://github.com/arvinxx/components.git",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "dependencies": {
+    "react-simple-img": "^2.3.9"
+  },
+  "scripts": {
+    "build": "father-build && yarn webpack",
+    "webpack": "webpack",
+    "test": "jest",
+    "test:update": "jest -u",
+    "prepublishOnly": "yarn build",
+    "cov": "jest --coverage",
+    "clean": "rm -rf es lib dist build coverage .umi"
+  }
+}

packages/lazy-image/src/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { FC, ImgHTMLAttributes } from 'react';
+import { SimpleImg } from 'react-simple-img';
+
+interface ILazyImage {
+  src: string;
+  preSrc: string;
+  palette?: string[];
+}
+
+type AdaptiveImage = string | ILazyImage;
+
+export interface LazyImageProps
+  extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'placeholder'> {
+  src: AdaptiveImage;
+  height?: number | string;
+  width?: number | string;
+  placeholder?: string | boolean;
+}
+
+const LazyImage: FC<LazyImageProps> = ({
+  src,
+  placeholder,
+  sizes,
+  ...props
+}) => {
+  if (typeof src === 'string') {
+    return (
+      <SimpleImg
+        placeholder={placeholder || false}
+        src={src}
+        sizes={sizes}
+        {...props}
+      />
+    );
+  }
+
+  // 如果 src 是 lqip-loader 图片
+  return <SimpleImg placeholder={src.preSrc} src={src.src} {...props} />;
+};
+export default LazyImage;

packages/lazy-image/tests/index.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import LazyImage from '@arvinxu/lazy-image';
+
+describe('LazyImage', () => {
+  it('默认状态', () => {
+    const { container } = render(<LazyImage />);
+    expect(container).toMatchSnapshot();
+  });
+});

packages/lazy-image/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    /* babel 输出类型 */
+    "moduleResolution": "Node",
+    "target": "ESNext",
+    "module": "ESNext",
+    /* 模块导入配置项 */
+    "esModuleInterop": true,
+    "types": ["../../types", "@types/jest"]
+  }
+}

packages/lazy-image/webpack.config.js

@@ -0,0 +1,11 @@
+const path = require('path');
+const config = require('../../webpack.config');
+
+module.exports = {
+  ...config,
+  output: {
+    ...config.output,
+    library: 'LazyImage',
+    path: path.resolve(__dirname, 'dist'),
+  },
+};

tsconfig.json

@@ -36,6 +36,8 @@
       "@arvinxu/utils/*": ["./packages/utils/src/*"],
       "@arvinxu/i18n": ["./packages/i18n/src"],
       "@arvinxu/i18n/*": ["./packages/i18n/src/*"],
+      "@arvinxu/lazy-image": ["./packages/lazy-image/src"],
+      "@arvinxu/lazy-image/*": ["./packages/lazy-image/src/*"],
       "@arvinxu/float-label-input": ["./packages/float-label-input/src"],
       "@arvinxu/page-loading": ["./packages/page-loading/src"],
       "@arvinxu/mindflow": ["./packages/mindflow/src"],

yarn.lock

@@ -11600,6 +11600,11 @@ interpret@^2.2.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-2.2.0.tgz#1a78a0b5965c40a5416d007ad6f50ad27c417df9"
   integrity sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==
 
+intersection-observer@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.npm.taobao.org/intersection-observer/download/intersection-observer-0.5.1.tgz#e340fc56ce74290fe2b2394d1ce88c4353ac6dfa"
+  integrity sha1-40D8Vs50KQ/isjlNHOiMQ1Osbfo=
+
 intersection-observer@^0.7.0:
   version "0.7.0"
   resolved "https://registry.npm.taobao.org/intersection-observer/download/intersection-observer-0.7.0.tgz?cache=0&sync_timestamp=1607914497037&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fintersection-observer%2Fdownload%2Fintersection-observer-0.7.0.tgz#ee16bee978db53516ead2f0a8154b09b400bbdc9"
@@ -18717,6 +18722,13 @@ react-side-effect@^2.1.0:
   resolved "https://registry.npm.taobao.org/react-side-effect/download/react-side-effect-2.1.1.tgz#66c5701c3e7560ab4822a4ee2742dee215d72eb3"
   integrity sha1-ZsVwHD51YKtIIqTuJ0Le4hXXLrM=
 
+react-simple-img@^2.3.9:
+  version "2.3.9"
+  resolved "https://registry.nlark.com/react-simple-img/download/react-simple-img-2.3.9.tgz#d7cb230b4ace1928ab7b0b2f3ec9b23c03339c2e"
+  integrity sha1-18sjC0rOGSirewsvPsmyPAMznC4=
+  dependencies:
+    intersection-observer "^0.5.1"
+
 react-tween-state@^0.1.5:
   version "0.1.5"
   resolved "https://registry.npm.taobao.org/react-tween-state/download/react-tween-state-0.1.5.tgz#e98b066551efb93cb92dd1be14995c2e3deae339"