antd#notification TypeScript Examples

useFileDownloadHandle = () => {
  useEffect(() => {
    ipcRenderer.on('file-download-reply', (_, errMessage?: string) => {
      if (errMessage) {
        message.error(errMessage);
      } else {
        message.success('下载成功');
      }
    });
    ipcRenderer.on('file-download-progress', (_, res: { name: string; progress: number; key: string }) => {
      const percent = Math.floor(res.progress * 100);
      const isFinish = percent === 100;
      notification.open({
        type: isFinish ? 'success' : 'info',
        message: isFinish ? '下载完成' : `正在下载${res.name}`,
        description: <Progress percent={percent} />,
        key: res.key,
        duration: isFinish ? 1.5 : null
      });
    });
  }, []);
}

errorHandler = (error: { response: Response }): Response => {
  const { response } = error;
  if (response && response.status) {
    const errorText = codeMessage[response.status] || response.statusText;
    const { status, url } = response;

    notification.error({
      message: `Request error ${status}: ${url}`,
      description: errorText,
    });
  } else if (!response) {
    notification.error({
      description: 'Your network is abnormal and cannot connect to the server',
      message: 'Network anomaly',
    });
  }
  return response;
}

componentDidMount() {
    this.getNotice();
    this.ws = getWebsocket(
      `notification`,
      `/notifications`,
      {}
    ).pipe(
      throttleTime(2000),
    ).subscribe(
      (resp: any) => {
        this.getNotice();
        notification.open({
          message: resp?.payload?.topicName,
          description: resp?.payload?.message,
          key: resp.payload.id,
          top: 60,
          btn: <Button
            type="primary"
            onClick={() => {
              this.service
                .read(resp.payload.id)
                .subscribe(() => {
                  notification.close(resp.payload.id)
                  this.getNotice();
                });
            }}
          >标记已读</Button>,
          icon: <Icon type="exclamation-circle" style={{ color: '#E23D38' }} />,
        });
      }
    );

  }

errorHandler = (error: { response: Response }): Response => {
  const { response } = error;
  if (response && response.status) {
    const errorText = codeMessage[response.status] || response.statusText;
    const { status, url } = response;

    notification.error({
      message: `请求错误 ${status}: ${url}`,
      description: errorText,
    });
  } else if (!response) {
    notification.error({
      description: '您的网络发生异常，无法连接服务器',
      message: '网络异常',
    });
  }
  return response;
}

function handleBillingMessage(params) {
  if (!params.get("billingMessage")) {
    return
  }

  ;(params.get("billingStatus") === "error" ? notification.error : notification.success)({
    message: params.get("billingMessage"),
    duration: 5,
  })
}

export function displaySuccessNotification(
    message: string,
    description?: string
) {
    return notification["success"]({
        message,
        description,
        placement: "topLeft",
        style: {
            marginTop: 50,
        },
    });
}

// import Link from '../components/Link';

export function notify({
  message = '',
  description = undefined as any,
  txid = '',
  type = 'info',
  placement = 'bottomLeft',
}) {
  if (txid) {
    //   <Link
    //     external
    //     to={'https://explorer.solana.com/tx/' + txid}
    //     style={{ color: '#0000ff' }}
    //   >
    //     View transaction {txid.slice(0, 8)}...{txid.slice(txid.length - 8)}
    //   </Link>

    description = <></>;
  }
  (notification as any)[type]({
    message: <span style={{ color: 'black' }}>{message}</span>,
    description: (
      <span style={{ color: 'black', opacity: 0.5 }}>{description}</span>
    ),
    placement,
    style: {
      backgroundColor: 'white',
    },
  });
}

export function showPluginLoadError(loadErrorPluginNames: string[]) {
  notification.warn({
    message: (
      <div>
        <p>{t('插件加载失败')}:</p>

        {loadErrorPluginNames.map((name) => (
          <p key={name}>- {name}</p>
        ))}
      </div>
    ),
    duration: 2,
  });
}

