text: import React from "react";
  import {Button, Modal, ModalHeader, ModalBody, ModalFooter} from "../../src";
  
  class ModalExample extends React.Component {
      state = {
          modal: false,
          size: ""
      };
  
      toggle = (size = "") => {
          this.setState({
              modal: !this.state.modal,
              size
          });
      };
  
      renderLongBody = () => (
          <div>
              <p>
                  Cras mattis consectetur purus sit amet fermentum. Cras justo
                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
                  risus, porta ac consectetur ac, vestibulum at eros.
              </p>
              <p>
                  Praesent commodo cursus magna, vel scelerisque nisl consectetur
                  et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus
                  dolor auctor.
              </p>
              <p>
                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo
                  cursus magna, vel scelerisque nisl consectetur et. Donec sed
                  odio dui. Donec ullamcorper nulla non metus auctor fringilla.
              </p>
              <p>
                  Cras mattis consectetur purus sit amet fermentum. Cras justo
                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
                  risus, porta ac consectetur ac, vestibulum at eros.
              </p>
              <p>
                  Praesent commodo cursus magna, vel scelerisque nisl consectetur
                  et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus
                  dolor auctor.
              </p>
              <p>
                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo
                  cursus magna, vel scelerisque nisl consectetur et. Donec sed
                  odio dui. Donec ullamcorper nulla non metus auctor fringilla.
              </p>
              <p>
                  Cras mattis consectetur purus sit amet fermentum. Cras justo
                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
                  risus, porta ac consectetur ac, vestibulum at eros.
              </p>
              <p>
                  Praesent commodo cursus magna, vel scelerisque nisl consectetur
                  et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus
                  dolor auctor.
              </p>
              <p>
                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo
                  cursus magna, vel scelerisque nisl consectetur et. Donec sed
                  odio dui. Donec ullamcorper nulla non metus auctor fringilla.
              </p>
              <p>
                  Cras mattis consectetur purus sit amet fermentum. Cras justo
                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
                  risus, porta ac consectetur ac, vestibulum at eros.
              </p>
              <p>
                  Praesent commodo cursus magna, vel scelerisque nisl consectetur
                  et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus
                  dolor auctor.
              </p>
              <p>
                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo
                  cursus magna, vel scelerisque nisl consectetur et. Donec sed
                  odio dui. Donec ullamcorper nulla non metus auctor fringilla.
              </p>
              <p>
                  Cras mattis consectetur purus sit amet fermentum. Cras justo
                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
                  risus, porta ac consectetur ac, vestibulum at eros.
              </p>
              <p>
                  Praesent commodo cursus magna, vel scelerisque nisl consectetur
                  et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus
                  dolor auctor.
              </p>
              <p>
                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo
                  cursus magna, vel scelerisque nisl consectetur et. Donec sed
                  odio dui. Donec ullamcorper nulla non metus auctor fringilla.
              </p>
              <p>
                  Cras mattis consectetur purus sit amet fermentum. Cras justo
                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
                  risus, porta ac consectetur ac, vestibulum at eros.
              </p>
              <p>
                  Praesent commodo cursus magna, vel scelerisque nisl consectetur
                  et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus
                  dolor auctor.
              </p>
              <p>
                  Aenean lacinia bibendum nulla sed consectetur. Praesent commodo
                  cursus magna, vel scelerisque nisl consectetur et. Donec sed
                  odio dui. Donec ullamcorper nulla non metus auctor fringilla.
              </p>
          </div>
      );
  
      render() {
          const {long, centered, fade, sizing} = this.props;
  
          return (
              <div>
                  {sizing ? (
                      <div>
                          <Button
                              color="primary"
                              onClick={() => this.toggle("lg")}
                              className="mr-3"
                          >
                              Modale grande
                          </Button>
                          <Button
                              color="primary"
                              onClick={() => this.toggle("sm")}
                          >
                              Modale piccola
                          </Button>
                      </div>
                  ) : (
                      <Button color="primary" onClick={() => this.toggle()}>
                          Lancia la demo della modale
                      </Button>
                  )}
  
                  <Modal
                      fade={fade}
                      size={this.state.size}
                      centered={centered}
                      isOpen={this.state.modal}
                      toggle={this.toggle}
                      className={this.props.className}
                  >
                      <ModalHeader toggle={this.toggle}>
                          Titolo della modale
                      </ModalHeader>
                      <ModalBody>
                          {long ? (
                              this.renderLongBody()
                          ) : (
                              <p>
                                  Woohoo, stai leggendo questo testo in una
                                  modale!
                              </p>
                          )}
                      </ModalBody>
                      <ModalFooter>
                          <Button color="secondary" onClick={this.toggle}>
                              Chiudi
                          </Button>
                          <Button color="primary" onClick={this.toggle}>
                              Salva modifiche
                          </Button>
                      </ModalFooter>
                  </Modal>
              </div>
          );
      }
  }
  
  export default ModalExample;
  