Feedback - Modal 模态框 - 《Choerodon UI of React 0.8.51 组件文档》

Modal模态框

模态框。

何时使用

代码演示

基本使用。

import { Modal, Button } from 'choerodon-ui/pro';
const modalKey = Modal.key();
const ModalContent = ({ modal }) => {
  modal.handleOk(() => {
    console.log('do OK');
    return false;
  });
  modal.handleCancel(() => {
    console.log('do Cancel');
  });
  function toggleOkDisabled() {
    modal.update({ okProps: { disabled: !modal.props.okProps.disabled } });
  }
  return (
    <div>
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
      <Button color="primary" onClick={modal.close}>
        custom button for close modal
      </Button>
      <Button onClick={toggleOkDisabled}>
        {modal.props.okProps.disabled ? 'enable' : 'disable'}
      </Button>
    </div>
  );
};
function openModal() {
  Modal.open({
    key: modalKey,
    title: 'Basic',
    children: <ModalContent />,
    okProps: { disabled: true, children: '保存' },
  });
}
ReactDOM.render(<Button onClick={openModal}>Open</Button>, mountNode);

自定义页脚

自定义页脚。

import { Modal, Button } from 'choerodon-ui/pro';
const key1 = Modal.key();
const key2 = Modal.key();
const key3 = Modal.key();
let modal;
function closeModal() {
  modal.close();
}
function openModal() {
  modal = Modal.open({
    key: key1,
    title: 'Custom Footer',
    children: (
      <div>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </div>
    ),
    footer: <Button onClick={closeModal}>关闭</Button>,
  });
}
function openNoFooter() {
  Modal.open({
    key: key2,
    title: 'No Footer',
    maskClosable: true,
    destroyOnClose: true,
    children: (
      <div>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </div>
    ),
    footer: null,
  });
}
function openMoreButtons() {
  Modal.open({
    key: key3,
    title: 'More Buttons',
    maskClosable: true,
    destroyOnClose: true,
    drawer: true,
    children: (
      <div>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </div>
    ),
    footer: (okBtn, cancelBtn) => (
      <div>
        {okBtn}
        <Button color="primary">Custom</Button>
        {cancelBtn}
      </div>
    ),
  });
}
ReactDOM.render(
  <div>
    <Button onClick={openModal}>Custom</Button>
    <Button onClick={openNoFooter}>No Footer</Button>
    <Button onClick={openMoreButtons}>More Buttons</Button>
  </div>,
  mountNode,
);

自定义坐标

自定义坐标。

import { Modal, Button } from 'choerodon-ui/pro';
const modalKey = Modal.key();
function openModal() {
  Modal.open({
    key: modalKey,
    title: 'No Footer',
    children: (
      <div>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </div>
    ),
    style: {
      left: 100,
      top: 200,
    },
  });
}
ReactDOM.render(
  <Button onClick={openModal}>Open</Button>,
  mountNode,
);

确认框

确认框。

import { Modal, Button } from 'choerodon-ui/pro';
function doConfirm() {
  Modal.confirm({
    title: 'Confirm',
    children: (
      <div>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </div>
    ),
  }).then(button => {
    Modal.info(`Click ${button}`);
  });
}
function info() {
  Modal.info({
    title: 'This is title',
    children: '您的订单已经提交!',
  });
}
function success() {
  Modal.success('订单提交成功!');
}
function error() {
  Modal.error('订单提交失败!');
}
function warning() {
  Modal.warning('订单信息不完整!');
}
ReactDOM.render(
  <div>
    <Button onClick={doConfirm}>Confirm</Button>
    <Button onClick={info}>Info</Button>
    <Button onClick={success}>Success</Button>
    <Button onClick={error}>Error</Button>
    <Button onClick={warning}>Warning</Button>
  </div>,
  mountNode,
);

多层抽屉

通过设定多个 drawer 类型的弹出框形成多层抽屉，可指定弹出层宽度，弹出动画。

import { Modal, Button } from 'choerodon-ui/pro';
const key1 = Modal.key();
const key2 = Modal.key();
const key3 = Modal.key();
function openSubModal2() {
  return new Promise(resolve => {
    Modal.open({
      key: key3,
      title: 'Sub Mode 2',
      style: {
        width: 600,
      },
      drawer: true,
      drawerTransitionName: 'slide-left',
      children: (
        <div>
          <p>Open Sub Modal2...</p>
          <p>Open Sub Modal2...</p>
        </div>
      ),
      onOk: resolve,
    });
  });
}
function openSubModal1() {
  return new Promise(resolve => {
    Modal.open({
      key: key2,
      title: 'Sub Mode 1',
      drawer: true,
      style: {
        width: 600,
      },
      children: (
        <div>
          <Button onClick={openSubModal2}>Open Sub Modal2...</Button>
          <p>Open Sub Modal1...</p>
          <p>Open Sub Modal1...</p>
        </div>
      ),
      onOk: resolve,
      onCancel: resolve,
    });
  });
}
function openModal() {
  Modal.open({
    closable: true,
    key: key1,
    title: 'Multilayer',
    drawer: true,
    style: {
      width: 300,
    },
    children: (
      <div>
        <Button onClick={openSubModal1}>Open Sub Modal1...</Button>
        <p>Modal...</p>
        <p>Modal...</p>
      </div>
    ),
    afterClose: () => {
      window.console.log('after close');
    },
  });
}
ReactDOM.render(<Button onClick={openModal}>Drawer</Button>, mountNode);

异步关闭

异步关闭。

