react-web-native-sketch
Version:
[TODO: We need an overview of how this can be used via npm vs as a local package]
129 lines • 6.28 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 __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var react_i18next_1 = require("react-i18next");
var redux_1 = require("redux");
var strings_1 = require("../../utils/strings");
var __1 = require("../../");
var styles = function () {
var _a, _b, _c;
return ({
container: {
marginTop: __1.appTheme.defaultVerticalMargin,
marginBottom: __1.appTheme.defaultVerticalMargin,
height: 24,
minHeight: 24,
maxHeight: 24,
flexWrap: 'wrap',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
width: '100%',
flex: 1,
flexShrink: 0,
marginLeft: (_a = {},
_a[__1.webDesktop] = 0,
_a[__1.all] = __1.appTheme.marginM,
_a),
},
initialTextStyle: {
height: 26,
alignItems: 'center',
justifyContent: 'center',
},
buttonStyle: {
minWidth: 32,
alignItems: 'center',
justifyContent: 'center',
height: 24,
},
buttonsTouchableStyle: {
minWidth: 0,
},
iconStyle: (_b = {
marginLeft: 0,
marginRight: 0
},
_b[__1.ios] = {
tintColor: null,
},
_b[__1.android] = {
tintColor: null,
},
_b),
itemsPerPageContainer: {
minWidth: 128,
width: 128,
maxWidth: 128,
},
buttonsRoot: (_c = {},
_c[__1.webDesktop] = {},
_c[__1.all] = {
minWidth: 32,
minHeight: 24,
width: 32,
height: 24,
maxWidth: 32,
maxHeight: 24,
marginLeft: __1.appTheme.marginS,
backgroundColor: '#ffffff',
padding: 0,
},
_c),
disabled: {
backgroundColor: 'transparent',
color: __1.appTheme.primaryColor
// borderWidth: 2,
// borderStyle: 'solid',
// borderColor: '#ffffff',
},
buttonLabel: {
color: '#000000',
},
});
};
var CTablePageNavigator = /** @class */ (function (_super) {
__extends(CTablePageNavigator, _super);
function CTablePageNavigator() {
return _super !== null && _super.apply(this, arguments) || this;
}
CTablePageNavigator.prototype.getItemsPerPageOptions = function () {
var itemsPerPageOptions = this.props.itemsPerPageOptions;
return itemsPerPageOptions.map(function (value) { return ({
text: value.toString(),
value: value,
}); }).slice();
};
CTablePageNavigator.prototype.render = function () {
var _a = this.props, classes = _a.classes, style = _a.style, itemsCount = _a.itemsCount, itemsLowerLimit = _a.itemsLowerLimit, itemsUpperLimit = _a.itemsUpperLimit, currentPage = _a.currentPage, pagesCount = _a.pagesCount, changePage = _a.changePage, jumpToFirstIcon = _a.jumpToFirstIcon, jumpToLastIcon = _a.jumpToLastIcon, t = _a.t, itemsPerPageValue = _a.itemsPerPageValue, itemsPerPageOptions = _a.itemsPerPageOptions, changeItemsPerPage = _a.changeItemsPerPage;
return (React.createElement(__1.View, { style: [classes.container, style || {}] },
!!itemsPerPageValue && !!itemsPerPageOptions && !!changeItemsPerPage &&
React.createElement(__1.View, { style: classes.itemsPerPageContainer },
React.createElement(__1.Select, { title: t(strings_1.ITEMS_PER_PAGE), value: itemsPerPageValue, options: this.getItemsPerPageOptions(), onChange: function (value) { return changeItemsPerPage(value); } })),
!!pagesCount && React.createElement(__1.View, { style: { alignItems: 'center' } },
!__1.isXs() &&
React.createElement(__1.Text, { style: classes.initialTextStyle }, t(strings_1.TABLE_PAGE_COUNTER, { itemsLowerLimit: itemsLowerLimit, itemsUpperLimit: itemsUpperLimit, itemsCount: itemsCount })),
React.createElement(__1.Button, { disabled: !(pagesCount < 1) && !(currentPage > 0), onPress: changePage.bind(this, 0), iconLeft: jumpToFirstIcon, styles: { root: classes.buttonsRoot } }),
pagesCount > 1 && currentPage > 0 &&
React.createElement(__1.Button, { onPress: changePage.bind(this, currentPage - 1), title: (currentPage).toString(), styles: { root: classes.buttonsRoot, label: classes.buttonLabel } }),
pagesCount > 1 &&
React.createElement(__1.Button, { title: (currentPage + 1).toString(), disabled: true, styles: { root: [classes.buttonsRoot, classes.disabled], label: classes.buttonLabel } }),
pagesCount > 1 && currentPage < pagesCount - 1 &&
React.createElement(__1.Button, { onPress: changePage.bind(this, currentPage + 1), title: (currentPage + 2).toString(), styles: { root: classes.buttonsRoot, label: classes.buttonLabel } }),
React.createElement(__1.Button, { disabled: (pagesCount > 1) && !(currentPage < pagesCount - 1), onPress: changePage.bind(this, pagesCount - 1), iconLeft: jumpToLastIcon, styles: { root: classes.buttonsRoot } }))));
};
return CTablePageNavigator;
}(React.PureComponent));
var componentName = 'TablePageNavigator';
exports.TablePageNavigator = redux_1.compose(react_i18next_1.translate(), __1.createStyles(styles, componentName))(CTablePageNavigator);
//# sourceMappingURL=TablePageNavigator.js.map