upgrade

example/.storybook/config.js

@@ -1,4 +0,0 @@
-import { configure } from '@storybook/react';
-
-// automatically import all files ending in *.stories.js
-configure(require.context('../stories', true, /\.stories\.js$/), module);

example/.storybook/config.ts

@@ -0,0 +1,6 @@
+import { configure } from '@storybook/react';
+
+configure(
+  require.context('../stories', true, /\.stories\.(mdx|[tj]sx?)$/),
+  module,
+);

example/.storybook/presets.js

@@ -0,0 +1,19 @@
+const path = require('path');
+
+module.exports = [
+  {
+    name: '@storybook/preset-create-react-app',
+    options: {
+      tsDocgenLoaderOptions: {
+        tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),
+      },
+    },
+  },
+  {
+    name: '@storybook/addon-docs/react/preset',
+    options: {
+      configureJSX: true,
+      sourceLoaderOptions: null,
+    },
+  },
+];

example/.storybook/webpack.config.js

@@ -0,0 +1,49 @@
+let foundCSSRule = false;
+
+function removeDuplicateCSSRule(rule) {
+  if (!rule || !rule.test) {
+    return;
+  }
+  if (rule.test.toString() !== '/\\.css$/') {
+    return;
+  }
+  if (!foundCSSRule) {
+    foundCSSRule = true;
+    return;
+  }
+  return false;
+}
+
+function updateRules(oldRules) {
+  const newRules = [];
+  if (!oldRules || !oldRules.length) {
+    return newRules;
+  }
+  for (let i = 0; i < oldRules.length; i++) {
+    const rule = oldRules[i];
+    if (rule.oneOf) {
+      rule.oneOf = updateRules(rule.oneOf);
+      newRules.push(rule);
+    } else {
+      const newRule = removeDuplicateCSSRule(oldRules[i]);
+      if (newRule) {
+        // If a new rule was returned, push it into the new rules list
+        newRules.push(newRule);
+      }
+      if (newRule !== false) {
+        // If any function returned false, it means remove it from the list of rules
+        // Otherwise, we just use the old rule that was there previously
+        newRules.push(oldRules[i]);
+      }
+    }
+  }
+  return newRules;
+}
+
+module.exports = async ({ config, mode }) => {
+  console.log('*** Custom webpack running ****');
+  config.module.rules = updateRules(config.module.rules);
+  // Uncomment this line if you would like to view the final webpack config so you can alter it.  Useful for debugging
+  // console.dir(config, { depth: null });
+  return config;
+};

example/package.json

@@ -3,13 +3,15 @@
   "version": "0.0.0",
   "private": true,
   "dependencies": {
+    "@types/node": "12.12.14",
     "react-photo-view": "link:..",
     "react-scripts": "3.2.0",
-    "styled-components": "^4.4.1"
+    "styled-components": "^4.4.1",
+    "typescript": "3.7.2"
   },
   "scripts": {
-    "start": "start-storybook -p 6006",
-    "build": "build-storybook",
+    "start": "start-storybook -p 6006 -s public",
+    "build": "build-storybook -s public",
     "deploy": "storybook-to-ghpages"
   },
   "eslintConfig": {
@@ -28,12 +30,12 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.7.2",
-    "@storybook/addon-actions": "^5.3.0-beta.2",
-    "@storybook/addon-links": "^5.3.0-beta.2",
-    "@storybook/addons": "^5.3.0-beta.2",
-    "@storybook/react": "^5.3.0-beta.2",
-    "@storybook/storybook-deployer": "^2.8.1",
-    "babel-loader": "^8.0.6"
+    "@storybook/addon-actions": "^5.3.0-beta.13",
+    "@storybook/addon-docs": "^5.3.0-beta.13",
+    "@storybook/addon-links": "^5.3.0-beta.13",
+    "@storybook/addons": "^5.3.0-beta.13",
+    "@storybook/preset-create-react-app": "^1.3.1",
+    "@storybook/react": "^5.3.0-beta.13",
+    "@storybook/storybook-deployer": "^2.8.1"
   }
 }

