react-side-sheet-pro 0.1.9 → 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,
             }
         )

package/dist/components/SideSheetContainer.js

@@ -24,24 +24,24 @@ function getStackItemMeta(stack, idx) {
     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;
+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 undefined;
+  if (isTop || isPrevClosing || isNextTransitioning || !next) return;
   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 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, maxWidth);
-  return padding > 0 ? padding : next.options.width / 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,
@@ -64,6 +64,23 @@ var SideSheetContainer = exports.SideSheetContainer = function SideSheetContaine
     };
   }, [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 _getStackItemMeta2 = getStackItemMeta(stack, idx),
       next = _getStackItemMeta2.next,
@@ -71,19 +88,14 @@ var SideSheetContainer = exports.SideSheetContainer = function SideSheetContaine
       isPrevClosing = _getStackItemMeta2.isPrevClosing,
       isNextTransitioning = _getStackItemMeta2.isNextTransitioning;
     var _item$options = item.options,
-      width = _item$options.width,
       closeOnOverlayClick = _item$options.closeOnOverlayClick,
       className = _item$options.className;
     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
-    };
+    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
     }, isVisible && /*#__PURE__*/_react["default"].createElement("div", {
@@ -100,7 +112,7 @@ var SideSheetContainer = exports.SideSheetContainer = function SideSheetContaine
       style: _defineProperty({
         width: isEffectiveTop ? "".concat(width, "px") : '100%'
       }, paddingKey, paddingValue)
-    }, item.element(elementProps)));
+    }, element));
   }));
 };
 SideSheetContainer.propTypes = {

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/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.9",
+  "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,12 @@ 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];
@@ -28,6 +35,7 @@ function getStackItemMeta(stack: SideStackItem[], idx: number) {
 }
 
 function computePadding(
+  resolved: ResolvedItem[],
   stack: SideStackItem[],
   idx: number
 ): number | undefined {
@@ -36,10 +44,10 @@ function computePadding(
     idx
   );
 
-  if (isTop || isPrevClosing || isNextTransitioning || !next) return undefined;
+  if (isTop || isPrevClosing || isNextTransitioning || !next) return;
 
   const viewportWidth = document.documentElement.clientWidth;
-  const maxWidth = stack[stack.length - 1]?.options.width ?? 0;
+  const { width } = resolved[resolved.length - 1];
 
   let padding = 0;
   if (viewportWidth >= 1160) {
@@ -48,9 +56,9 @@ function computePadding(
     padding = Math.floor((viewportWidth - 768) / 2);
   }
 
-  padding = Math.min(padding, maxWidth);
+  padding = Math.min(padding, width);
 
-  return padding > 0 ? padding : next.options.width / 2;
+  return padding > 0 ? padding : resolved[idx + 1]?.width / 2;
 }
 
 export const SideSheetContainer: React.FC<SideSheetContainerProps> = ({
@@ -78,6 +86,25 @@ export const SideSheetContainer: React.FC<SideSheetContainerProps> = ({
 
   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) => {
@@ -87,7 +114,8 @@ export const SideSheetContainer: React.FC<SideSheetContainerProps> = ({
           isPrevClosing,
           isNextTransitioning,
         } = getStackItemMeta(stack, idx);
-        const { width, closeOnOverlayClick, className } = item.options;
+
+        const { closeOnOverlayClick, className } = item.options;
 
         const isEffectiveTop = isTop || isPrevClosing;
         const isVisible = !(
@@ -96,15 +124,8 @@ export const SideSheetContainer: React.FC<SideSheetContainerProps> = ({
         const paddingValue =
           isEffectiveTop || isNextTransitioning || !next
             ? undefined
-            : `${computePadding(stack, idx)}px`;
-
-        const elementProps = {
-          sideId: item.id,
-          options: item.options,
-          close,
-          open,
-          update,
-        };
+            : `${computePadding(resolved, stack, idx)}px`;
+        const { element, width } = resolved[idx];
 
         return (
           <React.Fragment key={item.id}>
@@ -133,7 +154,7 @@ export const SideSheetContainer: React.FC<SideSheetContainerProps> = ({
                 [paddingKey]: paddingValue,
               }}
             >
-              {item.element(elementProps)}
+              {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/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';
 }