Code review fixes
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
22af99d7ff
commit
4b3829894a
|
@ -12,7 +12,6 @@
|
||||||
|
|
||||||
.timelineSections {
|
.timelineSections {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
|
|
|
@ -9,8 +9,6 @@ interface TimelineData {
|
||||||
|
|
||||||
interface TimelineProps {
|
interface TimelineProps {
|
||||||
data: TimelineData[];
|
data: TimelineData[];
|
||||||
/** Width of the entire timeline, in pixels. */
|
|
||||||
width: number;
|
|
||||||
/** Whether the time is transformed to uppercase. */
|
/** Whether the time is transformed to uppercase. */
|
||||||
isTimeUppercase?: boolean;
|
isTimeUppercase?: boolean;
|
||||||
/** Width of the middle timeline line, in pixels */
|
/** Width of the middle timeline line, in pixels */
|
||||||
|
@ -30,7 +28,6 @@ interface TimelineProps {
|
||||||
|
|
||||||
export default function Timeline({
|
export default function Timeline({
|
||||||
data,
|
data,
|
||||||
width,
|
|
||||||
isTimeUppercase = true,
|
isTimeUppercase = true,
|
||||||
lineWidth = 5,
|
lineWidth = 5,
|
||||||
outerCircleWidth = 30,
|
outerCircleWidth = 30,
|
||||||
|
@ -40,17 +37,9 @@ export default function Timeline({
|
||||||
gap = 50,
|
gap = 50,
|
||||||
className,
|
className,
|
||||||
}: TimelineProps) {
|
}: TimelineProps) {
|
||||||
const largerMiddleElemeent =
|
const largerMiddleElement =
|
||||||
outerCircleWidth > lineWidth ? outerCircleWidth : lineWidth;
|
outerCircleWidth > lineWidth ? outerCircleWidth : lineWidth;
|
||||||
const requestedWidth =
|
const width = timeWidth + gap + largerMiddleElement + gap + textWidth;
|
||||||
timeWidth + gap + largerMiddleElemeent + gap + textWidth;
|
|
||||||
if (requestedWidth > width) {
|
|
||||||
throw new Error(
|
|
||||||
`<Timeline /> - timeWidth + gap + ${
|
|
||||||
outerCircleWidth > lineWidth ? "outerCircleWidth" : "lineWidth"
|
|
||||||
} + gap + textWidth (${timeWidth} + ${gap} + ${largerMiddleElemeent} + ${gap} + ${textWidth} = ${requestedWidth}) is larger than width (${width})`
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (innerCircleWidth > outerCircleWidth) {
|
if (innerCircleWidth > outerCircleWidth) {
|
||||||
throw new Error(
|
throw new Error(
|
||||||
`<Timeline /> - innerCircleWidth (${innerCircleWidth}) is larger than outerCircleWidth (${outerCircleWidth})`
|
`<Timeline /> - innerCircleWidth (${innerCircleWidth}) is larger than outerCircleWidth (${outerCircleWidth})`
|
||||||
|
|
|
@ -68,7 +68,7 @@ export default function Home() {
|
||||||
<h2>
|
<h2>
|
||||||
<code>{"<Timeline />"}</code>
|
<code>{"<Timeline />"}</code>
|
||||||
</h2>
|
</h2>
|
||||||
<Timeline data={mockTimelineData} width={800} />
|
<Timeline data={mockTimelineData} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue