Extract Header component

Three files use same header structure, so I extracted it to a component for DRY.
arqex · Sep 21, 2020 · 07866bc · 07866bc
1 parent d53beb6
commit 07866bc
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 33 deletions.
diff --git a/src/datetime/DaysView.js b/src/datetime/DaysView.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import Header from './Header';
 
 export default class DaysView extends React.Component {
 	static defaultProps = {
@@ -30,17 +31,14 @@ export default class DaysView extends React.Component {
 
 	renderNavigation( date, locale ) {
 		return (
-			<tr>
-				<th className="rdtPrev" onClick={ () => this.props.navigate( -1, 'months' ) }>
-					<span>‹</span>
-				</th>
-				<th className="rdtSwitch" onClick={ () => this.props.showView( 'months' ) } colSpan={5} data-value={ this.props.viewDate.month() }>
-					{ locale.months( date ) + ' ' + date.year() }
-				</th>
-				<th className="rdtNext" onClick={ () => this.props.navigate( 1, 'months' ) }>
-					<span>›</span>
-				</th>
-			</tr>
+			<Header
+				onClickPrev={ () => this.props.navigate( -1, 'months' ) }
+				onClickSwitch={ () => this.props.showView( 'months' ) }
+				onClickNext={ () => this.props.navigate( 1, 'months' ) }
+				switchContent={ locale.months( date ) + ' ' + date.year() }
+				switchColSpan={5}
+				switchProps={ { 'data-value': this.props.viewDate.month() } }
+			/>
 		);
 	}
 

diff --git a/src/datetime/Header.js b/src/datetime/Header.js
@@ -0,0 +1,17 @@
+import React from 'react';
+
+export default function Header( { onClickPrev, onClickSwitch, onClickNext, switchContent, switchColSpan, switchProps }) {
+	return (
+		<tr>
+			<th className="rdtPrev" onClick={ onClickPrev }>
+				<span>‹</span>
+			</th>
+			<th className="rdtSwitch" colSpan={ switchColSpan } onClick={ onClickSwitch } {...switchProps}>
+				{ switchContent }
+			</th>
+			<th className="rdtNext" onClick={ onClickNext }>
+				<span>›</span>
+			</th>
+		</tr>
+	);
+}
diff --git a/src/datetime/MonthsView.js b/src/datetime/MonthsView.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import Header from './Header';
 
 export default class MonthsView extends React.Component {
 	render() {
@@ -22,17 +23,13 @@ export default class MonthsView extends React.Component {
 		let year = this.props.viewDate.year();
 
 		return (
-			<tr>
-				<th className="rdtPrev" onClick={ () => this.props.navigate( -1, 'years' ) }>
-					<span>‹</span>
-				</th>
-				<th className="rdtSwitch" onClick={ () => this.props.showView( 'years' ) } colSpan="2" data-value={ year } >
-					{ year }
-				</th>
-				<th className="rdtNext" onClick={ () => this.props.navigate( 1, 'years' ) }>
-					<span>›</span>
-				</th>
-			</tr>
+			<Header
+				onClickPrev={ () => this.props.navigate( -1, 'years' ) }
+				onClickSwitch={ () => this.props.showView( 'years' ) }
+				onClickNext={ () => this.props.navigate( 1, 'years' ) }
+				switchContent={ year }
+				switchColSpan="2"
+			/>
 		);
 	}
 

diff --git a/src/datetime/YearsView.js b/src/datetime/YearsView.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import Header from './Header';
 
 export default class YearsView extends React.Component {
 	render() {
@@ -22,17 +23,12 @@ export default class YearsView extends React.Component {
 
 	renderHeader( viewYear ) {
 		return (
-			<tr>
-				<th className="rdtPrev" onClick={ () => this.props.navigate( -10, 'years' ) }>
-					<span>‹</span>
-				</th>
-				<th className="rdtSwitch" onClick={ () => this.props.showView( 'years' ) }>
-					{ `${viewYear}-${viewYear + 9}` }
-				</th>
-				<th className="rdtNext" onClick={ () => this.props.navigate( 10, 'years' ) }>
-					<span>›</span>
-				</th>
-			</tr>
+			<Header
+				onClickPrev={ () => this.props.navigate( -10, 'years' ) }
+				onClickSwitch={ () => this.props.showView( 'years' ) }
+				onClickNext={ () => this.props.navigate( 10, 'years' ) }
+				switchContent={ `${viewYear}-${viewYear + 9}` }
+			/>
 		);
 	}