github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/src/views/shared/components/alertMessage/alertMessage.tsx (about)

     1  // Copyright 2020 The Cockroach Authors.
     2  //
     3  // Use of this software is governed by the Business Source License
     4  // included in the file licenses/BSL.txt.
     5  //
     6  // As of the Change Date specified in that file, in accordance with
     7  // the Business Source License, use of this software will be governed
     8  // by the Apache License, Version 2.0, included in the file
     9  // licenses/APL.txt.
    10  
    11  import React from "react";
    12  import { Alert, Icon } from "antd";
    13  import { Link } from "react-router-dom";
    14  
    15  import { AlertInfo, AlertLevel } from "src/redux/alerts";
    16  import "./alertMessage.styl";
    17  
    18  interface AlertMessageProps extends AlertInfo {
    19    autoClose: boolean;
    20    autoCloseTimeout: number;
    21    closable: boolean;
    22    dismiss(): void;
    23  }
    24  
    25  type AlertType = "success" | "info" | "warning" | "error";
    26  
    27  const mapAlertLevelToType = (alertLevel: AlertLevel): AlertType => {
    28    switch (alertLevel) {
    29      case AlertLevel.SUCCESS:
    30        return "success";
    31      case AlertLevel.NOTIFICATION:
    32        return "info";
    33      case AlertLevel.WARNING:
    34        return "warning";
    35      case AlertLevel.CRITICAL:
    36        return "error";
    37      default:
    38        return "info";
    39    }
    40  };
    41  
    42  const getIconType = (alertLevel: AlertLevel): string => {
    43    switch (alertLevel) {
    44      case AlertLevel.SUCCESS:
    45        return "check-circle";
    46      case AlertLevel.NOTIFICATION:
    47        return "info-circle";
    48      case AlertLevel.WARNING:
    49        return "warning";
    50      case AlertLevel.CRITICAL:
    51        return "close-circle";
    52      default:
    53        return "info-circle";
    54    }
    55  };
    56  
    57  export class AlertMessage extends React.Component<AlertMessageProps> {
    58    static defaultProps = {
    59      closable: true,
    60      autoCloseTimeout: 6000,
    61    };
    62  
    63    timeoutHandler: number;
    64  
    65    componentDidMount() {
    66      const { autoClose, dismiss, autoCloseTimeout } = this.props;
    67      if (autoClose) {
    68        this.timeoutHandler = window.setTimeout(dismiss, autoCloseTimeout);
    69      }
    70    }
    71  
    72    componentWillUnmount() {
    73      clearTimeout(this.timeoutHandler);
    74    }
    75  
    76    render() {
    77      const {
    78        level,
    79        dismiss,
    80        link,
    81        title,
    82        text,
    83        closable,
    84      } = this.props;
    85  
    86      let description: React.ReactNode = text;
    87  
    88      if (link) {
    89        description = <Link to={link} onClick={dismiss}>{text}</Link>;
    90      }
    91  
    92      const type = mapAlertLevelToType(level);
    93      const iconType = getIconType(level);
    94      return (
    95        <Alert
    96          className="alert-massage"
    97          message={title}
    98          description={description}
    99          showIcon
   100          icon={<Icon type={iconType} theme="filled" className="alert-massage__icon" />}
   101          closable={closable}
   102          onClose={dismiss}
   103          closeText={
   104            closable && (
   105              <div className="alert-massage__close-text">
   106                &times;
   107              </div>
   108            )
   109          }
   110          type={type} />
   111      );
   112    }
   113  }