antd#Alert TypeScript Examples

GlobalErrorsAlert = (props: GlobalErrorsAlertProps) => {
  const {serverValidationErrors} = props;

  if (serverValidationErrors?.globalErrors == null || serverValidationErrors?.globalErrors.length === 0) {
    return null;
  }

  return (
    <Alert
      message={<MultilineText lines={serverValidationErrors.globalErrors} />}
      type="error"
      style={{ marginBottom: "24px" }}
    />
  );
}

public renderFormItem(config: DTGComponentPropertySchema, index: number) {
    const { helpMsg } = this.state;
    const labelCol = config['ui:layout']?.labelCol || 8;
    const wrapperCol = config['ui:layout']?.wrapperCol || 16;
    const formItemLayout = {
      labelCol: { xs: { span: labelCol }, sm: { span: labelCol } },
      wrapperCol: { xs: { span: wrapperCol }, sm: { span: wrapperCol } },
    };
    const key = config.name;
    const visible = this.visible(config);
    if (!visible) { return null; }
    return (
      <React.Fragment key={index}>
        <Form.Item
          key={key}
          label={this.renderTitleLabel(config)}
          colon={false}
          validateStatus={helpMsg[key] ? 'error' : 'success'}
          help={config['ui:layout']?.customHelpMsg ? '' : helpMsg[key]}
          required={config.required}
          style={config['ui:wrapperStyle']}
          {...formItemLayout}
        >
          { !config['ui:layout']?.extraRow && this.renderFormComponent(config) }
          { config['ui:layout']?.customHelpMsg && helpMsg[key] && (
            <Alert style={{ padding: '4px 12px', height: '32px' }} message={helpMsg[key]} type="error" showIcon />
          ) }
        </Form.Item>
        { config['ui:layout']?.extraRow && (
          <Row>
            <Col span={24}>
              { this.renderFormComponent(config) }
            </Col>
          </Row>
        ) }
      </React.Fragment>
    );
  }

function InsightViz({ insight, loading }: Pick<InsightCardProps, 'insight' | 'loading' | 'apiError'>): JSX.Element {
    const { short_id, filters, result: cachedResults } = insight

    return (
        <div className="InsightViz">
            {loading && <Loading />}
            <Alert.ErrorBoundary message="Insight visualization errored">
                <ActionsLineGraph dashboardItemId={short_id} cachedResults={cachedResults} filters={filters} />
            </Alert.ErrorBoundary>
        </div>
    )
}

PageContent: FunctionComponent<PageContentProps> = (props) => (
  <Layout.Content
    style={{
      paddingLeft: 60,
      paddingRight: 60,
      paddingTop: 55,
      margin: 0,
      minHeight: 280,
      minWidth: 350,
      height: '100vh',
      overflowY: props.forceShowScroll ? 'scroll' : 'auto',
    }}
  >
    <PageHeader
      title={props.title}
      style={{paddingLeft: 0, paddingRight: 0, paddingTop: 0}}
      extra={props?.titleExtra}
    />
    {props.message ? (
      <Alert
        message={props.message.title}
        description={props.message.description}
        type={props.message.type}
        showIcon
        closable
      />
    ) : undefined}
    <div className="site-layout-background" style={{minHeight: 360}}>
      <Spin spinning={props.spin ?? false}>{props.children}</Spin>
    </div>
  </Layout.Content>
)

DendronNotice = ({
  show = false,
  children,
}: {
  show: boolean;
  children: ReactNode;
}) => {
  const [val, toggle] = useToggle(show);
  return (
    <>
      {val && (
        <Alert
          type="info"
          banner
          style={{
            paddingLeft: `calc((100% - ${LAYOUT.BREAKPOINTS.lg}) / 2)`,
            paddingRight: `calc((100% - ${LAYOUT.BREAKPOINTS.lg}) / 2)`,
          }}
          message={children}
          closable
          afterClose={() => toggle(false)}
        />
      )}
    </>
  );
}

export function BrickColors(props: BrickColorsProps): React.ReactElement {
  const { list = [] } = props;
  return (
    <Card>
      <Alert
        message="复制后的变量可直接在 css 属性中使用"
        type="info"
        showIcon
      />
      <div className={style.colorContainer}>
        {list.map(item => (
          <ColorGroup key={item.title} title={item.title} group={item.group} />
        ))}
      </div>
    </Card>
  );
}

