react-web-native-sketch
Version:
[TODO: We need an overview of how this can be used via npm vs as a local package]
291 lines • 14.5 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
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) || 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;
};
Object.defineProperty(exports, "__esModule", { value: true });
var _a;
var React = require("react");
var react_i18next_1 = require("react-i18next");
var react_redux_1 = require("react-redux");
var redux_1 = require("redux");
var index_1 = require("../../index");
var View_1 = require("../../primitives/View/View");
var persistedTableOptions_1 = require("../../redux/reducers/persistedTableOptions");
var table_1 = require("../../redux/reducers/table");
var common_1 = require("../../utils/common");
var enums_1 = require("../../utils/enums");
var strings_1 = require("../../utils/strings");
var TextInput_1 = require("../TextInput/TextInput");
var TableActionsColumn_1 = require("./TableActionsColumn");
var TableInner_1 = require("./TableInner");
var TablePageNavigator_1 = require("./TablePageNavigator");
var TableTopActions_1 = require("./TableTopActions");
var tableUtils_1 = require("./tableUtils");
var styles = {
container: {
maxWidth: '100%',
flexDirection: 'column',
},
title: {
flexShrink: 0,
flexGrow: 0,
height: 50,
fontSize: index_1.appTheme.fontSizeXL,
flexDirection: 'row',
alignItems: 'center',
},
filtersContainer: {
width: '100%',
flexDirection: 'row',
flexWrap: 'wrap',
flexShrink: 0
},
filter: {
width: 140,
marginTop: 4,
marginBottom: 4,
marginLeft: 0,
marginRight: 0,
},
paginate: (_a = {},
_a[index_1.webDesktop] = {
marginTop: 16
},
_a),
flexRow: {
flexDirection: 'row',
},
flexColumn: {
flexDirection: 'column',
},
};
var FILTER_DELAY_MS = 333, DEFAULT_ITEMS_PER_PAGE = 10, NO_PAGINATE_ITEMS_COUNT = 1000;
exports.EMPTY_SELECT_FILTER = {
value: '',
text: '',
};
var getActionsColumn = function (actions, t) {
return {
field: tableUtils_1.ACTIONS_COLUMN,
title: strings_1.ACTIONS,
type: index_1.FORM_INPUT_TYPES.TABLE_ACTIONS,
notSortable: true,
preferredWidth: 120,
dataFormat: function (cell, row) {
return (React.createElement(TableActionsColumn_1.TableActionsColumn, { actions: actions, t: t, row: row }));
}
};
};
exports.getFilterValue = function (column, value) {
if (value !== null && value !== undefined) {
return value;
}
switch (column.type) {
case index_1.FORM_INPUT_TYPES.TEXT:
return '';
case index_1.FORM_INPUT_TYPES.SELECT:
return exports.EMPTY_SELECT_FILTER.value;
default:
return null;
}
};
exports.getFilterForColumn = function (column, style, onChange, value, t) {
switch (column.type) {
case index_1.FORM_INPUT_TYPES.TEXT:
return (React.createElement(TextInput_1.TextInput, __assign({}, column, { title: t(column.title), onChange: function (value) { return onChange(value); }, inputType: index_1.TEXT_INPUT_TYPES.TEXT, inputStyle: style, value: value })));
case index_1.FORM_INPUT_TYPES.SELECT:
return (React.createElement(index_1.Select, __assign({}, column, { title: t(column.title), onChange: function (value) { return onChange(value); }, inputStyle: style, value: (value === null || value === undefined) ? exports.EMPTY_SELECT_FILTER.value : value, options: [exports.EMPTY_SELECT_FILTER].concat((column['options'] || [])), nullable: false })));
}
return null;
};
var CTableComponent = /** @class */ (function (_super) {
__extends(CTableComponent, _super);
function CTableComponent(props) {
var _this = _super.call(this, props) || this;
_this._columns = [];
_this.setColumns(props);
_this._filtersData = {
filters: {},
filtersTimeout: null,
bindedFiltersOnChange: {},
bindedLoadTableData: props.loadTableData.bind(_this, props.tableDefinition.url, props.tableId),
};
_this._pagesData = {
page: 0,
itemsPerPage: !!props.tableDefinition.itemsPerPage
? (typeof props.tableDefinition.itemsPerPage === 'object'
? props.tableDefinition.itemsPerPage[0]
: props.tableDefinition.itemsPerPage)
: DEFAULT_ITEMS_PER_PAGE,
bindedSetPage: _this.setPage.bind(_this),
bindedSetItemsPerPage: _this.setItemsPerPage.bind(_this),
};
_this._columns.filter(function (column) { return column.hasFilter; })
.forEach(function (column) {
_this._filtersData.filters[column.field] = {};
_this._filtersData.bindedFiltersOnChange[column.field] = {
value: _this.setFilter.bind(_this, column.field, false),
};
if (column['operator'] === index_1.FILTER_OPERATORS.BETWEEN) {
_this._filtersData.bindedFiltersOnChange[column.field].upperValue =
_this.setFilter.bind(_this, column.field, true);
}
});
return _this;
}
CTableComponent.prototype.loadData = function () {
this._filtersData.bindedLoadTableData(this.getLoadDataRequestObject());
};
CTableComponent.prototype.getColumnOperator = function (field) {
for (var i = 0; i < this._columns.length; i++) {
if (this._columns[i].field === field) {
return this._columns[i]['operator'];
}
}
console.log('Could not get filter operator for field', field);
return '~';
};
CTableComponent.prototype.getLoadDataRequestObject = function () {
var tableDefinition = this.props.tableDefinition;
var filters = [], page = tableDefinition.paginate
? this._pagesData.page
: 0, itemsPerPage = tableDefinition.paginate
? this._pagesData.itemsPerPage
: NO_PAGINATE_ITEMS_COUNT;
for (var field in this._filtersData.filters) {
if (this._filtersData.filters.hasOwnProperty(field)) {
var value = this._filtersData.filters[field].hasOwnProperty('value')
? this._filtersData.filters[field].value.toString()
: undefined, upperValue = this._filtersData.filters[field].hasOwnProperty('upperValue')
? this._filtersData.filters[field].upperValue.toString()
: undefined;
if (value !== undefined || upperValue !== undefined) {
filters.push({
column: field,
operator: this.getColumnOperator(field),
value: value,
upperValue: upperValue,
});
}
}
}
return filters.length > 0
? {
filters: filters,
page: page,
itemsPerPage: itemsPerPage,
}
: {
page: page,
itemsPerPage: itemsPerPage,
};
};
CTableComponent.prototype.setPage = function (page) {
this._pagesData = __assign({}, this._pagesData, { page: page });
this.loadData();
};
CTableComponent.prototype.setItemsPerPage = function (itemsPerPage) {
this._pagesData = __assign({}, this._pagesData, { page: 0, itemsPerPage: itemsPerPage });
this.loadData();
};
CTableComponent.prototype.setFilter = function (field, isUpperValue, value) {
var _this = this;
if (value === null || value === undefined || value === '') {
if (isUpperValue && !!this._filtersData.filters[field]) {
delete (this._filtersData.filters[field].upperValue);
}
else {
delete (this._filtersData.filters[field].value);
}
}
else {
if (isUpperValue) {
this._filtersData.filters[field].upperValue = value;
}
else {
this._filtersData.filters[field].value = value;
}
}
this._pagesData.page = 0;
clearTimeout(this._filtersData.filtersTimeout);
this._filtersData.filtersTimeout = setTimeout(function () {
_this.loadData();
}, FILTER_DELAY_MS);
};
CTableComponent.prototype.setColumns = function (props) {
var tableDefinition = props.tableDefinition, extraData = props.extraData, extraActions = props.extraActions, t = props.t;
this._columns = tableDefinition.columns(__assign({}, (extraData || {}), { t: t })).filter(function (column) { return !column.hiddenInTable; });
if (!!extraActions) {
this._columns = [getActionsColumn(extraActions, t)].concat(this._columns);
}
};
CTableComponent.prototype.componentDidMount = function () {
this.loadData();
};
CTableComponent.prototype.componentWillReceiveProps = function (nextProps) {
if (this.props.extraData !== nextProps.extraData) {
this.setColumns(nextProps);
}
if (!!this.props.tableData && !this.props.tableData.refresh && nextProps.tableData.refresh) {
this.loadData();
}
};
CTableComponent.prototype.render = function () {
var _this = this;
var _a = this.props, classes = _a.classes, loadingData = _a.loadingData, tableDefinition = _a.tableDefinition, tableData = _a.tableData, title = _a.title, tableActions = _a.tableActions, style = _a.style, t = _a.t, hasFilters = this._columns.filter(function (column) { return column.hasFilter; }).length > 0;
return (React.createElement(View_1.View, { style: [classes.container, style] },
React.createElement(View_1.View, { style: classes.flexRow },
!!title && React.createElement(index_1.Text, { style: classes.title }, title),
loadingData &&
React.createElement(View_1.View, { style: { marginLeft: 16 } },
React.createElement(index_1.CircularProgressComponent, { size: enums_1.CIRCULAR_PROGRESS_SIZE.SMALL }))),
hasFilters && tableDefinition.filtersOnTop &&
React.createElement(View_1.View, { style: classes.filtersContainer }, this._columns.filter(function (column) { return column.hasFilter; }).map(function (column) { return (React.createElement(View_1.View, { key: 'table_' + tableDefinition.title + '_filter_' + column.field, style: classes.filter },
exports.getFilterForColumn(column, { input: classes.filters }, _this._filtersData.bindedFiltersOnChange[column.field].value, exports.getFilterValue(column, common_1.getNestedField(_this._filtersData.filters, [column.field, 'value'])), t),
column['operator'] === index_1.FILTER_OPERATORS.BETWEEN &&
exports.getFilterForColumn(column, { input: classes.filters }, _this._filtersData.bindedFiltersOnChange[column.field].upperValue, exports.getFilterValue(column, common_1.getNestedField(_this._filtersData.filters, [column.field, 'upperValue'])), t))); })),
React.createElement(TableTopActions_1.TableTopActions, { columns: this._columns, refreshMethod: !!tableDefinition.url
? function () { return _this.loadData(); }
: undefined, tableData: tableData, title: tableDefinition.title, tableActions: tableActions }),
React.createElement(TableInner_1.TableInner, { columns: this._columns, tableData: tableData && tableData.data, showFilters: hasFilters && !tableDefinition.filtersOnTop, filtersData: this._filtersData, tableDefinition: tableDefinition }),
tableDefinition.paginate && tableData && tableData.data &&
React.createElement(TablePageNavigator_1.TablePageNavigator, { itemsCount: tableData.data.totalItemsNumber, itemsLowerLimit: tableData.data.totalItemsNumber
? tableData.data.itemsPerPage * tableData.data.page + 1
: 0, itemsUpperLimit: tableData.data.itemsPerPage
? Math.min(tableData.data.itemsPerPage * (tableData.data.page + 1), tableData.data.totalItemsNumber)
: 0, currentPage: tableData.data.page, pagesCount: Math.ceil(tableData.data.totalItemsNumber / tableData.data.itemsPerPage), changePage: this.setPage.bind(this), jumpToFirstIcon: tableDefinition.paginateIcons && tableDefinition.paginateIcons.jumpToFirstIcon, jumpToLastIcon: tableDefinition.paginateIcons && tableDefinition.paginateIcons.jumpToLastIcon, itemsPerPageValue: this._pagesData.itemsPerPage, itemsPerPageOptions: typeof tableDefinition.itemsPerPage === 'object'
? tableDefinition.itemsPerPage
: undefined, changeItemsPerPage: this._pagesData.bindedSetItemsPerPage, style: classes.paginate })));
};
return CTableComponent;
}(React.PureComponent));
var componentName = 'TableComponent';
exports.TableComponent = redux_1.compose(react_i18next_1.translate(), react_redux_1.connect(function (state, ownProps) {
var tableId = ownProps.tableContainerName || ownProps.tableDefinition.dataName;
return {
loadingData: common_1.getNestedField(state.table, [tableId, 'loading']),
openedTableRow: common_1.getNestedField(state.table, [tableId, 'menuRow']),
tableData: ownProps.tableData || state.table[tableId],
tableId: tableId,
};
}, {
loadTableData: table_1.loadTableData,
setPersistentTableOptions: persistedTableOptions_1.setPersistentTableOptions,
showEntryDetails: table_1.showEntryDetails,
}), index_1.createStyles(styles, componentName))(CTableComponent);
//# sourceMappingURL=TableComponent.js.map