From 678bb84d3105bc4fc040567a07e8cbdeb56c58d1 Mon Sep 17 00:00:00 2001
From: lodev09 <lodev09@gmail.com>
Date: Thu, 25 Apr 2024 18:27:41 +0800
Subject: [PATCH] feat(ios): add `dimmedIndex`

---
 docs/docs/reference/01-props.mdx   | 18 ++++++++++++++++++
 example/src/sheets/InlineSheet.tsx |  6 ++++--
 ios/TrueSheetView.swift            | 11 +++++++++++
 ios/TrueSheetViewController.swift  | 15 +++++++++++----
 ios/TrueSheetViewManager.m         |  1 +
 src/TrueSheet.tsx                  |  2 ++
 src/types.ts                       | 10 ++++++++--
 7 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/docs/docs/reference/01-props.mdx b/docs/docs/reference/01-props.mdx
index 894aeae..e3d31f7 100644
--- a/docs/docs/reference/01-props.mdx
+++ b/docs/docs/reference/01-props.mdx
@@ -74,6 +74,24 @@ If set to `false`, the sheet will prevent interactive dismissal via dragging or
 | - | - | - | - |
 | `boolean` | `true` | ✅ | ✅ |
 
+### `dimmed`
+
+Specify whether the sheet background is dimmed. Set to `false` to allow interaction with the background components.
+
+| Type | Default | 🍎 | 🤖 |
+| - | - | - | - |
+| `boolean` | `true` | ✅ | ✅ |
+
+### `dimmedIndex`
+
+The size index that the sheet should start to dim on IOS. When value is `> 0`, `dimmed` is ignored.
+
+Consider using `dimmed` for consistency across platforms.
+
+| Type | Default | 🍎 | 🤖 |
+| - | - | - | - |
+| `number` | `0` | ✅ | ✅ |
+
 ### `grabber`
 
 Shows a grabber (or handle). Native on IOS and styled `View` on Android.
diff --git a/example/src/sheets/InlineSheet.tsx b/example/src/sheets/InlineSheet.tsx
index 183129b..62e2a51 100644
--- a/example/src/sheets/InlineSheet.tsx
+++ b/example/src/sheets/InlineSheet.tsx
@@ -47,13 +47,15 @@ export const InlineSheet = forwardRef((props: InlineSheetProps, ref: Ref<InlineS
       <TrueSheet
         ref={sheetRef}
         dimmed={false}
-        sizes={['auto', 'large']}
+        dimmedIndex={1}
+        sizes={['auto', '75%', 'large']}
         blurTint="dark"
         backgroundColor={DARK}
         onDismiss={() => setIsPresented(false)}
         contentContainerStyle={$content}
         {...props}
       >
+        <DemoContent color={BLUE} />
         <DemoContent color={BLUE} />
         <Button text="Dismiss" onPress={dismiss} />
       </TrueSheet>
@@ -69,7 +71,7 @@ const $content: ViewStyle = {
 }
 
 const $backgroundContent: ViewStyle = {
-  padding: SPACING,
+  padding: 24,
   paddingTop: SPACING * 6,
   backgroundColor: BLUE,
 }
diff --git a/ios/TrueSheetView.swift b/ios/TrueSheetView.swift
index 98f7fd4..dcd7d67 100644
--- a/ios/TrueSheetView.swift
+++ b/ios/TrueSheetView.swift
@@ -256,6 +256,17 @@ class TrueSheetView: UIView, RCTInvalidating, TrueSheetViewControllerDelegate {
     }
   }
 
+  @objc
+  func setDimmedIndex(_ index: NSNumber) {
+    viewController.dimmedIndex = index as? Int
+
+    if #available(iOS 15.0, *) {
+      withPresentedSheet { sheet in
+        viewController.setDimmed(for: sheet)
+      }
+    }
+  }
+
   @objc
   func setScrollableHandle(_ tag: NSNumber?) {
     let view = bridge.uiManager.view(forReactTag: tag) as? RCTScrollView
diff --git a/ios/TrueSheetViewController.swift b/ios/TrueSheetViewController.swift
index 1e67ce6..fa1ace5 100644
--- a/ios/TrueSheetViewController.swift
+++ b/ios/TrueSheetViewController.swift
@@ -44,6 +44,7 @@ class TrueSheetViewController: UIViewController, UISheetPresentationControllerDe
   var cornerRadius: CGFloat?
   var grabber = true
   var dimmed = true
+  var dimmedIndex: Int? = 0
 
   // MARK: - Setup
 
@@ -127,15 +128,21 @@ class TrueSheetViewController: UIViewController, UISheetPresentationControllerDe
     }
   }
 
