react-web-native-sketch
Version:
[TODO: We need an overview of how this can be used via npm vs as a local package]
112 lines • 4.43 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 __());
};
})();
import * as React from 'react';
import { translate } from 'react-i18next';
import { View } from "../../primitives/View/View";
import { Text } from "../../primitives/Text/Text";
import { compose } from "redux";
import { createStyles, ScrollView, web } from "../../index";
import { NO_TABLE_DATA } from "../../utils/strings";
var styles = {
horizontalScrollable: (_a = {
borderWidth: 1,
borderColor: '#999',
borderStyle: 'solid',
flexDirection: 'column'
},
_a[web] = {
overflowX: 'scroll',
overflowY: 'hidden',
},
_a),
header: (_b = {
flexBasis: 50
},
_b[web] = {
flexAlign: 'center',
textTransform: 'uppercase',
},
_b.borderBottomWidth = 1,
_b.borderBottomColor = '#000',
_b.borderBottomStyle = 'solid',
_b.fontWeight = '500',
_b.backgroundColor = '#eee',
_b),
row: {
flexDirection: 'row',
flexShrink: 0,
},
evenRow: {
backgroundColor: '#efefef',
},
oddRow: {
backgroundColor: '#fff',
},
body: (_c = {},
_c[web] = {
overflowX: 'visible',
overflowY: 'scroll',
},
_c.flexDirection = 'column',
_c.flexGrow = 1,
_c),
bodyRow: {
borderBottomStyle: 'solid',
borderBottomWidth: 1,
borderBottomColor: '#ddd',
height: 34,
},
cell: (_d = {},
_d[web] = {
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
},
_d.overflow = 'hidden',
_d.padding = 7,
_d),
noData: {
margin: 'auto'
}
};
var DEFAULT_CELL_WIDTH = 200;
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, totalWidth = columns.reduce(function (prevSum, current) { return prevSum + (current.preferredWidth || DEFAULT_CELL_WIDTH); }, 0);
return (React.createElement(ScrollView, { style: classes.horizontalScrollable, horizontal: true },
React.createElement(View, { name: "header", style: [
classes.header,
classes.row,
{ width: totalWidth }
] }, columns.map(function (column) { return (React.createElement(Text, { key: column.field, style: [
classes.cell,
{ width: column.preferredWidth || DEFAULT_CELL_WIDTH }
] }, t(column.title || ""))); })),
React.createElement(ScrollView, { style: [
classes.body,
{ width: totalWidth }
], horizontal: true }, !tableData
? (React.createElement(View, { style: classes.noData },
React.createElement(Text, null, t(NO_TABLE_DATA)))) : (tableData.items.map(function (row, index) { return (React.createElement(View, { key: index, style: [classes.row, classes.bodyRow] }, columns.map(function (column) { return (React.createElement(View, { key: column.field, style: [
// index % 2 === 0 ? classes.evenRow : classes.oddRow,
{ width: column.preferredWidth || DEFAULT_CELL_WIDTH }
] }, column.dataFormat
? column.dataFormat(row[column.field], row)
: React.createElement(Text, { style: classes.cell }, row[column.field] || "-"))); }))); })))));
};
return CTableInner;
}(React.PureComponent));
export var TableInner = compose(translate(), createStyles(styles, 'TableInner'))(CTableInner);
var _a, _b, _c, _d;
//# sourceMappingURL=TableInner3.js.map