From df4a90338e5366de912ba7cb6382258ceb2a393e Mon Sep 17 00:00:00 2001
From: Rene Saarsoo <nene@triin.net>
Date: Mon, 23 Nov 2020 05:23:35 +0200
Subject: [PATCH] Extract BaseBar component

---
 src/components/Bar.tsx | 34 ++++++++++++++++------------------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/src/components/Bar.tsx b/src/components/Bar.tsx
index 396fe7f..245f364 100644
--- a/src/components/Bar.tsx
+++ b/src/components/Bar.tsx
@@ -1,9 +1,21 @@
 import styled from "styled-components";
 import { ZoneType } from "zwiftout";
 
-export type BarProps = {
+type BaseBarProps = {
   // Percentage of total workout length
   durationPercentage: number;
+};
+
+const BaseBar = styled.div<BaseBarProps>`
+  display: inline-block;
+  vertical-align: bottom;
+  margin-right: 0.1%;
+  /* exclude 0.1% margin from bar width */
+  width: ${(props) => props.durationPercentage - 0.1}%;
+  transition: width 0.1s, height 0.1s, background-color 0.1s;
+`;
+
+export type BarProps = BaseBarProps & {
   // Percentage of maximum intensity in workout
   intensityPercentage: number;
   zone: ZoneType;
@@ -19,21 +31,13 @@ const zoneColorsMap: Record<ZoneType, string> = {
   Z6: "#ff330c",
 };
 
-export const Bar = styled.div<BarProps>`
-  display: inline-block;
+export const Bar = styled(BaseBar)<BarProps>`
   border-radius: 10px;
-  vertical-align: bottom;
-  margin-right: 0.1%;
-  /* exclude 0.1% margin from bar width */
-  width: ${(props) => props.durationPercentage - 0.1}%;
   height: ${(props) => (props.zone === "free" ? 100 : props.intensityPercentage)}%;
   background: ${(props) => zoneColorsMap[props.zone]};
-  transition: width 0.1s, height 0.1s, background-color 0.1s;
 `;
 
-export type RangeBarProps = {
-  // Percentage of total workout length
-  durationPercentage: number;
+export type RangeBarProps = BaseBarProps & {
   // Percentage of maximum intensity in workout
   maxIntensityPercentage: number;
   // Percentage relative to `maxIntensityPercentage`
@@ -46,14 +50,9 @@ export type RangeBarProps = {
 const createUpPolygon = (middle: number) => `polygon(0% 100%, 100% 100%, 100% 0%, 0% ${middle}%)`;
 const createDownPolygon = (middle: number) => `polygon(0% 0%, 0% 100%, 100% 100%, 100% ${middle}%)`;
 
-export const RangeBar = styled.div<RangeBarProps>`
-  display: inline-block;
+export const RangeBar = styled(BaseBar)<RangeBarProps>`
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
-  vertical-align: bottom;
-  margin-right: 0.1%;
-  /* exclude 0.1% margin from bar width */
-  width: ${(props) => props.durationPercentage - 0.1}%;
   height: ${(props) => props.maxIntensityPercentage}%;
   clip-path: ${({ direction, relativeMinIntensityPercentage }) =>
     direction === "up"
@@ -64,5 +63,4 @@ export const RangeBar = styled.div<RangeBarProps>`
     ${(props) => zoneColorsMap[props.startZone]},
     ${(props) => zoneColorsMap[props.endZone]}
   );
-  transition: width 0.1s, height 0.1s, background-color 0.1s;
 `;