react-side-sheet-pro 0.1.6 → 0.1.8

package/dist/components/SideSheetProvider.js

@@ -39,19 +39,31 @@ 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) {
+      console.warn([document.body.style.overflow, stack.length, overflowRef.current]);
+      if (!stack.length) {
+        console.warn(overflowRef.current);
+        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 = ++idRef.current;
+    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: {
@@ -134,30 +146,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/index.d.ts

@@ -9,6 +9,7 @@ interface SideSheetOptions {
     confirmCallback: (message: string) => Promise<boolean>;
 }
 interface SideOptions {
+    id?: number | string;
     width?: number;
     className?: string;
     confirmBeforeClose?: boolean;
@@ -17,27 +18,27 @@ interface SideOptions {
     closeOnOverlayClick?: boolean;
     closeOnEsc?: boolean;
     animationDuration?: number;
-    onOpen?: (id: number) => void;
-    onClose?: (id: number) => void;
+    onOpen?: (id: number | string) => void;
+    onClose?: (id: number | string) => void;
 }
 interface SideElementProps {
-    sideId: number;
-    close: (id: number | null, force?: boolean) => Promise<void>;
-    open: (element: SideElement, options?: SideOptions) => number;
-    update: (id: number, options: SideOptions) => void;
+    sideId: number | string;
+    close: (id: number | string | null, force?: boolean) => Promise<void>;
+    open: (element: SideElement, options?: SideOptions) => number | string;
+    update: (id: number | string, options: SideOptions) => void;
     options: SideOptions;
 }
 type SideElement = (props: SideElementProps) => ReactNode;
 interface SideStackItem {
-    id: number;
+    id: number | string;
     element: SideElement;
     options: Required<SideOptions>;
     state: "opening" | "open" | "closing";
 }
 interface SideSheetContextValue {
-    open: (el: SideElement, opts?: SideOptions) => number;
-    close: (id: number | null, force?: boolean) => Promise<void>;
-    update: (id: number, opts: SideOptions) => void;
+    open: (el: SideElement, opts?: SideOptions) => number | string;
+    close: (id: number | string | null, force?: boolean) => Promise<void>;
+    update: (id: number | string, opts: SideOptions) => void;
     config: SideSheetOptions;
 }
 declare const useSideSheet: () => SideSheetContextValue;

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.6",
+  "version": "0.1.8",
   "license": "MIT",
   "keywords": [
     "react",

package/src/components/SideSheetContainer.tsx

@@ -9,9 +9,9 @@ import {
 
 type SideSheetContainerProps = {
   stack: SideStackItem[];
-  open: (el: SideElement, opts?: SideOptions) => number;
-  close: (id: number | null) => Promise<void>;
-  update: (id: number, opts: SideOptions) => void;
+  open: (el: SideElement, opts?: SideOptions) => number | string;
+  close: (id: number | string | null) => Promise<void>;
+  update: (id: number | string, opts: SideOptions) => void;
   config: Required<SideSheetOptions>;
 };
 

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 = ++idRef.current;
+    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 | 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, 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/contexts/SideSheetReducer.ts

@@ -2,10 +2,10 @@ import { SideOptions, SideStackItem } from '../types';
 
 type Action =
   | { type: 'OPEN'; payload: SideStackItem }
-  | { type: 'SET_OPEN'; id: number }
-  | { type: 'CLOSE'; id: number | null }
-  | { type: 'REMOVE'; id: number }
-  | { type: 'UPDATE'; id: number; options: Partial<SideOptions> };
+  | { type: 'SET_OPEN'; id: number | string }
+  | { type: 'CLOSE'; id: number | string | null }
+  | { type: 'REMOVE'; id: number | string }
+  | { type: 'UPDATE'; id: number | string; options: Partial<SideOptions> };
 
 export const SideSheetReducer = (
   state: SideStackItem[],

package/src/types/index.ts

@@ -11,6 +11,7 @@ export interface SideSheetOptions {
 }
 
 export interface SideOptions {
+  id?: string | number;
   width?: number;
   className?: string;
   confirmBeforeClose?: boolean;
@@ -19,30 +20,30 @@ export interface SideOptions {
   closeOnOverlayClick?: boolean;
   closeOnEsc?: boolean;
   animationDuration?: number;
-  onOpen?: (id: number) => void;
-  onClose?: (id: number) => void;
+  onOpen?: (id: number | string) => void;
+  onClose?: (id: number | string) => void;
 }
 
 export interface SideElementProps {
-  sideId: number;
-  close: (id: number | null) => Promise<void>;
-  open: (element: SideElement, options?: SideOptions) => number;
-  update: (id: number, options: SideOptions) => void;
+  sideId: number | string;
+  close: (id: number | string | null) => Promise<void>;
+  open: (element: SideElement, options?: SideOptions) => number | string;
+  update: (id: number | string, options: SideOptions) => void;
   options: SideOptions;
 }
 
 export type SideElement = (props: SideElementProps) => ReactNode;
 
 export interface SideStackItem {
-  id: number;
+  id: number | string;
   element: SideElement;
   options: Required<SideOptions>;
   state: 'opening' | 'open' | 'closing';
 }
 
 export interface SideSheetContextValue {
-  open: (el: SideElement, opts?: SideOptions) => number;
-  close: (id: number | null, force: boolean) => Promise<void>;
-  update: (id: number, opts: SideOptions) => void;
+  open: (el: SideElement, opts?: SideOptions) => number | string;
+  close: (id: number | string | null, force: boolean) => Promise<void>;
+  update: (id: number | string, opts: SideOptions) => void;
   config: SideSheetOptions;
 }