@theoplayer/react-native-ui
Version:
A React Native UI for @theoplayer/react-native
72 lines • 2.08 kB
JavaScript
import { PlayerContext } from '../../util/PlayerContext';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import React, { useContext } from 'react';
import { ArrowForwardSvg } from '../../button/svg/ArrowForwardSvg';
import { DEFAULT_MENU_BUTTON_STYLE } from './MenuRadioButton';
import { ActionButton } from '../../button/actionbutton/ActionButton';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* A component that can be put inside a SettingsMenuButton to create a sub menu.
*/
export const SubMenuWithButton = props => {
const {
style,
textStyle,
menuConstructor,
label,
preview
} = props;
const context = useContext(PlayerContext);
const onTouch = () => {
if (menuConstructor) {
context.ui.openMenu_(menuConstructor);
}
};
return /*#__PURE__*/_jsxs(View, {
style: [styles.container, style],
children: [/*#__PURE__*/_jsx(Text, {
ellipsizeMode: 'tail',
numberOfLines: 1,
style: [DEFAULT_MENU_BUTTON_STYLE, styles.label, {
color: context.style.colors.text
}, textStyle],
children: label
}), /*#__PURE__*/_jsx(View, {
style: styles.valueContainer,
children: /*#__PURE__*/_jsxs(TouchableOpacity, {
style: {
flexDirection: 'row'
},
onPress: onTouch,
children: [/*#__PURE__*/_jsx(Text, {
ellipsizeMode: 'tail',
numberOfLines: 1,
style: [DEFAULT_MENU_BUTTON_STYLE, {
color: context.style.colors.text
}, textStyle],
children: preview
}), /*#__PURE__*/_jsx(ActionButton, {
touchable: false,
svg: /*#__PURE__*/_jsx(ArrowForwardSvg, {})
})]
})
})]
});
};
const styles = StyleSheet.create({
container: {
height: 44,
flexDirection: 'row',
width: '100%',
justifyContent: 'center'
},
label: {
flexShrink: 1
},
valueContainer: {
flexDirection: 'row',
flexGrow: 1,
justifyContent: 'flex-end'
}
});
//# sourceMappingURL=SubMenuWithButton.js.map