All files / components/TextFieldValidated TextFieldValidated.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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;