packages/react/test/base/src/pages/overlay-components/IonModalConditional.tsx - main - githubmirror/ionic

packages/react/test/base/src/pages/overlay-components/IonModalConditional.tsx

48 строк1 KB

Liam DeBeasi

test(react): migrate to builder architecture (#26959)

17 мар 2023, 23:21

17 мар 2023, 23:21e3a1d7b

import { IonButton, IonContent, IonModal } from '@ionic/react';
import { useRef } from 'react';
import { useState } from 'react';

/**
 * Issue: https://github.com/ionic-team/ionic-framework/issues/25590
 *
 * Exception is thrown when IonModal is conditionally rendered inline.
 */
const IonModalConditional = () => {
  const [showIonModal, setShowIonModal] = useState(false);
  const [isOpen, setIsOpen] = useState(true);

  const modal = useRef<HTMLIonModalElement>(null);

  return (
    <IonContent>
      <IonButton
        id="renderModalBtn"
        onClick={() => {
          setShowIonModal(true);
          setIsOpen(true);
        }}
      >
        Render Modal
      </IonButton>
      {showIonModal && (
        <IonModal
          ref={modal}
          isOpen={isOpen}
          onDidDismiss={() => {
            setIsOpen(false);
            setShowIonModal(false);
          }}
        >
          <IonContent>
            Modal Content
            <IonButton id="dismissModalBtn" onClick={() => modal.current!.dismiss()}>
              Close
            </IonButton>
          </IonContent>
        </IonModal>
      )}
    </IonContent>
  );
};

export default IonModalConditional;