errorHandler = (error: Error): Response => {
  // 忽略 AbortError 类型的报错
  // @ts-ignore
  if (!(error.name === 'AbortError') && !error.silence) {
    notification.error({
      message: error.message,
    });
  }
  // @ts-ignore
  if (error.silence) {
    // TODO: 兼容 n9e，暂时认定只有开启 silence 的场景才需要传递 error 详情
    throw error;
  } else {
    throw new Error(error.message);
  }
}

useAppUpdateHandle = () => {
  useEffect(() => {
    ipcRenderer.on('app-updater-message', (_, data: UpdaterChannelData) => {
      notification.info({
        message: data.message,
        description: (
          <a
            onClick={() => {
              if (data.url) {
                shell.openExternal(data.url);
              }
            }}
          >
            {data.description}
          </a>
        ),
        key: 'updaterMessage',
        duration: null
      });
    });
  }, []);
}

exceededPacksCountNotification = (): void => {
  notification.warning({
    message: 'Exceeded Max Selected Count!',
    description: `Maximum ${MAX_PACKS_CREATION_COUNT} items can be selected.`,
    className: 'notification-container',
  });
}

errorHandler = (error: { response: Response }): Response => {
  const { response } = error;
  if (response && response.status) {
    const errorText = statusMessage[response.status] || response.statusText;
    const { status, url } = response;
    notification.error({
      message: `请求失败 ${status}: ${url}`,
      description: errorText,
    });
  } else if (!response) {
    notification.error({
      description: '连接服务器失败',
      message: '网络异常',
    });
  }
  return response;
}

errorHandler = (error: { response: Response }): Response => {
  const {response} = error;
  if (response && response.status) {
    const errorText = statusMessage[response.status] || response.statusText;
    const {status, url} = response;

    notification.error({
      message: `请求失败 ${status}: ${url}`,
      description: errorText,
    });
  } else if (!response) {
    notification.error({
      description: '连接服务器失败',
      message: '网络异常',
    });
  }
  return response;
}

/**
 * Method to help student and
 * pop open notification if another TA helped at same time (race condition)
 */
async function onHelpQuestion(questionId: number): Promise<void> {
  try {
    await API.questions.update(questionId, {
      status: OpenQuestionStatus.Helping,
    });
  } catch (e) {
    if (
      e.response?.status === 401 &&
      e.response?.data?.message ===
        ERROR_MESSAGES.questionController.updateQuestion.otherTAHelping
    ) {
      notification.open({
        message: "Another TA is currently helping the student",
        description:
          "This happens when another TA clicks help at the exact same time",
        type: "error",
        duration: 3,
        className: "hide-in-percy",
        style: {
          width: 450,
        },
      });
    }
  }
}

errorHandler = (error: ResponseError) => {
    const { response } = error;
    if (response && response.status) {
        const errorText = codeMessage[response.status] || response.statusText;
        const { status, url } = response;

        notification.error({
            message: `请求错误 ${status}: ${url}`,
            description: errorText,
        });
    }

    if (!response) {
        notification.error({
            description: '您的网络发生异常，无法连接服务器',
            message: '网络异常',
        });
    }
    throw error;
}

request: RequestConfig = {
  errorHandler: (error: any) => {
    const { response } = error;

    if (!response) {
      notification.error({
        description: '您的网络发生异常，无法连接服务器',
        message: '网络异常',
      });
    }
    throw error;
  },
  requestInterceptors: [authHeaderInterceptor],
  responseInterceptors: [errResponseInterceptor],
}

import = (event: React.ChangeEvent<HTMLInputElement>) => {
    let reader = new FileReader();
    reader.onload = (ev) => {
      try {
        if (!ev.target) {
          return;
        }
        let proxy = Proxy.parse(String(ev.target.result));
        if (!proxy) {
          throw new Error("此代理配置是无效的。");
        }

        this.setState({
          protocol: proxy.protocol,
          destination: proxy.destination,
          authentication: proxy.authentication,
          username: proxy.username,
          password: proxy.password,
        });
      } catch (e) {
        notification.error({
          message: "无法导入代理配置",
          description: e.message,
        });
      }
    };
    if (!event.target || !event.target.files) {
      return;
    }
    reader.readAsText(event.target.files[0]);
    // Clear input
    const node = document.getElementById("open");
    if (node) {
      (node as HTMLInputElement).value = "";
    }
  };

