@up-group-ui/react-controls
Version:
Up shared react controls
35 lines • 4.41 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 classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var UpButton_1 = (0, tslib_1.__importDefault)(require("../../Inputs/Button/UpButton"));
var SvgIcon_1 = (0, tslib_1.__importDefault)(require("../../Display/SvgIcon"));
var UpTooltip_1 = (0, tslib_1.__importDefault)(require("../../Display/Tooltip/UpTooltip"));
var UpLigne_1 = (0, tslib_1.__importDefault)(require("../../Display/Ligne/UpLigne"));
var _ = (0, tslib_1.__importStar)(require("lodash"));
var styles_1 = require("./styles");
var UpDataPanelItem = function (props) {
var panelData = props.panelData, className = props.className, title = props.title, displayMode = props.displayMode, columns = props.columns, showOnlyNotEmptyValue = props.showOnlyNotEmptyValue, getColumnCustomClassName = props.getColumnCustomClassName;
var Tooltip = function (props) { return ((0, jsx_runtime_1.jsx)(UpTooltip_1.default, (0, tslib_1.__assign)({ title: props.tooltip.title, place: "bottom", content: props.tooltip.content }, { children: (0, jsx_runtime_1.jsx)(UpLigne_1.default, { children: (0, jsx_runtime_1.jsx)(SvgIcon_1.default, { width: 16, height: 16, iconName: "info", className: "col-tooltip" }, void 0) }, void 0) }), void 0)); };
return ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: (0, classnames_1.default)('panel-container', className, (0, styles_1.getStyles)(props)) }, { children: [title && ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: "panel-title" }, { children: [(0, jsx_runtime_1.jsxs)("span", (0, tslib_1.__assign)({ className: "panel-title-general" }, { children: [_.isFunction(title.general.format) &&
title.general.format(panelData), _.isString(title.general) && title.general] }), void 0), title.specific && ((0, jsx_runtime_1.jsxs)("span", (0, tslib_1.__assign)({ className: "panel-title-specific" }, { children: [_.isFunction(title.specific.format) &&
title.specific.format(panelData), _.isString(title.specific) && title.specific] }), void 0))] }), void 0)), (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: "panel-body" }, { children: [columns.map(function (element, index) {
var customClassName = (getColumnCustomClassName && getColumnCustomClassName(element.field)) || '';
return (panelData && panelData[element.field] && showOnlyNotEmptyValue) ||
(element.field && !showOnlyNotEmptyValue) ? ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: (0, classnames_1.default)("panel-col " + customClassName) }, { children: [(0, jsx_runtime_1.jsxs)("span", (0, tslib_1.__assign)({ className: "panel-col-label" }, { children: [element.label, displayMode === 'row' ? ': ' : null] }), void 0), element.formatter ? (element.formatter.format(panelData, element, element.getFormatterProps
? element.getFormatterProps(panelData ? panelData[element.field] : null)
: {})) : ((0, jsx_runtime_1.jsx)("span", (0, tslib_1.__assign)({ className: "panel-col-value" }, { children: panelData && panelData[element.field] }), void 0)), element.tooltip && (0, jsx_runtime_1.jsx)(Tooltip, { tooltip: element.tooltip }, void 0)] }), void 0) }, index)) : null;
}), props.actions && ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: "panel-actions" }, { children: props.actions.map(function (element, index) { return ((0, jsx_runtime_1.jsx)(UpButton_1.default, { actionType: element.type, intent: element.intent, width: "icon", borderless: true, onClick: function () {
return element.action({
value: (0, tslib_1.__assign)({}, panelData),
});
} }, "panel-action-" + index)); }) }), void 0))] }), void 0)] }), void 0));
};
UpDataPanelItem.defaultProps = {
displayMode: 'row',
showOnlyNotEmptyValue: false,
};
exports.default = UpDataPanelItem;
//# sourceMappingURL=UpDataPanelItem.js.map