example/src/index.tsx

@@ -0,0 +1,82 @@
+import styled from 'styled-components';
+import * as React from 'react';
+import { PhotoSlider } from '../../dist';
+
+export const photoImages = [
+  '1.jpg',
+  '2.jpg',
+  '3.jpg',
+  '4.jpg',
+  '5.jpg',
+  '6.jpg',
+  '7.jpg',
+  '8.jpg',
+];
+
+export const ImageList = styled.div`
+  padding: 40px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+`;
+
+export const ViewBox = styled.div<{ viewImage: string }>`
+  margin-right: 20px;
+  margin-bottom: 20px;
+  width: 100px;
+  height: 100px;
+  cursor: pointer;
+  background: url('${props => props.viewImage}') no-repeat center;
+  background-size: cover;
+`;
+
+export const Button = styled.button<{ colorType?: string }>`
+  padding: 6px 10px;
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  cursor: pointer;
+
+  &:not(:last-child) {
+    margin-right: 12px;
+  }
+
+  &[colorType='primary'] {
+    background: deepskyblue;
+    border-color: deepskyblue;
+    color: white;
+  }
+`;
+
+export const DefaultImage = styled.img`
+  width: 100px;
+  height: 100px;
+`;
+
+export const ControlledView = () => {
+  const [visible, setVisible] = React.useState(false);
+  const [photoIndex, setPhotoIndex] = React.useState(0);
+
+  function handleShowSlider() {
+    setVisible(true);
+  }
+  function handleCloseSlider() {
+    setVisible(false);
+  }
+  return (
+    <ImageList>
+      <Button onClick={() => setPhotoIndex(2)}>setPhotoIndex(2)</Button>
+      <Button onClick={() => setPhotoIndex(4)}>setPhotoIndex(4)</Button>
+      <Button onClick={handleShowSlider} colorType="primary">
+        打开 PhotoSlider
+      </Button>
+
+      <PhotoSlider
+        images={photoImages.map((item: string) => ({ src: item }))}
+        visible={visible}
+        onClose={handleCloseSlider}
+        index={photoIndex}
+        onIndexChange={setPhotoIndex}
+      />
+    </ImageList>
+  );
+};

example/stories/Index.stories.js

