diff --git a/components/Modal/Modal.tsx b/components/Modal/Modal.tsx index daa58c3..77f0bb8 100644 --- a/components/Modal/Modal.tsx +++ b/components/Modal/Modal.tsx @@ -15,6 +15,7 @@ export interface IModalProps extends IBaseComponent { onClose?: () => void; okText?: React.ReactNode; cancelText?: React.ReactNode; + showCancel?: boolean; title?: React.ReactNode; content?: React.ReactNode; bodyCotent?: React.ReactNode; @@ -36,6 +37,7 @@ export class Modal extends Component static defaultProps = { zIndex: 1000, width: 256, + showCancel: true, }; state = { @@ -75,7 +77,7 @@ export class Modal extends Component render() { const { className, style, title, bodyCotent, - content, icon, width, zIndex, + content, icon, width, zIndex, showCancel, okText, cancelText, type, } = this.props; const preCls = 'yoshino-modal'; @@ -88,6 +90,7 @@ export class Modal extends Component warning: 'android-alert', error: 'close-circled', }; + const hasIcon = type !== 'confirm' || icon; return this.state.show ? (
) : null } -
+
{title}
{content}
@@ -114,7 +117,7 @@ export class Modal extends Component
{ - type === 'confirm' ? ( + type === 'confirm' && showCancel ? (
{ typeof cancelText === 'string' || !cancelText ? ( diff --git a/components/Modal/style/index.less b/components/Modal/style/index.less index e68fa94..28243f9 100644 --- a/components/Modal/style/index.less +++ b/components/Modal/style/index.less @@ -14,7 +14,10 @@ display: inline-block; width: calc(100% - @icon-width); vertical-align: middle; - + + &-no-icon { + width: 100%; + } } &-footer { diff --git a/docs/pages/Modal/api.tsx b/docs/pages/Modal/api.tsx index 3ec0b08..db855ea 100644 --- a/docs/pages/Modal/api.tsx +++ b/docs/pages/Modal/api.tsx @@ -71,6 +71,12 @@ export default [ type: "ReactNode", defaultValue: "-", }, + { + props: "showCancel", + intro: "是否显示取消按钮", + type: "boolean", + defaultValue: "false", + }, ] } ] diff --git a/docs/pages/Modal/demo/modalDemo.tsx b/docs/pages/Modal/demo/modalDemo.tsx index cd55d1b..1ad2bae 100644 --- a/docs/pages/Modal/demo/modalDemo.tsx +++ b/docs/pages/Modal/demo/modalDemo.tsx @@ -13,10 +13,10 @@ export default function () { const autoClose = () => { const ref =Modal.confirm({ - icon: , title: '这是一个标题!!!', content: '这是一个内容主题!这是一个内容主题!这是一个内容主题!这是一个内容主题!!', width: 400, + showCancel: false, }); setTimeout(() => { Modal.close(ref);