fix: remove findDOMNode in react-flicking (#931)

* fix: remove findDOMNode in react-flicking

* fix: fix error cases in ReactElementProvider

Author: malangfox

packages/react-flicking/src/react-flicking/Flicking.tsx

@@ -332,9 +332,7 @@ class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>
         : getRenderingPanels(vanillaFlicking, diff(origChildren, origChildren))
       : origChildren;
 
-    return this.props.useFindDOMNode
-      ? children.map((child, idx) => <NonStrictPanel key={child.key!} ref={this._panels[idx] as any}>{child}</NonStrictPanel>)
-      : children.map((child, idx) => <StrictPanel key={child.key!} ref={this._panels[idx] as any}>{child}</StrictPanel>)
+      return children.map((child, idx) => <StrictPanel key={child.key!} ref={this._panels[idx] as any}>{child}</StrictPanel>);
   }
 
   private _isFragment(child: React.ReactElement) {

packages/react-flicking/src/react-flicking/NonStrictPanel.tsx

@@ -3,18 +3,21 @@
  * egjs projects are licensed under the MIT license
  */
 import * as React from "react";
-import { findDOMNode } from "react-dom";
 
 class NonStrictPanel extends React.Component<{ children?: React.ReactElement }> {
   private _hide: boolean = false;
+  private _elRef: React.RefObject<HTMLElement> = React.createRef();
 
-  public get nativeElement() { return findDOMNode(this) as HTMLElement; }
+  public get nativeElement() { return this._elRef.current!; }
   public get rendered() { return !this._hide; }
+  public get elRef() { return this._elRef; }
 
   public render() {
     return this._hide
       ? <></>
-      : this.props.children;
+      : React.cloneElement(React.Children.only(this.props.children) as React.ReactElement, {
+        ref: this._elRef
+      });
   }
 
   public show() {

packages/react-flicking/src/react-flicking/ReactElementProvider.ts

@@ -7,21 +7,25 @@ import StrictPanel from "./StrictPanel";
 import NonStrictPanel from "./NonStrictPanel";
 
 class ReactElementProvider implements ElementProvider {
-  private _el: StrictPanel | NonStrictPanel;
+  private _elRef: React.RefObject<HTMLElement>;
 
-  public get element() { return this._el.nativeElement; }
-  public get rendered() { return this._el.rendered; }
+  public get element() { return this._elRef.current!; }
+  public get rendered() { return this._elRef.current != null; }
 
-  public constructor(el: StrictPanel | NonStrictPanel) {
-    this._el = el;
+  public constructor(el: StrictPanel | NonStrictPanel | HTMLDivElement) {
+    this._elRef = el instanceof Element ? { current: el } : el.elRef;
   }
 
   public show() {
-    this._el.show();
+    if (this._elRef.current) {
+      this._elRef.current.style.display = "";
+    }
   }
 
   public hide() {
-    this._el.hide();
+    if (this._elRef.current) {
+      this._elRef.current.style.display = "none";
+    }
   }
 }
 

packages/react-flicking/src/react-flicking/ReactRenderer.ts

@@ -68,13 +68,15 @@ class ReactRenderer extends ExternalRenderer {
   protected _collectPanels() {
     const flicking = getFlickingAttached(this._flicking);
     const reactFlicking = this._reactFlicking;
-    const reactPanels = reactFlicking.reactPanels;
+    const reactPanels = reactFlicking.reactPanels.map(panel => panel instanceof HTMLDivElement ? panel : panel.nativeElement);
 
     this._panels = this._strategy.collectPanels(flicking, reactPanels);
   }
 
   protected _createPanel(externalComponent: StrictPanel | NonStrictPanel | HTMLDivElement, options: PanelOptions) {
-    return this._strategy.createPanel(externalComponent, options);
+    const el = externalComponent instanceof HTMLDivElement ? externalComponent : externalComponent.nativeElement;
+
+    return this._strategy.createPanel(el, options);
   }
 }
 

packages/react-flicking/src/react-flicking/StrictPanel.tsx

@@ -11,6 +11,7 @@ class StrictPanel extends React.Component<{ children?: React.ReactElement }> {
 
   public get nativeElement() { return this._elRef.current!; }
   public get rendered() { return !this._hide; }
+  public get elRef() { return this._elRef; }
 
   public render() {
     return this._hide

src/control/Control.ts

@@ -389,7 +389,9 @@ abstract class Control {
       return animate();
     } else {
       return animate().then(async () => {
-        await flicking.renderer.render();
+        if (flicking.initialized) {
+          await flicking.renderer.render();
+        }
       }).catch(err => {
         if (axesEvent && err instanceof FlickingError && err.code === ERROR.CODE.ANIMATION_INTERRUPTED) return;
         throw err;