+  /// Setup dimmed sheet.
+  /// `dimmedIndex` will further customize the dimming behavior.
   @available(iOS 15.0, *)
   func setDimmed(for sheet: UISheetPresentationController) {
-    if dimmed {
+    if dimmed, dimmedIndex == 0 {
       sheet.largestUndimmedDetentIdentifier = nil
     } else {
       sheet.largestUndimmedDetentIdentifier = .large
-      if #available(iOS 16.0, *),
-         let lastIdentifier = sheet.detents.last?.identifier {
-        sheet.largestUndimmedDetentIdentifier = lastIdentifier
+
+      if #available(iOS 16.0, *) {
+        if let dimmedIndex, sheet.detents.indices.contains(dimmedIndex - 1) {
+          sheet.largestUndimmedDetentIdentifier = sheet.detents[dimmedIndex - 1].identifier
+        } else if let lastIdentifier = sheet.detents.last?.identifier {
+          sheet.largestUndimmedDetentIdentifier = lastIdentifier
+        }
       }
     }
   }
diff --git a/ios/TrueSheetViewManager.m b/ios/TrueSheetViewManager.m
index 6bbc5b5..c2571c2 100644
--- a/ios/TrueSheetViewManager.m
+++ b/ios/TrueSheetViewManager.m
@@ -36,6 +36,7 @@ @interface RCT_EXTERN_REMAP_MODULE (TrueSheetView, TrueSheetViewManager, RCTView
 RCT_EXPORT_VIEW_PROPERTY(grabber, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(dismissible, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(dimmed, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(dimmedIndex, NSNumber)
 
 // Internal properties
 RCT_EXPORT_VIEW_PROPERTY(contentHeight, NSNumber)
diff --git a/src/TrueSheet.tsx b/src/TrueSheet.tsx
index 0ce137c..0bfaa03 100644
--- a/src/TrueSheet.tsx
+++ b/src/TrueSheet.tsx
@@ -203,6 +203,7 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
       dismissible = true,
       grabber = true,
       dimmed = true,
+      dimmedIndex,
       grabberProps,
       blurTint,
       cornerRadius,
@@ -226,6 +227,7 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
         footerHeight={this.state.footerHeight}
         grabber={grabber}
         dimmed={dimmed}
+        dimmedIndex={dimmedIndex}
         dismissible={dismissible}
         maxHeight={maxHeight}
         onPresent={this.onPresent}
diff --git a/src/types.ts b/src/types.ts
index 20cb603..f0fb07d 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -124,14 +124,20 @@ export interface TrueSheetProps extends ViewProps {
    * Specify whether the sheet background is dimmed.
    * Set to `false` to allow interaction with the background components.
    *
+   * @platform android
+   * @platform ios 15+
    * @default true
    */
   dimmed?: boolean
 
   /**
-   * The size index that the sheet should start to dim in IOS.
+   * The size index that the sheet should start to dim on IOS.
+   * When value is `> 0`, `dimmed` is ignored.
    *
-   * @platform ios
+   * Consider using `dimmed` for consistency across platforms.
+   *
+   * @platform ios 16+
+   * @default 0
    */
   dimmedIndex?: number