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

react-native UI组件库

import React, { memo } from 'react';
import { StyleSheet } from 'react-native';
import { useTheme } from '@shopify/restyle';
import Box from '../box';
import Brief from '../brief';
import Flex from '../flex';
import helpers from '../helpers';
import Text from '../text';
const {
  ONE_PIXEL
} = helpers;
/**
 * Card 组件由Header（可选）/Content/Footer（可选）三部分组成
 */
const Card = _ref => {
  let {
    icon,
    title,
    extra,
    renderHeader,
    footer,
    hideHeader,
    containerStyle,
    contentStyle,
    children
  } = _ref;
  return /*#__PURE__*/React.createElement(Box, {
    backgroundColor: "white",
    borderWidth: ONE_PIXEL,
    borderColor: "border",
    borderRadius: 'x2',
    style: containerStyle
  }, renderHeader ? renderHeader() : /*#__PURE__*/React.createElement(Header, {
    hideHeader,
    icon,
    title,
    extra
  }), /*#__PURE__*/React.createElement(Body, {
    footer,
    contentStyle
  }, children), !!footer && /*#__PURE__*/React.createElement(Box, {
    padding: "x2"
  }, footer));
};
Card.displayName = 'Card';
export default Card;
const Header = /*#__PURE__*/memo(_ref2 => {
  let {
    hideHeader,
    icon,
    title,
    extra
  } = _ref2;
  if (hideHeader) return null;
  const Header = /*#__PURE__*/React.createElement(Flex, {
    justifyContent: "space-between"
  }, !!(icon || title) && /*#__PURE__*/React.createElement(Flex, null, !!icon && /*#__PURE__*/React.createElement(Box, null, icon), !!title && /*#__PURE__*/React.createElement(Box, null, typeof title === 'string' ? /*#__PURE__*/React.createElement(Text, {
    variant: "p0",
    color: "text"
  }, title) : title)), /*#__PURE__*/React.createElement(Brief, {
    brief: extra
  }));
  return /*#__PURE__*/React.createElement(Box, {
    borderBottomWidth: ONE_PIXEL,
    borderBottomColor: "border",
    paddingHorizontal: "x2",
    paddingVertical: 'x2',
    justifyContent: "center"
  }, Header);
});
const Body = /*#__PURE__*/memo(_ref3 => {
  let {
    footer,
    contentStyle,
    children
  } = _ref3;
  const theme = useTheme();
  return /*#__PURE__*/React.createElement(Box, {
    padding: "x2",
    style: footer ? StyleSheet.compose({
      borderBottomWidth: ONE_PIXEL,
      borderBottomColor: theme.colors.border,
      paddingBottom: theme.spacing.x2
    }, contentStyle) : contentStyle
  }, children);
});
//# sourceMappingURL=index.js.map