diff --git a/modules/app-theme/index.js b/modules/app-theme/index.js index 3203978fcf..b56a98b6f7 100644 --- a/modules/app-theme/index.js +++ b/modules/app-theme/index.js @@ -1,5 +1,11 @@ // @flow +import {createTheming} from '@callstack/react-theme-provider' + +let {ThemeProvider, withTheme, useTheme} = createTheming() + +export {ThemeProvider, withTheme, useTheme} + export type AppTheme = { accent: string, androidListHeaderBackground: string, @@ -27,6 +33,7 @@ let theme: AppTheme export function setTheme(newTheme: AppTheme) { theme = newTheme + ;({ThemeProvider, withTheme, useTheme} = createTheming(newTheme)) } export function getTheme(): AppTheme { diff --git a/modules/button/index.js b/modules/button/index.js index 5c8f6a4076..c26fccbedc 100644 --- a/modules/button/index.js +++ b/modules/button/index.js @@ -6,7 +6,7 @@ import noop from 'lodash/noop' import {material, iOSUIKit} from 'react-native-typography' import * as c from '@frogpond/colors' import {type AppTheme} from '@frogpond/app-theme' -import {withTheme} from '@callstack/react-theme-provider' +import {useTheme} from '@frogpond/app-theme' const styles = StyleSheet.create({ button: { @@ -47,18 +47,18 @@ type Props = { buttonStyle?: any, textStyle?: any, mode?: 'default' | 'inverted', - theme: AppTheme, } -function Button({ +export function Button({ title = 'Push me!', onPress = noop, disabled = false, buttonStyle = null, textStyle = null, mode = 'default', - theme, }: Props) { + let theme: AppTheme = useTheme() + let background = mode === 'default' ? {backgroundColor: theme.buttonBackground} @@ -85,9 +85,3 @@ function Button({ ) } - -export const RawButton = Button - -const ThemedButton = withTheme(Button) - -export {ThemedButton as Button} diff --git a/modules/button/package.json b/modules/button/package.json index b4b75f590a..9809eea2d3 100644 --- a/modules/button/package.json +++ b/modules/button/package.json @@ -13,11 +13,11 @@ "react-native": "^0.60.0" }, "dependencies": { - "@callstack/react-theme-provider": "^1.0.3", + "@callstack/react-theme-provider": "^3.0.3", "@frogpond/app-theme": "^1.0.0", "@frogpond/colors": "^1.0.0", - "react-native-button": "^2.3.0", "lodash": "^4.17.15", + "react-native-button": "^2.3.0", "react-native-typography": "^1.3.0" } } diff --git a/modules/event-list/package.json b/modules/event-list/package.json index 22f263c33c..8bc11cdb4f 100644 --- a/modules/event-list/package.json +++ b/modules/event-list/package.json @@ -9,14 +9,14 @@ "test": "jest" }, "peerDependencies": { + "moment-timezone": "^0.5.21", "react": "^16.0.0", "react-native": "^0.60.0", "react-native-vector-icons": "^6.0.0", - "react-navigation": "^3.0.0", - "moment-timezone": "^0.5.21" + "react-navigation": "^3.0.0" }, "dependencies": { - "@callstack/react-theme-provider": "^1.0.3", + "@callstack/react-theme-provider": "^3.0.3", "@frogpond/add-to-device-calendar": "^1.0.0", "@frogpond/app-theme": "^1.0.0", "@frogpond/colors": "^1.0.0", diff --git a/modules/event-list/vertical-bar.js b/modules/event-list/vertical-bar.js index 5ed54f4f41..e77083c9f7 100644 --- a/modules/event-list/vertical-bar.js +++ b/modules/event-list/vertical-bar.js @@ -3,7 +3,7 @@ import * as React from 'react' import {StyleSheet, View, Platform} from 'react-native' import * as c from '@frogpond/colors' import {type AppTheme} from '@frogpond/app-theme' -import {withTheme} from '@callstack/react-theme-provider' +import {useTheme} from '@frogpond/app-theme' import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet' const dotBarStyles = StyleSheet.create({ @@ -24,17 +24,12 @@ const dotBarStyles = StyleSheet.create({ }, }) -type BaseProps = { +type Props = { style?: ViewStyleProp, } -type HocProps = { - theme: AppTheme, -} - -type Props = BaseProps & HocProps - -function DottedBar({style, theme}: Props) { +function DottedBar({style}: Props) { + let theme: AppTheme = useTheme() let background = {backgroundColor: theme.accent} return ( @@ -46,10 +41,6 @@ function DottedBar({style, theme}: Props) { ) } -const ThemedDottedBar: React.StatelessFunctionalComponent = (withTheme( - DottedBar, -): any) - const solidBarStyles = StyleSheet.create({ border: { width: 1.5, @@ -66,7 +57,7 @@ export function Bar(props: Object) { case 'ios': return case 'android': - return + return default: return } diff --git a/modules/filter/active-filter-button.js b/modules/filter/active-filter-button.js index 686cb74437..8b50c82f31 100644 --- a/modules/filter/active-filter-button.js +++ b/modules/filter/active-filter-button.js @@ -11,17 +11,18 @@ import { import Icon from 'react-native-vector-icons/Ionicons' import {white} from '@frogpond/colors' import {type AppTheme} from '@frogpond/app-theme' -import {withTheme} from '@callstack/react-theme-provider' +import {useTheme} from '@frogpond/app-theme' type Props = { filter: FilterType, label: string, onRemove: (filter: FilterType) => any, style?: any, - theme: AppTheme, } -function ActiveFilterButton({filter, label, onRemove, style, theme}: Props) { +export function ActiveFilterButton({filter, label, onRemove, style}: Props) { + let theme: AppTheme = useTheme() + let iconName = Platform.select({ ios: 'ios-close-circle', android: 'md-close-circle', @@ -42,12 +43,6 @@ function ActiveFilterButton({filter, label, onRemove, style, theme}: Props) { ) } -export const RawActiveFilterButton = ActiveFilterButton - -const ThemedActiveFilterButton = withTheme(ActiveFilterButton) - -export {ThemedActiveFilterButton as ActiveFilterButton} - const styles = StyleSheet.create({ badge: { alignItems: 'center', diff --git a/modules/filter/filter-toolbar-button.js b/modules/filter/filter-toolbar-button.js index 5cc2ecd332..d68992eb89 100644 --- a/modules/filter/filter-toolbar-button.js +++ b/modules/filter/filter-toolbar-button.js @@ -7,7 +7,7 @@ import {FilterPopover} from './filter-popover' import * as c from '@frogpond/colors' import {Touchable} from '@frogpond/touchable' import {type AppTheme} from '@frogpond/app-theme' -import {withTheme} from '@callstack/react-theme-provider' +import {withTheme} from '@frogpond/app-theme' const buttonStyles = StyleSheet.create({ button: { diff --git a/modules/filter/package.json b/modules/filter/package.json index f938b6ff76..30bae5e51f 100644 --- a/modules/filter/package.json +++ b/modules/filter/package.json @@ -11,17 +11,17 @@ "peerDependencies": { "react": "^16.0.0", "react-native": "^0.60.0", - "react-native-vector-icons": "^6.0.0", - "react-native-popover-view": "^1.0.7" + "react-native-popover-view": "^1.0.7", + "react-native-vector-icons": "^6.0.0" }, "dependencies": { - "@callstack/react-theme-provider": "^1.0.3", + "@callstack/react-theme-provider": "^3.0.3", "@frogpond/app-theme": "^1.0.0", "@frogpond/colors": "^1.0.0", + "@frogpond/layout": "^1.0.0", + "@frogpond/tableview": "^1.0.0", "@frogpond/touchable": "^1.0.0", "@frogpond/viewport": "^1.0.0", - "@frogpond/tableview": "^1.0.0", - "@frogpond/layout": "^1.0.0", "lodash": "^4.17.15" } } diff --git a/modules/food-menu/package.json b/modules/food-menu/package.json index ae63711834..ba07f452b6 100644 --- a/modules/food-menu/package.json +++ b/modules/food-menu/package.json @@ -9,15 +9,15 @@ "test": "jest" }, "peerDependencies": { + "moment": "^2.22.2", + "moment-timezone": "^0.5.21", "react": "^16.0.0", "react-native": "^0.60.0", "react-native-vector-icons": "^6.0.0", - "react-navigation": "^3.0.0", - "moment": "^2.22.2", - "moment-timezone": "^0.5.21" + "react-navigation": "^3.0.0" }, "dependencies": { - "@callstack/react-theme-provider": "^1.0.3", + "@callstack/react-theme-provider": "^3.0.3", "@frogpond/app-theme": "^1.0.0", "@frogpond/colors": "^1.0.0", "@frogpond/filter": "^1.0.0", @@ -26,8 +26,8 @@ "@frogpond/lists": "^1.0.0", "@frogpond/notice": "^1.0.0", "@frogpond/tableview": "^1.0.0", - "@frogpond/touchable": "^1.0.0", "@frogpond/toolbar": "^1.0.0", + "@frogpond/touchable": "^1.0.0", "lodash": "^4.17.15" } } diff --git a/modules/lists/list-section-header.js b/modules/lists/list-section-header.js index 03a09d0cbd..b9f2d142cb 100644 --- a/modules/lists/list-section-header.js +++ b/modules/lists/list-section-header.js @@ -3,7 +3,7 @@ import * as React from 'react' import {Platform, StyleSheet, Text, View} from 'react-native' import * as c from '@frogpond/colors' import {type AppTheme} from '@frogpond/app-theme' -import {withTheme} from '@callstack/react-theme-provider' +import {useTheme} from '@frogpond/app-theme' import type { ViewStyleProp, TextStyleProp, @@ -67,7 +67,7 @@ const styles = StyleSheet.create({ }, }) -type BaseProps = { +type Props = { title: string, bold?: boolean, titleStyle?: TextStyleProp, @@ -78,13 +78,7 @@ type BaseProps = { spacing?: {left?: number, right?: number}, } -type HocProps = { - theme: AppTheme, -} - -type Props = BaseProps & HocProps - -function ListSectionHeader(props: Props) { +export function ListSectionHeader(props: Props) { let { style, title, @@ -94,9 +88,10 @@ function ListSectionHeader(props: Props) { subtitleStyle, separator = ' — ', spacing: {left: leftSpacing = 15} = {}, - theme, } = props + let theme: AppTheme = useTheme() + let containerTheme = {paddingLeft: leftSpacing} let titleTheme = {} @@ -132,11 +127,3 @@ function ListSectionHeader(props: Props) { ) } - -export const RawListSectionHeader = ListSectionHeader - -const ThemedListSectionHeader: React.StatelessFunctionalComponent = (withTheme( - ListSectionHeader, -): any) - -export {ThemedListSectionHeader as ListSectionHeader} diff --git a/modules/lists/package.json b/modules/lists/package.json index c4ba562b8d..615237efa0 100644 --- a/modules/lists/package.json +++ b/modules/lists/package.json @@ -14,11 +14,11 @@ "react-native-vector-icons": "^6.0.0" }, "dependencies": { - "@callstack/react-theme-provider": "^1.0.3", + "@callstack/react-theme-provider": "^3.0.3", "@frogpond/app-theme": "^1.0.0", "@frogpond/colors": "^1.0.0", - "@frogpond/touchable": "^1.0.0", "@frogpond/separator": "^1.0.0", + "@frogpond/touchable": "^1.0.0", "lodash": "^4.17.15" } } diff --git a/modules/listview/package.json b/modules/listview/package.json index 31a74f090f..4d334bc255 100644 --- a/modules/listview/package.json +++ b/modules/listview/package.json @@ -13,11 +13,11 @@ "react-native": "^0.60.0" }, "dependencies": { - "@callstack/react-theme-provider": "^1.0.3", - "@hawkrives/react-native-alphabetlistview": "^1.0.0", + "@callstack/react-theme-provider": "^3.0.3", "@frogpond/app-theme": "^1.0.0", "@frogpond/colors": "^1.0.0", "@frogpond/searchbar": "^1.0.0", + "@hawkrives/react-native-alphabetlistview": "^1.0.0", "lodash": "^4.17.15" } } diff --git a/modules/markdown/package.json b/modules/markdown/package.json index e00871a94f..5d16a01491 100644 --- a/modules/markdown/package.json +++ b/modules/markdown/package.json @@ -14,13 +14,13 @@ "react-native": "^0.60.0" }, "dependencies": { - "@callstack/react-theme-provider": "^1.0.3", + "@callstack/react-theme-provider": "^3.0.3", "@frogpond/app-theme": "^1.0.0", "@frogpond/colors": "^1.0.0", "@frogpond/open-url": "^1.0.0", + "lodash": "^4.17.15", "react-markdown": "^2.5.1", - "react-native-typography": "^1.3.0", - "lodash": "^4.17.15" + "react-native-typography": "^1.3.0" }, "devDependencies": { "prop-types": "15.7.2" diff --git a/modules/tableview/cells/toggle.js b/modules/tableview/cells/toggle.js index 257d202488..42864a168e 100644 --- a/modules/tableview/cells/toggle.js +++ b/modules/tableview/cells/toggle.js @@ -3,19 +3,20 @@ import * as React from 'react' import {Switch} from 'react-native' import {Cell} from 'react-native-tableview-simple' import {type AppTheme} from '@frogpond/app-theme' -import {withTheme} from '@callstack/react-theme-provider' +import {useTheme} from '@frogpond/app-theme' type PropsType = { label: string, value: boolean, onChange: (val: boolean) => any, - theme: AppTheme, detail?: string, disabled?: boolean, } -function CellToggle(props: PropsType) { - let {value, onChange, label, detail, theme, disabled} = props +export function CellToggle(props: PropsType) { + let theme: AppTheme = useTheme() + + let {value, onChange, label, detail, disabled} = props let toggle = ( ) } - -export const RawCellToggle = CellToggle - -const ThemedCellToggle = withTheme(CellToggle) - -export {ThemedCellToggle as CellToggle} diff --git a/modules/toolbar/toolbar-button.js b/modules/toolbar/toolbar-button.js index 5f0d380798..8b4978c49d 100644 --- a/modules/toolbar/toolbar-button.js +++ b/modules/toolbar/toolbar-button.js @@ -4,7 +4,7 @@ import {StyleSheet, View, Text, Platform} from 'react-native' import {Icon, type Glyphs} from '@frogpond/icon' import * as c from '@frogpond/colors' import {type AppTheme} from '@frogpond/app-theme' -import {withTheme} from '@callstack/react-theme-provider' +import {useTheme} from '@frogpond/app-theme' const buttonStyles = StyleSheet.create({ button: { @@ -32,10 +32,11 @@ type ButtonPropsType = { iconName?: Glyphs, title: string, isActive: boolean, - theme: AppTheme, } -function ToolbarButton({title, iconName, isActive, theme}: ButtonPropsType) { +export function ToolbarButton({title, iconName, isActive}: ButtonPropsType) { + let theme: AppTheme = useTheme() + let activeButton = { backgroundColor: theme.toolbarButtonBackground, borderColor: theme.toolbarButtonBackground, @@ -64,9 +65,3 @@ function ToolbarButton({title, iconName, isActive, theme}: ButtonPropsType) { ) } - -export const RawToolbarButton = ToolbarButton - -const ThemedToolbarButton = withTheme(ToolbarButton) - -export {ThemedToolbarButton as ToolbarButton} diff --git a/package.json b/package.json index 4ce92ee0b7..f26175f658 100644 --- a/package.json +++ b/package.json @@ -91,7 +91,7 @@ ] }, "dependencies": { - "@callstack/react-theme-provider": "1.0.7", + "@callstack/react-theme-provider": "3.0.3", "@frogpond/titlecase": "1.0.0", "@hawkrives/react-native-alternate-icons": "0.4.7", "@mapbox/react-native-mapbox-gl": "6.1.3", diff --git a/source/app.js b/source/app.js index ea3febd77c..3683ed5f47 100644 --- a/source/app.js +++ b/source/app.js @@ -14,8 +14,7 @@ import {Provider as ReduxProvider} from 'react-redux' import {Provider as PaperProvider} from 'react-native-paper' import {makeStore, initRedux} from './redux' import * as navigation from './navigation' -import {ThemeProvider} from '@callstack/react-theme-provider' -import {getTheme} from '@frogpond/app-theme' +import {ThemeProvider} from '@frogpond/app-theme' const store = makeStore() initRedux(store) @@ -24,12 +23,10 @@ type Props = {} export default class App extends React.Component { render() { - let theme = getTheme() - return ( - +