Dialog

import { Dialog } from 'daybreak';

Basic usage

The required parameters for Dialog are visible and onClose,. You can pass the button you need to display to Dialog through the buttons parameter.

Dialog 必须的参数有 visible 和 onClose，你可以通过 buttons 参数向 Dialog 传递需要展示的按钮。

() => {
  const [visible, setVisible] = useState(false)
  return (
    <div>
      <Button type="button" onClick={() => setVisible(!visible)}>
        Open
      </Button>
      <Dialog
        visible={visible}
        buttons={[
          <Button type="button" onClick={() => setVisible(false)}>
            Yes
          </Button>,
          <Button type="button" onClick={() => setVisible(false)}>
            No
          </Button>,
        ]}
        onClose={() => setVisible(false)}
      >
        hello
      </Dialog>
    </div>
  )
}() => {
  const [visible, setVisible] = useState(false)
  return (
    <div>
      <Button type="button" onClick={() => setVisible(!visible)}>
        Open
      </Button>
      <Dialog
        visible={visible}
        buttons={[
          <Button type="button" onClick={() => setVisible(false)}>
            Yes
          </Button>,
          <Button type="button" onClick={() => setVisible(false)}>
            No
          </Button>,
        ]}
        onClose={() => setVisible(false)}
      >
        hello
      </Dialog>
    </div>
  )
}

Don't Close When Click the Mask

The default value of the parameter closeOnClickMask is true. When you set this attribute to false, Dialog will not be closed when you click on the mask layer.

closeOnClickMask 参数的默认值为 true，当你把该属性设置为 false 时，你点击遮罩层时将不会关闭 Dialog。

() => {
  const [visible, setVisible] = useState(false)
  return (
    <div>
      <Button type="button" onClick={() => setVisible(!visible)}>
        Open
      </Button>
      <Dialog
        visible={visible}
        buttons={[
          <Button type="button" onClick={() => setVisible(false)}>
            Yes
          </Button>,
          <Button type="button" onClick={() => setVisible(false)}>
            No
          </Button>,
        ]}
        onClose={() => setVisible(false)}
        closeOnClickMask={false}
      >
        hello
      </Dialog>
    </div>
  )
}() => {
  const [visible, setVisible] = useState(false)
  return (
    <div>
      <Button type="button" onClick={() => setVisible(!visible)}>
        Open
      </Button>
      <Dialog
        visible={visible}
        buttons={[
          <Button type="button" onClick={() => setVisible(false)}>
            Yes
          </Button>,
          <Button type="button" onClick={() => setVisible(false)}>
            No
          </Button>,
        ]}
        onClose={() => setVisible(false)}
        closeOnClickMask={false}
      >
        hello
      </Dialog>
    </div>
  )
}

Don't Close When the 'Esc' key is pressed

The default value of the closeOnEsc parameter is true. When you set the value of this attribute to false, Dialog will not be closed when you press the ESC key.

closeOnEsc 参数的默认值为 true，当你把该属性的值设置为 false 时，你按 ESC 键时将不会关闭 Dialog。

() => {
  const [visible, setVisible] = useState(false)
  return (
    <div>
      <Button type="button" onClick={() => setVisible(!visible)}>
        Open
      </Button>
      <Dialog
        visible={visible}
        buttons={[
          <Button type="button" onClick={() => setVisible(false)}>
            Yes
          </Button>,
          <Button type="button" onClick={() => setVisible(false)}>
            No
          </Button>,
        ]}
        onClose={() => setVisible(false)}
        closeOnEsc={false}
      >
        hello
      </Dialog>
    </div>
  )
}() => {
  const [visible, setVisible] = useState(false)
  return (
    <div>
      <Button type="button" onClick={() => setVisible(!visible)}>
        Open
      </Button>
      <Dialog
        visible={visible}
        buttons={[
          <Button type="button" onClick={() => setVisible(false)}>
            Yes
          </Button>,
          <Button type="button" onClick={() => setVisible(false)}>
            No
          </Button>,
        ]}
        onClose={() => setVisible(false)}
        closeOnEsc={false}
      >
        hello
      </Dialog>
    </div>
  )
}

Prevent background scrolling

The default value of the SecretentBackgroundScrolling parameter is true. When you set the value of this attribute to false, the page will not be scrollable when Dialog is displayed.

preventBackgroundScrolling 参数的默认值为 true，当你把该属性的值设置为 false 时，在 Dialog 处于展示状态时页面将是不可滚动的。

() => {
  const [visible, setVisible] = useState(false)
  return (
    <div>
      <Button type="button" onClick={() => setVisible(!visible)}>
        Open
      </Button>
      <Dialog
        visible={visible}
        buttons={[
          <Button type="button" onClick={() => setVisible(false)}>
            Yes
          </Button>,
          <Button type="button" onClick={() => setVisible(false)}>
            No
          </Button>,
        ]}
        onClose={() => setVisible(false)}
        preventBackgroundScrolling
      >
        hello
      </Dialog>
    </div>
  )
}() => {
  const [visible, setVisible] = useState(false)
  return (
    <div>
      <Button type="button" onClick={() => setVisible(!visible)}>
        Open
      </Button>
      <Dialog
        visible={visible}
        buttons={[
          <Button type="button" onClick={() => setVisible(false)}>
            Yes
          </Button>,
          <Button type="button" onClick={() => setVisible(false)}>
            No
          </Button>,
        ]}
        onClose={() => setVisible(false)}
        preventBackgroundScrolling
      >
        hello
      </Dialog>
    </div>
  )
}

Hide Mask

Setting the value of the hasMask property to false can hide the mask layer.

将 hasMask 属性的值设置为 false 可以隐藏遮罩层。

() => {
  const [visible, setVisible] = useState(false)
  return (
    <div>
      <Button type="button" onClick={() => setVisible(!visible)}>
        Open
      </Button>
      <Dialog
        visible={visible}
        hasMask={false}
        buttons={[
          <Button type="button" onClick={() => setVisible(false)}>
            Yes
          </Button>,
          <Button type="button" onClick={() => setVisible(false)}>
            No
          </Button>,
        ]}
        onClose={() => setVisible(false)}
      >
        hello
      </Dialog>
    </div>
  )
}() => {
  const [visible, setVisible] = useState(false)
  return (
    <div>
      <Button type="button" onClick={() => setVisible(!visible)}>
        Open
      </Button>
      <Dialog
        visible={visible}
        hasMask={false}
        buttons={[
          <Button type="button" onClick={() => setVisible(false)}>
            Yes
          </Button>,
          <Button type="button" onClick={() => setVisible(false)}>
            No
          </Button>,
        ]}
        onClose={() => setVisible(false)}
      >
        hello
      </Dialog>
    </div>
  )
}

You can call the Dialog component through the Modal function. If you need to override the setting of Modal, you can pass the parameters accepted by Dialog through the parameter override.

你可以通过 Modal 函数调用 Dialog 组件，如果需要覆盖 Modal 的设置，可以通过 override 参数传入 Dialog 接受的参数。

import { Modal } from 'daybreak';

param	type
content	`React.ReactNode`
buttons?	`Array<React.ReactElement>`
onClose?	`Function`
override?	`{ [k: string]: any; }`

() => {
  const openModal = () => {
    const close = Modal(<p>This is a modal.</p>, [
      <Button type="button" onClick={() => close()}>
        Close
      </Button>,
    ])
  }
  return (
    <Button type="button" onClick={openModal}>
      Open
    </Button>
  )
}() => {
  const openModal = () => {
    const close = Modal(<p>This is a modal.</p>, [
      <Button type="button" onClick={() => close()}>
        Close
      </Button>,
    ])
  }
  return (
    <Button type="button" onClick={openModal}>
      Open
    </Button>
  )
}

Alert

You can call the Dialog component through the Alert function. If you need to override the setting of Alert, you can pass the parameters accepted by Dialog through the parameter override.

你可以通过 Alert 函数调用 Dialog 组件，如果需要覆盖 Alert 的设置，可以通过 override 参数传入 Dialog 接受的参数。

import { Alert } from 'daybreak';

param	type
content	`React.ReactNode`
override?	`{ [k: string]: any; }`

<Button type="button" onClick={() => Alert('This is an alert.')}>
  Open
</Button><Button type="button" onClick={() => Alert('This is an alert.')}>
  Open
</Button>

You can call the Dialog component through the Confirm function. If you need to override the setting of Confirm, you can pass the parameters accepted by Dialog through the parameter override.

你可以通过 Confirm 函数调用 Dialog 组件，如果需要覆盖 Confirm 的设置，可以通过 override 参数传入 Dialog 接受的参数。

import { Confirm } from 'daybreak';

param	type
content	`React.ReactNode`
onOk?	`Function`
onCancel?	`Function`
override?	`{ [k: string]: any; }`

<Button type="button" onClick={() => Confirm('This is an confirm.')}>
  Open
</Button><Button type="button" onClick={() => Confirm('This is an confirm.')}>
  Open
</Button>