Method render

tfjs-vis/src/components/surface.tsx:57–115

()

  }

  render() {
    const { name, visible, styles } = this.props;
    const finalStyles = {
      ...SurfaceComponent.defaultStyles,
      ...styles,
    };

    const { width, height, } = finalStyles;
    let { maxHeight, maxWidth, } = finalStyles;
    maxHeight = height === SurfaceComponent.defaultStyles.height ?
      maxHeight : height;
    maxWidth = width === SurfaceComponent.defaultStyles.width ?
      maxWidth : width;

    const surfaceStyle = css({
      display: visible ? 'block' : 'none',
      backgroundColor: 'white',
      marginTop: '10px',
      marginBottom: '10px',
      boxShadow: '0 0 6px -3px #777',
      padding: '10px !important',
      height,
      width,
      maxHeight,
      maxWidth,
      overflow: 'auto',
    });

    const labelStyle = css({
      backgroundColor: 'white',
      boxSizing: 'border-box',
      borderBottom: '1px solid #357EDD',
      lineHeight: '2em',
      marginBottom: '20px',
      fontWeight: '600',
      textAlign: 'center',
    });

    const drawAreaStyle = css({
      boxSizing: 'border-box',
    });

    return (
      <div
        className={`${surfaceStyle} tf-surface`}
        ref={(r) => this.container = r}
        data-visible={visible}
      >
        <div className={`${labelStyle} tf-label`} ref={(r) => this.label = r}>
          {name}
        </div>

        <div
          className={`${drawAreaStyle} tf-draw-area`}
          ref={(r) => this.drawArea = r}
        />
      </div>
    );