4190

pending completion

Build # 4190

Build Type

push

travis-ci

Committed by

dlabaj

Commit Message

<a href="https://github.com/patternfly/patternfly-react/commit/<a class=hub.com/patternfly/patternfly-react/commit/2a505a883c2bbb6457b547de53f4f75c37ddd136">2a505a883<a href="https://github.com/patternfly/patternfly-react/commit/2a505a883c2bbb6457b547de53f4f75c37ddd136">&quot;&gt;PF4: feat(Tabs) Add Tabs for PF4 (#1144)

* PF4: feat(Tabs) Add Tabs for PF4

* update based on reviews

* update examples to match core

* update test snapshot

* add missing index.d.ts file

* Remove secondary tabs

* Revert &amp;quot;Remove secondary tabs&quot;

This reverts commit </a><a class="double-link" href="https://github.com/patternfly/patternfly-react/commit/<a class="double-link" href="https://github.com/patternfly/patternfly-react/commit/ca890d90c34973ee2a2cab1fd1afc24b56ff7e61">ca890d90c</a>">ca890d90c</a><a href="https://github.com/patternfly/patternfly-react/commit/2a505a883c2bbb6457b547de53f4f75c37ddd136">.

* remove scroll buttons from secondary tabs

* updates based on review comments

* Add tabs to integration App

Run Details

1925 of 2755 branches covered (69.87%)

Branch coverage included in aggregate %.

67 of 67 new or added lines in 4 files covered. (100.0%)

4622 of 5414 relevant lines covered (85.37%)

23.7 hits per line

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

79.35

/packages/patternfly-4/react-core/src/components/Tabs/Tabs.js

import React from 'react';
import styles from '@patternfly/patternfly-next/components/Tabs/tabs.css';
import { css } from '@patternfly/react-styles';
import PropTypes from 'prop-types';
import { AngleLeftIcon, AngleRightIcon } from '@patternfly/react-icons';
import { getUniqueId, isElementInView, sideElementIsOutOfView } from '../../internal/util';
import { SIDE } from '../../internal/constants';

const propTypes = {
  /** content rendered inside the Tabs Component. */
  children: PropTypes.node.isRequired,
  /** additional classes added to the Tabs */
  className: PropTypes.string,
  /** the index of the active tab */
  activeKey: PropTypes.number,
  /** handel tab selection */
  onSelect: PropTypes.func,
  /** Enables the filled tab list layout */
  isFilled: PropTypes.bool,
  /** Enables Secondary Tab styling */
  isSecondary: PropTypes.bool,
  /** Aria Label for the left Scroll Button */
  leftScrollAriaLabel: PropTypes.string,
  /** Aria Label for the right Scroll Button */
  rightScrollAriaLabel: PropTypes.string
};

const defaultProps = {
  className: '',
  activeKey: 0,
  onSelect: () => undefined,
  isFilled: false,
  isSecondary: false,
  leftScrollAriaLabel: 'Scroll left',
  rightScrollAriaLabel: 'Scroll Right'
};

class Tabs extends React.Component {
  static propTypes = propTypes;
  static defaultProps = defaultProps;

  state = {
    showLeftScrollButton: false,
    showRightScrollButton: false,
    highlightLeftScrollButton: false,
    highlightRightScrollButton: false
  };

  id = getUniqueId();
  tabList = React.createRef();

  handleTabClick(event, eventKey) {
    this.props.onSelect(event, eventKey);
  }

  handleScrollButtons = () => {
    if (this.tabList.current) {
      const container = this.tabList.current;
      // get first element and check if it is in view
      const showLeftScrollButton = !isElementInView(container, container.firstChild, false);

      // get lase element and check if it is in view
      const showRightScrollButton = !isElementInView(container, container.lastChild, false);

      // determine if selected tab is out of view and apply styles
      let selectedTab;
      const childrenArr = Array.from(container.children);
      childrenArr.forEach(child => {
        const { className } = child;
        if (className.search('pf-m-current') > 0) {
          selectedTab = child;
        }
      });

      const sideOutOfView = sideElementIsOutOfView(container, selectedTab);

      this.setState({
        showLeftScrollButton,
        showRightScrollButton,
        highlightLeftScrollButton: (sideOutOfView === SIDE.LEFT || sideOutOfView === SIDE.BOTH) && showLeftScrollButton,
        highlightRightScrollButton:
          (sideOutOfView === SIDE.RIGHT || sideOutOfView === SIDE.BOTH) && showRightScrollButton
      });
    }
  };

  scrollLeft = () => {
    // find first Element that is fully in view on the left, then scroll to the element before it
    if (this.tabList.current) {
      const container = this.tabList.current;
      const childrenArr = Array.from(container.children);
      let firstElementInView;
      let lastElementOutOfView;
      let i;
      for (i = 0; i < childrenArr.length && !firstElementInView; i++) {
        if (isElementInView(container, childrenArr[i], false)) {
          firstElementInView = childrenArr[i];
          lastElementOutOfView = childrenArr[i - 1];
        }
      }
      lastElementOutOfView && (container.scrollLeft -= lastElementOutOfView.scrollWidth);
    }
  };

  scrollRight = () => {
    // find last Element that is fully in view on the right, then scroll to the element after it
    if (this.tabList.current) {
      const container = this.tabList.current;
      const childrenArr = Array.from(container.children);
      let lastElementInView;
      let firstElementOutOfView;
      let i;
      for (i = childrenArr.length - 1; i >= 0 && !lastElementInView; i--) {
        if (isElementInView(container, childrenArr[i], false)) {
          lastElementInView = childrenArr[i];
          firstElementOutOfView = childrenArr[i + 1];
        }
      }
      firstElementOutOfView && (container.scrollLeft += firstElementOutOfView.scrollWidth);
    }
  };

  componentDidMount() {
    window.addEventListener('resize', this.handleScrollButtons, false);

    // call the handle resize function to check if scroll buttons should be shown
    this.handleScrollButtons();
  }

  componentWillUnmount() {
    document.removeEventListener('resize', this.handleScrollButtons, false);
  }

  render() {
    const {
      className,
      children,
      activeKey,
      isFilled,
      isSecondary,
      leftScrollAriaLabel,
      rightScrollAriaLabel,
      ...props
    } = this.props;
    const {
      showLeftScrollButton,
      showRightScrollButton,
      highlightLeftScrollButton,
      highlightRightScrollButton
    } = this.state;
    return (
      <React.Fragment>
        <div
          {...props}
          className={css(
            styles.tabs,
            isFilled && styles.modifiers.fill,
            isSecondary && styles.modifiers.tabsSecondary,
            showLeftScrollButton && styles.modifiers.start,
            showRightScrollButton && styles.modifiers.end,
            highlightLeftScrollButton && styles.modifiers.startCurrent,
            highlightRightScrollButton && styles.modifiers.endCurrent,
            className
          )}
        >
          {!isSecondary && (
            <button
              className={css(styles.tabsScrollButton)}
              variant="plain"
              aria-label={leftScrollAriaLabel}
              onClick={this.scrollLeft}
            >
              <AngleLeftIcon />
            </button>
          )}
          <ul className={css(styles.tabsList)} ref={this.tabList} onScroll={this.handleScrollButtons}>
            {children.map((child, index) => (
              <li
                key={index}
                className={css(
                  styles.tabsItem,
                  child.props.eventKey === activeKey && styles.modifiers.current,
                  className
                )}
              >
                <button
                  className={css(styles.tabsButton)}
                  onClick={event => this.handleTabClick(event, child.props.eventKey)}
                  id={`pf-tab-${child.props.eventKey}-${child.props.id || this.id}`}
                  aria-controls={`pf-tab-section-${child.props.eventKey}-${child.props.id || this.id}`}
                >
                  {child.props.title}
                </button>
              </li>
            ))}
          </ul>
          {!isSecondary && (
            <button
              className={css(styles.tabsScrollButton)}
              variant="plain"
              aria-label={rightScrollAriaLabel}
              onClick={this.scrollRight}
            >
              <AngleRightIcon />
            </button>
          )}
        </div>
        {children.map((child, index) => (
          <section
            key={index}
            hidden={child.props.eventKey !== activeKey}
            className={css(child.props.className)}
            id={`pf-tab-section-${child.props.eventKey}-${child.props.id || this.id}`}
            aria-labelledby={`pf-tab-${child.props.eventKey}-${child.props.id || this.id}`}
          >
            {child.props.children}
          </section>
        ))}
      </React.Fragment>
    );
  }
}

export default Tabs;

1	import React from 'react';
2	import styles from '@patternfly/patternfly-next/components/Tabs/tabs.css';
3	import { css } from '@patternfly/react-styles';
4	import PropTypes from 'prop-types';
5	import { AngleLeftIcon, AngleRightIcon } from '@patternfly/react-icons';
6	import { getUniqueId, isElementInView, sideElementIsOutOfView } from '../../internal/util';
7	import { SIDE } from '../../internal/constants';
8
9	const propTypes = {	1✔
10	/** content rendered inside the Tabs Component. */
11	children: PropTypes.node.isRequired,
12	/** additional classes added to the Tabs */
13	className: PropTypes.string,
14	/** the index of the active tab */
15	activeKey: PropTypes.number,
16	/** handel tab selection */
17	onSelect: PropTypes.func,
18	/** Enables the filled tab list layout */
19	isFilled: PropTypes.bool,
20	/** Enables Secondary Tab styling */
21	isSecondary: PropTypes.bool,
22	/** Aria Label for the left Scroll Button */
23	leftScrollAriaLabel: PropTypes.string,
24	/** Aria Label for the right Scroll Button */
25	rightScrollAriaLabel: PropTypes.string
26	};
27
28	const defaultProps = {	1✔
29	className: '',
30	activeKey: 0,
31	onSelect: () => undefined,	×
32	isFilled: false,
33	isSecondary: false,
34	leftScrollAriaLabel: 'Scroll left',
35	rightScrollAriaLabel: 'Scroll Right'
36	};
37
38	class Tabs extends React.Component {
39	static propTypes = propTypes;
40	static defaultProps = defaultProps;
41
42	state = {
43	showLeftScrollButton: false,
44	showRightScrollButton: false,
45	highlightLeftScrollButton: false,
46	highlightRightScrollButton: false
47	};
48
49	id = getUniqueId();
50	tabList = React.createRef();
51
52	handleTabClick(event, eventKey) {
53	this.props.onSelect(event, eventKey);	1✔
54	}
55
56	handleScrollButtons = () => {
57	if (this.tabList.current) {	7✔
58	const container = this.tabList.current;	3✔
59	// get first element and check if it is in view
60	const showLeftScrollButton = !isElementInView(container, container.firstChild, false);	3✔
61
62	// get lase element and check if it is in view
63	const showRightScrollButton = !isElementInView(container, container.lastChild, false);	3✔
64
65	// determine if selected tab is out of view and apply styles
66	let selectedTab;
67	const childrenArr = Array.from(container.children);	3✔
68	childrenArr.forEach(child => {	3✔
69	const { className } = child;	9✔
70	if (className.search('pf-m-current') > 0) {	9✔
71	selectedTab = child;	3✔
72	}
73	});
74
75	const sideOutOfView = sideElementIsOutOfView(container, selectedTab);	3✔
76
77	this.setState({	3✔
78	showLeftScrollButton,
79	showRightScrollButton,
80	highlightLeftScrollButton: (sideOutOfView === SIDE.LEFT \|\| sideOutOfView === SIDE.BOTH) && showLeftScrollButton,	6!
81	highlightRightScrollButton:
82	(sideOutOfView === SIDE.RIGHT \|\| sideOutOfView === SIDE.BOTH) && showRightScrollButton	6!
83	});
84	}
85	};
86
87	scrollLeft = () => {
88	// find first Element that is fully in view on the left, then scroll to the element before it
89	if (this.tabList.current) {	1!
90	const container = this.tabList.current;	1✔
91	const childrenArr = Array.from(container.children);	1✔
92	let firstElementInView;
93	let lastElementOutOfView;
94	let i;
95	for (i = 0; i < childrenArr.length && !firstElementInView; i++) {	1✔
96	if (isElementInView(container, childrenArr[i], false)) {	1!
97	firstElementInView = childrenArr[i];	1✔
98	lastElementOutOfView = childrenArr[i - 1];	1✔
99	}
100	}
101	lastElementOutOfView && (container.scrollLeft -= lastElementOutOfView.scrollWidth);	1!
102	}
103	};
104
105	scrollRight = () => {
106	// find last Element that is fully in view on the right, then scroll to the element after it
107	if (this.tabList.current) {	1!
108	const container = this.tabList.current;	1✔
109	const childrenArr = Array.from(container.children);	1✔
110	let lastElementInView;
111	let firstElementOutOfView;
112	let i;
113	for (i = childrenArr.length - 1; i >= 0 && !lastElementInView; i--) {	1✔
114	if (isElementInView(container, childrenArr[i], false)) {	1!
115	lastElementInView = childrenArr[i];	1✔
116	firstElementOutOfView = childrenArr[i + 1];	1✔
117	}
118	}
119	firstElementOutOfView && (container.scrollLeft += firstElementOutOfView.scrollWidth);	1!
120	}
121	};
122
123	componentDidMount() {
124	window.addEventListener('resize', this.handleScrollButtons, false);	7✔
125
126	// call the handle resize function to check if scroll buttons should be shown
127	this.handleScrollButtons();	7✔
128	}
129
130	componentWillUnmount() {
131	document.removeEventListener('resize', this.handleScrollButtons, false);	×
132	}
133
134	render() {
135	const {
136	className,
137	children,
138	activeKey,
139	isFilled,
140	isSecondary,
141	leftScrollAriaLabel,
142	rightScrollAriaLabel,
143	...props
144	} = this.props;	10✔
145	const {
146	showLeftScrollButton,
147	showRightScrollButton,
148	highlightLeftScrollButton,
149	highlightRightScrollButton
150	} = this.state;	10✔
151	return (	10✔
152	<React.Fragment>
153	<div
154	{...props}
155	className={css(
156	styles.tabs,
157	isFilled && styles.modifiers.fill,	17✔
158	isSecondary && styles.modifiers.tabsSecondary,	10!
159	showLeftScrollButton && styles.modifiers.start,	10!
160	showRightScrollButton && styles.modifiers.end,	10!
161	highlightLeftScrollButton && styles.modifiers.startCurrent,	10!
162	highlightRightScrollButton && styles.modifiers.endCurrent,	10!
163	className
164	)}
165	>
166	{!isSecondary && (	20✔
167	<button
168	className={css(styles.tabsScrollButton)}
169	variant="plain"
170	aria-label={leftScrollAriaLabel}
171	onClick={this.scrollLeft}
172	>
173	<AngleLeftIcon />
174	</button>
175	)}
176	<ul className={css(styles.tabsList)} ref={this.tabList} onScroll={this.handleScrollButtons}>
177	{children.map((child, index) => (
178	<li	30✔
179	key={index}
180	className={css(
181	styles.tabsItem,
182	child.props.eventKey === activeKey && styles.modifiers.current,	40✔
183	className
184	)}
185	>
186	<button
187	className={css(styles.tabsButton)}
188	onClick={event => this.handleTabClick(event, child.props.eventKey)}	1✔
189	id={`pf-tab-${child.props.eventKey}-${child.props.id \|\| this.id}`}	30!
190	aria-controls={`pf-tab-section-${child.props.eventKey}-${child.props.id \|\| this.id}`}	30!
191	>
192	{child.props.title}
193	</button>
194	</li>
195	))}
196	</ul>
197	{!isSecondary && (	20✔
198	<button
199	className={css(styles.tabsScrollButton)}
200	variant="plain"
201	aria-label={rightScrollAriaLabel}
202	onClick={this.scrollRight}
203	>
204	<AngleRightIcon />
205	</button>
206	)}
207	</div>
208	{children.map((child, index) => (
209	<section	30✔
210	key={index}
211	hidden={child.props.eventKey !== activeKey}
212	className={css(child.props.className)}
213	id={`pf-tab-section-${child.props.eventKey}-${child.props.id \|\| this.id}`}	30!
214	aria-labelledby={`pf-tab-${child.props.eventKey}-${child.props.id \|\| this.id}`}	30!
215	>
216	{child.props.children}
217	</section>
218	))}
219	</React.Fragment>
220	);
221	}
222	}
223
224	export default Tabs;

patternfly / patternfly-react / 4190

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