Pipeline = () => {
  return (
    <div>
      <Alert
        type="info"
        message={
          <span className="">
            {i18n.s(
              'The new pipeline page is in the trial stage, you can manually switch to the new version to experience.',
              'dop',
            )}
            <span
              onClick={() => {
                goTo(goTo.pages.pipelineNewRoot);
              }}
              className="text-purple-deep cursor-pointer"
            >
              {i18n.s('Try it right now', 'dop')}
            </span>
          </span>
        }
        className="mb-2 bg-blue-1 border-blue"
      />
      <ObsoletedPipeline />
    </div>
  );
}

LoginMessage: React.FC<{
  content: string;
}> = ({ content }) => (
  <Alert
    style={{
      marginBottom: 24,
    }}
    message={content}
    type="error"
    showIcon
  />
)

renderMessage = (content: string) => (
    <Alert
      style={{
        marginBottom: 24,
      }}
      message={content}
      type="error"
      showIcon
    />
  );

LoginMessage: React.FC<{
  content: string;
}> = ({ content }) => (
  <Alert
    style={{
      marginBottom: 24,
    }}
    message={content}
    type="error"
    showIcon
  />
)

export function ErrorBanner({
    message = "Oh no! Something went wrong :(",
    description = "Sorry, but something went wrong. Please check you connection and try again.",
}: ErrorBannerProps) {
    return (
        <Alert
            banner
            closable
            message={message}
            description={description}
            type="error"
            className="error-banner"
        />
    );
}

CubeNotOnlineBanner: React.FC<Props> = ({ isOnline }) => {
  return (
    <Vertical
      style={{
        position: "absolute",
        top: 10,
        width: "100%",
        zIndex: 100,
        display: isOnline ? "none" : undefined,
      }}
      horizontalAlign="center"
    >
      <Alert message="Cube is not online" type="error" showIcon style={{ width: 300 }} />
    </Vertical>
  );
}

AlertErrorView: React.FC<{
  error: Error;
}> = React.memo(({ error }) => {
  const [show, setShow] = useState(false);

  const description = (
    <div>
      <span>{String(error.message)}</span>
      <Button
        className={clsx({
          'opacity-0': show,
        })}
        type="link"
        onClick={() => setShow(true)}
      >
        {t('显示详情')}
      </Button>
      {show && <pre>{String(error.stack)}</pre>}
    </div>
  );

  return (
    <Alert
      className="w-full h-full select-text"
      type="error"
      message={String(error.name)}
      description={description}
    />
  );
})

removeBusiDetail = () => {
  return {
    operateTitle: '移出业务组',
    requestFunc: moveTargetBusi,
    isFormItem: false,
    render() {
      return <Alert message='提示信息：移出所属业务组，该业务组的管理人员将不再有权限操作这些监控对象！您可能需要提前清空这批监控对象的标签和备注信息！' type='error' />;
    },
  };
}

Index: NextPage = () => {
  return (
    <AuthLayout>
      <Omf />
      <Alert
        style={{
          margin: 'auto',
          maxWidth: '90%',
          width: 500,
          textAlign: 'center',
        }}
        type={'warning'}
        message={'Work in Progress'}
      />

      <AuthFooter />
    </AuthLayout>
  )
}

getUploadSuccessModalConfig = (title: string, content: string, okText: string) => {
    return {
        title,
        closable: true,
        content: (
            <Alert
                style={{ marginTop: 16 }}
                message={content}
                type='success'
            />
        ),
        okText,
    }
}

getAlertContainer(messagesStore: MessagesStore) {
    if (messagesStore.isError) {
      return (
        <StyledNotification>
          <Alert
            message={messagesStore.infoString}
            type="error"
            showIcon
            closable
            afterClose={() => this.handleClose('error')}
          />
        </StyledNotification>
      );
    }
    if (messagesStore.isSuccess) {
      return (
        <StyledNotification>
          <Alert
            message={messagesStore.infoString}
            type="success"
            showIcon
            closable
            afterClose={() => this.handleClose('success')}
          />
        </StyledNotification>
      );
    }
    return null;
  }

Notification: React.FC = () => {
  const { t } = useTranslation();
  const { rpcDomain, websocketDomain } = React.useContext(PreferencesContext);

  return (
    <>
      {rpcDomain ? (
        <Alert
          message={`${rpcDomain ? `Reading RPC from: ${rpcDomain}.` : ""}${
            websocketDomain ? `Reading Websocket from: ${websocketDomain}.` : ""
          }`}
          type="warning"
          style={{ margin: 12 }}
          action={<Link to="/preferences">{t("transaction.change")}</Link>}
        ></Alert>
      ) : null}
    </>
  );
}

