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

react-native UI组件库

import React, { memo, useContext, useMemo } from 'react';
import Box from '../box';
import helpers from '../helpers';
import Text from '../text';
import { ColumnContext, computeWidth } from './utils';
const {
  ONE_PIXEL
} = helpers;
export const Head = /*#__PURE__*/memo(_ref => {
  let {
    headerStyle
  } = _ref;
  const {
    columns,
    cellWidth
  } = useContext(ColumnContext);
  const cellRender = useMemo(() => {
    if (!(columns instanceof Array)) {
      throw new Error('columns 需要是数组');
    }
    return columns.map((item, index) => {
      const styles = computeWidth(cellWidth, item.width);
      return /*#__PURE__*/React.createElement(Box, {
        key: item.dataIndex ?? index,
        justifyContent: "center",
        style: styles
      }, /*#__PURE__*/React.createElement(Text, {
        variant: "h3",
        color: "gray500",
        numberOfLines: item.numberOfLines,
        ellipsizeMode: item.ellipsisMode,
        textAlign: item.textAlign || 'center'
      }, item.title));
    });
  }, [columns, cellWidth]);
  return /*#__PURE__*/React.createElement(Box, {
    flexDirection: "row",
    paddingVertical: "x4",
    style: headerStyle,
    borderBottomWidth: ONE_PIXEL,
    borderColor: "border",
    backgroundColor: "background"
  }, cellRender);
});
//# sourceMappingURL=Head.js.map