You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
55 lines
1.7 KiB
55 lines
1.7 KiB
5 years ago
|
import React, {Component} from "react";
|
||
|
import ModalConfirm from "./ModalConfirm";
|
||
|
|
||
|
|
||
|
class ButtonWithConfirm extends Component {
|
||
|
constructor(props) {
|
||
|
super(props);
|
||
|
this._modalConfirm=React.createRef();
|
||
|
this.state={
|
||
|
focused:false
|
||
|
}
|
||
|
}
|
||
|
|
||
|
getComponent= (key) => {
|
||
|
return this.props.children.filter( (comp) => {
|
||
|
return comp.key === key;
|
||
|
});
|
||
|
};
|
||
|
|
||
|
render() {
|
||
|
const classNames=this.props.className.split(" ");
|
||
|
|
||
|
let classNameForDiv="";
|
||
|
let classNameForButton="";
|
||
|
classNames.forEach(function(className){
|
||
|
if(className==="input-group-prepend" || className==="input-group-append" ){
|
||
|
classNameForDiv+=" "+className;
|
||
|
}else{
|
||
|
classNameForButton+=" "+className;
|
||
|
}
|
||
|
});
|
||
|
|
||
|
|
||
|
|
||
|
return (
|
||
|
<div className={classNameForDiv}>
|
||
|
<button
|
||
5 years ago
|
type="button"
|
||
5 years ago
|
className={classNameForButton}
|
||
|
onClick={() => { this._modalConfirm.current.toggle() }}
|
||
5 years ago
|
tabIndex={this.props.tabIndex}
|
||
5 years ago
|
>{this.getComponent("button")}
|
||
|
</button>
|
||
|
<ModalConfirm className={this.props.modalClassName} ref={this._modalConfirm}>
|
||
|
<div key="title">{this.getComponent("modal-title")}</div>
|
||
|
<div key="body">{this.getComponent("modal-body")}</div>
|
||
|
<div key="confirm">{this.getComponent("modal-confirm")}</div>
|
||
|
<div key="cancel">{this.getComponent("modal-cancel")}</div>
|
||
|
</ModalConfirm>
|
||
|
</div>
|
||
|
);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
export default ButtonWithConfirm;
|