9019793137

Committed 09 May 2024 03:42PM UTC coverage: 23.102% (-0.06%) from 23.159%

Build # 9019793137

Build Type

Pull #609

github

Committed by

gustavo-salazar

Commit Message

lint and flow fixes for Link and Button

Pull Request Pull Request #609: Interpro Button

Run Details

725 of 4267 branches covered (16.99%)

Branch coverage included in aggregate %.

5 of 23 new or added lines in 10 files covered. (21.74%)

42 existing lines in 4 files now uncovered.

1737 of 6390 relevant lines covered (27.18%)

57.39 hits per line

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

7.87

/src/components/generic/Link/index.js

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

import descriptionToDescription from 'utils/processDescription/descriptionToDescription';

import { goToCustomLocation, closeEverything } from 'actions/creators';
import { customLocationSelector } from 'reducers/custom-location';

import generateHref from './utils/generate-href';
import generateRel from './utils/generate-rel';
import generateClassName from './utils/generate-classname';

// $FlowFixMe
import cssBinder from 'styles/cssBinder';
import buttonCSS from 'components/SimpleCommonComponents/Button/style.css';
const css = cssBinder(buttonCSS);

import { DEV } from 'config';

const happenedWithModifierKey = (event) =>
  !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
const happenedWithLeftClick = (event) => event.button === 0;

const getNextLocation = (customLocation, to) =>
  typeof to === 'function' ? to(customLocation) : to;

/*:: type Props = {
  onClick?: function,
  onNewLocation?: function,
  customLocation: {
    description: Object,
    search: Object,
    hash: string,
  },
  exact?: boolean,
  children: any,
  rel?: string,
  href?: string,
  closeEverything: function,
  goToCustomLocation: function,
  target?: string,
  to?: function | {
    description: Object,
    search?: Object,
    hash?: string,
  },
  style?: ?Object,
  disabled?: boolean,
  className?: string,
  activeClass?: function | string,
  withReferrer?: boolean,
  buttonType?: string,
}; */

export class _Link extends PureComponent /*:: <Props> */ {
  static propTypes = {
    id: T.string,
    onClick: T.func,
    onNewLocation: T.func,
    customLocation: T.shape({
      description: T.object.isRequired,
      search: T.object.isRequired,
      hash: T.string.isRequired,
    }).isRequired,
    exact: T.bool,
    children: T.any,
    rel: T.string,
    href: T.string,
    closeEverything: T.func.isRequired,
    goToCustomLocation: T.func.isRequired,
    target: T.string,
    to: T.oneOfType([
      T.shape({
        description: T.object.isRequired,
        search: T.object,
        hash: T.string,
      }),
      T.func,
    ]),
    disabled: T.bool,
    className: T.string,
    activeClass: T.oneOfType([T.string, T.func]),
    withReferrer: T.bool,
    download: T.string,
    buttonType: T.string,
  };

  handleClick = (event) => {
    const {
      disabled,
      onClick,
      onNewLocation,
      target,
      closeEverything,
      goToCustomLocation,
      to,
      href,
      customLocation,
    } = this.props;
    // pass it on to an externally defined handler
    if (disabled) {
      event.preventDefault();
      return;
    }

    if (onClick) onClick(event);
    if (event.defaultPrevented) return;
    closeEverything();
    if (!to && href) return;
    // conditions to ignore handling
    if (!happenedWithLeftClick(event)) return;
    if (happenedWithModifierKey(event)) return;
    if (target) return;
    // OK, now we can handle it
    event.preventDefault();
    if (this.props.disabled) return;
    const nextLocation = getNextLocation(customLocation, to);
    goToCustomLocation(nextLocation);
    if (onNewLocation) onNewLocation(nextLocation);
  };

