Dialog

• Lumin
• iOS
• Android

​

Description

The Dialog is a container where you can place other UI components - such as layouts, buttons, or text - as child nodes.

Example

import React from "react";

import { View, Dialog, Text, Scene, Prism } from "magic-script-components";

export default class MyApp extends React.Component {

state = {

requestUserConfirmation: true,

dismissNotification: false,

};

onDialogCanceled = event => {

console.log("User declined !");

this.setState({

requestUserConfirmation: false

});

};

onDialogConfirmed = event => {

console.log("User confirmed !");

this.setState({

requestUserConfirmation: false,

dismissNotification: true

});

};

render() {

const dialog = this.state.requestUserConfirmation

? (<Dialog

buttonType="text-with-icon"

type="dual-action"

layout="wide"

cancelIcon="close"

cancelText="No"

confirmIcon="check"

confirmText="Yes"

title="Please confirm:"

message="Dismiss the notification ?"

onDialogCanceled={this.onDialogCanceled}

onDialogConfirmed={this.onDialogConfirmed}

/>)

: undefined;

const notification = this.state.dismissNotification

? undefined

: (<Text key='notification' textSize={0.035} text='You have recieved message!' localPosition={[-0.175, 0.3, 0]} />);

return (

<Scene>

<Prism size={[1, 1, 0.2]} >

<View name='main-view' alignment={'center-center'}>

<Text key='notification-center' textSize={0.05} text='Notification Center' localPosition={[-0.18, 0.4, 0]} />

{notification}

{dialog}

</View>

</Prism>

</Scene>

);

}

}

Common Events

Common Properties

Create Properties

Name	Type	Default Value	Required	Description
title	string	n/a	N	The dialog title text. Use an empty string to hide the title.
message	string	n/a	N	The dialog message text. Use an empty string to hide the message.
type	string	dual-action	N	The type of dialog.
layout	string	standard	N	The dialog layout preference.
scrolling	boolean	false	N	Creates a new dialog with vertical scrolling content.

Dialog Type options: DialogType

DialogLayout options: DialogLayout

Element Properties

Name	Type	Default Value	Description
buttonType	string	text	Sets the button type to use for the dialog.
cancelText	string	Cancel	Sets the UTF-8 encoded Cancel button text, default is Cancel.
cancelIcon	string	n/a	Sets the Confirm button icon.
confirmText	string	Confirm	Sets the UTF-8 encoded Confirm button text, default is Confirm.
confirmIcon	string	n/a	Sets the Confirm button icon.
expireTime	number	n/a	Sets the expiration time for the dialog in seconds. For modeless timed dialogs, and optionally for other dialogs, a timer can be set that sends out the onTimeExpired event when the dialog time expires. The dialog does not destroy itself and must be handled by the caller using the event.

buttonType options: ButtonType

cancelIcon / confirmIcon options: IconType

Known Issues:

IOS, missing negative button in dialog