feat: read default overlay options in different way

Author: FourwingsY

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [1.1.0](https://github.com/react-leaf/modal/tree/1.1.0) (2023-08-14)
+
+### Breaking changes
+
+- each modal's `defaultOverlayOptions` are set by modal's exports.
+
 ## [1.0.1](https://github.com/react-leaf/modal/tree/1.0.1) (2023-01-13)
 
 - `useModal()` returns `closeSelf()`, that works only in the opened modal.

README-ko.md

@@ -218,6 +218,43 @@ export interface ModalEvents {
 
 열려있는 모달 목록을 반환합니다. 모달이 하나라도 열려있는지, 특정 타입 모달이 열려있는지, 등을 체크할 수 있습니다.
 
+### OverlayOptions
+
+모달의 오버레이 설정은 세 곳에서 이루어집니다.
+
+1. `openModal({ type: "...", overlayOptions: 여기 })`
+
+- 여기에 설정한 옵션은 이 함수를 통해 연 모달에만 적용됩니다.
+
+2. 모달 컴포넌트의 선언부
+
+- 여기에 설정한 옵션은 이 컴포넌트 타입의 모달을 열 때, 적용됩니다.
+
+```tsx
+// register
+  ...
+  'common/Alert': () => import('./Alert'),
+
+// ./Alert.tsx
+export const defaultOverlayOptions = { 여기 };
+
+export default function Alert(props) {
+  return ...
+}
+```
+
+3. `<MoalProvider />` 에서
+
+- 여기에 설정한 옵션은 **모든** 모달에 적용됩니다.
+
+```tsx
+<ModalProvider register={register} defaultOverlayOptions={여기}>
+  <YourApp />
+</ModalProvider>
+```
+
+첫 번째 것이 우선순위가 가장 높고, 마지막에 소개한 방식이 우선순위가 가장 낮습니다.
+
 ## 모달이 열리고 닫히는 애니메이션을 넣으려면 어떻게 해야 하나요?
 
 애니메이션이 돌아가게 하기 위해, 모달은 사실 `openModal()` 실행 시점보다 한 프레임 뒤늦게 열립니다.

README.md

@@ -121,9 +121,7 @@ useEffect(() => {
 How to use `defaultOverlayOptions`:
 
 ```tsx
-type defaultOverlayOptions = {
-  [key in keyof Register]?: Partial<OverlayOptions>;
-} & { default?: Partial<OverlayOptions> };
+type defaultOverlayOptions = Partial<OverlayOptions>;
 
 // just use as default. default values are decribed on openModal()'s description.
 return (
@@ -135,29 +133,7 @@ return (
 return (
   <ModalProvider
     register={register}
-    defaultOverlayOptions={{ default: { closeDelay: 300 } }}
-  >
-    <App />
-  </ModalProvider>
-);
-// or apply to specific modal
-return (
-  <ModalProvider
-    register={register}
-    defaultOverlayOptions={{ MyAnimatingModal: { closeDelay: 500 } }}
-  >
-    <App />
-  </ModalProvider>
-);
-
-// or both. surely, settings on specific modal will override default
-return (
-  <ModalProvider
-    register={register}
-    defaultOverlayOptions={{
-      default: { closeDelay: 300 },
-      MyAnimatingModal: { closeDelay: 500 },
-    }}
+    defaultOverlayOptions={{ closeDelay: 300 }}
   >
     <App />
   </ModalProvider>
@@ -221,6 +197,43 @@ Close all opened modals
 
 Returns opened modals. It is an array of the OpenModalPayload, so you can check any modal is opened, or some type of modal is opened or not.
 
+### OverlayOptions
+
+There are three points that you could set overlay options.
+
+1. `openModal({ type: "...", overlayOptions: HERE })`
+
+- This options are applied ONLY that modal opens.
+
+2. When you exports Modal Components
+
+- This options are applied to ALL of these type modals.
+
+```tsx
+// register
+  ...
+  'common/Alert': () => import('./Alert'),
+
+// ./Alert.tsx
+export const defaultOverlayOptions = { HERE };
+
+export default function Alert(props) {
+  return ...
+}
+```
+
+3. When setting MoalProvider
+
+- This options are applied to ALL TYPE OF modals.
+
+```tsx
+<ModalProvider register={register} defaultOverlayOptions={HERE}>
+  <YourApp />
+</ModalProvider>
+```
+
+The first one has higher priority, and last one has lower.
+
 ## How to add opening / closing animation?
 
 For animation, modal opening is delayed for a frame.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactleaf/modal",
-  "version": "1.1.0-beta.0",
+  "version": "1.1.0",
   "description": "React Modal Library with context",
   "main": "index.js",
   "types": "index.d.ts",

src/Container.tsx

@@ -44,26 +44,33 @@ function OpenedModal<R extends Register>({
   events,
 }: OpenedModalProps<R>) {
   const context = useModal();
-  const [Component, setComponent] = useState<React.ComponentType>();
+  const [module, setModule] = useState<Awaited<ReturnType<Importer>>>();
 
   // asynchronously import modal file: for reduce bundle size.
   // this may trigger initial openModal could be delayed.
   // if you don't want to be delayed, use usePreloadModal hook
   useEffect(() => {
-    void importer().then((modal) => {
-      setComponent(() => modal.default);
-    });
+    void importer().then(setModule);
   }, [type]);
 
   function close() {
     events?.onClose?.();
     context.closeModal({ id });
   }
 
-  if (!Component) return null;
+  if (!module) return null;
+
+  const Component = module.default;
+  const overlayProps = Object.assign(
+    {},
+    context.defaultOverlayOptions,
+    module.defaultOverlayOptions,
+    overlayOptions
+  );
+
   return (
     <ModalContext.Provider value={{ ...context, closeSelf: close }}>
-      <ModalOverlay {...overlayOptions} closeSelf={close}>
+      <ModalOverlay {...overlayProps} closeSelf={close}>
         <Component {...props} />
       </ModalOverlay>
     </ModalContext.Provider>

src/ModalProvider.tsx

@@ -7,18 +7,14 @@ import { OpenModalPayload, Register, OverlayOptions } from "./types";
 
 interface Props<R extends Register> {
   register: R;
-  defaultOverlayOptions?: { default?: Partial<OverlayOptions> } & {
-    [key in keyof R]?: Partial<OverlayOptions>;
-  };
+  defaultOverlayOptions?: Partial<OverlayOptions>;
 }
 export const ModalProvider = <R extends Register>({
   register,
   defaultOverlayOptions,
   children,
 }: React.PropsWithChildren<Props<R>>) => {
-  const { openedModals, ...actions } = useModalReducer<R>(
-    defaultOverlayOptions
-  );
+  const { openedModals, ...actions } = useModalReducer<R>();
 
   // can open modal with window.postMessage
   useEffect(() => {
@@ -40,7 +36,9 @@ export const ModalProvider = <R extends Register>({
     console.error("closeSelf is not available outside of modal");
 
   return (
-    <TypedModalContext.Provider value={{ openedModals, ...actions, closeSelf }}>
+    <TypedModalContext.Provider
+      value={{ openedModals, defaultOverlayOptions, ...actions, closeSelf }}
+    >
       {children}
       <ModalContainer register={register} openedModals={openedModals} />
     </TypedModalContext.Provider>

src/context.ts

@@ -1,8 +1,9 @@
 import { createContext } from "react";
-import { OpenModalPayload, Register } from "./types";
+import { OpenModalPayload, OverlayOptions, Register } from "./types";
 
 export type ModalContextType<R extends Register> = {
   openedModals: OpenModalPayload<R, keyof R>[];
+  defaultOverlayOptions?: Partial<OverlayOptions>;
   openModal: <T extends keyof R>(payload: OpenModalPayload<R, T>) => string;
   closeModal: (payload: { id: string }) => void;
   closeAll: () => void;

src/reducer.ts

@@ -3,15 +3,10 @@ import {
   CloseModalPayload,
   EnhancedModalPayload,
   OpenModalPayload,
-  OverlayOptions,
   Register,
 } from "./types";
 
-export default function useModalReducer<R extends Register>(
-  defaultOverlayOptions?: { default?: Partial<OverlayOptions> } & {
-    [key in keyof R]?: Partial<OverlayOptions>;
-  }
-) {
+export default function useModalReducer<R extends Register>() {
   function reducer(
     state: EnhancedModalPayload<R, keyof R>[],
     action: ModalAction
@@ -39,15 +34,7 @@ export default function useModalReducer<R extends Register>(
     return {
       type: "@modal/OPEN_MODAL" as const,
       payload: {
-        type: payload.type,
-        props: payload.props,
-        overlayOptions: Object.assign(
-          {},
-          defaultOverlayOptions?.default,
-          defaultOverlayOptions?.[payload.type],
-          payload.overlayOptions
-        ),
-        events: payload.events,
+        ...payload,
         id: `${String(payload.type)}_${key}`,
       } as EnhancedModalPayload<R, keyof R>,
     };

src/types.ts

@@ -1,6 +1,9 @@
 import React from "react";
 
-export type Importer = () => Promise<{ default: React.ComponentType<any> }>;
+export type Importer = () => Promise<{
+  default: React.ComponentType<any>;
+  defaultOverlayOptions?: Partial<OverlayOptions>;
+}>;
 export interface Register {
   [key: string]: Importer;
 }