  render() {
    const {
      // unused (to prevent passing down)
      onClick,
      closeEverything,
      goToCustomLocation,
      // used or changed
      exact,
      customLocation,
      activeClass,
      className,
      to,
      disabled,
      href,
      children,
      rel,
      target,
      withReferrer,
      buttonType,
      // passed down
      ...props
    } = this.props;
    let _disabled = disabled;
    let _children = children;
    let _href;
    let activeClassName;
    try {
      const nextCustomLocation = getNextLocation(customLocation, to) || {};
      nextCustomLocation.description = descriptionToDescription(
        nextCustomLocation.description,
      );
      _href = generateHref(nextCustomLocation, href);
      activeClassName = generateClassName(
        activeClass,
        customLocation,
        href,
        _href,
        exact,
      );
    } catch (error) {
      console.error(error);
      _disabled = true;
      if (DEV) {
        props.style = {
          ...(props.style || {}),
          border: '5px dashed red',
          color: 'darkred',
        };
        _children = (
          <>
            ⚠️
            {children}
            ⚠️
          </>
        );
      }
    }
    if (_disabled) {
      props.style = {
        ...(props.style || {}),
        // userSelect: 'none',
        pointerEvents: 'none',
        cursor: 'not-allowed',
        opacity: 0.3,
      };
    }
    const _rel = generateRel(rel, target, href, withReferrer);
    let buttonClassName = buttonType
      ? ['vf-button', `vf-button--${buttonType}`, 'vf-button--sm']
      : [];
    return (
      <a
        {...props}
        href={_href}
        rel={_rel}
        target={target}
        className={css(className, activeClassName, ...buttonClassName) || null}
        onClick={this.handleClick}
        style={{
          // Corrections for interpro-new... to remove when that css is finally removed
          color: buttonType
            ? 'var(--vf-button-text-color, #ffffff)'
            : undefined,
          borderBottomColor: buttonType
            ? 'var(--vf-button-border-color, #ffffff)'
            : undefined,
        }}
      >
        {_children}
      </a>
    );
  }
}
_Link.displayName = 'Link';
const mapStateToProps = createSelector(
  customLocationSelector,
  (customLocation) => ({ customLocation }),
);

export default connect(mapStateToProps, {
  closeEverything,
  goToCustomLocation,
})(_Link);

