Version: latest

Dialog

<Dialog> on lumin

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

NameTypeDefault ValueRequiredDescription
titlestringn/aNThe dialog title text. Use an empty string to hide the title.
messagestringn/aNThe dialog message text. Use an empty string to hide the message.
typestringdual-actionNThe type of dialog.
layoutstringstandardNThe dialog layout preference.
scrollingbooleanfalseNCreates a new dialog with vertical scrolling content.

Dialog Type options: DialogType

DialogLayout options: DialogLayout

Element Properties

NameTypeDefault ValueDescription
buttonTypestringtextSets the button type to use for the dialog.
cancelTextstringCancelSets the UTF-8 encoded Cancel button text, default is Cancel.
cancelIconstringn/aSets the Confirm button icon.
confirmTextstringConfirmSets the UTF-8 encoded Confirm button text, default is Confirm.
confirmIconstringn/aSets the Confirm button icon.
expireTimenumbern/aSets 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