@egjs/react-flicking 4.12.0-beta.7 → 4.12.0-beta.9

package/src/react-flicking/CrossFlicking.tsx

@@ -3,68 +3,83 @@
  * egjs projects are licensed under the MIT license
  */
 import * as React from "react";
-import Component from "@egjs/component";
-import ListDiffer, { diff, DiffResult } from "@egjs/list-differ";
-import VanillaFlicking, {
+import ListDiffer from "@egjs/list-differ";
+import {
   CrossFlicking as VanillaCrossFlicking,
-  CrossFlickingOptions,
-  VirtualRenderingStrategy,
+  NormalRenderingStrategy,
+  CrossFlickingEvent,
+  HoldStartEvent,
+  HoldEndEvent,
+  MoveStartEvent,
+  MoveEvent,
+  MoveEndEvent,
+  WillChangeEvent,
+  ChangedEvent,
   EVENTS,
-  withFlickingMethods,
-  sync,
-  getRenderingPanels,
-  getDefaultCameraTransform,
-  Plugin,
-  range,
-  NormalRenderingStrategy
+  SIDE_EVENTS,
+  CrossFlickingOptions,
+  FlickingOptions,
 } from "@egjs/flicking";
 
 import { DEFAULT_PROPS } from "./consts";
-import { CrossFlickingProps, FlickingProps } from "./types";
+import { FlickingProps } from "./types";
 import ReactRenderer, { ReactRendererOptions } from "./ReactRenderer";
-import StrictPanel from "./StrictPanel";
-import NonStrictPanel from "./NonStrictPanel";
-import ViewportSlot from "./ViewportSlot";
 import ReactElementProvider from "./ReactElementProvider";
 import Flicking from "./Flicking";
 
+export interface CrossFlickingProps extends FlickingProps {
+  onSideHoldStart: (e: CrossFlickingEvent<HoldStartEvent<Flicking>>) => any;
+  onSideHoldEnd: (e: CrossFlickingEvent<HoldEndEvent<Flicking>>) => any;
+  onSideMoveStart: (e: CrossFlickingEvent<MoveStartEvent<Flicking>>) => any;
+  onSideMove: (e: CrossFlickingEvent<MoveEvent<Flicking>>) => any;
+  onSideMoveEnd: (e: CrossFlickingEvent<MoveEndEvent<Flicking>>) => any;
+  onSideWillChange: (e: CrossFlickingEvent<WillChangeEvent<Flicking>>) => any;
+  onSideChanged: (e: CrossFlickingEvent<ChangedEvent<Flicking>>) => any;
+}
+
+export const CROSSFLICKING_DEFAULT_PROPS: CrossFlickingProps = {
+  ...DEFAULT_PROPS,
+  onSideHoldStart: (e: CrossFlickingEvent<HoldStartEvent>) => {},
+  onSideHoldEnd: (e: CrossFlickingEvent<HoldEndEvent>) => {},
+  onSideMoveStart: (e: CrossFlickingEvent<MoveStartEvent>) => {},
+  onSideMove: (e: CrossFlickingEvent<MoveEvent>) => {},
+  onSideMoveEnd: (e: CrossFlickingEvent<MoveEndEvent>) => {},
+  onSideWillChange: (e: CrossFlickingEvent<WillChangeEvent>) => {},
+  onSideChanged: (e: CrossFlickingEvent<ChangedEvent>) => {},
+};
+
 class CrossFlicking extends Flicking {
-  public static defaultProps: CrossFlickingProps = DEFAULT_PROPS;
+  public static defaultProps: CrossFlickingProps = CROSSFLICKING_DEFAULT_PROPS;
 
-  public constructor(props: Partial<FlickingProps & CrossFlickingOptions>) {
+  public constructor(
+    props: Partial<
+      FlickingProps &
+        FlickingOptions &
+        CrossFlickingOptions &
+        CrossFlickingProps
+    >
+  ) {
     super(props);
   }
 
   public componentDidMount() {
-    const props = this.props as Required<FlickingProps & CrossFlickingOptions>;
+    const props = this.props as Required<CrossFlickingProps>;
     const rendererOptions: ReactRendererOptions = {
       reactFlicking: this,
       strategy: new NormalRenderingStrategy({
-        providerCtor: ReactElementProvider
-      })
+        providerCtor: ReactElementProvider,
+      }),
     };
 
-    const flicking = new VanillaCrossFlicking(
-      this._viewportElement,
-      {
-        ...props,
-        externalRenderer: new ReactRenderer(rendererOptions),
-        sideOptions: {
-          ...props.sideOptions,
-          // externalRenderer: new ReactRenderer({
-          //   reactFlicking: this,
-          //   strategy: new NormalRenderingStrategy({
-          //     providerCtor: ReactElementProvider
-          //   })
-          // }),
-        }
-      },
-    );
+    const flicking = new VanillaCrossFlicking(this._viewportElement, {
+      ...props,
+      externalRenderer: new ReactRenderer(rendererOptions),
+    });
 
     this._vanillaFlicking = flicking;
 
     const children = this._getChildren();
-    this._jsxDiffer = new ListDiffer(children, panel => panel.key!);
+    this._jsxDiffer = new ListDiffer(children, (panel) => panel.key!);
     this._pluginsDiffer = new ListDiffer<any>();
     this._prevChildren = children;
 
@@ -75,7 +90,46 @@ class CrossFlicking extends Flicking {
       flicking.setStatus(props.status);
     }
   }
+
+  public render() {
+    const props = this.props;
+    const Viewport = props.viewportTag as any;
+    const Camera = props.cameraTag as any;
+    const attributes: { [key: string]: any } = {};
+
+    this.beforeRender();
+
+    for (const name in props) {
+      if (!(name in CROSSFLICKING_DEFAULT_PROPS) && !(name in VanillaCrossFlicking.prototype)) {
+        attributes[name] = props[name];
+      }
+    }
+
+    const { viewportClasses, cameraClasses, cameraProps } = this._getClasses(attributes, props);
+
+    const panels = this._getPanels();
+
+    return (
+      <Viewport {...attributes} className={viewportClasses.join(" ")} ref={(e?: HTMLElement) => {
+        e && (this._viewportElement = e);
+      }}>
+        <Camera className={cameraClasses.join(" ")} {...cameraProps}>
+          { panels }
+        </Camera>
+        { this._getViewportSlot() }
+      </Viewport>
+    );
+  }
+
+  protected _bindEvents() {
+    super._bindEvents();
+
+    Object.keys(SIDE_EVENTS).forEach((eventKey: keyof typeof EVENTS) => {
+      const eventName = SIDE_EVENTS[eventKey];
+      this._bindEvent(eventName);
+    });
+  }
 }
 
