@sendbird/uikit-react-native-foundation
Version:
A foundational UI kit for building chat-enabled React Native apps.
72 lines • 1.95 kB
JavaScript
import React from 'react';
import { View } from 'react-native';
import Box from '../../components/Box';
import Icon from '../../components/Icon';
import Text from '../../components/Text';
import createStyleSheet from '../../styles/createStyleSheet';
import useUIKitTheme from '../../theme/useUIKitTheme';
const DialogSheet = ({
style,
children
}) => {
const {
colors
} = useUIKitTheme();
return /*#__PURE__*/React.createElement(View, {
style: [styles.container, {
backgroundColor: colors.ui.dialog.default.none.background
}, style]
}, children);
};
const SheetItem = ({
icon,
title,
iconColor,
titleColor,
disabled = false
}) => {
const {
colors
} = useUIKitTheme();
return /*#__PURE__*/React.createElement(View, {
style: [styles.sheetItemContainer, {
backgroundColor: colors.ui.dialog.default.none.background
}]
}, icon && /*#__PURE__*/React.createElement(Icon, {
icon: icon,
color: iconColor ?? (disabled ? colors.ui.dialog.default.none.blurred : colors.ui.dialog.default.none.highlight),
containerStyle: styles.sheetItemIcon
}), /*#__PURE__*/React.createElement(Box, {
flex: 1,
alignItems: 'flex-start'
}, /*#__PURE__*/React.createElement(Text, {
subtitle1: true,
numberOfLines: 1,
color: titleColor ?? (disabled ? colors.ui.dialog.default.none.blurred : colors.ui.dialog.default.none.text),
style: styles.sheetItemText
}, title)));
};
const styles = createStyleSheet({
container: {
overflow: 'hidden',
flexDirection: 'column',
width: '100%',
borderTopStartRadius: 8,
borderTopEndRadius: 8
},
sheetItemContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-start',
height: 48
},
sheetItemIcon: {
marginStart: 16
},
sheetItemText: {
marginHorizontal: 24
}
});
DialogSheet.Item = SheetItem;
export default DialogSheet;
//# sourceMappingURL=DialogSheet.js.map