@td-design/react-native/lib/module/menu/MenuItem.js

react-native UI组件库

import React, { memo } from 'react';
import { useTheme } from '@shopify/restyle';
import Box from '../box';
import helpers from '../helpers';
import Pressable from '../pressable';
import SvgIcon from '../svg-icon';
import Text from '../text';
const {
  ONE_PIXEL
} = helpers;
const MenuItem = _ref => {
  let {
    level,
    title,
    left,
    customIcon,
    onSelect,
    disabled,
    id,
    currentKey,
    activeOpacity = 0.6,
    ...restProps
  } = _ref;
  const theme = useTheme();
  const {
    activeColor = theme.colors.primary200,
    activeTextColor = theme.colors.text_active
  } = restProps;
  const selected = id === currentKey;
  return /*#__PURE__*/React.createElement(Pressable, {
    key: id,
    activeOpacity: activeOpacity,
    onPress: () => onSelect(id),
    disabled: disabled,
    style: {
      flexDirection: 'row',
      alignItems: 'center',
      backgroundColor: selected ? activeColor : theme.colors.white,
      paddingVertical: theme.spacing.x2,
      paddingHorizontal: theme.spacing.x2,
      borderBottomWidth: ONE_PIXEL,
      borderColor: theme.colors.border
    }
  }, /*#__PURE__*/React.createElement(Box, null, left), /*#__PURE__*/React.createElement(Box, {
    flex: 1,
    style: {
      paddingLeft: level * theme.spacing.x2
    }
  }, /*#__PURE__*/React.createElement(Text, {
    variant: "p0",
    style: {
      color: selected ? activeTextColor : theme.colors.text
    }
  }, title)), /*#__PURE__*/React.createElement(Box, null, customIcon ?? /*#__PURE__*/React.createElement(SvgIcon, {
    name: "right",
    color: selected ? theme.colors.white : theme.colors.gray500
  })));
};
MenuItem.displayName = 'MenuItem';
export default /*#__PURE__*/memo(MenuItem);
//# sourceMappingURL=MenuItem.js.map