ados-rcm 1.0.85 → 1.0.86

package/dist/AModule/AComponents/ADialog/ADialog.d.ts

@@ -1,12 +1,19 @@
 import React from 'react';
+import { TUseValues } from '../../AHooks/useValues';
 import { Resources } from '../AResource/AResource';
-import { IAEvent, TActionRef } from '../ATypes/ATypes';
+import { IAEvent } from '../ATypes/ATypes';
 /**
  * onOk와 ok의 네이밍 차이 : 해당 function이 Action임을 정의하는 기준을 고찰.
  * onAction은 callback으로 action이 수행될 때 호출된다. 따라서 기본적으로 onAction을 호출하는 곳은 action 한 곳 뿐이다.
  * 이와 다르게 action은 여러 곳에서 해당 action을 수행하고 싶을 때 호출할 수 있다. 만약 한 곳에서만 action을 호출하는 상황이라면 onAction을 사용하도록 한다.
  */
-export interface IADialogActions {
+export interface IADialogAction {
+    /**
+     * open : () => void
+     *
+     * Description : open dialog
+     */
+    open: () => void;
     /**
      * close : () => void
      *
@@ -30,13 +37,17 @@ export interface IADialogChildren {
     children?: React.ReactNode;
 }
 export type TADialogTypes = 'okCancel' | 'cancelOk' | 'ok' | 'cancel' | 'none';
+export type TADialogContext<P> = (props: P) => {
+    children: JSX.Element;
+    isOkDisabled: boolean;
+};
 export interface IADialogProps {
     /**
-     * dlgState : IADialogState
+     * dlgCore : IADialogCore
      *
-     * Description : setOpen of the dialog. it is used when the dialog is closed.
+     * Description : core of the dialog
      */
-    dlgState: IADialogState;
+    dlgCore: IADialogCore;
     /**
      * type? : TADialogTypes = 'okCancel'
      *
@@ -49,12 +60,6 @@ export interface IADialogProps {
      * Description : title of the dialog
      */
     title?: React.ReactNode;
-    /**
-     * actionRef? : TActionRef<IADialogActions>
-     *
-     * Description : actionRef of the dialog
-     */
-    actionRef?: TActionRef<IADialogActions>;
     /**
      * children? : React.ReactNode
      *
@@ -164,71 +169,85 @@ export interface IADialogProps {
  * Description : ADialog is a dialog component.
  *
  *
- * Basic Usage :
+ * Basic Usage : You should use 'createADialog' and 'ADialog' to make dialog component,
+ * and manage it with 'useADialogCore(s)'.
  *
- *     const dlgState = useDialogState();
- *     const onOk = () => { console.log('ok') }
- *     const onCancel = (e : IAEvent) => {
- *       e.event.preventDefault(); // this prevents the dialog from closing.
- *       console.log('cancel')
- *     }
+ *      const DTest = createADialog((props: { dlgCore: IADialogCore }) => {
+ *         const { dlgCore } = props;
+ *         const onOk = () => console.log('ok')
+ *         const onCancel = () => console.log('cancel')
  *
- *     if (case 1)
- *       <>
- *         <ADialogFrame dlgState={dlgState}>
- *           <ADialog dlgState={dlgState}
+ *         return (
+ *           <ADialog dlgCore={dlgCore}
  *             title='Dialog Title'
  *             onOk={onOk}
  *             onCancel={onCancel}>
  *             <div>Content</div>
+ *             <AButton onClick={dlgCore.action.close}>close</AButton>
  *           </ADialog>
- *         </ADialogFrame>
- *         <AButton onClick={dlgState.open}>Open Dialog</AButton>
- *       </>
+ *         );
+ *       });
  *
- *     if (case 2)
- *       <ADialogFrame dlgState={dlgState}>
- *         <DTest dlgState={dlgState}
- *           onOk={onOk}
- *           onCancel={onCancel}>
- *         </DTest>
- *       </ADialogFrame>
+ *     if (case 1)
+ *       const CallerComponent = () => {
+ *         const dlgCore = useADialogCore();
+ *         return (
+ *           <div>
+ *            <AButton onClick={dlgCore.action.open}>Open Dialog</AButton>
+ *            <DTest dlgCore={dlgCore}/>
+ *          </div>
+ *         )
  *
- *     const DTest = (props: IADialogProps) => {
- *       let { dlgState, onOk, onCancel } = props;
- *       const [num, setNum] = useState(0);
- *       return (
- *         <ADialog dlgState={dlgState}
- *           title='Dialog Title'
- *           onOk={onOk}
- *           onCancel={onCancel}>
- *           {num}
- *           <AButton onClick={() => setNum(num + 1)}>Add</AButton>
- *           <AButton onClick={() => setNum(num - 1)}>Sub</AButton>
- *         </ADialog>
- *       )
- *     }
+ *     if (case 2)
+ *       const CallerComponent = () => {
+ *         const dlgCores = useADialogCores('dlg1');
+ *         return (
+ *           <div>
+ *             some contents
+ *             <AButton onClick={dlgCores.dlg1.action.open}>Open Dialog</AButton>
+ *             <DTest dlgState={dlgCores.dlg1}/>
+ *           </div>
+ *         );
+ *       }
  *
  */
 export declare const ADialog: (props: IADialogProps) => React.ReactPortal;
 export interface IADialogState {
-    isOpen: boolean;
-    setIsOpen: (isOpen: boolean) => void;
-    open: () => void;
-    onClose: () => void;
+    /**
+     * useIsOpen : [boolean, (isOpen: boolean) => void]
+     *
+     * Description : [ASystem] use should not modify this property.
+     */
+    useIsOpen: TUseValues<boolean>;
+    /**
+     * setAction : (action: Partial<IADialogAction>) => void
+     *
+     * Description : set action of the dialog
+     */
+    setAction: (action: Partial<IADialogAction>) => void;
 }
-export declare const useADialogState: () => IADialogState;
-export interface IADialogFrameProps {
+export type TADialogCores<T extends string> = {
+    [key in T]: IADialogCore;
+};
+export interface IADialogCore {
     /**
-     * dlgState : IADialogState
+     * state : IADialogState
      *
-     * Description : isOpen of the dialog. you can 'open' using this.
-     * you can 'close' using actionRef. not this.
+     * Description : [ASystem] use should not modify this property.
      */
-    dlgState: IADialogState;
+    state: IADialogState;
     /**
-     * children : React.ReactElement
+     * action : IADialogAction
+     *
+     * Description : action of the dialog
      */
-    children: React.ReactElement;
+    action: IADialogAction;
 }
-export declare const ADialogFrame: (props: IADialogFrameProps) => import("react/jsx-runtime").JSX.Element;
+export type TADialogActions<T extends string> = {
+    [key in T]: IADialogAction;
+};
+export declare const useADialogCores: <T extends string>(...dlgNames: T[]) => TADialogCores<T>;
+export declare const useADialogCore: () => IADialogCore;
+export declare const createADialog: <P extends {
+    dlgCore: IADialogCore;
+}>(Builder: (props: P) => JSX.Element) => (props: P) => import("react/jsx-runtime").JSX.Element;