ResponseBodyView: FunctionComponent<Props> = ({ body, warning }) => {
  const { type, value } = body;

  const handlers = {
    valueChange: NO_OP,
    fieldChange: NO_OP,
    entryAdd: NO_OP,
    entryRemove: NO_OP,
  };

  return (
    <div>
      {warning.length > 0 && <Alert type="warning" style={{ whiteSpace: 'pre' }} message={warning}></Alert>}
      <div style={{ height: 8 }} />
      {type === 'empty' ? (
        <EmptyBody />
      ) : type === 'unknown' ? (
        <UnknownBody />
      ) : type === 'protobuf' ? (
        <MessageValueView value={value as MessageValue} handlers={handlers} />
      ) : type === 'json' || type === 'html' ? (
        <StringBody s={value as string} />
      ) : null}
    </div>
  );
}

export default function Wallet() {
  return (
    <div>
      <div className="lg:mx-60">
        <div className="text-black-800 font-bold">
          <Trans>wallet.deploy</Trans>
        </div>

        <Card className="mt-3 max-w-screen-xl">
          <Alert
            message={
              <Trans>
                Only one wallet with the same member and threshold can be registered, but you can share it between
                different networks
              </Trans>
            }
            type="info"
            closable
            className="max-w-screen-xl mx-auto mb-4"
          />
          <WalletForm />
        </Card>
      </div>
    </div>
  );
}

LoginMessage: React.FC<{
    content: string;
}> = ({ content }) => (
    <Alert
        style={{
            marginBottom: 24,
        }}
        message={content}
        type="error"
        showIcon
    />
)

MITMPluginOperator = React.memo((props: MITMPluginOperatorProps) => {
    const userDefined = true;
    return <div id={"plugin-operator"} style={{height: "100%"}}>
        <Row style={{height: "100%"}} gutter={12}>
            <Col span={userDefined ? 16 : 8}
                 style={{height: "100%", overflowY: "auto", display: "flex", flexDirection: "column"}}
            >
                <Alert type={"success"} style={{marginBottom: 12, fontSize: 15}} message={<>
                    <Space direction={"vertical"}>
                        <Space> 设置代理 <CopyableField text={props.proxy}/> 以扫描流量 </Space>
                        {props.downloadCertNode && props.downloadCertNode()}
                        {props.setFilterNode && props.setFilterNode()}
                    </Space>
                </>}/>
                <div style={{flex: 1}}>
                    <MITMPluginList
                        {...props as MITMPluginListProp}
                    />
                </div>
            </Col>
            <Col span={userDefined ? 8 : 16} style={{height: "100%", overflow: "hidden"}}>
                <MITMPluginLogViewer messages={props.messages} status={props.status}/>
            </Col>
        </Row>
    </div>
})

export default function Home(): JSX.Element {
    const router = useRouter();
    const [currentUser, setCurrentUser] = useState<string | undefined>(undefined);
    const error = router.query['error'];

    useEffect(() => {
        // Read 'spotifyuser' cookie
        const user = Cookie.get('spotifyuser');
        if (user) {
            setCurrentUser(user);
        }
    });

    const handleClearCreds = () => {
        Cookie.remove('spotifyuser');
        window.location.reload();
    };

    return (
        <div className="container">
            <Head>
                <title>Spotify Recently Played README Generator</title>
                <link rel="icon" href="/favicon.ico" />
            </Head>

            <Breadcrumb separator=">" style={{ marginBottom: 25 }}>
                <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
            </Breadcrumb>

            <div>
                <Title level={2}>Spotify Recently Played README Generator</Title>
                {error && <Alert message="Error" description={error} type="error" style={{ marginBottom: 18 }} />}

                {!currentUser ? (
                    <Space className="vert-space" direction="vertical" size="middle">
                        <Text>Get started by authorizing the app below.</Text>
                        <SpotifyAuthButton clientId={ClientId} redirectUri={RedirectUri} />
                    </Space>
                ) : (
                    <Space className="vert-space" direction="vertical" size="middle">
                        <MarkdownSnippet username={currentUser} />
                        <SpotifyAuthButton clientId={ClientId} redirectUri={RedirectUri} label="Re-authorize" />
                        <Button type="link" danger onClick={handleClearCreds}>
                            Clear local credentials
                        </Button>
                    </Space>
                )}
            </div>
        </div>
    );
}

