From 9e30270cd908d38a7615ea6b760213912ff3f326 Mon Sep 17 00:00:00 2001 From: Valery Zinchenko Date: Tue, 23 May 2023 14:46:28 +0300 Subject: [PATCH] Add layouts --- coverage/clover.xml | 183 +++++++------- coverage/lcov.info | 343 +++++++++++++------------- src/ModalContainer.tsx | 6 +- src/ModalController.ts | 20 +- src/ModalWindow.ts | 1 + src/__tests__/ModalController.spec.ts | 1 + src/types.ts | 15 +- 7 files changed, 310 insertions(+), 259 deletions(-) diff --git a/coverage/clover.xml b/coverage/clover.xml index f132aab..583dad5 100644 --- a/coverage/clover.xml +++ b/coverage/clover.xml @@ -1,7 +1,7 @@ - - - + + + @@ -9,7 +9,7 @@ - + @@ -21,99 +21,104 @@ + - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + + - - - - - - - + + + + + + + + - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - + + + + + + + + + + + + + - - + - - + + - - - + + + - - - - - + + + + + + @@ -144,21 +149,21 @@ - + - - + + - + - - - + + + diff --git a/coverage/lcov.info b/coverage/lcov.info index b2a70b6..d0570d3 100644 --- a/coverage/lcov.info +++ b/coverage/lcov.info @@ -37,8 +37,9 @@ DA:59,63 DA:63,2 DA:64,1 DA:67,36 -LF:11 -LH:11 +DA:69,36 +LF:12 +LH:12 BRDA:47,0,0,63 BRDA:47,0,1,63 BRDA:52,1,0,36 @@ -52,35 +53,36 @@ BRH:8 end_of_record TN: SF:src/ModalController.ts -FN:41,(anonymous_0) -FN:42,(anonymous_1) -FN:46,(anonymous_2) -FN:49,(anonymous_3) -FN:57,(anonymous_4) -FN:66,(anonymous_5) -FN:98,(anonymous_6) -FN:102,(anonymous_7) -FN:123,(anonymous_8) -FN:137,(anonymous_9) -FN:146,(anonymous_10) -FN:158,(anonymous_11) -FN:175,(anonymous_12) -FN:176,(anonymous_13) -FN:177,(anonymous_14) -FN:183,(anonymous_15) -FN:184,(anonymous_16) -FN:197,(anonymous_17) -FN:203,(anonymous_18) -FN:204,(anonymous_19) -FN:207,(anonymous_20) -FN:232,(anonymous_21) -FN:235,(anonymous_22) -FN:247,(anonymous_23) -FN:252,(anonymous_24) -FN:258,(anonymous_25) -FN:263,(anonymous_26) -FNF:27 -FNH:25 +FN:46,(anonymous_0) +FN:47,(anonymous_1) +FN:51,(anonymous_2) +FN:54,(anonymous_3) +FN:62,(anonymous_4) +FN:71,(anonymous_5) +FN:103,(anonymous_6) +FN:107,(anonymous_7) +FN:128,(anonymous_8) +FN:142,(anonymous_9) +FN:151,(anonymous_10) +FN:163,(anonymous_11) +FN:180,(anonymous_12) +FN:181,(anonymous_13) +FN:182,(anonymous_14) +FN:188,(anonymous_15) +FN:189,(anonymous_16) +FN:202,(anonymous_17) +FN:208,(anonymous_18) +FN:209,(anonymous_19) +FN:212,(anonymous_20) +FN:227,(anonymous_21) +FN:246,(anonymous_22) +FN:249,(anonymous_23) +FN:261,(anonymous_24) +FN:266,(anonymous_25) +FN:272,(anonymous_26) +FN:277,(anonymous_27) +FNF:28 +FNH:26 FNDA:50,(anonymous_0) FNDA:134,(anonymous_1) FNDA:51,(anonymous_2) @@ -102,123 +104,134 @@ FNDA:8,(anonymous_17) FNDA:1,(anonymous_18) FNDA:4,(anonymous_19) FNDA:8,(anonymous_20) -FNDA:0,(anonymous_21) +FNDA:36,(anonymous_21) FNDA:0,(anonymous_22) -FNDA:113,(anonymous_23) -FNDA:63,(anonymous_24) -FNDA:291,(anonymous_25) -FNDA:134,(anonymous_26) -DA:38,50 -DA:39,50 -DA:42,134 -DA:45,50 -DA:47,51 -DA:50,376 -DA:58,14 -DA:60,14 -DA:61,14 -DA:67,69 -DA:69,37 -DA:70,37 -DA:99,73 -DA:102,73 -DA:106,73 -DA:107,36 -DA:108,36 -DA:109,4 -DA:113,69 -DA:114,3 -DA:116,69 -DA:117,69 -DA:119,69 +FNDA:0,(anonymous_23) +FNDA:113,(anonymous_24) +FNDA:63,(anonymous_25) +FNDA:291,(anonymous_26) +FNDA:134,(anonymous_27) +DA:43,50 +DA:44,50 +DA:47,134 +DA:50,50 +DA:52,51 +DA:55,376 +DA:63,14 +DA:65,14 +DA:66,14 +DA:72,69 +DA:74,37 +DA:75,37 +DA:104,73 +DA:107,73 +DA:111,73 +DA:112,36 +DA:113,36 +DA:114,4 +DA:118,69 +DA:119,3 DA:121,69 -DA:127,4 -DA:129,4 -DA:138,6 -DA:139,6 -DA:140,5 +DA:122,69 +DA:124,69 +DA:126,69 +DA:132,4 +DA:134,4 DA:143,6 -DA:150,4 -DA:152,4 -DA:159,28 -DA:160,28 -DA:162,28 -DA:163,14 -DA:165,14 +DA:144,6 +DA:145,5 +DA:148,6 +DA:155,4 +DA:157,4 +DA:164,28 +DA:165,28 +DA:167,28 DA:168,14 -DA:169,14 -DA:176,5 -DA:177,2 -DA:184,2 -DA:185,9 -DA:186,1 -DA:189,8 -DA:190,0 -DA:191,0 -DA:195,8 -DA:197,8 -DA:204,4 -DA:209,8 -DA:211,8 -DA:212,0 -DA:215,8 -DA:216,0 -DA:219,8 +DA:170,14 +DA:173,14 +DA:174,14 +DA:181,5 +DA:182,2 +DA:189,2 +DA:190,9 +DA:191,1 +DA:194,8 +DA:195,0 +DA:196,0 +DA:200,8 +DA:202,8 +DA:209,4 +DA:214,8 +DA:216,8 +DA:217,0 +DA:220,8 +DA:221,0 +DA:224,8 +DA:228,36 +DA:230,0 +DA:231,0 DA:233,0 -DA:235,0 -DA:236,0 -DA:248,113 -DA:249,113 -DA:250,113 -DA:252,113 -DA:253,63 -DA:254,63 -DA:255,63 -DA:259,291 -DA:262,50 -DA:264,134 -LF:69 -LH:62 -BRDA:58,0,0,0 -BRDA:58,0,1,14 -BRDA:67,1,0,32 -BRDA:67,1,1,37 -BRDA:106,2,0,36 -BRDA:106,2,1,37 -BRDA:108,3,0,4 -BRDA:108,3,1,32 -BRDA:113,4,0,3 -BRDA:113,4,1,66 -BRDA:113,5,0,69 -BRDA:113,5,1,30 -BRDA:139,6,0,5 -BRDA:139,6,1,1 -BRDA:159,7,0,0 -BRDA:159,7,1,28 -BRDA:160,8,0,0 -BRDA:160,8,1,28 -BRDA:162,9,0,14 -BRDA:162,9,1,14 -BRDA:185,10,0,1 -BRDA:185,10,1,8 -BRDA:189,11,0,0 -BRDA:189,11,1,8 -BRDA:190,12,0,0 -BRDA:190,12,1,0 -BRDA:211,13,0,0 -BRDA:211,13,1,8 -BRDA:215,14,0,0 -BRDA:215,14,1,8 -BRF:30 -BRH:22 +DA:247,0 +DA:249,0 +DA:250,0 +DA:262,113 +DA:263,113 +DA:264,113 +DA:266,113 +DA:267,63 +DA:268,63 +DA:269,63 +DA:273,291 +DA:276,50 +DA:278,134 +LF:73 +LH:63 +BRDA:63,0,0,0 +BRDA:63,0,1,14 +BRDA:72,1,0,32 +BRDA:72,1,1,37 +BRDA:111,2,0,36 +BRDA:111,2,1,37 +BRDA:113,3,0,4 +BRDA:113,3,1,32 +BRDA:118,4,0,3 +BRDA:118,4,1,66 +BRDA:118,5,0,69 +BRDA:118,5,1,30 +BRDA:144,6,0,5 +BRDA:144,6,1,1 +BRDA:164,7,0,0 +BRDA:164,7,1,28 +BRDA:165,8,0,0 +BRDA:165,8,1,28 +BRDA:167,9,0,14 +BRDA:167,9,1,14 +BRDA:190,10,0,1 +BRDA:190,10,1,8 +BRDA:194,11,0,0 +BRDA:194,11,1,8 +BRDA:195,12,0,0 +BRDA:195,12,1,0 +BRDA:216,13,0,0 +BRDA:216,13,1,8 +BRDA:220,14,0,0 +BRDA:220,14,1,8 +BRDA:228,15,0,36 +BRDA:228,15,1,0 +BRDA:230,16,0,0 +BRDA:230,16,1,0 +BRDA:231,17,0,0 +BRDA:231,17,1,0 +BRF:36 +BRH:23 end_of_record TN: SF:src/ModalWindow.ts -FN:74,(anonymous_0) -FN:99,(anonymous_1) -FN:114,(anonymous_2) -FN:127,(anonymous_3) -FN:130,(anonymous_4) +FN:75,(anonymous_0) +FN:100,(anonymous_1) +FN:115,(anonymous_2) +FN:128,(anonymous_3) +FN:131,(anonymous_4) FNF:5 FNH:4 FNDA:73,(anonymous_0) @@ -228,22 +241,22 @@ FNDA:73,(anonymous_3) FNDA:0,(anonymous_4) DA:25,3 DA:32,3 -DA:75,73 DA:76,73 -DA:78,73 +DA:77,73 DA:79,73 -DA:81,73 -DA:83,73 +DA:80,73 +DA:82,73 DA:84,73 -DA:86,73 -DA:99,73 -DA:100,14 +DA:85,73 +DA:87,73 +DA:100,73 DA:101,14 -DA:103,14 -DA:115,2 -DA:128,73 -DA:130,73 -DA:131,0 +DA:102,14 +DA:104,14 +DA:116,2 +DA:129,73 +DA:131,73 +DA:132,0 LF:18 LH:17 BRF:0 @@ -319,10 +332,10 @@ FNDA:101,classWithModifiers FNDA:25,(anonymous_1) FNDA:74,serialize FNDA:74,getCircularReplacer -FNDA:320,(anonymous_4) -FNDA:320,transform +FNDA:321,(anonymous_4) +FNDA:321,transform FNDA:74,replacer -FNDA:320,(anonymous_7) +FNDA:321,(anonymous_7) FNDA:36,stopPropagation FNDA:8,(anonymous_9) FNDA:1,expectToThrow @@ -338,21 +351,21 @@ DA:34,25 DA:39,74 DA:42,74 DA:43,74 -DA:44,320 +DA:44,321 DA:45,172 DA:46,7 DA:48,165 -DA:51,313 -DA:56,320 +DA:51,314 +DA:56,321 DA:58,81 DA:59,20 DA:62,61 -DA:65,239 +DA:65,240 DA:69,74 DA:71,74 -DA:72,320 -DA:74,320 -DA:75,320 +DA:72,321 +DA:74,321 +DA:75,321 DA:79,74 DA:80,74 DA:89,36 @@ -384,13 +397,13 @@ BRDA:28,0,1,25 BRDA:39,1,0,0 BRDA:39,1,1,74 BRDA:44,2,0,172 -BRDA:44,2,1,148 -BRDA:44,3,0,320 +BRDA:44,2,1,149 +BRDA:44,3,0,321 BRDA:44,3,1,172 BRDA:45,4,0,7 BRDA:45,4,1,165 BRDA:56,5,0,81 -BRDA:56,5,1,239 +BRDA:56,5,1,240 BRDA:58,6,0,20 BRDA:58,6,1,61 BRDA:58,7,0,81 diff --git a/src/ModalContainer.tsx b/src/ModalContainer.tsx index 03fae27..8a2e3da 100644 --- a/src/ModalContainer.tsx +++ b/src/ModalContainer.tsx @@ -64,10 +64,14 @@ export function ModalContainer(props: ModalContainerProps) { modalWindow.close() } + const Layout = props.controller.getLayout(modalWindow.params.layout) + return (
- + + +
) diff --git a/src/ModalController.ts b/src/ModalController.ts index bfab826..5a995bf 100644 --- a/src/ModalController.ts +++ b/src/ModalController.ts @@ -17,6 +17,7 @@ copies or substantial portions of the Software. */ import EventEmitter from "eventemitter3" +import { Fragment, ReactNode } from "react" import { ModalWindow, ModalWindowAny } from "./ModalWindow" import { ExternalStore, MODAL_WINDOW_PARAMS_EXPLANATION, ModalComponent, ModalComponentProps, ModalNamedComponents, ModalParams, ModalSnapshot, ModalWindowParams } from "./types" @@ -28,10 +29,14 @@ interface ModalControllerEvents { update: [] } -interface ModalControllerConfig { +interface ModalControllerConfig< + Layouts extends ModalNamedComponents = ModalNamedComponents, + Components extends ModalNamedComponents = ModalNamedComponents +> { + layouts: Layouts components: Components - defaultParams: Partial + defaultParams: Partial> } class ModalController = ModalControllerConfig> implements ExternalStore { @@ -96,7 +101,7 @@ class ModalController = ModalContr * modal.on("close", () => console.log("Modal was closed")) */ public open

(component: ModalComponent

, ...[modalParams]: ModalWindowParams

): ModalWindow

{ - const modalWindow = new ModalWindow(component, { ...this.config?.defaultParams, ...modalParams as MODAL_WINDOW_PARAMS_EXPLANATION

}) + const modalWindow = new ModalWindow

(component, { ...this.config?.defaultParams, ...modalParams as MODAL_WINDOW_PARAMS_EXPLANATION

}) // Using `on` instead of `then` since `then` will only be executed on the next event loop iteration. // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Event_loop. modalWindow.on("close", () => this.close(modalWindow)) @@ -219,6 +224,15 @@ class ModalController = ModalContr return this.config.components[componentName] } + public getLayout(layoutName: NonNullable["layout"]): ModalComponent<{ children: ReactNode }> { + if (layoutName == null) return Fragment + + if (this.config == null) return Fragment + if (this.config.layouts == null) return Fragment + + return this.config?.layouts[layoutName] + } + /** diff --git a/src/ModalWindow.ts b/src/ModalWindow.ts index e378c1c..6a79bf7 100644 --- a/src/ModalWindow.ts +++ b/src/ModalWindow.ts @@ -34,6 +34,7 @@ const DEFAULT_PARAMS: ModalParams = { closable: true, keepMounted: false, layer: 0, + layout: undefined, label: "Content is unknown. Bad guy didn't set a label.", weak: false, diff --git a/src/__tests__/ModalController.spec.ts b/src/__tests__/ModalController.spec.ts index 8c7f309..82a5211 100644 --- a/src/__tests__/ModalController.spec.ts +++ b/src/__tests__/ModalController.spec.ts @@ -116,6 +116,7 @@ describe("ModalController (with container)", () => { closable: false, keepMounted: true, layer: 2, + layout: undefined, label: "TEST", weak: true, diff --git a/src/types.ts b/src/types.ts index a5628e6..2585f14 100644 --- a/src/types.ts +++ b/src/types.ts @@ -41,7 +41,7 @@ export type ModalComponentProps = IsAny> -export interface ModalParams { +export interface ModalParams { /** * Usually used to close the modal by `closeById` method. * @default -1 @@ -79,6 +79,19 @@ export interface ModalParams { * @default 0 */ layer: number + /** + * You can apply one of defined layouts. + * + * @example + * const Modal = new ModalController({ + * layouts: { + * dialog: DialogLayout + * } + * }) + * + * Modal.open(Component, { layout: "dialog" }) + */ + layout: Layout | undefined /** * Keep all open modals mounted until the last one is closed. */