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

react-native UI组件库

import React, { memo } from 'react';
import Animated from 'react-native-reanimated';
import { useTheme } from '@shopify/restyle';
import Box from '../box';
import helpers from '../helpers';
import Pressable from '../pressable';
import Text from '../text';
import Chevron from './Chevron';
import useGroup from './useGroup';
const {
  ONE_PIXEL
} = helpers;
const MenuGroup = _ref => {
  let {
    activeOpacity,
    disabled,
    left,
    title,
    openKeys,
    setOpenKeys,
    id,
    level,
    children
  } = _ref;
  const theme = useTheme();
  const {
    bodyStyle,
    progress,
    handleLayout,
    handlePress
  } = useGroup({
    openKeys,
    setOpenKeys,
    id
  });
  return /*#__PURE__*/React.createElement(Box, {
    backgroundColor: 'gray50'
  }, /*#__PURE__*/React.createElement(Pressable, {
    activeOpacity: activeOpacity,
    onPress: handlePress,
    disabled: disabled,
    style: {
      flexDirection: 'row',
      alignItems: 'center',
      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",
    color: "text"
  }, title)), /*#__PURE__*/React.createElement(Chevron, {
    progress
  })), /*#__PURE__*/React.createElement(Animated.View, {
    style: [{
      position: 'relative',
      overflow: 'hidden'
    }, bodyStyle]
  }, /*#__PURE__*/React.createElement(Box, {
    position: 'absolute',
    width: "100%",
    collapsable: false,
    onLayout: handleLayout
  }, children)));
};
MenuGroup.displayName = 'MenuGroup';
export default /*#__PURE__*/memo(MenuGroup);
//# sourceMappingURL=MenuGroup.js.map