1050

pending completion

Build # 1050

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/fdb47139f65fa642d1638a43505990ed71d7fd19">fdb47139f<a href="https://github.com/couds/react-bulma-components/commit/fdb47139f65fa642d1638a43505990ed71d7fd19">">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/14721e86575626b03ea37b5784eea5e4266014d2">14721e865</a>">14721e865</a><a href="https://github.com/couds/react-bulma-components/commit/fdb47139f65fa642d1638a43505990ed71d7fd19"> into 732e00f37">732e00f37</a>

Pull Request Pull Request #309: Update docs

Run Details

135 of 159 branches covered (84.91%)

Branch coverage included in aggregate %.

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

539 of 551 relevant lines covered (97.82%)

45.0 hits per line

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

85.0

/src/components/form/components/input-file.js

import React, { useRef, useEffect } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Element from '../../element';

import CONSTANTS from '../../../constants';

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

const InputFile = ({
  className,
  style,
  onChange,
  color,
  size,
  fullwidth,
  right,
  boxed,
  name,
  label,
  icon,
  inputProps,
  filename,
  value,
  centered,
  ...props
}) => {
  const ref = useRef();

  useEffect(() => {
    if (!ref.current) {
      return;
    }
    if (value) {
      ref.current.files = value;
    } else {
      ref.current.value = '';
    }
  }, [value]);

  return (
    <Element
      style={style}
      {...props}
      className={classnames('file', className, {
        [`is-${size}`]: size,
        [`is-${color}`]: color,
        'has-name': !!filename,
        'is-right': right,
        'is-boxed': boxed,
        'is-fullwidth': fullwidth,
        'is-centered': centered,
      })}
    >
      <label className="file-label">
        <input
          {...inputProps}
          name={name}
          type="file"
          className="file-input"
          onChange={onChange}
          ref={ref}
        />
        <span className="file-cta">
          {icon && <span className="file-icon">{icon}</span>}
          <span className="file-label">{label}</span>
        </span>
        {filename && <span className="file-name">{filename}</span>}
      </label>
    </Element>
  );
};

InputFile.propTypes = {
  ...Element.propTypes,
  /**
   * Additional CSS classes to pass to `InputFile`.
   * They will sit alongside pre-applied bulma classes.
   */
  className: PropTypes.string,
  style: PropTypes.shape({}),
  /**
   * Callback for when the value of the input changes.
   * Same signature as the onChange prop for `<input type="file">`.
   */
  onChange: PropTypes.func,
  /**
   * The color of `InputFile`
   */
  color: PropTypes.oneOf(colors),
  /**
   * The size of `InputFile`
   */
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  /**
   * The name of the selected file. It will be shown as the file label
   * of this component, next/under the upload button.
   */
  filename: PropTypes.string,
  /**
   * The selected file object.
   */
  value: PropTypes.any,
  /**
   * Whether `InputFile` should take up all available width.
   */
  fullwidth: PropTypes.bool,
  /**
   * Whether `InputFile` should be aligned to the right.
   */
  right: PropTypes.bool,
  /**
   * Whether `InputFile` should be centered.
   */
  centered: PropTypes.bool,
  /**
   * Whether `InputFile` should be rendered in a box shape.
   */
  boxed: PropTypes.bool,
  /**
   * The name of the input field Commonly used for [multi-input handling](https://reactjs.org/docs/forms.html#handling-multiple-inputs)
   */
  name: PropTypes.string,
  /**
   * Label for the upload button.
   */
  label: PropTypes.string,
  /**
   * An optional icon to be drawn in the button next to/on top of the button label.
   *
   * `icon={<i className="fas ..." />}`
   */
  icon: PropTypes.element,
  /**
   * Additional props to be passed to the underlying `<input>` element.
   * Other props passed to `InputFile` itself will be passed to the element
   * that wraps around the `<input>` element.
   */
  inputProps: PropTypes.shape({}),
};

InputFile.defaultProps = {
  ...Element.defaultProps,
  className: undefined,
  style: undefined,
  onChange: () => {},
  color: undefined,
  size: undefined,
  filename: undefined,
  value: undefined,
  fullwidth: undefined,
  right: undefined,
  centered: undefined,
  boxed: undefined,
  name: undefined,
  icon: undefined,
  label: 'Choose a file...',
  inputProps: {},
};

export default InputFile;

