-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1013 from sandialabs/timeseries-wizard-react-conv…
…ersion Timeseries wizard react conversion
- Loading branch information
Showing
15 changed files
with
1,523 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
import * as React from "react"; | ||
|
||
/** | ||
* @member closingCallBack callback function for cleanup when closing the modal | ||
* @member title test for the top of the modal | ||
*/ | ||
export interface ModalContentProps { | ||
modalId: string, | ||
closingCallBack: Function; | ||
title: string; | ||
body: JSX.Element; | ||
footer: JSX.Element[]; | ||
} | ||
|
||
/** | ||
* not used | ||
*/ | ||
export interface ModalContentState {} | ||
|
||
export default class ModalContent extends React.Component< | ||
ModalContentProps, | ||
ModalContentState | ||
> { | ||
public constructor(props: ModalContentProps) { | ||
super(props); | ||
this.state = {}; | ||
} | ||
|
||
/** | ||
*close the modal and call the cleanup function | ||
* @memberof ModalContent | ||
*/ | ||
closeModal = (e: React.MouseEvent): void => { | ||
this.props.closingCallBack(); | ||
($("#" + this.props.modalId) as any).modal("hide"); | ||
}; | ||
|
||
render() { | ||
return ( | ||
<div> | ||
<div className="modal-header"> | ||
<h3 className="modal-title">{this.props.title}</h3> | ||
<button | ||
type="button" | ||
className="close" | ||
aria-label="Close" | ||
onClick={this.closeModal} | ||
> | ||
<span aria-hidden="true">×</span> | ||
</button> | ||
</div> | ||
<div className="modal-body" id="slycat-wizard"> | ||
{this.props.body} | ||
</div> | ||
<div className="modal-footer">{this.props.footer}</div> | ||
</div> | ||
); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
'use strict'; | ||
import * as React from 'react'; | ||
|
||
/** | ||
*/ | ||
export interface SlycatFormDropDownProps { | ||
checked: boolean | ||
onChange: Function | ||
value: string | ||
text: string | ||
style: any | ||
label: string | ||
} | ||
|
||
/** | ||
* not used | ||
*/ | ||
export interface SlycatFormDropDownState { | ||
} | ||
/** | ||
* class that creates a a form with checkboxes | ||
* some other process | ||
*/ | ||
export default class SlycatFormDropDown extends React.Component<SlycatFormDropDownProps, SlycatFormDropDownState> { | ||
/** | ||
* not used | ||
*/ | ||
public constructor(props:SlycatFormDropDownProps) { | ||
super(props) | ||
this.state = {} | ||
} | ||
|
||
onValueChange = (value) => { | ||
// localStorage.setItem("slycat-remote-controls-username", value); | ||
this.setState({value: value}); | ||
}; | ||
|
||
public render () { | ||
return ( | ||
<div className='form-group row mb-3'> | ||
<label className='col-sm-2 col-form-label'>{this.props.label}</label> | ||
<div className='col-sm-9'> | ||
<select | ||
className='form-control' type='text' | ||
value={this.state.value?this.state.value:""} | ||
onChange={(e)=>this.onValueChange(e.target.value)} /> | ||
</div> | ||
</div> | ||
); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
'use strict'; | ||
import * as React from 'react'; | ||
|
||
/** | ||
*/ | ||
export interface SlycatNumberInputProps { | ||
value: number | ||
style?: any | ||
label: string | ||
callBack: Function | ||
id?: string | ||
warning?: string | ||
} | ||
|
||
/** | ||
* not used | ||
*/ | ||
export interface SlycatNumberInputState { | ||
value: number | ||
} | ||
/** | ||
* class that creates a a form with checkboxes | ||
* some other process | ||
*/ | ||
export default class SlycatNumberInput extends React.Component<SlycatNumberInputProps, SlycatNumberInputState> { | ||
/** | ||
* not used | ||
*/ | ||
public constructor(props:SlycatNumberInputProps) { | ||
super(props) | ||
this.state = { | ||
value: props.value | ||
} | ||
} | ||
|
||
onValueChange = (value:number) => { | ||
// localStorage.setItem("slycat-remote-controls-username", value); | ||
if(value === '') { | ||
value = 1; | ||
} | ||
this.setState({value: value}); | ||
this.props.callBack(value); | ||
}; | ||
|
||
public render () { | ||
return ( | ||
<div className='form-group row mb-3'> | ||
<label className='col-sm-2 col-form-label'>{this.props.label}</label> | ||
<div className='col-sm-9'> | ||
<input | ||
id={this.props.id} | ||
className='form-control' type='number' min={1} | ||
value={this.state.value} | ||
onChange={(e)=>this.onValueChange(e.target.value)} | ||
/> | ||
<div className="invalid-feedback"> | ||
{this.props.warning} | ||
</div> | ||
</div> | ||
</div> | ||
); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
'use strict'; | ||
import * as React from 'react'; | ||
|
||
/** | ||
*/ | ||
export interface SlycatTextInputProps { | ||
onChange?: Function | ||
value: string | ||
style?: any | ||
label: string | ||
callBack: Function | ||
id?: string | ||
warning?: string | ||
} | ||
|
||
/** | ||
* not used | ||
*/ | ||
export interface SlycatTextInputState { | ||
value: string | ||
} | ||
/** | ||
* class that creates a a form with checkboxes | ||
* some other process | ||
*/ | ||
export default class SlycatTextInput extends React.Component<SlycatTextInputProps, SlycatTextInputState> { | ||
/** | ||
* not used | ||
*/ | ||
public constructor(props:SlycatTextInputProps) { | ||
super(props) | ||
this.state = { | ||
value: props.value | ||
} | ||
} | ||
|
||
onValueChange = (value:string) => { | ||
// localStorage.setItem("slycat-remote-controls-username", value); | ||
// this.setState({value: value}); | ||
this.setState({value:value}); | ||
this.props.callBack(value); | ||
}; | ||
|
||
public render () { | ||
return ( | ||
<div className='form-group row mb-3'> | ||
<label className='col-sm-2 col-form-label'>{this.props.label}</label> | ||
<div className='col-sm-9'> | ||
<input | ||
id={this.props.id} | ||
className='form-control' type='text' | ||
value={this.state.value} | ||
onChange={(e)=>this.onValueChange(e.target.value)} | ||
/> | ||
<div className="invalid-feedback"> | ||
{this.props.warning} | ||
</div> | ||
</div> | ||
</div> | ||
); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,77 @@ | ||
'use strict'; | ||
import * as React from 'react'; | ||
|
||
/** | ||
*/ | ||
export interface SlycatTimeInputProps { | ||
hours: number | ||
minutes: number | ||
minCallBack: Function | ||
hourCallBack: Function | ||
label: string | ||
} | ||
|
||
/** | ||
* not used | ||
*/ | ||
export interface SlycatTimeInputState { | ||
hours: number | ||
minutes: number | ||
} | ||
/** | ||
* class that creates a a form with checkboxes | ||
* some other process | ||
*/ | ||
export default class SlycatTimeInput extends React.Component<SlycatTimeInputProps, SlycatTimeInputState> { | ||
/** | ||
* not used | ||
*/ | ||
public constructor(props:SlycatTimeInputProps) { | ||
super(props) | ||
this.state = { | ||
hours: props.hours, | ||
minutes: props.minutes | ||
} | ||
} | ||
|
||
onHourChange = (value) => { | ||
// localStorage.setItem("slycat-remote-controls-username", value); | ||
// this.setState({value: value}); | ||
if (value === '') { | ||
value = 0; | ||
} | ||
this.setState({hours:value}); | ||
this.props.hourCallBack(value); | ||
}; | ||
|
||
onMinuteChange = (value) => { | ||
if (value === '') { | ||
value = 0; | ||
} | ||
this.setState({minutes:value}); | ||
this.props.minCallBack(value); | ||
} | ||
|
||
public render () { | ||
return ( | ||
<div className='form-group row mb-3'> | ||
<label className='col-sm-2 col-form-label'>{this.props.label}</label> | ||
<div className='col-sm-2'> | ||
<input | ||
className='form-control' type='number' min={0} | ||
value={this.state.hours} | ||
onChange={(e)=>this.onHourChange(e.target.value)} | ||
/> | ||
Hours | ||
</div> | ||
<div className='col-sm-2'> | ||
<input className='form-control' type='number' min={0} | ||
value={this.state.minutes} | ||
onChange={(e)=>this.onMinuteChange(e.target.value)} | ||
/> | ||
Minutes | ||
</div> | ||
</div> | ||
); | ||
} | ||
} |
Oops, something went wrong.