function App() {
  return (
    <Layout>
      <Router>
        <TopAppBar>
          <TopAppBarRow>
            <TopAppBarSection>
              <TopAppBarTitle>
                <Link to="/" className="root">
                  #ppeforfree
                </Link>
              </TopAppBarTitle>
            </TopAppBarSection>
            <TopAppBarSection alignEnd>
              <nav>
                <Link to="/">about</Link>
                <Link to="/contributors">contributors</Link>
                <a
                  href="https://discord.gg/pWF2zBf"
                  target="_blank"
                  rel="noreferrer noopener"
                >
                  join us
                </a>
                <a
                  href="http://github.com/PPEForFree"
                  target="_blank"
                  rel="noreferrer noopener"
                  className="icon icon-github"
                >
                  <img src="/github-icon.png" alt="github" />
                </a>
              </nav>
            </TopAppBarSection>
          </TopAppBarRow>
        </TopAppBar>
        <TopAppBarFixedAdjust />

        <Alert
          message="Join us!"
          description={
            <div>
              We're building a distributed team and are looking for volunteers. If you are
              interested in leveraging your skills and experience to make a significant
              contribution to a worthwhile cause during the ongoing epidemic then please
              register your interest by joining us on{" "}
              <a
                href="https://discord.gg/pWF2zBf"
                target="_blank"
                rel="noreferrer noopener"
              >
                Discord
              </a>
              .
            </div>
          }
          type="info"
          showIcon
          closable
        />

        <Content>
          <Switch>
            <Route path="/ideas" component={Ideas} />
            <Route path="/initiatives/submit" component={InitiativeSubmission} />
            <Route path="/directory" component={InitiativeDirectory} />
            <Route path="/contributors" component={Contributors} />
            <Route path="/" component={About} />
          </Switch>
        </Content>
      </Router>
    </Layout>
  );
}

function CreateKeyModal({
    isVisible,
    setIsVisible,
}: {
    isVisible: boolean
    setIsVisible: Dispatch<SetStateAction<boolean>>
}): JSX.Element {
    const { createKey } = useActions(personalAPIKeysLogic)

    const [errorMessage, setErrorMessage] = useState<string | null>(null)
    const inputRef = useRef<Input | null>(null)

    const closeModal: () => void = useCallback(() => {
        setErrorMessage(null)
        setIsVisible(false)
        if (inputRef.current) {
            inputRef.current.setValue('')
        }
    }, [inputRef, setIsVisible])

    return (
        <Modal
            title="Creating a Personal API Key"
            okText="Create Key"
            cancelText="Cancel"
            onOk={() => {
                const label = inputRef.current?.state.value?.trim()
                if (label) {
                    setErrorMessage(null)
                    createKey(label)
                    closeModal()
                } else {
                    setErrorMessage('Your key needs a label!')
                }
            }}
            onCancel={closeModal}
            visible={isVisible}
        >
            <Input
                addonBefore="Label"
                ref={inputRef}
                placeholder='for example "Zapier"'
                maxLength={40}
                style={{ marginBottom: '1rem' }}
            />
            {errorMessage && <Alert message={errorMessage} type="error" style={{ marginBottom: '1rem' }} />}
            <p style={{ marginBottom: 0 }}>
                Key value <b>will only ever be shown once</b>, immediately after creation.
                <br />
                Copy it to your destination right away.
            </p>
        </Modal>
    )
}

export function ObjectAttrDate(props: ObjectAttrDateProps): React.ReactElement {
  const { t } = useTranslation(NS_FORMS);
  const [value, setValue] = React.useState<DateValueType>({
    default: "",
  });

  React.useEffect(() => {
    !isNil(props.value) && setValue(props.value);
  }, [props.value]);

  const handleValueChange = (value: Partial<DateValueType>) => {
    setValue(value);
    props.onChange && props.onChange(value);
  };

  return (
    <>
      <div>
        {i18n.t(`${NS_FORMS}:${K.FORMAT}`)}
        <Row>
          <Alert
            message="yyyy-mm-dd"
            type="info"
            className={styles.cmdbObjectAttrValueInfo}
          />
        </Row>
      </div>
      <div>
        {t(K.ATTRIBUTE_DEFAULT_VALUE)}
        <Row>
          {value?.default?.length ? (
            <DatePicker
              value={moment(value?.default)}
              placeholder={i18n.t(`${NS_FORMS}:${K.CLICK_TO_SELECT_DATE}`)}
              style={{ width: "100%" }}
              onChange={(date) =>
                handleValueChange({
                  ...value,
                  default: date?.format("YYYY-MM-DD"),
                })
              }
            />
          ) : (
            <DatePicker
              placeholder={i18n.t(`${NS_FORMS}:${K.CLICK_TO_SELECT_DATE}`)}
              style={{ width: "100%" }}
              onChange={(date) =>
                handleValueChange({
                  ...value,
                  default: date?.format("YYYY-MM-DD"),
                })
              }
            />
          )}
        </Row>
      </div>
    </>
  );
}

