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

3 years ago
3 years ago
3 years ago
3 years ago
  1. /* eslint react/prop-types: 0 */
  2. import React, { Component } from "react";
  3. import ModalConfirm from "./ModalConfirm";
  4. class ButtonWithConfirm extends Component {
  5. constructor(props) {
  6. super(props);
  7. this._modalConfirm = React.createRef();
  8. this.state = {
  9. focused: false
  10. };
  11. }
  12. getComponent = key => {
  13. return this.props.children.filter(comp => {
  14. return comp.key === key;
  15. });
  16. };
  17. render() {
  18. const classNames = this.props.className.split(" ");
  19. let classNameForDiv = "";
  20. let classNameForButton = "";
  21. classNames.forEach(function(className) {
  22. if (
  23. className === "input-group-prepend" ||
  24. className === "input-group-append"
  25. ) {
  26. classNameForDiv += " " + className;
  27. } else {
  28. classNameForButton += " " + className;
  29. }
  30. });
  31. return (
  32. <div className={classNameForDiv}>
  33. <button
  34. type="button"
  35. className={classNameForButton}
  36. onClick={() => {
  37. this._modalConfirm.current.toggle();
  38. }}
  39. tabIndex={this.props.tabIndex}
  40. >
  41. {this.getComponent("button")}
  42. </button>
  43. <ModalConfirm
  44. className={this.props.modalClassName}
  45. ref={this._modalConfirm}
  46. >
  47. <div key="title">{this.getComponent("modal-title")}</div>
  48. <div key="body">{this.getComponent("modal-body")}</div>
  49. <div key="confirm">{this.getComponent("modal-confirm")}</div>
  50. <div key="cancel">{this.getComponent("modal-cancel")}</div>
  51. </ModalConfirm>
  52. </div>
  53. );
  54. }
  55. }
  56. export default ButtonWithConfirm;