@r0b0t3d/react-native-collapsible 1.3.0 → 1.3.2

package/lib/commonjs/components/header/CollapsibleHeaderContainer.js

@@ -5,12 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = CollapsibleHeaderContainer;
 
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
 
 var _useCollapsibleHeaderContext = _interopRequireDefault(require("../../hooks/useCollapsibleHeaderContext"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /* eslint-disable react-hooks/exhaustive-deps */
 let key = 0;
 
@@ -23,15 +29,27 @@ function CollapsibleHeaderContainer({
     unmount,
     update
   } = (0, _useCollapsibleHeaderContext.default)();
+  const internalStyle = (0, _react.useMemo)(() => {
+    return {
+      zIndex: 100000 - key
+    };
+  }, []);
+  const content = (0, _react.useMemo)(() => {
+    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      key: contentKey,
+      style: internalStyle,
+      pointerEvents: "box-none"
+    }, children);
+  }, [children]);
   (0, _react.useEffect)(() => {
-    mount(contentKey, children);
+    mount(contentKey, content);
     return () => {
       unmount(contentKey);
     };
   }, [contentKey]);
   (0, _react.useEffect)(() => {
-    update(contentKey, children);
-  }, [children]);
+    update(contentKey, content);
+  }, [content]);
   return null;
 }
 //# sourceMappingURL=CollapsibleHeaderContainer.js.map

