Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
actionsheet-react
Advanced tools
actionsheet-react - npm Package Compare versions
Comparing version 1.0.8 to 1.0.9
@@ -14,2 +14,4 @@ import * as React from 'react'; | ||
| closeOnBgTap?: boolean; | ||
| bgTransition?: string; | ||
| sheetTransition?: string; | ||
| } | ||
@@ -16,0 +18,0 @@ export interface ActionSheetRef { |
@@ -30,5 +30,5 @@ import { forwardRef, useState, useRef, useImperativeHandle, useEffect, createElement, Fragment } from 'react'; | ||
| 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; | ||
| var _h = useState(false), show = _h[0], setShow = _h[1]; | ||
| var _j = useState(false), pressed = _j[0], setPressed = _j[1]; | ||
| 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 sheetRef = useRef(null); | ||
@@ -128,4 +128,4 @@ var animationRef = useRef(0); | ||
| 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)", transition: "all 0.5s ease", backfaceVisibility: "hidden" }, bgStyle), { 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" : "all 0.3s ease-in-out" }), 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: 100 } })))); | ||
| 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 } })))); | ||
| }); | ||
@@ -132,0 +132,0 @@ var ActionSheet = forwardRef(Comp); |
@@ -34,5 +34,5 @@ 'use strict'; | ||
| 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; | ||
| var _h = React.useState(false), show = _h[0], setShow = _h[1]; | ||
| var _j = React.useState(false), pressed = _j[0], setPressed = _j[1]; | ||
| 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 sheetRef = React.useRef(null); | ||
@@ -132,4 +132,4 @@ var animationRef = React.useRef(0); | ||
| 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)", transition: "all 0.5s ease", backfaceVisibility: "hidden" }, bgStyle), { 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" : "all 0.3s ease-in-out" }), 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: 100 } })))); | ||
| 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 } })))); | ||
| }); | ||
@@ -136,0 +136,0 @@ var ActionSheet = React.forwardRef(Comp); |
| { | ||
| "name": "actionsheet-react", | ||
| "version": "1.0.8", | ||
| "description": "🌟An awesome react actionsheet component for the web", | ||
| "version": "1.0.9", | ||
| "description": "🌟A lightweight and flexible action sheet component for the web", | ||
| "main": "build/index.js", | ||
@@ -34,8 +34,6 @@ "module": "build/index.es.js", | ||
| "keywords": [ | ||
| "react", | ||
| "react panel", | ||
| "actionsheet", | ||
| "web", | ||
| "action", | ||
| "bottom", | ||
| "sheet" | ||
| "bottom sheet", | ||
| "slide up panel" | ||
| ], | ||
@@ -42,0 +40,0 @@ "author": "mohit23x", |
| # ActionSheet-React | ||
| [](https://bundlephobia.com/result?p=actionsheet-react) | ||
| [](https://bundlephobia.com/result?p=actionsheet-react) | ||
| [](https://www.npmjs.com/package/actionsheet-react) | ||
@@ -13,5 +13,8 @@ An action sheet component for react. | ||
| [code-sandbox link](https://codesandbox.io/s/actionsheet-react-2s5zf) | ||
|  | ||
| [code-sandbox simple example](https://codesandbox.io/s/actionsheet-react-2s5zf) | ||
| [code-sandbox complex example](https://codesandbox.io/s/actionsheet-react-example-1-0nok0) | ||
| ### 📦 Installation | ||
@@ -107,8 +110,9 @@ | ||
| | zIndex | number | the default value is **999** | | ||
| | closeOnBgTap | Boolean | if true, the sheet is closed when the backgroud overlay is tapped | | ||
| | 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` | | ||
| ### 👾 Misc | ||
| 1. The logic to stop the backgroud from scrolling is not implemented in this package just to keep it simple. To avoid the background from scrolling you can toggle the overflow property of the body tag, you can also use some other way of your choice | ||
| 1. The logic to stop the backgroud from scrolling is not implemented in this package just to keep it simple. To avoid the background from scrolling you can toggle the overflow property of the body tag, or you can also use some other way of your choice | ||
@@ -120,3 +124,3 @@ ```javascript | ||
| 2. Mobile browsers generally have pull-to-refresh and when out bottom sheet is open and user drags the sheet down but eventually the browser detects the swipe down gesture and triggers its pull-to-refresh. To control this behavior in Chrome i did this | ||
| 2. Mobile browsers generally have pull-to-refresh and when action sheet is open and when user drags the sheet down the pull-to-refresh is triggered. To control this behavior either you can disable swipe in action sheet `touchEnable={false}` or you can disable pull-to-refresh. | ||
@@ -123,0 +127,0 @@ ```css |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by2.35%
60835
- Lines of code
- increased by0.7%
286
- Number of lines in readme file
- increased by3.13%
132
No dependency changes