| 1 | {"version":3,"sources":["CardSheet.tsx"],"names":["React","StyleSheet","View","forwardRef","CardSheet","ref","enabled","layout","style","rest","fill","setFill","useState","useEffect","document","body","width","clientWidth","height","clientHeight","styles","page","card","create","minHeight","flex","overflow"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,UAAT,EAAqBC,IAArB,QAA4C,cAA5C;AAQA;AACA;AACA;AACA;AACA,4BAAeF,KAAK,CAACG,UAAN,CAA8B,SAASC,SAAT,OAE3CC,GAF2C,EAG3C;AAAA,MAFA;AAAEC,IAAAA,OAAF;AAAWC,IAAAA,MAAX;AAAmBC,IAAAA,KAAnB;AAA0B,OAAGC;AAA7B,GAEA;AACA,QAAM,CAACC,IAAD,EAAOC,OAAP,IAAkBX,KAAK,CAACY,QAAN,CAAe,KAAf,CAAxB;AAEAZ,EAAAA,KAAK,CAACa,SAAN,CAAgB,MAAM;AACpB,QAAI,OAAOC,QAAP,KAAoB,WAApB,IAAmC,CAACA,QAAQ,CAACC,IAAjD,EAAuD;AACrD;AACA;AACD;;AAED,UAAMC,KAAK,GAAGF,QAAQ,CAACC,IAAT,CAAcE,WAA5B;AACA,UAAMC,MAAM,GAAGJ,QAAQ,CAACC,IAAT,CAAcI,YAA7B;AAEAR,IAAAA,OAAO,CAACK,KAAK,KAAKT,MAAM,CAACS,KAAjB,IAA0BE,MAAM,KAAKX,MAAM,CAACW,MAA7C,CAAP;AACD,GAVD,EAUG,CAACX,MAAM,CAACW,MAAR,EAAgBX,MAAM,CAACS,KAAvB,CAVH;AAYA,sBACE,oBAAC,IAAD,eACMP,IADN;AAEE,IAAA,GAAG,EAAEJ,GAFP;AAGE,IAAA,KAAK,EAAE,CAACC,OAAO,IAAII,IAAX,GAAkBU,MAAM,CAACC,IAAzB,GAAgCD,MAAM,CAACE,IAAxC,EAA8Cd,KAA9C;AAHT,KADF;AAOD,CAzBc,CAAf;AA2BA,MAAMY,MAAM,GAAGnB,UAAU,CAACsB,MAAX,CAAkB;AAC/BF,EAAAA,IAAI,EAAE;AACJG,IAAAA,SAAS,EAAE;AADP,GADyB;AAI/BF,EAAAA,IAAI,EAAE;AACJG,IAAAA,IAAI,EAAE,CADF;AAEJC,IAAAA,QAAQ,EAAE;AAFN;AAJyB,CAAlB,CAAf","sourcesContent":["import * as React from 'react';\nimport { StyleSheet, View, ViewProps } from 'react-native';\n\ntype Props = ViewProps & {\n enabled: boolean;\n layout: { width: number; height: number };\n children: React.ReactNode;\n};\n\n// This component will render a page which overflows the screen\n// if the container fills the body by comparing the size\n// This lets the document.body handle scrolling of the content\n// It's necessary for mobile browsers to be able to hide address bar on scroll\nexport default React.forwardRef<View, Props>(function CardSheet(\n { enabled, layout, style, ...rest },\n ref\n) {\n const [fill, setFill] = React.useState(false);\n\n React.useEffect(() => {\n if (typeof document === 'undefined' || !document.body) {\n // Only run when DOM is available\n return;\n }\n\n const width = document.body.clientWidth;\n const height = document.body.clientHeight;\n\n setFill(width === layout.width && height === layout.height);\n }, [layout.height, layout.width]);\n\n return (\n <View\n {...rest}\n ref={ref}\n style={[enabled && fill ? styles.page : styles.card, style]}\n />\n );\n});\n\nconst styles = StyleSheet.create({\n page: {\n minHeight: '100%',\n },\n card: {\n flex: 1,\n overflow: 'hidden',\n },\n});\n"]} |