Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix minor bugs & other minor improvements #25

Merged
merged 3 commits into from
Feb 8, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,8 @@
"watch": "ncc build src/index.ts -w",
"compile": "npm run build && npm run start && npm run post-fix",
"help": "ncc",
"test": "",
"test": "react-scripts test",
"test:coverage": "react-scripts test --coverage *.ts",
"post-fix": "eslint out --fix"
},
"repository": {
Expand All @@ -51,4 +52,4 @@
"url": "https://github.com/FrameMuse/react-modal-global/issues"
},
"homepage": "https://github.com/FrameMuse/react-modal-global#readme"
}
}
57 changes: 23 additions & 34 deletions src/controller.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,20 +25,19 @@ import { serialize } from "./utils"
const DEFAULT_STATE: ModalContainerState = {
active: false,
queue: [],
forkedQueue: [],
forkedQueue: []
}
const DEFAULT_PARAMS: ModalParams = {
id: 0,
closable: true,
weak: false,
fork: false,
fork: false
}

function dispatch<P = unknown>(setStateAction: SetStateAction<ModalContainerState<P>>) {
const lastContainer = [...containers].at(-1)
if (lastContainer == null) {
console.warn("ModalError: no containers were mounted.")

return
}

Expand Down Expand Up @@ -85,30 +84,20 @@ export class ModalController {
return
}


dispatch<P>(state => {
// Make that we need it
if (!modalWindow.params?.weak) {
// Skip adding to queue if there is already the same window
if (state.queue.length > 0) {
const lastWindow = state.queue[state.queue.length - 1]
if ((serialize(lastWindow.params) === serialize(modalWindow.params)) && lastWindow.component === modalWindow.component) {
return {
...state,
active: true,
queue: [modalWindow]
}
// Skip adding to queue if the window is already in the beginning of the queue.
if (!modalWindow.params?.weak && state.queue.length > 0) {
const lastWindow = state.queue[state.queue.length - 1]

const areParamsEqual = serialize(modalWindow.params) === serialize(lastWindow.params)
const areComponentsEqual = modalWindow.component === lastWindow.component
if (areParamsEqual && areComponentsEqual) {
return {
...state,
active: true
}
}
}
// Replace stale window
if (state.active === false && state.queue.length === 1) {
return {
...state,
active: true,
queue: [modalWindow]
}
}

return {
...state,
Expand All @@ -117,25 +106,25 @@ export class ModalController {
}
})
}
private remove<P>(modalWindow: ModalWindow<P>) {
if (modalWindow.params.fork) {
private remove<P>(modalWindowToRemove: ModalWindow<P>) {
if (modalWindowToRemove.params.fork) {
dispatch(state => {
const forkedQueue = state.forkedQueue.filter(mw => mw !== modalWindow)
const forkedQueue = state.forkedQueue.filter(mw => mw !== modalWindowToRemove)
return { ...state, forkedQueue }
})
return
}

dispatch(state => {
const filteredQueue = state.queue.filter(mw => mw !== modalWindow)
const isFilteredQueueEmpty = filteredQueue.length === 0
if (!modalWindow.params.weak) {
// Hide modal without removing if it's the last window
if (isFilteredQueueEmpty) {
return { ...state, active: false }
}
const newQueue = state.queue.filter(modalWindow => modalWindow !== modalWindowToRemove)
const isNewQueueEmpty = newQueue.length === 0

// Hide modal without removing if it's the last window if it's not weak.
if (isNewQueueEmpty && !modalWindowToRemove.params.weak) {
return { ...state, active: false }
}
return { ...state, queue: filteredQueue, active: !isFilteredQueueEmpty }

return { ...state, queue: newQueue, active: !isNewQueueEmpty }
})
}
private fork<P>(modalWindow: ModalWindow<P>) {
Expand Down
2 changes: 1 addition & 1 deletion src/hooks.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import { modalContext } from "./context"

export function useModalContext() {
const context = useContext(modalContext)
if (!context) throw new Error("ModalError: Out of Modal context")
if (!context) throw new Error("ModalError: useModalContext must be used within a modalContext")

return context
}
19 changes: 0 additions & 19 deletions src/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,6 @@ copies or substantial portions of the Software.

import { SyntheticEvent } from "react"

/**
*
* @returns `class1 class2`
*/
export function classMerge(...classNames: Array<string | null | undefined>): string {
const space = " "
return classNames.filter(Boolean).join(space)
}

/**
* Join modifiers with origin class
* @returns `"origin-class origin-class--modifier"`
Expand Down Expand Up @@ -76,13 +67,3 @@ export function stopPropagation(callback?: Function | null) {
callback?.()
}
}

export function inputValue(callback: Function) {
return (event: SyntheticEvent<HTMLInputElement | HTMLTextAreaElement>) => {
callback(event.currentTarget.value)
}
}

export function isDictionary(object: unknown): object is Record<keyof never, unknown> {
return object instanceof Object && object.constructor === Object
}