1	import React, { useRef, useEffect } from 'react';
2	import PropTypes from 'prop-types';
3	import classnames from 'classnames';
4	import Element from '../../element';
5
6	import CONSTANTS from '../../../constants';
7
8	const colors = [null].concat(Object.values(CONSTANTS.COLORS));	3✔
9
10	const InputFile = ({	3✔
11	className,
12	style,
13	onChange,
14	color,
15	size,
16	fullwidth,
17	right,
18	boxed,
19	name,
20	label,
21	icon,
22	inputProps,
23	filename,
24	value,
25	centered,
26	...props
27	}) => {
28	const ref = useRef();	7✔
29
30	useEffect(() => {	7✔
31	if (!ref.current) {	4✔
32	return;	1✔
33	}
34	if (value) {	3!
35	ref.current.files = value;	×
36	} else {
37	ref.current.value = '';	3✔
38	}
39	}, [value]);
40
41	return (	7✔
42	<Element
43	style={style}
44	{...props}
45	className={classnames('file', className, {
46	[`is-${size}`]: size,
47	[`is-${color}`]: color,
48	'has-name': !!filename,
49	'is-right': right,
50	'is-boxed': boxed,
51	'is-fullwidth': fullwidth,
52	'is-centered': centered,
53	})}
54	>
55	<label className="file-label">
56	<input
57	{...inputProps}
58	name={name}
59	type="file"
60	className="file-input"
61	onChange={onChange}
62	ref={ref}
63	/>
64	<span className="file-cta">
65	{icon && <span className="file-icon">{icon}</span>}	7!
66	<span className="file-label">{label}</span>
67	</span>
68	{filename && <span className="file-name">{filename}</span>}	10✔
69	</label>
70	</Element>
71	);
72	};
73
74	InputFile.propTypes = {	3✔
75	...Element.propTypes,
76	/**
77	* Additional CSS classes to pass to `InputFile`.
78	* They will sit alongside pre-applied bulma classes.
79	*/
80	className: PropTypes.string,
81	style: PropTypes.shape({}),
82	/**
83	* Callback for when the value of the input changes.
84	* Same signature as the onChange prop for `<input type="file">`.
85	*/
86	onChange: PropTypes.func,
87	/**
88	* The color of `InputFile`
89	*/
90	color: PropTypes.oneOf(colors),
91	/**
92	* The size of `InputFile`
93	*/
94	size: PropTypes.oneOf(['small', 'medium', 'large']),
95	/**
96	* The name of the selected file. It will be shown as the file label
97	* of this component, next/under the upload button.
98	*/
99	filename: PropTypes.string,
100	/**
101	* The selected file object.
102	*/
103	value: PropTypes.any,
104	/**
105	* Whether `InputFile` should take up all available width.
106	*/
107	fullwidth: PropTypes.bool,
108	/**
109	* Whether `InputFile` should be aligned to the right.
110	*/
111	right: PropTypes.bool,
112	/**
113	* Whether `InputFile` should be centered.
114	*/
115	centered: PropTypes.bool,
116	/**
117	* Whether `InputFile` should be rendered in a box shape.
118	*/
119	boxed: PropTypes.bool,
120	/**
121	* The name of the input field Commonly used for [multi-input handling](https://reactjs.org/docs/forms.html#handling-multiple-inputs)
122	*/
123	name: PropTypes.string,
124	/**
125	* Label for the upload button.
126	*/
127	label: PropTypes.string,
128	/**
129	* An optional icon to be drawn in the button next to/on top of the button label.
130	*
131	* `icon={<i className="fas ..." />}`
132	*/
133	icon: PropTypes.element,
134	/**
135	* Additional props to be passed to the underlying `<input>` element.
136	* Other props passed to `InputFile` itself will be passed to the element
137	* that wraps around the `<input>` element.
138	*/
139	inputProps: PropTypes.shape({}),
140	};
141
142	InputFile.defaultProps = {	3✔
143	...Element.defaultProps,
144	className: undefined,
145	style: undefined,
146	onChange: () => {},
147	color: undefined,
148	size: undefined,
149	filename: undefined,
150	value: undefined,
151	fullwidth: undefined,
152	right: undefined,
153	centered: undefined,
154	boxed: undefined,
155	name: undefined,
156	icon: undefined,
157	label: 'Choose a file...',
158	inputProps: {},
159	};
160
161	export default InputFile;

couds / react-bulma-components / 1050

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