@td-design/react-native/lib/module/button-group/Item.js

react-native UI组件库

import React, { cloneElement, memo, useMemo } from 'react';
import { StyleSheet } from 'react-native';
import { useTheme } from '@shopify/restyle';
import Box from '../box';
import Pressable from '../pressable';
import Text from '../text';
const ButtonItem = _ref => {
  let {
    label,
    onItemPress,
    onPress,
    itemStyle,
    disabled,
    size = 'x2',
    index,
    isFirst,
    isLast,
    isCurrent,
    activeOpacity
  } = _ref;
  const theme = useTheme();
  const styles = StyleSheet.create({
    item: {
      backgroundColor: isCurrent ? theme.colors.primary200 : theme.colors.white,
      borderColor: theme.colors.primary200,
      padding: theme.spacing[size],
      display: 'flex',
      alignItems: 'center',
      flex: 1,
      borderTopWidth: 1,
      borderBottomWidth: 1,
      borderRightWidth: 1
    },
    first: {
      borderTopStartRadius: theme.borderRadii.x1,
      borderBottomStartRadius: theme.borderRadii.x1,
      borderLeftWidth: 1
    },
    last: {
      borderTopEndRadius: theme.borderRadii.x1,
      borderBottomEndRadius: theme.borderRadii.x1,
      borderRightWidth: 1,
      borderLeftWidth: 0
    }
  });
  const Label = useMemo(() => {
    const textColor = isCurrent ? theme.colors.text_active : theme.colors.primary200;
    if (typeof label === 'string') return /*#__PURE__*/React.createElement(Text, {
      variant: 'p1',
      textAlign: 'center',
      style: {
        color: disabled ? theme.colors.gray200 : textColor
      }
    }, label);
    return /*#__PURE__*/cloneElement(label, {
      style: {
        color: textColor
      }
    });
  }, [label, isCurrent, disabled, theme.colors.primary200, theme.colors.text_active, theme.colors.gray200]);
  if (!disabled) return /*#__PURE__*/React.createElement(Pressable, {
    activeOpacity: activeOpacity,
    onPress: () => {
      onItemPress(index);
      onPress === null || onPress === void 0 ? void 0 : onPress();
    },
    style: StyleSheet.flatten([styles.item, isFirst && styles.first, isLast && styles.last, itemStyle])
  }, Label);
  return /*#__PURE__*/React.createElement(Box, {
    style: StyleSheet.flatten([styles.item, isFirst && styles.first, isLast && styles.last, itemStyle])
  }, Label);
};
export default /*#__PURE__*/memo(ButtonItem);
//# sourceMappingURL=Item.js.map