Adding dot grid to ReCalendar itinerary pages

itinerary.jsx

import { StyleSheet, Text, View } from '@react-pdf/renderer';
import PropTypes from 'prop-types';
import React from 'react';

import { ITINERARY_ITEM, ITINERARY_LINES } from 'configuration-form/itinerary';

class Itinerary extends React.PureComponent {
	styles = StyleSheet.create( {
		line: {
			borderBottom: '1 solid #AAA',
			fontSize: 12,
			fontWeight: 'bold',
			height: 20,
			minHeight: 20,
			padding: '2 0 0 5',
		},
		dottedLine: {
			display: 'flex',
			flexDirection: 'row',
			justifyContent: 'center',
		},
		dottedLineText: {
			fontSize: 12,
			fontWeight: 'bold',
			height: 18,
			minHeight: 18,
			padding: '2 0 0 5',
		},
		dot: {
			width: 2,
			height: 2,
			backgroundColor: '#AAA',
			borderRadius: '50%',
			marginHorizontal: 9,
		},
	} );

	renderItineraryItem = ( { type, value }, index ) => {
		switch ( type ) {
			case ITINERARY_ITEM:
				return this.renderGridItem( value, index );

			case ITINERARY_LINES:
			default:
				return this.renderGridLines( value );
		}
	};

	renderItem( text, index ) {
		return (
			<Text key={ index } style={ this.styles.line }>
				{text}
			</Text>
		);
	}

	renderLines( count ) {
		const lines = [];
		for ( let i = 0; i < count; i++ ) {
			lines.push( <Text key={ i } style={ this.styles.line }></Text> );
		}

		return lines;
	}

	renderDots( count ) {
		const dots = [];
		for ( let i = 0; i < count; i++ ) {
			dots.push( <View key={ i } style={ this.styles.dot }></View> );
		}

		return dots;
	}

	renderDotLine() {
		return (
			<View style={ this.styles.dottedLine }>
				{this.renderDots( 21 )}
			</View>
		);
	}

	renderGridItem( text, index ) {
		return (
			<>
				<Text key={ index } style={ this.styles.dottedLineText }>
					{text}
				</Text>
				{this.renderDotLine()}
			</>
		);
	}

	renderGridLine() {
		return (
			<>
				<Text style={ this.styles.dottedLineText }></Text>
				{this.renderDotLine()}
			</>
		);
	}

	renderGridLines( count ) {
		const lines = [];
		for ( let i = 0; i < count; i++ ) {
			lines.push( this.renderGridLine() );
		}

		return lines;
	}

	render() {
		return <>{this.props.items.map( this.renderItineraryItem )}</>;
	}
}

Itinerary.propTypes = {
	items: PropTypes.array.isRequired,
};

export default Itinerary;