@@ -1,139 +1,139 @@
-import * as React from 'react';
-import styled from 'styled-components';
-import { storiesOf } from '@storybook/react';
-import { PhotoProvider, PhotoConsumer, PhotoSlider } from 'react-photo-view';
-import 'react-photo-view/dist/index.css';
-import image1 from './static/1.jpg';
-import image2 from './static/2.jpg';
-import image3 from './static/3.jpg';
-import image4 from './static/4.jpg';
-import image5 from './static/5.jpg';
-import image6 from './static/6.jpg';
-import image7 from './static/7.jpg';
-import image8 from './static/8.jpg';
-import defaultPhoto from './static/default-photo.svg';
-
-const photoImages = [
-  image1,
-  image2,
-  image3,
-  image4,
-  image5,
-  image6,
-  image7,
-  image8,
-];
-
-const ImageList = styled.div`
-  padding: 40px;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-`;
-
-const ViewBox = styled.div`
-  margin-right: 20px;
-  margin-bottom: 20px;
-  width: 100px;
-  height: 100px;
-  cursor: pointer;
-  background: url('${props => props.viewImage}') no-repeat center;
-  background-size: cover;
-`;
-
-const Button = styled.button`
-  padding: 6px 10px;
-  border: 1px solid #ccc;
-  border-radius: 2px;
-  cursor: pointer;
-
-  &:not(:last-child) {
-    margin-right: 12px;
-  }
-
-  &[type='primary'] {
-    background: deepskyblue;
-    border-color: deepskyblue;
-    color: white;
-  }
-`;
-
-const DefaultImage = styled.img`
-  width: 100px;
-  height: 100px;
-`;
-
-storiesOf('react-photo-view', module)
-  .add('默认展示', () => (
-    <PhotoProvider>
-      <ImageList>
-        {photoImages.map((item, index) => (
-          <PhotoConsumer key={index} src={item} intro={item}>
-            <ViewBox viewImage={item} />
-          </PhotoConsumer>
-        ))}
-      </ImageList>
-    </PhotoProvider>
-  ))
-  .add('两张预览', () => (
-    <PhotoProvider>
-      <ImageList>
-        {photoImages.map((item, index) => (
-          <PhotoConsumer key={index} src={item}>
-            {index < 2 ? <ViewBox viewImage={item} /> : undefined}
-          </PhotoConsumer>
-        ))}
-      </ImageList>
-    </PhotoProvider>
-  ))
-  .add('通过按钮触发', () => (
-    <PhotoProvider>
-      <ImageList>
-        <PhotoConsumer src={image4}>
-          <Button>打开预览</Button>
-        </PhotoConsumer>
-      </ImageList>
-    </PhotoProvider>
-  ))
-  .add('自定义加载失败', () => (
-    <ImageList>
-      <PhotoProvider>
-        <PhotoConsumer src={null}>
-          <Button>无默认图</Button>
-        </PhotoConsumer>
-      </PhotoProvider>
-      <PhotoProvider brokenElement={<DefaultImage src={defaultPhoto} />}>
-        <PhotoConsumer src={null}>
-          <Button>自定义默认图</Button>
-        </PhotoConsumer>
-      </PhotoProvider>
-    </ImageList>
-  ))
-  .add('受控 PhotoSlider', () => {
-    const [visible, setVisible] = React.useState(false);
-    const [photoIndex, setPhotoIndex] = React.useState(0);
-
-    function handleShowSlider() {
-      setVisible(true);
-    }
-    function handleCloseSlider() {
-      setVisible(false);
-    }
-    return (
-      <ImageList>
-        <Button onClick={() => setPhotoIndex(2)}>setPhotoIndex(2)</Button>
-        <Button onClick={() => setPhotoIndex(4)}>setPhotoIndex(4)</Button>
-        <Button onClick={handleShowSlider} type="primary">
-          打开 PhotoSlider
-        </Button>
-
-        <PhotoSlider
-          images={photoImages.map(item => ({ src: item }))}
-          visible={visible}
-          onClose={handleCloseSlider}
-          index={photoIndex}
-          onIndexChange={setPhotoIndex}
-        />
-      </ImageList>
-    );
-  });
+// import * as React from 'react';
+// import styled from 'styled-components';
+// import { storiesOf } from '@storybook/react';
+// import { PhotoProvider, PhotoConsumer, PhotoSlider } from 'react-photo-view';
+// import 'react-photo-view/dist/index.css';
+// import image1 from './static/1.jpg';
+// import image2 from './static/2.jpg';
+// import image3 from './static/3.jpg';
+// import image4 from './static/4.jpg';
+// import image5 from './static/5.jpg';
+// import image6 from './static/6.jpg';
+// import image7 from './static/7.jpg';
+// import image8 from './static/8.jpg';
+// import defaultPhoto from './static/default-photo.svg';
+//
+// const photoImages = [
+//   image1,
+//   image2,
+//   image3,
+//   image4,
+//   image5,
+//   image6,
+//   image7,
+//   image8,
+// ];
+//
+// const ImageList = styled.div`
+//   padding: 40px;
+//   display: flex;
+//   flex-wrap: wrap;
+//   align-items: center;
+// `;
+//
+// const ViewBox = styled.div`
+//   margin-right: 20px;
+//   margin-bottom: 20px;
+//   width: 100px;
+//   height: 100px;
+//   cursor: pointer;
+//   background: url('${props => props.viewImage}') no-repeat center;
+//   background-size: cover;
+// `;
+//
+// const Button = styled.button`
+//   padding: 6px 10px;
+//   border: 1px solid #ccc;
+//   border-radius: 2px;
+//   cursor: pointer;
+//
+//   &:not(:last-child) {
+//     margin-right: 12px;
+//   }
+//
+//   &[type='primary'] {
+//     background: deepskyblue;
+//     border-color: deepskyblue;
+//     color: white;
+//   }
+// `;
+//
+// const DefaultImage = styled.img`
+//   width: 100px;
+//   height: 100px;
+// `;
+//
+// storiesOf('react-photo-view', module)
+//   .add('默认展示', () => (
+//     <PhotoProvider>
+//       <ImageList>
+//         {photoImages.map((item, index) => (
+//           <PhotoConsumer key={index} src={item} intro={item}>
+//             <ViewBox viewImage={item} />
+//           </PhotoConsumer>
+//         ))}
+//       </ImageList>
+//     </PhotoProvider>
+//   ))
+//   .add('两张预览', () => (
+//     <PhotoProvider>
+//       <ImageList>
+//         {photoImages.map((item, index) => (
+//           <PhotoConsumer key={index} src={item}>
+//             {index < 2 ? <ViewBox viewImage={item} /> : undefined}
+//           </PhotoConsumer>
+//         ))}
+//       </ImageList>
+//     </PhotoProvider>
+//   ))
+//   .add('通过按钮触发', () => (
+//     <PhotoProvider>
+//       <ImageList>
+//         <PhotoConsumer src={image4}>
+//           <Button>打开预览</Button>
+//         </PhotoConsumer>
+//       </ImageList>
+//     </PhotoProvider>
+//   ))
+//   .add('自定义加载失败', () => (
+//     <ImageList>
+//       <PhotoProvider>
+//         <PhotoConsumer src={null}>
+//           <Button>无默认图</Button>
+//         </PhotoConsumer>
+//       </PhotoProvider>
+//       <PhotoProvider brokenElement={<DefaultImage src={defaultPhoto} />}>
+//         <PhotoConsumer src={null}>
+//           <Button>自定义默认图</Button>
+//         </PhotoConsumer>
+//       </PhotoProvider>
+//     </ImageList>
+//   ))
+//   .add('受控 PhotoSlider', () => {
+//     const [visible, setVisible] = React.useState(false);
+//     const [photoIndex, setPhotoIndex] = React.useState(0);
+//
+//     function handleShowSlider() {
+//       setVisible(true);
+//     }
+//     function handleCloseSlider() {
+//       setVisible(false);
+//     }
+//     return (
+//       <ImageList>
+//         <Button onClick={() => setPhotoIndex(2)}>setPhotoIndex(2)</Button>
+//         <Button onClick={() => setPhotoIndex(4)}>setPhotoIndex(4)</Button>
+//         <Button onClick={handleShowSlider} type="primary">
+//           打开 PhotoSlider
+//         </Button>
+//
+//         <PhotoSlider
+//           images={photoImages.map(item => ({ src: item }))}
+//           visible={visible}
+//           onClose={handleCloseSlider}
+//           index={photoIndex}
+//           onIndexChange={setPhotoIndex}
+//         />
+//       </ImageList>
+//     );
+//   });