ErdaAlert = ({
  type = 'info',
  message,
  description,
  showOnceKey,
  className,
  theme = 'light',
  closeable = true,
}: IProps) => {
  const alertList = JSON.parse(localStorage.getItem('erda-alert-list') || '{}');
  const [isHidden, setIsHidden] = React.useState(showOnceKey ? alertList[showOnceKey] : false);
  const afterClose = () => {
    setIsHidden('true');
    if (showOnceKey) {
      alertList[showOnceKey] = 'true';
      localStorage.setItem('erda-alert-list', JSON.stringify(alertList));
    }
  };

  return !isHidden ? (
    <Alert
      type={type}
      className={`erda-alert py-2 px-4 mb-4 ${className || ''} theme-${theme}`}
      message={
        <div className="flex items-center">
          <ErdaIcon type={iconMap[type]} className="erda-alert-icon text-xl mr-2" />
          {message}
        </div>
      }
      description={description}
      {...(closeable
        ? {
            closeText: (
              <ErdaIcon
                type="close"
                className={`${theme === 'dark' ? 'text-white-6 hover:text-purple-deep' : 'hover-active'}`}
              />
            ),
            afterClose,
          }
        : {})}
    />
  ) : null;
}

GroupPluginPanel: React.FC<GroupPluginPanelProps> = React.memo(
  (props) => {
    const panelInfo = useGroupPanelInfo(props.groupId, props.panelId);

    if (!panelInfo) {
      return (
        <Alert className="w-full text-center" message={t('无法获取面板信息')} />
      );
    }

    if (typeof panelInfo.provider !== 'string') {
      return (
        <Alert
          className="w-full text-center"
          message={t('未找到插件的提供者')}
        />
      );
    }

    // 从已安装插件注册的群组面板中查找对应群组的面板配置
    const pluginPanelInfo = useMemo(() => {
      if (!isValidStr(panelInfo.pluginPanelName)) {
        return null;
      }

      return findPluginPanelInfoByName(panelInfo.pluginPanelName);
    }, [panelInfo.name]);

    if (!pluginPanelInfo) {
      // TODO: 如果没有安装, 引导用户安装插件
      return (
        <Alert
          className="w-full text-center"
          message={
            <div>
              <p>{t('该面板由插件提供')}</p>
              <p>
                {t('插件名')}: {panelInfo.provider}
              </p>
              <p>
                {t('面板名')}: {panelInfo.pluginPanelName}
              </p>
            </div>
          }
        />
      );
    }

    const Component = pluginPanelInfo.render;

    if (!Component) {
      // 没有找到插件组件
      // TODO: Fallback
      return null;
    }

    return (
      <GroupPanelWrapper
        groupId={props.groupId}
        panelId={props.panelId}
        showHeader={false}
      >
        <Component panelInfo={panelInfo} />
      </GroupPanelWrapper>
    );
  }
)

Index: NextPage = () => {
  const router = useRouter()
  const { t } = useTranslation()
  const [loading, setLoading] = useState<boolean>(
    publicRuntimeConfig.spa || (process.browser && router.pathname !== window.location.pathname)
  )
  const status = useStatusQuery()

  useEffect(() => {
    if (router.pathname !== window.location.pathname) {
      let href = router.asPath
      const as = router.asPath
      const possible = [
        /(\/form\/)[^/]+/i, /(\/admin\/forms\/)[^/]+/i, /(\/admin\/users\/)[^/]+/i,
      ]

      possible.forEach((r) => {
        if (r.test(as)) {
          href = href.replace(r, '$1[id]')
        }
      })

      router.replace(href, as).catch((e: Error) => {
        console.error('failed redirect', e)
      })
    }
  })

  useEffect(() => {
    if (loading) {
      setTimeout(() => {
        setLoading(false)
      }, 10000)
    }
  }, [loading])

  if (loading) {
    return <LoadingPage message={t('loading')} />
  }

  return (
    <Layout
      style={{
        height: '100vh',
        background: publicRuntimeConfig.mainBackground,
      }}
    >
      <Omf />
      <div
        style={{
          margin: 'auto',
          maxWidth: '90%',
          width: 500,
          textAlign: 'center',
        }}
      >
        <img
          alt={'OhMyForm'}
          src={require('../assets/images/logo_white.png?resize&size=512')}
          width={1608 / 4}
          height={530 / 4}
        />
      </div>

      {status.error && (
        <Alert
          message={`There is an error with your API connection: ${status.error.message}`}
          style={{ marginBottom: 40, marginLeft: 16, marginRight: 16 }}
        />
      )}
      <AuthFooter />
    </Layout>
  )
}