react-native-use-modal - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

lib/commonjs/create-modal.js

@@ -47,4 +47,2 @@ "use strict";
   const {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    isVisible,
     backdropTransitionOutTiming,
@@ -51,0 +49,0 @@ onBackdropPress,

lib/commonjs/create-modal.js.map

@@ -1,1 +0,1 @@
-{"version":3,"sources":["create-modal.tsx"],"names":["createModal","Content","cancelOnBackButtonPress","cancelOnBackdropPress","modalProps","React","forwardRef","_","ref","handleBackButtonPress","handleBackdropPress","cancel","confirm","desiredVisibility","handleModalHidden","handleModalShown","param","visibility","isVisible","backdropTransitionOutTiming","onBackdropPress","onBackButtonPress","onModalHide","onModalWillShow","style","restModalProps","_handleBackdropPress","_handleBackButtonPress","_handleModalHide","_handleModalWillShow","styles","modal","StyleSheet","create","margin","padding"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;AACA;;;;;;;;;;AAoBA;AACA;AACA;AACO,MAAMA,WAAW,GAAG,CAIzB,GAAG,CACDC,OADC,EAED;AACEC,EAAAA,uBAAuB,GAAG,KAD5B;AAEEC,EAAAA,qBAAqB,GAAG,KAF1B;AAGEC,EAAAA,UAAU,GAAG;AAHf,IAII,EANH,CAJsB,kBAazBC,eAAMC,UAAN,CAA6C,CAACC,CAAD,EAAIC,GAAJ,KAAY;AACvD,QAAM;AACJC,IAAAA,qBADI;AAEJC,IAAAA,mBAFI;AAGJC,IAAAA,MAHI;AAIJC,IAAAA,OAJI;AAKJC,IAAAA,iBALI;AAMJC,IAAAA,iBANI;AAOJC,IAAAA,gBAPI;AAQJC,IAAAA,KARI;AASJC,IAAAA;AATI,MAUF,0CAAkBT,GAAlB,EAAuB;AACzBN,IAAAA,uBADyB;AAEzBC,IAAAA;AAFyB,GAAvB,CAVJ;AAeA,QAAM;AACJ;AACAe,IAAAA,SAFI;AAGJC,IAAAA,2BAHI;AAIJC,IAAAA,eAJI;AAKJC,IAAAA,iBALI;AAMJC,IAAAA,WANI;AAOJC,IAAAA,eAPI;AAQJC,IAAAA,KARI;AASJ,OAAGC;AATC,MAUFrB,UAVJ;;AAYA,QAAMsB,oBAAoB,GAAG,wBAE3B,MAAM;AACNhB,IAAAA,mBAAmB;AACnBU,IAAAA,eAAe,SAAf,IAAAA,eAAe,WAAf,YAAAA,eAAe;AAChB,GAL4B,EAK1B,CAACV,mBAAD,EAAsBU,eAAtB,CAL0B,CAA7B;;AAOA,QAAMO,sBAAsB,GAAG,wBAE7B,MAAM;AACNlB,IAAAA,qBAAqB;AACrBY,IAAAA,iBAAiB,SAAjB,IAAAA,iBAAiB,WAAjB,YAAAA,iBAAiB;AAClB,GAL8B,EAK5B,CAACZ,qBAAD,EAAwBY,iBAAxB,CAL4B,CAA/B;;AAOA,QAAMO,gBAAgB,GAAG,wBAAuC,MAAM;AACpEd,IAAAA,iBAAiB;AACjBQ,IAAAA,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW;AACZ,GAHwB,EAGtB,CAACR,iBAAD,EAAoBQ,WAApB,CAHsB,CAAzB;;AAKA,QAAMO,oBAAoB,GAAG,wBAE3B,MAAM;AACNd,IAAAA,gBAAgB;AAChBQ,IAAAA,eAAe,SAAf,IAAAA,eAAe,WAAf,YAAAA,eAAe;AAChB,GAL4B,EAK1B,CAACR,gBAAD,EAAmBQ,eAAnB,CAL0B,CAA7B;;AAOA,sBACE,6BAAC,yBAAD;AACE,IAAA,SAAS,EAAEV,iBADb;AAEE,IAAA,2BAA2B,EAAEM,2BAAF,aAAEA,2BAAF,cAAEA,2BAAF,GAAiC,CAF9D;AAGE,IAAA,eAAe,EAAEO,oBAHnB;AAIE,IAAA,iBAAiB,EAAEC,sBAJrB;AAKE,IAAA,WAAW,EAAEC,gBALf;AAME,IAAA,eAAe,EAAEC,oBANnB;AAOE,IAAA,KAAK,EAAE,CAACC,MAAM,CAACC,KAAR,EAAeP,KAAf;AAPT,KAQMC,cARN,GAUGR,UAAU,KAAK,OAAf,iBACC,6BAAC,OAAD;AAAS,IAAA,OAAO,EAAEL,OAAlB;AAA2B,IAAA,MAAM,EAAED,MAAnC;AAA2C,IAAA,KAAK,EAAEK;AAAlD,IAXJ,CADF;AAgBD,CAtED,CAbK;;;;AAqFP,MAAMc,MAAM,GAAGE,wBAAWC,MAAX,CAAkB;AAC/BF,EAAAA,KAAK,EAAE;AACLG,IAAAA,MAAM,EAAE,CADH;AAELC,IAAAA,OAAO,EAAE;AAFJ;AADwB,CAAlB,CAAf","sourcesContent":["import React, { useCallback } from 'react';\nimport type { ModalProps } from 'react-native-modal';\nimport Modal from 'react-native-modal';\nimport type { ModalConfirmFunction } from './modal-confirm-function';\nimport { useModalViewModel } from './use-modal-view-model';\nimport { StyleSheet } from 'react-native';\nimport type { ModalInstance } from './modal-instance';\n\nexport type CreateModalFunctionParam<\n  Data extends unknown = void, // 모달 결과로 받을 값의 타입\n  Param extends unknown = void\n> = [\n  // 모달 내용 컴포넌트\n  Content: React.VoidFunctionComponent<{\n    confirm: ModalConfirmFunction<Data>; // 모달 종료 함수 (승인)\n    cancel: () => void; // 모달 종료 함수 (취소)\n    param: Param;\n  }>,\n  option?: {\n    cancelOnBackdropPress?: boolean; // 배경 클릭시 취소 여부\n    cancelOnBackButtonPress?: boolean; // 뒤로가기 버튼 클릭시 취소 여부\n    modalProps?: Partial<ModalProps>;\n  }\n];\n\n/**\n * 모달 컴포넌트 생성 함수\n */\nexport const createModal = <\n  Data extends unknown = void, // 모달 결과로 받을 값의 타입\n  Param extends unknown = void\n>(\n  ...[\n    Content,\n    {\n      cancelOnBackButtonPress = false,\n      cancelOnBackdropPress = false,\n      modalProps = {},\n    } = {},\n  ]: CreateModalFunctionParam<Data, Param>\n) =>\n  React.forwardRef<ModalInstance<Data, Param>>((_, ref) => {\n    const {\n      handleBackButtonPress,\n      handleBackdropPress,\n      cancel,\n      confirm,\n      desiredVisibility,\n      handleModalHidden,\n      handleModalShown,\n      param,\n      visibility,\n    } = useModalViewModel(ref, {\n      cancelOnBackButtonPress,\n      cancelOnBackdropPress,\n    });\n\n    const {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      isVisible,\n      backdropTransitionOutTiming,\n      onBackdropPress,\n      onBackButtonPress,\n      onModalHide,\n      onModalWillShow,\n      style,\n      ...restModalProps\n    } = modalProps;\n\n    const _handleBackdropPress = useCallback<\n      ModalProps['onBackdropPress']\n    >(() => {\n      handleBackdropPress();\n      onBackdropPress?.();\n    }, [handleBackdropPress, onBackdropPress]);\n\n    const _handleBackButtonPress = useCallback<\n      ModalProps['onBackButtonPress']\n    >(() => {\n      handleBackButtonPress();\n      onBackButtonPress?.();\n    }, [handleBackButtonPress, onBackButtonPress]);\n\n    const _handleModalHide = useCallback<ModalProps['onModalHide']>(() => {\n      handleModalHidden();\n      onModalHide?.();\n    }, [handleModalHidden, onModalHide]);\n\n    const _handleModalWillShow = useCallback<\n      ModalProps['onModalWillShow']\n    >(() => {\n      handleModalShown();\n      onModalWillShow?.();\n    }, [handleModalShown, onModalWillShow]);\n\n    return (\n      <Modal\n        isVisible={desiredVisibility}\n        backdropTransitionOutTiming={backdropTransitionOutTiming ?? 0}\n        onBackdropPress={_handleBackdropPress}\n        onBackButtonPress={_handleBackButtonPress}\n        onModalHide={_handleModalHide}\n        onModalWillShow={_handleModalWillShow}\n        style={[styles.modal, style]}\n        {...restModalProps}\n      >\n        {visibility === 'SHOWN' && (\n          <Content confirm={confirm} cancel={cancel} param={param!} />\n        )}\n      </Modal>\n    );\n  });\n\nconst styles = StyleSheet.create({\n  modal: {\n    margin: 0,\n    padding: 0,\n  },\n});\n"]}
+{"version":3,"sources":["create-modal.tsx"],"names":["createModal","Content","cancelOnBackButtonPress","cancelOnBackdropPress","modalProps","React","forwardRef","_","ref","handleBackButtonPress","handleBackdropPress","cancel","confirm","desiredVisibility","handleModalHidden","handleModalShown","param","visibility","backdropTransitionOutTiming","onBackdropPress","onBackButtonPress","onModalHide","onModalWillShow","style","restModalProps","_handleBackdropPress","_handleBackButtonPress","_handleModalHide","_handleModalWillShow","styles","modal","StyleSheet","create","margin","padding"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;AACA;;;;;;;;;;AAoBA;AACA;AACA;AACO,MAAMA,WAAW,GAAG,CAIzB,GAAG,CACDC,OADC,EAED;AACEC,EAAAA,uBAAuB,GAAG,KAD5B;AAEEC,EAAAA,qBAAqB,GAAG,KAF1B;AAGEC,EAAAA,UAAU,GAAG;AAHf,IAII,EANH,CAJsB,kBAazBC,eAAMC,UAAN,CAA6C,CAACC,CAAD,EAAIC,GAAJ,KAAY;AACvD,QAAM;AACJC,IAAAA,qBADI;AAEJC,IAAAA,mBAFI;AAGJC,IAAAA,MAHI;AAIJC,IAAAA,OAJI;AAKJC,IAAAA,iBALI;AAMJC,IAAAA,iBANI;AAOJC,IAAAA,gBAPI;AAQJC,IAAAA,KARI;AASJC,IAAAA;AATI,MAUF,0CAAkBT,GAAlB,EAAuB;AACzBN,IAAAA,uBADyB;AAEzBC,IAAAA;AAFyB,GAAvB,CAVJ;AAeA,QAAM;AACJe,IAAAA,2BADI;AAEJC,IAAAA,eAFI;AAGJC,IAAAA,iBAHI;AAIJC,IAAAA,WAJI;AAKJC,IAAAA,eALI;AAMJC,IAAAA,KANI;AAOJ,OAAGC;AAPC,MAQFpB,UARJ;;AAUA,QAAMqB,oBAAoB,GAAG,wBAE3B,MAAM;AACNf,IAAAA,mBAAmB;AACnBS,IAAAA,eAAe,SAAf,IAAAA,eAAe,WAAf,YAAAA,eAAe;AAChB,GAL4B,EAK1B,CAACT,mBAAD,EAAsBS,eAAtB,CAL0B,CAA7B;;AAOA,QAAMO,sBAAsB,GAAG,wBAE7B,MAAM;AACNjB,IAAAA,qBAAqB;AACrBW,IAAAA,iBAAiB,SAAjB,IAAAA,iBAAiB,WAAjB,YAAAA,iBAAiB;AAClB,GAL8B,EAK5B,CAACX,qBAAD,EAAwBW,iBAAxB,CAL4B,CAA/B;;AAOA,QAAMO,gBAAgB,GAAG,wBAAuC,MAAM;AACpEb,IAAAA,iBAAiB;AACjBO,IAAAA,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW;AACZ,GAHwB,EAGtB,CAACP,iBAAD,EAAoBO,WAApB,CAHsB,CAAzB;;AAKA,QAAMO,oBAAoB,GAAG,wBAE3B,MAAM;AACNb,IAAAA,gBAAgB;AAChBO,IAAAA,eAAe,SAAf,IAAAA,eAAe,WAAf,YAAAA,eAAe;AAChB,GAL4B,EAK1B,CAACP,gBAAD,EAAmBO,eAAnB,CAL0B,CAA7B;;AAOA,sBACE,6BAAC,yBAAD;AACE,IAAA,SAAS,EAAET,iBADb;AAEE,IAAA,2BAA2B,EAAEK,2BAAF,aAAEA,2BAAF,cAAEA,2BAAF,GAAiC,CAF9D;AAGE,IAAA,eAAe,EAAEO,oBAHnB;AAIE,IAAA,iBAAiB,EAAEC,sBAJrB;AAKE,IAAA,WAAW,EAAEC,gBALf;AAME,IAAA,eAAe,EAAEC,oBANnB;AAOE,IAAA,KAAK,EAAE,CAACC,MAAM,CAACC,KAAR,EAAeP,KAAf;AAPT,KAQMC,cARN,GAUGP,UAAU,KAAK,OAAf,iBACC,6BAAC,OAAD;AAAS,IAAA,OAAO,EAAEL,OAAlB;AAA2B,IAAA,MAAM,EAAED,MAAnC;AAA2C,IAAA,KAAK,EAAEK;AAAlD,IAXJ,CADF;AAgBD,CApED,CAbK;;;;AAmFP,MAAMa,MAAM,GAAGE,wBAAWC,MAAX,CAAkB;AAC/BF,EAAAA,KAAK,EAAE;AACLG,IAAAA,MAAM,EAAE,CADH;AAELC,IAAAA,OAAO,EAAE;AAFJ;AADwB,CAAlB,CAAf","sourcesContent":["import React, { useCallback } from 'react';\nimport type { ModalProps } from 'react-native-modal';\nimport Modal from 'react-native-modal';\nimport type { ModalConfirmFunction } from './modal-confirm-function';\nimport { useModalViewModel } from './use-modal-view-model';\nimport { StyleSheet } from 'react-native';\nimport type { ModalInstance } from './modal-instance';\n\nexport type CreateModalFunctionParam<\n  Data extends unknown = void, // 모달 결과로 받을 값의 타입\n  Param extends unknown = void\n> = [\n  // 모달 내용 컴포넌트\n  Content: React.VoidFunctionComponent<{\n    confirm: ModalConfirmFunction<Data>; // 모달 종료 함수 (승인)\n    cancel: () => void; // 모달 종료 함수 (취소)\n    param: Param;\n  }>,\n  option?: {\n    cancelOnBackdropPress?: boolean; // 배경 클릭시 취소 여부\n    cancelOnBackButtonPress?: boolean; // 뒤로가기 버튼 클릭시 취소 여부\n    modalProps?: Omit<Partial<ModalProps>, 'isVisible'>;\n  }\n];\n\n/**\n * 모달 컴포넌트 생성 함수\n */\nexport const createModal = <\n  Data extends unknown = void, // 모달 결과로 받을 값의 타입\n  Param extends unknown = void\n>(\n  ...[\n    Content,\n    {\n      cancelOnBackButtonPress = false,\n      cancelOnBackdropPress = false,\n      modalProps = {},\n    } = {},\n  ]: CreateModalFunctionParam<Data, Param>\n) =>\n  React.forwardRef<ModalInstance<Data, Param>>((_, ref) => {\n    const {\n      handleBackButtonPress,\n      handleBackdropPress,\n      cancel,\n      confirm,\n      desiredVisibility,\n      handleModalHidden,\n      handleModalShown,\n      param,\n      visibility,\n    } = useModalViewModel(ref, {\n      cancelOnBackButtonPress,\n      cancelOnBackdropPress,\n    });\n\n    const {\n      backdropTransitionOutTiming,\n      onBackdropPress,\n      onBackButtonPress,\n      onModalHide,\n      onModalWillShow,\n      style,\n      ...restModalProps\n    } = modalProps;\n\n    const _handleBackdropPress = useCallback<\n      ModalProps['onBackdropPress']\n    >(() => {\n      handleBackdropPress();\n      onBackdropPress?.();\n    }, [handleBackdropPress, onBackdropPress]);\n\n    const _handleBackButtonPress = useCallback<\n      ModalProps['onBackButtonPress']\n    >(() => {\n      handleBackButtonPress();\n      onBackButtonPress?.();\n    }, [handleBackButtonPress, onBackButtonPress]);\n\n    const _handleModalHide = useCallback<ModalProps['onModalHide']>(() => {\n      handleModalHidden();\n      onModalHide?.();\n    }, [handleModalHidden, onModalHide]);\n\n    const _handleModalWillShow = useCallback<\n      ModalProps['onModalWillShow']\n    >(() => {\n      handleModalShown();\n      onModalWillShow?.();\n    }, [handleModalShown, onModalWillShow]);\n\n    return (\n      <Modal\n        isVisible={desiredVisibility}\n        backdropTransitionOutTiming={backdropTransitionOutTiming ?? 0}\n        onBackdropPress={_handleBackdropPress}\n        onBackButtonPress={_handleBackButtonPress}\n        onModalHide={_handleModalHide}\n        onModalWillShow={_handleModalWillShow}\n        style={[styles.modal, style]}\n        {...restModalProps}\n      >\n        {visibility === 'SHOWN' && (\n          <Content confirm={confirm} cancel={cancel} param={param!} />\n        )}\n      </Modal>\n    );\n  });\n\nconst styles = StyleSheet.create({\n  modal: {\n    margin: 0,\n    padding: 0,\n  },\n});\n"]}

lib/module/create-modal.js

@@ -31,4 +31,2 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
   const {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    isVisible,
     backdropTransitionOutTiming,
@@ -35,0 +33,0 @@ onBackdropPress,

lib/module/create-modal.js.map

@@ -1,1 +0,1 @@
-{"version":3,"sources":["create-modal.tsx"],"names":["React","useCallback","Modal","useModalViewModel","StyleSheet","createModal","Content","cancelOnBackButtonPress","cancelOnBackdropPress","modalProps","forwardRef","_","ref","handleBackButtonPress","handleBackdropPress","cancel","confirm","desiredVisibility","handleModalHidden","handleModalShown","param","visibility","isVisible","backdropTransitionOutTiming","onBackdropPress","onBackButtonPress","onModalHide","onModalWillShow","style","restModalProps","_handleBackdropPress","_handleBackButtonPress","_handleModalHide","_handleModalWillShow","styles","modal","create","margin","padding"],"mappings":"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","sourcesContent":["import React, { useCallback } from 'react';\nimport type { ModalProps } from 'react-native-modal';\nimport Modal from 'react-native-modal';\nimport type { ModalConfirmFunction } from './modal-confirm-function';\nimport { useModalViewModel } from './use-modal-view-model';\nimport { StyleSheet } from 'react-native';\nimport type { ModalInstance } from './modal-instance';\n\nexport type CreateModalFunctionParam<\n  Data extends unknown = void, // 모달 결과로 받을 값의 타입\n  Param extends unknown = void\n> = [\n  // 모달 내용 컴포넌트\n  Content: React.VoidFunctionComponent<{\n    confirm: ModalConfirmFunction<Data>; // 모달 종료 함수 (승인)\n    cancel: () => void; // 모달 종료 함수 (취소)\n    param: Param;\n  }>,\n  option?: {\n    cancelOnBackdropPress?: boolean; // 배경 클릭시 취소 여부\n    cancelOnBackButtonPress?: boolean; // 뒤로가기 버튼 클릭시 취소 여부\n    modalProps?: Partial<ModalProps>;\n  }\n];\n\n/**\n * 모달 컴포넌트 생성 함수\n */\nexport const createModal = <\n  Data extends unknown = void, // 모달 결과로 받을 값의 타입\n  Param extends unknown = void\n>(\n  ...[\n    Content,\n    {\n      cancelOnBackButtonPress = false,\n      cancelOnBackdropPress = false,\n      modalProps = {},\n    } = {},\n  ]: CreateModalFunctionParam<Data, Param>\n) =>\n  React.forwardRef<ModalInstance<Data, Param>>((_, ref) => {\n    const {\n      handleBackButtonPress,\n      handleBackdropPress,\n      cancel,\n      confirm,\n      desiredVisibility,\n      handleModalHidden,\n      handleModalShown,\n      param,\n      visibility,\n    } = useModalViewModel(ref, {\n      cancelOnBackButtonPress,\n      cancelOnBackdropPress,\n    });\n\n    const {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      isVisible,\n      backdropTransitionOutTiming,\n      onBackdropPress,\n      onBackButtonPress,\n      onModalHide,\n      onModalWillShow,\n      style,\n      ...restModalProps\n    } = modalProps;\n\n    const _handleBackdropPress = useCallback<\n      ModalProps['onBackdropPress']\n    >(() => {\n      handleBackdropPress();\n      onBackdropPress?.();\n    }, [handleBackdropPress, onBackdropPress]);\n\n    const _handleBackButtonPress = useCallback<\n      ModalProps['onBackButtonPress']\n    >(() => {\n      handleBackButtonPress();\n      onBackButtonPress?.();\n    }, [handleBackButtonPress, onBackButtonPress]);\n\n    const _handleModalHide = useCallback<ModalProps['onModalHide']>(() => {\n      handleModalHidden();\n      onModalHide?.();\n    }, [handleModalHidden, onModalHide]);\n\n    const _handleModalWillShow = useCallback<\n      ModalProps['onModalWillShow']\n    >(() => {\n      handleModalShown();\n      onModalWillShow?.();\n    }, [handleModalShown, onModalWillShow]);\n\n    return (\n      <Modal\n        isVisible={desiredVisibility}\n        backdropTransitionOutTiming={backdropTransitionOutTiming ?? 0}\n        onBackdropPress={_handleBackdropPress}\n        onBackButtonPress={_handleBackButtonPress}\n        onModalHide={_handleModalHide}\n        onModalWillShow={_handleModalWillShow}\n        style={[styles.modal, style]}\n        {...restModalProps}\n      >\n        {visibility === 'SHOWN' && (\n          <Content confirm={confirm} cancel={cancel} param={param!} />\n        )}\n      </Modal>\n    );\n  });\n\nconst styles = StyleSheet.create({\n  modal: {\n    margin: 0,\n    padding: 0,\n  },\n});\n"]}
+{"version":3,"sources":["create-modal.tsx"],"names":["React","useCallback","Modal","useModalViewModel","StyleSheet","createModal","Content","cancelOnBackButtonPress","cancelOnBackdropPress","modalProps","forwardRef","_","ref","handleBackButtonPress","handleBackdropPress","cancel","confirm","desiredVisibility","handleModalHidden","handleModalShown","param","visibility","backdropTransitionOutTiming","onBackdropPress","onBackButtonPress","onModalHide","onModalWillShow","style","restModalProps","_handleBackdropPress","_handleBackButtonPress","_handleModalHide","_handleModalWillShow","styles","modal","create","margin","padding"],"mappings":"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","sourcesContent":["import React, { useCallback } from 'react';\nimport type { ModalProps } from 'react-native-modal';\nimport Modal from 'react-native-modal';\nimport type { ModalConfirmFunction } from './modal-confirm-function';\nimport { useModalViewModel } from './use-modal-view-model';\nimport { StyleSheet } from 'react-native';\nimport type { ModalInstance } from './modal-instance';\n\nexport type CreateModalFunctionParam<\n  Data extends unknown = void, // 모달 결과로 받을 값의 타입\n  Param extends unknown = void\n> = [\n  // 모달 내용 컴포넌트\n  Content: React.VoidFunctionComponent<{\n    confirm: ModalConfirmFunction<Data>; // 모달 종료 함수 (승인)\n    cancel: () => void; // 모달 종료 함수 (취소)\n    param: Param;\n  }>,\n  option?: {\n    cancelOnBackdropPress?: boolean; // 배경 클릭시 취소 여부\n    cancelOnBackButtonPress?: boolean; // 뒤로가기 버튼 클릭시 취소 여부\n    modalProps?: Omit<Partial<ModalProps>, 'isVisible'>;\n  }\n];\n\n/**\n * 모달 컴포넌트 생성 함수\n */\nexport const createModal = <\n  Data extends unknown = void, // 모달 결과로 받을 값의 타입\n  Param extends unknown = void\n>(\n  ...[\n    Content,\n    {\n      cancelOnBackButtonPress = false,\n      cancelOnBackdropPress = false,\n      modalProps = {},\n    } = {},\n  ]: CreateModalFunctionParam<Data, Param>\n) =>\n  React.forwardRef<ModalInstance<Data, Param>>((_, ref) => {\n    const {\n      handleBackButtonPress,\n      handleBackdropPress,\n      cancel,\n      confirm,\n      desiredVisibility,\n      handleModalHidden,\n      handleModalShown,\n      param,\n      visibility,\n    } = useModalViewModel(ref, {\n      cancelOnBackButtonPress,\n      cancelOnBackdropPress,\n    });\n\n    const {\n      backdropTransitionOutTiming,\n      onBackdropPress,\n      onBackButtonPress,\n      onModalHide,\n      onModalWillShow,\n      style,\n      ...restModalProps\n    } = modalProps;\n\n    const _handleBackdropPress = useCallback<\n      ModalProps['onBackdropPress']\n    >(() => {\n      handleBackdropPress();\n      onBackdropPress?.();\n    }, [handleBackdropPress, onBackdropPress]);\n\n    const _handleBackButtonPress = useCallback<\n      ModalProps['onBackButtonPress']\n    >(() => {\n      handleBackButtonPress();\n      onBackButtonPress?.();\n    }, [handleBackButtonPress, onBackButtonPress]);\n\n    const _handleModalHide = useCallback<ModalProps['onModalHide']>(() => {\n      handleModalHidden();\n      onModalHide?.();\n    }, [handleModalHidden, onModalHide]);\n\n    const _handleModalWillShow = useCallback<\n      ModalProps['onModalWillShow']\n    >(() => {\n      handleModalShown();\n      onModalWillShow?.();\n    }, [handleModalShown, onModalWillShow]);\n\n    return (\n      <Modal\n        isVisible={desiredVisibility}\n        backdropTransitionOutTiming={backdropTransitionOutTiming ?? 0}\n        onBackdropPress={_handleBackdropPress}\n        onBackButtonPress={_handleBackButtonPress}\n        onModalHide={_handleModalHide}\n        onModalWillShow={_handleModalWillShow}\n        style={[styles.modal, style]}\n        {...restModalProps}\n      >\n        {visibility === 'SHOWN' && (\n          <Content confirm={confirm} cancel={cancel} param={param!} />\n        )}\n      </Modal>\n    );\n  });\n\nconst styles = StyleSheet.create({\n  modal: {\n    margin: 0,\n    padding: 0,\n  },\n});\n"]}

lib/typescript/create-modal.d.ts

@@ -15,3 +15,3 @@ import React from 'react';
         cancelOnBackButtonPress?: boolean;
-        modalProps?: Partial<ModalProps>;
+        modalProps?: Omit<Partial<ModalProps>, 'isVisible'>;
     }
@@ -29,3 +29,3 @@ ];
     cancelOnBackButtonPress?: boolean | undefined;
-    modalProps?: Partial<ModalProps> | undefined;
+    modalProps?: Omit<Partial<ModalProps>, "isVisible"> | undefined;
 } | undefined) => React.ForwardRefExoticComponent<React.RefAttributes<ModalInstance<Data, Param>>>;

lib/typescript/create-use-modal.d.ts

@@ -9,3 +9,3 @@ import React from 'react';
     cancelOnBackButtonPress?: boolean | undefined;
-    modalProps?: Partial<import("react-native-modal").ModalProps> | undefined;
+    modalProps?: Omit<Partial<import("react-native-modal").ModalProps>, "isVisible"> | undefined;
 } | undefined) => () => import("./modal-instance").ModalInstance<Data, Param>;

