react-side-sheet-pro 0.1.7 → 0.1.9

package/README.md

@@ -151,10 +151,10 @@ Sheet footer component that can be used to display actions or additional informa
 cd playground/ && npm start
 ```
 
-## 🌟 Contributing
+## 🤝 Contributing
 
 We welcome contributions! If you'd like to help improve this project, feel free to open an issue or submit a pull request.
 
-## License
+## 📜 License
 
 This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.

package/dist/components/SideSheetContainer.js

@@ -1,6 +1,5 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -10,6 +9,40 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function getStackItemMeta(stack, idx) {
+  var prev = stack[idx - 1];
+  var next = stack[idx + 1];
+  return {
+    prev: prev,
+    next: next,
+    isTop: idx === stack.length - 1,
+    isPrevClosing: (prev === null || prev === void 0 ? void 0 : prev.state) === 'closing',
+    isNextTransitioning: (next === null || next === void 0 ? void 0 : next.state) === 'closing' || (next === null || next === void 0 ? void 0 : next.state) === 'opening'
+  };
+}
+function computePadding(stack, idx) {
+  var _stack$options$width, _stack;
+  var _getStackItemMeta = getStackItemMeta(stack, idx),
+    next = _getStackItemMeta.next,
+    isTop = _getStackItemMeta.isTop,
+    isPrevClosing = _getStackItemMeta.isPrevClosing,
+    isNextTransitioning = _getStackItemMeta.isNextTransitioning;
+  if (isTop || isPrevClosing || isNextTransitioning || !next) return undefined;
+  var viewportWidth = document.documentElement.clientWidth;
+  var maxWidth = (_stack$options$width = (_stack = stack[stack.length - 1]) === null || _stack === void 0 ? void 0 : _stack.options.width) !== null && _stack$options$width !== void 0 ? _stack$options$width : 0;
+  var padding = 0;
+  if (viewportWidth >= 1160) {
+    padding = Math.floor((viewportWidth - 960) / 2);
+  } else if (viewportWidth >= 768) {
+    padding = Math.floor((viewportWidth - 768) / 2);
+  }
+  padding = Math.min(padding, maxWidth);
+  return padding > 0 ? padding : next.options.width / 2;
+}
 var SideSheetContainer = exports.SideSheetContainer = function SideSheetContainer(_ref) {
   var stack = _ref.stack,
     open = _ref.open,
@@ -30,18 +63,30 @@ var SideSheetContainer = exports.SideSheetContainer = function SideSheetContaine
       document.removeEventListener('keydown', onKeyDown);
     };
   }, [stack, close]);
+  var paddingKey = config.side === 'left' ? 'paddingLeft' : 'paddingRight';
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, stack.map(function (item, idx) {
-    var _stack;
-    var isTop = idx === stack.length - 1;
-    var isPrevClosing = ((_stack = stack[idx - 1]) === null || _stack === void 0 ? void 0 : _stack.state) === 'closing';
+    var _getStackItemMeta2 = getStackItemMeta(stack, idx),
+      next = _getStackItemMeta2.next,
+      isTop = _getStackItemMeta2.isTop,
+      isPrevClosing = _getStackItemMeta2.isPrevClosing,
+      isNextTransitioning = _getStackItemMeta2.isNextTransitioning;
     var _item$options = item.options,
       width = _item$options.width,
       closeOnOverlayClick = _item$options.closeOnOverlayClick,
       className = _item$options.className;
-    if (config.mountStrategy === 'top-only' && !isTop && !isPrevClosing) return null;
+    var isEffectiveTop = isTop || isPrevClosing;
+    var isVisible = !(config.mountStrategy === 'top-only' && !isEffectiveTop);
+    var paddingValue = isEffectiveTop || isNextTransitioning || !next ? undefined : "".concat(computePadding(stack, idx), "px");
+    var elementProps = {
+      sideId: item.id,
+      options: item.options,
+      close: close,
+      open: open,
+      update: update
+    };
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
       key: item.id
-    }, /*#__PURE__*/_react["default"].createElement("div", {
+    }, isVisible && /*#__PURE__*/_react["default"].createElement("div", {
       className: "sidesheet-overlay",
       onClick: function onClick() {
         if (closeOnOverlayClick && item.state === 'open') {
@@ -51,20 +96,11 @@ var SideSheetContainer = exports.SideSheetContainer = function SideSheetContaine
     }), /*#__PURE__*/_react["default"].createElement("div", {
       role: "dialog",
       "aria-modal": "true",
-      className: (0, _classnames["default"])('sidesheet', "sidesheet-animation-".concat(item.state), {
-        'sidesheet-left': config.side === 'left',
-        'sidesheet-right': config.side === 'right'
-      }, className),
-      style: {
-        width: "".concat(isTop || isPrevClosing ? "".concat(width, "px") : '100%')
-      }
-    }, item.element({
-      sideId: item.id,
-      options: item.options,
-      close: close,
-      open: open,
-      update: update
-    })));
+      className: (0, _classnames["default"])('sidesheet', "sidesheet-animation-".concat(item.state), "sidesheet-".concat(config.side), !isVisible && 'sidesheet-invisible', className),
+      style: _defineProperty({
+        width: isEffectiveTop ? "".concat(width, "px") : '100%'
+      }, paddingKey, paddingValue)
+    }, item.element(elementProps)));
   }));
 };
 SideSheetContainer.propTypes = {

package/dist/components/SideSheetProvider.js

@@ -39,20 +39,29 @@ var SideSheetProvider = exports.SideSheetProvider = function SideSheetProvider(_
     stack = _useReducer2[0],
     dispatch = _useReducer2[1];
   var stackRef = (0, _react.useRef)(stack);
-  var overflowRef = (0, _react.useRef)('');
+  var overflowRef = (0, _react.useRef)(null);
   var idRef = (0, _react.useRef)(0);
   (0, _react.useEffect)(function () {
     stackRef.current = stack;
+    if (!config.enableOverflow) {
+      if (!stack.length) {
+        if (overflowRef.current !== null) {
+          document.body.style.overflow = overflowRef.current;
+          overflowRef.current = null;
+        }
+      } else if (stack.length === 1) {
+        if (overflowRef.current === null) {
+          overflowRef.current = document.body.style.overflow;
+        }
+        document.body.style.overflow = 'hidden';
+      }
+    }
   }, [stack]);
   var open = (0, _react.useCallback)(function (element) {
     var _opts$id;
     var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     var id = (_opts$id = opts.id) !== null && _opts$id !== void 0 ? _opts$id : ++idRef.current;
     var options = _objectSpread(_objectSpread({}, _defaultOptions.DEFAULT_SHEET_OPTIONS), opts);
-    if (!config.enableOverflow && stackRef.current.length === 0) {
-      overflowRef.current = document.body.style.overflow;
-      document.body.style.overflow = 'hidden';
-    }
     dispatch({
       type: 'OPEN',
       payload: {
@@ -135,30 +144,30 @@ var SideSheetProvider = exports.SideSheetProvider = function SideSheetProvider(_
             _iterator.f();
             return _context.finish(22);
           case 25:
-            if (!config.enableOverflow && stackRef.current.length <= itemsToClose.length) {
-              document.body.style.overflow = overflowRef.current;
-            }
             duration = (_itemsToClose = itemsToClose[itemsToClose.length - 1]) === null || _itemsToClose === void 0 ? void 0 : _itemsToClose.options.animationDuration;
             dispatch({
               type: 'CLOSE',
               id: id
             });
-            setTimeout(function () {
-              if (id === null) {
-                itemsToClose.forEach(function (item) {
-                  return dispatch({
+            return _context.abrupt("return", new Promise(function (resolve) {
+              setTimeout(function () {
+                if (id === null) {
+                  itemsToClose.forEach(function (item) {
+                    return dispatch({
+                      type: 'REMOVE',
+                      id: item.id
+                    });
+                  });
+                } else {
+                  dispatch({
                     type: 'REMOVE',
-                    id: item.id
+                    id: id
                   });
-                });
-              } else {
-                dispatch({
-                  type: 'REMOVE',
-                  id: id
-                });
-              }
-            }, duration);
-          case 29:
+                }
+                resolve();
+              }, duration);
+            }));
+          case 28:
           case "end":
             return _context.stop();
         }

package/dist/constants/defaultOptions.js

@@ -32,6 +32,7 @@ var DEFAULT_OPTIONS = exports.DEFAULT_OPTIONS = {
   }()
 };
 var DEFAULT_SHEET_OPTIONS = exports.DEFAULT_SHEET_OPTIONS = {
+  id: '',
   width: 400,
   className: '',
   confirmBeforeClose: false,

package/dist/index.css

@@ -93,13 +93,18 @@
   width: 100%;
   box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.2), 0 0 24px 2px rgba(0, 0, 0, 0.14),
     0 0 30px 5px rgba(0, 0, 0, 0.12);
-  transition: transform 0.3s ease, width 0.3s ease;
+  transition: transform 0.3s ease, width 0.3s ease, padding-right 0.3s ease,
+    padding-left 0.3s ease;
 }
 
 .sheet-white {
   background: #fff;
 }
 
+.sidesheet-invisible {
+  display: none;
+}
+
 .sidesheet-header .sidesheet-header-btn {
   background: transparent;
   border: none;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-side-sheet-pro",
   "description": "A flexible React SideSheet component for displaying contextual information.",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "license": "MIT",
   "keywords": [
     "react",

package/src/components/SideSheetContainer.tsx

@@ -15,6 +15,44 @@ type SideSheetContainerProps = {
   config: Required<SideSheetOptions>;
 };
 
+function getStackItemMeta(stack: SideStackItem[], idx: number) {
+  const prev = stack[idx - 1];
+  const next = stack[idx + 1];
+  return {
+    prev,
+    next,
+    isTop: idx === stack.length - 1,
+    isPrevClosing: prev?.state === 'closing',
+    isNextTransitioning: next?.state === 'closing' || next?.state === 'opening',
+  };
+}
+
+function computePadding(
+  stack: SideStackItem[],
+  idx: number
+): number | undefined {
+  const { next, isTop, isPrevClosing, isNextTransitioning } = getStackItemMeta(
+    stack,
+    idx
+  );
+
+  if (isTop || isPrevClosing || isNextTransitioning || !next) return undefined;
+
+  const viewportWidth = document.documentElement.clientWidth;
+  const maxWidth = stack[stack.length - 1]?.options.width ?? 0;
+
+  let padding = 0;
+  if (viewportWidth >= 1160) {
+    padding = Math.floor((viewportWidth - 960) / 2);
+  } else if (viewportWidth >= 768) {
+    padding = Math.floor((viewportWidth - 768) / 2);
+  }
+
+  padding = Math.min(padding, maxWidth);
+
+  return padding > 0 ? padding : next.options.width / 2;
+}
+
 export const SideSheetContainer: React.FC<SideSheetContainerProps> = ({
   stack,
   open,
@@ -38,49 +76,64 @@ export const SideSheetContainer: React.FC<SideSheetContainerProps> = ({
     };
   }, [stack, close]);
 
+  const paddingKey = config.side === 'left' ? 'paddingLeft' : 'paddingRight';
+
   return (
     <>
       {stack.map((item, idx) => {
-        const isTop = idx === stack.length - 1;
-        const isPrevClosing = stack[idx - 1]?.state === 'closing';
+        const {
+          next,
+          isTop,
+          isPrevClosing,
+          isNextTransitioning,
+        } = getStackItemMeta(stack, idx);
         const { width, closeOnOverlayClick, className } = item.options;
 
-        if (config.mountStrategy === 'top-only' && !isTop && !isPrevClosing)
-          return null;
+        const isEffectiveTop = isTop || isPrevClosing;
+        const isVisible = !(
+          config.mountStrategy === 'top-only' && !isEffectiveTop
+        );
+        const paddingValue =
+          isEffectiveTop || isNextTransitioning || !next
+            ? undefined
+            : `${computePadding(stack, idx)}px`;
+
+        const elementProps = {
+          sideId: item.id,
+          options: item.options,
+          close,
+          open,
+          update,
+        };
 
         return (
           <React.Fragment key={item.id}>
-            <div
-              className="sidesheet-overlay"
-              onClick={() => {
-                if (closeOnOverlayClick && item.state === 'open') {
-                  close(item.id);
-                }
-              }}
-            />
+            {isVisible && (
+              <div
+                className="sidesheet-overlay"
+                onClick={() => {
+                  if (closeOnOverlayClick && item.state === 'open') {
+                    close(item.id);
+                  }
+                }}
+              />
+            )}
             <div
               role="dialog"
               aria-modal="true"
               className={classNames(
                 'sidesheet',
                 `sidesheet-animation-${item.state}`,
-                {
-                  'sidesheet-left': config.side === 'left',
-                  'sidesheet-right': config.side === 'right',
-                },
+                `sidesheet-${config.side}`,
+                !isVisible && 'sidesheet-invisible',
                 className
               )}
               style={{
-                width: `${isTop || isPrevClosing ? `${width}px` : '100%'}`,
+                width: isEffectiveTop ? `${width}px` : '100%',
+                [paddingKey]: paddingValue,
               }}
             >
-              {item.element({
-                sideId: item.id,
-                options: item.options,
-                close,
-                open,
-                update,
-              })}
+              {item.element(elementProps)}
             </div>
           </React.Fragment>
         );

package/src/components/SideSheetProvider.tsx

@@ -31,20 +31,30 @@ export const SideSheetProvider: React.FC<{
 }> = ({ children, configuration }) => {
   const [stack, dispatch] = useReducer(SideSheetReducer, []);
   const stackRef = useRef<SideStackItem[]>(stack);
-  const overflowRef = useRef('');
+  const overflowRef = useRef<string | null>(null);
   const idRef = useRef(0);
 
   useEffect(() => {
     stackRef.current = stack;
+
+    if (!config.enableOverflow) {
+      if (!stack.length) {
+        if (overflowRef.current !== null) {
+          document.body.style.overflow = overflowRef.current;
+          overflowRef.current = null;
+        }
+      } else if (stack.length === 1) {
+        if (overflowRef.current === null) {
+          overflowRef.current = document.body.style.overflow;
+        }
+        document.body.style.overflow = 'hidden';
+      }
+    }
   }, [stack]);
 
   const open = useCallback((element: SideElement, opts: SideOptions = {}) => {
     const id = opts.id ?? ++idRef.current;
     const options = { ...DEFAULT_SHEET_OPTIONS, ...opts };
-    if (!config.enableOverflow && stackRef.current.length === 0) {
-      overflowRef.current = document.body.style.overflow;
-      document.body.style.overflow = 'hidden';
-    }
     dispatch({
       type: 'OPEN',
       payload: { id, element, options, state: 'opening' },
@@ -56,46 +66,50 @@ export const SideSheetProvider: React.FC<{
     return id;
   }, []);
 
-  const close = useCallback(async (id: number | string | null, force = false) => {
-    const itemsToClose =
-      id === null
-        ? [...stackRef.current]
-        : stackRef.current.filter(i => i.id === id);
+  const close = useCallback(
+    async (id: number | string | null, force = false) => {
+      const itemsToClose =
+        id === null
+          ? [...stackRef.current]
+          : stackRef.current.filter(i => i.id === id);
 
-    for (const item of itemsToClose) {
-      if (! force && item.options.confirmBeforeClose) {
-        const confirmCallback =
-          item.options.confirmCallback ?? config.confirmCallback;
-        const confirmed = await confirmCallback(
-          item.options.confirmMessage ?? config.confirmMessage
-        );
-        if (!confirmed) return;
+      for (const item of itemsToClose) {
+        if (!force && item.options.confirmBeforeClose) {
+          const confirmCallback =
+            item.options.confirmCallback ?? config.confirmCallback;
+          const confirmed = await confirmCallback(
+            item.options.confirmMessage ?? config.confirmMessage
+          );
+          if (!confirmed) return;
+        }
+        item.options.onClose?.(item.id);
       }
-      item.options.onClose?.(item.id);
-    }
-
-    if (
-        !config.enableOverflow &&
-        stackRef.current.length <= itemsToClose.length
-    ) {
-      document.body.style.overflow = overflowRef.current;
-    }
 
-    const duration =
-      itemsToClose[itemsToClose.length - 1]?.options.animationDuration;
-    dispatch({ type: 'CLOSE', id });
-    setTimeout(() => {
-      if (id === null) {
-        itemsToClose.forEach(item => dispatch({ type: 'REMOVE', id: item.id }));
-      } else {
-        dispatch({ type: 'REMOVE', id: id! });
-      }
-    }, duration);
-  }, []);
+      const duration =
+        itemsToClose[itemsToClose.length - 1]?.options.animationDuration;
+      dispatch({ type: 'CLOSE', id });
+      return new Promise<void>(resolve => {
+        setTimeout(() => {
+          if (id === null) {
+            itemsToClose.forEach(item =>
+              dispatch({ type: 'REMOVE', id: item.id })
+            );
+          } else {
+            dispatch({ type: 'REMOVE', id: id! });
+          }
+          resolve();
+        }, duration);
+      });
+    },
+    []
+  );
 
-  const update = useCallback((id: number | string, options: Partial<SideOptions>) => {
-    dispatch({ type: 'UPDATE', id, options });
-  }, []);
+  const update = useCallback(
+    (id: number | string, options: Partial<SideOptions>) => {
+      dispatch({ type: 'UPDATE', id, options });
+    },
+    []
+  );
   const config = { ...DEFAULT_OPTIONS, ...configuration } as Required<
     SideSheetOptions
   >;

package/src/constants/defaultOptions.ts

@@ -12,6 +12,7 @@ export const DEFAULT_OPTIONS: Required<SideSheetOptions> = {
 };
 
 export const DEFAULT_SHEET_OPTIONS: Required<SideOptions> = {
+  id: '',
   width: 400,
   className: '',
   confirmBeforeClose: false,

package/src/index.css

@@ -93,13 +93,18 @@
   width: 100%;
   box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.2), 0 0 24px 2px rgba(0, 0, 0, 0.14),
     0 0 30px 5px rgba(0, 0, 0, 0.12);
-  transition: transform 0.3s ease, width 0.3s ease;
+  transition: transform 0.3s ease, width 0.3s ease, padding-right 0.3s ease,
+    padding-left 0.3s ease;
 }
 
 .sheet-white {
   background: #fff;
 }
 
+.sidesheet-invisible {
+  display: none;
+}
+
 .sidesheet-header .sidesheet-header-btn {
   background: transparent;
   border: none;