4473

pending completion

Build # 4473

Build Type

Pull #1277

travis-ci

Committed by

web-flow

Commit Message

fix(Select): remove unused Select prop, fix missing case for clearing keyboard focus, add missing to

Pull Request Pull Request #1277: Single select

Run Details

2036 of 3041 branches covered (66.95%)

Branch coverage included in aggregate %.

102 of 102 new or added lines in 5 files covered. (100.0%)

4769 of 5666 relevant lines covered (84.17%)

23.18 hits per line

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

41.84

/packages/patternfly-4/react-core/src/components/Select/SelectToggle.js

import React, { Component } from 'react';
import styles from '@patternfly/patternfly/components/Select/select.css';
import { css } from '@patternfly/react-styles';
import PropTypes from 'prop-types';
import { CaretDownIcon } from '@patternfly/react-icons';
import { KeyTypes } from './selectConstants';

const propTypes = {
  /** HTML ID of dropdown toggle */
  id: PropTypes.string.isRequired,
  /** Anything which can be rendered as dropdown toggle */
  children: PropTypes.node,
  /** Classes applied to root element of dropdown toggle */
  className: PropTypes.string,
  /** Flag to indicate if select is expanded */
  isExpanded: PropTypes.bool,
  /** Callback called when toggle is clicked */
  onToggle: PropTypes.func,
  /** Callback for toggle open on keyboard entry */
  onEnter: PropTypes.func,
  /** Callback for toggle close */
  onClose: PropTypes.func,
  /** Element which wraps toggle */
  parentRef: PropTypes.any,
  /** Forces focus state */
  isFocused: PropTypes.bool,
  /** Forces hover state */
  isHovered: PropTypes.bool,
  /** Forces active state */
  isActive: PropTypes.bool,
  /** Display the toggle with no border or background */
  isPlain: PropTypes.bool,
  /** Type of the toggle button, defaults to 'button' */
  type: PropTypes.string,
  /** Additional props are spread to the container <button> */
  '': PropTypes.any
};

const defaultProps = {
  children: null,
  className: '',
  isExpanded: false,
  parentRef: null,
  isFocused: false,
  isHovered: false,
  isActive: false,
  isPlain: false,
  onToggle: Function.prototype
};

class SelectToggle extends Component {
  componentDidMount() {
    document.addEventListener('mousedown', this.onDocClick);
    document.addEventListener('touchstart', this.onDocClick);
    document.addEventListener('keydown', this.onEscPress);
  }

  componentWillUnmount() {
    document.removeEventListener('mousedown', this.onDocClick);
    document.removeEventListener('touchstart', this.onDocClick);
    document.removeEventListener('keydown', this.onEscPress);
  }

  onDocClick = event => {
    const { parentRef, isExpanded, onToggle, onClose } = this.props;
    if (isExpanded && parentRef && !parentRef.contains(event.target)) {
      onToggle && onToggle(false);
      onClose && onClose();
      this.toggle.focus();
    }
  };

  onEscPress = event => {
    const { parentRef, isExpanded, onToggle, onClose } = this.props;
    if (!isExpanded && event.key === KeyTypes.Enter) this.toggle.focus();
    if (
      isExpanded &&
      (event.key === KeyTypes.Escape || event.key === KeyTypes.Tab) &&
      parentRef &&
      parentRef.contains(event.target)
    ) {
      onToggle && onToggle(false);
      onClose && onClose();
      this.toggle.focus();
    }
  };

  onKeyDown = event => {
    const { isExpanded, onToggle, onClose, onEnter } = this.props;
    if ((event.key === KeyTypes.Tab && !isExpanded) || (event.key !== KeyTypes.Enter && event.key !== KeyTypes.Space))
      return;
    event.preventDefault();
    if ((event.key === KeyTypes.Tab || event.key === KeyTypes.Enter || event.key === KeyTypes.Space) && isExpanded) {
      onToggle && onToggle(!isExpanded);
      onClose && onClose();
      this.toggle.focus();
    } else if ((event.key === KeyTypes.Enter || event.key === KeyTypes.Space) && !isExpanded) {
      onToggle(!isExpanded);
      onEnter();
    }
  };

  render() {
    const {
      className,
      children,
      isExpanded,
      isFocused,
      isActive,
      isHovered,
      isPlain,
      onToggle,
      onEnter,
      onClose,
      parentRef,
      id,
      type,
      ...props
    } = this.props;
    return (
      <button
        {...props}
        id={id}
        ref={toggle => {
          this.toggle = toggle;
        }}
        className={css(
          styles.selectToggle,
          isFocused && styles.modifiers.focus,
          isHovered && styles.modifiers.hover,
          isActive && styles.modifiers.active,
          isPlain && styles.modifiers.plain,
          className
        )}
        type={type || 'button'}
        onClick={_event => {
          onToggle && onToggle(!isExpanded);
          if (isExpanded) onClose && onClose();
        }}
        aria-expanded={isExpanded}
        aria-haspopup="listbox"
        onKeyDown={this.onKeyDown}
      >
        <div className={css(styles.selectToggleWrapper)}>
          <span className={css(styles.selectToggleText)}>{children}</span>
        </div>
        <CaretDownIcon className={css(styles.selectToggleArrow)} />
      </button>
    );
  }
}

SelectToggle.propTypes = propTypes;
SelectToggle.defaultProps = defaultProps;

export default SelectToggle;

