Merge pull request #61 from FrameMuse/51-add-indicators-to-modalwindow

51 add indicators to modalwindow

Author: FrameMuse

coverage/clover.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<coverage generated="1677037862849" clover="3.2.0">
-  <project timestamp="1677037862849" name="All files">
+<coverage generated="1677109566641" clover="3.2.0">
+  <project timestamp="1677109566641" name="All files">
     <metrics statements="114" coveredstatements="83" conditionals="68" coveredconditionals="36" methods="40" coveredmethods="30" elements="222" coveredelements="149" complexity="0" loc="114" ncloc="114" packages="1" files="8" classes="8"/>
     <file name="container.new.tsx" path="/home/kotto/github/react-modal-global/src/container.new.tsx">
       <metrics statements="13" coveredstatements="13" conditionals="16" coveredconditionals="15" methods="4" coveredmethods="4"/>
@@ -14,9 +14,9 @@
       <line num="24" count="62" type="stmt"/>
       <line num="25" count="62" type="cond" truecount="2" falsecount="0"/>
       <line num="29" count="62" type="cond" truecount="2" falsecount="0"/>
-      <line num="34" count="62" type="stmt"/>
-      <line num="46" count="47" type="stmt"/>
-      <line num="47" count="2" type="stmt"/>
+      <line num="35" count="62" type="stmt"/>
+      <line num="47" count="47" type="stmt"/>
+      <line num="48" count="2" type="stmt"/>
     </file>
     <file name="container.tsx" path="/home/kotto/github/react-modal-global/src/container.tsx">
       <metrics statements="10" coveredstatements="0" conditionals="14" coveredconditionals="0" methods="4" coveredmethods="0"/>

coverage/lcov.info

@@ -2,8 +2,8 @@ TN:
 SF:src/container.new.tsx
 FN:14,ModalContainer
 FN:16,(anonymous_1)
-FN:46,(anonymous_2)
-FN:46,(anonymous_3)
+FN:47,(anonymous_2)
+FN:47,(anonymous_3)
 FNF:4
 FNH:4
 FNDA:62,ModalContainer
@@ -20,9 +20,9 @@ DA:22,62
 DA:24,62
 DA:25,62
 DA:29,62
-DA:34,62
-DA:46,47
-DA:47,2
+DA:35,62
+DA:47,47
+DA:48,2
 LF:13
 LH:13
 BRDA:17,0,0,28
@@ -35,12 +35,12 @@ BRDA:25,3,0,30
 BRDA:25,3,1,32
 BRDA:29,4,0,31
 BRDA:29,4,1,31
-BRDA:36,5,0,62
-BRDA:36,5,1,23
-BRDA:40,6,0,62
-BRDA:40,6,1,31
-BRDA:48,7,0,1
-BRDA:48,7,1,1
+BRDA:37,5,0,62
+BRDA:37,5,1,23
+BRDA:41,6,0,62
+BRDA:41,6,1,31
+BRDA:49,7,0,1
+BRDA:49,7,1,1
 BRF:16
 BRH:15
 end_of_record

src/__tests__/__snapshots__/useModalContext.spec.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`useModalContext should return isClosed: false 1`] = `
+exports[`useModalContext should return \`closed\`: false 1`] = `
 <div>
   <div
     aria-hidden="false"
@@ -18,7 +18,7 @@ exports[`useModalContext should return isClosed: false 1`] = `
 </div>
 `;
 
-exports[`useModalContext should return isClosed: true 1`] = `
+exports[`useModalContext should return \`closed\`: true 1`] = `
 <div>
   <div
     aria-hidden="true"

src/__tests__/useModalContext.spec.tsx

@@ -24,9 +24,9 @@ describe("useModalContext", () => {
     expectToThrow(renderCallback, /useModalContext must be used within a modalContext/)
   })
 
-  it("should return isClosed: false", () => {
+  it("should return `closed`: false", () => {
     function ComponentWithModalContext() {
-      const { isClosed: closed } = useModalContext()
+      const { closed: closed } = useModalContext()
 
       return <span>{String(closed)}</span>
     }
@@ -40,9 +40,9 @@ describe("useModalContext", () => {
     expect(container).toMatchSnapshot()
   })
 
-  it("should return isClosed: true", () => {
+  it("should return `closed`: true", () => {
     function ComponentWithModalContext() {
-      const { isClosed: closed } = useModalContext()
+      const { closed: closed } = useModalContext()
 
       return <span>{String(closed)}</span>
     }

src/container.new.tsx

@@ -28,7 +28,8 @@ export function ModalContainer(props: ModalContainerProps) {
   // This is the only way to make the modal work with the current implementation
   const contextValue: ModalWindow | null = focusedModal ? {
     ...focusedModal,
-    isClosed: !modal.isOpen,
+    closed: !modal.isOpen,
+    focused: true
   } : null
 
   return (

src/controller.ts

@@ -89,7 +89,7 @@ export class ModalController {
     }
 
     const params: ModalParams & P = { ...DEFAULT_PARAMS, ...modalParams as P }
-    const modal: ModalWindow<P> = { component, params, close, isClosed: false }
+    const modal: ModalWindow<P> = { component, params, close, closed: false, focused: true }
 
     this.add(modal as ModalWindow<unknown>)
 

src/types.ts

@@ -64,16 +64,22 @@ export interface ModalWindow<P = unknown> {
   close: () => void
   /**
    * Indicates that the `close` method has been called and the modal window is going to be removed.
+   * 
+   * @default
+   * false
    */
-  isClosed: boolean
-  // /**
-  //  * Indicates that the modal is currently active.
-  //  *
-  //  * @note
-  //  *
-  //  * This is not the same as `!isClosed` because the modal may be not closed but still be in the queue.
-  //  */
-  // isActive: boolean
+  closed: boolean
+  /**
+   * Indicates that the modal is currently active.
+   *
+   * @note
+   *
+   * This is not the same as `!closed` because the modal may be not closed but still be in the queue.
+   * 
+   * @default
+   * true
+   */
+  focused: boolean
 }
 
 /**