@egjs/react-flicking 4.3.2 → 4.4.0

package/dist/flicking.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"flicking.esm.js","sources":["../src/react-flicking/consts.ts","../src/react-flicking/ReactPanel.ts","../src/react-flicking/ReactRenderer.ts","../src/react-flicking/NonStrictPanelComponent.tsx","../src/react-flicking/StrictPanelComponent.tsx","../src/react-flicking/ViewportSlot.tsx","../src/react-flicking/Flicking.tsx","../src/react-flicking/index.ts"],"sourcesContent":["/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport {\n  SelectEvent,\n  NeedPanelEvent,\n  VisibleChangeEvent,\n  HoldStartEvent,\n  HoldEndEvent,\n  MoveStartEvent,\n  MoveEvent,\n  MoveEndEvent,\n  WillChangeEvent,\n  ChangedEvent,\n  WillRestoreEvent,\n  RestoredEvent,\n  ReadyEvent,\n  BeforeResizeEvent,\n  AfterResizeEvent,\n  ReachEdgeEvent,\n  PanelChangeEvent\n} from \"@egjs/flicking\";\n\nimport { FlickingProps } from \"./types\";\n\nexport const DEFAULT_PROPS: FlickingProps = {\n  viewportTag: \"div\",\n  cameraTag: \"div\",\n  plugins: [],\n  useFindDOMNode: false,\n  hideBeforeInit: false,\n  firstPanelSize: undefined,\n  onReady: (e: ReadyEvent) => {},\n  onBeforeResize: (e: BeforeResizeEvent) => {},\n  onAfterResize: (e: AfterResizeEvent) => {},\n  onHoldStart: (e: HoldStartEvent) => {},\n  onHoldEnd: (e: HoldEndEvent) => {},\n  onMoveStart: (e: MoveStartEvent) => {},\n  onMove: (e: MoveEvent) => {},\n  onMoveEnd: (e: MoveEndEvent) => {},\n  onWillChange: (e: WillChangeEvent) => {},\n  onChanged: (e: ChangedEvent) => {},\n  onWillRestore: (e: WillRestoreEvent) => {},\n  onRestored: (e: RestoredEvent) => {},\n  onSelect: (e: SelectEvent) => {},\n  onNeedPanel: (e: NeedPanelEvent) => {},\n  onVisibleChange: (e: VisibleChangeEvent) => {},\n  onReachEdge: (e: ReachEdgeEvent) => {},\n  onPanelChange: (e: PanelChangeEvent) => {}\n};\n","import { ExternalPanel } from \"@egjs/flicking\";\n\nimport NonStrictPanelComponent from \"./NonStrictPanelComponent\";\n\nclass ReactPanel extends ExternalPanel<NonStrictPanelComponent> {\n  public get element() {\n    return this._externalComponent.element as HTMLElement;\n  }\n  public get rendered() { return !this._externalComponent.hide; }\n\n  public markForShow() {\n    this._externalComponent.hide = false;\n  }\n\n  public markForHide() {\n    this._externalComponent.hide = true;\n  }\n}\n\nexport default ReactPanel;\n","import { ExternalRenderer, PanelOptions, RendererOptions } from \"@egjs/flicking\";\n\nimport ReactFlicking from \"./Flicking\";\nimport ReactPanel from \"./ReactPanel\";\nimport NonStrictPanelComponent from \"./NonStrictPanelComponent\";\n\nexport interface ReactRendererOptions extends RendererOptions {\n  reactFlicking: ReactFlicking;\n}\n\nclass ReactRenderer extends ExternalRenderer {\n  // Internal States\n  protected _reactFlicking: ReactFlicking;\n\n  public constructor(options: ReactRendererOptions) {\n    super(options);\n\n    this._reactFlicking = options.reactFlicking;\n  }\n\n  // eslint-disable-next-line @typescript-eslint/require-await\n  public async render() {\n    const flicking = this._flicking;\n    const reactFlicking = this._reactFlicking;\n\n    if (!flicking || !reactFlicking.mounted) return;\n\n    this._updateRenderingPanels();\n\n    return new Promise<void>(resolve => {\n      reactFlicking.setRenderCallback(resolve);\n      reactFlicking.setState({});\n    });\n  }\n\n  public async forceRenderAllPanels() {\n    const reactFlicking = this._reactFlicking;\n\n    if (!reactFlicking.mounted) return;\n\n    this._panels.forEach(panel => panel.markForShow());\n\n    return new Promise<void>(resolve => {\n      reactFlicking.setRenderCallback(resolve);\n      reactFlicking.setState({});\n    });\n  }\n\n  protected _collectPanels() {\n    const align = this._getPanelAlign();\n    const children = this._reactFlicking.reactPanels;\n\n    this._panels = children.map((panelComponent, index) => new ReactPanel({\n      flicking: this._flicking!,\n      index,\n      align,\n      externalComponent: panelComponent\n    }));\n  }\n\n  protected _createPanel(externalComponent: NonStrictPanelComponent, options: PanelOptions) {\n    return new ReactPanel({ externalComponent, ...options });\n  }\n}\n\nexport default ReactRenderer;\n","import * as React from \"react\";\nimport { findDOMNode } from \"react-dom\";\n\nimport ReactPanelComponent from \"./ReactPanelComponent\";\n\nclass NonStrictPanelComponent extends React.Component implements ReactPanelComponent {\n  public hide: boolean = false;\n\n  public get element() { return findDOMNode(this) as HTMLElement; }\n\n  public render() {\n    return this.hide\n      ? <></>\n      : this.props.children;\n  }\n}\n\nexport default NonStrictPanelComponent;\n","import * as React from \"react\";\nimport ReactPanelComponent from \"./ReactPanelComponent\";\n\nclass StrictPanelComponent extends React.Component implements ReactPanelComponent {\n  public hide: boolean = false;\n\n  private _elRef: React.RefObject<HTMLElement> = React.createRef();\n\n  public get element() { return this._elRef.current!; }\n\n  public render() {\n    return this.hide\n      ? <></>\n      : this._getElement();\n  }\n\n  private _getElement() {\n    return React.cloneElement(React.Children.only(this.props.children) as React.ReactElement, {\n      ref: this._elRef\n    });\n  }\n}\n\nexport default StrictPanelComponent;\n","import React from \"react\";\n\nconst ViewportSlot: React.FC = ({ children }) => <>{children}</>;\n\nexport default ViewportSlot;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport * as React from \"react\";\nimport ListDiffer, { DiffResult } from \"@egjs/list-differ\";\nimport VanillaFlicking, {\n  FlickingOptions,\n  EVENTS,\n  withFlickingMethods,\n  sync,\n  getRenderingPanels,\n  getDefaultCameraTransform,\n  Plugin\n} from \"@egjs/flicking\";\nimport { isFragment } from \"react-is\";\n\nimport { DEFAULT_PROPS } from \"./consts\";\nimport { FlickingProps } from \"./types\";\nimport ReactRenderer from \"./ReactRenderer\";\nimport ReactPanelComponent from \"./ReactPanelComponent\";\nimport NonStrictPanelComponent from \"./NonStrictPanelComponent\";\nimport StrictPanelComponent from \"./StrictPanelComponent\";\nimport ViewportSlot from \"./ViewportSlot\";\n\nclass Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>> {\n  public static defaultProps: FlickingProps = DEFAULT_PROPS;\n\n  @withFlickingMethods private _vanillaFlicking: VanillaFlicking;\n  private _panels: React.RefObject<ReactPanelComponent>[] = [];\n  private _pluginsDiffer: ListDiffer<any>;\n  private _jsxDiffer: ListDiffer<React.ReactElement>;\n  private _viewportElement: HTMLElement;\n  private _diffResult: DiffResult<React.ReactElement> | null;\n  private _mounted: boolean;\n  private _renderCallback: () => any;\n\n  public get mounted() { return this._mounted; }\n  public get reactPanels() { return this._panels.map(panel => panel.current!); }\n\n  public constructor(props) {\n    super(props);\n\n    this._panels = this._getChildren().map(() => React.createRef());\n  }\n\n  public setRenderCallback(callback: () => any) {\n    this._renderCallback = callback;\n  }\n\n  public componentDidMount() {\n    this._mounted = true;\n\n    const props = this.props as Required<FlickingProps>;\n\n    const flicking = new VanillaFlicking(\n      this._viewportElement,\n      {\n        ...props,\n        ...{ renderExternal: {\n          renderer: ReactRenderer as any,\n          rendererOptions: { reactFlicking: this }\n        }}\n      },\n    );\n\n    this._vanillaFlicking = flicking;\n    this._bindEvents();\n\n    const children = this._getChildren();\n    this._jsxDiffer = new ListDiffer(children, panel => panel.key!);\n    this._pluginsDiffer = new ListDiffer<any>();\n\n    this._checkPlugins();\n  }\n\n  public componentWillUnmount() {\n    this._mounted = false;\n\n    this._vanillaFlicking.destroy();\n  }\n\n  public shouldComponentUpdate(nextProps: this[\"props\"]) {\n    const children = this._getChildren(nextProps.children);\n    const diffResult = this._jsxDiffer.update(children);\n\n    this._panels = children.map(() => React.createRef());\n    this._diffResult = diffResult;\n\n    return true;\n  }\n\n  public componentDidUpdate() {\n    const flicking = this._vanillaFlicking;\n    const diffResult = this._diffResult;\n\n    this._checkPlugins();\n    this._renderCallback && this._renderCallback();\n\n    if (!diffResult || !flicking.initialized) return;\n\n    sync(flicking, diffResult, this.reactPanels);\n\n    if (diffResult.added.length > 0 || diffResult.removed.length > 0) {\n      this.setState({});\n    }\n\n    this._diffResult = null;\n  }\n\n  public render() {\n    const props = this.props;\n    const Viewport = props.viewportTag as any;\n    const Camera = props.cameraTag as any;\n    const attributes: { [key: string]: any } = {};\n    const flicking = this._vanillaFlicking;\n    const initialized = this._diffResult && flicking && flicking.initialized;\n\n    for (const name in props) {\n      if (!(name in DEFAULT_PROPS) && !(name in VanillaFlicking.prototype)) {\n        attributes[name] = props[name];\n      }\n    }\n\n    const viewportClasses: string[] = [\"flicking-viewport\"];\n    const isHorizontal = flicking\n      ? flicking.horizontal\n      : props.horizontal ?? true;\n\n    if (!isHorizontal) {\n      viewportClasses.push(\"vertical\");\n    }\n    if (props.hideBeforeInit && !initialized) {\n      viewportClasses.push(\"flicking-hidden\");\n    }\n    if (attributes.className) {\n      viewportClasses.push(attributes.className);\n    }\n\n    const cameraProps = !initialized && props.firstPanelSize\n      ? { style: {\n        transform: getDefaultCameraTransform(this.props.align, this.props.horizontal, this.props.firstPanelSize)\n      }}\n      : {};\n\n    const children = initialized\n      ? getRenderingPanels(flicking, this._diffResult!)\n      : this._getChildren();\n    const panels = this.props.useFindDOMNode\n      ? children.map((child, idx) => <NonStrictPanelComponent key={child.key!} ref={this._panels[idx]}>{child}</NonStrictPanelComponent>)\n      : children.map((child, idx) => <StrictPanelComponent key={child.key!} ref={this._panels[idx] as any}>{child}</StrictPanelComponent>)\n\n    return (\n      <Viewport {...attributes} className={viewportClasses.join(\" \")} ref={(e?: HTMLElement) => {\n        e && (this._viewportElement = e);\n      }}>\n        <Camera className=\"flicking-camera\" {...cameraProps}>\n          { panels }\n        </Camera>\n        { this._getViewportSlot() }\n      </Viewport>\n    );\n  }\n\n  private _bindEvents() {\n    const flicking = this._vanillaFlicking!;\n    const props = this.props as Required<FlickingProps>;\n\n    Object.keys(EVENTS).forEach((eventKey: keyof typeof EVENTS) => {\n      const eventName = EVENTS[eventKey];\n      const propName = `on${eventName.charAt(0).toUpperCase() + eventName.slice(1)}`;\n\n      flicking.on(eventName, e => {\n        e.currentTarget = this;\n\n        props[propName](e);\n      });\n    });\n\n    flicking.once(EVENTS.READY, () => {\n      this.forceUpdate();\n    });\n  }\n\n  private _checkPlugins() {\n    const { list, added, removed, prevList } = this._pluginsDiffer.update(this.props.plugins!) as DiffResult<Plugin>;\n\n    this._vanillaFlicking.addPlugins(...added.map(index => list[index]));\n    this._vanillaFlicking.removePlugins(...removed.map(index => prevList[index]));\n  }\n\n  private _getChildren(children: React.ReactNode = this.props.children) {\n    return (React.Children.toArray(children) as Array<React.ReactElement<any>>)\n      .filter(child => child.type !== ViewportSlot)\n      .reduce((all, child) => {\n        return [...all, ...this._unpackFragment(child)];\n      }, []) as Array<React.ReactElement<any>>;\n  }\n\n  private _getViewportSlot() {\n    return (React.Children.toArray(this.props.children) as Array<React.ReactElement<any>>)\n      .filter(child => child.type === ViewportSlot);\n  }\n\n  private _unpackFragment(child: React.ReactElement) {\n    return isFragment(child)\n      ? React.Children.toArray(child.props.children)\n        .reduce((allChilds, fragChild) => [...allChilds, ...this._unpackFragment(fragChild)], [])\n      : [child];\n  }\n}\n\ninterface Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>, VanillaFlicking { }\nexport default Flicking;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport Flicking from \"./Flicking\";\nimport ViewportSlot from \"./ViewportSlot\";\n\nexport * from \"@egjs/flicking\";\nexport * from \"./types\";\n\nexport {\n  ViewportSlot\n}\nexport default Flicking;\n"],"names":["DEFAULT_PROPS","viewportTag","cameraTag","plugins","useFindDOMNode","hideBeforeInit","firstPanelSize","undefined","onReady","e","onBeforeResize","onAfterResize","onHoldStart","onHoldEnd","onMoveStart","onMove","onMoveEnd","onWillChange","onChanged","onWillRestore","onRestored","onSelect","onNeedPanel","onVisibleChange","onReachEdge","onPanelChange","__extends","Object","_externalComponent","element","hide","ExternalPanel","options","_super","_this","_reactFlicking","reactFlicking","flicking","_flicking","mounted","_updateRenderingPanels","Promise","resolve","setRenderCallback","setState","_panels","forEach","panel","markForShow","align","_getPanelAlign","children","reactPanels","map","panelComponent","index","ReactPanel","externalComponent","ExternalRenderer","findDOMNode","React","props","Component","createRef","_elRef","current","_getElement","cloneElement","Children","only","ref","ViewportSlot","_a","_getChildren","_mounted","callback","_renderCallback","VanillaFlicking","_viewportElement","renderExternal","renderer","ReactRenderer","rendererOptions","_vanillaFlicking","_bindEvents","_jsxDiffer","ListDiffer","key","_pluginsDiffer","_checkPlugins","destroy","nextProps","diffResult","update","_diffResult","initialized","sync","added","length","removed","Viewport","Camera","attributes","name","prototype","viewportClasses","isHorizontal","horizontal","push","className","cameraProps","style","transform","getDefaultCameraTransform","getRenderingPanels","panels","child","idx","NonStrictPanelComponent","StrictPanelComponent","join","_getViewportSlot","keys","EVENTS","eventKey","eventName","propName","charAt","toUpperCase","slice","on","currentTarget","once","READY","forceUpdate","_c","list","prevList","addPlugins","_b","removePlugins","toArray","filter","type","reduce","all","_unpackFragment","isFragment","allChilds","fragChild","Flicking","__decorate","withFlickingMethods"],"mappings":"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"}
+{"version":3,"file":"flicking.esm.js","sources":["../src/react-flicking/consts.ts","../src/react-flicking/ReactRenderer.ts","../src/react-flicking/StrictPanel.tsx","../src/react-flicking/NonStrictPanel.tsx","../src/react-flicking/ViewportSlot.tsx","../src/react-flicking/ReactElementProvider.ts","../src/react-flicking/Flicking.tsx","../src/react-flicking/index.ts"],"sourcesContent":["/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport {\n  SelectEvent,\n  NeedPanelEvent,\n  VisibleChangeEvent,\n  HoldStartEvent,\n  HoldEndEvent,\n  MoveStartEvent,\n  MoveEvent,\n  MoveEndEvent,\n  WillChangeEvent,\n  ChangedEvent,\n  WillRestoreEvent,\n  RestoredEvent,\n  ReadyEvent,\n  BeforeResizeEvent,\n  AfterResizeEvent,\n  ReachEdgeEvent,\n  PanelChangeEvent\n} from \"@egjs/flicking\";\n\nimport { FlickingProps } from \"./types\";\n\nexport const DEFAULT_PROPS: FlickingProps = {\n  viewportTag: \"div\",\n  cameraTag: \"div\",\n  plugins: [],\n  useFindDOMNode: false,\n  hideBeforeInit: false,\n  onReady: (e: ReadyEvent) => {},\n  onBeforeResize: (e: BeforeResizeEvent) => {},\n  onAfterResize: (e: AfterResizeEvent) => {},\n  onHoldStart: (e: HoldStartEvent) => {},\n  onHoldEnd: (e: HoldEndEvent) => {},\n  onMoveStart: (e: MoveStartEvent) => {},\n  onMove: (e: MoveEvent) => {},\n  onMoveEnd: (e: MoveEndEvent) => {},\n  onWillChange: (e: WillChangeEvent) => {},\n  onChanged: (e: ChangedEvent) => {},\n  onWillRestore: (e: WillRestoreEvent) => {},\n  onRestored: (e: RestoredEvent) => {},\n  onSelect: (e: SelectEvent) => {},\n  onNeedPanel: (e: NeedPanelEvent) => {},\n  onVisibleChange: (e: VisibleChangeEvent) => {},\n  onReachEdge: (e: ReachEdgeEvent) => {},\n  onPanelChange: (e: PanelChangeEvent) => {}\n};\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport { ExternalRenderer, PanelOptions, RendererOptions, getFlickingAttached } from \"@egjs/flicking\";\n\nimport ReactFlicking from \"./Flicking\";\nimport StrictPanel from \"./StrictPanel\";\nimport NonStrictPanel from \"./NonStrictPanel\";\n\nexport interface ReactRendererOptions extends RendererOptions {\n  reactFlicking: ReactFlicking;\n}\n\nclass ReactRenderer extends ExternalRenderer {\n  // Internal States\n  protected _reactFlicking: ReactFlicking;\n\n  public constructor(options: ReactRendererOptions) {\n    super(options);\n\n    this._reactFlicking = options.reactFlicking;\n  }\n\n  // eslint-disable-next-line @typescript-eslint/require-await\n  public async render() {\n    const flicking = getFlickingAttached(this._flicking);\n    const reactFlicking = this._reactFlicking;\n    const strategy = this._strategy;\n\n    strategy.updateRenderingPanels(flicking);\n    strategy.renderPanels(flicking);\n\n    return new Promise<void>(resolve => {\n      reactFlicking.renderEmitter.once(\"render\", resolve);\n      reactFlicking.forceUpdate();\n    });\n  }\n\n  public async forceRenderAllPanels() {\n    const reactFlicking = this._reactFlicking;\n\n    await super.forceRenderAllPanels();\n\n    return new Promise<void>(resolve => {\n      reactFlicking.renderEmitter.once(\"render\", resolve);\n      reactFlicking.forceUpdate();\n    });\n  }\n\n  protected _collectPanels() {\n    const flicking = getFlickingAttached(this._flicking);\n    const reactFlicking = this._reactFlicking;\n    const reactPanels = reactFlicking.reactPanels;\n\n    this._panels = this._strategy.collectPanels(flicking, reactPanels);\n  }\n\n  protected _createPanel(externalComponent: StrictPanel | NonStrictPanel | HTMLDivElement, options: PanelOptions) {\n    return this._strategy.createPanel(externalComponent, options);\n  }\n}\n\nexport default ReactRenderer;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport * as React from \"react\";\n\nclass StrictPanel extends React.Component {\n  private _hide: boolean = false;\n\n  private _elRef: React.RefObject<HTMLElement> = React.createRef();\n\n  public get nativeElement() { return this._elRef.current!; }\n  public get rendered() { return !this._hide; }\n\n  public render() {\n    return this._hide\n      ? <></>\n      : this._getElement();\n  }\n\n  public show() {\n    this._hide = false;\n  }\n\n  public hide() {\n    this._hide = true;\n  }\n\n  private _getElement() {\n    return React.cloneElement(React.Children.only(this.props.children) as React.ReactElement, {\n      ref: this._elRef\n    });\n  }\n}\n\nexport default StrictPanel;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport * as React from \"react\";\nimport { findDOMNode } from \"react-dom\";\n\nclass NonStrictPanel extends React.Component {\n  private _hide: boolean = false;\n\n  public get nativeElement() { return findDOMNode(this) as HTMLElement; }\n  public get rendered() { return !this._hide; }\n\n  public render() {\n    return this._hide\n      ? <></>\n      : this.props.children;\n  }\n\n  public show() {\n    this._hide = false;\n  }\n\n  public hide() {\n    this._hide = true;\n  }\n}\n\nexport default NonStrictPanel;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport React from \"react\";\n\nconst ViewportSlot: React.FC = ({ children }) => <>{children}</>;\n\nexport default ViewportSlot;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport { ExternalElementProvider } from \"@egjs/flicking\";\nimport StrictPanel from \"./StrictPanel\";\nimport NonStrictPanel from \"./NonStrictPanel\";\n\nclass ReactElementProvider implements ExternalElementProvider {\n  private _el: StrictPanel | NonStrictPanel;\n\n  public get element() { return this._el.nativeElement; }\n  public get rendered() { return this._el.rendered; }\n\n  public constructor(el: StrictPanel | NonStrictPanel) {\n    this._el = el;\n  }\n\n  public show() {\n    this._el.show();\n  }\n\n  public hide() {\n    this._el.hide();\n  }\n}\n\nexport default ReactElementProvider;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport * as React from \"react\";\nimport Component from \"@egjs/component\";\nimport ListDiffer, { DiffResult } from \"@egjs/list-differ\";\nimport VanillaFlicking, {\n  FlickingOptions,\n  VirtualRenderingStrategy,\n  EVENTS,\n  withFlickingMethods,\n  sync,\n  getRenderingPanels,\n  getDefaultCameraTransform,\n  Plugin,\n  range,\n  NormalRenderingStrategy,\n  ExternalPanel\n} from \"@egjs/flicking\";\nimport { isFragment } from \"react-is\";\n\nimport { DEFAULT_PROPS } from \"./consts\";\nimport { FlickingProps } from \"./types\";\nimport ReactRenderer, { ReactRendererOptions } from \"./ReactRenderer\";\nimport StrictPanel from \"./StrictPanel\";\nimport NonStrictPanel from \"./NonStrictPanel\";\nimport ViewportSlot from \"./ViewportSlot\";\nimport ReactElementProvider from \"./ReactElementProvider\";\n\nclass Flicking extends React.PureComponent<Partial<FlickingProps & FlickingOptions>> {\n  public static defaultProps: FlickingProps = DEFAULT_PROPS;\n\n  @withFlickingMethods private _vanillaFlicking: VanillaFlicking;\n  private _panels: React.RefObject<StrictPanel | NonStrictPanel | HTMLDivElement>[] = [];\n  private _pluginsDiffer: ListDiffer<any>;\n  private _jsxDiffer: ListDiffer<React.ReactElement>;\n  private _viewportElement: HTMLElement;\n  private _diffResult: DiffResult<React.ReactElement> | null;\n  private _renderEmitter = new Component<{ render: void }>();\n\n  public get reactPanels() { return this._panels.map(panel => panel.current!); }\n  public get renderEmitter() { return this._renderEmitter; }\n\n  public componentDidMount() {\n    const props = this.props as Required<FlickingProps & FlickingOptions>;\n    const rendererOptions: ReactRendererOptions = {\n      reactFlicking: this,\n      strategy: props.virtual && props.panelsPerView > 0\n        ? new VirtualRenderingStrategy()\n        : new NormalRenderingStrategy({\n          providerCtor: ReactElementProvider,\n          panelCtor: ExternalPanel\n        })\n    };\n\n    const flicking = new VanillaFlicking(\n      this._viewportElement,\n      {\n        ...props,\n        ...{ renderExternal: {\n          renderer: ReactRenderer,\n          rendererOptions\n        }}\n      },\n    );\n\n    this._vanillaFlicking = flicking;\n\n    const children = this._getChildren();\n    this._jsxDiffer = new ListDiffer(children, panel => panel.key!);\n    this._pluginsDiffer = new ListDiffer<any>();\n\n    this._bindEvents();\n    this._checkPlugins();\n\n    if (props.status) {\n      flicking.setStatus(props.status);\n    }\n  }\n\n  public componentWillUnmount() {\n    this._vanillaFlicking?.destroy();\n  }\n\n  public componentDidUpdate() {\n    const flicking = this._vanillaFlicking;\n    const diffResult = this._diffResult;\n\n    this._checkPlugins();\n    this._renderEmitter.trigger(\"render\");\n\n    if (!diffResult || !flicking.initialized) return;\n\n    sync(flicking, diffResult, this.reactPanels);\n\n    if (diffResult.added.length > 0 || diffResult.removed.length > 0) {\n      this.forceUpdate();\n    }\n\n    this._diffResult = null;\n  }\n\n  public render() {\n    const props = this.props;\n    const Viewport = props.viewportTag as any;\n    const Camera = props.cameraTag as any;\n    const attributes: { [key: string]: any } = {};\n    const flicking = this._vanillaFlicking;\n    const children = this._getChildren(props.children);\n    const diffResult = this._jsxDiffer?.update(children) ?? null;\n\n    this._panels = this._createPanelRefs(props, children);\n    this._diffResult = diffResult;\n\n    for (const name in props) {\n      if (!(name in DEFAULT_PROPS) && !(name in VanillaFlicking.prototype)) {\n        attributes[name] = props[name];\n      }\n    }\n\n    const initialized = !!this._diffResult && flicking && flicking.initialized;\n    const viewportClasses: string[] = [\"flicking-viewport\"];\n    const isHorizontal = flicking\n      ? flicking.horizontal\n      : props.horizontal ?? true;\n\n    if (!isHorizontal) {\n      viewportClasses.push(\"vertical\");\n    }\n    if (props.hideBeforeInit && !initialized) {\n      viewportClasses.push(\"flicking-hidden\");\n    }\n    if (attributes.className) {\n      viewportClasses.push(attributes.className);\n    }\n\n    const cameraProps = !initialized && props.firstPanelSize\n      ? { style: {\n        transform: getDefaultCameraTransform(this.props.align, this.props.horizontal, this.props.firstPanelSize)\n      }}\n      : {};\n\n    const panels = !!props.virtual && (props.panelsPerView ?? -1) > 0\n      ? this._getVirtualPanels(initialized)\n      : this._getPanels(initialized);\n\n    return (\n      <Viewport {...attributes} className={viewportClasses.join(\" \")} ref={(e?: HTMLElement) => {\n        e && (this._viewportElement = e);\n      }}>\n        <Camera className=\"flicking-camera\" {...cameraProps}>\n          { panels }\n        </Camera>\n        { this._getViewportSlot() }\n      </Viewport>\n    );\n  }\n\n  private _createPanelRefs(props: this[\"props\"], children: Array<React.ReactElement<any>>): React.RefObject<StrictPanel | NonStrictPanel | HTMLDivElement>[] {\n    const panelsPerView = props.panelsPerView ?? -1;\n\n    return panelsPerView > 0 && !!props.virtual\n      ? range(panelsPerView + 1).map(() => React.createRef())\n      : children.map(() => React.createRef());\n  }\n\n  private _bindEvents() {\n    const flicking = this._vanillaFlicking!;\n    const props = this.props as Required<FlickingProps>;\n\n    Object.keys(EVENTS).forEach((eventKey: keyof typeof EVENTS) => {\n      const eventName = EVENTS[eventKey];\n      const propName = `on${eventName.charAt(0).toUpperCase() + eventName.slice(1)}`;\n\n      flicking.on(eventName, e => {\n        e.currentTarget = this;\n\n        props[propName](e);\n      });\n    });\n\n    flicking.once(EVENTS.READY, () => {\n      this.forceUpdate();\n    });\n  }\n\n  private _checkPlugins() {\n    const flicking = this._vanillaFlicking;\n    const { list, added, removed, prevList } = this._pluginsDiffer.update(this.props.plugins!) as DiffResult<Plugin>;\n\n    flicking.addPlugins(...added.map(index => list[index]));\n    flicking.removePlugins(...removed.map(index => prevList[index]));\n  }\n\n  private _getChildren(children: React.ReactNode = this.props.children) {\n    return (React.Children.toArray(children) as Array<React.ReactElement<any>>)\n      .filter(child => child.type !== ViewportSlot)\n      .reduce((all, child) => {\n        return [...all, ...this._unpackFragment(child)];\n      }, []) as Array<React.ReactElement<any>>;\n  }\n\n  private _getViewportSlot() {\n    return (React.Children.toArray(this.props.children) as Array<React.ReactElement<any>>)\n      .filter(child => child.type === ViewportSlot);\n  }\n\n  private _unpackFragment(child: React.ReactElement) {\n    return isFragment(child)\n      ? React.Children.toArray(child.props.children)\n        .reduce((allChilds, fragChild) => [...allChilds, ...this._unpackFragment(fragChild)], [])\n      : [child];\n  }\n\n  private _getVirtualPanels(initialized: boolean) {\n    const {\n      panelClass = \"flicking-panel\"\n    } = this.props.virtual!;\n    const panelsPerView = this.props.panelsPerView!;\n    const flicking = this._vanillaFlicking;\n\n    const renderingIndexes = initialized\n      ? flicking.renderer.strategy.getRenderingIndexesByOrder(flicking)\n      : range(panelsPerView + 1);\n\n    const firstPanel = flicking && flicking.panels[0];\n    const size = firstPanel\n      ? flicking.horizontal\n        ? { width: firstPanel.size }\n        : { height: firstPanel.size }\n      : {};\n\n    return renderingIndexes.map(idx => {\n      return <div\n        key={idx}\n        data-element-index={idx}\n        ref={this._panels[idx] as React.RefObject<HTMLDivElement>}\n        className={panelClass}\n        style={size} />\n    });\n  }\n\n  private _getPanels(initialized: boolean) {\n    const children = initialized\n      ? getRenderingPanels(this._vanillaFlicking, this._diffResult!)\n      : this._getChildren();\n\n    return this.props.useFindDOMNode\n      ? children.map((child, idx) => <NonStrictPanel key={child.key!} ref={this._panels[idx] as any}>{child}</NonStrictPanel>)\n      : children.map((child, idx) => <StrictPanel key={child.key!} ref={this._panels[idx] as any}>{child}</StrictPanel>)\n  }\n}\n\ninterface Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>, VanillaFlicking { }\nexport default Flicking;\n","/*\n * Copyright (c) 2015 NAVER Corp.\n * egjs projects are licensed under the MIT license\n */\nimport Flicking from \"./Flicking\";\nimport ViewportSlot from \"./ViewportSlot\";\n\nexport * from \"@egjs/flicking\";\nexport * from \"./types\";\n\nexport {\n  ViewportSlot\n}\nexport default Flicking;\n"],"names":["DEFAULT_PROPS","viewportTag","cameraTag","plugins","useFindDOMNode","hideBeforeInit","onReady","e","onBeforeResize","onAfterResize","onHoldStart","onHoldEnd","onMoveStart","onMove","onMoveEnd","onWillChange","onChanged","onWillRestore","onRestored","onSelect","onNeedPanel","onVisibleChange","onReachEdge","onPanelChange","__extends","options","_super","_this","_reactFlicking","reactFlicking","flicking","getFlickingAttached","_flicking","strategy","_strategy","updateRenderingPanels","renderPanels","Promise","resolve","renderEmitter","once","forceUpdate","forceRenderAllPanels","_a","reactPanels","_panels","collectPanels","externalComponent","createPanel","ExternalRenderer","React","createRef","Object","_elRef","current","_hide","_getElement","cloneElement","Children","only","props","children","ref","Component","findDOMNode","ViewportSlot","el","_el","nativeElement","rendered","show","hide","map","panel","_renderEmitter","rendererOptions","virtual","panelsPerView","VirtualRenderingStrategy","NormalRenderingStrategy","providerCtor","ReactElementProvider","panelCtor","ExternalPanel","VanillaFlicking","_viewportElement","renderExternal","renderer","ReactRenderer","_vanillaFlicking","_getChildren","_jsxDiffer","ListDiffer","key","_pluginsDiffer","_bindEvents","_checkPlugins","status","setStatus","destroy","diffResult","_diffResult","trigger","initialized","sync","added","length","removed","Viewport","Camera","attributes","update","_createPanelRefs","name","prototype","viewportClasses","isHorizontal","horizontal","push","className","cameraProps","firstPanelSize","style","transform","getDefaultCameraTransform","align","panels","_getVirtualPanels","_getPanels","join","_getViewportSlot","range","keys","EVENTS","forEach","eventKey","eventName","propName","charAt","toUpperCase","slice","on","currentTarget","READY","list","prevList","addPlugins","index","removePlugins","toArray","filter","child","type","reduce","all","_unpackFragment","isFragment","allChilds","fragChild","panelClass","renderingIndexes","getRenderingIndexesByOrder","firstPanel","size","width","height","idx","getRenderingPanels","NonStrictPanel","StrictPanel","Flicking","__decorate","withFlickingMethods","PureComponent"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egjs/react-flicking",
-  "version": "4.3.2",
+  "version": "4.4.0",
   "description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
   "main": "dist/flicking.cjs.js",
   "module": "dist/flicking.esm.js",
@@ -16,7 +16,7 @@
     "eject": "react-scripts eject"
   },
   "dependencies": {
-    "@egjs/flicking": "^4.3.1",
+    "@egjs/flicking": "^4.4.0",
     "@egjs/list-differ": "^1.0.0",
     "react-is": "^17.0.2"
   },

package/src/react-flicking/Flicking.tsx

@@ -3,91 +3,84 @@
  * egjs projects are licensed under the MIT license
  */
 import * as React from "react";
+import Component from "@egjs/component";
 import ListDiffer, { DiffResult } from "@egjs/list-differ";
 import VanillaFlicking, {
   FlickingOptions,
+  VirtualRenderingStrategy,
   EVENTS,
   withFlickingMethods,
   sync,
   getRenderingPanels,
   getDefaultCameraTransform,
-  Plugin
+  Plugin,
+  range,
+  NormalRenderingStrategy,
+  ExternalPanel
 } from "@egjs/flicking";
 import { isFragment } from "react-is";
 
 import { DEFAULT_PROPS } from "./consts";
 import { FlickingProps } from "./types";
-import ReactRenderer from "./ReactRenderer";
-import ReactPanelComponent from "./ReactPanelComponent";
-import NonStrictPanelComponent from "./NonStrictPanelComponent";
-import StrictPanelComponent from "./StrictPanelComponent";
+import ReactRenderer, { ReactRendererOptions } from "./ReactRenderer";
+import StrictPanel from "./StrictPanel";
+import NonStrictPanel from "./NonStrictPanel";
 import ViewportSlot from "./ViewportSlot";
+import ReactElementProvider from "./ReactElementProvider";
 
-class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>> {
+class Flicking extends React.PureComponent<Partial<FlickingProps & FlickingOptions>> {
   public static defaultProps: FlickingProps = DEFAULT_PROPS;
 
   @withFlickingMethods private _vanillaFlicking: VanillaFlicking;
-  private _panels: React.RefObject<ReactPanelComponent>[] = [];
+  private _panels: React.RefObject<StrictPanel | NonStrictPanel | HTMLDivElement>[] = [];
   private _pluginsDiffer: ListDiffer<any>;
   private _jsxDiffer: ListDiffer<React.ReactElement>;
   private _viewportElement: HTMLElement;
   private _diffResult: DiffResult<React.ReactElement> | null;
-  private _mounted: boolean;
-  private _renderCallback: () => any;
+  private _renderEmitter = new Component<{ render: void }>();
 
-  public get mounted() { return this._mounted; }
   public get reactPanels() { return this._panels.map(panel => panel.current!); }
-
-  public constructor(props) {
-    super(props);
-
-    this._panels = this._getChildren().map(() => React.createRef());
-  }
-
-  public setRenderCallback(callback: () => any) {
-    this._renderCallback = callback;
-  }
+  public get renderEmitter() { return this._renderEmitter; }
 
   public componentDidMount() {
-    this._mounted = true;
-
-    const props = this.props as Required<FlickingProps>;
+    const props = this.props as Required<FlickingProps & FlickingOptions>;
+    const rendererOptions: ReactRendererOptions = {
+      reactFlicking: this,
+      strategy: props.virtual && props.panelsPerView > 0
+        ? new VirtualRenderingStrategy()
+        : new NormalRenderingStrategy({
+          providerCtor: ReactElementProvider,
+          panelCtor: ExternalPanel
+        })
+    };
 
     const flicking = new VanillaFlicking(
       this._viewportElement,
       {
         ...props,
         ...{ renderExternal: {
-          renderer: ReactRenderer as any,
-          rendererOptions: { reactFlicking: this }
+          renderer: ReactRenderer,
+          rendererOptions
         }}
       },
     );
 
     this._vanillaFlicking = flicking;
-    this._bindEvents();
 
     const children = this._getChildren();
     this._jsxDiffer = new ListDiffer(children, panel => panel.key!);
     this._pluginsDiffer = new ListDiffer<any>();
 
+    this._bindEvents();
     this._checkPlugins();
-  }
 
-  public componentWillUnmount() {
-    this._mounted = false;
-
-    this._vanillaFlicking.destroy();
+    if (props.status) {
+      flicking.setStatus(props.status);
+    }
   }
 
-  public shouldComponentUpdate(nextProps: this["props"]) {
-    const children = this._getChildren(nextProps.children);
-    const diffResult = this._jsxDiffer.update(children);
-
-    this._panels = children.map(() => React.createRef());
-    this._diffResult = diffResult;
-
-    return true;
+  public componentWillUnmount() {
+    this._vanillaFlicking?.destroy();
   }
 
   public componentDidUpdate() {
@@ -95,14 +88,14 @@ class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>
     const diffResult = this._diffResult;
 
     this._checkPlugins();
-    this._renderCallback && this._renderCallback();
+    this._renderEmitter.trigger("render");
 
     if (!diffResult || !flicking.initialized) return;
 
     sync(flicking, diffResult, this.reactPanels);
 
     if (diffResult.added.length > 0 || diffResult.removed.length > 0) {
-      this.setState({});
+      this.forceUpdate();
     }
 
     this._diffResult = null;
@@ -114,7 +107,11 @@ class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>
     const Camera = props.cameraTag as any;
     const attributes: { [key: string]: any } = {};
     const flicking = this._vanillaFlicking;
-    const initialized = this._diffResult && flicking && flicking.initialized;
+    const children = this._getChildren(props.children);
+    const diffResult = this._jsxDiffer?.update(children) ?? null;
+
+    this._panels = this._createPanelRefs(props, children);
+    this._diffResult = diffResult;
 
     for (const name in props) {
       if (!(name in DEFAULT_PROPS) && !(name in VanillaFlicking.prototype)) {
@@ -122,6 +119,7 @@ class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>
       }
     }
 
+    const initialized = !!this._diffResult && flicking && flicking.initialized;
     const viewportClasses: string[] = ["flicking-viewport"];
     const isHorizontal = flicking
       ? flicking.horizontal
@@ -143,12 +141,9 @@ class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>
       }}
       : {};
 
-    const children = initialized
-      ? getRenderingPanels(flicking, this._diffResult!)
-      : this._getChildren();
-    const panels = this.props.useFindDOMNode
-      ? children.map((child, idx) => <NonStrictPanelComponent key={child.key!} ref={this._panels[idx]}>{child}</NonStrictPanelComponent>)
-      : children.map((child, idx) => <StrictPanelComponent key={child.key!} ref={this._panels[idx] as any}>{child}</StrictPanelComponent>)
+    const panels = !!props.virtual && (props.panelsPerView ?? -1) > 0
+      ? this._getVirtualPanels(initialized)
+      : this._getPanels(initialized);
 
     return (
       <Viewport {...attributes} className={viewportClasses.join(" ")} ref={(e?: HTMLElement) => {
@@ -162,6 +157,14 @@ class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>
     );
   }
 
+  private _createPanelRefs(props: this["props"], children: Array<React.ReactElement<any>>): React.RefObject<StrictPanel | NonStrictPanel | HTMLDivElement>[] {
+    const panelsPerView = props.panelsPerView ?? -1;
+
+    return panelsPerView > 0 && !!props.virtual
+      ? range(panelsPerView + 1).map(() => React.createRef())
+      : children.map(() => React.createRef());
+  }
+
   private _bindEvents() {
     const flicking = this._vanillaFlicking!;
     const props = this.props as Required<FlickingProps>;
@@ -183,10 +186,11 @@ class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>
   }
 
   private _checkPlugins() {
+    const flicking = this._vanillaFlicking;
     const { list, added, removed, prevList } = this._pluginsDiffer.update(this.props.plugins!) as DiffResult<Plugin>;
 
-    this._vanillaFlicking.addPlugins(...added.map(index => list[index]));
-    this._vanillaFlicking.removePlugins(...removed.map(index => prevList[index]));
+    flicking.addPlugins(...added.map(index => list[index]));
+    flicking.removePlugins(...removed.map(index => prevList[index]));
   }
 
   private _getChildren(children: React.ReactNode = this.props.children) {
@@ -208,6 +212,44 @@ class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>
         .reduce((allChilds, fragChild) => [...allChilds, ...this._unpackFragment(fragChild)], [])
       : [child];
   }
+
+  private _getVirtualPanels(initialized: boolean) {
+    const {
+      panelClass = "flicking-panel"
+    } = this.props.virtual!;
+    const panelsPerView = this.props.panelsPerView!;
+    const flicking = this._vanillaFlicking;
+
+    const renderingIndexes = initialized
+      ? flicking.renderer.strategy.getRenderingIndexesByOrder(flicking)
+      : range(panelsPerView + 1);
+
+    const firstPanel = flicking && flicking.panels[0];
+    const size = firstPanel
+      ? flicking.horizontal
+        ? { width: firstPanel.size }
+        : { height: firstPanel.size }
+      : {};
+
+    return renderingIndexes.map(idx => {
+      return <div
+        key={idx}
+        data-element-index={idx}
+        ref={this._panels[idx] as React.RefObject<HTMLDivElement>}
+        className={panelClass}
+        style={size} />
+    });
+  }
+
+  private _getPanels(initialized: boolean) {
+    const children = initialized
+      ? getRenderingPanels(this._vanillaFlicking, this._diffResult!)
+      : this._getChildren();
+
+    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>)
+  }
 }
 
 interface Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>, VanillaFlicking { }

package/src/react-flicking/NonStrictPanel.tsx

@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import * as React from "react";
+import { findDOMNode } from "react-dom";
+
+class NonStrictPanel extends React.Component {
+  private _hide: boolean = false;
+
+  public get nativeElement() { return findDOMNode(this) as HTMLElement; }
+  public get rendered() { return !this._hide; }
+
+  public render() {
+    return this._hide
+      ? <></>
+      : this.props.children;
+  }
+
+  public show() {
+    this._hide = false;
+  }
+
+  public hide() {
+    this._hide = true;
+  }
+}
+
+export default NonStrictPanel;

package/src/react-flicking/ReactElementProvider.ts

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import { ExternalElementProvider } from "@egjs/flicking";
+import StrictPanel from "./StrictPanel";
+import NonStrictPanel from "./NonStrictPanel";
+
+class ReactElementProvider implements ExternalElementProvider {
+  private _el: StrictPanel | NonStrictPanel;
+
+  public get element() { return this._el.nativeElement; }
+  public get rendered() { return this._el.rendered; }
+
+  public constructor(el: StrictPanel | NonStrictPanel) {
+    this._el = el;
+  }
+
+  public show() {
+    this._el.show();
+  }
+
+  public hide() {
+    this._el.hide();
+  }
+}
+
+export default ReactElementProvider;

package/src/react-flicking/ReactRenderer.ts

@@ -1,8 +1,12 @@
-import { ExternalRenderer, PanelOptions, RendererOptions } from "@egjs/flicking";
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import { ExternalRenderer, PanelOptions, RendererOptions, getFlickingAttached } from "@egjs/flicking";
 
 import ReactFlicking from "./Flicking";
-import ReactPanel from "./ReactPanel";
-import NonStrictPanelComponent from "./NonStrictPanelComponent";
+import StrictPanel from "./StrictPanel";
+import NonStrictPanel from "./NonStrictPanel";
 
 export interface ReactRendererOptions extends RendererOptions {
   reactFlicking: ReactFlicking;
@@ -20,46 +24,40 @@ class ReactRenderer extends ExternalRenderer {
 
   // eslint-disable-next-line @typescript-eslint/require-await
   public async render() {
-    const flicking = this._flicking;
+    const flicking = getFlickingAttached(this._flicking);
     const reactFlicking = this._reactFlicking;
+    const strategy = this._strategy;
 
-    if (!flicking || !reactFlicking.mounted) return;
-
-    this._updateRenderingPanels();
+    strategy.updateRenderingPanels(flicking);
+    strategy.renderPanels(flicking);
 
     return new Promise<void>(resolve => {
-      reactFlicking.setRenderCallback(resolve);
-      reactFlicking.setState({});
+      reactFlicking.renderEmitter.once("render", resolve);
+      reactFlicking.forceUpdate();
     });
   }
 
   public async forceRenderAllPanels() {
     const reactFlicking = this._reactFlicking;
 
-    if (!reactFlicking.mounted) return;
-
-    this._panels.forEach(panel => panel.markForShow());
+    await super.forceRenderAllPanels();
 
     return new Promise<void>(resolve => {
-      reactFlicking.setRenderCallback(resolve);
-      reactFlicking.setState({});
+      reactFlicking.renderEmitter.once("render", resolve);
+      reactFlicking.forceUpdate();
     });
   }
 
   protected _collectPanels() {
-    const align = this._getPanelAlign();
-    const children = this._reactFlicking.reactPanels;
+    const flicking = getFlickingAttached(this._flicking);
+    const reactFlicking = this._reactFlicking;
+    const reactPanels = reactFlicking.reactPanels;
 
-    this._panels = children.map((panelComponent, index) => new ReactPanel({
-      flicking: this._flicking!,
-      index,
-      align,
-      externalComponent: panelComponent
-    }));
+    this._panels = this._strategy.collectPanels(flicking, reactPanels);
   }
 
-  protected _createPanel(externalComponent: NonStrictPanelComponent, options: PanelOptions) {
-    return new ReactPanel({ externalComponent, ...options });
+  protected _createPanel(externalComponent: StrictPanel | NonStrictPanel | HTMLDivElement, options: PanelOptions) {
+    return this._strategy.createPanel(externalComponent, options);
   }
 }
 

package/src/react-flicking/StrictPanel.tsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import * as React from "react";
+
+class StrictPanel extends React.Component {
+  private _hide: boolean = false;
+
+  private _elRef: React.RefObject<HTMLElement> = React.createRef();
+
+  public get nativeElement() { return this._elRef.current!; }
+  public get rendered() { return !this._hide; }
+
+  public render() {
+    return this._hide
+      ? <></>
+      : this._getElement();
+  }
+
+  public show() {
+    this._hide = false;
+  }
+
+  public hide() {
+    this._hide = true;
+  }
+
+  private _getElement() {
+    return React.cloneElement(React.Children.only(this.props.children) as React.ReactElement, {
+      ref: this._elRef
+    });
+  }
+}
+
+export default StrictPanel;

package/src/react-flicking/ViewportSlot.tsx

@@ -1,3 +1,7 @@
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
 import React from "react";
 
 const ViewportSlot: React.FC = ({ children }) => <>{children}</>;

package/src/react-flicking/consts.ts

@@ -30,7 +30,6 @@ export const DEFAULT_PROPS: FlickingProps = {
   plugins: [],
   useFindDOMNode: false,
   hideBeforeInit: false,
-  firstPanelSize: undefined,
   onReady: (e: ReadyEvent) => {},
   onBeforeResize: (e: BeforeResizeEvent) => {},
   onAfterResize: (e: AfterResizeEvent) => {},

package/src/react-flicking/index.umd.ts

@@ -1,3 +1,7 @@
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
 import Flicking from "./Flicking";
 import ViewportSlot from "./ViewportSlot";
 

package/src/react-flicking/types.ts

@@ -21,13 +21,15 @@ import {
   AfterResizeEvent,
   ReachEdgeEvent,
   PanelChangeEvent,
-  Plugin
+  Plugin,
+  Status
 } from "@egjs/flicking";
 
 export interface FlickingProps {
   viewportTag: keyof JSX.IntrinsicElements;
   cameraTag: keyof JSX.IntrinsicElements;
   plugins: Plugin[];
+  status?: Status;
   useFindDOMNode: boolean;
   hideBeforeInit: boolean;
   firstPanelSize?: string;

package/declaration/NonStrictPanelComponent.d.ts

@@ -1,8 +0,0 @@
-import * as React from "react";
-import ReactPanelComponent from "./ReactPanelComponent";
-declare class NonStrictPanelComponent extends React.Component implements ReactPanelComponent {
-    hide: boolean;
-    get element(): HTMLElement;
-    render(): React.ReactNode;
-}
-export default NonStrictPanelComponent;

package/declaration/ReactPanel.d.ts

@@ -1,9 +0,0 @@
-import { ExternalPanel } from "@egjs/flicking";
-import NonStrictPanelComponent from "./NonStrictPanelComponent";
-declare class ReactPanel extends ExternalPanel<NonStrictPanelComponent> {
-    get element(): HTMLElement;
-    get rendered(): boolean;
-    markForShow(): void;
-    markForHide(): void;
-}
-export default ReactPanel;

package/declaration/ReactPanelComponent.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-interface ReactPanelComponent extends React.Component {
-    hide: boolean;
-    element: HTMLElement;
-}
-export default ReactPanelComponent;