1	import React, { Component } from 'react';
2	import styles from '@patternfly/patternfly/components/Select/select.css';
3	import { css } from '@patternfly/react-styles';
4	import PropTypes from 'prop-types';
5	import { CaretDownIcon } from '@patternfly/react-icons';
6	import { KeyTypes } from './selectConstants';
7
8	const propTypes = {	2✔
9	/** HTML ID of dropdown toggle */
10	id: PropTypes.string.isRequired,
11	/** Anything which can be rendered as dropdown toggle */
12	children: PropTypes.node,
13	/** Classes applied to root element of dropdown toggle */
14	className: PropTypes.string,
15	/** Flag to indicate if select is expanded */
16	isExpanded: PropTypes.bool,
17	/** Callback called when toggle is clicked */
18	onToggle: PropTypes.func,
19	/** Callback for toggle open on keyboard entry */
20	onEnter: PropTypes.func,
21	/** Callback for toggle close */
22	onClose: PropTypes.func,
23	/** Element which wraps toggle */
24	parentRef: PropTypes.any,
25	/** Forces focus state */
26	isFocused: PropTypes.bool,
27	/** Forces hover state */
28	isHovered: PropTypes.bool,
29	/** Forces active state */
30	isActive: PropTypes.bool,
31	/** Display the toggle with no border or background */
32	isPlain: PropTypes.bool,
33	/** Type of the toggle button, defaults to 'button' */
34	type: PropTypes.string,
35	/** Additional props are spread to the container <button> */
36	'': PropTypes.any
37	};
38
39	const defaultProps = {	2✔
40	children: null,
41	className: '',
42	isExpanded: false,
43	parentRef: null,
44	isFocused: false,
45	isHovered: false,
46	isActive: false,
47	isPlain: false,
48	onToggle: Function.prototype
49	};
50
51	class SelectToggle extends Component {
52	componentDidMount() {
53	document.addEventListener('mousedown', this.onDocClick);	16✔
54	document.addEventListener('touchstart', this.onDocClick);	16✔
55	document.addEventListener('keydown', this.onEscPress);	16✔
56	}
57
58	componentWillUnmount() {
59	document.removeEventListener('mousedown', this.onDocClick);	2✔
60	document.removeEventListener('touchstart', this.onDocClick);	2✔
61	document.removeEventListener('keydown', this.onEscPress);	2✔
62	}
63
64	onDocClick = event => {
65	const { parentRef, isExpanded, onToggle, onClose } = this.props;	2✔
66	if (isExpanded && parentRef && !parentRef.contains(event.target)) {	2!
67	onToggle && onToggle(false);	2✔
68	onClose && onClose();	2!
69	this.toggle.focus();	2✔
70	}
71	};
72
73	onEscPress = event => {
74	const { parentRef, isExpanded, onToggle, onClose } = this.props;	×
75	if (!isExpanded && event.key === KeyTypes.Enter) this.toggle.focus();	×
76	if (	×
77	isExpanded &&	×
78	(event.key === KeyTypes.Escape \|\| event.key === KeyTypes.Tab) &&
79	parentRef &&
80	parentRef.contains(event.target)
81	) {
82	onToggle && onToggle(false);	×
83	onClose && onClose();	×
84	this.toggle.focus();	×
85	}
86	};
87
88	onKeyDown = event => {
89	const { isExpanded, onToggle, onClose, onEnter } = this.props;	×
90	if ((event.key === KeyTypes.Tab && !isExpanded) \|\| (event.key !== KeyTypes.Enter && event.key !== KeyTypes.Space))	×
91	return;	×
92	event.preventDefault();	×
93	if ((event.key === KeyTypes.Tab \|\| event.key === KeyTypes.Enter \|\| event.key === KeyTypes.Space) && isExpanded) {	×
94	onToggle && onToggle(!isExpanded);	×
95	onClose && onClose();	×
96	this.toggle.focus();	×
97	} else if ((event.key === KeyTypes.Enter \|\| event.key === KeyTypes.Space) && !isExpanded) {	×
98	onToggle(!isExpanded);	×
99	onEnter();	×
100	}
101	};
102
103	render() {
104	const {
105	className,
106	children,
107	isExpanded,
108	isFocused,
109	isActive,
110	isHovered,
111	isPlain,
112	onToggle,
113	onEnter,
114	onClose,
115	parentRef,
116	id,
117	type,
118	...props
119	} = this.props;	17✔
120	return (	17✔
121	<button
122	{...props}
123	id={id}
124	ref={toggle => {
125	this.toggle = toggle;	20✔
126	}}
127	className={css(
128	styles.selectToggle,
129	isFocused && styles.modifiers.focus,	18✔
130	isHovered && styles.modifiers.hover,	18✔
131	isActive && styles.modifiers.active,	18✔
132	isPlain && styles.modifiers.plain,	17!
133	className
134	)}
135	type={type \|\| 'button'}	34✔
136	onClick={_event => {
137	onToggle && onToggle(!isExpanded);	2✔
138	if (isExpanded) onClose && onClose();	2!
139	}}
140	aria-expanded={isExpanded}
141	aria-haspopup="listbox"
142	onKeyDown={this.onKeyDown}
143	>
144	<div className={css(styles.selectToggleWrapper)}>
145	<span className={css(styles.selectToggleText)}>{children}</span>
146	</div>
147	<CaretDownIcon className={css(styles.selectToggleArrow)} />
148	</button>
149	);
150	}
151	}
152
153	SelectToggle.propTypes = propTypes;	2✔
154	SelectToggle.defaultProps = defaultProps;	2✔
155
156	export default SelectToggle;

patternfly / patternfly-react / 4473

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