@sendbird/uikit-react-native-foundation/lib/module/ui/MenuBar/index.js

A foundational UI kit for building chat-enabled React Native apps.

import React from 'react';
import { Pressable, View } from 'react-native';
import { conditionChaining } from '@sendbird/uikit-utils';
import Box from '../../components/Box';
import Divider from '../../components/Divider';
import Icon from '../../components/Icon';
import Text from '../../components/Text';
import createStyleSheet from '../../styles/createStyleSheet';
import useUIKitTheme from '../../theme/useUIKitTheme';
const MenuBar = ({
  variant = 'default',
  disabled,
  visible = true,
  onPress,
  name,
  icon,
  iconColor,
  iconBackgroundColor,
  actionLabel,
  actionItem = null
}) => {
  const {
    palette,
    colors
  } = useUIKitTheme();
  if (!visible) return null;
  return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Pressable, {
    disabled: disabled,
    onPress: onPress,
    style: styles.container
  }, icon && /*#__PURE__*/React.createElement(Icon, {
    icon: icon,
    size: variant === 'contained' ? 16 : 24,
    color: conditionChaining([variant === 'contained', iconColor], [palette.background50, iconColor, colors.primary]),
    containerStyle: [styles.icon, variant === 'contained' && styles.containedIcon, variant === 'contained' && {
      backgroundColor: iconBackgroundColor ?? palette.background400
    }]
  }), /*#__PURE__*/React.createElement(Box, {
    flex: 1,
    alignItems: 'flex-start'
  }, /*#__PURE__*/React.createElement(Text, {
    subtitle2: true,
    numberOfLines: 1,
    style: styles.name
  }, name)), Boolean(actionLabel) && /*#__PURE__*/React.createElement(Text, {
    subtitle2: true,
    numberOfLines: 1,
    color: colors.onBackground02,
    style: styles.actionLabel
  }, actionLabel), actionItem), /*#__PURE__*/React.createElement(Divider, null));
};
const styles = createStyleSheet({
  container: {
    paddingVertical: 16,
    flexDirection: 'row',
    alignItems: 'center'
  },
  name: {
    flex: 1,
    marginEnd: 8
  },
  icon: {
    marginEnd: 16
  },
  containedIcon: {
    borderRadius: 24,
    padding: 4
  },
  actionLabel: {
    marginEnd: 4
  }
});
export default MenuBar;
//# sourceMappingURL=index.js.map