{"size": 5175, "ext": "js", "max_stars_repo_path": "docs/pages/components/modal/code-refrence.js", "max_stars_repo_name": "asterisx/reactify-ui", "max_stars_repo_stars_event_min_datetime": "2019-07-14T08:16:16.000Z", "max_stars_repo_stars_event_max_datetime": "2019-07-21T10:50:29.000Z", "max_issues_repo_path": "docs/pages/components/modal/code-refrence.js", "max_issues_repo_name": "asterisx/reactify", "max_issues_repo_issues_event_min_datetime": "2019-06-24T16:10:10.000Z", "max_issues_repo_issues_event_max_datetime": "2021-12-09T01:02:47.000Z", "max_forks_repo_path": "docs/pages/components/modal/code-refrence.js", "max_forks_repo_name": "asterisx/reactify", "max_forks_repo_forks_event_min_datetime": "2022-01-10T04:47:19.000Z", "max_forks_repo_forks_event_max_datetime": "2022-01-10T04:47:19.000Z"}
{"max_stars_count": 3, "max_issues_count": 6, "max_forks_count": 1, "avg_line_length": 19.8275862069, "max_line_length": 90, "alphanum_fraction": 0.5344927536}
const hideBackdropCode = `
<Button
onClick={() => this.setState({ hideBackdropModalOpen: true })}
>
  Open Modal
</Button>
{this.state.hideBackdropModalOpen && (
<Modal
hideBackDrop
onClose={() => this.setState({ hideBackdropModalOpen: false })}
>
{closeToggle => (
  <div
    style={{
      width: '100%',
      height: '250px',
      display: 'flex',
      justifyContent: 'center',
      alignContent: 'center',
      alignItems: 'center',
      background: 'white',
    }}
  >
    <input
      style={{ fontSize: '20px' }}
      type="button"
      value="Close"
      onClick={closeToggle}
    />
  </div>
)}
</Modal>
)}
`;

const onCloseCode = `
<Button
  onClick={() => this.setState({ onCloseModal: true })}
>
    Open Modal
</Button>
{this.state.onCloseModal && (
<Modal top onClose={() => { this.setState({ onCloseModal: false }); alert('Closed'); }}>
  {closeToggle => (
    <div
      style={{
        width: '100%',
        height: '250px',
        display: 'flex',
        justifyContent: 'center',
        alignContent: 'center',
        alignItems: 'center',
        background: 'white',
      }}
    >
      <input
        style={{ fontSize: '20px' }}
        type="button"
        value="Close"
        onClick={closeToggle}
      />
    </div>
  )}
</Modal>
)}
`;

const modalSizeCode = `
<Button
  onClick={() => this.setState({ smallModalOpen: true })}
>
  Open Small Modal
</Button>
{this.state.smallModalOpen && (
<Modal small onClose={() => this.setState({ smallModalOpen: false })}>
  {closeToggle => (
    <div
      style={{
        width: '100%',
        height: '250px',
        display: 'flex',
        justifyContent: 'center',
        alignContent: 'center',
        alignItems: 'center',
        background: 'white',
      }}
    >
      <input
        style={{ fontSize: '20px' }}
        type="button"
        value="Close"
        onClick={closeToggle}
      />
    </div>
  )}
</Modal>
)}

<Button
onClick={() => this.setState({ mediumModalOpen: true })}
>
  Open Medium Modal
</Button>
{this.state.mediumModalOpen && (
<Modal medium onClose={() => this.setState({ mediumModalOpen: false })}>
{closeToggle => (
  <div
    style={{
      width: '100%',
      height: '250px',
      display: 'flex',
      justifyContent: 'center',
      alignContent: 'center',
      alignItems: 'center',
      background: 'white',
    }}
  >
    <input
      style={{ fontSize: '20px' }}
      type="button"
      value="Close"
      onClick={closeToggle}
    />
  </div>
)}
</Modal>
)}

<Button
  onClick={() => this.setState({ largeModalOpen: true })}
>
    Open Large Modal
</Button>
{this.state.largeModalOpen && (
<Modal large onClose={() => this.setState({ largeModalOpen: false })}>
  {closeToggle => (
    <div
      style={{
        width: '100%',
        height: '250px',
        display: 'flex',
        justifyContent: 'center',
        alignContent: 'center',
        alignItems: 'center',
        background: 'white',
      }}
    >
      <input
        style={{ fontSize: '20px' }}
        type="button"
        value="Close"
        onClick={closeToggle}
      />
    </div>
  )}
</Modal>
)}

<Button
  onClick={() => this.setState({ customSizeModal: true })}
>
    Open Custom Size Modal
</Button>
{this.state.customSizeModal && (
<Modal style={{ width: '90%' }} onClose={() => this.setState({ customSizeModal: false })}>
  {closeToggle => (
    <div
      style={{
        width: '100%',
        height: '250px',
        display: 'flex',
        justifyContent: 'center',
        alignContent: 'center',
        alignItems: 'center',
        background: 'white',
      }}
    >
      <input
        style={{ fontSize: '20px' }}
        type="button"
        value="Close"
        onClick={closeToggle}
      />
    </div>
  )}
</Modal>
)}
`;

const notAutoCloseCode = `
<Button
onClick={() => this.setState({ autoCloseModalOpen: true })}
>
  Open Modal
</Button>
{this.state.autoCloseModalOpen && (
<Modal autoClose={false}>
{closeToggle => (
  <div
    style={{
      width: '100%',
      height: '250px',
      display: 'flex',
      justifyContent: 'center',
      alignContent: 'center',
      alignItems: 'center',
      background: 'white',
    }}
  >
    <input
      style={{ fontSize: '20px' }}
      type="button"
      value="Close"
      onClick={
          () => {
            this.setState({ autoCloseModalOpen: false });
            closeToggle();
          }}
    />
  </div>
)}
</Modal>
)}
`;

const simpleCode = `
<Button onClick={() => this.setState({ simpleModalOpen: true })}>Open Modal</Button>
{this.state.simpleModalOpen && (
<Modal onClose={() => this.setState({ simpleModalOpen: false })}>
  {closeToggle => (
    <div
      style={{
        width: '100%',
        height: '250px',
        display: 'flex',
        justifyContent: 'center',
        alignContent: 'center',
        alignItems: 'center',
        background: 'white',
      }}
    >
      <input
        style={{ fontSize: '20px' }}
        type="button"
        value="Close"
        onClick={closeToggle}
      />
    </div>
  )}
</Modal>
)}
`;

export {
  hideBackdropCode,
  onCloseCode,
  modalSizeCode,
  notAutoCloseCode,
  simpleCode,
};
