lucid-ui
Version:
A UI component library from Xandr.
61 lines • 2.42 kB
JavaScript
import _, { omit } from 'lodash';
import React from 'react';
import PropTypes from 'prop-types';
import { lucidClassNames } from '../../util/style-helpers';
import { getFirst } from '../../util/component-types';
const cx = lucidClassNames.bind('&-Validation');
const { string, any } = PropTypes;
const ValidationError = (_props) => null;
ValidationError.displayName = 'Validation.Error';
ValidationError.peek = {
description: `Content that will be displayed as an error message.`,
};
ValidationError.propName = 'Error';
ValidationError.propTypes = {
description: string,
children: any,
};
export const Validation = (props) => {
const { className, children, ...passThroughs } = props;
const errorChildProps = _.get(getFirst(props, Validation.Error), 'props');
return (React.createElement("div", { ...omit(passThroughs, [
'Error',
'className',
'children',
'initialState',
'callbackId',
]), className: cx('&', {
'&-is-error': errorChildProps && errorChildProps.children,
}, className) },
children,
errorChildProps &&
errorChildProps.children &&
errorChildProps.children !== true ? (React.createElement("div", { ...omit(errorChildProps, ['initialState', 'callbackId']), className: cx('&-error-content', errorChildProps.className) }, errorChildProps.children)) : null));
};
Validation.displayName = 'Validation';
Validation.peek = {
description: `\`Validation\` is a wrapper component that's meant to be used by other components. Wrap your form components in one, and, if there's an error, style them accordingly.`,
categories: ['helpers'],
};
Validation.propTypes = {
/**
In most cases this will be a string, but it also accepts any valid React
element. If this is a falsey value, then no error message will be
displayed. If this is the literal \`true\`, it will add the
\`-is-error\` class to the wrapper div, but not render the
\`-error-content\` \`div\`.
*/
Error: any,
/**
Classes that are appended to the component defaults. This prop is run
through the \`classnames\` library.
*/
className: string,
/**
Any valid React children.
*/
children: any.isRequired,
};
Validation.Error = ValidationError;
export default Validation;
//# sourceMappingURL=Validation.js.map