lucid-ui
Version:
A UI component library from Xandr.
90 lines • 3.33 kB
JavaScript
import _ from 'lodash';
import React from 'react';
import PropTypes, { shape } from 'prop-types';
import Validation from '../Validation/Validation';
import TextField from '../TextField/TextField';
import reducers from '../TextField/TextField.reducers';
import { lucidClassNames } from '../../util/style-helpers';
import { findTypes } from '../../util/component-types';
const cx = lucidClassNames.bind('&-TextFieldValidated');
const { any, object, string, bool } = PropTypes;
const TextFieldValidatedError = (_props) => null;
TextFieldValidatedError.displayName = 'TextFieldValidated.Error';
TextFieldValidatedError.peek = {
description: `Content that will be displayed as an error message.`,
};
TextFieldValidatedError.propName = 'Error';
/** TODO: Remove the nonPassThroughs when the component is converted to a functional component */
const nonPassThroughs = [
'style',
'className',
'Error',
'Info',
'Success',
'initialState',
];
class TextFieldValidated extends React.Component {
constructor() {
super(...arguments);
this.textFieldRef = React.createRef();
this.focus = () => {
this.textFieldRef.current && this.textFieldRef.current.focus();
};
}
render() {
const { className, style, ...passThroughs } = this.props;
let childProps;
if (this.props.Error) {
childProps = _.map(findTypes(this.props, TextFieldValidated.Error), 'props');
}
else if (this.props.Info) {
childProps = [this.props.Info];
}
else if (this.props.Success && this.props.Success.message) {
childProps = [this.props.Success.message];
}
const isSuccess = !this.props.Error && !this.props.Info && this.props.Success;
return (React.createElement(Validation, { className: cx('&', className, {
'-info': !this.props.Error && this.props.Info,
'-success': !this.props.Error && !this.props.Info && this.props.Success,
'-disappearing': isSuccess && this.props.Success && this.props.Success.disappearing,
}), style: style, Error: childProps },
React.createElement(TextField, { ..._.omit(passThroughs, nonPassThroughs), ref: this.textFieldRef })));
}
}
TextFieldValidated.displayName = 'TextFieldValidated';
TextFieldValidated.Error = TextFieldValidatedError;
TextFieldValidated.peek = {
description: `A composite of \`TextField\` and \`Validation\`.`,
categories: ['controls', 'text'],
};
TextFieldValidated.reducers = reducers;
TextFieldValidated.propTypes = {
/**
Passed to the root container.
*/
style: object,
/**
Passed to the root container.
*/
className: string,
/**
Prop alternative to Error child component
*/
Error: any,
/**
Optional information text that is styled less aggressively than an error
*/
Info: string,
/**
Optional information text that is styled as "success". Also contains
`disappearing` prop for message that appears and fades away.
*/
Success: shape({
message: string,
disappearing: bool,
}),
};
TextFieldValidated.defaultProps = TextField.defaultProps;
export default TextFieldValidated;
//# sourceMappingURL=TextFieldValidated.js.map