@egjs/react-flicking 4.11.5-beta.4 → 4.12.0-beta.10

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";
@@ -29,14 +30,14 @@ import ReactElementProvider from "./ReactElementProvider";
 class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>> {
   public static defaultProps: FlickingProps = DEFAULT_PROPS;
 
-  @withFlickingMethods private _vanillaFlicking: VanillaFlicking;
+  @withFlickingMethods protected _vanillaFlicking: VanillaFlicking;
   private _panels: React.RefObject<StrictPanel | NonStrictPanel | HTMLDivElement>[] = [];
-  private _pluginsDiffer: ListDiffer<any>;
-  private _jsxDiffer: ListDiffer<React.ReactElement>;
-  private _viewportElement: HTMLElement;
+  protected _pluginsDiffer: ListDiffer<any>;
+  protected _jsxDiffer: ListDiffer<React.ReactElement>;
+  protected _viewportElement: HTMLElement;
   private _diffResult: DiffResult<React.ReactElement> | null;
   private _renderEmitter = new Component<{ render: void }>();
-  private _prevChildren: React.ReactElement[];
+  protected _prevChildren: React.ReactElement[];
 
   public get reactPanels() { return this._panels.map(panel => panel.current!); }
   public get renderEmitter() { return this._renderEmitter; }
@@ -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()
@@ -216,19 +192,12 @@ class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>
       : children.map(() => React.createRef());
   }
 
-  private _bindEvents() {
+  protected _bindEvents() {
     const flicking = this._vanillaFlicking!;
 
     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,7 +205,18 @@ class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>
     });
   }
 
-  private _checkPlugins() {
+  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;
 
@@ -260,7 +276,7 @@ class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>
     return same;
   }
 
-  private _getChildren(children: React.ReactNode = this.props.children) {
+  protected _getChildren(children: React.ReactNode = this.props.children) {
     return (React.Children.toArray(children) as Array<React.ReactElement<any>>)
       .filter(child => child.type !== ViewportSlot)
       .reduce((all, child) => {
@@ -268,7 +284,7 @@ class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>
       }, []) as Array<React.ReactElement<any>>;
   }
 
-  private _getViewportSlot() {
+  protected _getViewportSlot() {
     return (React.Children.toArray(this.props.children) as Array<React.ReactElement<any>>)
       .filter(child => child.type === ViewportSlot);
   }
@@ -309,7 +325,7 @@ class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>
     });
   }
 
-  private _getPanels() {
+  protected _getPanels() {
     const origChildren = this._getChildren();
     const vanillaFlicking = this._vanillaFlicking;
     const diffResult = this._diffResult;

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/index.ts

@@ -3,12 +3,16 @@
  * egjs projects are licensed under the MIT license
  */
 import Flicking from "./Flicking";
+import CrossFlicking from "./CrossFlicking";
+import CrossGroup from "./CrossGroup";
 import ViewportSlot from "./ViewportSlot";
 
 export * from "@egjs/flicking";
 export * from "./types";
 
 export {
-  ViewportSlot
+  CrossFlicking,
+  CrossGroup,
+  ViewportSlot,
 }
 export default Flicking;

package/src/react-flicking/types.ts

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

package/dist/flicking-inline.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../sass/flicking-inline.sass"],"names":[],"mappings":"AAAA;EACE;EACA;;AACA;EACE;EACA;;AACF;EAEE;;AAEA;EACE;;AACF;EACE;;AACF;EACE;;AACJ;EACE;;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA","file":"flicking-inline.css"}

package/dist/flicking.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../sass/flicking.sass"],"names":[],"mappings":"AAAA;EACE;EACA;;AACA;EACE;;AACA;EACE;EACA;;AAGA;EACE;;;AAER;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE","file":"flicking.css"}