155 lines
4.2 KiB
JavaScript
155 lines
4.2 KiB
JavaScript
import React from "react";
|
|
import PropTypes from "prop-types";
|
|
|
|
import Label from "../label";
|
|
import HelpButton from "../help-button";
|
|
import Text from "../text";
|
|
import Container from "./styled-field-container";
|
|
|
|
const displayInlineBlock = { display: "inline-block" };
|
|
|
|
class FieldContainer extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
isVertical,
|
|
className,
|
|
id,
|
|
style,
|
|
isRequired,
|
|
hasError,
|
|
labelVisible,
|
|
labelText,
|
|
children,
|
|
tooltipContent,
|
|
place,
|
|
helpButtonHeaderContent,
|
|
maxLabelWidth,
|
|
errorMessage,
|
|
errorColor,
|
|
errorMessageWidth,
|
|
inlineHelpButton,
|
|
offsetRight,
|
|
tooltipMaxWidth,
|
|
} = this.props;
|
|
|
|
return (
|
|
<Container
|
|
vertical={isVertical}
|
|
maxLabelWidth={maxLabelWidth}
|
|
className={className}
|
|
id={id}
|
|
style={style}
|
|
maxwidth={errorMessageWidth}
|
|
>
|
|
{labelVisible &&
|
|
(!inlineHelpButton ? (
|
|
<div className="field-label-icon">
|
|
<Label
|
|
isRequired={isRequired}
|
|
//error={hasError}
|
|
text={labelText}
|
|
truncate={true}
|
|
className="field-label"
|
|
tooltipMaxWidth={tooltipMaxWidth}
|
|
/>
|
|
{tooltipContent && (
|
|
<HelpButton
|
|
tooltipContent={tooltipContent}
|
|
place={place}
|
|
helpButtonHeaderContent={helpButtonHeaderContent}
|
|
/>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="field-label-icon">
|
|
<Label
|
|
isRequired={isRequired}
|
|
//error={hasError}
|
|
text={labelText}
|
|
truncate={true}
|
|
className="field-label"
|
|
>
|
|
{tooltipContent && (
|
|
<HelpButton
|
|
tooltipContent={tooltipContent}
|
|
place={place}
|
|
helpButtonHeaderContent={helpButtonHeaderContent}
|
|
style={displayInlineBlock}
|
|
offsetRight={0}
|
|
/>
|
|
)}
|
|
</Label>
|
|
</div>
|
|
))}
|
|
|
|
<div className="field-body">
|
|
{children}
|
|
{hasError ? (
|
|
<Text className="error-label" fontSize="12px" color={errorColor}>
|
|
{errorMessage}
|
|
</Text>
|
|
) : null}
|
|
</div>
|
|
</Container>
|
|
);
|
|
}
|
|
}
|
|
|
|
FieldContainer.displayName = "FieldContainer";
|
|
|
|
FieldContainer.propTypes = {
|
|
/** Vertical or horizontal alignment */
|
|
isVertical: PropTypes.bool,
|
|
/** Accepts class */
|
|
className: PropTypes.string,
|
|
/** Indicates that the field is required to fill */
|
|
isRequired: PropTypes.bool,
|
|
/** Indicates that the field is incorrect */
|
|
hasError: PropTypes.bool,
|
|
/** Sets visibility of field label section */
|
|
labelVisible: PropTypes.bool,
|
|
/** Field label text or element */
|
|
labelText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
|
|
icon: PropTypes.string,
|
|
/** Renders help button inline instead of separate div*/
|
|
inlineHelpButton: PropTypes.bool,
|
|
/** Children elements */
|
|
children: PropTypes.oneOfType([
|
|
PropTypes.arrayOf(PropTypes.node),
|
|
PropTypes.node,
|
|
]),
|
|
/** Tooltip content */
|
|
tooltipContent: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
|
place: PropTypes.string,
|
|
/** Tooltip header content (tooltip opened in aside) */
|
|
helpButtonHeaderContent: PropTypes.string,
|
|
/** Max label width in horizontal alignment */
|
|
maxLabelWidth: PropTypes.string,
|
|
/** Error message text */
|
|
errorMessage: PropTypes.string,
|
|
/** Error text color */
|
|
errorColor: PropTypes.string,
|
|
/** Error text width */
|
|
errorMessageWidth: PropTypes.string,
|
|
/** Accepts id */
|
|
id: PropTypes.string,
|
|
/** Accepts css style */
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
offsetRight: PropTypes.number,
|
|
tooltipMaxWidth: PropTypes.string,
|
|
};
|
|
|
|
FieldContainer.defaultProps = {
|
|
place: "bottom",
|
|
labelVisible: true,
|
|
maxLabelWidth: "110px",
|
|
errorMessageWidth: "293px",
|
|
offsetRight: 0,
|
|
};
|
|
|
|
export default FieldContainer;
|