1470671403

Build Type

github

Committed by GitHub

Commit Message

<a href="https://github.com/naver/egjs-flicking/commit/<a class=hub.com/naver/egjs-flicking/commit/<a class="double-link" href="https://git"><a class=hub.com/naver/egjs-flicking/commit/<a class="double-link" href="https://git"><a class=hub.com/naver/egjs-flicking/commit/09879ace3ede1393734ae1e86d5a7eedd0964399">09879ace3">&lt;a href=&quot;https://github.com/naver/egjs-flicking/commit/</a><a class="double-link" href="https://github.com/naver/egjs-flicking/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/naver/egjs-flicking/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/naver/egjs-flicking/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/naver/egjs-flicking/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/naver/egjs-flicking/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/naver/egjs-flicking/commit/09879ace3ede1393734ae1e86d5a7eedd0964399">09879ace3</a><a href="https://github.com/naver/egjs-flicking/commit/09879ace3ede1393734ae1e86d5a7eedd0964399">&quot;&gt;&amp;lt;a href=&amp;quot;https://github.com/naver/egjs-flicking/commit/&lt;/a&gt;&lt;a class=&quot;double-link&quot; href=&quot;https://github.com/naver/egjs-flicking/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/naver/egjs-flicking/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/naver/egjs-flicking/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/naver/egjs-flicking/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/naver/egjs-flicking/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/naver/egjs-flicking/commit/09879ace3ede1393734ae1e86d5a7eedd0964399&quot;&gt;09879ace3&lt;/a&gt;&lt;a href=&quot;https://github.com/naver/egjs-flicking/commi... (continued)

Pull Request Pull Request #589: test: add CFC tests

Run Details

3515 of 6219 branches covered (56.52%)

Branch coverage included in aggregate %.

26 of 27 new or added lines in 7 files covered. (96.3%)

5559 of 6086 relevant lines covered (91.34%)

102.12 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

68.78

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

