UNPKG

softchatjs-react-native

Version:

React native UI SDK for softchatjs-core. Create a free account at: https://www.softchatjs.com

1 lines 3.97 kB
{"version":3,"sources":["../../src/contexts/ModalProvider.tsx"],"sourcesContent":["import React, { createContext, useContext, useState } from \"react\";\r\nimport {\r\n KeyboardAvoidingView,\r\n Modal,\r\n ScrollView,\r\n StyleSheet,\r\n TouchableWithoutFeedback,\r\n View,\r\n ViewStyle,\r\n Text,\r\n} from \"react-native\";\r\nimport { Children } from \"../types\";\r\nimport { stopPropagation } from \"../utils\";\r\n\r\ntype ModalProps = {\r\n dismissable?: boolean;\r\n justifyContent?: ViewStyle[\"justifyContent\"];\r\n children: Children | null;\r\n animation?: \"none\" | \"fade\" | \"slide\" | undefined;\r\n containerWidth?: ViewStyle[\"width\"];\r\n};\r\n\r\ntype ModalProvider = {\r\n displayModal: (child: ModalProps) => void;\r\n resetModal: (cb?: Function) => void;\r\n};\r\n\r\nconst initial: ModalProvider & { modalProps: ModalProps | null } = {\r\n displayModal: () => {},\r\n resetModal: () => {},\r\n modalProps: {\r\n dismissable: true,\r\n justifyContent: \"center\",\r\n children: null,\r\n animation: \"slide\",\r\n containerWidth: \"100%\",\r\n },\r\n};\r\n\r\nconst ModalProviderContext = createContext<ModalProvider>(initial);\r\n\r\nexport const useModalProvider = () => useContext(ModalProviderContext);\r\n\r\nexport default function ModalProvider(props: { children: Children }) {\r\n const { children } = props;\r\n\r\n const [modal, showModal] = useState(false);\r\n const [modalProps, setModalProps] = useState(initial.modalProps);\r\n\r\n const displayModal = (props: ModalProps) => {\r\n showModal(true);\r\n setModalProps({ ...initial.modalProps, ...props });\r\n };\r\n\r\n const dismiss = () => {\r\n if (modalProps?.dismissable) {\r\n showModal(false);\r\n }\r\n };\r\n\r\n const resetModal = (cb?: Function) => {\r\n showModal(false);\r\n cb?.();\r\n };\r\n\r\n return (\r\n <ModalProviderContext.Provider\r\n value={{\r\n displayModal,\r\n resetModal,\r\n }}\r\n >\r\n {children}\r\n <Modal\r\n animationType={modalProps?.animation}\r\n style={{ height: \"100%\", width: \"100%\" }}\r\n visible={modal}\r\n transparent\r\n >\r\n <View\r\n style={{\r\n flex: 1,\r\n height: \"100%\",\r\n width: \"100%\",\r\n alignItems: \"center\",\r\n justifyContent: modalProps?.justifyContent,\r\n backgroundColor: \"rgba(0,0,0,.3)\",\r\n }}\r\n >\r\n <View style={{ flex: 1, width: \"100%\", height: \"100%\" }}>\r\n {modalProps?.children}\r\n </View>\r\n </View>\r\n </Modal>\r\n </ModalProviderContext.Provider>\r\n );\r\n}\r\n"],"mappings":";AAAA,OAAO,SAAS,eAAe,YAAY,gBAAgB;AAC3D;AAAA,EAEE;AAAA,EAIA;AAAA,OAGK;AAiBP,IAAM,UAA6D;AAAA,EACjE,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,YAAY,MAAM;AAAA,EAAC;AAAA,EACnB,YAAY;AAAA,IACV,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,WAAW;AAAA,IACX,gBAAgB;AAAA,EAClB;AACF;AAEA,IAAM,uBAAuB,cAA6B,OAAO;AAE1D,IAAM,mBAAmB,MAAM,WAAW,oBAAoB;AAEtD,SAAR,cAA+B,OAA+B;AACnE,QAAM,EAAE,SAAS,IAAI;AAErB,QAAM,CAAC,OAAO,SAAS,IAAI,SAAS,KAAK;AACzC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,QAAQ,UAAU;AAE/D,QAAM,eAAe,CAACA,WAAsB;AAC1C,cAAU,IAAI;AACd,kBAAc,EAAE,GAAG,QAAQ,YAAY,GAAGA,OAAM,CAAC;AAAA,EACnD;AAEA,QAAM,UAAU,MAAM;AACpB,QAAI,YAAY,aAAa;AAC3B,gBAAU,KAAK;AAAA,IACjB;AAAA,EACF;AAEA,QAAM,aAAa,CAAC,OAAkB;AACpC,cAAU,KAAK;AACf,SAAK;AAAA,EACP;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,OAAO;AAAA,QACL;AAAA,QACA;AAAA,MACF;AAAA;AAAA,IAEC;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACC,eAAe,YAAY;AAAA,QAC3B,OAAO,EAAE,QAAQ,QAAQ,OAAO,OAAO;AAAA,QACvC,SAAS;AAAA,QACT,aAAW;AAAA;AAAA,MAEX;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,MAAM;AAAA,YACN,QAAQ;AAAA,YACR,OAAO;AAAA,YACP,YAAY;AAAA,YACZ,gBAAgB,YAAY;AAAA,YAC5B,iBAAiB;AAAA,UACnB;AAAA;AAAA,QAEA,oCAAC,QAAK,OAAO,EAAE,MAAM,GAAG,OAAO,QAAQ,QAAQ,OAAO,KACnD,YAAY,QACf;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEJ;","names":["props"]}