react-web-native-sketch
Version:
[TODO: We need an overview of how this can be used via npm vs as a local package]
104 lines • 4.15 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 { compose } from 'redux';
import { createStyles, ScrollView, Text, View, web } from "../..";
var styles = function () {
return ({
th: (_a = {
flexDirection: 'row',
backgroundColor: '#fff',
borderBottomWidth: 1,
borderBottomColor: '#eee'
},
_a[web] = {
borderBottomStyle: 'solid'
},
_a),
thtd: (_b = {},
_b[web] = {
boxSizing: 'border-box',
},
_b.width = 150,
_b.textAlign = 'center',
_b.alignItems = 'center',
_b.textAlignVertical = 'center',
_b.padding = 8,
_b.height = 40,
_b),
trasd: (_c = {},
_c[web] = {
borderBottomStyle: 'solid',
'&:hover': {
backgroundColor: '#eee',
},
},
_c.borderBottomWidth = 1,
_c.borderBottomColor = '#eee',
_c.flexDirection = 'row',
_c)
});
var _a, _b, _c;
};
var CTable = /** @class */ (function (_super) {
__extends(CTable, _super);
function CTable() {
return _super !== null && _super.apply(this, arguments) || this;
}
CTable.prototype.render = function () {
var _a = this.props, classes = _a.classes, columns = _a.columns, tableData = _a.tableData, t = _a.t, FORM_INPUT_TYPES = { TEXT: 0 };
columns = [
{
field: 'id',
title: 'id',
type: FORM_INPUT_TYPES.TEXT,
isRequired: true,
}, {
field: 'createdAt',
title: 'created',
type: FORM_INPUT_TYPES.TEXT,
isRequired: true,
}, {
field: 'updatedAt',
title: 'UPDATED_AT',
type: FORM_INPUT_TYPES.TEXT,
isRequired: true,
}, {
field: 'email',
title: 'EMAIL',
type: FORM_INPUT_TYPES.TEXT,
preferredWidth: 300,
isRequired: true,
}, {
field: 'phoneNumber',
title: 'PHONE_NUMBER',
type: FORM_INPUT_TYPES.TEXT,
isRequired: true,
},
], tableData = {
items: [
{ id: 1, email: 2 },
{ id: 2, email: 3 },
{ id: 3, email: 3 },
{ id: 4, email: 3 },
]
};
return (React.createElement(ScrollView, { contentContainerStyle: { height: 1000 } },
React.createElement(ScrollView, { horizontal: true, contentContainerStyle: { width: 1000 } },
React.createElement(View, { style: { flexDirection: 'column', backgroundColor: '#fff' } },
React.createElement(View, { style: classes.th }, columns.map(function (column) { return (React.createElement(Text, { key: column.field, style: classes.thtd }, t(column.title || ''))); })),
tableData.items.map(function (row, index) { return (React.createElement(View, { key: row.id || index, style: classes.trasd }, columns.map(function (column) { return (React.createElement(Text, { key: column.field, style: classes.thtd }, row[column.field])); }))); })))));
};
return CTable;
}(React.PureComponent));
export var Table = compose(translate(), createStyles(styles, 'Table'))(CTable);
//# sourceMappingURL=TableInner2.js.map