2.1.13 • Published 5 years ago
the-dialog v2.1.13
the-dialog
Dialog for the-components
Installation
$ npm install the-dialog --save
Usage
'use strict'
import React from 'react'
import { TheDialog, TheOkDialog, TheYesNoDialog, TheConfirmDialog, TheDialogStyle } from 'the-dialog'
import { TheButton, TheButtonStyle } from 'the-button'
import { TheSpinStyle } from 'the-spin'
import { TheInputStyle } from 'the-input'
class ExampleComponent extends React.PureComponent {
constructor (props) {
super(props)
this.state = {
dialog: false,
dialogSpinning: false,
yesNoDialog: false,
okDialog: false,
confirmDialog: false,
confirmSpinning: false
}
}
render () {
const {state} = this
return (
<div>
<TheInputStyle/>
<TheButtonStyle/>
<TheSpinStyle/>
<div style={{textAlign: 'center', padding: 8}}>
<TheButton onClick={() => {
this.toggleDialog(true)
this.setState({dialogSpinning: true})
setTimeout(() => this.setState({dialogSpinning: false}), 800)
}}>Show dialog</TheButton>
<TheButton onClick={() => this.toggleOkDialog(true)}>Show ok dialog</TheButton>
<TheButton onClick={() => this.toggleYesNoDialog(true)}>Show yes-no dialog</TheButton>
<TheButton onClick={() => this.toggleConfirmDialog(true)}>Show confirm dialog</TheButton>
</div>
<TheDialogStyle/>
<TheDialog present={state.dialog}
onClose={() => this.toggleDialog(false)}
title='Hey'
lead='This is a lead'
spinning={state.dialogSpinning}
>
<div>
Scroll me!
<div style={{height: 600}}/>
There you are.
</div>
</TheDialog>
<TheOkDialog present={state.okDialog}
onClose={() => this.toggleOkDialog(false)}
zIndex={124}
lead='This is some result'
/>
<TheYesNoDialog present={state.yesNoDialog}
onClose={() => this.toggleYesNoDialog(false)}
onYes={() => this.toggleYesNoDialog(false)}
onNo={() => this.toggleYesNoDialog(false)}
icon={'fas fa-car'}
title='Hey'>
<div>
Scroll me!
<div style={{height: 600}}></div>
There you are.
</div>
</TheYesNoDialog>
<TheConfirmDialog present={state.confirmDialog}
spinning={state.confirmSpinning}
title='A Confirm Dialog'
onClose={() => this.toggleConfirmDialog(false)}
onSubmit={() => {
this.toggleConfirmSpinning(true)
setTimeout(() => {
this.toggleConfirmDialog(false)
this.toggleConfirmSpinning(false)
}, 2000)
}}
>
Do something danger!
</TheConfirmDialog>
</div>
)
}
toggleDialog (enabled) {
const s = this
s.setState({
dialog: enabled
})
}
toggleYesNoDialog (enabled) {
const s = this
s.setState({
yesNoDialog: enabled
})
}
toggleOkDialog (enabled) {
const s = this
s.setState({
okDialog: enabled
})
}
toggleConfirmDialog (enabled) {
const s = this
s.setState({
confirmDialog: enabled
})
}
toggleConfirmSpinning (enabled) {
const s = this
s.setState({
confirmSpinning: enabled
})
}
}
export default ExampleComponent
Components
TheConfirmDialog
Confirm Dialog
Props
Name | Type | Description | Default |
---|---|---|---|
checkText | string | Text of NO button | "I'm sure to do that" |
onClose | func | Close handler | () => null |
onSubmit | func | Handler for submit | null |
present | bool | Shows the dialog | false |
spinning | bool | Show spin | false |
submitText | string | Text of submit button | 'Submit' |
title | string | Dialog Title | null |
TheDialog
Dialog for the-components
Props
Name | Type | Description | Default |
---|---|---|---|
hideCloseButton | bool | Hide Close Button | false |
icon | string | Dialog icon | null |
lead | node | Lead text of dialog body |
|
onClose | func | Close handler | () => null |
present | bool | Shows the dialog | false |
spinning | bool | Show spin | false |
title | node | Dialog Title | null |
zIndex | number | Z index of dialog | null |
role | 'dialog' |
TheDialogStyle
Style for TheDialog
Props
Name | Type | Description | Default |
---|---|---|---|
options | object | Style options | {} |
TheOkDialog
Ok Dialog
Props
Name | Type | Description | Default |
---|---|---|---|
okText | string | Text for OK button | 'OK' |
onClose | func | Close handler | () => null |
present | bool | false | |
spinning | bool | Show spin | false |
title | string | Dialog Title | null |
role | 'alertdialog' |
TheYesNoDialog
Yes No Dialog
Props
Name | Type | Description | Default |
---|---|---|---|
noText | string | Text of NO button | 'No' |
onClose | func | Close handler | () => null |
onNo | func | Handler for tapping NO | null |
onYes | func | Handler for tapping YES | null |
present | bool | false | |
spinning | bool | Show spin | false |
title | string | Dialog Title | null |
yesText | string | Text of YES button | 'Yes' |
License
This software is released under the MIT License.
Links
2.1.13
5 years ago
2.1.12
5 years ago
2.1.11
5 years ago
2.1.10
5 years ago
2.1.9
5 years ago
2.1.8
5 years ago
2.1.7
5 years ago
2.1.6
5 years ago
2.1.5
5 years ago
2.1.4
5 years ago
2.1.3
5 years ago
2.1.2
5 years ago
2.1.1
6 years ago
2.1.0
6 years ago
2.0.20
6 years ago
2.0.19
6 years ago
2.0.18
6 years ago
2.0.17
6 years ago
2.0.16
6 years ago
2.0.15
6 years ago
2.0.14
6 years ago
2.0.13
6 years ago
2.0.12
6 years ago
2.0.11
6 years ago
2.0.10
6 years ago
2.0.9
6 years ago
2.0.8
6 years ago
2.0.7
6 years ago
2.0.6
6 years ago
2.0.5
6 years ago
2.0.4
6 years ago
2.0.3
6 years ago
2.0.1
6 years ago
2.0.0
6 years ago
1.3.4
6 years ago
1.3.3
7 years ago
1.3.2
7 years ago
1.3.1
7 years ago
1.3.0
7 years ago
1.2.4
7 years ago
1.2.3
7 years ago
1.2.2
7 years ago
1.2.1
7 years ago
1.2.0
7 years ago
1.1.1
7 years ago
1.1.0
7 years ago
1.0.0
7 years ago