diff --git a/packages/react-flicking/src/react-flicking/Flicking.tsx b/packages/react-flicking/src/react-flicking/Flicking.tsx index fe3aa0360e..79e0e62472 100644 --- a/packages/react-flicking/src/react-flicking/Flicking.tsx +++ b/packages/react-flicking/src/react-flicking/Flicking.tsx @@ -312,12 +312,12 @@ class Flicking extends React.Component> : {}; return renderingIndexes.map(idx => { - return
} - className={panelClass} - style={size} /> + return +
+ ; }); } diff --git a/packages/react-flicking/src/react-flicking/ReactElementProvider.ts b/packages/react-flicking/src/react-flicking/ReactElementProvider.ts index eeda30acd6..8f4b255442 100644 --- a/packages/react-flicking/src/react-flicking/ReactElementProvider.ts +++ b/packages/react-flicking/src/react-flicking/ReactElementProvider.ts @@ -5,27 +5,24 @@ import { ElementProvider } from "@egjs/flicking"; import StrictPanel from "./StrictPanel"; import NonStrictPanel from "./NonStrictPanel"; +import React from "react"; class ReactElementProvider implements ElementProvider { - private _elRef: React.RefObject; + private _el: StrictPanel; - public get element() { return this._elRef.current!; } - public get rendered() { return this._elRef.current != null; } + public get element() { return this._el?.nativeElement } + public get rendered() { return this._el?.rendered; } - public constructor(el: StrictPanel | NonStrictPanel | HTMLDivElement) { - this._elRef = el instanceof Element ? { current: el } : el.elRef; + public constructor(el: StrictPanel) { + this._el = el; } public show() { - if (this._elRef.current) { - this._elRef.current.style.display = ""; - } + this._el?.show(); } public hide() { - if (this._elRef.current) { - this._elRef.current.style.display = "none"; - } + this._el?.hide(); } } diff --git a/packages/react-flicking/src/react-flicking/ReactRenderer.ts b/packages/react-flicking/src/react-flicking/ReactRenderer.ts index 92f1cd4054..5a59abe646 100644 --- a/packages/react-flicking/src/react-flicking/ReactRenderer.ts +++ b/packages/react-flicking/src/react-flicking/ReactRenderer.ts @@ -74,15 +74,13 @@ class ReactRenderer extends ExternalRenderer { protected _collectPanels() { const flicking = getFlickingAttached(this._flicking); const reactFlicking = this._reactFlicking; - const reactPanels = reactFlicking.reactPanels.map(panel => panel instanceof HTMLDivElement ? panel : panel.nativeElement); + const reactPanels = reactFlicking.reactPanels; this._panels = this._strategy.collectPanels(flicking, reactPanels); } - protected _createPanel(externalComponent: StrictPanel | NonStrictPanel | HTMLDivElement, options: PanelOptions) { - const el = externalComponent instanceof HTMLDivElement ? externalComponent : externalComponent.nativeElement; - - return this._strategy.createPanel(el, options); + protected _createPanel(externalComponent: StrictPanel, options: PanelOptions) { + return this._strategy.createPanel(externalComponent, options); } } diff --git a/src/cfc/sync.ts b/src/cfc/sync.ts index 0cc5a52d12..a250d0209d 100644 --- a/src/cfc/sync.ts +++ b/src/cfc/sync.ts @@ -87,6 +87,16 @@ export default (flicking: Flicking, diffResult: DiffResult, rendered: any[] if (diffResult.added.length > 0 || diffResult.removed.length > 0) { renderer.updateAfterPanelChange(added, removed); + } else if (diffResult.ordered.length > 0) { + const camera = flicking.camera; + // 순서 변경으로 인한 index 변경 및 range 값 변경 + camera.updateRange(); + // index 변경으로 인한 카메라 위치 즉시 변경 + camera.updateOffset(); + // 순서 변경으로 인한 anchors 전부 업데이트 + camera.updateAnchors(); + // need panel 여부 재확인 필요 + camera.resetNeedPanelHistory(); } };