package.json

 {
   "name": "react-native-use-modal",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "hooks for the react native modal",
@@ -5,0 +5,0 @@ "main": "lib/commonjs/index",

README.md

 # react-native-use-modal
 
-Way to encapsulation your modal and get result by promise
+Way to encapsulate your modal and get result by promise
 
 ## Feature
 
-- show modal and get result as promise
-- easy to show multiple modal continuously
-- pass parameters to modal when call `show`
-- get result data from modal when hide (as promise)
-- encapsulation modal component
-- no need to explicitly place modal at component tree
-- fully customizable
+- Show modal and get result as promise
+- Easy to show multiple modal continuously
+- Pass parameters to modal when call `show`
+- Get result data from modal when hide (as promise)
+- modal encapsulation
+- No need to explicitly place modal at component tree
+- Fully customizable
 
@@ -74,3 +74,3 @@ ## Installation
 
-### Handles the modal's result
+### Handling the modal's result
 
@@ -163,3 +163,3 @@ You can wait for modal to return the result with await
 
-### Handles the modal's result with value
+### Handling the modal's result with value
 ```tsx
@@ -186,2 +186,37 @@ // BazView.tsx
 
+### Customize modal config
+This package depends on `react-native-modal` and accept all its props.
+You can set this in the second argument of the `createUseModal`.
+For example, an animation could be set up like this:
+
+```tsx
+export const useSimpleModal = createUseModal(
+  ({confirm, cancel}) => {
+    /* render here */
+  },
+  {
+    modalProps: {
+      animationIn: 'fadeIn',
+      animationOut: 'fadeOut',
+    },
+  },
+);
+```
+`createUseModal` supports all props, except for the `isVisible` property. We internally manage this property.
+
+### Make cancelable when press backdrop or back button
+With these option, modal will cancel when press backdrop or back button.
+Each option can be set independently.
+```tsx
+export const useSimpleModal = createUseModal(
+  ({confirm, cancel}) => {
+    /* render here */
+  },
+  {
+    cancelOnBackButtonPress: true, // Default is false
+    cancelOnBackdropPress: true, // Default is false
+  },
+);
+```
+
 ## Workflow example
@@ -188,0 +223,0 @@

src/create-modal.tsx

@@ -22,3 +22,3 @@ import React, { useCallback } from 'react';
     cancelOnBackButtonPress?: boolean; // 뒤로가기 버튼 클릭시 취소 여부
-    modalProps?: Partial<ModalProps>;
+    modalProps?: Omit<Partial<ModalProps>, 'isVisible'>;
   }
@@ -60,4 +60,2 @@ ];
     const {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      isVisible,
       backdropTransitionOutTiming,
@@ -64,0 +62,0 @@ onBackdropPress,

No alert changes

Improved metrics

Total package byte prevSize

99642

0.55%

Number of lines in readme file

233

17.68%

Worsened metrics

Lines of code

1145

-0.52%

No dependency changes