@flexis/ui
Version:
Styleless React Components
63 lines • 5.15 kB
JavaScript
import React, { PureComponent, Children, cloneElement } from 'react';
import PropTypes from 'prop-types';
import { AlignSideVariant, AlignSideValues } from '../common/types';
import { style, classes } from './FormGroup.st.css';
let FormGroup = /** @class */ (() => {
class FormGroup extends PureComponent {
render() {
const { className, id: idProp, flex, label, description, icon, alignIcon, children, ...props } = this.props;
const child = Children.only(children);
const { props: childProps } = child;
const id = idProp || childProps.id;
const withIcon = typeof icon !== 'undefined';
let inputIcon = null;
if (withIcon) {
inputIcon = cloneElement(icon, {
className: style(classes.icon, {
[`${alignIcon}Align`]: Boolean(alignIcon)
}, icon.props.className)
});
}
return (<div {...props} className={style(classes.root, {
withIcon
}, className)}>
{cloneElement(child, {
id,
className: style(classes.input, {
[`${alignIcon}Icon`]: withIcon,
flex
}, childProps.className)
})}
{inputIcon}
{label && (<label className={classes.label} htmlFor={id}>
{label}
</label>)}
{description && (<label className={classes.description} htmlFor={id}>
{description}
</label>)}
</div>);
}
}
FormGroup.propTypes = {
id: PropTypes.string,
flex: PropTypes.bool,
label: PropTypes.oneOfType([
PropTypes.string,
PropTypes.element
]),
description: PropTypes.oneOfType([
PropTypes.string,
PropTypes.element
]),
icon: PropTypes.element,
alignIcon: PropTypes.oneOf(AlignSideValues),
children: PropTypes.node.isRequired
};
FormGroup.defaultProps = {
flex: true,
alignIcon: AlignSideVariant.Left
};
return FormGroup;
})();
export default FormGroup;
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRm9ybUdyb3VwLmpzeCIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0Zvcm1Hcm91cC9Gb3JtR3JvdXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxFQUFFLEVBR2IsYUFBYSxFQUNiLFFBQVEsRUFDUixZQUFZLEVBQ1osTUFBTSxPQUFPLENBQUM7QUFDZixPQUFPLFNBQVMsTUFBTSxZQUFZLENBQUM7QUFJbkMsT0FBTyxFQUVOLGdCQUFnQixFQUNoQixlQUFlLEVBQ2YsTUFBTSxpQkFBaUIsQ0FBQztBQUN6QixPQUFPLEVBQ04sS0FBSyxFQUNMLE9BQU8sRUFDUCxNQUFNLG9CQUFvQixDQUFDO0FBaUI1QjtJQUFBLE1BQXFCLFNBQVUsU0FBUSxhQUFxQjtRQXVCM0QsTUFBTTtZQUVMLE1BQU0sRUFDTCxTQUFTLEVBQ1QsRUFBRSxFQUFFLE1BQU0sRUFDVixJQUFJLEVBQ0osS0FBSyxFQUNMLFdBQVcsRUFDWCxJQUFJLEVBQ0osU0FBUyxFQUNULFFBQVEsRUFDUixHQUFHLEtBQUssRUFDUixHQUFHLElBQUksQ0FBQyxLQUFLLENBQUM7WUFDZixNQUFNLEtBQUssR0FBRyxRQUFRLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1lBQ3RDLE1BQU0sRUFDTCxLQUFLLEVBQUUsVUFBVSxFQUNqQixHQUFHLEtBQUssQ0FBQztZQUNWLE1BQU0sRUFBRSxHQUFHLE1BQU0sSUFBSSxVQUFVLENBQUMsRUFBRSxDQUFDO1lBQ25DLE1BQU0sUUFBUSxHQUFHLE9BQU8sSUFBSSxLQUFLLFdBQVcsQ0FBQztZQUM3QyxJQUFJLFNBQVMsR0FBc0IsSUFBSSxDQUFDO1lBRXhDLElBQUksUUFBUSxFQUFFO2dCQUNiLFNBQVMsR0FBRyxZQUFZLENBQ3ZCLElBQUksRUFDSjtvQkFDQyxTQUFTLEVBQUUsS0FBSyxDQUFDLE9BQU8sQ0FBQyxJQUFJLEVBQUU7d0JBQzlCLENBQUMsR0FBRyxTQUFTLE9BQU8sQ0FBQyxFQUFFLE9BQU8sQ0FBQyxTQUFTLENBQUM7cUJBQ3pDLEVBQUUsSUFBSSxDQUFDLEtBQUssQ0FBQyxTQUFTLENBQUM7aUJBQ3hCLENBQ0QsQ0FBQzthQUNGO1lBRUQsT0FBTyxDQUNOLENBQUMsR0FBRyxDQUNILElBQUksS0FBSyxDQUFDLENBQ1YsU0FBUyxDQUFDLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxJQUFJLEVBQUU7Z0JBQzlCLFFBQVE7YUFDUixFQUFFLFNBQVMsQ0FBQyxDQUFDLENBRWQ7SUFBQSxDQUFDLFlBQVksQ0FDWixLQUFLLEVBQ0w7Z0JBQ0MsRUFBRTtnQkFDRixTQUFTLEVBQUUsS0FBSyxDQUFDLE9BQU8sQ0FBQyxLQUFLLEVBQUU7b0JBQy9CLENBQUMsR0FBRyxTQUFTLE1BQU0sQ0FBQyxFQUFFLFFBQVE7b0JBQzlCLElBQUk7aUJBQ0osRUFBRSxVQUFVLENBQUMsU0FBUyxDQUFDO2FBQ3hCLENBQ0QsQ0FDRDtJQUFBLENBQUMsU0FBUyxDQUNWO0lBQUEsQ0FBQyxLQUFLLElBQUksQ0FDVCxDQUFDLEtBQUssQ0FDTCxTQUFTLENBQUMsQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDLENBQ3pCLE9BQU8sQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUVaO01BQUEsQ0FBQyxLQUFLLENBQ1A7S0FBQSxFQUFFLEtBQUssQ0FBQyxDQUNSLENBQ0Q7SUFBQSxDQUFDLFdBQVcsSUFBSSxDQUNmLENBQUMsS0FBSyxDQUNMLFNBQVMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxXQUFXLENBQUMsQ0FDL0IsT0FBTyxDQUFDLENBQUMsRUFBRSxDQUFDLENBRVo7TUFBQSxDQUFDLFdBQVcsQ0FDYjtLQUFBLEVBQUUsS0FBSyxDQUFDLENBQ1IsQ0FDRjtHQUFBLEVBQUUsR0FBRyxDQUFDLENBQ04sQ0FBQztRQUNILENBQUM7O0lBekZNLG1CQUFTLEdBQUc7UUFDbEIsRUFBRSxFQUFXLFNBQVMsQ0FBQyxNQUFNO1FBQzdCLElBQUksRUFBUyxTQUFTLENBQUMsSUFBSTtRQUMzQixLQUFLLEVBQVEsU0FBUyxDQUFDLFNBQVMsQ0FBQztZQUNoQyxTQUFTLENBQUMsTUFBTTtZQUNoQixTQUFTLENBQUMsT0FBTztTQUNqQixDQUFDO1FBQ0YsV0FBVyxFQUFFLFNBQVMsQ0FBQyxTQUFTLENBQUM7WUFDaEMsU0FBUyxDQUFDLE1BQU07WUFDaEIsU0FBUyxDQUFDLE9BQU87U0FDakIsQ0FBQztRQUNGLElBQUksRUFBUyxTQUFTLENBQUMsT0FBTztRQUM5QixTQUFTLEVBQUksU0FBUyxDQUFDLEtBQUssQ0FBQyxlQUFlLENBQUM7UUFDN0MsUUFBUSxFQUFLLFNBQVMsQ0FBQyxJQUFJLENBQUMsVUFBVTtLQUN0QyxDQUFDO0lBRUssc0JBQVksR0FBRztRQUNyQixJQUFJLEVBQU8sSUFBSTtRQUNmLFNBQVMsRUFBRSxnQkFBZ0IsQ0FBQyxJQUFJO0tBQ2hDLENBQUM7SUF1RUgsZ0JBQUM7S0FBQTtlQTVGb0IsU0FBUyJ9