@theoplayer/react-native-ui
Version:
A React Native UI for @theoplayer/react-native
72 lines (71 loc) • 2.08 kB
JavaScript
import React, { useContext } from 'react';
import { PlayerContext } from '../../util/PlayerContext';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { ControlBar } from '../../controlbar/ControlBar';
import { TOP_UI_CONTAINER_STYLE } from '../../uicontroller/UiContainer';
import { BackSvg } from '../../button/svg/BackSvg';
import { ActionButton } from '../../button/actionbutton/ActionButton';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* The default style for the menu view.
*/
export const DEFAULT_MENU_VIEW_STYLE = {
flex: 1,
flexDirection: 'row',
left: 0,
right: 0,
top: 0,
bottom: 0,
paddingVertical: 20,
paddingLeft: 50,
paddingRight: 40
};
/**
* A component to render a fullscreen menu with a title and back button for the `react-native-theoplayer` UI.
*/
export const MenuView = props => {
const {
menu,
style
} = props;
const context = useContext(PlayerContext);
const onClose = () => {
context.ui.closeCurrentMenu_();
};
return /*#__PURE__*/_jsxs(View, {
style: StyleSheet.absoluteFill,
children: [/*#__PURE__*/_jsxs(ControlBar, {
style: TOP_UI_CONTAINER_STYLE,
children: [/*#__PURE__*/_jsx(View, {
style: {
flexDirection: 'row'
},
children: /*#__PURE__*/_jsxs(TouchableOpacity, {
style: {
flexDirection: 'row'
},
onPress: onClose,
children: [/*#__PURE__*/_jsx(ActionButton, {
touchable: false,
svg: /*#__PURE__*/_jsx(BackSvg, {})
}), /*#__PURE__*/_jsx(Text, {
style: {
color: context.style.colors.text,
fontSize: 16,
lineHeight: 30
},
children: context.locale.backButton
})]
})
}), /*#__PURE__*/_jsx(View, {
style: {
flexGrow: 1
}
})]
}), /*#__PURE__*/_jsx(View, {
style: [DEFAULT_MENU_VIEW_STYLE, style],
children: menu
})]
});
};
//# sourceMappingURL=MenuView.js.map