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.
62 lines
1.6 KiB
62 lines
1.6 KiB
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
|
|
type="button"
|
|
className={classNameForButton}
|
|
onClick={() => {
|
|
this._modalConfirm.current.toggle();
|
|
}}
|
|
tabIndex={this.props.tabIndex}
|
|
>
|
|
{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;
|