render()

in src/alert/alert.tsx [198:247]


  render() {
    const {
      type,
      inline,
      isClosing,
      isShaking,
      closeButtonClassName,
      showWithAnimation,
      className,
      'data-test': dataTest,
      theme,
    } = this.props;

    const classes = classNames(className, {
      [styles.alert]: true,
      [styles.animationOpen]: showWithAnimation,
      [styles.error]: type === 'error',
      [styles.alertInline]: inline,
      [styles.animationClosing]: isClosing,
      [styles.animationShaking]: isShaking,
    });

    const height = this.state.height;
    const style = height ? {marginBottom: -height} : undefined;

    return (
      <ThemeProvider
        theme={theme}
        className={classes}
        data-test={dataTests('alert', dataTest)}
        data-test-type={type}
        style={style}
        ref={this.storeAlertRef}
      >
        {this._getIcon()}
        {this._getCaption()}
        {this.props.closeable ? (
          <Button
            icon={closeIcon}
            className={classNames(styles.close, closeButtonClassName)}
            data-test='alert-close'
            aria-label='close alert'
            onClick={this.closeRequest}
          />
        ) : (
          ''
        )}
      </ThemeProvider>
    );
  }