import { Modal, Button } from 'choerodon-ui/pro';
const modalKey = Modal.key();
function openModal() {
  Modal.open({
    key: modalKey,
    title: 'Synchronize',
    children: (
      <div>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </div>
    ),
    onOk: () => new Promise((resolve) => {
      setTimeout(() => {
        resolve();
      }, 1000);
    }),
    onCancel: () => new Promise((resolve, reject) => {
      setTimeout(() => {
        reject(new Error('error'));
      }, 1000);
    }),
  });
}
ReactDOM.render(
  <Button onClick={openModal}>Open</Button>,
  mountNode,
);

多层

多层。

import { Modal, Button } from 'choerodon-ui/pro';
const modalKey = Modal.key();
async function openSubModal() {
  return await Modal.confirm('确认关闭？') === 'ok';
}
function openModal() {
  Modal.open({
    key: modalKey,
    title: 'Multilayer',
    children: (
      <div>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </div>
    ),
    onClose: openSubModal,
  });
}
ReactDOM.render(
  <Button onClick={openModal}>Open</Button>,
  mountNode,
);

关闭按钮

关闭按钮。

import { Modal, Button } from 'choerodon-ui/pro';
const modalKey = Modal.key();
function openModal() {
  Modal.open({
    key: modalKey,
    title: 'Close button',
    children: (
      <div>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </div>
    ),
    closable: true,
  });
}
ReactDOM.render(<Button onClick={openModal}>Open</Button>, mountNode);

全屏显示

全屏显示。

import { Modal, Button } from 'choerodon-ui/pro';
const modalKey = Modal.key();
function openModal() {
  Modal.open({
    key: modalKey,
    title: 'Full screen',
    children: (
      <div>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </div>
    ),
    fullScreen: true,
  });
}
ReactDOM.render(
  <Button onClick={openModal}>Open</Button>,
  mountNode,
);

API

参数	说明	类型	默认值
key	唯一键，当 destroyOnClose 为 false 时，必须指定 key。为了避免与其他 modal 的 key 重复，可通过 Modal.key()来获取唯一 key。	string
title	标题	ReactNode
closable	显示右上角关闭按钮	boolean	false
movable	可移动， drawer 无法移动	boolean	true
fullScreen	全屏显示	boolean	false
maskClosable	点击蒙层是否允许关闭	boolean	false
keyboardClosable	按 esc 键是否允许关闭	boolean	true
destroyOnClose	关闭时是否销毁	boolean	true
footer	底部内容	ReactNode 或`(okBtn: ReactNode, cancelBtn: ReactNode) => ReactNode`
okText	确认按钮文字	ReactNode	确定
cancelText	取消按钮文字	ReactNode	取消
onClose	关闭时回调，返回`false` `Promise.resolve(false)`或`Promise.reject()`不会关闭，其他自动关闭	() => Promise<boolean>
onOk	点击确定回调，返回`false` `Promise.resolve(false)`或`Promise.reject()`不会关闭，其他自动关闭	() => Promise<boolean>
onCancel	点击取消回调，返回`false` `Promise.resolve(false)`或`Promise.reject()`不会关闭，其他自动关闭	() => Promise<boolean>
afterClose	关闭后回调	() => void
drawer	抽屉模式	boolean	false
drawerTransitionName	抽屉模式使用的动画	string	'slide-right'
okCancel	同时显示 ok 和 cancel 按钮，false 的时候只显示 ok 按钮	boolean	true
okFirst	ok 按钮是否排在第一个	boolean	true
okProps	ok 按钮属性	object
cancelProps	cancel 按钮属性	object

ModalProvider > v0.8.50

使用 Modal 前，需要在页面根节点外包裹 ModalProvider。如果路由切换时要清空所有 Modal，需要在 ModalProvider 传入 location，如下所示。
如果 Modal 要获取 React Context，请在对应的 Context.Provider 子节点外包裹 ModalProvider，并使用 ModalProvider 提供的 injectModal 或 useModal 来代替 Modal.open。

import { ModalProvider } from 'choerodon-ui/pro';
import { withRouter } from 'react-router';
@withRouter
class App extends React.Component {
  render() {
    const { location } = this.props;
    return (
      <ModalProvider location={location}>
        <Main />
      </ModalProvider>
    );
  }
}
render(<App />, mountNode);

ModalContent <= v0.8.50

使用 Modal 前，需要在页面 Root 内插入 ModalContainer。如果路由切换时要清空所有 Modal，需要在 ModalContiner 传入 location，如下所示。
如果 Modal 要获取 React Context，请将 ModalContainer 至于 Context.Provider 之下。
为了避免多个 ModalContainer 之间 Context 错乱， ModalContainer 务必作为第一个子元素使用。

import { ModalContainer } from 'choerodon-ui/pro';
import { withRouter } from 'react-router';
@withRouter
class App extends React.Component {
  render() {
    const { location } = this.props;
    return (
      <div>
        <ModalContainer location={location} />
        <Main />
      </div>
    );
  }
}
render(<App />, mountNode);

Modal.open()返回一个对象，该对象具有如下方法：

名称	说明	参数
close(destroy)	关闭	`destroy` - 是否销毁
open()	打开
update(props)	更新

Modal 会向内部组件注入 modal 对象，该对象具有如下属性与方法：

名称	说明	参数
handleOk(callback)	注册响应 ok 按钮的钩子，返回值为 false 将阻止关闭	`callback` - 钩子
handleCancel(callback)	注册响应 cancel 按钮的钩子，返回值为 false 将阻止关闭	`callback` - 钩子
close(destroy)	关闭	`destroy` - 是否销毁
update(props)	更新
props	modal 的 props

Modal 模态框

Modal模态框

何时使用

代码演示

API

Modal

ModalProvider > v0.8.50

ModalContent <= v0.8.50

Modal.open

props.modal