Surface Class — react Architecture

Source Code

packages/react-art/src/ReactART.js lines 73–145

class Surface extends React.Component {
  componentDidMount() {
    const {height, width} = this.props;

    this._surface = Mode.Surface(+width, +height, this._tagRef);

    this._mountNode = createContainer(
      this._surface,
      disableLegacyMode ? ConcurrentRoot : LegacyRoot,
      null,
      false,
      false,
      '',
      defaultOnUncaughtError,
      defaultOnCaughtError,
      defaultOnRecoverableError,
      defaultOnDefaultTransitionIndicator,
      null,
    );
    // We synchronously flush updates coming from above so that they commit together
    // and so that refs resolve before the parent life cycles.
    updateContainerSync(this.props.children, this._mountNode, this);
    flushSyncWork();
  }

  componentDidUpdate(prevProps, prevState) {
    const props = this.props;

    if (props.height !== prevProps.height || props.width !== prevProps.width) {
      this._surface.resize(+props.width, +props.height);
    }

    // We synchronously flush updates coming from above so that they commit together
    // and so that refs resolve before the parent life cycles.
    updateContainerSync(this.props.children, this._mountNode, this);
    flushSyncWork();

    if (this._surface.render) {
      this._surface.render();
    }
  }

  componentWillUnmount() {
    // We synchronously flush updates coming from above so that they commit together
    // and so that refs resolve before the parent life cycles.
    updateContainerSync(null, this._mountNode, this);
    flushSyncWork();
  }

  render() {
    // This is going to be a placeholder because we don't know what it will
    // actually resolve to because ART may render canvas, vml or svg tags here.
    // We only allow a subset of properties since others might conflict with
    // ART's properties.
    const props = this.props;

    // TODO: ART's Canvas Mode overrides surface title and cursor
    const Tag = Mode.Surface.tagName;

    return (
      <Tag
        ref={ref => (this._tagRef = ref)}
        accessKey={props.accessKey}
        className={props.className}
        draggable={props.draggable}
        role={props.role}
        style={props.style}
        tabIndex={props.tabIndex}
        title={props.title}
      />
    );
  }
}