@up-group-ui/react-controls
Version:
Up shared react controls
151 lines • 8.73 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var React = (0, tslib_1.__importStar)(require("react"));
var typestyle_1 = require("typestyle");
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var UpCheckBox_1 = (0, tslib_1.__importDefault)(require("../../Inputs/Checkbox/UpCheckBox"));
var UpButton_1 = (0, tslib_1.__importDefault)(require("../../Inputs/Button/UpButton"));
var UpDataGridCell_1 = (0, tslib_1.__importDefault)(require("./UpDataGridCell"));
var UpDataGrid_1 = require("./UpDataGrid");
var UpDefaultCellFormatter_1 = (0, tslib_1.__importDefault)(require("./UpDefaultCellFormatter"));
var shallowEqual_1 = (0, tslib_1.__importDefault)(require("../../../Common/utils/shallowEqual"));
var ButtonGroup_1 = (0, tslib_1.__importDefault)(require("../../Containers/ButtonGroup"));
var UpDataGridContext_1 = require("./UpDataGridContext");
var DataGridRowStyle = function (props, finalActionsLength) {
return (0, typestyle_1.style)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (props.onClick ? { cursor: 'pointer' } : {})), (props.isRowClickable && finalActionsLength === 1
? {
cursor: 'pointer',
$nest: {
'&:hover': {
background: '#d4d4d4 !important',
},
},
}
: {})));
};
var UpDataGridRow = (function (_super) {
(0, tslib_1.__extends)(UpDataGridRow, _super);
function UpDataGridRow(props, context) {
var _this = _super.call(this, props, context) || this;
_this.onSelectionChange = function (event, isSelected) {
if (_this.props.onSelectionChange) {
_this.props.onSelectionChange(_this.props.rowIndex, {
isSelected: isSelected,
value: _this.props.value,
});
}
};
_this.getRowClickAction = function (finalActions) {
if (_this.props.onClick) {
return function () {
return _this.props.onClick &&
_this.props.onClick(_this.props.rowIndex, {
value: _this.props.value,
});
};
}
var actions = (finalActions && finalActions.filter(function (a) { return a != null; })) || [];
var actionsLength = actions.length;
if (actionsLength === 1 && _this.props.isRowClickable) {
return function () {
var selectedText = '';
if (window.getSelection) {
selectedText = window.getSelection().toString();
}
return selectedText.length
? false
: actions[0].action({
isSelected: _this.props.isSelected,
value: _this.props.value,
});
};
}
};
return _this;
}
UpDataGridRow.prototype.shouldComponentUpdate = function (nextProps, nextState) {
return !(0, shallowEqual_1.default)(this.props, nextProps) || !(0, shallowEqual_1.default)(this.state, nextState);
};
UpDataGridRow.prototype.render = function () {
var _this = this;
var formatter = new UpDefaultCellFormatter_1.default();
var selection = ((0, jsx_runtime_1.jsx)(UpCheckBox_1.default, { options: [
{
name: 'up-selection',
checked: this.props.isSelected === true,
value: true,
onOptionChange: this.onSelectionChange,
},
] }, void 0));
var finalActions = null;
if (this.props.actions && !Array.isArray(this.props.actions)) {
finalActions = this.props.actions(this.props.value);
}
else if (this.props.actions != null) {
finalActions = this.props.actions;
}
finalActions = finalActions === null || finalActions === void 0 ? void 0 : finalActions.filter(function (action) {
return action !== null &&
(action.isVisible == null || typeof action.isVisible !== 'function' || action.isVisible(_this.props.value));
});
var renderActions = function (_a) {
var rowActions = _a.rowActions, labelToDisplayRowActionsInCell = _a.labelToDisplayRowActionsInCell, index = _a.index, value = _a.value;
if (labelToDisplayRowActionsInCell && value.label === labelToDisplayRowActionsInCell) {
return rowActions;
}
if (!labelToDisplayRowActionsInCell && index === 0) {
return rowActions;
}
};
var customClassName = (this.props.getRowCustomClassName && this.props.getRowCustomClassName(this.props.rowIndex, this.props.value)) ||
'';
return ((0, jsx_runtime_1.jsx)(UpDataGridContext_1.UpDataGridConsumer, { children: function (_a) {
var displayRowActionsWithinCell = _a.displayRowActionsWithinCell, rowActions = _a.rowActions, labelToDisplayRowActionsInCell = _a.labelToDisplayRowActionsInCell;
return ((0, jsx_runtime_1.jsxs)("tr", (0, tslib_1.__assign)({ className: (0, classnames_1.default)("up-data-grid-row up-data-grid-row-bordered " + customClassName, DataGridRowStyle(_this.props, finalActions && finalActions.length)), onClick: _this.getRowClickAction(finalActions) }, { children: [_this.props.isSelectionEnabled && ((0, jsx_runtime_1.jsx)(UpDataGridCell_1.default, { value: selection, column: { formatter: formatter, label: '' } }, 'cell-selection')), _this.props.columns.map(function (value, index) {
return ((0, jsx_runtime_1.jsx)(UpDataGridCell_1.default, { actions: displayRowActionsWithinCell &&
renderActions({
rowActions: rowActions,
labelToDisplayRowActionsInCell: labelToDisplayRowActionsInCell,
index: index,
value: value,
}), value: _this.props.value, column: value, render: value.render }, "cell-" + index));
}), (0, UpDataGrid_1.isActionEnabled)({
displayRowActionsWithinCell: displayRowActionsWithinCell,
actions: finalActions,
}) && ((0, jsx_runtime_1.jsx)(UpDataGridCell_1.default, (0, tslib_1.__assign)({ value: _this.props.value, column: {
label: '',
isSortable: false,
} }, { children: (0, jsx_runtime_1.jsx)(ButtonGroup_1.default, (0, tslib_1.__assign)({ gutter: 4 }, { children: finalActions.map(function (value, index) {
var extraProps = (value.getProps != null &&
typeof value.getProps === 'function' &&
value.getProps(_this.props.value)) ||
{};
return ((0, jsx_runtime_1.jsx)(UpButton_1.default, (0, tslib_1.__assign)({ tooltip: {
content: value.description,
title: null,
}, actionType: value.type, iconName: value.iconName, width: "icon", intent: value.intent, borderless: value.borderless, onClick: function () {
if (value.action != null) {
return value.action({
isSelected: _this.props.isSelected,
value: _this.props.value,
});
}
}, additionalStyles: value.additionalStyles }, extraProps), "action-" + index));
}) }), void 0) }), 'cell-actions'))] }), void 0));
} }, void 0));
};
UpDataGridRow.defaultProps = {
rowIndex: -1,
isSelectionEnabled: true,
value: {},
isSelected: false,
columns: [],
actions: null,
isRowClickable: false,
};
return UpDataGridRow;
}(React.Component));
exports.default = UpDataGridRow;
//# sourceMappingURL=UpDataGridRow.js.map