ferns-ui 0.47.7 → 0.47.8

package/dist/SideDrawer.js

@@ -1,7 +1,6 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { Platform, SafeAreaView } from "react-native";
 import { Drawer } from "react-native-drawer-layout";
-import { Box } from "./Box";
 const DEFAULT_STYLES = {
     width: Platform.OS === "web" ? "40%" : "95%",
     height: "100%",
@@ -9,11 +8,18 @@ const DEFAULT_STYLES = {
     borderWidth: 1,
     borderColor: "gray",
 };
+const addWebScroll = (isOpen) => {
+    if (Platform.OS === "web") {
+        return { display: isOpen ? "flex" : "none", overflow: "scroll" };
+    }
+    else {
+        return {};
+    }
+};
 export const SideDrawer = ({ position = "left", isOpen, renderContent, onClose = () => { }, onOpen = () => { }, drawerType = "front", children, drawerStyles = {}, }) => {
-    const renderDrawerContent = () => {
+    const renderDrawerContent = useCallback(() => {
         return React.createElement(SafeAreaView, null, renderContent());
-    };
-    return (React.createElement(Box, { height: "100%", overflow: "hidden", width: "100%" },
-        React.createElement(Drawer, { drawerPosition: position, drawerStyle: [DEFAULT_STYLES, drawerStyles], drawerType: drawerType, open: isOpen, renderDrawerContent: renderDrawerContent, onClose: onClose, onOpen: onOpen }, children)));
+    }, [renderContent]);
+    return (React.createElement(Drawer, { drawerPosition: position, drawerStyle: [DEFAULT_STYLES, drawerStyles, addWebScroll(isOpen)], drawerType: drawerType, open: isOpen, renderDrawerContent: renderDrawerContent, onClose: onClose, onOpen: onOpen }, children));
 };
 //# sourceMappingURL=SideDrawer.js.map

package/dist/SideDrawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideDrawer.js","sourceRoot":"","sources":["../src/SideDrawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAC,QAAQ,EAAE,YAAY,EAAuB,MAAM,cAAc,CAAC;AAC1E,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAC;AAElD,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAG1B,MAAM,cAAc,GAAyB;IAC3C,KAAK,EAAE,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;IAC5C,MAAM,EAAE,MAAM;IACd,eAAe,EAAE,WAAW;IAC5B,WAAW,EAAE,CAAC;IACd,WAAW,EAAE,MAAM;CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,GAAG,MAAM,EACjB,MAAM,EACN,aAAa,EACb,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,EAClB,MAAM,GAAG,GAAG,EAAE,GAAE,CAAC,EACjB,UAAU,GAAG,OAAO,EACpB,QAAQ,EACR,YAAY,GAAG,EAAE,GACD,EAAgB,EAAE;IAClC,MAAM,mBAAmB,GAAG,GAAiB,EAAE;QAC7C,OAAO,oBAAC,YAAY,QAAE,aAAa,EAAE,CAAgB,CAAC;IACxD,CAAC,CAAC;IACF,OAAO,CACL,oBAAC,GAAG,IAAC,MAAM,EAAC,MAAM,EAAC,QAAQ,EAAC,QAAQ,EAAC,KAAK,EAAC,MAAM;QAC/C,oBAAC,MAAM,IACL,cAAc,EAAE,QAAQ,EACxB,WAAW,EAAE,CAAC,cAAc,EAAE,YAAY,CAAC,EAC3C,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,MAAM,EACZ,mBAAmB,EAAE,mBAAmB,EACxC,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,IAEb,QAAQ,CACF,CACL,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"SideDrawer.js","sourceRoot":"","sources":["../src/SideDrawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAe,WAAW,EAAC,MAAM,OAAO,CAAC;AACvD,OAAO,EAAC,QAAQ,EAAE,YAAY,EAAuB,MAAM,cAAc,CAAC;AAC1E,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAC;AAIlD,MAAM,cAAc,GAAyB;IAC3C,KAAK,EAAE,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;IAC5C,MAAM,EAAE,MAAM;IACd,eAAe,EAAE,WAAW;IAC5B,WAAW,EAAE,CAAC;IACd,WAAW,EAAE,MAAM;CACpB,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,MAAe,EAAa,EAAE;IAClD,IAAI,QAAQ,CAAC,EAAE,KAAK,KAAK,EAAE,CAAC;QAC1B,OAAO,EAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAC,CAAC;IACjE,CAAC;SAAM,CAAC;QACN,OAAO,EAAE,CAAC;IACZ,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,GAAG,MAAM,EACjB,MAAM,EACN,aAAa,EACb,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,EAClB,MAAM,GAAG,GAAG,EAAE,GAAE,CAAC,EACjB,UAAU,GAAG,OAAO,EACpB,QAAQ,EACR,YAAY,GAAG,EAAE,GACD,EAAgB,EAAE;IAClC,MAAM,mBAAmB,GAAG,WAAW,CAAC,GAAiB,EAAE;QACzD,OAAO,oBAAC,YAAY,QAAE,aAAa,EAAE,CAAgB,CAAC;IACxD,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,CACL,oBAAC,MAAM,IACL,cAAc,EAAE,QAAQ,EACxB,WAAW,EAAE,CAAC,cAAc,EAAE,YAAY,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC,EACjE,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,MAAM,EACZ,mBAAmB,EAAE,mBAAmB,EACxC,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,IAEb,QAAQ,CACF,CACV,CAAC;AACJ,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferns-ui",
-  "version": "0.47.7",
+  "version": "0.47.8",
   "main": "dist/index.js",
   "license": "Apache-2.0",
   "scripts": {

package/src/SideDrawer.tsx

@@ -1,8 +1,7 @@
-import React, {ReactElement} from "react";
+import React, {ReactElement, useCallback} from "react";
 import {Platform, SafeAreaView, StyleProp, ViewStyle} from "react-native";
 import {Drawer} from "react-native-drawer-layout";
 
-import {Box} from "./Box";
 import {SideDrawerProps} from "./Common";
 
 const DEFAULT_STYLES: StyleProp<ViewStyle> = {
@@ -13,6 +12,14 @@ const DEFAULT_STYLES: StyleProp<ViewStyle> = {
   borderColor: "gray",
 };
 
+const addWebScroll = (isOpen: boolean): ViewStyle => {
+  if (Platform.OS === "web") {
+    return {display: isOpen ? "flex" : "none", overflow: "scroll"};
+  } else {
+    return {};
+  }
+};
+
 export const SideDrawer = ({
   position = "left",
   isOpen,
@@ -23,22 +30,21 @@ export const SideDrawer = ({
   children,
   drawerStyles = {},
 }: SideDrawerProps): ReactElement => {
-  const renderDrawerContent = (): ReactElement => {
+  const renderDrawerContent = useCallback((): ReactElement => {
     return <SafeAreaView>{renderContent()}</SafeAreaView>;
-  };
+  }, [renderContent]);
+
   return (
-    <Box height="100%" overflow="hidden" width="100%">
-      <Drawer
-        drawerPosition={position}
-        drawerStyle={[DEFAULT_STYLES, drawerStyles]}
-        drawerType={drawerType}
-        open={isOpen}
-        renderDrawerContent={renderDrawerContent}
-        onClose={onClose}
-        onOpen={onOpen}
-      >
-        {children}
-      </Drawer>
-    </Box>
+    <Drawer
+      drawerPosition={position}
+      drawerStyle={[DEFAULT_STYLES, drawerStyles, addWebScroll(isOpen)]}
+      drawerType={drawerType}
+      open={isOpen}
+      renderDrawerContent={renderDrawerContent}
+      onClose={onClose}
+      onOpen={onOpen}
+    >
+      {children}
+    </Drawer>
   );
 };