pali112
/
workout-editor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Extract BaseBar component

This commit is contained in:
Rene Saarsoo 2020-11-23 05:23:35 +02:00
parent eea49adfee
commit df4a90338e
1 changed files with 16 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/Bar.tsx
View File

@ -1,9 +1,21 @@
import styled from "styled-components"; import styled from "styled-components";
import { ZoneType } from "zwiftout"; import { ZoneType } from "zwiftout";
export type BarProps = { type BaseBarProps = {
// Percentage of total workout length // Percentage of total workout length
durationPercentage: number; 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 // Percentage of maximum intensity in workout
intensityPercentage: number; intensityPercentage: number;
zone: ZoneType; zone: ZoneType;
@ -19,21 +31,13 @@ const zoneColorsMap: Record<ZoneType, string> = {
Z6: "#ff330c", Z6: "#ff330c",
}; };
export const Bar = styled.div<BarProps>` export const Bar = styled(BaseBar)<BarProps>`
display: inline-block;
border-radius: 10px; 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)}%; height: ${(props) => (props.zone === "free" ? 100 : props.intensityPercentage)}%;
background: ${(props) => zoneColorsMap[props.zone]}; background: ${(props) => zoneColorsMap[props.zone]};
transition: width 0.1s, height 0.1s, background-color 0.1s;
`; `;
export type RangeBarProps = { export type RangeBarProps = BaseBarProps & {
// Percentage of total workout length
durationPercentage: number;
// Percentage of maximum intensity in workout // Percentage of maximum intensity in workout
maxIntensityPercentage: number; maxIntensityPercentage: number;
// Percentage relative to `maxIntensityPercentage` // 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 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}%)`; const createDownPolygon = (middle: number) => `polygon(0% 0%, 0% 100%, 100% 100%, 100% ${middle}%)`;
export const RangeBar = styled.div<RangeBarProps>` export const RangeBar = styled(BaseBar)<RangeBarProps>`
display: inline-block;
border-bottom-left-radius: 10px; border-bottom-left-radius: 10px;
border-bottom-right-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}%; height: ${(props) => props.maxIntensityPercentage}%;
clip-path: ${({ direction, relativeMinIntensityPercentage }) => clip-path: ${({ direction, relativeMinIntensityPercentage }) =>
direction === "up" direction === "up"
@ -64,5 +63,4 @@ export const RangeBar = styled.div<RangeBarProps>`
${(props) => zoneColorsMap[props.startZone]}, ${(props) => zoneColorsMap[props.startZone]},
${(props) => zoneColorsMap[props.endZone]} ${(props) => zoneColorsMap[props.endZone]}
); );
transition: width 0.1s, height 0.1s, background-color 0.1s;
`; `;