/*
 * Copyright (c) 2015 NAVER Corp.
 * 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, {
  FlickingOptions,
  VirtualRenderingStrategy,
  EVENTS,
  withFlickingMethods,
  sync,
  getRenderingPanels,
  getDefaultCameraTransform,
  Plugin,
  range,
  NormalRenderingStrategy,
  ExternalPanel
} from "@egjs/flicking";

import { DEFAULT_PROPS } from "./consts";
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";

enum LifeCycleState {
  BEFORE_UPDATE,
  RENDER,
  UPDATED
}

class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>> {
  public static defaultProps: FlickingProps = DEFAULT_PROPS;

  @withFlickingMethods private _vanillaFlicking: VanillaFlicking;
  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 _renderEmitter = new Component<{ render: void }>();
  private _currentState: LifeCycleState = LifeCycleState.BEFORE_UPDATE;

  public get reactPanels() { return this._panels.map(panel => panel.current!); }
  public get renderEmitter() { return this._renderEmitter; }

  public constructor(props: Partial<FlickingProps & FlickingOptions>) {
    super(props);

    this._panels = this._createPanelRefs(props, this._getChildren());
  }

  public componentDidMount() {
    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,
          rendererOptions
        }}
      },
    );

    this._vanillaFlicking = flicking;
    this._currentState = LifeCycleState.UPDATED;

    const children = this._getChildren();
    this._jsxDiffer = new ListDiffer(children, panel => panel.key!);
    this._pluginsDiffer = new ListDiffer<any>();

    this._bindEvents();
    this._checkPlugins();

    if (props.status) {
      flicking.setStatus(props.status);
    }
  }

  public componentWillUnmount() {
    this._vanillaFlicking?.destroy();
  }

  public shouldComponentUpdate(nextProps: this["props"]) {
    const props = this.props;

    if (this._currentState !== LifeCycleState.BEFORE_UPDATE && props.children !== nextProps.children) {
      const nextChildren = this._getChildren(nextProps.children);

      this._panels = this._createPanelRefs(nextProps, nextChildren);
      this._diffResult = this._jsxDiffer.update(nextChildren);
    }

    this._currentState = LifeCycleState.BEFORE_UPDATE;

    for (const key in nextProps) {
      if (props[key] !== nextProps[key]) {
        return true;
      }
    }

    return false;
  }

  public componentDidUpdate() {
    const flicking = this._vanillaFlicking;
    const renderEmitter = this._renderEmitter;
    const diffResult = this._diffResult;

    this._checkPlugins();
    renderEmitter.trigger("render");

    this._currentState = LifeCycleState.UPDATED;

    if (!diffResult || !flicking.initialized) return;

    sync(flicking, diffResult, this.reactPanels);

    this._diffResult = null;
  }

  public render() {
    const props = this.props;
    const Viewport = props.viewportTag as any;
    const Camera = props.cameraTag as any;
    const attributes: { [key: string]: any } = {};
    const flicking = this._vanillaFlicking;

    this._currentState = LifeCycleState.RENDER;

    for (const name in props) {
      if (!(name in DEFAULT_PROPS) && !(name in VanillaFlicking.prototype)) {
        attributes[name] = props[name];
      }
    }

    const initialized = flicking && flicking.initialized;
    const viewportClasses: string[] = ["flicking-viewport"];
    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);
    }

    const cameraProps = !initialized && props.firstPanelSize
      ? { style: {
        transform: getDefaultCameraTransform(this.props.align, this.props.horizontal, this.props.firstPanelSize)
      }}
      : {};

    const panels = !!props.virtual && (props.panelsPerView ?? -1) > 0
      ? this._getVirtualPanels()
      : this._getPanels();

    return (
      <Viewport {...attributes} className={viewportClasses.join(" ")} ref={(e?: HTMLElement) => {
        e && (this._viewportElement = e);
      }}>
        <Camera className="flicking-camera" {...cameraProps}>
          { panels }
        </Camera>
        { this._getViewportSlot() }
      </Viewport>
    );
  }

  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>;

    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;

        props[propName](e);
      });
    });

    flicking.once(EVENTS.READY, () => {
      this.forceUpdate();
    });
  }

  private _checkPlugins() {
    const flicking = this._vanillaFlicking;
    const { list, added, removed, prevList } = this._pluginsDiffer.update(this.props.plugins!) as DiffResult<Plugin>;

    flicking.addPlugins(...added.map(index => list[index]));
    flicking.removePlugins(...removed.map(index => prevList[index]));
  }

  private _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) => {
        return [...all, ...this._unpackFragment(child)];
      }, []) as Array<React.ReactElement<any>>;
  }

  private _getViewportSlot() {
    return (React.Children.toArray(this.props.children) as Array<React.ReactElement<any>>)
      .filter(child => child.type === ViewportSlot);
  }

  private _unpackFragment(child: React.ReactElement) {
    return this._isFragment(child)
      ? React.Children.toArray(child.props.children)
        .reduce((allChilds, fragChild) => [...allChilds, ...this._unpackFragment(fragChild)], [])
      : [child];
  }

  private _getVirtualPanels() {
    const {
      panelClass = "flicking-panel"
    } = this.props.virtual!;
    const panelsPerView = this.props.panelsPerView!;
    const flicking = this._vanillaFlicking;
    const initialized = flicking && flicking.initialized;

    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() {
    const origChildren = this._getChildren();
    const vanillaFlicking = this._vanillaFlicking;
    const diffResult = this._diffResult;

    const children = vanillaFlicking && vanillaFlicking.initialized
      ? diffResult
        ? getRenderingPanels(vanillaFlicking, diffResult)
        : 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>)
  }

  private _isFragment(child: NonNullable<React.ReactNode>) {
    if ((child as React.ReactElement).type) {
      return (child as React.ReactElement).type === React.Fragment;
    }
    return child === React.Fragment;
  }
}

interface Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>, VanillaFlicking { }
export default Flicking;

1	/*
2	* Copyright (c) 2015 NAVER Corp.
3	* egjs projects are licensed under the MIT license
4	*/
5	import * as React from "react";	5✔
6	import Component from "@egjs/component";	5✔
7	import ListDiffer, { diff, DiffResult } from "@egjs/list-differ";	5✔
8	import VanillaFlicking, {	5✔
9	FlickingOptions,
10	VirtualRenderingStrategy,
11	EVENTS,
12	withFlickingMethods,
13	sync,
14	getRenderingPanels,
15	getDefaultCameraTransform,
16	Plugin,
17	range,
18	NormalRenderingStrategy,
19	ExternalPanel
20	} from "@egjs/flicking";
21
22	import { DEFAULT_PROPS } from "./consts";	5✔
23	import { FlickingProps } from "./types";
24	import ReactRenderer, { ReactRendererOptions } from "./ReactRenderer";	5✔
25	import StrictPanel from "./StrictPanel";	5✔
26	import NonStrictPanel from "./NonStrictPanel";	5✔
27	import ViewportSlot from "./ViewportSlot";	5✔
28	import ReactElementProvider from "./ReactElementProvider";	5✔
29
30	enum LifeCycleState {	5✔
31	BEFORE_UPDATE,	5✔
32	RENDER,	5✔
33	UPDATED	5✔
34	}
35
36	class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>> {	5✔
37	public static defaultProps: FlickingProps = DEFAULT_PROPS;	5✔
38
39	@withFlickingMethods private _vanillaFlicking: VanillaFlicking;	5✔
40	private _panels: React.RefObject<StrictPanel \| NonStrictPanel \| HTMLDivElement>[] = [];	13✔
41	private _pluginsDiffer: ListDiffer<any>;
42	private _jsxDiffer: ListDiffer<React.ReactElement>;
43	private _viewportElement: HTMLElement;
44	private _diffResult: DiffResult<React.ReactElement> \| null;
45	private _renderEmitter = new Component<{ render: void }>();	13✔
46	private _currentState: LifeCycleState = LifeCycleState.BEFORE_UPDATE;	13✔
47
48	public get reactPanels() { return this._panels.map(panel => panel.current!); }	51✔
49	public get renderEmitter() { return this._renderEmitter; }	43✔
50
51	public constructor(props: Partial<FlickingProps & FlickingOptions>) {
52	super(props);	13✔
53
54	this._panels = this._createPanelRefs(props, this._getChildren());	13✔
55	}
56
57	public componentDidMount() {	5✔
58	const props = this.props as Required<FlickingProps & FlickingOptions>;	13✔
59	const rendererOptions: ReactRendererOptions = {	13✔
60	reactFlicking: this,
61	strategy: props.virtual && props.panelsPerView > 0	26!
62	? new VirtualRenderingStrategy()
63	: new NormalRenderingStrategy({
64	providerCtor: ReactElementProvider,
65	panelCtor: ExternalPanel
66	})
67	};
68
69	const flicking = new VanillaFlicking(	13✔
70	this._viewportElement,
71	{
72	...props,
73	...{ renderExternal: {
74	renderer: ReactRenderer,
75	rendererOptions
76	}}
77	},
78	);
79
80	this._vanillaFlicking = flicking;	13✔
81	this._currentState = LifeCycleState.UPDATED;	13✔
82
83	const children = this._getChildren();	13✔
84	this._jsxDiffer = new ListDiffer(children, panel => panel.key!);	13✔
85	this._pluginsDiffer = new ListDiffer<any>();	13✔
86
87	this._bindEvents();	13✔
88	this._checkPlugins();	13✔
89
90	if (props.status) {	13!
91	flicking.setStatus(props.status);	×
92	}
93	}
94
95	public componentWillUnmount() {	5✔
96	this._vanillaFlicking?.destroy();	13!
97	}
98
99	public shouldComponentUpdate(nextProps: this["props"]) {	5✔
100	const props = this.props;	×
101
102	if (this._currentState !== LifeCycleState.BEFORE_UPDATE && props.children !== nextProps.children) {	×
103	const nextChildren = this._getChildren(nextProps.children);	×
104
105	this._panels = this._createPanelRefs(nextProps, nextChildren);	×
106	this._diffResult = this._jsxDiffer.update(nextChildren);	×
107	}
108
109	this._currentState = LifeCycleState.BEFORE_UPDATE;	×
110
111	for (const key in nextProps) {	×
112	if (props[key] !== nextProps[key]) {	×
113	return true;	×
114	}
115	}
116
117	return false;	×
118	}
119
120	public componentDidUpdate() {	5✔
121	const flicking = this._vanillaFlicking;	56✔
122	const renderEmitter = this._renderEmitter;	56✔
123	const diffResult = this._diffResult;	56✔
124
125	this._checkPlugins();	56✔
126	renderEmitter.trigger("render");	56✔
127
128	this._currentState = LifeCycleState.UPDATED;	56✔
129
130	if (!diffResult \|\| !flicking.initialized) return;	56!
131
132	sync(flicking, diffResult, this.reactPanels);	×
133
134	this._diffResult = null;	×
135	}
136
137	public render() {	69✔
138	const props = this.props;	69✔
139	const Viewport = props.viewportTag as any;	69✔
140	const Camera = props.cameraTag as any;	69✔
141	const attributes: { [key: string]: any } = {};	69✔
142	const flicking = this._vanillaFlicking;	69✔
143
144	this._currentState = LifeCycleState.RENDER;	69✔
145
146	for (const name in props) {	69✔
147	if (!(name in DEFAULT_PROPS) && !(name in VanillaFlicking.prototype)) {	1,681✔
148	attributes[name] = props[name];	138✔
149	}
150	}
151
152	const initialized = flicking && flicking.initialized;	69✔
153	const viewportClasses: string[] = ["flicking-viewport"];	69✔
154	const isHorizontal = flicking	69✔
155	? flicking.horizontal
156	: props.horizontal ?? true;	39!
157
158	if (!isHorizontal) {	69!
159	viewportClasses.push("vertical");	×
160	}
161	if (props.hideBeforeInit && !initialized) {	69!
162	viewportClasses.push("flicking-hidden");	×
163	}
164	if (attributes.className) {	69!
165	viewportClasses.push(attributes.className);	×
166	}
167
168	const cameraProps = !initialized && props.firstPanelSize	69!
169	? { style: {
170	transform: getDefaultCameraTransform(this.props.align, this.props.horizontal, this.props.firstPanelSize)
171	}}
172	: {};
173
174	const panels = !!props.virtual && (props.panelsPerView ?? -1) > 0	69!
175	? this._getVirtualPanels()
176	: this._getPanels();
177
178	return (	69✔
179	<Viewport {...attributes} className={viewportClasses.join(" ")} ref={(e?: HTMLElement) => {
180	e && (this._viewportElement = e);	138✔
181	}}>
182	<Camera className="flicking-camera" {...cameraProps}>
183	{ panels }
184	</Camera>
185	{ this._getViewportSlot() }
186	</Viewport>
187	);
188	}
189
190	private _createPanelRefs(props: this["props"], children: Array<React.ReactElement<any>>): React.RefObject<StrictPanel \| NonStrictPanel \| HTMLDivElement>[] {	5✔
191	const panelsPerView = props.panelsPerView ?? -1;	13!
192
193	return panelsPerView > 0 && !!props.virtual	13!
194	? range(panelsPerView + 1).map(() => React.createRef())	×
195	: children.map(() => React.createRef());	51✔
196	}
197
198	private _bindEvents() {	13✔
199	const flicking = this._vanillaFlicking!;	13✔
200	const props = this.props as Required<FlickingProps>;	13✔
201
202	Object.keys(EVENTS).forEach((eventKey: keyof typeof EVENTS) => {	13✔
203	const eventName = EVENTS[eventKey];	221✔
204	const propName = `on${eventName.charAt(0).toUpperCase() + eventName.slice(1)}`;	221✔
205
206	flicking.on(eventName, e => {	221✔
207	e.currentTarget = this;	86✔
208
209	props[propName](e);	86✔
210	});
211	});
212
213	flicking.once(EVENTS.READY, () => {	13✔
214	this.forceUpdate();	13✔
215	});
216	}
217
218	private _checkPlugins() {	5✔
219	const flicking = this._vanillaFlicking;	69✔
220	const { list, added, removed, prevList } = this._pluginsDiffer.update(this.props.plugins!) as DiffResult<Plugin>;	69✔
221
222	flicking.addPlugins(...added.map(index => list[index]));	69✔
223	flicking.removePlugins(...removed.map(index => prevList[index]));	69✔
224	}
225
226	private _getChildren(children: React.ReactNode = this.props.children) {	190✔
227	return (React.Children.toArray(children) as Array<React.ReactElement<any>>)	95✔
228	.filter(child => child.type !== ViewportSlot)	369✔
229	.reduce((all, child) => {
230	return [...all, ...this._unpackFragment(child)];	369✔
231	}, []) as Array<React.ReactElement<any>>;
232	}
233
234	private _getViewportSlot() {	5✔
235	return (React.Children.toArray(this.props.children) as Array<React.ReactElement<any>>)	69✔
236	.filter(child => child.type === ViewportSlot);	267✔
237	}
238
239	private _unpackFragment(child: React.ReactElement) {	369✔
240	return this._isFragment(child)	369!
241	? React.Children.toArray(child.props.children)
242	.reduce((allChilds, fragChild) => [...allChilds, ...this._unpackFragment(fragChild)], [])	×
243	: [child];
244	}
245
246	private _getVirtualPanels() {	5✔
247	const {
248	panelClass = "flicking-panel"	×
249	} = this.props.virtual!;	×
250	const panelsPerView = this.props.panelsPerView!;	×
251	const flicking = this._vanillaFlicking;	×
252	const initialized = flicking && flicking.initialized;	×
253
254	const renderingIndexes = initialized	×
255	? flicking.renderer.strategy.getRenderingIndexesByOrder(flicking)
256	: range(panelsPerView + 1);
257
258	const firstPanel = flicking && flicking.panels[0];	×
259	const size = firstPanel	×
260	? flicking.horizontal	×
261	? { width: firstPanel.size }
262	: { height: firstPanel.size }
263	: {};
264
265	return renderingIndexes.map(idx => {	×
266	return <div	×
267	key={idx}
268	data-element-index={idx}
269	ref={this._panels[idx] as React.RefObject<HTMLDivElement>}
270	className={panelClass}
271	style={size} />
272	});
273	}
274
275	private _getPanels() {	69✔
276	const origChildren = this._getChildren();	69✔
277	const vanillaFlicking = this._vanillaFlicking;	69✔
278	const diffResult = this._diffResult;	69✔
279
280	const children = vanillaFlicking && vanillaFlicking.initialized	69✔
281	? diffResult	16!
282	? getRenderingPanels(vanillaFlicking, diffResult)
283	: getRenderingPanels(vanillaFlicking, diff(origChildren, origChildren))
284	: origChildren;
285
286	return this.props.useFindDOMNode	69!
287	? children.map((child, idx) => <NonStrictPanel key={child.key!} ref={this._panels[idx] as any}>{child}</NonStrictPanel>)	×
288	: children.map((child, idx) => <StrictPanel key={child.key!} ref={this._panels[idx] as any}>{child}</StrictPanel>)	267✔
289	}
290
291	private _isFragment(child: NonNullable<React.ReactNode>) {	5✔
292	if ((child as React.ReactElement).type) {	369✔
293	return (child as React.ReactElement).type === React.Fragment;	369✔
294	}
NEW 295	return child === React.Fragment;	×
296	}
297	}	5✔
298
299	interface Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>, VanillaFlicking { }
300	export default Flicking;	5✔

naver / egjs-flicking / 1470671403

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous