react-application-core
Version:
A react-based application core for the business applications.
539 lines • 23.8 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Grid = void 0;
var React = require("react");
var R = require("ramda");
var util_1 = require("../../util");
var list_1 = require("../list");
var field_component_1 = require("../field/field/field.component");
var column_1 = require("./column");
var head_1 = require("./head");
var grid_row_component_1 = require("./row/grid-row.component");
var definition_1 = require("../../definition");
var grid_support_1 = require("./grid.support");
var Grid = /** @class */ (function (_super) {
__extends(Grid, _super);
/**
* @stable [07.06.2018]
* @param {IGridProps} originalProps
*/
function Grid(originalProps) {
var _this = _super.call(this, originalProps) || this;
_this.onHeadColumnClose = _this.onHeadColumnClose.bind(_this);
_this.onHeadColumnExpandAllGroups = _this.onHeadColumnExpandAllGroups.bind(_this);
_this.state = {
filterChanges: {},
page: definition_1.DefaultEntities.FIRST_PAGE,
};
return _this;
}
/**
* @stable [23.10.2019]
* @returns {JSX.Element}
*/
Grid.prototype.getView = function () {
var _this = this;
var closed = this.state.closed;
var _a = this.originalProps, className = _a.className, headerRendered = _a.headerRendered, stickyHead = _a.stickyHead, topTotal = _a.topTotal, wrapperClassName = _a.wrapperClassName;
var dataSource = this.dataSource;
var columnsConfiguration = this.columnsConfiguration;
var rowsConfig = this.isGrouped
? this.getGroupedRows(dataSource)
: {
rows: dataSource.map(function (entity, rowNum) { return _this.getRowElement({
columnsConfiguration: columnsConfiguration,
entity: entity,
rowNum: rowNum,
}); }),
};
return (React.createElement("div", { className: util_1.joinClassName('rac-grid-wrapper', wrapperClassName) },
React.createElement("table", { cellPadding: 0, cellSpacing: 0, className: util_1.joinClassName('rac-grid', util_1.calc(className)) },
headerRendered && (React.createElement(head_1.GridHead, { stickyHead: stickyHead },
this.headRowElement,
this.filterElement)),
!closed && (React.createElement("tbody", { className: 'rac-grid-body' },
topTotal !== false && this.totalRowElement,
rowsConfig.rows,
topTotal === false && this.totalRowElement))),
this.getPageToolbarElement(rowsConfig)));
};
/**
* @stable [07.06.2018]
* @returns {IEntity[]}
*/
Grid.prototype.filterAndSortOriginalDataSourceUsingLocalFiltersAndSorters = function () {
return grid_support_1.filterAndSortGridOriginalDataSource(this.originalDataSource, this.columnsConfiguration, this.props, this.state);
};
/**
* @stable [06.06.2018]
* @param {IFieldChangeEntity} payload
*/
Grid.prototype.onChangeRowField = function (payload) {
var props = this.props;
if (props.onChange) {
props.onChange(payload);
}
};
/**
* @stable [07.06.2018]
* @param {IFieldChangeEntity} payload
*/
Grid.prototype.onChangeFilterField = function (payload) {
var _a;
var props = this.props;
if (props.localFiltration) {
this.setState({
page: definition_1.DefaultEntities.FIRST_PAGE,
filterChanges: __assign(__assign({}, this.state.filterChanges), (_a = {}, _a[payload.name] = payload.value, _a)),
});
}
else if (props.onChangeFilter) {
props.onChangeFilter(payload);
}
};
/**
* @stable [31.12.2020]
* @param column
* @param columnNum
* @private
*/
Grid.prototype.getHeaderColumnContent = function (column, columnNum) {
if (util_1.TypeUtils.isFn(column.headerRenderer)) {
return column.headerRenderer(column);
}
return this.t(column.title);
};
Object.defineProperty(Grid.prototype, "headRowElement", {
get: function () {
var _this = this;
var _a = this.state, allGroupsExpanded = _a.allGroupsExpanded, closed = _a.closed;
var onSortingDirectionChange = this.originalProps.onSortingDirectionChange;
var isExpandActionRendered = this.isExpandActionRendered;
var isGrouped = this.isGrouped;
return (React.createElement(grid_row_component_1.GridRow, null, this.columnsConfiguration.map(function (column, columnNum) { return (React.createElement(head_1.GridHeadColumn, __assign({ key: _this.toHeaderColumnKey(columnNum) }, grid_support_1.getGridColumnSortDirection(column, _this.props), { name: column.name, index: columnNum, closed: closed, onSortingDirectionChange: function (payload) { return onSortingDirectionChange(__assign(__assign({}, payload), { index: columnNum, multi: false })); }, onClose: _this.onHeadColumnClose }, column), isExpandActionRendered && isGrouped && _this.isExpandGroupColumn(columnNum)
? (_this.makeExpandIcon(allGroupsExpanded, { onClick: _this.onHeadColumnExpandAllGroups }))
: _this.getHeaderColumnContent(column, columnNum))); })));
},
enumerable: false,
configurable: true
});
Grid.prototype.getColumn = function (cfg) {
var _this = this;
var disabled = this.originalProps.disabled;
var column = cfg.column, entity = cfg.entity, groupedRows = cfg.groupedRows, rowNum = cfg.rowNum;
var tpl = column.tpl, renderer = column.renderer;
var columnName = column.name;
if (util_1.TypeUtils.isFn(tpl)) {
return tpl(entity, column, rowNum);
}
else if (util_1.TypeUtils.isFn(renderer)) {
var renderEl = renderer(entity, column, groupedRows);
if (R.isNil(renderEl)) {
return renderEl;
}
if (this.isElementField(renderEl)) {
var fieldProps = renderEl.props;
var readOnly = fieldProps.readOnly, value = fieldProps.value;
return React.cloneElement(renderEl, {
errorMessageRendered: false,
keepChanges: true,
name: columnName,
readOnly: util_1.NvlUtils.nvl(readOnly, disabled),
value: util_1.isDef(value) ? value : Reflect.get(entity, columnName),
onChange: function ($value) { return _this.onChangeRowField({
value: $value,
name: _this.asFieldName(cfg),
rawData: entity,
}); },
});
}
return renderEl;
}
else if (columnName) {
return Reflect.get(entity, columnName);
}
return null;
};
/**
* @stable [07.06.2018]
* @param {IGridColumnProps} column
* @param {number} columnNum
* @returns {React.ReactNode}
*/
Grid.prototype.getFilterColumn = function (column, columnNum) {
var _this = this;
if (column.filterRenderer) {
/**
* Build using a renderer
*/
var renderEl = column.filterRenderer(column);
if (R.isNil(renderEl)) {
return renderEl;
}
if (this.isElementField(renderEl)) {
var name_1 = this.toFilterFieldName(column, columnNum);
return React.cloneElement(renderEl, {
value: this.toFilterFieldValue(name_1),
placeholder: this.settings.messages.SEARCH,
clearActionRendered: true,
errorMessageRendered: false,
onChange: function (value) { return _this.onChangeFilterField({ value: value, name: name_1 }); },
});
}
return renderEl;
}
return null;
};
/**
* @stable [18.08.2020]
* @param cfg
*/
Grid.prototype.getRowElement = function (cfg) {
var _this = this;
var originalProps = this.originalProps;
var changes = originalProps.changes, onSelect = originalProps.onSelect, itemConfiguration = originalProps.itemConfiguration;
var columnsConfiguration = cfg.columnsConfiguration, entity = cfg.entity, groupedRows = cfg.groupedRows, rowNum = cfg.rowNum;
var rowKey = this.toRowKey(entity);
var entityChanges = changes[entity.id];
var hasChanges = util_1.ObjectUtils.isObjectNotEmpty(entityChanges);
var isPartOfGroup = util_1.TypeUtils.isDef(groupedRows);
return (React.createElement(grid_row_component_1.GridRow, __assign({ entity: entity, index: rowNum, partOfGroup: isPartOfGroup, selected: this.isEntitySelected(entity), onClick: onSelect }, itemConfiguration, { key: rowKey }), columnsConfiguration.map(function (column, columnNum) { return (React.createElement(column_1.GridColumn, __assign({ index: columnNum, edited: hasChanges && column.name in entityChanges, entity: entity }, column, { key: rowKey + "-" + columnNum }), _this.getColumn(__assign(__assign({}, cfg), { column: column, columnNum: columnNum })))); })));
};
Object.defineProperty(Grid.prototype, "filterElement", {
/**
* @stable [26.10.2019]
* @returns {JSX.Element}
*/
get: function () {
var _this = this;
var columns = this.columnsConfiguration;
return (util_1.orNull(columns.some(function (column) { return util_1.isFn(column.filterRenderer); }), function () { return (React.createElement(grid_row_component_1.GridRow, { filter: true }, columns.map(function (column, columnNum) { return (React.createElement(head_1.GridHeadColumn, __assign({ key: _this.toFilterColumnKey(columnNum), index: columnNum }, column), _this.getFilterColumn(column, columnNum))); }))); }));
},
enumerable: false,
configurable: true
});
/**
* @stable [07.06.2018]
* @param {string} name
* @returns {AnyT}
*/
Grid.prototype.toFilterFieldValue = function (name) {
var localFiltration = this.originalProps.localFiltration;
var state = this.state;
return util_1.ConditionUtils.orUndef(localFiltration, function () { return state.filterChanges[name]; });
};
/**
* @stable [18.08.2020]
* @param cfg
*/
Grid.prototype.asFieldName = function (cfg) {
var column = cfg.column, columnNum = cfg.columnNum, entity = cfg.entity;
return column.name || util_1.FieldUtils.dynamicFieldName(entity.id + "-" + columnNum); // Infinity scroll supporting
};
/**
* @stable [18.08.2020]
* @param element
*/
Grid.prototype.isElementField = function (element) {
return field_component_1.Field.isPrototypeOf(element.type);
};
/**
* @stable [07.06.2018]
* @param {IGridColumnProps} column
* @param {number} columnNum
* @returns {string}
*/
Grid.prototype.toFilterFieldName = function (column, columnNum) {
return column.name || "$$dynamic-filter-field-" + columnNum;
};
/**
* @stable - 06.04.2018
* @param {number} columnNum
* @returns {string}
*/
Grid.prototype.toHeaderFieldName = function (columnNum) {
return "$$dynamic-header-field-" + columnNum;
};
/**
* @stable - 05.04.2018
* @param {number} columnNum
* @returns {string}
*/
Grid.prototype.toFilterColumnKey = function (columnNum) {
return "grid-filter-column-" + columnNum;
};
/**
* @stable - 05.04.2018
* @param {number} columnNum
* @returns {string}
*/
Grid.prototype.toHeaderColumnKey = function (columnNum) {
return "grid-header-column-" + columnNum;
};
/**
* @stable [27.12.2018]
* @returns {string}
*/
Grid.prototype.toTotalRowKey = function () {
return "data-total-row";
};
/**
* @stable [05.10.2018]
* @param {EntityIdT} groupRowValue
* @param {number} columnNum
* @returns {string}
*/
Grid.prototype.asGroupColumnKey = function (groupRowValue, columnNum) {
return "data-group-column-" + groupRowValue + "-" + columnNum;
};
/**
* @stable [27.12.2018]
* @param {number} columnNum
* @returns {string}
*/
Grid.prototype.toTotalColumnKey = function (columnNum) {
return "data-total-column-" + columnNum;
};
Grid.prototype.getGroupedRows = function (dataSource) {
var _this = this;
if (R.isEmpty(dataSource)) {
return {
rows: [],
totalCount: 0,
};
}
var originalProps = this.originalProps;
var groupedDataSorter = originalProps.groupedDataSorter, localPagination = originalProps.localPagination, pageSize = originalProps.pageSize;
var preparedDataSource = util_1.isFn(groupedDataSorter)
? R.sort(function (entity1, entity2) {
return groupedDataSorter(_this.extractGroupValue(entity1), _this.extractGroupValue(entity2), entity1, entity2);
}, dataSource)
: dataSource;
var groupedDataSourceMap = new Map();
var groupValuesSet = new Set(); // To save original ordering
var areGroupsReady = this.areGroupsReady;
preparedDataSource.forEach(function (entity) {
var groupedDataSourceEntities;
var groupValue = _this.extractGroupValue(entity);
if (areGroupsReady) {
groupValuesSet.add(entity.id);
groupedDataSourceMap.set(entity.id, groupValue);
}
else {
/**
* See https://www.ecma-international.org/ecma-262/6.0/#sec-set-objects
* ...Append value as the last element of entries.
*
* See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/add
* The add() method appends a new element with a specified value to the end of a Set object.
*/
groupValuesSet.add(groupValue);
groupedDataSourceEntities = groupedDataSourceMap.get(groupValue);
if (!groupedDataSourceMap.has(groupValue)) {
groupedDataSourceMap.set(groupValue, groupedDataSourceEntities = []);
}
groupedDataSourceEntities.push(entity);
}
});
var rows = [];
var columnsConfiguration = this.columnsConfiguration;
var expandActionRendered = this.isExpandActionRendered;
var rowIndex = 0;
var from = (this.state.page - 1) * pageSize;
var to = from + pageSize;
// See the comment at the top
groupValuesSet.forEach(function (groupValue) {
if (!localPagination || rowIndex >= from && rowIndex < to) {
var groupedRows = groupedDataSourceMap.get(groupValue);
var groupExpanded = _this.isGroupExpanded(groupValue);
var cfg_1 = {
columnsConfiguration: columnsConfiguration,
groupedRows: groupedRows,
rowNum: rowIndex,
};
rows.push(_this.getGroupRowElement(__assign(__assign({}, cfg_1), { expandActionRendered: expandActionRendered,
groupExpanded: groupExpanded, value: groupValue })));
if (groupExpanded) {
groupedRows.forEach(function (entity) { return rows.push(_this.getRowElement(__assign(__assign({}, cfg_1), { entity: entity }))); });
}
}
rowIndex++;
});
return {
pagesCount: util_1.PageUtils.pagesCount({ totalCount: groupValuesSet.size, pageSize: pageSize }),
rows: rows,
totalCount: groupValuesSet.size,
};
};
/**
* @stable [29.07.2020]
* @param config
*/
Grid.prototype.getGroupRowElement = function (config) {
var _this = this;
var _a = this.originalProps, groupBy = _a.groupBy, itemConfiguration = _a.itemConfiguration;
var groupValue = groupBy.groupValue;
var columnsConfiguration = config.columnsConfiguration, expandActionRendered = config.expandActionRendered, groupedRows = config.groupedRows, groupExpanded = config.groupExpanded, rowNum = config.rowNum, value = config.value;
return (React.createElement(grid_row_component_1.GridRow, __assign({}, itemConfiguration, { key: this.asGroupRowKey(value), group: true, index: rowNum, groupExpanded: groupExpanded }), columnsConfiguration.map(function (column, columnNum) {
var asActualGroupValue = function () { return (util_1.TypeUtils.isFn(groupValue[columnNum])
? groupValue[columnNum](value, groupedRows)
: null); };
return (React.createElement(column_1.GridColumn, __assign({ key: _this.asGroupColumnKey(value, columnNum) }, column), _this.isExpandGroupColumn(columnNum)
? (expandActionRendered
? (_this.makeExpandIcon(groupExpanded, { onClick: function () { return _this.onExpandGroup(value, !groupExpanded); } }))
: (util_1.TypeUtils.isFn(groupValue)
? groupValue(value, groupedRows)
: asActualGroupValue()))
: asActualGroupValue()));
})));
};
Object.defineProperty(Grid.prototype, "totalRowElement", {
/**
* @stable [27.10.2019]
* @returns {JSX.Element}
*/
get: function () {
var _this = this;
return util_1.ifNotNilThanValue(this.props.totalEntity, function (totalEntity) { return (React.createElement(grid_row_component_1.GridRow, { key: _this.toTotalRowKey(), total: true }, _this.columnsConfiguration.map(function (column, columnNum) { return (React.createElement(column_1.GridColumn, __assign({ key: _this.toTotalColumnKey(columnNum) }, column), totalEntity[column.name])); }))); });
},
enumerable: false,
configurable: true
});
/**
* @stable [30.07.2020]
* @param groupValue
* @param expanded
*/
Grid.prototype.onExpandGroup = function (groupValue, expanded) {
this.setState(function (previousState) {
var _a;
return ({ expandedGroups: __assign(__assign({}, previousState.expandedGroups), (_a = {}, _a[groupValue] = expanded, _a)) });
});
};
/**
* @stable [28.07.2020]
* @param closed
*/
Grid.prototype.onHeadColumnClose = function (closed) {
this.setState({ closed: closed });
};
/**
* @stable [28.07.2020]
*/
Grid.prototype.onHeadColumnExpandAllGroups = function () {
this.setState(function (previousState) { return ({ allGroupsExpanded: !previousState.allGroupsExpanded, expandedGroups: {} }); });
};
/**
* @stable [30.07.2020]
* @param groupExpanded
* @param cfg
*/
Grid.prototype.makeExpandIcon = function (groupExpanded, cfg) {
return this.uiFactory.makeIcon(__assign({ className: definition_1.GridClassesEnum.EXPAND_ACTION, type: groupExpanded
? definition_1.IconsEnum.MINUS_SQUARE_REGULAR
: definition_1.IconsEnum.PLUS_SQUARE_REGULAR }, cfg));
};
/**
* @stable [30.07.2020]
* @param entity
*/
Grid.prototype.extractGroupValue = function (entity) {
var groupName = this.originalProps.groupBy.groupName;
return Reflect.get(entity, groupName);
};
/**
* @stable [30.07.2020]
* @param groupRowValue
*/
Grid.prototype.isGroupExpanded = function (groupRowValue) {
var _a = this.state, allGroupsExpanded = _a.allGroupsExpanded, expandedGroups = _a.expandedGroups;
var $expandedGroups = util_1.NvlUtils.coalesce(expandedGroups, this.originalProps.expandedGroups, {});
return util_1.NvlUtils.nvl($expandedGroups[groupRowValue], allGroupsExpanded);
};
Object.defineProperty(Grid.prototype, "isGrouped", {
/**
* @stable [30.07.2020]
*/
get: function () {
return util_1.TypeUtils.isDef(this.originalProps.groupBy);
},
enumerable: false,
configurable: true
});
/**
* @stable [30.07.2020]
* @param columnNum
*/
Grid.prototype.isExpandGroupColumn = function (columnNum) {
return columnNum === 0;
};
Object.defineProperty(Grid.prototype, "areGroupsReady", {
/**
* @stable [30.07.2020]
*/
get: function () {
return this.isGrouped && this.originalProps.groupBy.areGroupsReady;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Grid.prototype, "isExpandActionRendered", {
/**
* @stable [30.07.2020]
*/
get: function () {
return util_1.WrapperUtils.isExpandActionRendered(this.mergedProps);
},
enumerable: false,
configurable: true
});
Object.defineProperty(Grid.prototype, "columnsConfiguration", {
/**
* @stable [30.07.2020]
*/
get: function () {
var columnsConfiguration = this.originalProps.columnsConfiguration;
return R.filter(function (column) { return column.rendered !== false; }, columnsConfiguration);
},
enumerable: false,
configurable: true
});
/**
* @stable [29.07.2020]
* @param groupRowValue
*/
Grid.prototype.asGroupRowKey = function (groupRowValue) {
return "data-group-row-" + groupRowValue;
};
Grid.defaultProps = {
changes: {},
headerRendered: true,
};
return Grid;
}(list_1.BaseList));
exports.Grid = Grid;
//# sourceMappingURL=grid.component.js.map