1	// @flow
2	import React, { PureComponent } from 'react';
3	import T from 'prop-types';
4	import { connect } from 'react-redux';
5	import { createSelector } from 'reselect';
6
7	import descriptionToDescription from 'utils/processDescription/descriptionToDescription';
8
9	import { goToCustomLocation, closeEverything } from 'actions/creators';
10	import { customLocationSelector } from 'reducers/custom-location';
11
12	import generateHref from './utils/generate-href';
13	import generateRel from './utils/generate-rel';
14	import generateClassName from './utils/generate-classname';
15
16	// $FlowFixMe
17	import cssBinder from 'styles/cssBinder';
18	import buttonCSS from 'components/SimpleCommonComponents/Button/style.css';
19	const css = cssBinder(buttonCSS);	71✔
20
21	import { DEV } from 'config';
22
23	const happenedWithModifierKey = (event) =>	71✔
24	!!(event.metaKey \|\| event.altKey \|\| event.ctrlKey \|\| event.shiftKey);	×
25	const happenedWithLeftClick = (event) => event.button === 0;	71✔
26
27	const getNextLocation = (customLocation, to) =>	71✔
28	typeof to === 'function' ? to(customLocation) : to;	×
29
30	/*:: type Props = {
31	onClick?: function,
32	onNewLocation?: function,
33	customLocation: {
34	description: Object,
35	search: Object,
36	hash: string,
37	},
38	exact?: boolean,
39	children: any,
40	rel?: string,
41	href?: string,
42	closeEverything: function,
43	goToCustomLocation: function,
44	target?: string,
45	to?: function \| {
46	description: Object,
47	search?: Object,
48	hash?: string,
49	},
50	style?: ?Object,
51	disabled?: boolean,
52	className?: string,
53	activeClass?: function \| string,
54	withReferrer?: boolean,
55	buttonType?: string,
56	}; */
57
58	export class _Link extends PureComponent /:: <Props> / {
59	static propTypes = {	71✔
60	id: T.string,
61	onClick: T.func,
62	onNewLocation: T.func,
63	customLocation: T.shape({
64	description: T.object.isRequired,
65	search: T.object.isRequired,
66	hash: T.string.isRequired,
67	}).isRequired,
68	exact: T.bool,
69	children: T.any,
70	rel: T.string,
71	href: T.string,
72	closeEverything: T.func.isRequired,
73	goToCustomLocation: T.func.isRequired,
74	target: T.string,
75	to: T.oneOfType([
76	T.shape({
77	description: T.object.isRequired,
78	search: T.object,
79	hash: T.string,
80	}),
81	T.func,
82	]),
83	disabled: T.bool,
84	className: T.string,
85	activeClass: T.oneOfType([T.string, T.func]),
86	withReferrer: T.bool,
87	download: T.string,
88	buttonType: T.string,
89	};
90
91	handleClick = (event) => {	×
92	const {
93	disabled,
94	onClick,
95	onNewLocation,
96	target,
97	closeEverything,
98	goToCustomLocation,
99	to,
100	href,
101	customLocation,
102	} = this.props;	×
103	// pass it on to an externally defined handler
104	if (disabled) {	×
105	event.preventDefault();	×
106	return;	×
107	}
108
109	if (onClick) onClick(event);	×
110	if (event.defaultPrevented) return;	×
111	closeEverything();	×
112	if (!to && href) return;	×
113	// conditions to ignore handling
114	if (!happenedWithLeftClick(event)) return;	×
115	if (happenedWithModifierKey(event)) return;	×
116	if (target) return;	×
117	// OK, now we can handle it
118	event.preventDefault();	×
119	if (this.props.disabled) return;	×
120	const nextLocation = getNextLocation(customLocation, to);	×
121	goToCustomLocation(nextLocation);	×
122	if (onNewLocation) onNewLocation(nextLocation);	×
123	};
124
125	render() {
126	const {
127	// unused (to prevent passing down)
128	onClick,
129	closeEverything,
130	goToCustomLocation,
131	// used or changed
132	exact,
133	customLocation,
134	activeClass,
135	className,
136	to,
137	disabled,
138	href,
139	children,
140	rel,
141	target,
142	withReferrer,
143	buttonType,
144	// passed down
145	...props
146	} = this.props;	×
147	let _disabled = disabled;	×
148	let _children = children;	×
149	let _href;
150	let activeClassName;
151	try {	×
152	const nextCustomLocation = getNextLocation(customLocation, to) \|\| {};	×
153	nextCustomLocation.description = descriptionToDescription(	×
154	nextCustomLocation.description,
155	);
156	_href = generateHref(nextCustomLocation, href);	×
157	activeClassName = generateClassName(	×
158	activeClass,
159	customLocation,
160	href,
161	_href,
162	exact,
163	);
164	} catch (error) {
165	console.error(error);	×
166	_disabled = true;	×
167	if (DEV) {	×
168	props.style = {	×
169	...(props.style \|\| {}),	×
170	border: '5px dashed red',
171	color: 'darkred',
172	};
173	_children = (	×
174	<>
175	⚠️
176	{children}
177	⚠️
178	</>
179	);
180	}
181	}
182	if (_disabled) {	×
183	props.style = {	×
184	...(props.style \|\| {}),	×
185	// userSelect: 'none',
186	pointerEvents: 'none',
187	cursor: 'not-allowed',
188	opacity: 0.3,
189	};
190	}
191	const _rel = generateRel(rel, target, href, withReferrer);	×
NEW 192	let buttonClassName = buttonType	×
193	? ['vf-button', `vf-button--${buttonType}`, 'vf-button--sm']
194	: [];
UNCOV 195	return (	×
196	<a
197	{...props}
198	href={_href}
199	rel={_rel}
200	target={target}
201	className={css(className, activeClassName, ...buttonClassName) \|\| null}	×
202	onClick={this.handleClick}
203	style={{
204	// Corrections for interpro-new... to remove when that css is finally removed
205	color: buttonType	×
206	? 'var(--vf-button-text-color, #ffffff)'
207	: undefined,
208	borderBottomColor: buttonType	×
209	? 'var(--vf-button-border-color, #ffffff)'
210	: undefined,
211	}}
212	>
213	{_children}
214	</a>
215	);
216	}
217	}
218	_Link.displayName = 'Link';	71✔
219	const mapStateToProps = createSelector(	71✔
220	customLocationSelector,
221	(customLocation) => ({ customLocation }),	×
222	);
223
224	export default connect(mapStateToProps, {
225	closeEverything,
226	goToCustomLocation,
227	})(_Link);

ProteinsWebTeam / interpro7-client / 9019793137

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