All files / TextFieldValidated TextFieldValidated.tsx

89.47% Statements 17/19
0% Branches 0/2
33.33% Functions 1/3
89.47% Lines 17/19

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108                        176x   176x           176x   176x 176x         176x                             176x   176x   176x             176x   176x                           176x   7x   7x         7x   7x         7x                                          
import _ from 'lodash';
import React from 'react';
import PropTypes from 'react-peek/prop-types';
 
import Validation, { IValidationProps } from '../Validation/Validation';
import TextField, {
	ITextFieldPropsWithPassThroughs,
} from '../TextField/TextField';
import reducers from '../TextField/TextField.reducers';
import { lucidClassNames } from '../../util/style-helpers';
import { findTypes, omitProps } from '../../util/component-types';
 
const cx = lucidClassNames.bind('&-TextFieldValidated');
 
const { any, object, string } = PropTypes;
 
interface ITextFieldValidatedErrorProps extends IValidationProps {
	description?: string;
}
 
const TextFieldValidatedError = (_props: ITextFieldValidatedErrorProps): null =>
	null;
TextFieldValidatedError.displayName = 'TextFieldValidated.Error';
TextFieldValidatedError.peek = {
	description: `
		Content that will be displayed as an error message.
	`,
};
TextFieldValidatedError.propName = 'Error';
 
export interface ITextFieldValidatedProps
	extends ITextFieldPropsWithPassThroughs {
	Error?: React.ReactNode;
}
 
export interface ITextFieldValidatedState {
	value: string | number;
}
 
class TextFieldValidated extends React.Component<
	ITextFieldValidatedProps,
	ITextFieldValidatedState
> {
	static displayName = 'TextFieldValidated';
 
	static Error = TextFieldValidatedError;
 
	static peek = {
		description: `
					A composition of TextField and Validation.
				`,
		categories: ['controls', 'text'],
	};
 
	static reducers = reducers;
 
	static propTypes = {
		style: object`
			Passed to the root container.
		`,
 
		className: string`
			Passed to the root container.
		`,
 
		Error: any`
			Prop alternative to Error child component
		`,
	};
 
	static defaultProps = TextField.defaultProps;
 
	private textFieldRef = React.createRef<TextField>();
 
	focus = () => {
		this.textFieldRef.current && this.textFieldRef.current.focus();
	};
 
	render() {
		const { className, style, ...passThroughs } = this.props;
 
		const errorChildProps = _.map(
			findTypes(this.props, TextFieldValidated.Error),
			'props'
		);
 
		return (
			<Validation
				className={cx('&', className)}
				style={style}
				Error={errorChildProps}
			>
				<TextField
					{...omitProps(
						passThroughs,
						undefined,
						_.keys(TextFieldValidated.propTypes),
						false
					)}
					ref={this.textFieldRef}
				/>
			</Validation>
		);
	}
}
 
export default TextFieldValidated;