example/stories/Test.stories.mdx

@@ -0,0 +1,91 @@
+import styled from 'styled-components';
+import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { PhotoProvider, PhotoConsumer, PhotoSlider } from 'react-photo-view';
+import 'react-photo-view/dist/index.css';
+import {
+  photoImages,
+  ImageList,
+  ViewBox,
+  Button,
+  DefaultImage,
+  ControlledView,
+} from '../src';
+
+<Meta title="React-photo-view" />
+
+## 默认展示
+
+<Preview>
+  <Story name="默认展示">
+    <PhotoProvider>
+      <ImageList>
+        {photoImages.map((item, index) => (
+          <PhotoConsumer key={index} src={item} intro={item}>
+            <ViewBox viewImage={item} />
+          </PhotoConsumer>
+        ))}
+      </ImageList>
+    </PhotoProvider>
+  </Story>
+</Preview>
+
+## 两张预览
+
+<Preview>
+  <Story name="两张预览">
+    <PhotoProvider>
+      <ImageList>
+        {photoImages.map((item, index) => (
+          <PhotoConsumer key={index} src={item}>
+            {index < 2 ? <ViewBox viewImage={item} /> : undefined}
+          </PhotoConsumer>
+        ))}
+      </ImageList>
+    </PhotoProvider>
+  </Story>
+</Preview>
+
+## 通过按钮触发
+
+<Preview>
+  <Story name="通过按钮触发">
+    <PhotoProvider>
+      <ImageList>
+        <PhotoConsumer src={photoImages[3]}>
+          <Button>打开预览</Button>
+        </PhotoConsumer>
+      </ImageList>
+    </PhotoProvider>
+  </Story>
+</Preview>
+
+## 自定义加载失败
+
+<Preview>
+  <Story name="自定义加载失败">
+    <ImageList>
+      <PhotoProvider>
+        <PhotoConsumer src="">
+          <Button>无默认图</Button>
+        </PhotoConsumer>
+      </PhotoProvider>
+      <PhotoProvider brokenElement={<DefaultImage src="default-photo.svg" />}>
+        <PhotoConsumer src="">
+          <Button>自定义默认图</Button>
+        </PhotoConsumer>
+      </PhotoProvider>
+    </ImageList>
+  </Story>
+</Preview>
+
+## 受控 PhotoSlider
+
+<Preview>
+  <Story name="受控 PhotoSlider">
+    <ControlledView />
+  </Story>
+</Preview>
+
+# Props
+
+<Props of={PhotoSlider} />

