feat: support PreviewGroup controlled (#65)

* feat: support PreviewGroup controlled

* improve if preview re show

* rename defaultShowIndex to defaultCurrent and add doc

* rename defaultCurrent to current

* use useMemo hook to cache previewUrlsKeys

* improve calc current key

* remove useMemo

README.md

@@ -81,6 +81,13 @@ ReactDOM.render(
 ), document.getElementById('root'));
 ```
 
+### API
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| preview | boolean \| {visible: boolean,onVisibleChange:function(value, prevValue),getContainer: string \| HTMLElement \| (() => HTMLElement) \| false } | true | Whether to show preview |
+| current | number | 0 | If Preview the show img index |
+
 ## Example
 
 http://localhost:8003/examples/

examples/controlledWithGroup.tsx

@@ -0,0 +1,37 @@
+/* eslint-disable global-require */
+import * as React from 'react';
+import Image from '../src';
+import '../assets/index.less';
+
+export default function Base() {
+  const [visible, setVisible] = React.useState(false);
+  return (
+    <div>
+      <div>
+        <button
+          type="button"
+          onClick={() => {
+            setVisible(true);
+          }}
+        >
+          Switch Preview
+        </button>
+      </div>
+      <Image.PreviewGroup
+        preview={{
+          visible,
+          onVisibleChange: value => {
+            setVisible(value);
+          },
+          current: 1,
+        }}
+      >
+        <Image
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+          width={200}
+        />
+        <Image wrapperStyle={{ marginRight: 24, width: 200 }} src={require('./images/1.jpeg')} />
+      </Image.PreviewGroup>
+    </div>
+  );
+}

src/PreviewGroup.tsx

@@ -1,10 +1,22 @@
 import * as React from 'react';
 import { useState } from 'react';
+import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import { ImagePreviewType } from './Image';
 import Preview, { PreviewProps } from './Preview';
 
+export interface PreviewGroupPreview
+  extends Pick<ImagePreviewType, 'visible' | 'onVisibleChange' | 'getContainer'> {
+  /**
+   * If Preview the show img index
+   * @default 0
+   */
+  current?: number;
+}
+
 export interface GroupConsumerProps {
   previewPrefixCls?: string;
   icons?: PreviewProps['icons'];
+  preview?: boolean | PreviewGroupPreview;
 }
 
 export interface GroupConsumerValue extends GroupConsumerProps {
@@ -35,11 +47,24 @@ const Group: React.FC<GroupConsumerProps> = ({
   previewPrefixCls = 'rc-image-preview',
   children,
   icons = {},
+  preview,
 }) => {
+  const {
+    visible: previewVisible = undefined,
+    onVisibleChange: onPreviewVisibleChange = undefined,
+    getContainer = undefined,
+    current: currentIndex = 0,
+  } = typeof preview === 'object' ? preview : {};
   const [previewUrls, setPreviewUrls] = useState<Map<number, string>>(new Map());
   const [current, setCurrent] = useState<number>();
-  const [isShowPreview, setShowPreview] = useState(false);
+  const [isShowPreview, setShowPreview] = useMergedState(!!previewVisible, {
+    value: previewVisible,
+    onChange: onPreviewVisibleChange,
+  });
   const [mousePosition, setMousePosition] = useState<null | { x: number; y: number }>(null);
+  const isControlled = previewVisible !== undefined;
+  const previewUrlsKeys = Array.from(previewUrls.keys());
+  const currentControlledKey = previewUrlsKeys[currentIndex];
 
   const registerImage = (id: number, url: string) => {
     const unRegister = () => {
@@ -69,6 +94,16 @@ const Group: React.FC<GroupConsumerProps> = ({
     setMousePosition(null);
   };
 
+  React.useEffect(() => {
+    setCurrent(currentControlledKey);
+  }, [currentControlledKey]);
+
+  React.useEffect(() => {
+    if (!isShowPreview && isControlled) {
+      setCurrent(currentControlledKey);
+    }
+  }, [currentControlledKey, isControlled, isShowPreview]);
+
   return (
     <Provider
       value={{
@@ -91,6 +126,7 @@ const Group: React.FC<GroupConsumerProps> = ({
         mousePosition={mousePosition}
         src={previewUrls.get(current)}
         icons={icons}
+        getContainer={getContainer}
       />
     </Provider>
   );

tests/__snapshots__/previewGroup.test.tsx.snap

@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Preview With Controlled 1`] = `
+<div
+  class="rc-image-preview"
+  role="document"
+>
+  <div
+    aria-hidden="true"
+    style="width: 0px; height: 0px; overflow: hidden; outline: none;"
+    tabindex="0"
+  />
+  <div
+    class="rc-image-preview-content"
+  >
+    <div
+      class="rc-image-preview-body"
+    >
+      <ul
+        class="rc-image-preview-operations"
+      >
+        <li
+          class="rc-image-preview-operations-operation"
+        />
+        <li
+          class="rc-image-preview-operations-operation"
+        />
+        <li
+          class="rc-image-preview-operations-operation rc-image-preview-operations-operation-disabled"
+        />
+        <li
+          class="rc-image-preview-operations-operation"
+        />
+        <li
+          class="rc-image-preview-operations-operation"
+        />
+      </ul>
+      <div
+        class="rc-image-preview-img-wrapper"
+        style="transform: translate3d(0px, 0px, 0);"
+      >
+        <img
+          class="rc-image-preview-img"
+          src="src1"
+          style="transform: scale3d(1, 1, 1) rotate(0deg);"
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    aria-hidden="true"
+    style="width: 0px; height: 0px; overflow: hidden; outline: none;"
+    tabindex="0"
+  />
+</div>
+`;

tests/previewGroup.test.tsx

@@ -97,4 +97,27 @@ describe('Preview', () => {
       wrapper.find('.rc-image-preview .rc-image-preview-switch-left-disabled').get(0),
     ).toBeTruthy();
   });
+
+  it('With Controlled', () => {
+    const wrapper = mount(
+      <Image.PreviewGroup preview={{ visible: true }}>
+        <Image src="src1" />
+      </Image.PreviewGroup>,
+    );
+
+    expect(wrapper.find('.rc-image-preview').get(0)).toBeTruthy();
+
+    act(() => {
+      wrapper.setProps({ preview: { visible: false } });
+      jest.runAllTimers();
+      wrapper.update();
+    });
+
+    expect(
+      wrapper
+        .find('.rc-image-preview')
+        .at(0)
+        .render(),
+    ).toMatchSnapshot();
+  });
 });