Merge pull request #2955 from StoDevX/header-section-module

Add new module: <InfoHeader/>

Author: rye

modules/info-header/index.js

@@ -0,0 +1,42 @@
+// @flow
+import * as React from 'react'
+import {View, Text, StyleSheet} from 'react-native'
+import * as c from '@frogpond/colors'
+
+const styles = StyleSheet.create({
+	content: {
+		backgroundColor: c.white,
+		borderWidth: StyleSheet.hairlineWidth,
+		borderTopColor: c.iosHeaderTopBorder,
+		borderBottomColor: c.iosHeaderBottomBorder,
+		marginBottom: 10,
+	},
+	title: {
+		fontSize: 16,
+		fontWeight: 'bold',
+		paddingTop: 15,
+		paddingHorizontal: 15,
+	},
+	message: {
+		fontSize: 14,
+		paddingTop: 5,
+		paddingBottom: 15,
+		paddingHorizontal: 15,
+	},
+})
+
+type Props = {
+	message: string,
+	title: string,
+}
+
+export class InfoHeader extends React.PureComponent<Props> {
+	render() {
+		return (
+			<View style={styles.content}>
+				<Text style={styles.title}>{this.props.title}</Text>
+				<Text style={styles.message}>{this.props.message}</Text>
+			</View>
+		)
+	}
+}

modules/info-header/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@frogpond/info-header",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "author": "",
+  "license": "ISC",
+  "scripts": {
+    "test": "jest"
+  },
+  "peerDependencies": {
+    "react": "^16.4.2",
+    "react-native": "^0.55.4"
+  },
+  "dependencies": {
+    "@frogpond/colors": "^1.0.0"
+  }
+}

source/views/building-hours/report/overview.js

@@ -5,9 +5,9 @@
  */
 
 import * as React from 'react'
-import {ScrollView, View, StyleSheet, Text} from 'react-native'
+import {ScrollView, View} from 'react-native'
 import moment from 'moment-timezone'
-import * as c from '@frogpond/colors'
+import {InfoHeader} from '@frogpond/info-header'
 import {
 	TableView,
 	Section,
@@ -26,28 +26,6 @@ import type {TopLevelViewPropsType} from '../../types'
 import {summarizeDays, formatBuildingTimes, blankSchedule} from '../lib'
 import {submitReport} from './submit'
 
-const styles = StyleSheet.create({
-	helpWrapper: {
-		backgroundColor: c.white,
-		borderWidth: StyleSheet.hairlineWidth,
-		borderTopColor: c.iosHeaderTopBorder,
-		borderBottomColor: c.iosHeaderBottomBorder,
-		marginBottom: 10,
-	},
-	helpTitle: {
-		fontSize: 16,
-		fontWeight: 'bold',
-		paddingTop: 15,
-		paddingHorizontal: 15,
-	},
-	helpDescription: {
-		fontSize: 14,
-		paddingTop: 5,
-		paddingBottom: 15,
-		paddingHorizontal: 15,
-	},
-})
-
 type Props = TopLevelViewPropsType & {
 	navigation: {state: {params: {initialBuilding: BuildingType}}},
 }
@@ -203,13 +181,10 @@ export class BuildingHoursProblemReportView extends React.PureComponent<
 
 		return (
 			<ScrollView>
-				<View style={styles.helpWrapper}>
-					<Text style={styles.helpTitle}>Thanks for spotting a problem!</Text>
-					<Text style={styles.helpDescription}>
-						If you could tell us what the new times are, we&rsquo;d greatly
-						appreciate it.
-					</Text>
-				</View>
+				<InfoHeader
+					message="If you could tell us what the new times are, we&rsquo;d greatly appreciate it."
+					title="Thanks for spotting a problem!"
+				/>
 
 				<TableView>
 					{schedules.map((s, i) => (

source/views/dictionary/report/editor.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react'
-import {ScrollView, View, Text, StyleSheet} from 'react-native'
+import {ScrollView} from 'react-native'
+import {InfoHeader} from '@frogpond/info-header'
 import {
 	TableView,
 	Section,
@@ -9,7 +10,6 @@ import {
 } from '@frogpond/tableview'
 import {submitReport} from './submit'
 import type {WordType} from '../types'
-import * as c from '@frogpond/colors'
 import type {TopLevelViewPropsType} from '../../types'
 
 type Props = TopLevelViewPropsType & {
@@ -65,13 +65,10 @@ export class DictionaryEditorView extends React.PureComponent<Props, State> {
 				keyboardDismissMode="on-drag"
 				keyboardShouldPersistTaps="always"
 			>
-				<View style={styles.helpWrapper}>
-					<Text style={styles.helpTitle}>Thanks for spotting a problem!</Text>
-					<Text style={styles.helpDescription}>
-						If you could tell us what the word and definition should be,
-						we&rsquo;d greatly appreciate it.
-					</Text>
-				</View>
+				<InfoHeader
+					message="If you could tell us what the word and definition should be, we&rsquo;d greatly appreciate it."
+					title="Thanks for spotting a problem!"
+				/>
 
 				<TableView>
 					<Section header="WORD">
@@ -120,25 +117,3 @@ const DefinitionCell = ({text, onChange = () => {}}: TextFieldProps) => (
 		value={text}
 	/>
 )
-
-const styles = StyleSheet.create({
-	helpWrapper: {
-		backgroundColor: c.white,
-		borderWidth: StyleSheet.hairlineWidth,
-		borderTopColor: c.iosHeaderTopBorder,
-		borderBottomColor: c.iosHeaderBottomBorder,
-		marginBottom: 10,
-	},
-	helpTitle: {
-		fontSize: 16,
-		fontWeight: 'bold',
-		paddingTop: 15,
-		paddingHorizontal: 15,
-	},
-	helpDescription: {
-		fontSize: 14,
-		paddingTop: 5,
-		paddingBottom: 15,
-		paddingHorizontal: 15,
-	},
-})