AccountMenu = () => {
  const router = useRouter()
  const mutation = useMutation(() => Auth.signOut({ global: true }), {
    onSuccess: router.reload,
    onError: (err: Error) =>
      notification.error({
        message: 'Can not logout',
        description: err.message,
        placement: 'topRight',
        duration: 1.5,
      }),
  })
  return (
    <OFMenu>
      <Menu.Item>
        <Link href="/auth/password">Update Password</Link>
      </Menu.Item>
      <Menu.Item>
        <Button
          loading={mutation.isLoading}
          onClick={() => mutation.mutate()}
        >
          Logout
        </Button>
      </Menu.Item>
    </OFMenu>
  )
}

/**
   *
   * @params `success`| `error`| `info`| `warning`| `warn` |`open`
   * @description  显示通知栏，默认为`open`
   */
  @method()
  open(mtd: keyof Omit<NotificationApi, "config" | "close" | "destroy">) {
    typeof mtd !== "string" && (mtd = "open");
    notification[mtd]({
      message: this.message,
      description: this.description,
      duration: this.duration,
      icon: this.renderIcon(),
      placement: this.placement || "topRight",
      onClose: this.handleClose,
      onClick: this.handleClick,
    });
  }

notify = (
  message: string,
  description: string | undefined,
  type: 'success' | 'error' | 'info' | 'warning' | 'open' = 'open'
): void => {
  notification[type]({
    message,
    description: description === 'ok' ? undefined : description
  });
}

nusiNotification = (msg: string, viewMsg: Function) => {
  const key = `msg_${Date.now()}`;
  notification.open({
    duration: 3,
    key,
    message: i18n.t('default:Notification'),
    description: msg,
    icon: <img src={logo} style={{ width: '24px' }} />,
    btn: (
      <Button
        type="primary"
        size="small"
        onClick={() => {
          notification.close(key);
          viewMsg();
        }}
      >
        {i18n.t('common:view')}
      </Button>
    ),
  });
}

errorHandler = (error: { response: Response }): Response => {
  const { response } = error;
  if (response && response.status) {
    const errorText = codeMessage[response.status] || response.statusText;
    const { status, url } = response;
    notification.error({
      message: `请求错误 ${status}: ${url}`,
      description: errorText,
    });
  } else if (!response) {
    notification.error({
      description: '您的网络发生异常，无法连接服务器',
      message: '网络异常',
    });
  }
  return response;
}

spyonClose = jest.spyOn(notification, "close")

export default function App() {
  const router = useRouter()
  const mutation = useMutation(
    ({ username }: { username: string }) =>
      Auth.forgotPassword(username),
    {
      onSuccess: async (_, variables) => {
        notification.success({
          message: 'Instructions sent to your emails',
          description: 'Account confirmed successfully!',
          placement: 'topRight',
          duration: 1.5,
        })
        await router.push(
          `/auth/resetpassword?username=${variables.username}`,
        )
      },
      onError: async (err: Error) => {
        notification.error({
          message: 'User confirmation failed',
          description: err.message,
          placement: 'topRight',
          duration: 3,
        })
      },
    },
  )

  return (
    <AuthLayout>
      <div>
        <Title level={3}>Forgot your password?</Title>
        <p>
          We'll send you an email with instructions.
          <p>
            or
            <Button
              type="link"
              onClick={() => router.push('/auth/login')}
            >
              Login
            </Button>
          </p>
        </p>
      </div>
      <Form
        layout="vertical"
        name="forgot_password_form"
        onFinish={mutation.mutate}
      >
        <Form.Item
          label={<span style={{ fontWeight: 500 }}>Email</span>}
          name="username"
          required={false}
          rules={[
            {
              required: true,
              message: 'Please input your email',
              type: 'email',
            },
          ]}
        >
          <Input placeholder="[email protected]" />
        </Form.Item>
        <Form.Item>
          <Button
            loading={mutation.isLoading}
            type="primary"
            htmlType="submit"
            block
            className="login-form-button"
          >
            Reset Password
          </Button>
        </Form.Item>
      </Form>
    </AuthLayout>
  )
}