package/lib/commonjs/components/header/CollapsibleHeaderContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CollapsibleHeaderContainer.tsx"],"names":["key","CollapsibleHeaderContainer","children","contentKey","mount","unmount","update"],"mappings":";;;;;;;AACA;;AAEA;;;;AAHA;AAUA,IAAIA,GAAG,GAAG,CAAV;;AAEe,SAASC,0BAAT,CAAoC;AAAEC,EAAAA;AAAF,CAApC,EAAyD;AACtE,QAAMC,UAAU,GAAG,oBAAQ,MAAO,sBAAqBH,GAAG,EAAG,EAA1C,EAA6C,EAA7C,CAAnB;AACA,QAAM;AAAEI,IAAAA,KAAF;AAASC,IAAAA,OAAT;AAAkBC,IAAAA;AAAlB,MAA6B,2CAAnC;AAEA,wBAAU,MAAM;AACdF,IAAAA,KAAK,CAACD,UAAD,EAAaD,QAAb,CAAL;AAEA,WAAO,MAAM;AACXG,MAAAA,OAAO,CAACF,UAAD,CAAP;AACD,KAFD;AAGD,GAND,EAMG,CAACA,UAAD,CANH;AAQA,wBAAU,MAAM;AACdG,IAAAA,MAAM,CAACH,UAAD,EAAaD,QAAb,CAAN;AACD,GAFD,EAEG,CAACA,QAAD,CAFH;AAIA,SAAO,IAAP;AACD","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport { ReactNode, useEffect, useMemo } from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport useCollapsibleHeaderContext from '../../hooks/useCollapsibleHeaderContext';\n\ntype Props = {\n  children: ReactNode;\n  containerStyle?: StyleProp<ViewStyle>;\n};\n\nlet key = 0;\n\nexport default function CollapsibleHeaderContainer({ children }: Props) {\n  const contentKey = useMemo(() => `collapsible-header-${key++}`, []);\n  const { mount, unmount, update } = useCollapsibleHeaderContext();\n\n  useEffect(() => {\n    mount(contentKey, children);\n\n    return () => {\n      unmount(contentKey);\n    };\n  }, [contentKey]);\n\n  useEffect(() => {\n    update(contentKey, children);\n  }, [children]);\n\n  return null;\n}\n"]}
+{"version":3,"sources":["CollapsibleHeaderContainer.tsx"],"names":["key","CollapsibleHeaderContainer","children","contentKey","mount","unmount","update","internalStyle","zIndex","content"],"mappings":";;;;;;;AACA;;AACA;;AACA;;;;;;;;AAHA;AAUA,IAAIA,GAAG,GAAG,CAAV;;AAEe,SAASC,0BAAT,CAAoC;AAAEC,EAAAA;AAAF,CAApC,EAAyD;AACtE,QAAMC,UAAU,GAAG,oBAAQ,MAAO,sBAAqBH,GAAG,EAAG,EAA1C,EAA6C,EAA7C,CAAnB;AACA,QAAM;AAAEI,IAAAA,KAAF;AAASC,IAAAA,OAAT;AAAkBC,IAAAA;AAAlB,MAA6B,2CAAnC;AAEA,QAAMC,aAAa,GAAG,oBAAQ,MAAM;AAClC,WAAO;AACLC,MAAAA,MAAM,EAAE,SAASR;AADZ,KAAP;AAGD,GAJqB,EAInB,EAJmB,CAAtB;AAMA,QAAMS,OAAO,GAAG,oBAAQ,MAAM;AAC5B,wBACE,6BAAC,iBAAD;AAAM,MAAA,GAAG,EAAEN,UAAX;AAAuB,MAAA,KAAK,EAAEI,aAA9B;AAA6C,MAAA,aAAa,EAAC;AAA3D,OACGL,QADH,CADF;AAKD,GANe,EAMb,CAACA,QAAD,CANa,CAAhB;AAQA,wBAAU,MAAM;AACdE,IAAAA,KAAK,CAACD,UAAD,EAAaM,OAAb,CAAL;AAEA,WAAO,MAAM;AACXJ,MAAAA,OAAO,CAACF,UAAD,CAAP;AACD,KAFD;AAGD,GAND,EAMG,CAACA,UAAD,CANH;AAQA,wBAAU,MAAM;AACdG,IAAAA,MAAM,CAACH,UAAD,EAAaM,OAAb,CAAN;AACD,GAFD,EAEG,CAACA,OAAD,CAFH;AAIA,SAAO,IAAP;AACD","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { ReactNode, useEffect, useMemo } from 'react';\nimport { View, StyleProp, ViewStyle } from 'react-native';\nimport useCollapsibleHeaderContext from '../../hooks/useCollapsibleHeaderContext';\n\ntype Props = {\n  children: ReactNode;\n  containerStyle?: StyleProp<ViewStyle>;\n};\n\nlet key = 0;\n\nexport default function CollapsibleHeaderContainer({ children }: Props) {\n  const contentKey = useMemo(() => `collapsible-header-${key++}`, []);\n  const { mount, unmount, update } = useCollapsibleHeaderContext();\n\n  const internalStyle = useMemo(() => {\n    return {\n      zIndex: 100000 - key,\n    };\n  }, []);\n\n  const content = useMemo(() => {\n    return (\n      <View key={contentKey} style={internalStyle} pointerEvents=\"box-none\">\n        {children}\n      </View>\n    );\n  }, [children]);\n\n  useEffect(() => {\n    mount(contentKey, content);\n\n    return () => {\n      unmount(contentKey);\n    };\n  }, [contentKey]);\n\n  useEffect(() => {\n    update(contentKey, content);\n  }, [content]);\n\n  return null;\n}\n"]}

package/lib/module/components/header/CollapsibleHeaderContainer.js

@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
+import { View } from 'react-native';
 import useCollapsibleHeaderContext from '../../hooks/useCollapsibleHeaderContext';
 let key = 0;
 export default function CollapsibleHeaderContainer({
@@ -11,15 +12,27 @@ export default function CollapsibleHeaderContainer({
     unmount,
     update
   } = useCollapsibleHeaderContext();
+  const internalStyle = useMemo(() => {
+    return {
+      zIndex: 100000 - key
+    };
+  }, []);
+  const content = useMemo(() => {
+    return /*#__PURE__*/React.createElement(View, {
+      key: contentKey,
+      style: internalStyle,
+      pointerEvents: "box-none"
+    }, children);
+  }, [children]);
   useEffect(() => {
-    mount(contentKey, children);
+    mount(contentKey, content);
     return () => {
       unmount(contentKey);
     };
   }, [contentKey]);
   useEffect(() => {
-    update(contentKey, children);
-  }, [children]);
+    update(contentKey, content);
+  }, [content]);
   return null;
 }
 //# sourceMappingURL=CollapsibleHeaderContainer.js.map

