Extract ViewNavigation component

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

Hide file tree

Showing 4 changed files with 45 additions and 37 deletions.
diff --git a/src/datetime/DaysView.js b/src/datetime/DaysView.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import ViewNavigation from './ViewNavigation';
 
 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>
+			<ViewNavigation
+				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/MonthsView.js b/src/datetime/MonthsView.js
@@ -1,12 +1,13 @@
 import React from 'react';
+import ViewNavigation from './ViewNavigation';
 
 export default class MonthsView extends React.Component {
 	render() {
 		return (
 			<div className="rdtMonths">
 				<table>
 					<thead>
-						{ this.renderHeader() }
+						{ this.renderNavigation() }
 					</thead>
 				</table>
 				<table>
@@ -18,21 +19,17 @@ export default class MonthsView extends React.Component {
 		);
 	}
 
-	renderHeader() {
+	renderNavigation() {
 		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>
+			<ViewNavigation
+				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/ViewNavigation.js b/src/datetime/ViewNavigation.js
@@ -0,0 +1,17 @@
+import React from 'react';
+
+export default function ViewNavigation( { 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/YearsView.js b/src/datetime/YearsView.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import ViewNavigation from './ViewNavigation';
 
 export default class YearsView extends React.Component {
 	render() {
@@ -8,7 +9,7 @@ export default class YearsView extends React.Component {
 			<div className="rdtYears">
 				<table>
 					<thead>
-						{ this.renderHeader( viewYear ) }
+						{ this.renderNavigation( viewYear ) }
 					</thead>
 				</table>
 				<table>
@@ -20,19 +21,14 @@ export default class YearsView extends React.Component {
 		);
 	}
 
-	renderHeader( viewYear ) {
+	renderNavigation( 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>
+			<ViewNavigation
+				onClickPrev={ () => this.props.navigate( -10, 'years' ) }
+				onClickSwitch={ () => this.props.showView( 'years' ) }
+				onClickNext={ () => this.props.navigate( 10, 'years' ) }
+				switchContent={ `${viewYear}-${viewYear + 9}` }
+			/>
 		);
 	}