Resizing without too much logic inside componentDidMount

[cosminnicula]

componentDidMount is an escape hatch that shouldn't be abused; more particular: the resizing logic inside the SliderTrack, SliderTicks and the Slider.

The only reason for doing all the resize work here is because the clientHeight / clientWidth and bottom / left properties are calculated only after a first paint on the screen.

This can be done more cleaner by separating the logic that retrieves these value from the logic that actually calculates the new dimensions. In other words, componentDidUpdate wouldn't contain any resize logic, but rather something like:

this.setState({
  elementClientHeight: element.clientHeight, //or clientWidth
  elementBottom: element.bottom //or left
});

After that you would simply rely on the functions inside SliderModel / SliderUtil, without having to instantiate a new SliderModel with the underlying DOM elements like it’s happening now - e.g. wrapper.getElementsByClassName(styles['slider-track'])[0]. So the SliderModel / SliderUtil would contain only pure functions without any side effects:

render () {
  const trackSize = SliderModel.getTrackSize(elementClientHeight or elementClientWidth, elementBottom or elementLeft); //can return something like {width: ‘123px’} or {height: ‘123px’} or something smarter that merges all these properties and values
  …
  return (
    <div className = {wrapperClasses} style = { Object.assign(this.props.style, trackSize) }>
    …
    </div>
  );
}

This would make the code more declarative and easy to follow.