-interface CrossFlicking extends Flicking { }
+interface CrossFlicking extends Flicking {}
 export default CrossFlicking;

package/src/react-flicking/Flicking.tsx

@@ -15,7 +15,8 @@ import VanillaFlicking, {
   getDefaultCameraTransform,
   Plugin,
   range,
-  NormalRenderingStrategy
+  NormalRenderingStrategy,
+  FlickingEvents,
 } from "@egjs/flicking";
 
 import { DEFAULT_PROPS } from "./consts";
@@ -156,7 +157,6 @@ class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>
     const Viewport = props.viewportTag as any;
     const Camera = props.cameraTag as any;
     const attributes: { [key: string]: any } = {};
-    const flicking = this._vanillaFlicking;
 
     this.beforeRender();
 
@@ -166,31 +166,7 @@ class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>
       }
     }
 
-    const initialized = flicking && flicking.initialized;
-    const viewportClasses: string[] = ["flicking-viewport"];
-    const cameraClasses: string[] = ["flicking-camera"];
-    const isHorizontal = flicking
-      ? flicking.horizontal
-      : props.horizontal ?? true;
-
-    if (!isHorizontal) {
-      viewportClasses.push("vertical");
-    }
-    if (props.hideBeforeInit && !initialized) {
-      viewportClasses.push("flicking-hidden");
-    }
-    if (attributes.className) {
-      viewportClasses.push(attributes.className);
-    }
-    if (props.cameraClass) {
-      cameraClasses.push(props.cameraClass);
-    }
-
-    const cameraProps = !initialized && props.firstPanelSize
-      ? { style: {
-        transform: getDefaultCameraTransform(this.props.align, this.props.horizontal, this.props.firstPanelSize)
-      }}
-      : {};
+    const { viewportClasses, cameraClasses, cameraProps } = this._getClasses(attributes, props);
 
     const panels = !!props.virtual && (props.panelsPerView ?? -1) > 0
       ? this._getVirtualPanels()
