@up-group-ui/react-controls
Version:
Up shared react controls
58 lines • 2.74 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var SvgIcon_1 = (0, tslib_1.__importDefault)(require("../../../Display/SvgIcon"));
var Tooltip_1 = (0, tslib_1.__importDefault)(require("../../../Display/Tooltip"));
var typestyle_1 = require("typestyle");
var theming_1 = (0, tslib_1.__importDefault)(require("../../../../Common/theming"));
var getErrorDisplayStyle = function (props) {
return (0, typestyle_1.style)({
position: 'relative',
cursor: props.displayMode === 'tooltip' && props.hasError ? 'help' : 'default',
height: '100%',
width: '100%',
display: 'flex',
flexDirection: 'column',
$nest: {
'& .up-wrapper-error-tooltip': {
display: 'inline-block',
position: 'absolute',
top: '8px',
left: '-20px',
},
'& .up-wrapper-error-inline': {
display: 'inline-block',
color: props.theme.colorMap.error,
fontSize: '8pt',
},
},
});
};
var ErrorDisplay = (function (_super) {
(0, tslib_1.__extends)(ErrorDisplay, _super);
function ErrorDisplay(p, c) {
return _super.call(this, p, c) || this;
}
ErrorDisplay.prototype.render = function () {
var Error = ErrorTooltip;
if (this.props.displayMode === 'inline') {
Error = ErrorInline;
}
return ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: getErrorDisplayStyle(this.props) }, { children: [this.props.children, this.props.showError === true && this.props.hasError === true ? (0, jsx_runtime_1.jsx)(Error, (0, tslib_1.__assign)({}, this.props), void 0) : null] }), void 0));
};
ErrorDisplay.defaultProps = {
displayMode: 'tooltip',
theme: theming_1.default,
};
return ErrorDisplay;
}(react_1.default.Component));
exports.default = ErrorDisplay;
var ErrorTooltip = function (props) {
return ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'up-wrapper-error-tooltip' }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, (0, tslib_1.__assign)({ content: props.error }, { children: (0, jsx_runtime_1.jsx)(SvgIcon_1.default, { width: 15, height: 15, iconName: "error-sign", color: 'red' }, void 0) }), void 0) }), void 0));
};
var ErrorInline = function (props) {
return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'up-wrapper-error-inline' }, { children: props.error }), void 0);
};
//# sourceMappingURL=ErrorDisplay.js.map