@dokuhero/react-native-components/dist/components/ListView.js

Sets of React Native components that works with dokuhero/react-native-theme and react-i18next

import * as tslib_1 from "tslib";
import { withLocaleClass } from '@dokuhero/react-18n-ts-helper';
import { ColorKeys, createStyleSheet, FontNameKeys, FontSizesKeys, SpaceKeys, withThemeClass } from '@dokuhero/react-native-theme';
import React from 'react';
import { FlatList, RefreshControl, Text, View } from 'react-native';
import { Icon, List } from 'react-native-elements';
import { globalStyles } from '../styles';
var ListView = /** @class */ (function (_super) {
    tslib_1.__extends(ListView, _super);
    function ListView(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            refreshing: false
        };
        return _this;
    }
    ListView.prototype.render = function () {
        var _this = this;
        var _a = this.props, containerStyle = _a.containerStyle, key = _a.key, data = _a.data, renderItem = _a.renderItem, onRefresh = _a.onRefresh, title = _a.title, noTopBorder = _a.noTopBorder, isLoading = _a.isLoading;
        return (<List containerStyle={[
            styles.container,
            noTopBorder ? { borderTopWidth: 0 } : {},
            containerStyle
        ]}>
        {title && <Text style={styles.title}>{title}</Text>}

        {!isLoading && data && data.length ? (<FlatList data={data} renderItem={function (_a) {
            var item = _a.item;
            return renderItem(item);
        }} keyExtractor={function (item, index) {
            return key ? item[key].toString() : index.toString();
        }} refreshControl={onRefresh ? (<RefreshControl refreshing={this.state.refreshing} onRefresh={function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
            return tslib_1.__generator(this, function (_a) {
                switch (_a.label) {
                    case 0:
                        this.setState({ refreshing: true });
                        return [4 /*yield*/, onRefresh()];
                    case 1:
                        _a.sent();
                        this.setState({ refreshing: false });
                        return [2 /*return*/];
                }
            });
        }); }}/>) : (undefined)}/>) : isLoading ? (this.renderLoadingData()) : (this.renderEmptyData())}
      </List>);
    };
    ListView.prototype.renderLoadingData = function () {
        var _a = this.props, t = _a.t, color = _a.theme.color;
        var loadingComponent = this.props.loadingComponent;
        if (!loadingComponent) {
            loadingComponent = t('Loading data...');
        }
        return (<View style={[globalStyles.container, globalStyles.centerize]}>
        {typeof loadingComponent === 'string' ? (<View>
            <Icon name="md-time" type="ionicon" size={65} color={color.grey}/>
            {loadingComponent && (<Text style={styles.emptyDataText}>{t(loadingComponent)}</Text>)}
          </View>) : (loadingComponent)}
      </View>);
    };
    ListView.prototype.renderEmptyData = function () {
        var _a = this.props, t = _a.t, color = _a.theme.color, onRefresh = _a.onRefresh;
        var emptyComponent = this.props.emptyComponent;
        if (!emptyComponent) {
            emptyComponent = 'Data is empty';
        }
        return (<View style={[globalStyles.container, globalStyles.centerize]}>
        <View>
          {typeof emptyComponent === 'string' ? (<View>
              <Icon name="ios-refresh" type="ionicon" size={65} color={color.grey} onPress={onRefresh}/>
              {emptyComponent && (<Text style={styles.emptyDataText}>{t(emptyComponent)}</Text>)}
            </View>) : (emptyComponent)}
          
        </View>
      </View>);
    };
    ListView = tslib_1.__decorate([
        withThemeClass(),
        withLocaleClass('common'),
        tslib_1.__metadata("design:paramtypes", [Object])
    ], ListView);
    return ListView;
}(React.Component));
export { ListView };
var styles = createStyleSheet({
    container: { flex: 1, marginTop: 0, backgroundColor: 'transparent' },
    emptyDataContainer: {},
    emptyDataText: {
        textAlign: 'center',
        fontFamily: FontNameKeys.semiBold,
        color: ColorKeys.grey
    },
    title: {
        marginHorizontal: SpaceKeys.medium,
        marginTop: SpaceKeys.small,
        fontSize: FontSizesKeys.medium,
        fontFamily: FontNameKeys.semiBold
    },
    refreshButtonContainer: {
        marginTop: SpaceKeys.small
    }
});
//# sourceMappingURL=ListView.js.map