1054

pending completion

Build # 1054

Build Type

Pull #309

travis-ci

Committed by

web-flow

Commit Message

<a href="https://github.com/couds/react-bulma-components/commit/<a class=hub.com/couds/react-bulma-components/commit/ef0138cb78195a7a2c67775ced3ed1437b5fcf8a">ef0138cb7<a href="https://github.com/couds/react-bulma-components/commit/ef0138cb78195a7a2c67775ced3ed1437b5fcf8a">">Merge </a><a class="double-link" href="https://github.com/couds/react-bulma-components/commit/<a class="double-link" href="https://github.com/couds/react-bulma-components/commit/5e0e4e8c84dd68ae5c4dbbf783bbaf0d633a32bf">5e0e4e8c8</a>">5e0e4e8c8</a><a href="https://github.com/couds/react-bulma-components/commit/ef0138cb78195a7a2c67775ced3ed1437b5fcf8a"> into 732e00f37">732e00f37</a>

Pull Request Pull Request #309: Update docs

Run Details

132 of 154 branches covered (85.71%)

Branch coverage included in aggregate %.

147 of 147 new or added lines in 34 files covered. (100.0%)

528 of 542 relevant lines covered (97.42%)

45.61 hits per line

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

60.0

/src/components/dropdown/dropdown.js