package/lib/module/components/header/CollapsibleHeaderContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CollapsibleHeaderContainer.tsx"],"names":["useEffect","useMemo","useCollapsibleHeaderContext","key","CollapsibleHeaderContainer","children","contentKey","mount","unmount","update"],"mappings":"AAAA;AACA,SAAoBA,SAApB,EAA+BC,OAA/B,QAA8C,OAA9C;AAEA,OAAOC,2BAAP,MAAwC,yCAAxC;AAOA,IAAIC,GAAG,GAAG,CAAV;AAEA,eAAe,SAASC,0BAAT,CAAoC;AAAEC,EAAAA;AAAF,CAApC,EAAyD;AACtE,QAAMC,UAAU,GAAGL,OAAO,CAAC,MAAO,sBAAqBE,GAAG,EAAG,EAAnC,EAAsC,EAAtC,CAA1B;AACA,QAAM;AAAEI,IAAAA,KAAF;AAASC,IAAAA,OAAT;AAAkBC,IAAAA;AAAlB,MAA6BP,2BAA2B,EAA9D;AAEAF,EAAAA,SAAS,CAAC,MAAM;AACdO,IAAAA,KAAK,CAACD,UAAD,EAAaD,QAAb,CAAL;AAEA,WAAO,MAAM;AACXG,MAAAA,OAAO,CAACF,UAAD,CAAP;AACD,KAFD;AAGD,GANQ,EAMN,CAACA,UAAD,CANM,CAAT;AAQAN,EAAAA,SAAS,CAAC,MAAM;AACdS,IAAAA,MAAM,CAACH,UAAD,EAAaD,QAAb,CAAN;AACD,GAFQ,EAEN,CAACA,QAAD,CAFM,CAAT;AAIA,SAAO,IAAP;AACD","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport { ReactNode, useEffect, useMemo } from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport useCollapsibleHeaderContext from '../../hooks/useCollapsibleHeaderContext';\n\ntype Props = {\n  children: ReactNode;\n  containerStyle?: StyleProp<ViewStyle>;\n};\n\nlet key = 0;\n\nexport default function CollapsibleHeaderContainer({ children }: Props) {\n  const contentKey = useMemo(() => `collapsible-header-${key++}`, []);\n  const { mount, unmount, update } = useCollapsibleHeaderContext();\n\n  useEffect(() => {\n    mount(contentKey, children);\n\n    return () => {\n      unmount(contentKey);\n    };\n  }, [contentKey]);\n\n  useEffect(() => {\n    update(contentKey, children);\n  }, [children]);\n\n  return null;\n}\n"]}
+{"version":3,"sources":["CollapsibleHeaderContainer.tsx"],"names":["React","useEffect","useMemo","View","useCollapsibleHeaderContext","key","CollapsibleHeaderContainer","children","contentKey","mount","unmount","update","internalStyle","zIndex","content"],"mappings":"AAAA;AACA,OAAOA,KAAP,IAA2BC,SAA3B,EAAsCC,OAAtC,QAAqD,OAArD;AACA,SAASC,IAAT,QAA2C,cAA3C;AACA,OAAOC,2BAAP,MAAwC,yCAAxC;AAOA,IAAIC,GAAG,GAAG,CAAV;AAEA,eAAe,SAASC,0BAAT,CAAoC;AAAEC,EAAAA;AAAF,CAApC,EAAyD;AACtE,QAAMC,UAAU,GAAGN,OAAO,CAAC,MAAO,sBAAqBG,GAAG,EAAG,EAAnC,EAAsC,EAAtC,CAA1B;AACA,QAAM;AAAEI,IAAAA,KAAF;AAASC,IAAAA,OAAT;AAAkBC,IAAAA;AAAlB,MAA6BP,2BAA2B,EAA9D;AAEA,QAAMQ,aAAa,GAAGV,OAAO,CAAC,MAAM;AAClC,WAAO;AACLW,MAAAA,MAAM,EAAE,SAASR;AADZ,KAAP;AAGD,GAJ4B,EAI1B,EAJ0B,CAA7B;AAMA,QAAMS,OAAO,GAAGZ,OAAO,CAAC,MAAM;AAC5B,wBACE,oBAAC,IAAD;AAAM,MAAA,GAAG,EAAEM,UAAX;AAAuB,MAAA,KAAK,EAAEI,aAA9B;AAA6C,MAAA,aAAa,EAAC;AAA3D,OACGL,QADH,CADF;AAKD,GANsB,EAMpB,CAACA,QAAD,CANoB,CAAvB;AAQAN,EAAAA,SAAS,CAAC,MAAM;AACdQ,IAAAA,KAAK,CAACD,UAAD,EAAaM,OAAb,CAAL;AAEA,WAAO,MAAM;AACXJ,MAAAA,OAAO,CAACF,UAAD,CAAP;AACD,KAFD;AAGD,GANQ,EAMN,CAACA,UAAD,CANM,CAAT;AAQAP,EAAAA,SAAS,CAAC,MAAM;AACdU,IAAAA,MAAM,CAACH,UAAD,EAAaM,OAAb,CAAN;AACD,GAFQ,EAEN,CAACA,OAAD,CAFM,CAAT;AAIA,SAAO,IAAP;AACD","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { ReactNode, useEffect, useMemo } from 'react';\nimport { View, StyleProp, ViewStyle } from 'react-native';\nimport useCollapsibleHeaderContext from '../../hooks/useCollapsibleHeaderContext';\n\ntype Props = {\n  children: ReactNode;\n  containerStyle?: StyleProp<ViewStyle>;\n};\n\nlet key = 0;\n\nexport default function CollapsibleHeaderContainer({ children }: Props) {\n  const contentKey = useMemo(() => `collapsible-header-${key++}`, []);\n  const { mount, unmount, update } = useCollapsibleHeaderContext();\n\n  const internalStyle = useMemo(() => {\n    return {\n      zIndex: 100000 - key,\n    };\n  }, []);\n\n  const content = useMemo(() => {\n    return (\n      <View key={contentKey} style={internalStyle} pointerEvents=\"box-none\">\n        {children}\n      </View>\n    );\n  }, [children]);\n\n  useEffect(() => {\n    mount(contentKey, content);\n\n    return () => {\n      unmount(contentKey);\n    };\n  }, [contentKey]);\n\n  useEffect(() => {\n    update(contentKey, content);\n  }, [content]);\n\n  return null;\n}\n"]}

