react-web-native-sketch
Version:
[TODO: We need an overview of how this can be used via npm vs as a local package]
154 lines • 7.03 kB
JavaScript
;
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 __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var react_i18next_1 = require("react-i18next");
var redux_1 = require("redux");
var __1 = require("../..");
var index_1 = require("../../index");
var common_1 = require("../../utils/common");
var strings_1 = require("../../utils/strings");
var TableComponent_1 = require("./TableComponent");
var tableUtils_1 = require("./tableUtils");
var styles = function () {
var _a, _b, _c, _d, _e, _f;
return ({
containerVertical: (_a = {},
_a[__1.web] = {
boxShadow: '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)',
backgroundColor: '#fff',
overflow: 'auto',
width: '100%',
},
_a[__1.all] = {
flexGrow: 1,
},
_a.flexShrink = 0,
_a.maxHeight = (_b = {},
_b[__1.webDesktop] = '75%',
_b[__1.all] = '85%',
_b),
_a),
innerView: {
flex: 1,
flexDirection: 'column',
backgroundColor: '#fff'
},
th: (_c = {
flexDirection: 'row',
backgroundColor: '#000',
borderBottomWidth: 1,
borderBottomColor: '#eee',
flexShrink: 0
},
_c[__1.web] = {
borderBottomStyle: 'solid'
},
_c.fontSize = 12,
_c.color = '#fff',
_c),
thtd: (_d = {},
_d[__1.web] = {
boxSizing: 'border-box',
flex: '1 0 120px',
minWidth: 120
},
_d.textAlign = 'center',
_d.alignItems = 'center',
_d.justifyContent = 'center',
_d.textAlignVertical = 'center',
_d.padding = 8,
_d.height = 40,
_d.overflow = 'hidden',
_d),
tr: (_e = {},
_e[__1.web] = {
padding: '8px 0',
borderBottomStyle: 'solid',
'&:hover': {
backgroundColor: '#eee',
},
},
_e.borderBottomWidth = 1,
_e.borderBottomColor = '#eee',
_e.flexDirection = 'row',
_e.flexShrink = 0,
_e.fontSize = 14,
_e),
noData: (_f = {
width: '100%',
height: 40,
padding: 8
},
_f[__1.web] = {
boxSizing: 'border-box',
},
_f),
title: {
height: 40,
alignItems: 'center'
},
filters: {
width: '100%',
},
filter: {},
});
};
var DEFAULT_CELL_WIDTH = 120;
var CTableInner = /** @class */ (function (_super) {
__extends(CTableInner, _super);
function CTableInner() {
return _super !== null && _super.apply(this, arguments) || this;
}
CTableInner.prototype.render = function () {
var _a = this.props, classes = _a.classes, columns = _a.columns, tableData = _a.tableData, t = _a.t, showFilters = _a.showFilters, filtersData = _a.filtersData, tableDefinition = _a.tableDefinition;
return (React.createElement(__1.ScrollView, { style: classes.containerVertical },
React.createElement(__1.ScrollView, { horizontal: true, style: { width: '100%' } },
React.createElement(__1.View, { style: classes.innerView },
React.createElement(__1.View, { style: [
classes.th,
{
flexDirection: 'row',
height: showFilters ? 80 : 40
},
] }, columns.map(function (column) { return (React.createElement(__1.View, { key: 'table_' + tableDefinition.title + '_column_' + column.field, style: [
classes.thtd,
{
width: column.preferredWidth || DEFAULT_CELL_WIDTH,
flexDirection: 'column',
height: '100%',
}
] },
React.createElement(__1.Text, { key: column.field, style: classes.title }, t(column.title || '')),
showFilters && column.hasFilter &&
React.createElement(__1.View, { style: classes.filter },
TableComponent_1.getFilterForColumn(column, { input: classes.filters }, filtersData.bindedFiltersOnChange[column.field].value, TableComponent_1.getFilterValue(column, common_1.getNestedField(filtersData.filters, [column.field, 'value'])), t),
column['operator'] === index_1.FILTER_OPERATORS.BETWEEN &&
TableComponent_1.getFilterForColumn(column, { input: classes.filters }, filtersData.bindedFiltersOnChange[column.field].upperValue, TableComponent_1.getFilterValue(column, common_1.getNestedField(filtersData.filters, [column.field, 'upperValue'])), t)))); })),
!tableData
? (React.createElement(__1.View, { style: [classes.noData, classes.th] },
React.createElement(__1.Text, null, t(strings_1.NO_TABLE_DATA)))) : (tableData.items.map(function (row, index) { return (React.createElement(__1.View, { key: row.id || index, style: classes.tr }, columns.map(function (column) {
var value = tableUtils_1.getValue(column, row);
return (React.createElement(__1.View, { key: column.field, style: [
classes.thtd,
{
width: column.preferredWidth || DEFAULT_CELL_WIDTH
}
] }, typeof value !== 'object' // in case this is JSX
? React.createElement(__1.Text, null, value)
: value));
}))); }))))));
};
return CTableInner;
}(React.PureComponent));
exports.TableInner = redux_1.compose(react_i18next_1.translate(), __1.createStyles(styles, 'TableInner'))(CTableInner);
//# sourceMappingURL=TableInner.js.map