Skip to content

Commit 07eb19b

Browse files
CalinteodorCalinteodor
authored
feat(rn,ui) introduce react-native-paper
1 parent d69d4dd commit 07eb19b

15 files changed

+685
-341
lines changed

‎babel.config.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
module.exports = {
2+
presets: [ 'module:metro-react-native-babel-preset' ],
3+
env: {
4+
production: {
5+
plugins: [ 'react-native-paper/babel' ]
6+
}
7+
},
8+
plugins: [ 'optional-require' ]
9+
};

‎package-lock.json

+319-130
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+5-2
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@
6060
"moment": "2.29.1",
6161
"moment-duration-format": "2.2.2",
6262
"olm": "https://packages.matrix.org/npm/olm/olm-3.2.1.tgz",
63+
"optional-require": "1.0.3",
6364
"pixelmatch": "5.1.0",
6465
"promise.allsettled": "1.0.4",
6566
"punycode": "2.1.1",
@@ -77,6 +78,7 @@
7778
"react-native-device-info": "8.0.0",
7879
"react-native-immersive": "2.0.0",
7980
"react-native-keep-awake": "4.0.0",
81+
"react-native-paper": "4.8.1",
8082
"react-native-sound": "github:jitsi/react-native-sound#3fe5480fce935e888d5089d94a191c7c7e3aa190",
8183
"react-native-splash-screen": "3.2.0",
8284
"react-native-svg": "12.1.0",
@@ -102,7 +104,7 @@
102104
"zxcvbn": "4.4.2"
103105
},
104106
"devDependencies": {
105-
"@babel/core": "7.5.5",
107+
"@babel/core": "7.9.0",
106108
"@babel/plugin-proposal-class-properties": "7.1.0",
107109
"@babel/plugin-proposal-export-default-from": "7.0.0",
108110
"@babel/plugin-proposal-export-namespace-from": "7.0.0",
@@ -112,9 +114,10 @@
112114
"@babel/preset-env": "7.1.0",
113115
"@babel/preset-flow": "7.0.0",
114116
"@babel/preset-react": "7.0.0",
115-
"@babel/runtime": "7.5.5",
117+
"@babel/runtime": "7.9.0",
116118
"babel-eslint": "10.0.1",
117119
"babel-loader": "8.0.4",
120+
"babel-plugin-optional-require": "0.3.1",
118121
"circular-dependency-plugin": "5.2.0",
119122
"clean-css-cli": "4.3.0",
120123
"css-loader": "3.6.0",

‎react/features/app/components/App.native.js

+7-4
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { getFeatureFlag } from '../../base/flags/functions';
1111
import { Platform } from '../../base/react';
1212
import { DimensionsDetector, clientResized } from '../../base/responsive-ui';
1313
import { updateSettings } from '../../base/settings';
14+
import JitsiThemePaperProvider from '../../base/ui/components/JitsiThemeProvider.native';
1415
import logger from '../logger';
1516

1617
import { AbstractApp } from './AbstractApp';
@@ -127,10 +128,12 @@ export class App extends AbstractApp {
127128
*/
128129
_createMainElement(component, props) {
129130
return (
130-
<DimensionsDetector
131-
onDimensionsChanged = { this._onDimensionsChanged }>
132-
{ super._createMainElement(component, props) }
133-
</DimensionsDetector>
131+
<JitsiThemePaperProvider>
132+
<DimensionsDetector
133+
onDimensionsChanged = { this._onDimensionsChanged }>
134+
{ super._createMainElement(component, props) }
135+
</DimensionsDetector>
136+
</JitsiThemePaperProvider>
134137
);
135138
}
136139

‎react/features/base/ui/Tokens.js

+11-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// @flow
22

3-
// Default color pallete
3+
// Default color palette
44
export const colors = {
55
error03: '#7A141F',
66
error04: '#A21B29',
@@ -157,6 +157,15 @@ export const colorMap = {
157157
// Disabled background for high-contrast input fields
158158
field02Disabled: 'surface06',
159159

160+
// Background for section header
161+
section01: 'surface10',
162+
163+
// Active color for section header
164+
section01Active: 'primary04',
165+
166+
// Inactive color for section header
167+
section01Inactive: 'surface01',
168+
160169
// Borders
161170
// Border for the input fields in hover state
162171
border01: 'surface08',
@@ -184,7 +193,7 @@ export const colorMap = {
184193
// Color for positive messages applied to icons & borders
185194
success01: 'success05',
186195

187-
// Color for positive messages applied tobackgrounds
196+
// Color for positive messages applied to backgrounds
188197
success02: 'success05',
189198

190199
// Color for warning messages applied to icons, borders & backgrounds

‎react/features/base/ui/components/BaseTheme.native.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// @flow
2+
3+
import { font, colors, colorMap, spacing, shape, typography } from '../Tokens';
4+
import { createNativeTheme } from '../functions.native';
5+
6+
export default createNativeTheme({
7+
font,
8+
colors,
9+
colorMap,
10+
spacing,
11+
shape,
12+
typography
13+
});

‎react/features/base/ui/components/JitsiThemeProvider.native.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// @flow
2+
3+
import * as React from 'react';
4+
import { Provider as PaperProvider } from 'react-native-paper';
5+
6+
import BaseTheme from './BaseTheme.native';
7+
8+
type Props = {
9+
10+
/**
11+
* The children of the component.
12+
*/
13+
children: React.ChildrenArray<any>
14+
}
15+
16+
/**
17+
* The theme provider for the mobile app.
18+
*
19+
* @param {Object} props - The props of the component.
20+
* @returns {React.ReactNode}
21+
*/
22+
export default function JitsiThemePaperProvider(props: Props) {
23+
return <PaperProvider theme = { BaseTheme }>{ props.children }</PaperProvider>;
24+
}

‎react/features/base/ui/functions.native.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// @flow
2+
3+
import { DefaultTheme } from 'react-native-paper';
4+
5+
import { createColorTokens } from './utils';
6+
7+
/**
8+
* Creates a React Native Paper theme based on local UI tokens.
9+
*
10+
* @param {Object} arg - The ui tokens.
11+
* @returns {Object}
12+
*/
13+
export function createNativeTheme({ font, colors, colorMap, shape, spacing, typography }: Object) {
14+
return {
15+
...DefaultTheme,
16+
palette: createColorTokens(colorMap, colors),
17+
shape,
18+
spacing,
19+
typography: {
20+
font,
21+
...typography
22+
}
23+
};
24+
}

‎react/features/base/ui/functions.js ‎react/features/base/ui/functions.web.js

+1-13
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,7 @@
22

33
import { createMuiTheme } from '@material-ui/core/styles';
44

5-
/**
6-
* Creates the color tokens based on the color theme and the association map.
7-
* If a key is not fonund in the association map it defaults to the current value.
8-
*
9-
* @param {Object} colorMap - A map between the token name and the actual color value.
10-
* @param {Object} colors - An object containing all the theme colors.
11-
* @returns {Object}
12-
*/
13-
function createColorTokens(colorMap: Object, colors: Object): Object {
14-
return Object.entries(colorMap)
15-
.reduce((result, [ token, value ]) =>
16-
Object.assign(result, { [token]: colors[value] || value }), {});
17-
}
5+
import { createColorTokens } from './utils';
186

197
/**
208
* Creates a MUI theme based on local UI tokens.

‎react/features/base/ui/utils.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// @flow
2+
3+
/**
4+
* Creates the color tokens based on the color theme and the association map.
5+
* If a key is not found in the association map it defaults to the current value.
6+
*
7+
* @param {Object} colorMap - A map between the token name and the actual color value.
8+
* @param {Object} colors - An object containing all the theme colors.
9+
* @returns {Object}
10+
*/
11+
export function createColorTokens(colorMap: Object, colors: Object): Object {
12+
return Object.entries(colorMap)
13+
.reduce((result, [ token, value ]) =>
14+
Object.assign(result, { [token]: colors[value] || value }), {});
15+
}

‎react/features/settings/components/native/FormSectionAccordion.js

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
// @flow
2+
3+
import React, { useState } from 'react';
4+
import { List } from 'react-native-paper';
5+
6+
import { translate } from '../../../base/i18n';
7+
import { Icon, IconArrowDown, IconArrowUp } from '../../../base/icons';
8+
9+
import styles from './styles';
10+
11+
/**
12+
* The type of the React {@code Component} props of {@link FormSectionAccordion}
13+
*/
14+
type Props = {
15+
16+
/**
17+
* Is the section an accordion or not.
18+
*/
19+
accordion: boolean,
20+
21+
/**
22+
* The children to be displayed within this Link.
23+
*/
24+
children: React$Node,
25+
26+
/**
27+
* Whether the accordion is expandable.
28+
*/
29+
expandable: boolean,
30+
31+
/**
32+
* The i18n key of the text label of the section.
33+
*/
34+
label: string,
35+
36+
/**
37+
* An external style object passed to the component.
38+
*/
39+
style: Object,
40+
41+
/**
42+
* Invoked to obtain translated strings.
43+
*/
44+
t: Function
45+
}
46+
47+
/**
48+
* Section accordion on settings form.
49+
*
50+
* @returns {React$Element<any>}
51+
*/
52+
function FormSectionAccordion({ accordion, children, expandable, label, style, t }: Props) {
53+
const [ expandSection, setExpandSection ] = useState(false);
54+
55+
/**
56+
* Press handler for expanding form section.
57+
*
58+
* @returns {void}
59+
*/
60+
function onPress() {
61+
setExpandSection(!expandSection);
62+
}
63+
64+
return (
65+
<List.Accordion
66+
expanded = { expandSection || !expandable }
67+
onPress = { onPress }
68+
/* eslint-disable-next-line react/jsx-no-bind */
69+
right = { props =>
70+
accordion && <Icon
71+
{ ...props }
72+
src = { expandSection ? IconArrowUp : IconArrowDown }
73+
style = { expandSection ? styles.sectionOpen : styles.sectionClose } /> }
74+
style = { [
75+
styles.formSectionTitle,
76+
style
77+
] }
78+
title = { t(label) }
79+
titleStyle = {
80+
expandSection || !expandable
81+
? styles.formSectionTitleActive : styles.formSectionTitleInActive }>
82+
{ children }
83+
</List.Accordion>
84+
);
85+
}
86+
87+
export default translate(FormSectionAccordion);

‎react/features/settings/components/native/FormSectionHeader.js

-60
This file was deleted.

0 commit comments

Comments
 (0)