2019-10-17 10:53:11 +00:00
|
|
|
import React from "react";
|
|
|
|
import PropTypes from "prop-types";
|
2021-02-15 07:23:36 +00:00
|
|
|
|
2019-10-17 10:53:11 +00:00
|
|
|
import Label from "../label";
|
2019-10-18 06:51:03 +00:00
|
|
|
import HelpButton from "../help-button";
|
2019-12-04 09:36:13 +00:00
|
|
|
import Text from "../text";
|
2021-02-15 07:23:36 +00:00
|
|
|
import Container from "./styled-field-container";
|
2019-11-22 12:03:25 +00:00
|
|
|
|
2019-10-17 10:53:11 +00:00
|
|
|
class FieldContainer extends React.Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2019-10-17 13:15:43 +00:00
|
|
|
}
|
|
|
|
|
2019-10-17 10:53:11 +00:00
|
|
|
render() {
|
|
|
|
const {
|
|
|
|
isVertical,
|
|
|
|
className,
|
2019-11-28 07:49:38 +00:00
|
|
|
id,
|
|
|
|
style,
|
2019-10-17 10:53:11 +00:00
|
|
|
isRequired,
|
|
|
|
hasError,
|
2020-07-16 12:44:15 +00:00
|
|
|
labelVisible,
|
2019-10-17 10:53:11 +00:00
|
|
|
labelText,
|
|
|
|
children,
|
2019-10-23 08:31:36 +00:00
|
|
|
tooltipContent,
|
2019-11-20 06:42:28 +00:00
|
|
|
place,
|
2019-11-25 09:00:40 +00:00
|
|
|
helpButtonHeaderContent,
|
2019-11-26 11:20:14 +00:00
|
|
|
maxLabelWidth,
|
2019-11-26 11:12:44 +00:00
|
|
|
errorMessage,
|
|
|
|
errorColor,
|
2020-10-16 13:16:01 +00:00
|
|
|
errorMessageWidth,
|
2019-10-17 10:53:11 +00:00
|
|
|
} = this.props;
|
|
|
|
|
|
|
|
return (
|
2019-11-26 11:12:44 +00:00
|
|
|
<Container
|
|
|
|
vertical={isVertical}
|
2019-11-26 11:20:14 +00:00
|
|
|
maxLabelWidth={maxLabelWidth}
|
2019-11-26 11:12:44 +00:00
|
|
|
className={className}
|
2019-11-28 07:49:38 +00:00
|
|
|
id={id}
|
|
|
|
style={style}
|
2019-11-26 11:12:44 +00:00
|
|
|
maxwidth={errorMessageWidth}
|
|
|
|
>
|
2020-10-16 13:16:01 +00:00
|
|
|
{labelVisible && (
|
2020-07-16 12:44:15 +00:00
|
|
|
<div className="field-label-icon">
|
|
|
|
<Label
|
|
|
|
isRequired={isRequired}
|
|
|
|
error={hasError}
|
|
|
|
text={labelText}
|
|
|
|
truncate={true}
|
|
|
|
className="field-label"
|
2019-10-18 06:51:03 +00:00
|
|
|
/>
|
2020-07-16 12:44:15 +00:00
|
|
|
{tooltipContent && (
|
|
|
|
<HelpButton
|
|
|
|
tooltipContent={tooltipContent}
|
|
|
|
place={place}
|
|
|
|
helpButtonHeaderContent={helpButtonHeaderContent}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</div>
|
2020-10-16 13:16:01 +00:00
|
|
|
)}
|
2019-11-26 11:12:44 +00:00
|
|
|
<div className="field-body">
|
|
|
|
{children}
|
|
|
|
{hasError ? (
|
2020-10-16 13:16:01 +00:00
|
|
|
<Text className="error-label" fontSize="10px" color={errorColor}>
|
2019-11-26 11:12:44 +00:00
|
|
|
{errorMessage}
|
2019-12-04 09:36:13 +00:00
|
|
|
</Text>
|
2019-11-26 11:12:44 +00:00
|
|
|
) : null}
|
|
|
|
</div>
|
2019-10-17 10:53:11 +00:00
|
|
|
</Container>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
2019-08-27 12:43:30 +00:00
|
|
|
|
2019-10-17 10:53:11 +00:00
|
|
|
FieldContainer.displayName = "FieldContainer";
|
2019-09-10 09:49:51 +00:00
|
|
|
|
|
|
|
FieldContainer.propTypes = {
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Vertical or horizontal alignment */
|
2019-09-10 09:49:51 +00:00
|
|
|
isVertical: PropTypes.bool,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Accepts class */
|
2019-09-10 09:49:51 +00:00
|
|
|
className: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Indicates that the field is required to fill */
|
2019-09-10 09:49:51 +00:00
|
|
|
isRequired: PropTypes.bool,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Indicates that the field is incorrect */
|
2019-09-10 09:49:51 +00:00
|
|
|
hasError: PropTypes.bool,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Sets visibility of field label section */
|
2020-07-16 12:44:15 +00:00
|
|
|
labelVisible: PropTypes.bool,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Field label text */
|
2019-09-10 09:49:51 +00:00
|
|
|
labelText: PropTypes.string,
|
2019-10-10 12:08:39 +00:00
|
|
|
icon: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Children elements */
|
2019-09-10 09:49:51 +00:00
|
|
|
children: PropTypes.oneOfType([
|
|
|
|
PropTypes.arrayOf(PropTypes.node),
|
2020-10-16 13:16:01 +00:00
|
|
|
PropTypes.node,
|
2019-10-10 12:08:39 +00:00
|
|
|
]),
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Tooltip content */
|
2019-10-23 08:31:36 +00:00
|
|
|
tooltipContent: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
2019-11-20 06:42:28 +00:00
|
|
|
place: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Tooltip header content (tooltip opened in aside) */
|
2019-11-25 09:00:40 +00:00
|
|
|
helpButtonHeaderContent: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Max label width in horizontal alignment */
|
2019-11-26 11:20:14 +00:00
|
|
|
maxLabelWidth: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Error message text */
|
2019-11-26 11:12:44 +00:00
|
|
|
errorMessage: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Error text color */
|
2019-11-26 11:12:44 +00:00
|
|
|
errorColor: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Error text width */
|
2019-11-28 07:49:38 +00:00
|
|
|
errorMessageWidth: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Accepts id */
|
2019-11-28 07:49:38 +00:00
|
|
|
id: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Accepts css style */
|
2020-10-16 13:16:01 +00:00
|
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
2019-09-10 09:49:51 +00:00
|
|
|
};
|
|
|
|
|
2019-11-22 12:03:25 +00:00
|
|
|
FieldContainer.defaultProps = {
|
|
|
|
place: "bottom",
|
2020-07-16 12:44:15 +00:00
|
|
|
labelVisible: true,
|
2019-11-26 11:20:14 +00:00
|
|
|
maxLabelWidth: "110px",
|
2020-10-16 13:16:01 +00:00
|
|
|
errorMessageWidth: "293px",
|
2019-11-26 11:12:44 +00:00
|
|
|
};
|
2019-10-23 08:31:36 +00:00
|
|
|
|
2019-10-17 10:53:11 +00:00
|
|
|
export default FieldContainer;
|