react-side-sheet-pro 0.1.8 → 0.2.0

package/README.md

@@ -42,10 +42,10 @@ yarn add react-side-sheet-pro
 ## ⚡️ Quick Start
 ```typescript jsx
 import React from 'react'
-import { SideSheet, useSideSheet, SideElementProps } from 'react-side-sheet-pro'
+import { SideSheet, SideComponent, useSideSheet } from 'react-side-sheet-pro'
 import 'react-side-sheet-pro/dist/index.css'
 
-const UserDetails: React.FC<SideElementProps & { user: any }> = ({
+const UserDetails: SideComponent<{ user: any }> = ({
     user,
     sideId,
     close,
@@ -68,6 +68,8 @@ const UserDetails: React.FC<SideElementProps & { user: any }> = ({
     </>
 )
 
+UserDetails.defaultWidth = 900
+
 export const App = () => {
     const { open } = useSideSheet()
 
@@ -84,6 +86,7 @@ export const App = () => {
                 />
             ),
             {
+                // you can override the default width set on the component
                 width: 600,
             }
         )
@@ -151,10 +154,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(resolved, stack, idx) {
+  var _resolved;
+  var _getStackItemMeta = getStackItemMeta(stack, idx),
+    next = _getStackItemMeta.next,
+    isTop = _getStackItemMeta.isTop,
+    isPrevClosing = _getStackItemMeta.isPrevClosing,
+    isNextTransitioning = _getStackItemMeta.isNextTransitioning;
+  if (isTop || isPrevClosing || isNextTransitioning || !next) return;
+  var viewportWidth = document.documentElement.clientWidth;
+  var width = resolved[resolved.length - 1].width;
+  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, width);
+  return padding > 0 ? padding : ((_resolved = resolved[idx + 1]) === null || _resolved === void 0 ? void 0 : _resolved.width) / 2;
+}
 var SideSheetContainer = exports.SideSheetContainer = function SideSheetContainer(_ref) {
   var stack = _ref.stack,
     open = _ref.open,
@@ -30,18 +63,42 @@ var SideSheetContainer = exports.SideSheetContainer = function SideSheetContaine
       document.removeEventListener('keydown', onKeyDown);
     };
   }, [stack, close]);
+  var paddingKey = config.side === 'left' ? 'paddingLeft' : 'paddingRight';
+  var resolved = stack.map(function (item) {
+    var _ref2, _item$options$width;
+    var elementProps = {
+      sideId: item.id,
+      options: item.options,
+      close: close,
+      open: open,
+      update: update
+    };
+    var element = item.element(elementProps);
+    var width = (_ref2 = (_item$options$width = item.options.width) !== null && _item$options$width !== void 0 ? _item$options$width : element.type.defaultWidth) !== null && _ref2 !== void 0 ? _ref2 : 400;
+    return {
+      id: item.id,
+      element: element,
+      width: width
+    };
+  });
   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(resolved, stack, idx), "px");
+    var _resolved$idx = resolved[idx],
+      element = _resolved$idx.element,
+      width = _resolved$idx.width;
     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 +108,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)
+    }, element));
   }));
 };
 SideSheetContainer.propTypes = {

package/dist/components/SideSheetProvider.js

@@ -44,9 +44,7 @@ var SideSheetProvider = exports.SideSheetProvider = function SideSheetProvider(_
   (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;

package/dist/constants/defaultOptions.js

@@ -33,7 +33,6 @@ var DEFAULT_OPTIONS = exports.DEFAULT_OPTIONS = {
 };
 var DEFAULT_SHEET_OPTIONS = exports.DEFAULT_SHEET_OPTIONS = {
   id: '',
-  width: 400,
   className: '',
   confirmBeforeClose: false,
   confirmMessage: null,

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/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ReactNode } from "react";
+import { ComponentType, JSXElementConstructor, ReactElement } from "react";
 type Sides = "left" | "right";
 interface SideSheetOptions {
     side: Sides;
@@ -24,19 +24,23 @@ interface SideOptions {
 interface SideElementProps {
     sideId: number | string;
     close: (id: number | string | null, force?: boolean) => Promise<void>;
-    open: (element: SideElement, options?: SideOptions) => number | string;
+    open: (element: SideComponent, options?: SideOptions) => number | string;
     update: (id: number | string, options: SideOptions) => void;
     options: SideOptions;
+    width?: number;
 }
-type SideElement = (props: SideElementProps) => ReactNode;
+type SideComponent<P = {}> =
+    ComponentType<P & SideElementProps> & {
+    defaultWidth?: number;
+};
 interface SideStackItem {
     id: number | string;
-    element: SideElement;
+    element: SideComponent;
     options: Required<SideOptions>;
     state: "opening" | "open" | "closing";
 }
 interface SideSheetContextValue {
-    open: (el: SideElement, opts?: SideOptions) => number | string;
+    open: (el: SideComponent, opts?: SideOptions) => number | string;
     close: (id: number | string | null, force?: boolean) => Promise<void>;
     update: (id: number | string, opts: SideOptions) => void;
     config: SideSheetOptions;
@@ -62,4 +66,4 @@ declare const SideSheet: {
         className?: string | undefined;
     }>;
 };
-export { useSideSheet, Sides, SideSheetOptions, SideOptions, SideElementProps, SideElement, SideStackItem, SideSheetContextValue, SideSheet };
+export { useSideSheet, Sides, SideSheetOptions, SideOptions, SideElementProps, SideComponent, SideStackItem, SideSheetContextValue, SideSheet };

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

package/src/components/SideSheetContainer.tsx

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import classNames from 'classnames';
 import {
   SideElement,
+  SideElementProps,
   SideOptions,
   SideSheetOptions,
   SideStackItem,
@@ -15,6 +16,51 @@ type SideSheetContainerProps = {
   config: Required<SideSheetOptions>;
 };
 
+type ResolvedItem = {
+  id: number | string;
+  element: React.ReactElement;
+  width: number;
+};
+
+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(
+  resolved: ResolvedItem[],
+  stack: SideStackItem[],
+  idx: number
+): number | undefined {
+  const { next, isTop, isPrevClosing, isNextTransitioning } = getStackItemMeta(
+    stack,
+    idx
+  );
+
+  if (isTop || isPrevClosing || isNextTransitioning || !next) return;
+
+  const viewportWidth = document.documentElement.clientWidth;
+  const { width } = resolved[resolved.length - 1];
+
+  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, width);
+
+  return padding > 0 ? padding : resolved[idx + 1]?.width / 2;
+}
+
 export const SideSheetContainer: React.FC<SideSheetContainerProps> = ({
   stack,
   open,
@@ -38,49 +84,77 @@ export const SideSheetContainer: React.FC<SideSheetContainerProps> = ({
     };
   }, [stack, close]);
 
+  const paddingKey = config.side === 'left' ? 'paddingLeft' : 'paddingRight';
+
+  const resolved: ResolvedItem[] = stack.map(item => {
+    const elementProps = {
+      sideId: item.id,
+      options: item.options,
+      close,
+      open,
+      update,
+    } as SideElementProps;
+
+    const element = item.element(elementProps);
+    const width = item.options.width ?? element.type.defaultWidth ?? 400;
+
+    return {
+      id: item.id,
+      element,
+      width,
+    };
+  });
+
   return (
     <>
       {stack.map((item, idx) => {
-        const isTop = idx === stack.length - 1;
-        const isPrevClosing = stack[idx - 1]?.state === 'closing';
-        const { width, closeOnOverlayClick, className } = item.options;
+        const {
+          next,
+          isTop,
+          isPrevClosing,
+          isNextTransitioning,
+        } = getStackItemMeta(stack, idx);
 
-        if (config.mountStrategy === 'top-only' && !isTop && !isPrevClosing)
-          return null;
+        const { closeOnOverlayClick, className } = item.options;
+
+        const isEffectiveTop = isTop || isPrevClosing;
+        const isVisible = !(
+          config.mountStrategy === 'top-only' && !isEffectiveTop
+        );
+        const paddingValue =
+          isEffectiveTop || isNextTransitioning || !next
+            ? undefined
+            : `${computePadding(resolved, stack, idx)}px`;
+        const { element, width } = resolved[idx];
 
         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,
-              })}
+              {element}
             </div>
           </React.Fragment>
         );

package/src/constants/defaultOptions.ts

@@ -11,9 +11,10 @@ export const DEFAULT_OPTIONS: Required<SideSheetOptions> = {
       : Promise.resolve(true),
 };
 
-export const DEFAULT_SHEET_OPTIONS: Required<SideOptions> = {
+export const DEFAULT_SHEET_OPTIONS: Required<Omit<SideOptions, 'width'>> & {
+  width?: number;
+} = {
   id: '',
-  width: 400,
   className: '',
   confirmBeforeClose: false,
   confirmMessage: null,

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;

package/src/types/index.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ComponentType, ReactElement } from 'react';
 
 export type Sides = 'left' | 'right';
 
@@ -27,17 +27,23 @@ export interface SideOptions {
 export interface SideElementProps {
   sideId: number | string;
   close: (id: number | string | null) => Promise<void>;
-  open: (element: SideElement, options?: SideOptions) => number | string;
+  open: (element: SideComponent, options?: SideOptions) => number | string;
   update: (id: number | string, options: SideOptions) => void;
   options: SideOptions;
 }
 
-export type SideElement = (props: SideElementProps) => ReactNode;
+export type SideComponent<P = {}> = ComponentType<P & SideElementProps> & {
+  defaultWidth?: number;
+};
+
+export type SideElement = (
+  props: SideElementProps
+) => ReactElement<any, SideComponent>;
 
 export interface SideStackItem {
   id: number | string;
   element: SideElement;
-  options: Required<SideOptions>;
+  options: Required<Omit<SideOptions, 'width'>> & { width?: number };
   state: 'opening' | 'open' | 'closing';
 }