react-native-nitro-modal 0.3.1-rc → 0.3.4-rc

package/nitrogen/generated/shared/c++/HybridNitroModalSpec.hpp

@@ -90,6 +90,10 @@ namespace margelo::nitro::nitromodal {
       virtual void setGrabberVisible(bool grabberVisible) = 0;
       virtual double getCornerRadius() = 0;
       virtual void setCornerRadius(double cornerRadius) = 0;
+      virtual double getBorderWidth() = 0;
+      virtual void setBorderWidth(double borderWidth) = 0;
+      virtual std::optional<double> getBorderColor() = 0;
+      virtual void setBorderColor(std::optional<double> borderColor) = 0;
       virtual std::optional<double> getContentBackgroundColor() = 0;
       virtual void setContentBackgroundColor(std::optional<double> contentBackgroundColor) = 0;
       virtual KeyboardBehavior getKeyboardBehavior() = 0;

package/nitrogen/generated/shared/c++/views/HybridNitroModalComponent.cpp

@@ -33,6 +33,8 @@ namespace margelo::nitro::nitromodal::views {
     dismissOnBackButton(nitro::ReactProp<bool>::fromRawValue("NitroModal", "dismissOnBackButton", rawProps, sourceProps.dismissOnBackButton)),
     grabberVisible(nitro::ReactProp<bool>::fromRawValue("NitroModal", "grabberVisible", rawProps, sourceProps.grabberVisible)),
     cornerRadius(nitro::ReactProp<double>::fromRawValue("NitroModal", "cornerRadius", rawProps, sourceProps.cornerRadius)),
+    borderWidth(nitro::ReactProp<double>::fromRawValue("NitroModal", "borderWidth", rawProps, sourceProps.borderWidth)),
+    borderColor(nitro::ReactProp<std::optional<double>>::fromRawValue("NitroModal", "borderColor", rawProps, sourceProps.borderColor)),
     contentBackgroundColor(nitro::ReactProp<std::optional<double>>::fromRawValue("NitroModal", "contentBackgroundColor", rawProps, sourceProps.contentBackgroundColor)),
     keyboardBehavior(nitro::ReactProp<KeyboardBehavior>::fromRawValue("NitroModal", "keyboardBehavior", rawProps, sourceProps.keyboardBehavior)),
     popupAnimation(nitro::ReactProp<PopupAnimation>::fromRawValue("NitroModal", "popupAnimation", rawProps, sourceProps.popupAnimation)),
@@ -64,6 +66,8 @@ namespace margelo::nitro::nitromodal::views {
       case hashString("dismissOnBackButton"): return true;
       case hashString("grabberVisible"): return true;
       case hashString("cornerRadius"): return true;
+      case hashString("borderWidth"): return true;
+      case hashString("borderColor"): return true;
       case hashString("contentBackgroundColor"): return true;
       case hashString("keyboardBehavior"): return true;
       case hashString("popupAnimation"): return true;

package/nitrogen/generated/shared/c++/views/HybridNitroModalComponent.hpp

@@ -63,6 +63,8 @@ namespace margelo::nitro::nitromodal::views {
     nitro::ReactProp<bool> dismissOnBackButton;
     nitro::ReactProp<bool> grabberVisible;
     nitro::ReactProp<double> cornerRadius;
+    nitro::ReactProp<double> borderWidth;
+    nitro::ReactProp<std::optional<double>> borderColor;
     nitro::ReactProp<std::optional<double>> contentBackgroundColor;
     nitro::ReactProp<KeyboardBehavior> keyboardBehavior;
     nitro::ReactProp<PopupAnimation> popupAnimation;
@@ -94,6 +96,8 @@ namespace margelo::nitro::nitromodal::views {
              dismissOnBackButton.hasSameValue(other.dismissOnBackButton) &&
              grabberVisible.hasSameValue(other.grabberVisible) &&
              cornerRadius.hasSameValue(other.cornerRadius) &&
+             borderWidth.hasSameValue(other.borderWidth) &&
+             borderColor.hasSameValue(other.borderColor) &&
              contentBackgroundColor.hasSameValue(other.contentBackgroundColor) &&
              keyboardBehavior.hasSameValue(other.keyboardBehavior) &&
              popupAnimation.hasSameValue(other.popupAnimation) &&
@@ -126,6 +130,8 @@ namespace margelo::nitro::nitromodal::views {
              dismissOnBackButton.isProvided() ||
              grabberVisible.isProvided() ||
              cornerRadius.isProvided() ||
+             borderWidth.isProvided() ||
+             borderColor.isProvided() ||
              contentBackgroundColor.isProvided() ||
              keyboardBehavior.isProvided() ||
              popupAnimation.isProvided() ||

package/nitrogen/generated/shared/json/NitroModalConfig.json

@@ -17,6 +17,8 @@
     "dismissOnBackButton": true,
     "grabberVisible": true,
     "cornerRadius": true,
+    "borderWidth": true,
+    "borderColor": true,
     "contentBackgroundColor": true,
     "keyboardBehavior": true,
     "popupAnimation": true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-nitro-modal",
-  "version": "0.3.1-rc",
+  "version": "0.3.4-rc",
   "description": "react native native modal",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/NitroModal.nitro.ts

@@ -77,6 +77,10 @@ export interface NitroModalProps extends HybridViewProps {
   grabberVisible: boolean;
   /** Corner radius of the sheet/card. A negative value uses the platform default. */
   cornerRadius: number;
+  /** Width (dp/pt) of the border drawn around the sheet/card, above the content. 0 draws none. */
+  borderWidth: number;
+  /** Border color as a processed ARGB color. */
+  borderColor?: number;
   /** Sheet/card background as a processed ARGB color. Omit for the system background. */
   contentBackgroundColor?: number;
   keyboardBehavior: KeyboardBehavior;

package/src/NitroModal.tsx

@@ -92,6 +92,13 @@ export interface NitroModalProps {
   showGrabber?: boolean;
   /** Corner radius of the sheet/card. Defaults to the platform style. */
   cornerRadius?: number;
+  /**
+   * Width (dp/pt/px) of a border around the sheet/card, drawn above the
+   * content and following its corners. @default 0
+   */
+  borderWidth?: number;
+  /** Color of the border. @default 'transparent' */
+  borderColor?: ColorValue;
   /** Sheet/card background. Defaults to the system surface color. */
   backgroundColor?: ColorValue;
   /** @default 'pan' */
@@ -158,6 +165,8 @@ export function NitroModal({
   dismissOnBackButton = true,
   showGrabber = false,
   cornerRadius,
+  borderWidth = 0,
+  borderColor,
   backgroundColor,
   keyboardBehavior = 'pan',
   popupAnimation = 'scale',
@@ -334,6 +343,8 @@ export function NitroModal({
       dismissOnBackButton={dismissOnBackButton}
       grabberVisible={showGrabber}
       cornerRadius={cornerRadius ?? -1}
+      borderWidth={borderWidth}
+      borderColor={toNativeColor(borderColor)}
       contentBackgroundColor={toNativeColor(backgroundColor)}
       keyboardBehavior={keyboardBehavior}
       popupAnimation={popupAnimation}

package/src/NitroModalView.web.tsx

@@ -45,6 +45,7 @@ function WebNitroModalView(props: WebNitroModalViewProps) {
   const surface = useRef<HTMLDivElement>(null);
   const content = useRef<HTMLDivElement>(null);
   const grabber = useRef<HTMLDivElement>(null);
+  const border = useRef<HTMLDivElement>(null);
   const refreshIndicator = useRef<HTMLDivElement>(null);
   const refreshSpinner = useRef<HTMLDivElement>(null);
 
@@ -69,6 +70,7 @@ function WebNitroModalView(props: WebNitroModalViewProps) {
       surface: surface.current!,
       content: content.current!,
       grabber: grabber.current!,
+      border: border.current!,
       refreshIndicator: refreshIndicator.current!,
       refreshSpinner: refreshSpinner.current!,
     });
@@ -102,14 +104,15 @@ function WebNitroModalView(props: WebNitroModalViewProps) {
       }
     >
       <div ref={backdrop} aria-hidden style={styles.backdrop} />
-      <div ref={refreshIndicator} aria-hidden style={styles.refreshIndicator}>
-        <div ref={refreshSpinner} style={styles.refreshSpinner} />
-      </div>
       <div ref={surface} style={styles.surface}>
+        <div ref={refreshIndicator} aria-hidden style={styles.refreshIndicator}>
+          <div ref={refreshSpinner} style={styles.refreshSpinner} />
+        </div>
         <div ref={content} style={styles.content}>
           {children}
         </div>
         <div ref={grabber} aria-hidden style={styles.grabber} />
+        <div ref={border} aria-hidden style={styles.border} />
       </div>
     </div>
   ) : null;
@@ -179,6 +182,16 @@ const styles = {
     backgroundColor: 'rgba(127, 127, 127, 0.4)',
     pointerEvents: 'none',
   },
+  // Sized by the presenter's border width; follows the surface's corners.
+  border: {
+    position: 'absolute',
+    inset: 0,
+    boxSizing: 'border-box',
+    borderStyle: 'solid',
+    borderWidth: 0,
+    borderRadius: 'inherit',
+    pointerEvents: 'none',
+  },
   refreshIndicator: {
     position: 'absolute',
     left: 0,

package/src/web/ModalConfig.ts

@@ -26,6 +26,10 @@ export interface ModalConfig {
   grabberVisible: boolean;
   /** `null` uses the default. */
   cornerRadius: number | null;
+  /** Border around the surface, drawn above the content. */
+  borderWidth: number;
+  /** 0xAARRGGBB; `null` draws no border. */
+  borderColor: number | null;
   /** 0xAARRGGBB; `null` uses the system background. */
   contentBackgroundColor: number | null;
   keyboardBehavior: KeyboardBehavior;
@@ -55,6 +59,11 @@ export function makeConfig(props: NitroModalProps): ModalConfig {
     dismissOnBackButton: props.dismissOnBackButton && !isInline,
     grabberVisible: props.grabberVisible,
     cornerRadius: props.cornerRadius >= 0 ? props.cornerRadius : null,
+    borderWidth:
+      Number.isFinite(props.borderWidth) && props.borderWidth > 0
+        ? props.borderWidth
+        : 0,
+    borderColor: props.borderColor ?? null,
     contentBackgroundColor: props.contentBackgroundColor ?? null,
     keyboardBehavior: props.keyboardBehavior,
     popupAnimation: props.popupAnimation,

package/src/web/ModalPresenter.ts

@@ -23,7 +23,9 @@ export interface ModalElements {
   /** Hosts the React content. */
   content: HTMLElement;
   grabber: HTMLElement;
-  /** Behind the sheet, uncovered as it's pulled down to refresh. */
+  /** Above the content, following the surface's corners. */
+  border: HTMLElement;
+  /** Inside the sheet behind the content, uncovered as it's pulled down to refresh. */
   refreshIndicator: HTMLElement;
   /** The spinning ring inside `refreshIndicator`. */
   refreshSpinner: HTMLElement;
@@ -246,6 +248,12 @@ export abstract class ModalPresenter {
       config.contentBackgroundColor != null
         ? toCSSColor(config.contentBackgroundColor)
         : 'Canvas';
+    const { border } = this.elements!;
+    border.style.borderWidth = `${config.borderWidth}px`;
+    border.style.borderColor =
+      config.borderColor != null
+        ? toCSSColor(config.borderColor)
+        : 'transparent';
   }
 
   /** Inline, only the surface takes input; the rest reaches the page. */

package/src/web/SheetPresenter.ts

@@ -339,28 +339,42 @@ export class SheetPresenter extends ModalPresenter {
 
   private render(top: number) {
     if (!this.elements) return;
-    this.elements.surface.style.transform = `translate3d(0, ${top}px, 0)`;
-    this.elements.backdrop.style.opacity = String(this.backdropAlpha(top));
-    this.renderRefreshIndicator(top);
+    const { surface, content, backdrop } = this.elements;
+    const { sheetTop, pull } = this.split(top);
+    surface.style.transform = `translate3d(0, ${sheetTop}px, 0)`;
+    content.style.transform = pull > 0 ? `translate3d(0, ${pull}px, 0)` : '';
+    backdrop.style.opacity = String(this.backdropAlpha(sheetTop));
+    this.renderRefreshIndicator(pull);
   }
 
   /**
-   * Centered in the gap a pull uncovers below the lowest detent, fading in
-   * as the pull nears the threshold.
+   * With a refresh indicator, a pull below the lowest detent keeps the sheet
+   * there and moves the content down inside it instead, uncovering the
+   * indicator at the top of the sheet.
    */
-  private renderRefreshIndicator(top: number) {
-    const { refreshIndicator, refreshSpinner } = this.elements!;
-    const visible =
+  private split(top: number): { sheetTop: number; pull: number } {
+    const pullsContent =
       this.config.refreshing != null &&
+      this.config.pullToRefreshEnabled &&
+      !this.config.dismissOnSwipe &&
       !this.entering &&
       !this.isDismissing &&
       !this.isOffscreen;
     const lowest = Math.max(...this.detentTops);
-    const progress = visible
-      ? Math.min(Math.max((top - lowest) / REFRESH_THRESHOLD, 0), 1)
-      : 0;
-    const x = (this.viewport.width - REFRESH_INDICATOR_SIZE) / 2;
-    const y = top - (REFRESH_THRESHOLD + REFRESH_INDICATOR_SIZE) / 2;
+    if (!pullsContent || !(top > lowest)) return { sheetTop: top, pull: 0 };
+    return { sheetTop: lowest, pull: top - lowest };
+  }
+
+  /**
+   * Centered in the gap a pull uncovers above the content, fading in as the
+   * pull nears the threshold.
+   */
+  private renderRefreshIndicator(pull: number) {
+    const { refreshIndicator, refreshSpinner } = this.elements!;
+    const progress = Math.min(Math.max(pull / REFRESH_THRESHOLD, 0), 1);
+    const width = sheetWidth(this.viewport.width, this.config.isInline);
+    const x = (width - REFRESH_INDICATOR_SIZE) / 2;
+    const y = (pull - REFRESH_INDICATOR_SIZE) / 2;
     refreshIndicator.style.transform = `translate3d(${x}px, ${y}px, 0)`;
     refreshIndicator.style.opacity = String(progress);
     if (progress > 0 && !this.refreshSpin) {
@@ -513,6 +527,9 @@ export class SheetPresenter extends ModalPresenter {
       drag.rawTop += delta;
       drag.sheetDrove = true;
     }
+    if (!this.canDragBelowLowestDetent) {
+      drag.rawTop = Math.min(drag.rawTop, Math.max(...this.settledTops));
+    }
     const top = this.constrained(drag.rawTop);
     if (drag.canRefresh) {
       drag.refreshArmed =
@@ -594,6 +611,15 @@ export class SheetPresenter extends ModalPresenter {
     return ((last.y - first.y) / (last.time - first.time)) * 1000;
   }
 
+  /**
+   * Whether a drag can take the sheet below its lowest detent: to dismiss it
+   * or to pull to refresh. Otherwise it stops there, like Android's
+   * `BottomSheetBehavior`.
+   */
+  private get canDragBelowLowestDetent(): boolean {
+    return this.config.dismissOnSwipe || this.config.pullToRefreshEnabled;
+  }
+
   /** Rubber-bands above the tallest detent, and below the lowest one when swiping can't dismiss. */
   private constrained(top: number): number {
     const tops = this.settledTops;