example/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react"
+  },
+  "include": ["stories", "src"]
+}

package.json

@@ -23,8 +23,6 @@
     "npm": ">=5"
   },
   "scripts": {
-    "test": "cross-env CI=1 react-scripts-ts test --env=jsdom",
-    "test:watch": "react-scripts-ts test --env=jsdom",
     "build": "rollup -c",
     "start": "rollup -c -w",
     "prepare": "npm run build"
@@ -41,29 +39,25 @@
   "devDependencies": {
     "@svgr/rollup": "^4.3.3",
     "@types/classnames": "^2.2.9",
-    "@types/jest": "^24.0.22",
     "@types/lodash.debounce": "^4.0.6",
     "@types/lodash.uniqueid": "^4.0.6",
-    "@types/react": "^16.9.11",
-    "@types/react-dom": "^16.9.3",
-    "@types/styled-components": "^4.1.21",
-    "babel-core": "^6.26.3",
-    "babel-runtime": "^6.26.0",
+    "@types/react": "^16.9.13",
+    "@types/react-dom": "^16.9.4",
+    "@types/styled-components": "^4.4.0",
     "classnames": "^2.2.6",
     "cross-env": "^6.0.3",
     "less": "^3.10.3",
     "prettier": "^1.18.2",
-    "react": "^16.11.0",
-    "react-dom": "^16.11.0",
-    "react-scripts-ts": "^3.1.0",
-    "rollup": "^1.26.3",
-    "rollup-plugin-babel": "^3.0.7",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "rollup": "^1.27.6",
+    "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-peer-deps-external": "^2.2.0",
     "rollup-plugin-postcss": "^2.0.3",
     "rollup-plugin-typescript2": "^0.25.2",
-    "rollup-plugin-url": "^3.0.0",
+    "rollup-plugin-url": "^3.0.1",
     "typescript": "^3.7.2"
   },
   "files": [

src/types.ts

@@ -9,7 +9,7 @@ export type dataType = {
   // 图片地址
   src: string;
   // 原触发 ref
-  originRef: HTMLElement | null;
+  originRef?: HTMLElement | null;
   // 图片介绍
   intro?: React.ReactNode;
 };