actionsheet-react - npm Package Compare versions

Comparing version 1.0.9 to 1.0.10

build/index.d.ts

@@ -1,3 +0,3 @@
-import * as React from 'react';
-import { ReactNode } from 'react';
+import * as React from "react";
+import { ReactNode } from "react";
 export interface ActionSheetProps {
@@ -16,2 +16,3 @@ onClose?: () => void;
     sheetTransition?: string;
+    reverse?: boolean;
 }
@@ -22,3 +23,3 @@ export interface ActionSheetRef {
 }
-declare const ActionSheet: React.ForwardRefExoticComponent<ActionSheetProps & React.RefAttributes<ActionSheetRef>>;
+declare const ActionSheet: React.ForwardRefExoticComponent<ActionSheetProps & React.RefAttributes<ActionSheetRef | undefined>>;
 export default ActionSheet;

build/index.es.js

@@ -1,2 +0,3 @@
-import { forwardRef, useState, useRef, useImperativeHandle, useEffect, createElement, Fragment } from 'react';
+import * as React from 'react';
+import { useState, useRef, useImperativeHandle, useEffect, Fragment } from 'react';
 
@@ -29,6 +30,6 @@ /*! *****************************************************************************
 
-var Comp = (function (_a, ref) {
-    var onClose = _a.onClose, children = _a.children, sheetStyle = _a.sheetStyle, bgStyle = _a.bgStyle, _b = _a.mouseEnable, mouseEnable = _b === void 0 ? true : _b, _c = _a.touchEnable, touchEnable = _c === void 0 ? true : _c, _d = _a.threshold, threshold = _d === void 0 ? 50 : _d, _e = _a.opacity, opacity = _e === void 0 ? 1 : _e, _f = _a.zIndex, zIndex = _f === void 0 ? 998 : _f, _g = _a.closeOnBgTap, closeOnBgTap = _g === void 0 ? true : _g, _h = _a.bgTransition, bgTransition = _h === void 0 ? "all 0.5s ease-in-out" : _h, _j = _a.sheetTransition, sheetTransition = _j === void 0 ? "all 0.3s ease-in-out" : _j;
-    var _k = useState(false), show = _k[0], setShow = _k[1];
-    var _l = useState(false), pressed = _l[0], setPressed = _l[1];
+var ActionSheet = React.forwardRef(function (_a, ref) {
+    var onClose = _a.onClose, children = _a.children, sheetStyle = _a.sheetStyle, bgStyle = _a.bgStyle, _b = _a.mouseEnable, mouseEnable = _b === void 0 ? true : _b, _c = _a.touchEnable, touchEnable = _c === void 0 ? true : _c, _d = _a.threshold, threshold = _d === void 0 ? 50 : _d, _e = _a.opacity, opacity = _e === void 0 ? 1 : _e, _f = _a.zIndex, zIndex = _f === void 0 ? 998 : _f, _g = _a.closeOnBgTap, closeOnBgTap = _g === void 0 ? true : _g, _h = _a.bgTransition, bgTransition = _h === void 0 ? "opacity 0.5s ease-in-out, z-index 0.5s ease-in-out" : _h, _j = _a.sheetTransition, sheetTransition = _j === void 0 ? "transform 0.3s ease-in-out" : _j, _k = _a.reverse, reverse = _k === void 0 ? false : _k;
+    var _l = useState(false), show = _l[0], setShow = _l[1];
+    var _m = useState(false), pressed = _m[0], setPressed = _m[1];
     var sheetRef = useRef(null);
@@ -44,12 +45,4 @@ var animationRef = useRef(0);
             setShow(false);
-        }
+        },
     }); });
-    useEffect(function () {
-        if (show) {
-            requestSheetUp();
-        }
-        else {
-            requestSheetDown();
-        }
-    }, [show]);
     var BgClick = function () {
@@ -60,10 +53,12 @@ setShow(false);
     };
-    var requestSheetDown = function () {
+    var requestSheetDown = React.useCallback(function () {
         if (null !== sheetRef.current) {
-            sheetRef.current.style.transform = "translate3d(0, 101%, 0)";
+            sheetRef.current.style.transform = reverse
+                ? "translate3d(0, -101%, 0)"
+                : "translate3d(0, 101%, 0)";
             return true;
         }
         return false;
-    };
-    var requestSheetUp = function () {
+    }, [reverse]);
+    var requestSheetUp = React.useCallback(function () {
         if (null !== sheetRef.current) {
@@ -74,4 +69,13 @@ sheetRef.current.style.transform = "translate3d(0, 0%, 0)";
         return false;
-    };
+    }, []);
+    useEffect(function () {
+        if (show) {
+            requestSheetUp();
+        }
+        else {
+            requestSheetDown();
+        }
+    }, [requestSheetDown, requestSheetUp, show]);
     var onSwipeMove = function (event) {
+        event.stopPropagation();
         if (pressed) {
@@ -83,9 +87,16 @@ var offset = event.touches[0].clientY - startY.current;
     var onMouseMove = function (event) {
+        event.stopPropagation();
         if (pressed) {
-            var offset = event.clientY - startY.current;
-            move(offset);
+            if (reverse) {
+                var offset = event.clientY - startY.current;
+                move(offset);
+            }
+            else {
+                var offset = event.clientY - startY.current;
+                move(offset);
+            }
         }
     };
     var move = function (offset) {
-        if (offset > 0) {
+        if (!reverse && offset > 0) {
             masterOffset.current = offset;
@@ -95,2 +106,6 @@ animationRef.current = requestAnimationFrame(updatePosition);
         }
+        else if (reverse && offset < 0) {
+            masterOffset.current = offset;
+            animationRef.current = requestAnimationFrame(updatePosition);
+        }
         return false;
@@ -122,3 +137,3 @@ };
         setPressed(false);
-        if (masterOffset.current > threshold) {
+        if (Math.abs(masterOffset.current) > threshold) {
             setShow(false);
@@ -133,9 +148,20 @@ if (onClose)
     };
-    return (createElement(Fragment, null,
-        createElement("div", { onClick: closeOnBgTap ? BgClick : undefined, style: __assign(__assign({ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: "rgba(0, 0, 0, 0.8)", backfaceVisibility: "hidden" }, bgStyle), { transition: bgTransition, opacity: show ? opacity : 0, zIndex: show ? zIndex : -1 }) }),
-        createElement("div", { ref: sheetRef, style: __assign(__assign({ overflowX: "hidden", position: "fixed", bottom: 0, left: 0, width: "100%", backgroundColor: '#fbfbfb', borderTopLeftRadius: 16, borderTopRightRadius: 16, transform: "translate3d(0, 101%, 0)" }, sheetStyle), { zIndex: zIndex + 1, transition: pressed ? "all 0.05s linear" : sheetTransition }), onMouseDown: mouseEnable ? onMouseStart : undefined, onMouseMove: mouseEnable ? onMouseMove : undefined, onMouseUp: mouseEnable ? onSwipeEnd : undefined, onTouchStart: touchEnable ? onSwipeStart : undefined, onTouchMove: touchEnable ? onSwipeMove : undefined, onTouchEnd: touchEnable ? onSwipeEnd : undefined }, children ? children : createElement("div", { style: { height: 150 } }))));
+    return (React.createElement(Fragment, null,
+        React.createElement("div", { onClick: closeOnBgTap ? BgClick : undefined, style: __assign(__assign({ position: "fixed", top: 0, left: 0, right: 0, bottom: 0, background: "rgba(0, 0, 0, 0.8)", backfaceVisibility: "hidden" }, bgStyle), { transition: bgTransition, opacity: show ? opacity : 0, zIndex: show ? zIndex : -1 }) }),
+        React.createElement("div", { ref: sheetRef, style: __assign(__assign(__assign(__assign({ overflowX: "hidden", position: "fixed" }, (reverse
+                ? {
+                    top: 0,
+                    transform: "translate3d(0, -101%, 0)",
+                    borderBottomLeftRadius: 16,
+                    borderBottomRightRadius: 16,
+                }
+                : {
+                    bottom: 0,
+                    transform: "translate3d(0, 101%, 0)",
+                    borderTopLeftRadius: 16,
+                    borderTopRightRadius: 16,
+                })), { left: 0, width: "100%", backgroundColor: "#fbfbfb", borderTopLeftRadius: 16, borderTopRightRadius: 16 }), sheetStyle), { zIndex: zIndex + 1, transition: pressed ? "transform 0.05s linear" : sheetTransition }), onMouseDown: mouseEnable ? onMouseStart : undefined, onMouseMove: mouseEnable ? onMouseMove : undefined, onMouseUp: mouseEnable ? onSwipeEnd : undefined, onTouchStart: touchEnable ? onSwipeStart : undefined, onTouchMove: touchEnable ? onSwipeMove : undefined, onTouchEnd: touchEnable ? onSwipeEnd : undefined }, children ? children : React.createElement("div", { style: { height: 150 } }))));
 });
-var ActionSheet = forwardRef(Comp);
 
 export default ActionSheet;
 //# sourceMappingURL=index.es.js.map

build/index.js

@@ -7,2 +7,24 @@ 'use strict';
 
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () {
+                        return e[k];
+                    }
+                });
+            }
+        });
+    }
+    n['default'] = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
 /*! *****************************************************************************
@@ -34,6 +56,6 @@ Copyright (c) Microsoft Corporation.
 
-var Comp = (function (_a, ref) {
-    var onClose = _a.onClose, children = _a.children, sheetStyle = _a.sheetStyle, bgStyle = _a.bgStyle, _b = _a.mouseEnable, mouseEnable = _b === void 0 ? true : _b, _c = _a.touchEnable, touchEnable = _c === void 0 ? true : _c, _d = _a.threshold, threshold = _d === void 0 ? 50 : _d, _e = _a.opacity, opacity = _e === void 0 ? 1 : _e, _f = _a.zIndex, zIndex = _f === void 0 ? 998 : _f, _g = _a.closeOnBgTap, closeOnBgTap = _g === void 0 ? true : _g, _h = _a.bgTransition, bgTransition = _h === void 0 ? "all 0.5s ease-in-out" : _h, _j = _a.sheetTransition, sheetTransition = _j === void 0 ? "all 0.3s ease-in-out" : _j;
-    var _k = React.useState(false), show = _k[0], setShow = _k[1];
-    var _l = React.useState(false), pressed = _l[0], setPressed = _l[1];
+var ActionSheet = React__namespace.forwardRef(function (_a, ref) {
+    var onClose = _a.onClose, children = _a.children, sheetStyle = _a.sheetStyle, bgStyle = _a.bgStyle, _b = _a.mouseEnable, mouseEnable = _b === void 0 ? true : _b, _c = _a.touchEnable, touchEnable = _c === void 0 ? true : _c, _d = _a.threshold, threshold = _d === void 0 ? 50 : _d, _e = _a.opacity, opacity = _e === void 0 ? 1 : _e, _f = _a.zIndex, zIndex = _f === void 0 ? 998 : _f, _g = _a.closeOnBgTap, closeOnBgTap = _g === void 0 ? true : _g, _h = _a.bgTransition, bgTransition = _h === void 0 ? "opacity 0.5s ease-in-out, z-index 0.5s ease-in-out" : _h, _j = _a.sheetTransition, sheetTransition = _j === void 0 ? "transform 0.3s ease-in-out" : _j, _k = _a.reverse, reverse = _k === void 0 ? false : _k;
+    var _l = React.useState(false), show = _l[0], setShow = _l[1];
+    var _m = React.useState(false), pressed = _m[0], setPressed = _m[1];
     var sheetRef = React.useRef(null);
@@ -49,12 +71,4 @@ var animationRef = React.useRef(0);
             setShow(false);
-        }
+        },
     }); });
-    React.useEffect(function () {
-        if (show) {
-            requestSheetUp();
-        }
-        else {
-            requestSheetDown();
-        }
-    }, [show]);
     var BgClick = function () {
@@ -65,10 +79,12 @@ setShow(false);
     };
-    var requestSheetDown = function () {
+    var requestSheetDown = React__namespace.useCallback(function () {
         if (null !== sheetRef.current) {
-            sheetRef.current.style.transform = "translate3d(0, 101%, 0)";
+            sheetRef.current.style.transform = reverse
+                ? "translate3d(0, -101%, 0)"
+                : "translate3d(0, 101%, 0)";
             return true;
         }
         return false;
-    };
-    var requestSheetUp = function () {
+    }, [reverse]);
+    var requestSheetUp = React__namespace.useCallback(function () {
         if (null !== sheetRef.current) {
@@ -79,4 +95,13 @@ sheetRef.current.style.transform = "translate3d(0, 0%, 0)";
         return false;
-    };
+    }, []);
+    React.useEffect(function () {
+        if (show) {
+            requestSheetUp();
+        }
+        else {
+            requestSheetDown();
+        }
+    }, [requestSheetDown, requestSheetUp, show]);
     var onSwipeMove = function (event) {
+        event.stopPropagation();
         if (pressed) {
@@ -88,9 +113,16 @@ var offset = event.touches[0].clientY - startY.current;
     var onMouseMove = function (event) {
+        event.stopPropagation();
         if (pressed) {
-            var offset = event.clientY - startY.current;
-            move(offset);
+            if (reverse) {
+                var offset = event.clientY - startY.current;
+                move(offset);
+            }
+            else {
+                var offset = event.clientY - startY.current;
+                move(offset);
+            }
         }
     };
     var move = function (offset) {
-        if (offset > 0) {
+        if (!reverse && offset > 0) {
             masterOffset.current = offset;
@@ -100,2 +132,6 @@ animationRef.current = requestAnimationFrame(updatePosition);
         }
+        else if (reverse && offset < 0) {
+            masterOffset.current = offset;
+            animationRef.current = requestAnimationFrame(updatePosition);
+        }
         return false;
@@ -127,3 +163,3 @@ };
         setPressed(false);
-        if (masterOffset.current > threshold) {
+        if (Math.abs(masterOffset.current) > threshold) {
             setShow(false);
@@ -138,9 +174,20 @@ if (onClose)
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { onClick: closeOnBgTap ? BgClick : undefined, style: __assign(__assign({ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: "rgba(0, 0, 0, 0.8)", backfaceVisibility: "hidden" }, bgStyle), { transition: bgTransition, opacity: show ? opacity : 0, zIndex: show ? zIndex : -1 }) }),
-        React.createElement("div", { ref: sheetRef, style: __assign(__assign({ overflowX: "hidden", position: "fixed", bottom: 0, left: 0, width: "100%", backgroundColor: '#fbfbfb', borderTopLeftRadius: 16, borderTopRightRadius: 16, transform: "translate3d(0, 101%, 0)" }, sheetStyle), { zIndex: zIndex + 1, transition: pressed ? "all 0.05s linear" : sheetTransition }), onMouseDown: mouseEnable ? onMouseStart : undefined, onMouseMove: mouseEnable ? onMouseMove : undefined, onMouseUp: mouseEnable ? onSwipeEnd : undefined, onTouchStart: touchEnable ? onSwipeStart : undefined, onTouchMove: touchEnable ? onSwipeMove : undefined, onTouchEnd: touchEnable ? onSwipeEnd : undefined }, children ? children : React.createElement("div", { style: { height: 150 } }))));
+    return (React__namespace.createElement(React.Fragment, null,
+        React__namespace.createElement("div", { onClick: closeOnBgTap ? BgClick : undefined, style: __assign(__assign({ position: "fixed", top: 0, left: 0, right: 0, bottom: 0, background: "rgba(0, 0, 0, 0.8)", backfaceVisibility: "hidden" }, bgStyle), { transition: bgTransition, opacity: show ? opacity : 0, zIndex: show ? zIndex : -1 }) }),
+        React__namespace.createElement("div", { ref: sheetRef, style: __assign(__assign(__assign(__assign({ overflowX: "hidden", position: "fixed" }, (reverse
+                ? {
+                    top: 0,
+                    transform: "translate3d(0, -101%, 0)",
+                    borderBottomLeftRadius: 16,
+                    borderBottomRightRadius: 16,
+                }
+                : {
+                    bottom: 0,
+                    transform: "translate3d(0, 101%, 0)",
+                    borderTopLeftRadius: 16,
+                    borderTopRightRadius: 16,
+                })), { left: 0, width: "100%", backgroundColor: "#fbfbfb", borderTopLeftRadius: 16, borderTopRightRadius: 16 }), sheetStyle), { zIndex: zIndex + 1, transition: pressed ? "transform 0.05s linear" : sheetTransition }), onMouseDown: mouseEnable ? onMouseStart : undefined, onMouseMove: mouseEnable ? onMouseMove : undefined, onMouseUp: mouseEnable ? onSwipeEnd : undefined, onTouchStart: touchEnable ? onSwipeStart : undefined, onTouchMove: touchEnable ? onSwipeMove : undefined, onTouchEnd: touchEnable ? onSwipeEnd : undefined }, children ? children : React__namespace.createElement("div", { style: { height: 150 } }))));
 });
-var ActionSheet = React.forwardRef(Comp);
 
 exports.default = ActionSheet;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "actionsheet-react",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "🌟A lightweight and flexible action sheet component for the web",
@@ -13,6 +13,4 @@ "main": "build/index.js",
   "devDependencies": {
-    "@types/react": "^16.9.35",
-    "@types/react-dom": "^16.9.8",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "@types/react": "^17.0.5",
+    "@types/react-dom": "^17.0.5",
     "react-scripts-ts": "^3.1.0",
@@ -23,4 +21,4 @@ "rollup": "^2.10.5",
     "rollup-plugin-peer-deps-external": "^2.2.2",
-    "rollup-plugin-typescript2": "^0.27.1",
-    "typescript": "^3.9.3"
+    "rollup-plugin-typescript2": "^0.30.0",
+    "typescript": "^4.3.4"
   },
@@ -27,0 +25,0 @@ "peerDependencies": {

README.md

@@ -9,5 +9,6 @@ # ActionSheet-React
 #### What is an action sheet ?
+
 Action Sheet is a component that slides in from bottom and has some list of action for the user. Mostly action sheets are used in native mobile application, but action sheet is a very helpful UI element which can be also be used in websites and PWA.
 
-### 📺 Demo 
+### 📺 Demo
 
@@ -34,3 +35,2 @@ ![demo gif](https://s7.gifyu.com/images/demo_action_sheet.gif)
 
-
 ### 👨‍💻 Usage
@@ -40,6 +40,5 @@
 
-
 ```javascript
-import React, {useRef, Fragment} from 'react'
-import ActionSheet from 'actionsheet-react'
+import React, { useRef, Fragment } from "react";
+import ActionSheet from "actionsheet-react";
 
@@ -51,24 +50,18 @@ const MyComponent = () => {
     ref.current.open();
-  }
+  };
 
   const handleClose = () => {
     ref.current.close();
-  }
-  
-  return(
+  };
+
+  return (
     <Fragment>
-      <button onClick={handleOpen}>
-        Open
-      </button>
-      <button onClick={handleClose}>
-        Close
-      </button>
+      <button onClick={handleOpen}>Open</button>
+      <button onClick={handleClose}>Close</button>
       <ActionSheet ref={ref}>
-        <div style={style.content}>
-         🙂 Hi React Devs!
-        </div>
+        <div style={style.content}>🙂 Hi React Devs!</div>
       </ActionSheet>
     </Fragment>
-  )
-}
+  );
+};
 
@@ -78,8 +71,7 @@ const style = {
     height: 300,
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center'
-  }
-}
-
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+};
 ```
@@ -89,3 +81,2 @@
 
-
 ```typescript
@@ -96,3 +87,3 @@ import ActionSheet, {ActionSheetRef} from 'actionsheet-react';
   const ref = useRef<ActionSheetRef>();
-  
+
   // ...rest same as above code
@@ -104,17 +95,18 @@
 
- ##### all props are optional
+##### all props are optional
 
-| property name | type | more info |
-| --- | --- | --- |
-| onClose | callback function | called when the actionsheet is closed |
-| children | React Children | all the fancy HTML elements that you want to show in the menu |
-| bgStyle | css styles object | these styles are applied to the background black overlay|
-|sheetStyle | css styles object | these styles are applied to the sheet component |
-| mouseEnable | boolean | if true, the sheet can be dragged down using mouse |
-| touchEnable | boolean | if true, the sheet can be swiped down on touch devices |
-| threshold | number | the minimum distance dragged, so that sheet will slide down. Threshold is measured in **px** , default value is 50 |
-| zIndex | number | the default value is **999** |
-| closeOnBgTap | boolean | if true, the sheet is closed when the backgroud overlay is tapped |
-| sheetTransition | string | css transition shorthand, default value `all 0.3s ease-in-out` |
-| bgTransition | string | css transition shorthand, default value `all 0.5s ease-in-out` |
+| property name   | type              | more info                                                                                                          |
+| --------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------ |
+| onClose         | callback function | called when the actionsheet is closed                                                                              |
+| children        | React Children    | all the fancy HTML elements that you want to show in the menu                                                      |
+| bgStyle         | css styles object | these styles are applied to the background black overlay                                                           |
+| sheetStyle      | css styles object | these styles are applied to the sheet component                                                                    |
+| mouseEnable     | boolean           | if true, the sheet can be dragged down using mouse                                                                 |
+| touchEnable     | boolean           | if true, the sheet can be swiped down on touch devices                                                             |
+| threshold       | number            | the minimum distance dragged, so that sheet will slide down. Threshold is measured in **px** , default value is 50 |
+| zIndex          | number            | the default value is **999**                                                                                       |
+| closeOnBgTap    | boolean           | if true, the sheet is closed when the background overlay is tapped                                                 |
+| reverse         | boolean           | open the sheet in reverse direction                                                                                |
+| sheetTransition | string            | css transition shorthand, default value `transform 0.3s ease-in-out`                                               |
+| bgTransition    | string            | css transition shorthand, default value `opacity 0.5s ease-in-out, z-index 0.5s ease-in-out`                       |
 
@@ -126,4 +118,4 @@ ### 👾 Misc
 ```javascript
-    document.body.style.overflow = 'hidden'
-    document.body.style.overflow = 'auto'
+document.body.style.overflow = "hidden";
+document.body.style.overflow = "auto";
 ```
@@ -134,4 +126,4 @@
 ```css
-body{
-    overscroll-behavior: contain;
+body {
+  overscroll-behavior: contain;
 }
@@ -141,2 +133,3 @@ ```
 ### ⛳ Issues/Feature Request/Pull Request
+
 The github repo is always there for you.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

68388

increased by12.42%

Dev dependency count

9

decreased by-18.18%

Lines of code

360

increased by25.87%

Worsened metrics

Number of lines in readme file

125

decreased by-5.3%

No dependency changes