@arche-mc2/arche-controls
Version:
We know that there are a ton of react UI library projects to choose from. Our hope with this one is to provide the next generation of react components that you can use to bootstrap your next project, or as a reference for building a UIKit. Read on to get
158 lines • 8.21 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var typestyle_1 = require("typestyle");
var classnames = require("classnames");
var UpCheckBox_1 = require("../../Inputs/Checkbox/UpCheckBox");
var UpButton_1 = require("../../Inputs/Button/UpButton");
var UpDataGridCell_1 = require("./UpDataGridCell");
var UpDataGrid_1 = require("./UpDataGrid");
var UpDefaultCellFormatter_1 = require("./UpDefaultCellFormatter");
var shallowEqual_1 = require("../../../Common/utils/shallowEqual");
var ButtonGroup_1 = require("../../Containers/ButtonGroup");
var UpDataGridContext_1 = require("./UpDataGridContext");
var DataGridRowStyle = function (props, finalActionsLength) {
var _a;
return typestyle_1.style(tslib_1.__assign(tslib_1.__assign({}, (props.onClick ? { cursor: 'pointer' } : {})), (props.isRowClickable && finalActionsLength === 1
? {
cursor: 'pointer',
$nest: {
'&:hover': {
background: (((_a = props.theme) === null || _a === void 0 ? void 0 : _a.colorMap.black3) || '#d4d4d4') +
' !important',
},
},
}
: {})));
};
var UpDataGridRow = (function (_super) {
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 (!shallowEqual_1.default(this.props, nextProps) ||
!shallowEqual_1.default(this.state, nextState));
};
UpDataGridRow.prototype.render = function () {
var _this = this;
var formatter = new UpDefaultCellFormatter_1.default();
var selection = (React.createElement(UpCheckBox_1.default, { options: [
{
name: 'up-selection',
checked: this.props.isSelected === true,
value: true,
onOptionChange: this.onSelectionChange,
},
] }));
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 (React.createElement(UpDataGridContext_1.UpDataGridConsumer, null, function (_a) {
var displayRowActionsWithinCell = _a.displayRowActionsWithinCell, rowActions = _a.rowActions, labelToDisplayRowActionsInCell = _a.labelToDisplayRowActionsInCell;
return (React.createElement("tr", { className: classnames("up-data-grid-row up-data-grid-row-bordered " + customClassName, DataGridRowStyle(_this.props, finalActions && finalActions.length)), onClick: _this.getRowClickAction(finalActions) },
_this.props.isSelectionEnabled && (React.createElement(UpDataGridCell_1.default, { key: 'cell-selection', value: selection, column: { formatter: formatter, label: '' } })),
_this.props.columns.map(function (value, index) {
return (React.createElement(UpDataGridCell_1.default, { actions: displayRowActionsWithinCell &&
renderActions({
rowActions: rowActions,
labelToDisplayRowActionsInCell: labelToDisplayRowActionsInCell,
index: index,
value: value,
}), key: "cell-" + index, value: _this.props.value, column: value, render: value.render }));
}),
UpDataGrid_1.isActionEnabled({
displayRowActionsWithinCell: displayRowActionsWithinCell,
actions: finalActions,
}) && (React.createElement(UpDataGridCell_1.default, { key: 'cell-actions', value: _this.props.value, column: { label: '', isSortable: false } },
React.createElement(ButtonGroup_1.default, { gutter: 4 }, finalActions.map(function (value, index) {
var extraProps = (value.getProps != null &&
typeof value.getProps === 'function' &&
value.getProps(_this.props.value)) ||
{};
return (React.createElement(UpButton_1.default, tslib_1.__assign({ key: "action-" + index, tooltip: {
content: value.description,
title: null,
}, actionType: value.type, 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,
});
}
} }, extraProps)));
}))))));
}));
};
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