3142298682

Build Type

push

github

Committed by GitHub

Commit Message

fix: fix panels could not be updated inside hooks (#734)

Run Details

4352 of 7094 branches covered (61.35%)

Branch coverage included in aggregate %.

20 of 29 new or added lines in 1 file covered. (68.97%)

2 existing lines in 1 file now uncovered.

7879 of 8418 relevant lines covered (93.6%)

136.51 hits per line

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

68.36

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

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 _prevProps: Partial<FlickingProps & FlickingOptions>;

  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());
    this._prevProps = this.props;
  }

  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;

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

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

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

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

  public shouldComponentUpdate(nextProps: Readonly<Partial<FlickingProps & FlickingOptions>>): boolean {
    const vanillaFlicking = this._vanillaFlicking;
    const prevProps = this.props;

    if (!vanillaFlicking || !vanillaFlicking.initialized) return false;
    if (!this._hasSameChildren(prevProps, nextProps)) return true;

    const { children, ...restProps } = nextProps;

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

    return false;
  }

  public beforeRender() {
    const vanillaFlicking = this._vanillaFlicking;
    const nextProps = this.props;
    const prevProps = this._prevProps;

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

    if (!this._hasSameChildren(prevProps, nextProps)) {
      const nextChildren = this._getChildren(nextProps.children);

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

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

    this._checkPlugins();
    renderEmitter.trigger("render");
    flicking.camera.updateOffset();

    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.beforeRender();

    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 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 panels = !!props.virtual && (props.panelsPerView ?? -1) > 0
      ? this._getVirtualPanels()
      : this._getPanels();

    this._prevProps = props;

    return (
      <Viewport {...attributes} className={viewportClasses.join(" ")} ref={(e?: HTMLElement) => {
        e && (this._viewportElement = e);
      }}>
        <Camera className={cameraClasses.join(" ")} {...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!;

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

    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 _hasSameChildren(prevProps: this["props"], nextProps: this["props"]) {
    const prevChildren = this._getChildren(prevProps.children);
    const nextChildren = this._getChildren(nextProps.children);

    if (prevChildren.length !== nextChildren.length) return false;

    const same = prevChildren.every((child, idx) => {
      const nextChild = nextChildren[idx];
      if ((child as React.ReactElement).key && (nextChild as React.ReactElement).key) {
        return (child as React.ReactElement).key === (nextChild as React.ReactElement).key;
      } else {
        return child === nextChild;
      }
    });

    return same;
  }

  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: React.ReactElement[], fragChild: React.ReactElement) => [...allChilds, ...this._unpackFragment(fragChild)], [] as React.ReactElement[])
      : [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: React.ReactElement[] = 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: React.ReactElement) {
    if (child.type) {
      return child.type === React.Fragment;
    }

    return (child as any) === 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	class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>> {	5✔
30	public static defaultProps: FlickingProps = DEFAULT_PROPS;	5✔
31
32	@withFlickingMethods private _vanillaFlicking: VanillaFlicking;	5✔
33	private _panels: React.RefObject<StrictPanel \| NonStrictPanel \| HTMLDivElement>[] = [];	14✔
34	private _pluginsDiffer: ListDiffer<any>;
35	private _jsxDiffer: ListDiffer<React.ReactElement>;
36	private _viewportElement: HTMLElement;
37	private _diffResult: DiffResult<React.ReactElement> \| null;
38	private _renderEmitter = new Component<{ render: void }>();	14✔
39	private _prevProps: Partial<FlickingProps & FlickingOptions>;
40
41	public get reactPanels() { return this._panels.map(panel => panel.current!); }	54✔
42	public get renderEmitter() { return this._renderEmitter; }	35✔
43
44	public constructor(props: Partial<FlickingProps & FlickingOptions>) {
45	super(props);	14✔
46
47	this._panels = this._createPanelRefs(props, this._getChildren());	14✔
48	this._prevProps = this.props;	14✔
49	}
50
51	public componentDidMount() {	5✔
52	const props = this.props as Required<FlickingProps & FlickingOptions>;	14✔
53	const rendererOptions: ReactRendererOptions = {	14✔
54	reactFlicking: this,
55	align: props.align,
56	strategy: props.virtual && props.panelsPerView > 0	28!
57	? new VirtualRenderingStrategy()
58	: new NormalRenderingStrategy({
59	providerCtor: ReactElementProvider
60	})
61	};
62
63	const flicking = new VanillaFlicking(	14✔
64	this._viewportElement,
65	{
66	...props,
67	externalRenderer: new ReactRenderer(rendererOptions)
68	},
69	);
70
71	this._vanillaFlicking = flicking;	14✔
72
73	const children = this._getChildren();	14✔
74	this._jsxDiffer = new ListDiffer(children, panel => panel.key!);	108✔
75	this._pluginsDiffer = new ListDiffer<any>();	14✔
76	this._prevProps = this.props;	14✔
77
78	this._bindEvents();	14✔
79	this._checkPlugins();	14✔
80
81	if (props.status) {	14!
82	flicking.setStatus(props.status);	×
83	}
84	}
85
86	public componentWillUnmount() {	5✔
87	this._vanillaFlicking?.destroy();	14!
88	}
89
90	public shouldComponentUpdate(nextProps: Readonly<Partial<FlickingProps & FlickingOptions>>): boolean {	5✔
91	const vanillaFlicking = this._vanillaFlicking;	×
NEW 92	const prevProps = this.props;	×
93
UNCOV 94	if (!vanillaFlicking \|\| !vanillaFlicking.initialized) return false;	×
NEW 95	if (!this._hasSameChildren(prevProps, nextProps)) return true;	×
96
NEW 97	const { children, ...restProps } = nextProps;	×
98
NEW 99	for (const key in restProps) {	×
NEW 100	if (prevProps[key] !== nextProps[key]) {	×
UNCOV 101	return true;	×
102	}
103	}
104
105	return false;	×
106	}
107
108	public beforeRender() {	5✔
109	const vanillaFlicking = this._vanillaFlicking;	48✔
110	const nextProps = this.props;	48✔
111	const prevProps = this._prevProps;	48✔
112
113	// Ignore updates before init, they will be updated after "ready" event's force update
114	if (!vanillaFlicking \|\| !vanillaFlicking.initialized) return;	48✔
115
116	if (!this._hasSameChildren(prevProps, nextProps)) {	20!
NEW 117	const nextChildren = this._getChildren(nextProps.children);	×
118
NEW 119	this._panels = this._createPanelRefs(nextProps, nextChildren);	×
NEW 120	this._diffResult = this._jsxDiffer.update(nextChildren);	×
121	}
122	}
123
124	public componentDidUpdate() {	5✔
125	const flicking = this._vanillaFlicking;	34✔
126	const renderEmitter = this._renderEmitter;	34✔
127	const diffResult = this._diffResult;	34✔
128
129	this._checkPlugins();	34✔
130	renderEmitter.trigger("render");	34✔
131	flicking.camera.updateOffset();	34✔
132
133	if (!diffResult \|\| !flicking.initialized) return;	34!
134
135	sync(flicking, diffResult, this.reactPanels);	×
136
137	this._diffResult = null;	×
138	}
139
140	public render() {	48✔
141	const props = this.props;	48✔
142	const Viewport = props.viewportTag as any;	48✔
143	const Camera = props.cameraTag as any;	48✔
144	const attributes: { [key: string]: any } = {};	48✔
145	const flicking = this._vanillaFlicking;	48✔
146
147	this.beforeRender();	48✔
148
149	for (const name in props) {	48✔
150	if (!(name in DEFAULT_PROPS) && !(name in VanillaFlicking.prototype)) {	1,221✔
151	attributes[name] = props[name];	96✔
152	}
153	}
154
155	const initialized = flicking && flicking.initialized;	48✔
156	const viewportClasses: string[] = ["flicking-viewport"];	48✔
157	const cameraClasses: string[] = ["flicking-camera"];	48✔
158	const isHorizontal = flicking	48✔
159	? flicking.horizontal
160	: props.horizontal ?? true;	42!
161
162	if (!isHorizontal) {	48!
163	viewportClasses.push("vertical");	×
164	}
165	if (props.hideBeforeInit && !initialized) {	48!
166	viewportClasses.push("flicking-hidden");	×
167	}
168	if (attributes.className) {	48!
169	viewportClasses.push(attributes.className);	×
170	}
171	if (props.cameraClass) {	48!
172	cameraClasses.push(props.cameraClass);	×
173	}
174
175	const cameraProps = !initialized && props.firstPanelSize	48!
176	? { style: {
177	transform: getDefaultCameraTransform(this.props.align, this.props.horizontal, this.props.firstPanelSize)
178	}}
179	: {};
180
181	const panels = !!props.virtual && (props.panelsPerView ?? -1) > 0	48!
182	? this._getVirtualPanels()
183	: this._getPanels();
184
185	this._prevProps = props;	48✔
186
187	return (	48✔
188	<Viewport {...attributes} className={viewportClasses.join(" ")} ref={(e?: HTMLElement) => {
189	e && (this._viewportElement = e);	96✔
190	}}>
191	<Camera className={cameraClasses.join(" ")} {...cameraProps}>
192	{ panels }
193	</Camera>
194	{ this._getViewportSlot() }
195	</Viewport>
196	);
197	}
198
199	private _createPanelRefs(props: this["props"], children: Array<React.ReactElement<any>>): React.RefObject<StrictPanel \| NonStrictPanel \| HTMLDivElement>[] {	5✔
200	const panelsPerView = props.panelsPerView ?? -1;	14!
201
202	return panelsPerView > 0 && !!props.virtual	14!
203	? range(panelsPerView + 1).map(() => React.createRef())	×
204	: children.map(() => React.createRef());	54✔
205	}
206
207	private _bindEvents() {	14✔
208	const flicking = this._vanillaFlicking!;	14✔
209
210	Object.keys(EVENTS).forEach((eventKey: keyof typeof EVENTS) => {	14✔
211	const eventName = EVENTS[eventKey];	238✔
212	const propName = `on${eventName.charAt(0).toUpperCase() + eventName.slice(1)}`;	238✔
213
214	flicking.on(eventName, e => {	238✔
215	e.currentTarget = this;	456✔
216
217	const evtHandler = this.props[propName];	456✔
218	evtHandler(e);	456✔
219	});
220	});
221
222	flicking.once(EVENTS.READY, () => {	14✔
223	const children = this._getChildren();	14✔
224	const diffResult = this._jsxDiffer.update(children);	14✔
225
226	// children is changed before init
227	if (diffResult.added.length > 0 \|\| diffResult.removed.length > 0) {	14!
228	this._panels = this._createPanelRefs(this.props, children);	×
229	this._diffResult = diffResult;	×
230	}
231
232	this.forceUpdate();	14✔
233	});
234	}
235
236	private _checkPlugins() {	5✔
237	const flicking = this._vanillaFlicking;	48✔
238	const { list, added, removed, prevList } = this._pluginsDiffer.update(this.props.plugins!) as DiffResult<Plugin>;	48✔
239
240	flicking.addPlugins(...added.map(index => list[index]));	48✔
241	flicking.removePlugins(...removed.map(index => prevList[index]));	48✔
242	}
243
244	private _hasSameChildren(prevProps: this["props"], nextProps: this["props"]) {	5✔
245	const prevChildren = this._getChildren(prevProps.children);	20✔
246	const nextChildren = this._getChildren(nextProps.children);	20✔
247
248	if (prevChildren.length !== nextChildren.length) return false;	20!
249
250	const same = prevChildren.every((child, idx) => {	20✔
251	const nextChild = nextChildren[idx];	72✔
252	if ((child as React.ReactElement).key && (nextChild as React.ReactElement).key) {	72!
253	return (child as React.ReactElement).key === (nextChild as React.ReactElement).key;	72✔
254	} else {
NEW 255	return child === nextChild;	×
256	}
257	});
258
259	return same;	20✔
260	}
261
262	private _getChildren(children: React.ReactNode = this.props.children) {	220✔
263	return (React.Children.toArray(children) as Array<React.ReactElement<any>>)	130✔
264	.filter(child => child.type !== ViewportSlot)	486✔
265	.reduce((all, child) => {
266	return [...all, ...this._unpackFragment(child)];	486✔
267	}, []) as Array<React.ReactElement<any>>;
268	}
269
270	private _getViewportSlot() {	5✔
271	return (React.Children.toArray(this.props.children) as Array<React.ReactElement<any>>)	48✔
272	.filter(child => child.type === ViewportSlot);	180✔
273	}
274
275	private _unpackFragment(child: React.ReactElement) {	486✔
276	return this._isFragment(child)	486!
277	? React.Children.toArray(child.props.children)
278	.reduce((allChilds: React.ReactElement[], fragChild: React.ReactElement) => [...allChilds, ...this._unpackFragment(fragChild)], [] as React.ReactElement[])	×
279	: [child];
280	}
281
282	private _getVirtualPanels() {	5✔
283	const {
284	panelClass = "flicking-panel"	×
285	} = this.props.virtual!;	×
286	const panelsPerView = this.props.panelsPerView!;	×
287	const flicking = this._vanillaFlicking;	×
288	const initialized = flicking && flicking.initialized;	×
289
290	const renderingIndexes = initialized	×
291	? flicking.renderer.strategy.getRenderingIndexesByOrder(flicking)
292	: range(panelsPerView + 1);
293
294	const firstPanel = flicking && flicking.panels[0];	×
295	const size = firstPanel	×
296	? flicking.horizontal	×
297	? { width: firstPanel.size }
298	: { height: firstPanel.size }
299	: {};
300
301	return renderingIndexes.map(idx => {	×
302	return <div	×
303	key={idx}
304	data-element-index={idx}
305	ref={this._panels[idx] as React.RefObject<HTMLDivElement>}
306	className={panelClass}
307	style={size} />
308	});
309	}
310
311	private _getPanels() {	48✔
312	const origChildren = this._getChildren();	48✔
313	const vanillaFlicking = this._vanillaFlicking;	48✔
314	const diffResult = this._diffResult;	48✔
315
316	const children: React.ReactElement[] = vanillaFlicking && vanillaFlicking.initialized	48✔
317	? diffResult	20!
318	? getRenderingPanels(vanillaFlicking, diffResult)
319	: getRenderingPanels(vanillaFlicking, diff(origChildren, origChildren))
320	: origChildren;
321
322	return this.props.useFindDOMNode	48!
323	? children.map((child, idx) => <NonStrictPanel key={child.key!} ref={this._panels[idx] as any}>{child}</NonStrictPanel>)	×
324	: children.map((child, idx) => <StrictPanel key={child.key!} ref={this._panels[idx] as any}>{child}</StrictPanel>)	180✔
325	}
326
327	private _isFragment(child: React.ReactElement) {	5✔
328	if (child.type) {	486✔
329	return child.type === React.Fragment;	486✔
330	}
331
332	return (child as any) === React.Fragment;	×
333	}
334	}	5✔
335
336	interface Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>, VanillaFlicking { }
337	export default Flicking;	5✔

naver / egjs-flicking / 3142298682

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