1828866647

Build Type

push

github

Committed by GitHub

Commit Message

fix: render nothing if children changed bef init

Run Details

3580 of 6237 branches covered (57.4%)

Branch coverage included in aggregate %.

3 of 7 new or added lines in 1 file covered. (42.86%)

1 existing line in 1 file now uncovered.

5293 of 5757 relevant lines covered (91.94%)

127.66 hits per line

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

67.09

/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
} 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,
      align: props.align,
      strategy: props.virtual && props.panelsPerView > 0
        ? new VirtualRenderingStrategy()
        : new NormalRenderingStrategy({
          providerCtor: ReactElementProvider
        })
    };

    const flicking = new VanillaFlicking(
      this._viewportElement,
      {
        ...props,
        externalRenderer: new 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 vanillaFlicking = this._vanillaFlicking;
    const props = this.props;

    // Ignore updates before init, they will be updated after "ready" event's force update
    if (!vanillaFlicking || !vanillaFlicking.initialized) return false;

    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, () => {
      const children = this._getChildren();
      const diffResult = this._jsxDiffer.update(children);

      // children is changed before init
      if (diffResult.added.length > 0 || diffResult.removed.length > 0) {
        this._panels = this._createPanelRefs(this.props, children);
        this._diffResult = diffResult;
      }

      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	} from "@egjs/flicking";
20
21	import { DEFAULT_PROPS } from "./consts";	5✔
22	import { FlickingProps } from "./types";
23	import ReactRenderer, { ReactRendererOptions } from "./ReactRenderer";	5✔
24	import StrictPanel from "./StrictPanel";	5✔
25	import NonStrictPanel from "./NonStrictPanel";	5✔
26	import ViewportSlot from "./ViewportSlot";	5✔
27	import ReactElementProvider from "./ReactElementProvider";	5✔
28
29	enum LifeCycleState {	5✔
30	BEFORE_UPDATE,	5✔
31	RENDER,	5✔
32	UPDATED	5✔
33	}
34
35	class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>> {	5✔
36	public static defaultProps: FlickingProps = DEFAULT_PROPS;	5✔
37
38	@withFlickingMethods private _vanillaFlicking: VanillaFlicking;	5✔
39	private _panels: React.RefObject<StrictPanel \| NonStrictPanel \| HTMLDivElement>[] = [];	13✔
40	private _pluginsDiffer: ListDiffer<any>;
41	private _jsxDiffer: ListDiffer<React.ReactElement>;
42	private _viewportElement: HTMLElement;
43	private _diffResult: DiffResult<React.ReactElement> \| null;
44	private _renderEmitter = new Component<{ render: void }>();	13✔
45	private _currentState: LifeCycleState = LifeCycleState.BEFORE_UPDATE;	13✔
46
47	public get reactPanels() { return this._panels.map(panel => panel.current!); }	51✔
48	public get renderEmitter() { return this._renderEmitter; }	46✔
49
50	public constructor(props: Partial<FlickingProps & FlickingOptions>) {
51	super(props);	13✔
52
53	this._panels = this._createPanelRefs(props, this._getChildren());	13✔
54	}
55
56	public componentDidMount() {	5✔
57	const props = this.props as Required<FlickingProps & FlickingOptions>;	13✔
58	const rendererOptions: ReactRendererOptions = {	13✔
59	reactFlicking: this,
60	align: props.align,
61	strategy: props.virtual && props.panelsPerView > 0	26!
62	? new VirtualRenderingStrategy()
63	: new NormalRenderingStrategy({
64	providerCtor: ReactElementProvider
65	})
66	};
67
68	const flicking = new VanillaFlicking(	13✔
69	this._viewportElement,
70	{
71	...props,
72	externalRenderer: new ReactRenderer(rendererOptions)
73	},
74	);
75
76	this._vanillaFlicking = flicking;	13✔
77	this._currentState = LifeCycleState.UPDATED;	13✔
78
79	const children = this._getChildren();	13✔
80	this._jsxDiffer = new ListDiffer(children, panel => panel.key!);	102✔
81	this._pluginsDiffer = new ListDiffer<any>();	13✔
82
83	this._bindEvents();	13✔
84	this._checkPlugins();	13✔
85
86	if (props.status) {	13!
87	flicking.setStatus(props.status);	×
88	}
89	}
90
91	public componentWillUnmount() {	5✔
92	this._vanillaFlicking?.destroy();	13!
93	}
94
95	public shouldComponentUpdate(nextProps: this["props"]) {	5✔
NEW 96	const vanillaFlicking = this._vanillaFlicking;	×
UNCOV 97	const props = this.props;	×
98
99	// Ignore updates before init, they will be updated after "ready" event's force update
NEW 100	if (!vanillaFlicking \|\| !vanillaFlicking.initialized) return false;	×
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;	59✔
122	const renderEmitter = this._renderEmitter;	59✔
123	const diffResult = this._diffResult;	59✔
124
125	this._checkPlugins();	59✔
126	renderEmitter.trigger("render");	59✔
127
128	this._currentState = LifeCycleState.UPDATED;	59✔
129
130	if (!diffResult \|\| !flicking.initialized) return;	59!
131
132	sync(flicking, diffResult, this.reactPanels);	×
133
134	this._diffResult = null;	×
135	}
136
137	public render() {	72✔
138	const props = this.props;	72✔
139	const Viewport = props.viewportTag as any;	72✔
140	const Camera = props.cameraTag as any;	72✔
141	const attributes: { [key: string]: any } = {};	72✔
142	const flicking = this._vanillaFlicking;	72✔
143
144	this._currentState = LifeCycleState.RENDER;	72✔
145
146	for (const name in props) {	72✔
147	if (!(name in DEFAULT_PROPS) && !(name in VanillaFlicking.prototype)) {	1,756✔
148	attributes[name] = props[name];	144✔
149	}
150	}
151
152	const initialized = flicking && flicking.initialized;	72✔
153	const viewportClasses: string[] = ["flicking-viewport"];	72✔
154	const isHorizontal = flicking	72✔
155	? flicking.horizontal
156	: props.horizontal ?? true;	39!
157
158	if (!isHorizontal) {	72!
159	viewportClasses.push("vertical");	×
160	}
161	if (props.hideBeforeInit && !initialized) {	72!
162	viewportClasses.push("flicking-hidden");	×
163	}
164	if (attributes.className) {	72!
165	viewportClasses.push(attributes.className);	×
166	}
167
168	const cameraProps = !initialized && props.firstPanelSize	72!
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	72!
175	? this._getVirtualPanels()
176	: this._getPanels();
177
178	return (	72✔
179	<Viewport {...attributes} className={viewportClasses.join(" ")} ref={(e?: HTMLElement) => {
180	e && (this._viewportElement = e);	144✔
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;	175✔
208
209	props[propName](e);	175✔
210	});
211	});
212
213	flicking.once(EVENTS.READY, () => {	13✔
214	const children = this._getChildren();	13✔
215	const diffResult = this._jsxDiffer.update(children);	13✔
216
217	// children is changed before init
218	if (diffResult.added.length > 0 \|\| diffResult.removed.length > 0) {	13!
NEW 219	this._panels = this._createPanelRefs(this.props, children);	×
NEW 220	this._diffResult = diffResult;	×
221	}
222
223	this.forceUpdate();	13✔
224	});
225	}
226
227	private _checkPlugins() {	5✔
228	const flicking = this._vanillaFlicking;	72✔
229	const { list, added, removed, prevList } = this._pluginsDiffer.update(this.props.plugins!) as DiffResult<Plugin>;	72✔
230
231	flicking.addPlugins(...added.map(index => list[index]));	72✔
232	flicking.removePlugins(...removed.map(index => prevList[index]));	72✔
233	}
234
235	private _getChildren(children: React.ReactNode = this.props.children) {	222✔
236	return (React.Children.toArray(children) as Array<React.ReactElement<any>>)	111✔
237	.filter(child => child.type !== ViewportSlot)	429✔
238	.reduce((all, child) => {
239	return [...all, ...this._unpackFragment(child)];	429✔
240	}, []) as Array<React.ReactElement<any>>;
241	}
242
243	private _getViewportSlot() {	5✔
244	return (React.Children.toArray(this.props.children) as Array<React.ReactElement<any>>)	72✔
245	.filter(child => child.type === ViewportSlot);	276✔
246	}
247
248	private _unpackFragment(child: React.ReactElement) {	429✔
249	return this._isFragment(child)	429!
250	? React.Children.toArray(child.props.children)
251	.reduce((allChilds, fragChild) => [...allChilds, ...this._unpackFragment(fragChild)], [])	×
252	: [child];
253	}
254
255	private _getVirtualPanels() {	5✔
256	const {
257	panelClass = "flicking-panel"	×
258	} = this.props.virtual!;	×
259	const panelsPerView = this.props.panelsPerView!;	×
260	const flicking = this._vanillaFlicking;	×
261	const initialized = flicking && flicking.initialized;	×
262
263	const renderingIndexes = initialized	×
264	? flicking.renderer.strategy.getRenderingIndexesByOrder(flicking)
265	: range(panelsPerView + 1);
266
267	const firstPanel = flicking && flicking.panels[0];	×
268	const size = firstPanel	×
269	? flicking.horizontal	×
270	? { width: firstPanel.size }
271	: { height: firstPanel.size }
272	: {};
273
274	return renderingIndexes.map(idx => {	×
275	return <div	×
276	key={idx}
277	data-element-index={idx}
278	ref={this._panels[idx] as React.RefObject<HTMLDivElement>}
279	className={panelClass}
280	style={size} />
281	});
282	}
283
284	private _getPanels() {	72✔
285	const origChildren = this._getChildren();	72✔
286	const vanillaFlicking = this._vanillaFlicking;	72✔
287	const diffResult = this._diffResult;	72✔
288
289	const children = vanillaFlicking && vanillaFlicking.initialized	72✔
290	? diffResult	19!
291	? getRenderingPanels(vanillaFlicking, diffResult)
292	: getRenderingPanels(vanillaFlicking, diff(origChildren, origChildren))
293	: origChildren;
294
295	return this.props.useFindDOMNode	72!
296	? children.map((child, idx) => <NonStrictPanel key={child.key!} ref={this._panels[idx] as any}>{child}</NonStrictPanel>)	×
297	: children.map((child, idx) => <StrictPanel key={child.key!} ref={this._panels[idx] as any}>{child}</StrictPanel>)	276✔
298	}
299
300	private _isFragment(child: NonNullable<React.ReactNode>) {	5✔
301	if ((child as React.ReactElement).type) {	429✔
302	return (child as React.ReactElement).type === React.Fragment;	429✔
303	}
304	return child === React.Fragment;	×
305	}
306	}	5✔
307
308	interface Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>, VanillaFlicking { }
309	export default Flicking;	5✔

naver / egjs-flicking / 1828866647

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