react-web-native-sketch/dist/src/nativeComponents/TableComponent/TableComponent2.js

[TODO: We need an overview of how this can be used via npm vs as a local package]

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;
};
import * as React from 'react';
import { compose } from "redux";
import { connect } from "react-redux";
import { View } from "../../primitives/View/View";
import { TableInner2 } from "./TableInner";
import { appTheme, Button, createStyles, FORM_INPUT_TYPES, Text } from "../../index";
import { translate } from "react-i18next";
import { loadTableData, showEntryDetails } from "../../redux/reducers/table";
import { getNestedField } from "../../utils/common";
import { setPersistentTableOptions } from "../../redux/reducers/persistedTableOptions";
import { TableTopActions } from "./TableTopActions";
import { ACTIONS } from "../../utils/strings";
import { PopoverComponent } from "../PopoverComponent/PopoverComponent";
var styles = {
    container: {
        maxWidth: '100%',
        flexDirection: 'column',
    },
    title: {
        flexShrink: 0,
        fontSize: appTheme.fontSizeXL,
    }
};
var ACTIONS_COLUMN = 'admin_actions';
var getActionsColumn = function (actions, t) {
    return {
        field: ACTIONS_COLUMN,
        title: ACTIONS,
        type: FORM_INPUT_TYPES.TABLE_ACTIONS,
        notSortable: true,
        preferredWidth: 120,
        dataFormat: function (cell, row) {
            return (React.createElement(View, { style: { flexDirection: 'row' } }, actions.length > 0 &&
                React.createElement(PopoverComponent, { actions: actions.map(function (action) { return (__assign({}, action, { onPress: function () { return action.onPress(row); } })); }) },
                    React.createElement(Button, { title: t(ACTIONS) }))));
        }
    };
};
var CTableComponent = /** @class */ (function (_super) {
    __extends(CTableComponent, _super);
    function CTableComponent() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    CTableComponent.prototype.componentDidMount = function () {
        var _a = this.props, loadTableData = _a.loadTableData, url = _a.tableDefinition.url, tableId = _a.tableId;
        url && loadTableData(url, tableId);
    };
    CTableComponent.prototype.render = function () {
        var _a = this.props, classes = _a.classes, extraActions = _a.extraActions, loadingData = _a.loadingData, t = _a.t, tableDefinition = _a.tableDefinition, tableData = _a.tableData, tableId = _a.tableId, columns = tableDefinition.columns(undefined);
        if (!!extraActions) {
            columns = [getActionsColumn(extraActions, t)].concat(columns);
        }
        return (React.createElement(View, { style: classes.container },
            React.createElement(View, { style: classes.title },
                React.createElement(Text, null, tableDefinition.title)),
            React.createElement(TableTopActions, { columns: columns, refreshMethod: !!tableDefinition.url
                    ? function () { return loadTableData(tableDefinition.url, tableId); }
                    : undefined, loadingData: loadingData, tableData: tableData, title: tableDefinition.title }),
            React.createElement(TableInner2, { columns: columns, tableData: tableData && tableData.data })));
    };
    return CTableComponent;
}(React.PureComponent));
var componentName = 'TableComponent';
export var TableComponent = compose(translate(), connect(function (state, ownProps) {
    var tableId = ownProps.tableContainerName || ownProps.tableDefinition.dataName;
    return {
        loadingData: getNestedField(state.table, [tableId, 'loading']),
        openedTableRow: getNestedField(state.table, [tableId, 'menuRow']),
        tableData: ownProps.tableData || state.table[tableId],
        tableId: tableId,
    };
}, {
    loadTableData: loadTableData,
    setPersistentTableOptions: setPersistentTableOptions,
    showEntryDetails: showEntryDetails,
}), createStyles(styles, componentName))(CTableComponent);
//# sourceMappingURL=TableComponent2.js.map