haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(welcome) added WelcomePage React Nav bottom tabs

This commit is contained in:
Calin Chitu 2021-11-17 14:54:00 +02:00 committed by Calinteodor
parent 6f75226044
commit e42db3c9c2
18 changed files with 267 additions and 297 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
package-lock.json generated
View File

@ -40,6 +40,7 @@
"@react-native-community/netinfo": "4.1.5",
"@react-native-community/slider": "3.0.3",
"@react-native-masked-view/masked-view": "0.2.6",
"@react-navigation/bottom-tabs": "5.11.15",
"@react-navigation/drawer": "5.12.9",
"@react-navigation/material-top-tabs": "5.3.19",
"@react-navigation/native": "5.9.8",
@ -4206,6 +4207,22 @@
"react-native": ">=0.57"
}
},
"node_modules/@react-navigation/bottom-tabs": {
"version": "5.11.15",
"resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-5.11.15.tgz",
"integrity": "sha512-TBY419W6aN/HZg98xbVp5Bx1HEF5sXuHR5f55W6KMI4k2AvxlwelKD1wbfvEcX2iuQT0YUiiXsACRFUSECYhkw==",
"dependencies": {
"color": "^3.1.3",
"react-native-iphone-x-helper": "^1.3.0"
},
"peerDependencies": {
"@react-navigation/native": "^5.0.5",
"react": "*",
"react-native": "*",
"react-native-safe-area-context": ">= 0.6.0",
"react-native-screens": ">= 2.0.0-alpha.0 || >= 2.0.0-beta.0 || >= 2.0.0"
}
},
"node_modules/@react-navigation/core": {
"version": "5.16.1",
"resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-5.16.1.tgz",
@ -23360,6 +23377,15 @@
"resolved": "https://registry.npmjs.org/@react-native-masked-view/masked-view/-/masked-view-0.2.6.tgz",
"integrity": "sha512-303CxmetUmgiX9NSUxatZkNh9qTYYdiM8xkGf9I3Uj20U3eGY3M78ljeNQ4UVCJA+FNGS5nC1dtS9GjIqvB4dg=="
},
"@react-navigation/bottom-tabs": {
"version": "5.11.15",
"resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-5.11.15.tgz",
"integrity": "sha512-TBY419W6aN/HZg98xbVp5Bx1HEF5sXuHR5f55W6KMI4k2AvxlwelKD1wbfvEcX2iuQT0YUiiXsACRFUSECYhkw==",
"requires": {
"color": "^3.1.3",
"react-native-iphone-x-helper": "^1.3.0"
}
},
"@react-navigation/core": {
"version": "5.16.1",
"resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-5.16.1.tgz",

1
package.json
View File

@ -45,6 +45,7 @@
"@react-native-community/netinfo": "4.1.5",
"@react-native-community/slider": "3.0.3",
"@react-native-masked-view/masked-view": "0.2.6",
"@react-navigation/bottom-tabs": "5.11.15",
"@react-navigation/drawer": "5.12.9",
"@react-navigation/material-top-tabs": "5.3.19",
"@react-navigation/native": "5.9.8",

1
react/features/app/reducers.any.js
View File

@ -54,4 +54,3 @@ import '../toolbox/reducer';
import '../transcribing/reducer';
import '../video-layout/reducer';
import '../videosipgw/reducer';
import '../welcome/reducer';

3
react/features/base/react/components/native/styles.js
View File

@ -117,7 +117,8 @@ const SECTION_LIST_STYLES = {
* The top level container style of the list.
*/
container: {
flex: 1
flex: 1,
width: '100%'
},
list: {

8
react/features/base/ui/Tokens.js
View File

@ -42,6 +42,8 @@ export const colors = {
warning06: '#ED9E1B',
warning07: '#D77976',
disabled01: '#00000040',
support01: '#FF9B42',
support02: '#F96E57',
support03: '#DF486F',
@ -245,6 +247,12 @@ export const colorMap = {
// Color for insecure room
warning03: 'warning07',
// Color for disabled tab
tab01Disabled: 'disabled01',
// Color for disabled video switch
video01Disabled: 'disabled01',
// Backgrounds for avatars
support01: 'support01',
support02: 'support02',

14
react/features/calendar-sync/components/CalendarList.native.js
View File

@ -75,10 +75,16 @@ class CalendarList extends AbstractPage<Props> {
return (
CalendarListContent
? <CalendarListContent
disabled = { disabled }
listEmptyComponent
= { this._getRenderListEmptyComponent() } />
? <View
style = {
disabled
? styles.calendarSyncDisabled
: styles.calendarSync }>
<CalendarListContent
disabled = { disabled }
listEmptyComponent
= { this._getRenderListEmptyComponent() } />
</View>
: null
);
}

14
react/features/calendar-sync/components/styles.js
View File

@ -1,4 +1,5 @@
import { ColorPalette, createStyleSheet } from '../../base/styles';
import BaseTheme from '../../base/ui/components/BaseTheme';
const NOTIFICATION_SIZE = 55;
@ -163,5 +164,18 @@ export default createStyleSheet({
*/
touchableView: {
flexDirection: 'row'
},
calendarSync: {
backgroundColor: BaseTheme.palette.uiBackground,
flex: 1,
overflow: 'hidden'
},
calendarSyncDisabled: {
backgroundColor: BaseTheme.palette.uiBackground,
flex: 1,
opacity: 0.8,
overflow: 'hidden'
}
});

4
react/features/conference/components/native/routes.js
View File

@ -1,6 +1,10 @@
export const screen = {
welcome: {
main: 'Home',
tabs: {
recent: 'Recent',
calendar: 'Calendar'
},
settings: 'Settings',
terms: 'Terms',
privacy: 'Privacy',

18
react/features/recent-list/components/RecentList.native.js
View File

@ -1,6 +1,7 @@
// @flow
import React from 'react';
import { View } from 'react-native';
import type { Dispatch } from 'redux';
import { getDefaultURL } from '../../app/functions';
@ -8,6 +9,7 @@ import { openDialog } from '../../base/dialog/actions';
import { translate } from '../../base/i18n';
import { NavigateSectionList, type Section } from '../../base/react';
import { connect } from '../../base/redux';
import styles from '../../welcome/components/styles';
import { isRecentListEnabled, toDisplayableList } from '../functions';
import AbstractRecentList from './AbstractRecentList';
@ -82,13 +84,15 @@ class RecentList extends AbstractRecentList<Props> {
const recentList = toDisplayableList(_recentList, t, _defaultServerURL);
return (
<NavigateSectionList
disabled = { disabled }
onLongPress = { this._onLongPress }
onPress = { this._onPress }
renderListEmptyComponent
= { this._getRenderListEmptyComponent() }
sections = { recentList } />
<View style = { disabled ? styles.recentListDisabled : styles.recentList }>
<NavigateSectionList
disabled = { disabled }
onLongPress = { this._onLongPress }
onPress = { this._onPress }
renderListEmptyComponent
= { this._getRenderListEmptyComponent() }
sections = { recentList } />
</View>
);
}

24
react/features/welcome/actionTypes.js
View File

@ -1,24 +0,0 @@
// @flow
/**
* The type of the (redux) action which sets the visibility of
* {@link WelcomePageSideBar}.
*
* {
* type: SET_SIDEBAR_VISIBLE,
* visible: boolean
* }
*/
export const SET_SIDEBAR_VISIBLE = 'SET_SIDEBAR_VISIBLE';
/**
* The type of (redux) action to set the default page index of
* {@link WelcomePageLists}.
*
* {
* type: SET_WELCOME_PAGE_LISTS_DEFAULT_PAGE,
* pageIndex: number
* }
*/
export const SET_WELCOME_PAGE_LISTS_DEFAULT_PAGE
= 'SET_WELCOME_PAGE_LIST_DEFAULT_PAGE';

39
react/features/welcome/actions.js
View File

@ -1,39 +0,0 @@
// @flow
import {
SET_SIDEBAR_VISIBLE,
SET_WELCOME_PAGE_LISTS_DEFAULT_PAGE
} from './actionTypes';
/**
* Sets the visibility of {@link WelcomePageSideBar}.
*
* @param {boolean} visible - If the {@code WelcomePageSideBar} is to be made
* visible, {@code true}; otherwise, {@code false}.
* @returns {{
* type: SET_SIDEBAR_VISIBLE,
* visible: boolean
* }}
*/
export function setSideBarVisible(visible: boolean) {
return {
type: SET_SIDEBAR_VISIBLE,
visible
};
}
/**
* Sets the default page index of {@link WelcomePageLists}.
*
* @param {number} pageIndex - The index of the default page.
* @returns {{
* type: SET_WELCOME_PAGE_LISTS_DEFAULT_PAGE,
* pageIndex: number
* }}
*/
export function setWelcomePageListsDefaultPage(pageIndex: number) {
return {
type: SET_WELCOME_PAGE_LISTS_DEFAULT_PAGE,
pageIndex
};
}

36
react/features/welcome/components/TabIcon.js Normal file
View File

@ -0,0 +1,36 @@
// @flow
import React from 'react';
import { Icon } from '../../base/icons';
import BaseTheme from '../../base/ui/components/BaseTheme';
import { INACTIVE_TAB_COLOR } from '../constants';
type Props = {
/**
* Is the tab focused?
*/
focused?: boolean,
/**
* The ImageSource to be rendered as image.
*/
src: Object,
/**
* The component's external style.
*/
style?: Object
}
const TabIcon = ({ focused, src, style }: Props) => (
<Icon
color = { focused ? BaseTheme.palette.icon01 : INACTIVE_TAB_COLOR }
size = { 24 }
src = { src }
style = { style } />
);
export default TabIcon;

83
react/features/welcome/components/WelcomePage.native.js
View File

@ -19,21 +19,20 @@ import { MEDIA_TYPE } from '../../base/media';
import JitsiStatusBar from '../../base/modal/components/JitsiStatusBar';
import { LoadingIndicator, Text } from '../../base/react';
import { connect } from '../../base/redux';
import { ColorPalette } from '../../base/styles';
import {
createDesiredLocalTracks,
destroyLocalDesktopTrackIfExists,
destroyLocalTracks
} from '../../base/tracks';
import BaseTheme from '../../base/ui/components/BaseTheme.native';
import {
AbstractWelcomePage,
_mapStateToProps as _abstractMapStateToProps,
type Props as AbstractProps
} from './AbstractWelcomePage';
import LocalVideoTrackUnderlay from './LocalVideoTrackUnderlay';
import VideoSwitch from './VideoSwitch';
import WelcomePageLists from './WelcomePageLists';
import WelcomePageTabs from './WelcomePageTabs';
import styles, { PLACEHOLDER_TEXT_COLOR } from './styles';
@ -328,7 +327,7 @@ class WelcomePage extends AbstractWelcomePage<*> {
{ t('welcomepage.accessibilityLabel.join') }
onPress = { this._onJoin }
style = { styles.button }
underlayColor = { ColorPalette.white }>
underlayColor = { BaseTheme.palette.ui12 }>
{ children }
</TouchableHighlight>
);
@ -341,50 +340,48 @@ class WelcomePage extends AbstractWelcomePage<*> {
*/
_renderFullUI() {
const roomnameAccLabel = 'welcomepage.accessibilityLabel.roomname';
const { _headerStyles, t } = this.props;
const { t } = this.props;
return (
<>
<JitsiStatusBar />
<LocalVideoTrackUnderlay style = { styles.welcomePage }>
<View style = { _headerStyles.page }>
<SafeAreaView style = { styles.roomContainer } >
<View style = { styles.joinControls } >
<Text style = { styles.enterRoomText }>
{ t('welcomepage.roomname') }
</Text>
{/* // $FlowExpectedError*/}
<TextInput
accessibilityLabel = { t(roomnameAccLabel) }
autoCapitalize = { 'none' }
autoComplete = { 'off' }
autoCorrect = { false }
autoFocus = { false }
onBlur = { this._onFieldBlur }
onChangeText = { this._onRoomChange }
onFocus = { this._onFieldFocus }
onSubmitEditing = { this._onJoin }
placeholder = { this.state.roomPlaceholder }
placeholderTextColor = { PLACEHOLDER_TEXT_COLOR }
returnKeyType = { 'go' }
spellCheck = { false }
style = { styles.textInput }
underlineColorAndroid = 'transparent'
value = { this.state.room } />
{
<View style = { styles.welcomePage }>
<SafeAreaView style = { styles.roomContainer } >
<View style = { styles.joinControls } >
<Text style = { styles.enterRoomText }>
{ t('welcomepage.roomname') }
</Text>
{/* // $FlowExpectedError*/}
<TextInput
accessibilityLabel = { t(roomnameAccLabel) }
autoCapitalize = { 'none' }
autoComplete = { 'off' }
autoCorrect = { false }
autoFocus = { false }
onBlur = { this._onFieldBlur }
onChangeText = { this._onRoomChange }
onFocus = { this._onFieldFocus }
onSubmitEditing = { this._onJoin }
placeholder = { this.state.roomPlaceholder }
placeholderTextColor = { PLACEHOLDER_TEXT_COLOR }
returnKeyType = { 'go' }
spellCheck = { false }
style = { styles.textInput }
underlineColorAndroid = 'transparent'
value = { this.state.room } />
{
// $FlowExpectedError
this._renderInsecureRoomNameWarning()
}
{
this._renderHintBox()
}
</View>
</SafeAreaView>
{/* $FlowExpectedError*/}
<WelcomePageLists disabled = { this.state._fieldFocused } />
</View>
</LocalVideoTrackUnderlay>
// $FlowExpectedError
this._renderInsecureRoomNameWarning()
}
{
this._renderHintBox()
}
</View>
</SafeAreaView>
{/* // $FlowExpectedError*/}
<WelcomePageTabs disabled = { this.state._fieldFocused } />
</View>
</>
);
}

139
react/features/welcome/components/WelcomePageLists.js
View File

@ -1,139 +0,0 @@
// @flow
import React, { Component } from 'react';
import { translate } from '../../base/i18n';
import { IconEventNote, IconRestore } from '../../base/icons';
import { PagedList } from '../../base/react';
import { connect } from '../../base/redux';
import { CalendarList, isCalendarEnabled } from '../../calendar-sync';
import { RecentList } from '../../recent-list';
import { setWelcomePageListsDefaultPage } from '../actions';
/**
* The type of the React {@code Component} props of {@link WelcomePageLists}.
*/
type Props = {
/**
* Whether the calendar functionality is enabled or not.
*/
_calendarEnabled: boolean,
/**
* The stored default page index.
*/
_defaultPage: number,
/**
* Renders the lists disabled.
*/
disabled: boolean,
/**
* The Redux dispatch function.
*/
dispatch: Function,
/**
* The i18n translate function.
*/
t: Function
};
/**
* Implements the lists displayed on the mobile welcome screen.
*/
class WelcomePageLists extends Component<Props> {
/**
* Initializes a new {@code WelcomePageLists} instance.
*
* @inheritdoc
*/
constructor(props) {
super(props);
// Bind event handlers so they are only bound once per instance.
this._onSelectPage = this._onSelectPage.bind(this);
}
/**
* Implements React's {@link Component#render}.
*
* @inheritdoc
*/
render() {
const { _calendarEnabled, _defaultPage, t } = this.props;
if (typeof _defaultPage === 'undefined') {
return null;
}
const pages = [
{
component: RecentList,
icon: IconRestore,
title: t('welcomepage.recentList')
}
];
if (_calendarEnabled) {
pages.push(
{
component: CalendarList,
icon: IconEventNote,
title: t('welcomepage.calendar')
}
);
}
return (
<PagedList
defaultPage = { _defaultPage }
disabled = { this.props.disabled }
onSelectPage = { this._onSelectPage }
pages = { pages } />
);
}
_onSelectPage: number => void;
/**
* Callback for the {@code PagedList} page select action.
*
* @private
* @param {number} pageIndex - The index of the selected page.
* @returns {void}
*/
_onSelectPage(pageIndex) {
this.props.dispatch(setWelcomePageListsDefaultPage(pageIndex));
}
}
/**
* Maps (parts of) the redux state to the React {@code Component} props of
* {@code WelcomePageLists}.
*
* @param {Object} state - The redux state.
* @protected
* @returns {{
* _calendarEnabled: boolean,
* _defaultPage: number
* }}
*/
function _mapStateToProps(state: Object) {
let { defaultPage } = state['features/welcome'];
if (typeof defaultPage === 'undefined') {
const recentList = state['features/recent-list'];
defaultPage = recentList && recentList.length ? 0 : 1;
}
return {
_calendarEnabled: isCalendarEnabled(state),
_defaultPage: defaultPage
};
}
export default translate(connect(_mapStateToProps)(WelcomePageLists));

60
react/features/welcome/components/WelcomePageTabs.js Normal file
View File

@ -0,0 +1,60 @@
// @flow
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import React, { useCallback } from 'react';
import { useSelector } from 'react-redux';
import { CalendarList, isCalendarEnabled } from '../../calendar-sync';
import { screen } from '../../conference/components/native/routes';
import { RecentList } from '../../recent-list';
import {
calendarListTabBarOptions,
recentListTabBarOptions,
tabBarOptions
} from '../constants';
const WelcomePage = createBottomTabNavigator();
/**
* The type of the React {@code Component} props of {@link WelcomePageTabs}.
*/
type Props = {
/**
* Renders the lists disabled.
*/
disabled: boolean
};
const WelcomePageTabs = ({ disabled }: Props) => {
const RecentListScreen = useCallback(() =>
<RecentList disabled = { disabled } />
);
const calendarEnabled = useSelector(isCalendarEnabled);
const CalendarListScreen = useCallback(() =>
<CalendarList disabled = { disabled } />
);
return (
<WelcomePage.Navigator
tabBarOptions = { tabBarOptions }>
<WelcomePage.Screen
name = { screen.welcome.tabs.recent }
options = { recentListTabBarOptions }>
{ RecentListScreen }
</WelcomePage.Screen>
{
calendarEnabled
&& <WelcomePage.Screen
name = { screen.welcome.tabs.calendar }
options = { calendarListTabBarOptions }>
{ CalendarListScreen }
</WelcomePage.Screen>
}
</WelcomePage.Navigator>
);
};
export default WelcomePageTabs;

19
react/features/welcome/components/styles.js
View File

@ -5,7 +5,6 @@ import { StyleSheet } from 'react-native';
import { BoxModel } from '../../base/styles';
import BaseTheme from '../../base/ui/components/BaseTheme.native';
export const PLACEHOLDER_TEXT_COLOR = BaseTheme.palette.text01;
export const DRAWER_AVATAR_SIZE = 104;
@ -14,7 +13,7 @@ const DRAWER_HEADER_HEIGHT = 220;
export const SWITCH_THUMB_COLOR = BaseTheme.palette.action04;
export const SWITCH_UNDER_COLOR = 'rgba(0, 0, 0, 0.4)';
export const SWITCH_UNDER_COLOR = BaseTheme.palette.video01Disabled;
/**
* The default color of text on the WelcomePage.
@ -267,7 +266,21 @@ export default {
* The style of the top-level container of {@code WelcomePage}.
*/
welcomePage: {
backgroundColor: BaseTheme.palette.screen01Header,
backgroundColor: BaseTheme.palette.uiBackground,
flex: 1,
overflow: 'hidden'
},
recentList: {
backgroundColor: BaseTheme.palette.uiBackground,
flex: 1,
overflow: 'hidden'
},
recentListDisabled: {
backgroundColor: BaseTheme.palette.uiBackground,
flex: 1,
opacity: 0.8,
overflow: 'hidden'
}
};

39
react/features/welcome/constants.js Normal file
View File

@ -0,0 +1,39 @@
// @flow
import React from 'react';
import { IconEventNote, IconRestore } from '../base/icons';
import BaseTheme from '../base/ui/components/BaseTheme';
import TabIcon from './components/TabIcon';
export const INACTIVE_TAB_COLOR = BaseTheme.palette.tab01Disabled;
export const tabBarOptions = {
activeTintColor: BaseTheme.palette.icon01,
inactiveTintColor: INACTIVE_TAB_COLOR,
labelStyle: {
fontSize: 12
},
style: {
backgroundColor: BaseTheme.palette.screen01Header
}
};
export const recentListTabBarOptions = {
// $FlowExpectedError
tabBarIcon: ({ focused }) => (
<TabIcon
focused = { focused }
src = { IconRestore } />
)
};
export const calendarListTabBarOptions = {
// $FlowExpectedError
tabBarIcon: ({ focused }) => (
<TabIcon
focused = { focused }
src = { IconEventNote } />
)
};

36
react/features/welcome/reducer.js
View File

@ -1,36 +0,0 @@
// @flow
import { PersistenceRegistry, ReducerRegistry, set } from '../base/redux';
import {
SET_SIDEBAR_VISIBLE,
SET_WELCOME_PAGE_LISTS_DEFAULT_PAGE
} from './actionTypes';
/**
* The name of the redux store/state property which is the root of the redux
* state of the feature {@code welcome}.
*/
const STORE_NAME = 'features/welcome';
/**
* Sets up the persistence of the feature {@code welcome}.
*/
PersistenceRegistry.register(STORE_NAME, {
defaultPage: true
});
/**
* Reduces redux actions for the purposes of the feature {@code welcome}.
*/
ReducerRegistry.register(STORE_NAME, (state = {}, action) => {
switch (action.type) {
case SET_SIDEBAR_VISIBLE:
return set(state, 'sideBarVisible', action.visible);
case SET_WELCOME_PAGE_LISTS_DEFAULT_PAGE:
return set(state, 'defaultPage', action.pageIndex);
}
return state;
});