Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 | import React, { useEffect, useState, useRef } from "react"; import ReactDOM from "react-dom"; import { Modal, ModalProps } from "./ModalMain"; import { Button } from "../button"; import { ModalMessage } from "./ModalMessage"; import { Combine, Omit } from "../_type"; import { callBoth } from "../_util/call-both"; import { useTranslation } from "../i18n"; import { mergeRefs } from "../_util/merge-refs"; import { ConfigProvider } from "../configprovider"; /** * API 的方式唤起一个告警对话框 * @param options * @returns 异步返回布尔值,为 true 则表示用户确认,为 false 则表示用户取消 */ export function alert(options: AlertOptions) { return new Promise<void>(resolve => { const el = document.createElement("div"); ReactDOM.render( <ConfigProvider> <ModalAlertAPI {...options} onButtonClick={() => resolve()} onExited={() => { ReactDOM.unmountComponentAtNode(el); }} /> </ConfigProvider>, el ); }); } export interface TypedAlertOptions extends Omit<AlertOptions, "type"> {} /** * API 的方式唤起一个对话框显示成功信息 */ export function success(options: TypedAlertOptions) { return alert({ type: "success", ...options }); } /** * API 的方式唤起一个对话框显示失败信息 */ export function error(options: TypedAlertOptions) { return alert({ type: "error", ...options }); } /** * `Modal.success`、`Modal.error` 及 `Modal.alert` 方法接收以下参数: */ export interface AlertOptions { /** * 提示类型 */ type?: "error" | "warning" | "success" | "pending" | "infoblue"; /** * 要提示的消息 */ message: React.ReactNode; /** * 可选的详细解释 */ description?: React.ReactNode; /** * 默认告警对话框有唯一的关闭按钮 * * 此处配置按钮的文案 */ buttonText?: React.ReactNode; /** * 如果对话框需要多个按钮,或者需要给按钮绑定事件,可直接传入按钮数组 * * 此配置会覆盖 `buttonText` 的配置 */ buttons?: React.ReactElement[]; /** * 对话框尺寸,决定对话框的宽度,详见 ModalProps 中 `size` 属性 */ size?: ModalProps["size"]; /** * 是启用点击遮罩关闭 * @default true */ maskClosable?: boolean; } function ModalAlertAPI({ onButtonClick, ...modalProps }: ModalAlertProps) { const [visible, setVisible] = useState(false); // 渲染之后,马上显示 useEffect(() => setVisible(true), []); const close = () => { setVisible(false); onButtonClick(); }; return ( <ModalAlert visible={visible} onButtonClick={close} onClose={close} {...modalProps} /> ); } export interface ModalAlertProps extends Combine<ModalProps, AlertOptions> { onButtonClick(): void; } /** * 提供原始的 ModalAlert 组件。 * 推荐使用 `Modal.success()` / `Modal.error()` API 来简化用法 */ export function ModalAlert({ type, message, description, ...modalProps }: ModalAlertProps) { useEffect(() => { window.focus(); }, []); return ( <Modal disableCloseIcon {...modalProps}> <Modal.Body> <ModalMessage icon={type} message={message} description={description} /> </Modal.Body> <Modal.Footer> <ModalButton {...modalProps} /> </Modal.Footer> </Modal> ); } function ModalButton({ buttons, buttonText, onButtonClick, }: Partial<ModalAlertProps>) { const t = useTranslation(); const mainButtonRef = useRef<HTMLButtonElement>(null); useEffect(() => { if (mainButtonRef.current) { mainButtonRef.current.focus(); } }, []); const okText = buttonText || t.okText; return ( <> {(buttons || [<Button type="primary">{okText}</Button>]).map( (button, index) => { return React.cloneElement(button, { key: index, onClick: callBoth(button.props.onClick, onButtonClick), ref: index === 0 ? mergeRefs(button.props.ref, mainButtonRef) : button.props.ref, }); } )} </> ); } |