@td-design/react-native/lib/module/table/index.js

react-native UI组件库

import React from 'react';
import { FlatList, ScrollView, StyleSheet } from 'react-native';
import { useTheme } from '@shopify/restyle';
import Box from '../box';
import Center from '../center';
import Empty from '../empty';
import helpers from '../helpers';
import { Head } from './Head';
import { Rows } from './Rows';
import useTable from './useTable';
import { ColumnContext } from './utils';
const {
  deviceHeight
} = helpers;
function Table(props) {
  const {
    columns = [],
    dataSource = [],
    headerStyle = {},
    rowStyle = {},
    onRefresh,
    onEndReached,
    refreshing = false,
    height = deviceHeight,
    fixedHeader = true,
    showHeader = true,
    emptyComponent,
    keyExtractor
  } = props;
  const theme = useTheme();
  const {
    contentHeight,
    handleHeaderLayout,
    handleLayout,
    cellWidth
  } = useTable({
    columns
  });
  const styles = StyleSheet.create({
    contentContainer: {
      flexGrow: 1,
      flexDirection: 'column',
      height: height
    }
  });
  return /*#__PURE__*/React.createElement(ColumnContext.Provider, {
    value: {
      columns: columns,
      cellWidth: cellWidth
    }
  }, /*#__PURE__*/React.createElement(ScrollView, {
    horizontal: true,
    onContentSizeChange: handleLayout,
    contentContainerStyle: styles.contentContainer,
    showsHorizontalScrollIndicator: false,
    showsVerticalScrollIndicator: false,
    scrollEnabled: true,
    bounces: false
  }, /*#__PURE__*/React.createElement(FlatList, {
    scrollEnabled: dataSource.length > 0,
    nestedScrollEnabled: true,
    stickyHeaderIndices: fixedHeader && showHeader ? [0] : [],
    showsVerticalScrollIndicator: false,
    showsHorizontalScrollIndicator: false,
    contentContainerStyle: {
      flexGrow: 1,
      backgroundColor: theme.colors.white
    },
    ListHeaderComponent: showHeader ? /*#__PURE__*/React.createElement(Box, {
      onLayout: handleHeaderLayout
    }, /*#__PURE__*/React.createElement(Head, {
      headerStyle: headerStyle
    })) : null,
    data: dataSource,
    bounces: false,
    ListEmptyComponent: emptyComponent ? emptyComponent : /*#__PURE__*/React.createElement(Center, {
      height: contentHeight
    }, /*#__PURE__*/React.createElement(Empty, null)),
    renderItem: _ref => {
      let {
        item
      } = _ref;
      return /*#__PURE__*/React.createElement(Rows, {
        data: item,
        rowStyle: rowStyle
      });
    },
    onRefresh: onRefresh,
    onEndReached: onEndReached,
    refreshing: refreshing,
    keyExtractor: keyExtractor
  })));
}
Table.displayName = 'Table';
export default Table;
//# sourceMappingURL=index.js.map