Skip to content

Commit fedb909

Browse files
artalatartalat
committed
feat: Updated to react-native-paper@v4
BREAKING CHANGE: Bumped core library to V4
1 parent 7c33764 commit fedb909

File tree

8 files changed

+129
-255
lines changed

8 files changed

+129
-255
lines changed

‎package.json

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@
7272
"@react-native-community/slider": "3.0.0",
7373
"expo": "^38.0.0",
7474
"react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
75-
"react-native-paper": "^3.8.0",
75+
"react-native-paper": "^4.0.1",
7676
"tslib": "^2.0.0"
7777
},
7878
"devDependencies": {
@@ -95,11 +95,8 @@
9595
"@types/jest": "^26.0.8",
9696
"@types/react": "~16.9.41",
9797
"@types/react-dom": "^16.9.8",
98-
"@types/react-loadable": "^5.5.0",
9998
"@types/react-native": "~0.62.13",
10099
"@types/react-test-renderer": "^16.9.3",
101-
"@types/storybook__addon-info": "^4.1.0",
102-
"@types/storybook__addon-knobs": "^5.0.4",
103100
"babel-core": "^7.0.0-bridge.0",
104101
"babel-jest": "^26.2.2",
105102
"babel-loader": "^8.1.0",

‎src/components/Button/Button.tsx

Lines changed: 26 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,34 @@
11
import { ButtonProps, DynamicIcon, IconProps } from '@bluebase/components';
2-
import { ThemeConsumer, ThemeContextData } from '@bluebase/core';
32

43
import { Button as BButton } from 'react-native-paper';
54
import React from 'react';
5+
import { useTheme } from '@bluebase/core';
66

7-
export const Button = (props: ButtonProps) => (
8-
<ThemeConsumer>
9-
{({ theme }: ThemeContextData) => {
10-
const { children, color, title, variant, ...rest } = props;
11-
const rnpColor =
12-
color === 'primary' ||
13-
color === 'secondary' ||
14-
color === 'error' ||
15-
color === 'warning' ||
16-
color === 'success'
17-
? (theme.palette as any)[color].main
18-
: color;
7+
export const Button = (props: ButtonProps) => {
8+
const { theme } = useTheme();
9+
const { children, color, title, variant, ...rest } = props;
1910

20-
let icon;
11+
const rnpColor =
12+
color === 'primary' ||
13+
color === 'secondary' ||
14+
color === 'error' ||
15+
color === 'warning' ||
16+
color === 'success'
17+
? (theme.palette as any)[color].main
18+
: color;
2119

22-
if (props.icon) {
23-
const iconProps = props.icon;
24-
icon = ({ color: iColor, size }: IconProps) => (
25-
<DynamicIcon {...iconProps} color={iColor} size={size} />
26-
);
27-
}
20+
let icon;
2821

29-
return (
30-
<BButton {...rest} icon={icon} mode={variant} color={rnpColor as any}>
31-
{children || title}
32-
</BButton>
33-
);
34-
}}
35-
</ThemeConsumer>
36-
);
22+
if (props.icon) {
23+
const iconProps = props.icon;
24+
icon = ({ color: iColor, size }: IconProps) => (
25+
<DynamicIcon {...iconProps} color={iColor} size={size} />
26+
);
27+
}
28+
29+
return (
30+
<BButton {...rest} icon={icon} mode={variant} color={rnpColor as any}>
31+
{children || title}
32+
</BButton>
33+
);
34+
};

‎src/components/Divider/Divider.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
export { Divider } from 'react-native-paper';
1+
import { Divider as RNPDivider } from 'react-native-paper';
2+
3+
export const Divider: any = RNPDivider;

‎src/components/TablePagination/index.tsx

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,10 @@
11
import { TablePaginationDefaultProps, TablePaginationProps } from '@bluebase/components';
2+
23
import { DataTable } from 'react-native-paper';
34
import React from 'react';
45

56
export const TablePagination = (props: TablePaginationProps) => {
6-
return (
7-
<DataTable.Pagination
8-
onPageChange={props.onPageChange as any}
9-
page={props.page as any}
10-
style={props.style as any}
11-
{...props}
12-
>
13-
{props.children}
14-
</DataTable.Pagination>
15-
);
7+
return <DataTable.Pagination {...props}>{props.children}</DataTable.Pagination>;
168
};
179

1810
TablePagination.defaultProps = TablePaginationDefaultProps;

‎src/components/index.ts

Lines changed: 79 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,79 @@
1-
export * from './Avatar';
2-
export * from './Button';
3-
export * from './Card';
4-
export * from './CardContent';
5-
export * from './CardActions';
6-
export * from './CardCover';
7-
export * from './CardHeader';
8-
export * from './Checkbox';
9-
export * from './Dialog';
10-
export * from './DialogAction';
11-
export * from './DialogTitle';
12-
export * from './DialogContent';
13-
export * from './Divider';
14-
export * from './Drawer.Item';
15-
export * from './DrawerSection';
16-
export * from './FormControlLabel';
17-
export * from './FormHelperText';
18-
export * from './IconButton';
19-
export * from './List';
20-
export * from './ListAvatar';
21-
export * from './List.Icon';
22-
export * from './ListItem';
23-
export * from './List.Subheader';
24-
export * from './Radio';
25-
export * from './RadioGroup';
26-
export * from './Searchbar';
27-
export * from './Slider';
28-
export * from './Switch';
29-
export * from './TextInput';
30-
export * from './Table';
31-
export * from './TableBody';
32-
export * from './TableCell';
33-
export * from './TableRow';
34-
export * from './TablePagination';
35-
export * from './TableHead';
36-
export * from './TableTitle';
37-
export * from './Menu';
38-
export * from './Menu/MenuItem';
1+
import { Avatar } from './Avatar';
2+
import { Button } from './Button';
3+
import { Card } from './Card';
4+
import { CardActions } from './CardActions';
5+
import { CardContent } from './CardContent';
6+
import { CardCover } from './CardCover';
7+
import { CardHeader } from './CardHeader';
8+
import { Checkbox } from './Checkbox';
9+
import { Dialog } from './Dialog';
10+
import { DialogActions } from './DialogAction';
11+
import { DialogContent } from './DialogContent';
12+
import { DialogTitle } from './DialogTitle';
13+
import { Divider } from './Divider';
14+
import { DrawerItem } from './Drawer.Item';
15+
import { DrawerSection } from './DrawerSection';
16+
import { FormControlLabel } from './FormControlLabel';
17+
import { FormHelperText } from './FormHelperText';
18+
import { IconButton } from './IconButton';
19+
import { List } from './List';
20+
import { ListAvatar } from './ListAvatar';
21+
import { ListIcon } from './List.Icon';
22+
import { ListItem } from './ListItem';
23+
import { ListSubheader } from './List.Subheader';
24+
import { Menu } from './Menu';
25+
import { MenuItem } from './Menu/MenuItem';
26+
import { Radio } from './Radio';
27+
import { RadioGroup } from './RadioGroup';
28+
import { Searchbar } from './Searchbar';
29+
import { Slider } from './Slider';
30+
import { Switch } from './Switch';
31+
import { Table } from './Table';
32+
import { TableBody } from './TableBody';
33+
import { TableCell } from './TableCell';
34+
import { TableHead } from './TableHead';
35+
import { TablePagination } from './TablePagination';
36+
import { TableRow } from './TableRow';
37+
import { TableTitle } from './TableTitle';
38+
import { TextInput } from './TextInput';
39+
40+
export const components = {
41+
Avatar,
42+
Button,
43+
Card,
44+
CardActions,
45+
CardContent,
46+
CardCover,
47+
CardHeader,
48+
Checkbox,
49+
Dialog,
50+
DialogActions,
51+
DialogContent,
52+
DialogTitle,
53+
Divider,
54+
DrawerItem,
55+
DrawerSection,
56+
FormControlLabel,
57+
FormHelperText,
58+
IconButton,
59+
List,
60+
ListAvatar,
61+
ListIcon,
62+
ListItem,
63+
ListSubheader,
64+
Menu,
65+
MenuItem,
66+
Radio,
67+
RadioGroup,
68+
Searchbar,
69+
Slider,
70+
Switch,
71+
Table,
72+
TableBody,
73+
TableCell,
74+
TableHead,
75+
TablePagination,
76+
TableRow,
77+
TableTitle,
78+
TextInput,
79+
};

‎src/index.ts

Lines changed: 2 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,6 @@
1-
import {
2-
Avatar,
3-
Button,
4-
Card,
5-
CardActions,
6-
CardContent,
7-
CardCover,
8-
CardHeader,
9-
Checkbox,
10-
Dialog,
11-
DialogActions,
12-
DialogContent,
13-
DialogTitle,
14-
Divider,
15-
DrawerItem,
16-
DrawerSection,
17-
FormControlLabel,
18-
FormHelperText,
19-
IconButton,
20-
List,
21-
ListAvatar,
22-
ListIcon,
23-
ListItem,
24-
ListSubheader,
25-
Menu,
26-
MenuItem,
27-
Radio,
28-
RadioGroup,
29-
Searchbar,
30-
Slider,
31-
Switch,
32-
Table,
33-
TableBody,
34-
TableCell,
35-
TableHead,
36-
TablePagination,
37-
TableRow,
38-
TableTitle,
39-
TextInput,
40-
} from './components';
411
import { BlueBase, BootOptions, createPlugin } from '@bluebase/core';
422

3+
import { components } from './components';
434
import { withPortal } from './withPortal';
445
import { withReactNativePaper } from './withReactNativePaper';
456

@@ -49,46 +10,7 @@ export default createPlugin({
4910
name: 'React Native Paper',
5011
version: '1.0.0',
5112

52-
components: {
53-
Avatar,
54-
Button,
55-
Card,
56-
CardActions,
57-
CardContent,
58-
CardCover,
59-
CardHeader,
60-
Checkbox,
61-
Dialog,
62-
DialogActions,
63-
DialogContent,
64-
DialogTitle,
65-
Divider,
66-
DrawerItem,
67-
DrawerSection,
68-
FormControlLabel,
69-
FormHelperText,
70-
IconButton,
71-
List,
72-
ListAvatar,
73-
ListIcon,
74-
ListItem,
75-
ListSubheader,
76-
Menu,
77-
MenuItem,
78-
Radio,
79-
RadioGroup,
80-
Searchbar,
81-
Slider,
82-
Switch,
83-
Table,
84-
TableBody,
85-
TableCell,
86-
TableHead,
87-
TablePagination,
88-
TableRow,
89-
TableTitle,
90-
TextInput,
91-
},
13+
components,
9214

9315
filters: {
9416
'bluebase.boot.end': (bootOptions: BootOptions, _ctx: any, BB: BlueBase) => {

‎tests/setup.ts

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import 'jest-enzyme';
22
import 'react-native';
3+
34
import Adapter from 'enzyme-adapter-react-16';
45
import Enzyme from 'enzyme';
56

@@ -8,7 +9,9 @@ import Enzyme from 'enzyme';
89
*/
910
const { JSDOM } = require('jsdom');
1011

11-
const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
12+
const jsdom = new JSDOM('<!doctype html><html><body></body></html>', {
13+
url: 'http://localhost',
14+
});
1215
const { window } = jsdom;
1316

1417
function copyProps(src: any, target: any) {
@@ -19,9 +22,9 @@ function copyProps(src: any, target: any) {
1922
}
2023

2124
declare const global: {
22-
document: any,
23-
navigator: any,
24-
window: any,
25+
document: any;
26+
navigator: any;
27+
window: any;
2528
};
2629

2730
global.window = window;
@@ -52,9 +55,8 @@ console.error = (message: any) => {
5255
originalConsoleError(message);
5356
};
5457

55-
5658
jest.mock('expo', () => ({
5759
Font: {
58-
loadAsync: () => Promise.resolve()
59-
}
60-
}));
60+
loadAsync: () => Promise.resolve(),
61+
},
62+
}));

0 commit comments

Comments
 (0)