@@ -221,14 +197,7 @@ class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>
 
     Object.keys(EVENTS).forEach((eventKey: keyof typeof EVENTS) => {
       const eventName = EVENTS[eventKey];
-      const propName = `on${eventName.charAt(0).toUpperCase() + eventName.slice(1)}`;
-
-      flicking.on(eventName, e => {
-        e.currentTarget = this;
-
-        const evtHandler = this.props[propName];
-        evtHandler(e);
-      });
+      this._bindEvent(eventName);
     });
 
     flicking.once(EVENTS.READY, () => {
@@ -236,6 +205,17 @@ class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>
     });
   }
 
+  protected _bindEvent(eventName: keyof FlickingEvents) {
+    const propName = `on${eventName.charAt(0).toUpperCase() + eventName.slice(1)}`;
+
+    this._vanillaFlicking!.on(eventName, e => {
+      e.currentTarget = this;
+
+      const evtHandler = this.props[propName];
+      evtHandler(e);
+    });
+  }
+
   protected _checkPlugins() {
     const flicking = this._vanillaFlicking;
     const { list, added, removed, prevList } = this._pluginsDiffer.update(this.props.plugins!) as DiffResult<Plugin>;
@@ -244,6 +224,42 @@ class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>
     flicking.removePlugins(...removed.map(index => prevList[index]));
   }
 
+  protected _getClasses(attributes: { [key: string]: any }, props: typeof this.props) {
+    const flicking = this._vanillaFlicking;
+
+    const initialized = flicking && flicking.initialized;
+    const viewportClasses: string[] = ["flicking-viewport"];
+    const cameraClasses: string[] = ["flicking-camera"];
+    const isHorizontal = flicking
+      ? flicking.horizontal
+      : props.horizontal ?? true;
+
+    if (!isHorizontal) {
+      viewportClasses.push("vertical");
+    }
+    if (props.hideBeforeInit && !initialized) {
+      viewportClasses.push("flicking-hidden");
+    }
+    if (attributes.className) {
+      viewportClasses.push(attributes.className);
+    }
+    if (props.cameraClass) {
+      cameraClasses.push(props.cameraClass);
+    }
+
+    const cameraProps = !initialized && props.firstPanelSize
+      ? { style: {
+        transform: getDefaultCameraTransform(this.props.align, this.props.horizontal, this.props.firstPanelSize)
+      }}
+      : {};
+
+    return {
+      viewportClasses,
+      cameraClasses,
+      cameraProps,
+    };
+  }
+
   private _hasSameChildren(prevChildren: React.ReactElement[], nextChildren: React.ReactElement[]) {
     if (prevChildren.length !== nextChildren.length || prevChildren.length === 0) return false;
 

package/src/react-flicking/consts.ts

@@ -28,6 +28,7 @@ export const DEFAULT_PROPS: FlickingProps = {
   viewportTag: "div",
   cameraTag: "div",
   cameraClass: "",
+  firstPanelSize: "",
   renderOnSameKey: false,
   plugins: [],
   useFindDOMNode: false,

package/src/react-flicking/types.ts

@@ -54,6 +54,4 @@ export interface FlickingProps {
   onPanelChange: (e: PanelChangeEvent<ReactFlicking>) => any;
   [key: string]: any;
 }
-export interface CrossFlickingProps extends FlickingProps {
-  
-}
+