@td-design/react-native/lib/module/radio/RadioItem.js

react-native UI组件库

import React, { memo, useMemo } from 'react';
import { Keyboard, StyleSheet } from 'react-native';
import { useTheme } from '@shopify/restyle';
import Box from '../box';
import Flex from '../flex';
import Pressable from '../pressable';
import SvgIcon from '../svg-icon';
import Text from '../text';
const mapping = {
  checked: 'radio-checked',
  unchecked: 'radio-unchecked'
};
const RadioItem = _ref => {
  let {
    mode,
    size,
    status,
    label,
    value,
    isLast = false,
    disabled,
    itemStyle,
    labelStyle,
    onChange,
    activeOpacity
  } = _ref;
  const theme = useTheme();
  const handleChange = () => {
    Keyboard.dismiss();
    if (disabled) return;
    onChange === null || onChange === void 0 ? void 0 : onChange(value, status);
  };
  const styles = StyleSheet.create({
    list: {
      width: '100%',
      flex: 1
    }
  });
  const Label = useMemo(() => {
    if (typeof label === 'string') {
      return /*#__PURE__*/React.createElement(Text, {
        variant: "p1",
        color: disabled ? 'disabled' : 'text',
        style: labelStyle,
        numberOfLines: 1,
        ellipsizeMode: "tail"
      }, label);
    }
    return label;
  }, [disabled, label, labelStyle]);
  if (!disabled) return /*#__PURE__*/React.createElement(Pressable, {
    onPress: handleChange,
    activeOpacity: activeOpacity,
    style: [mode === 'list' && styles.list, itemStyle]
  }, /*#__PURE__*/React.createElement(Flex, {
    marginRight: isLast ? 'x0' : 'x2',
    style: mode === 'list' && styles.list
  }, /*#__PURE__*/React.createElement(Box, {
    marginRight: "x1"
  }, /*#__PURE__*/React.createElement(SvgIcon, {
    name: mapping[status],
    color: theme.colors.primary200,
    size: size
  })), Label));
  return /*#__PURE__*/React.createElement(Box, {
    style: [mode === 'list' && styles.list, itemStyle]
  }, /*#__PURE__*/React.createElement(Flex, {
    marginRight: isLast ? 'x0' : 'x2',
    style: mode === 'list' && styles.list
  }, /*#__PURE__*/React.createElement(Box, {
    marginRight: "x1"
  }, /*#__PURE__*/React.createElement(SvgIcon, {
    name: mapping[status],
    color: theme.colors.disabled,
    size: size
  })), Label));
};
RadioItem.displayName = 'RadioItem';
export default /*#__PURE__*/memo(RadioItem);
//# sourceMappingURL=RadioItem.js.map