package/lib/typescript/components/header/CollapsibleHeaderContainer.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import { StyleProp, ViewStyle } from 'react-native';
 declare type Props = {
     children: ReactNode;
     containerStyle?: StyleProp<ViewStyle>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@r0b0t3d/react-native-collapsible",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "Fully customizable collapsible views",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/header/CollapsibleHeaderContainer.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { ReactNode, useEffect, useMemo } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import React, { ReactNode, useEffect, useMemo } from 'react';
+import { View, StyleProp, ViewStyle } from 'react-native';
 import useCollapsibleHeaderContext from '../../hooks/useCollapsibleHeaderContext';
 
 type Props = {
@@ -14,8 +14,22 @@ export default function CollapsibleHeaderContainer({ children }: Props) {
   const contentKey = useMemo(() => `collapsible-header-${key++}`, []);
   const { mount, unmount, update } = useCollapsibleHeaderContext();
 
+  const internalStyle = useMemo(() => {
+    return {
+      zIndex: 100000 - key,
+    };
+  }, []);
+
+  const content = useMemo(() => {
+    return (
+      <View key={contentKey} style={internalStyle} pointerEvents="box-none">
+        {children}
+      </View>
+    );
+  }, [children]);
+
   useEffect(() => {
-    mount(contentKey, children);
+    mount(contentKey, content);
 
     return () => {
       unmount(contentKey);
@@ -23,8 +37,8 @@ export default function CollapsibleHeaderContainer({ children }: Props) {
   }, [contentKey]);
 
   useEffect(() => {
-    update(contentKey, children);
-  }, [children]);
+    update(contentKey, content);
+  }, [content]);
 
   return null;
 }