9079675673

Committed 14 May 2024 12:51PM UTC coverage: 22.948% (-0.2%) from 23.18%

Build # 9079675673

Build Type

Pull #611

github

Committed by

gustavo-salazar

Commit Message

height change of ebi header placeholder

Pull Request Pull Request #611: Dev => master Release `99.1`

Run Details

713 of 4238 branches covered (16.82%)

Branch coverage included in aggregate %.

2 of 9 new or added lines in 3 files covered. (22.22%)

2 existing lines in 2 files now uncovered.

1717 of 6351 relevant lines covered (27.04%)

57.69 hits per line

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

0.0

/src/components/Sentinel/index.js

import React, { PureComponent } from 'react';
import T from 'prop-types';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';

import { stick, unstick } from 'actions/creators';

import descriptionToPath from 'utils/processDescription/descriptionToPath';

import styles from './style.css';

/*:: type Props = {
  top: number,
  stick: function,
  unstick: function,
}; */

class Sentinel extends PureComponent /*:: <Props> */ {
  /*::
    _ref: { current: null | React$ElementRef<'span'> };
  */
  static propTypes = {
    top: T.number.isRequired,
    stick: T.func.isRequired,
    unstick: T.func.isRequired,
    path: T.string.isRequired,
  };

  static defaultProps = {
    top: 0,
  };

  constructor(props /*: Props */) {
    super(props);

    this._ref = React.createRef();
  }

  componentDidMount() {
    this._subscription = this._listenScrolled(this._ref.current, this.props);
  }

  componentWillUnmount() {
    this._subscription.unsubscribe();
  }

  _listenScrolled = (element, args) => {
    if (!window) return { unsubscribe() {} };
    if (window.IntersectionObserver) {
      return this._listenScrolledIO(element, args);
    }
    return this._listenScrolledEventListener(args);
  };
  // Default, use IntersectionObserver
  _listenScrolledIO = (element, { stick, unstick }) => {
    // let prevPage = null;
    // IntersectionObserver to be used on the EBI header
    const io = new IntersectionObserver(
      ([{ intersectionRatio: notStuck }]) => {
        // If the EBI header is visible, display full banner
        // const samePage = this.props.path === prevPage;
        // if (notStuck) {
        //   samePage ? stick() : unstick();
        // } else stick();

        notStuck ? unstick() : stick();
        // prevPage = this.props.path;
      },
      { threshold: [1] },
    );
    io.observe(element);
    return {
      unsubscribe() {
        io.disconnect();
      },
    };
  };

  // Fallback to event listener
  _listenScrolledEventListener = ({ stick, unstick, top }) => {
    let isStuck = false;
    // let prevPage = null;
    const checkStickyness = () => {
      const isNowStuck = window.scrollY > top;
      // Detect if stickyness status has changed
      if (isNowStuck !== isStuck) {
        // Trigger reducers if it has changed

        // const samePage = this.props.path === prevPage;
        // if (isNowStuck) {
        //   stick();
        // } else {
        //   samePage ? stick() : unstick();
        // }
        isNowStuck ? unstick() : stick();
        // prevPage = this.props.path;
        isStuck = isNowStuck;
      }
    };
    window.addEventListener('resize', checkStickyness, { passive: true });
    window.addEventListener('scroll', checkStickyness, { passive: true });
    // Run once, just in case
    checkStickyness();
    return {
      unsubscribe() {
        window.removeEventListener('resize', checkStickyness);
        window.removeEventListener('scroll', checkStickyness);
      },
    };
  };

  render() {
    const { top } = this.props;
    return (
      <span
        className={styles.sentinel}
        style={{ top: `${top}px` }}
        ref={this._ref}
      />
    );
  }
}

const mapStateToProps = createSelector(
  (state) => state.customLocation.description,
  (description) => ({
    path: descriptionToPath(description).split('/')?.[1],
  }),
);

export default connect(mapStateToProps, { stick, unstick })(Sentinel);

