xiaoxia
c3f3f83f6e
CI/CD Pipeline / Check if frontend-only change (push) Has been skipped
CI/CD Pipeline / Frontend Lint (push) Has been skipped
CI/CD Pipeline / PR Build API Image (push) Has been skipped
CI/CD Pipeline / PR Build Web Image (push) Has been skipped
CI/CD Pipeline / PR Build Worker Image (push) Has been skipped
CI/CD Pipeline / Validate - Code Quality (push) Has been cancelled
CI/CD Pipeline / Validate - Type Check (mypy) (push) Has been cancelled
CI/CD Pipeline / Validate - Migration (alembic) (push) Has been cancelled
CI/CD Pipeline / Unit Tests (push) Has been cancelled
CI/CD Pipeline / Integration Tests (push) Has been cancelled
CI/CD Pipeline / Frontend Unit Tests (push) Has been cancelled
CI/CD Pipeline / Build Staging API Image (push) Has been cancelled
CI/CD Pipeline / Build Staging Web Image (push) Has been cancelled
CI/CD Pipeline / Build Staging Worker Image (push) Has been cancelled
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (push) Has been cancelled
CI/CD Pipeline / Staging E2E Tests (push) Has been cancelled
CI/CD Pipeline / Staging API Integration Tests (push) Has been cancelled
CI/CD Pipeline / Build Production API Image (push) Has been cancelled
CI/CD Pipeline / Build Production Web Image (push) Has been cancelled
CI/CD Pipeline / Build Production Worker Image (push) Has been cancelled
CI/CD Pipeline / Deploy Production (push) Has been cancelled
CI/CD Pipeline / Production Browser E2E (push) Has been cancelled
CI/CD Pipeline / ACR Image Cleanup (push) Has been cancelled
CI/CD Pipeline / Canary Release to Production (push) Has been cancelled
CI/CD Pipeline / CI Gate (push) Has been cancelled
71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
/**
|
|
* V21 Modal 对话框
|
|
* 封装 Ant Design Modal，应用 V21 设计系统样式
|
|
*/
|
|
import React from "react"
|
|
import { Modal as AntModal } from "antd"
|
|
import type { ModalProps as AntModalProps } from "antd"
|
|
import type { ModalFuncProps } from "antd/es/modal"
|
|
import classNames from "classnames"
|
|
import "./ui.css"
|
|
|
|
export interface ModalProps extends AntModalProps {
|
|
/** 使用 V21 样式 */
|
|
v21?: boolean
|
|
}
|
|
|
|
interface ModalComponent extends React.FC<ModalProps> {
|
|
confirm: (config: ModalFuncProps) => ReturnType<typeof AntModal.confirm>
|
|
info: (config: ModalFuncProps) => ReturnType<typeof AntModal.info>
|
|
success: (config: ModalFuncProps) => ReturnType<typeof AntModal.success>
|
|
error: (config: ModalFuncProps) => ReturnType<typeof AntModal.error>
|
|
warning: (config: ModalFuncProps) => ReturnType<typeof AntModal.warning>
|
|
}
|
|
|
|
const Modal: ModalComponent = ({ className, v21 = true, centered = true, children, ...rest }) => {
|
|
const v21Class = classNames(v21 && "xx-modal", className)
|
|
return (
|
|
<AntModal className={v21Class} centered={centered} {...rest}>
|
|
{children}
|
|
</AntModal>
|
|
)
|
|
}
|
|
|
|
/** 确认对话框快捷方法 */
|
|
Modal.confirm = (config: ModalFuncProps) => {
|
|
return AntModal.confirm({
|
|
...config,
|
|
className: classNames("xx-modal-confirm", config.className),
|
|
})
|
|
}
|
|
|
|
Modal.info = (config: ModalFuncProps) => {
|
|
return AntModal.info({
|
|
...config,
|
|
className: classNames("xx-modal-confirm", config.className),
|
|
})
|
|
}
|
|
|
|
Modal.success = (config: ModalFuncProps) => {
|
|
return AntModal.success({
|
|
...config,
|
|
className: classNames("xx-modal-confirm", config.className),
|
|
})
|
|
}
|
|
|
|
Modal.error = (config: ModalFuncProps) => {
|
|
return AntModal.error({
|
|
...config,
|
|
className: classNames("xx-modal-confirm", config.className),
|
|
})
|
|
}
|
|
|
|
Modal.warning = (config: ModalFuncProps) => {
|
|
return AntModal.warning({
|
|
...config,
|
|
className: classNames("xx-modal-confirm", config.className),
|
|
})
|
|
}
|
|
|
|
export default Modal
|