render method

@override dynamic render()

Examines props and state and returns a ReactNode.

This method is required for class components.

The function should be pure, meaning that it should not modify component state, it returns the same result each time it is invoked, and it does not directly interact with browser / DOM apis.

If you need to interact with the browser / DOM apis, perform your work in componentDidMount or the other lifecycle methods instead. Keeping render pure makes components easier to think about.

See: legacy.reactjs.org/docs/react-component.html#render

Implementation

@override
render() {
  final expandSensor = (Dom.div()
    ..className = 'resize-sensor-expand'
    ..onScroll = _handleSensorScroll
    ..style = props.shrink! ? shrinkBaseStyle : baseStyle
    ..ref = _expandSensorRef
  )(
    (Dom.div()..style = expandSensorChildStyle)()
  );

  final collapseSensor = (Dom.div()
    ..className = 'resize-sensor-collapse'
    ..onScroll = _handleSensorScroll
    ..style = props.shrink! ? shrinkBaseStyle : baseStyle
    ..ref = _collapseSensorRef
  )(
    (Dom.div()..style = collapseSensorChildStyle)()
  );

  final resizeSensor = (Dom.div()
    ..className = 'resize-sensor'
    ..style = props.shrink! ? shrinkBaseStyle : baseStyle
    ..key = 'resizeSensor'
  )(expandSensor, collapseSensor);

  var wrapperStyles = defaultWrapperStyles;
  if (props.isFlexChild!) {
    wrapperStyles = wrapperStylesFlexChild;
  } else if (props.isFlexContainer!) {
    wrapperStyles = wrapperStylesFlexContainer;
  }

  return (Dom.div()
    ..modifyProps(addUnconsumedDomProps)
    ..className = forwardingClassNameBuilder().toClassName()
    ..style = {
      ...wrapperStyles,
      ...newStyleFromProps(props)
    }
  )(
    props.children,
    resizeSensor
  );
}