1	import React, { PureComponent } from 'react';
2	import T from 'prop-types';
3	import { connect } from 'react-redux';
4	import { createSelector } from 'reselect';
5
6	import { stick, unstick } from 'actions/creators';
7
8	import descriptionToPath from 'utils/processDescription/descriptionToPath';
9
10	import styles from './style.css';
11
12	/*:: type Props = {
13	top: number,
14	stick: function,
15	unstick: function,
16	}; */
17
18	class Sentinel extends PureComponent /:: <Props> / {
19	/*::
20	_ref: { current: null \| React$ElementRef<'span'> };
21	*/
22	static propTypes = {	×
23	top: T.number.isRequired,
24	stick: T.func.isRequired,
25	unstick: T.func.isRequired,
26	path: T.string.isRequired,
27	};
28
29	static defaultProps = {	×
30	top: 0,
31	};
32
33	constructor(props /: Props /) {
34	super(props);	×
35
36	this._ref = React.createRef();	×
37	}
38
39	componentDidMount() {
40	this._subscription = this._listenScrolled(this._ref.current, this.props);	×
41	}
42
43	componentWillUnmount() {
44	this._subscription.unsubscribe();	×
45	}
46
47	_listenScrolled = (element, args) => {	×
48	if (!window) return { unsubscribe() {} };	×
49	if (window.IntersectionObserver) {	×
50	return this._listenScrolledIO(element, args);	×
51	}
52	return this._listenScrolledEventListener(args);	×
53	};
54	// Default, use IntersectionObserver
55	_listenScrolledIO = (element, { stick, unstick }) => {	×
56	// let prevPage = null;
57	// IntersectionObserver to be used on the EBI header
58	const io = new IntersectionObserver(	×
59	([{ intersectionRatio: notStuck }]) => {
60	// If the EBI header is visible, display full banner
61	// const samePage = this.props.path === prevPage;
62	// if (notStuck) {
63	// samePage ? stick() : unstick();
64	// } else stick();
65
NEW 66	notStuck ? unstick() : stick();	×
67	// prevPage = this.props.path;
68	},
69	{ threshold: [1] },
70	);
71	io.observe(element);	×
72	return {	×
73	unsubscribe() {
74	io.disconnect();	×
75	},
76	};
77	};
78
79	// Fallback to event listener
80	_listenScrolledEventListener = ({ stick, unstick, top }) => {	×
81	let isStuck = false;	×
82	// let prevPage = null;
83	const checkStickyness = () => {	×
84	const isNowStuck = window.scrollY > top;	×
85	// Detect if stickyness status has changed
86	if (isNowStuck !== isStuck) {	×
87	// Trigger reducers if it has changed
88
89	// const samePage = this.props.path === prevPage;
90	// if (isNowStuck) {
91	// stick();
92	// } else {
93	// samePage ? stick() : unstick();
94	// }
NEW 95	isNowStuck ? unstick() : stick();	×
96	// prevPage = this.props.path;
UNCOV 97	isStuck = isNowStuck;	×
98	}
99	};
100	window.addEventListener('resize', checkStickyness, { passive: true });	×
101	window.addEventListener('scroll', checkStickyness, { passive: true });	×
102	// Run once, just in case
103	checkStickyness();	×
104	return {	×
105	unsubscribe() {
106	window.removeEventListener('resize', checkStickyness);	×
107	window.removeEventListener('scroll', checkStickyness);	×
108	},
109	};
110	};
111
112	render() {
113	const { top } = this.props;	×
114	return (	×
115	<span
116	className={styles.sentinel}
117	style={{ top: `${top}px` }}
118	ref={this._ref}
119	/>
120	);
121	}
122	}
123
124	const mapStateToProps = createSelector(	×
NEW 125	(state) => state.customLocation.description,	×
NEW 126	(description) => ({	×
127	path: descriptionToPath(description).split('/')?.[1],
128	}),
129	);
130
131	export default connect(mapStateToProps, { stick, unstick })(Sentinel);

ProteinsWebTeam / interpro7-client / 9079675673

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