@theoplayer/react-native-ui
Version:
A React Native UI for @theoplayer/react-native
64 lines • 1.99 kB
JavaScript
import { PlayerContext } from '../../util/PlayerContext';
import { 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__*/_jsx(PlayerContext.Consumer, {
children: context => /*#__PURE__*/_jsxs(View, {
style: [{
height: 44,
flexDirection: 'row',
width: '100%',
justifyContent: 'center'
}, style],
children: [/*#__PURE__*/_jsx(Text, {
style: [DEFAULT_MENU_BUTTON_STYLE, {
color: context.style.colors.text,
width: '50%'
}, textStyle],
children: label
}), /*#__PURE__*/_jsx(View, {
style: {
flexDirection: 'row',
width: '40%',
justifyContent: 'flex-end'
},
children: /*#__PURE__*/_jsxs(TouchableOpacity, {
style: {
flexDirection: 'row'
},
onPress: onTouch,
children: [/*#__PURE__*/_jsx(Text, {
style: [DEFAULT_MENU_BUTTON_STYLE, {
color: context.style.colors.text
}, textStyle],
children: preview
}), /*#__PURE__*/_jsx(ActionButton, {
touchable: false,
svg: /*#__PURE__*/_jsx(ArrowForwardSvg, {})
})]
})
})]
})
});
};
//# sourceMappingURL=SubMenuWithButton.js.map