import React, { useEffect, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';

import CONSTANTS from '../../constants';
import DropdownItem from './components/item';
import DropdownDivider from './components/divider';
import Button from '../button';

import Element from '../element';

const colors = [null].concat(Object.values(CONSTANTS.COLORS));

const Dropdown = ({
  className,
  children,
  value,
  color,
  align,
  right,
  up,
  hoverable,
  label,
  onChange,
  closeOnSelect,
  icon,
  domRef,
  ...props
}) => {
  const ref = useRef(domRef);
  const [isOpen, setIsOpen] = useState(false);
  const close = (evt) => {
    // IDK yet how to test using the ref in enzime
    // istanbul ignore if
    if (
      hoverable ||
      (evt && ref && ref.current && ref.current.contains(evt.target))
    ) {
      return;
    }
    if (ref.current) {
      setIsOpen(false);
    }
  };

  const onSelect = (selectedValue) => () => {
    if (onChange) {
      onChange(selectedValue);
    }
    if (closeOnSelect) {
      close();
    }
  };

  useEffect(() => {
    window.addEventListener('click', close);
    return () => {
      window.removeEventListener('click', close);
    };
  }, []);

  let current = label;

  const childrenArray = React.Children.map(children, (child, i) => {
    if (
      child.type === DropdownItem &&
      ((i === 0 && !label) || child.props.value === value)
    ) {
      current = child.props.children;
    }
    return React.cloneElement(
      child,
      child.type === DropdownItem
        ? {
            active: child.props.value === value,
            onClick: onSelect(child.props.value),
          }
        : {},
    );
  });

  return (
    <Element
      {...props}
      domRef={ref}
      className={classnames('dropdown', className, {
        'is-active': isOpen,
        'is-up': up,
        'is-right': right || align === 'right',
        'is-hoverable': hoverable,
      })}
    >
      <div
        className="dropdown-trigger"
        role="presentation"
        onClick={() => setIsOpen((o) => !o)}
      >
        <Button color={color}>
          <span>{current}</span>
          {icon}
        </Button>
      </div>
      <div className="dropdown-menu" id="dropdown-menu" role="menu">
        <div className="dropdown-content">{childrenArray}</div>
      </div>
    </Element>
  );
};

Dropdown.Item = DropdownItem;

Dropdown.Divider = DropdownDivider;

Dropdown.propTypes = {
  ...Element.propTypes,
  /**
   * The value of the currently selected dropdown item. If this value match
   * with the value passed to a Dropdown.item it will be used as label if the label prop its empty
   */
  value: PropTypes.any,
  /**
   * Called when a dropdown item is selected.
   */
  onChange: PropTypes.func,
  /**
   * The color of the dropdown button.
   */
  color: PropTypes.oneOf(colors),
  /**
   * Whether the dropdown should align to the right side.
   */
  right: PropTypes.bool,
  /**
   * Whether the dropdown menu should appear above the dropdown button
   * instead of below.
   */
  up: PropTypes.bool,
  /**
   * Whether the dropdown menu can be activated when the cursor
   * hovers above the button without clicking.
   */
  hoverable: PropTypes.bool,
  /**
   * A string, or a react component that displays the label of the dropdown
   * button. if not set it will be use the selected Dropdown.Item or the first one
   * if there is no selected
   */
  label: PropTypes.node,
  /**
   * Whether the dropdown menu should be closed when a dropdown item is selected.
   */
  closeOnSelect: PropTypes.bool,
  /**
   * A react component that draws the icon of the dropdown button.
   * Usually it is an arrow (or a chevron) pointing downwards (or upwards).
   */
  icon: PropTypes.node,
  /**
   * Additional CSS classes to pass to `<Dropdown />`.
   * They will sit alongside pre-applied bulma classes.
   */
};

Dropdown.defaultProps = {
  closeOnSelect: true,
};

export default Dropdown;

1	import React, { useEffect, useRef, useState } from 'react';
2	import PropTypes from 'prop-types';
3	import classnames from 'classnames';
4
5	import CONSTANTS from '../../constants';
6	import DropdownItem from './components/item';
7	import DropdownDivider from './components/divider';
8	import Button from '../button';
9
10	import Element from '../element';
11
12	const colors = [null].concat(Object.values(CONSTANTS.COLORS));	2✔
13
14	const Dropdown = ({	2✔
15	className,
16	children,
17	value,
18	color,
19	align,
20	right,
21	up,
22	hoverable,
23	label,
24	onChange,
25	closeOnSelect,
26	icon,
27	domRef,
28	...props
29	}) => {
30	const ref = useRef(domRef);	12✔
31	const [isOpen, setIsOpen] = useState(false);	12✔
32	const close = (evt) => {	12✔
33	// IDK yet how to test using the ref in enzime
34	// istanbul ignore if
35	if (	×
36	hoverable \|\|	×
37	(evt && ref && ref.current && ref.current.contains(evt.target))
38	) {
39	return;
40	}
41	if (ref.current) {	×
42	setIsOpen(false);	×
43	}
44	};
45
46	const onSelect = (selectedValue) => () => {	16✔
47	if (onChange) {	×
48	onChange(selectedValue);	×
49	}
50	if (closeOnSelect) {	×
51	close();	×
52	}
53	};
54
55	useEffect(() => {	12✔
56	window.addEventListener('click', close);	9✔
57	return () => {	9✔
58	window.removeEventListener('click', close);	1✔
59	};
60	}, []);
61
62	let current = label;	12✔
63
64	const childrenArray = React.Children.map(children, (child, i) => {	12✔
65	if (	17✔
66	child.type === DropdownItem &&	52✔
67	((i === 0 && !label) \|\| child.props.value === value)
68	) {
69	current = child.props.children;	10✔
70	}
71	return React.cloneElement(	17✔
72	child,
73	child.type === DropdownItem	17✔
74	? {
75	active: child.props.value === value,
76	onClick: onSelect(child.props.value),
77	}
78	: {},
79	);
80	});
81
82	return (	12✔
83	<Element
84	{...props}
85	domRef={ref}
86	className={classnames('dropdown', className, {
87	'is-active': isOpen,
88	'is-up': up,
89	'is-right': right \|\| align === 'right',	23✔
90	'is-hoverable': hoverable,
91	})}
92	>
93	<div
94	className="dropdown-trigger"
95	role="presentation"
96	onClick={() => setIsOpen((o) => !o)}	×
97	>
98	<Button color={color}>
99	<span>{current}</span>
100	{icon}
101	</Button>
102	</div>
103	<div className="dropdown-menu" id="dropdown-menu" role="menu">
104	<div className="dropdown-content">{childrenArray}</div>
105	</div>
106	</Element>
107	);
108	};
109
110	Dropdown.Item = DropdownItem;	2✔
111
112	Dropdown.Divider = DropdownDivider;	2✔
113
114	Dropdown.propTypes = {	2✔
115	...Element.propTypes,
116	/**
117	* The value of the currently selected dropdown item. If this value match
118	* with the value passed to a Dropdown.item it will be used as label if the label prop its empty
119	*/
120	value: PropTypes.any,
121	/**
122	* Called when a dropdown item is selected.
123	*/
124	onChange: PropTypes.func,
125	/**
126	* The color of the dropdown button.
127	*/
128	color: PropTypes.oneOf(colors),
129	/**
130	* Whether the dropdown should align to the right side.
131	*/
132	right: PropTypes.bool,
133	/**
134	* Whether the dropdown menu should appear above the dropdown button
135	* instead of below.
136	*/
137	up: PropTypes.bool,
138	/**
139	* Whether the dropdown menu can be activated when the cursor
140	* hovers above the button without clicking.
141	*/
142	hoverable: PropTypes.bool,
143	/**
144	* A string, or a react component that displays the label of the dropdown
145	* button. if not set it will be use the selected Dropdown.Item or the first one
146	* if there is no selected
147	*/
148	label: PropTypes.node,
149	/**
150	* Whether the dropdown menu should be closed when a dropdown item is selected.
151	*/
152	closeOnSelect: PropTypes.bool,
153	/**
154	* A react component that draws the icon of the dropdown button.
155	* Usually it is an arrow (or a chevron) pointing downwards (or upwards).
156	*/
157	icon: PropTypes.node,
158	/**
159	* Additional CSS classes to pass to `<Dropdown />`.
160	* They will sit alongside pre-applied bulma classes.
161	*/
162	};
163
164	Dropdown.defaultProps = {	2✔
165	closeOnSelect: true,
166	};
167
168	export default Dropdown;

couds / react-bulma-components / 1054

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