spyonWarn = jest.spyOn(notification, "warning")

async componentDidMount() {
    let ready = 0;

    // Load device from local storage
    const deviceText = localStorage.getItem("device");
    if (deviceText) {
      const device = Device.parse(deviceText);
      if (device) {
        this.setState({
          preset: device.preset,
          source: device.source,
          publish: device.publish,
        });
        ready++;
      }
    }

    // Load proxy from local storage
    const proxyText = localStorage.getItem("proxy");
    if (proxyText) {
      const proxy = Proxy.parse(proxyText);
      if (proxy) {
        this.setState({
          protocol: proxy.protocol,
          destination: proxy.destination,
          authentication: proxy.authentication,
          username: proxy.username,
          password: proxy.password,
        });
        ready++;
      }
    }

    await this.updateInterfaces();
    const interfaces = this.state.interfaces;
    if (interfaces.length > 0) {
      // Load interface from local storage
      const interText = localStorage.getItem("interface");
      if (interText) {
        const inter = Interface.parse(interText);
        if (inter) {
          let exist = interfaces.findIndex((ele) => ele.name === inter.interface) > -1;
          if (exist) {
            this.setState({
              interface: inter.interface,
              mtu: Math.min(1500, inter.mtu),
              ready: ready === 2,
            });
          } else {
            notification.warn({
              message: "网卡已更新",
              description: "您的网卡自上次运行以来已发生变化，请重新配置 pcap2socks。",
            });
          }
        }
      }
    }
  }

failed = (msg: React.ReactNode) => {
    notification["error"]({message: msg, placement: "bottomRight"})
}

ExportToExcelActionBar: React.FC<IExportToExcelActionBarProps> = (props) => {
    const {
        searchObjectsQuery,
        sortBy,
        exportToExcelQuery,
        hidden = false,
        useTimeZone = true,
        disabled = false,
    } = props

    const intl = useIntl()
    const ExportAsExcelLabel = intl.formatMessage({ id: 'ExportAsExcel' })
    const timeZone = intl.formatters.getDateTimeFormat().resolvedOptions().timeZone

    const [
        exportToExcel,
        { loading: isXlsLoading },
    ] = useLazyQuery(
        exportToExcelQuery,
        {
            onError: error => {
                const message = get(error, ['graphQLErrors', 0, 'extensions', 'messageForUser']) || error.message
                notification.error({ message })
            },
            onCompleted: data => {
                if (window) {
                    window.location.href = data.result.linkToFile
                }
            },
        },
    )

    const variablesData = {
        dv: 1,
        sender: getClientSideSenderInfo(),
        where: searchObjectsQuery,
        sortBy: sortBy,
        timeZone: undefined,
    }
    const deps = [exportToExcel, searchObjectsQuery, sortBy, variablesData]

    if (useTimeZone) {
        variablesData.timeZone = timeZone
        deps.push(timeZone)
    }

    const handleExportToExcel = useCallback(() => {
        exportToExcel({ variables: { data: variablesData } })
    }, deps)

    return (
        <Form.Item noStyle>
            <ActionBar hidden={hidden}>
                <Button
                    type={'sberBlack'}
                    secondary
                    icon={<DatabaseFilled/>}
                    loading={isXlsLoading}
                    onClick={handleExportToExcel}
                    disabled={disabled}
                >
                    {ExportAsExcelLabel}
                </Button>
            </ActionBar>
        </Form.Item>
    )
}

success = (msg: React.ReactNode) => {
    notification["success"]({message: msg, placement: "bottomRight"})
}