feat: add Modal context

Author: wangdicoder

components/modal/demo/context.md

@@ -0,0 +1,50 @@
+<demo>
+
+### Context
+
+Manage multiple modals by ID with `Modal.Provider` and `Modal.useModal`.
+
+<!--start-code-->
+
+```jsx live
+() => {
+  const ConfirmModal = () => {
+    const { visible, close } = Modal.useModal('confirm');
+    return (
+      <Modal header="Confirm" visible={visible} onClose={close} onConfirm={close}>
+        <p>Are you sure you want to proceed?</p>
+      </Modal>
+    );
+  };
+
+  const SettingsModal = () => {
+    const { visible, close } = Modal.useModal('settings');
+    return (
+      <Modal header="Settings" visible={visible} onClose={close} footer={null}>
+        <p>Application settings go here.</p>
+      </Modal>
+    );
+  };
+
+  const Toolbar = () => {
+    const confirm = Modal.useModal('confirm');
+    const settings = Modal.useModal('settings');
+    return (
+      <Space>
+        <Button btnType="primary" onClick={confirm.show}>Open Confirm</Button>
+        <Button onClick={settings.show}>Open Settings</Button>
+      </Space>
+    );
+  };
+
+  return (
+    <Modal.Provider>
+      <Toolbar />
+      <ConfirmModal />
+      <SettingsModal />
+    </Modal.Provider>
+  );
+}
+```
+
+</demo>

components/modal/index.md

@@ -1,5 +1,6 @@
 import Animation from './demo/animation.md'
 import Basic from './demo/basic.md'
+import Context from './demo/context.md'
 import CustomisedFooter from './demo/customised-footer.md'
 import Position from './demo/position.md'
 
@@ -27,6 +28,7 @@ import { Modal } from 'tiny-ui';
   <column>
     <Position/>
     <Animation/>
+    <Context/>
   </column>
 </layout>
 

components/modal/index.tsx

@@ -7,6 +7,8 @@ import { ConfigContext } from '../config-provider/config-context';
 import { getPrefixCls } from '../_utils/general';
 import { useLocale } from '../_utils/use-locale';
 import { ModalProps } from './types';
+import { ModalProvider, useModal } from './modal-context';
+import type { ModalProviderProps, UseModalReturn } from './modal-context';
 
 const Modal = React.forwardRef<HTMLDivElement, ModalProps>((props, ref) => {
   const locale = useLocale();
@@ -168,4 +170,14 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>((props, ref) => {
 
 Modal.displayName = 'Modal';
 
-export default Modal;
+type ModalComponent = typeof Modal & {
+  Provider: typeof ModalProvider;
+  useModal: typeof useModal;
+};
+
+const ModalWithContext = Modal as ModalComponent;
+ModalWithContext.Provider = ModalProvider;
+ModalWithContext.useModal = useModal;
+
+export default ModalWithContext;
+export type { ModalProviderProps, UseModalReturn };

components/modal/modal-context.tsx

@@ -0,0 +1,82 @@
+import React, { createContext, useCallback, useContext, useMemo, useReducer } from 'react';
+
+// --- Reducer ---
+
+type ModalState = Record<string, boolean>;
+
+type ModalAction =
+  | { type: 'SHOW'; id: string }
+  | { type: 'HIDE'; id: string }
+  | { type: 'TOGGLE'; id: string }
+  | { type: 'PURGE' };
+
+function modalReducer(state: ModalState, action: ModalAction): ModalState {
+  switch (action.type) {
+    case 'SHOW':
+      return state[action.id] === true ? state : { ...state, [action.id]: true };
+    case 'HIDE':
+      return state[action.id] === false ? state : { ...state, [action.id]: false };
+    case 'TOGGLE':
+      return { ...state, [action.id]: !state[action.id] };
+    case 'PURGE':
+      return {};
+    default:
+      return state;
+  }
+}
+
+// --- Context ---
+
+interface ModalContextValue {
+  modals: ModalState;
+  dispatch: React.Dispatch<ModalAction>;
+}
+
+const ModalContext = createContext<ModalContextValue | null>(null);
+
+// --- Provider ---
+
+interface ModalProviderProps {
+  modals?: ModalState;
+  dispatch?: React.Dispatch<ModalAction>;
+  children: React.ReactNode;
+}
+
+function ModalProvider({ modals: controlledModals, dispatch: controlledDispatch, children }: ModalProviderProps) {
+  const [internalModals, internalDispatch] = useReducer(modalReducer, {});
+
+  const modals = controlledModals ?? internalModals;
+  const dispatch = controlledDispatch ?? internalDispatch;
+
+  const value = useMemo(() => ({ modals, dispatch }), [modals, dispatch]);
+
+  return <ModalContext.Provider value={value}>{children}</ModalContext.Provider>;
+}
+
+// --- Hook ---
+
+interface UseModalReturn {
+  visible: boolean;
+  show: () => void;
+  close: () => void;
+  toggle: () => void;
+}
+
+function useModal(id: string): UseModalReturn {
+  const ctx = useContext(ModalContext);
+  if (!ctx) {
+    throw new Error('useModal must be used within a <Modal.Provider>');
+  }
+
+  const { modals, dispatch } = ctx;
+  const visible = !!modals[id];
+
+  const show = useCallback(() => dispatch({ type: 'SHOW', id }), [dispatch, id]);
+  const close = useCallback(() => dispatch({ type: 'HIDE', id }), [dispatch, id]);
+  const toggle = useCallback(() => dispatch({ type: 'TOGGLE', id }), [dispatch, id]);
+
+  return useMemo(() => ({ visible, show, close, toggle }), [visible, show, close, toggle]);
+}
+
+export { ModalProvider, useModal, modalReducer };
+export type { ModalState, ModalAction, ModalProviderProps, UseModalReturn };