From 437c2a44f197aafa2ec0168f02740e45c3cd055b Mon Sep 17 00:00:00 2001 From: Hawken Rives Date: Mon, 9 Sep 2019 08:41:04 -0500 Subject: [PATCH 1/3] update ordering of some module packages --- modules/button/package.json | 2 +- modules/event-list/package.json | 4 ++-- modules/filter/package.json | 8 ++++---- modules/food-menu/package.json | 8 ++++---- modules/lists/package.json | 2 +- modules/listview/package.json | 2 +- modules/markdown/package.json | 4 ++-- 7 files changed, 15 insertions(+), 15 deletions(-) diff --git a/modules/button/package.json b/modules/button/package.json index b4b75f590a..eeb197f495 100644 --- a/modules/button/package.json +++ b/modules/button/package.json @@ -16,8 +16,8 @@ "@callstack/react-theme-provider": "^1.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..54c3887a40 100644 --- a/modules/event-list/package.json +++ b/modules/event-list/package.json @@ -9,11 +9,11 @@ "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", diff --git a/modules/filter/package.json b/modules/filter/package.json index f938b6ff76..693f4566dc 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", "@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..e2f4c4f640 100644 --- a/modules/food-menu/package.json +++ b/modules/food-menu/package.json @@ -9,12 +9,12 @@ "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", @@ -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/package.json b/modules/lists/package.json index c4ba562b8d..e89523769b 100644 --- a/modules/lists/package.json +++ b/modules/lists/package.json @@ -17,8 +17,8 @@ "@callstack/react-theme-provider": "^1.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..0026d2eb98 100644 --- a/modules/listview/package.json +++ b/modules/listview/package.json @@ -14,10 +14,10 @@ }, "dependencies": { "@callstack/react-theme-provider": "^1.0.3", - "@hawkrives/react-native-alphabetlistview": "^1.0.0", "@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..ea5fa050b8 100644 --- a/modules/markdown/package.json +++ b/modules/markdown/package.json @@ -18,9 +18,9 @@ "@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" From c653cabe23759bdd4c30aa025a7b1d79ba7f0ed5 Mon Sep 17 00:00:00 2001 From: Hawken Rives Date: Mon, 9 Sep 2019 08:41:44 -0500 Subject: [PATCH 2/3] upgrade to react-theme-provider@3 --- modules/app-theme/index.js | 8 ++++ modules/button/index.js | 14 ++----- modules/button/package.json | 2 +- modules/event-list/package.json | 2 +- modules/event-list/vertical-bar.js | 19 +++------ modules/filter/active-filter-button.js | 13 ++---- modules/filter/filter-toolbar-button.js | 2 +- modules/filter/package.json | 2 +- modules/food-menu/package.json | 2 +- modules/lists/list-section-header.js | 23 +++-------- modules/lists/package.json | 2 +- modules/listview/package.json | 2 +- modules/markdown/package.json | 2 +- modules/tableview/cells/toggle.js | 15 +++---- modules/toolbar/toolbar-button.js | 13 ++---- package.json | 2 +- source/app.js | 7 +--- source/views/sis/components/recents-list.js | 2 +- source/views/streaming/radio/buttons.js | 2 +- source/views/streaming/radio/controller.js | 2 +- yarn.lock | 46 ++++++++++++++++++++- 21 files changed, 93 insertions(+), 89 deletions(-) diff --git a/modules/app-theme/index.js b/modules/app-theme/index.js index 3203978fcf..d208503fd1 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,8 @@ 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 eeb197f495..9809eea2d3 100644 --- a/modules/button/package.json +++ b/modules/button/package.json @@ -13,7 +13,7 @@ "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", "lodash": "^4.17.15", diff --git a/modules/event-list/package.json b/modules/event-list/package.json index 54c3887a40..8bc11cdb4f 100644 --- a/modules/event-list/package.json +++ b/modules/event-list/package.json @@ -16,7 +16,7 @@ "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 693f4566dc..30bae5e51f 100644 --- a/modules/filter/package.json +++ b/modules/filter/package.json @@ -15,7 +15,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", diff --git a/modules/food-menu/package.json b/modules/food-menu/package.json index e2f4c4f640..ba07f452b6 100644 --- a/modules/food-menu/package.json +++ b/modules/food-menu/package.json @@ -17,7 +17,7 @@ "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", 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 e89523769b..615237efa0 100644 --- a/modules/lists/package.json +++ b/modules/lists/package.json @@ -14,7 +14,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/separator": "^1.0.0", diff --git a/modules/listview/package.json b/modules/listview/package.json index 0026d2eb98..4d334bc255 100644 --- a/modules/listview/package.json +++ b/modules/listview/package.json @@ -13,7 +13,7 @@ "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/searchbar": "^1.0.0", diff --git a/modules/markdown/package.json b/modules/markdown/package.json index ea5fa050b8..5d16a01491 100644 --- a/modules/markdown/package.json +++ b/modules/markdown/package.json @@ -14,7 +14,7 @@ "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", 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 8c7f4ff617..e159f78133 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 ( - + Date: Wed, 11 Sep 2019 11:48:28 -0500 Subject: [PATCH 3/3] prettify --- modules/app-theme/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/modules/app-theme/index.js b/modules/app-theme/index.js index d208503fd1..b56a98b6f7 100644 --- a/modules/app-theme/index.js +++ b/modules/app-theme/index.js @@ -33,7 +33,6 @@ let theme: AppTheme export function setTheme(newTheme: AppTheme) { theme = newTheme - ;({ThemeProvider, withTheme, useTheme} = createTheming(newTheme)) }