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

react-native UI组件库

import React, { cloneElement, memo } from 'react';
import { StyleSheet } from 'react-native';
import Box from '../box';
import Text from '../text';
import useBadge from './useBadge';
const DOT_SIZE = 8; // 默认点大小

const Badge = _ref => {
  let {
    type = 'text',
    containerStyle = {},
    textStyle = {},
    text,
    max = 99,
    children
  } = _ref;
  const {
    onBadgeLayout,
    badgeOffset,
    layout
  } = useBadge();
  return /*#__PURE__*/React.createElement(Box, {
    width: layout.width,
    height: layout.height
  }, /*#__PURE__*/cloneElement(children, {
    onLayout: onBadgeLayout
  }), /*#__PURE__*/React.createElement(Content, {
    type,
    text,
    max,
    containerStyle,
    textStyle,
    badgeOffset
  }));
};
Badge.displayName = 'Badge';
export default Badge;
const Content = /*#__PURE__*/memo(_ref2 => {
  let {
    type,
    text,
    max,
    containerStyle,
    textStyle,
    badgeOffset
  } = _ref2;
  text = typeof text === 'number' && text > max ? `${max}+` : text;
  const isZero = text === '0' || text === 0;
  const isEmpty = text === null || text === undefined || text === '';
  const isHidden = isEmpty || isZero;
  if (isHidden) return null;
  if (type === 'dot') return /*#__PURE__*/React.createElement(Box, {
    width: DOT_SIZE,
    height: DOT_SIZE,
    position: 'absolute',
    top: -(DOT_SIZE / 2),
    right: -(DOT_SIZE / 2),
    backgroundColor: 'func600',
    style: StyleSheet.compose({
      borderRadius: DOT_SIZE / 2
    }, containerStyle)
  });
  return /*#__PURE__*/React.createElement(Box, {
    borderRadius: 'x1',
    position: 'absolute',
    top: badgeOffset.top,
    right: badgeOffset.right,
    paddingHorizontal: 'x1',
    backgroundColor: 'func600',
    justifyContent: 'center',
    style: containerStyle
  }, /*#__PURE__*/React.createElement(Text, {
    textAlign: 'center',
    color: "white",
    style: textStyle
  }, text));
});
//# sourceMappingURL=index.js.map