Children/Parent Rendering Responsibilities
Hi everyone! I am using React to make a timeline applet that renders some values happening over time
I have a Timeline parent, then one Row component for each entry, and each row has some Interval components representing time intervals. The parent stores the timeline information in seconds, then I calculate the px equivalents and place everything on screen. What I would like some feedback on is - Who should be responsible for determining the position/width of these rectangles? - What are the "best practices" for unit conversion? Should I convert everything into px as soon as possible or do it at the last moment? FYI: The Timeline supports drag/drop functionality so all design choices should be aimed towards that as well. Solution A: Handle the seconds_to_pixels conversion in Timeline, and pass
I have a Timeline parent, then one Row component for each entry, and each row has some Interval components representing time intervals. The parent stores the timeline information in seconds, then I calculate the px equivalents and place everything on screen. What I would like some feedback on is - Who should be responsible for determining the position/width of these rectangles? - What are the "best practices" for unit conversion? Should I convert everything into px as soon as possible or do it at the last moment? FYI: The Timeline supports drag/drop functionality so all design choices should be aimed towards that as well. Solution A: Handle the seconds_to_pixels conversion in Timeline, and pass
startPx
and lengthPx
to each Interval
Solution B: Pass startSeconds
, lengthSeconds
to each Interval, have them perform the conversion and then set the {left, width}
independently from one another
Solution C: Avoid using position: absolute
altogether and have the Rows be flex
rows containing Intervals padded by the parent
Or something else that I haven't even thought about?
Thanks in advance!1 Reply
(I also understand that some of the decisions are very project specific and based on other things as well, but I would like to hear your thoughts and brainstorm a bit regardless!)