feat: add bundle file for Viewer / doing custom header for preview view

Author: baronha

Preview/PreviewHeader.swift

@@ -0,0 +1,74 @@
+import UIKit
+
+protocol PreviewHeaderViewDelegate: AnyObject {
+    func headerView(_ headerView: PreviewHeaderView, didPressClearButton button: UIButton)
+    func headerView(_ headerView: PreviewHeaderView, didPressDoneButton button: UIButton)
+}
+
+class PreviewHeaderView: UIView {
+    weak var viewDelegate: PreviewHeaderViewDelegate?
+    static let ButtonSize = CGFloat(24.0)
+    static let TopMargin = CGFloat(15.0)
+
+    lazy var clearButton: UIButton = {
+        let image = UIImage.close
+
+        let button = UIButton(type: .custom)
+        button.setImage(image, for: .normal)
+        button.addTarget(self, action: #selector(PreviewHeaderView.clearAction(button:)), for: .touchUpInside)
+
+        return button
+    }()
+
+    lazy var doneButton: UIButton = {
+        let image = UIImage.play
+
+        let button = UIButton(type: .custom)
+        button.setImage(image, for: .normal)
+        button.addTarget(self, action: #selector(PreviewHeaderView.clearAction(button:)), for: .touchUpInside)
+
+        return button
+    }()
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+
+        let stackView = UIStackView()
+        stackView.translatesAutoresizingMaskIntoConstraints = false
+        stackView.axis = .horizontal
+        stackView.distribution = .equalSpacing // Đặt phân bố để căn chỉnh giữa
+        addSubview(stackView)
+
+        // Tạo hai UIView là các mục trong header row
+        self.clearButton.translatesAutoresizingMaskIntoConstraints = false
+        stackView.addArrangedSubview(self.clearButton)
+
+        self.doneButton.translatesAutoresizingMaskIntoConstraints = false
+        stackView.addArrangedSubview(self.doneButton)
+
+        // Đặt constraints cho stack view để căn chỉnh theo phía trái và phải
+        NSLayoutConstraint.activate([
+            stackView.leadingAnchor.constraint(equalTo: leadingAnchor),
+            stackView.trailingAnchor.constraint(equalTo: trailingAnchor),
+            stackView.topAnchor.constraint(equalTo: topAnchor),
+            stackView.bottomAnchor.constraint(equalTo: bottomAnchor),
+        ])
+    }
+
+    @available(*, unavailable)
+    required init?(coder _: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    override func layoutSubviews() {
+        super.layoutSubviews()
+    }
+
+    @objc func clearAction(button: UIButton) {
+        self.viewDelegate?.headerView(self, didPressClearButton: button)
+    }
+
+    @objc func doneAction(button: UIButton) {
+        self.viewDelegate?.headerView(self, didPressDoneButton: button)
+    }
+}

Preview/PreviewItem.swift

@@ -0,0 +1,60 @@
+//
+//  ViewerPhoto.swift
+//  react-native-multiple-image-picker
+//
+//  Created by BẢO HÀ on 10/09/2023.
+//
+
+import Photos
+import TLPhotoPicker
+import UIKit
+
+class PreviewItem: Viewable {
+    var placeholder = UIImage()
+
+    enum Size {
+        case small
+        case large
+    }
+
+    var type: ViewableType = .image
+    var id: String
+    var url: String?
+    var assetID: String?
+
+    init(id: String) {
+        self.id = id
+    }
+
+    func media(_ completion: @escaping (_ image: UIImage?, _ error: NSError?) -> Void) {
+        if let assetID = self.assetID {
+            if let asset = PHAsset.fetchAssets(withLocalIdentifiers: [assetID], options: nil).firstObject {
+                PreviewItem.image(for: asset) { image in
+                    completion(image, nil)
+                }
+            }
+        } else {
+            completion(self.placeholder, nil)
+        }
+    }
+
+    static func image(for asset: PHAsset, completion: @escaping (_ image: UIImage?) -> Void) {
+        let imageManager = PHImageManager.default()
+        let requestOptions = PHImageRequestOptions()
+        requestOptions.isNetworkAccessAllowed = true
+        requestOptions.isSynchronous = false
+        requestOptions.deliveryMode = .opportunistic
+        requestOptions.resizeMode = .fast
+
+        let bounds = UIScreen.main.bounds.size
+        let targetSize = CGSize(width: bounds.width * 2, height: bounds.height * 2)
+        imageManager.requestImage(for: asset, targetSize: targetSize, contentMode: .aspectFit, options: requestOptions) { image, _ in
+            // WARNING: This could fail if your phone doesn't have enough storage. Since the photo is probably
+            // stored in iCloud downloading it to your phone will take most of the space left making this feature fail.
+            // guard let image = image else { fatalError("Couldn't get photo data for asset \(asset)") }
+            DispatchQueue.main.async {
+                completion(image)
+            }
+        }
+    }
+}

example/ios/Podfile.lock

@@ -618,7 +618,7 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 1579bf3207afadc72ac3638a66a102d1bf5263e3
   React-jsinspector: 14a342151ab810862998dfc99e2720746734e9b3
   React-logger: 94ec392ae471683635e4bf874d4e82f675399d2d
-  react-native-multiple-image-picker: 23e5c68a29e7aa0429a04ac4ac19c9105b79fbff
+  react-native-multiple-image-picker: bf07238dbbd6ba7928f01705d85584ac0d7b27a1
   React-perflogger: 883a55a9a899535eaf06d0029108ef9ef22cce92
   React-RCTActionSheet: 1a3b8416688a3d291367be645022886f71d6842a
   React-RCTAnimation: e5560cb72d91ba35151d51e2eb0d467b42763f43

ios/CustomPhotoPicker/CustomPhotoPickerViewController.swift

@@ -10,7 +10,9 @@ import Foundation
 import TLPhotoPicker
 
 class CustomPhotoPickerViewController: TLPhotosPickerViewController, ViewerControllerDataSource {
-    func numberOfItemsInViewerController(_ viewerController: ViewerController) -> Int {
+    var viewerController: ViewerController?
+
+    func numberOfItemsInViewerController(_: ViewerController) -> Int {
         var count = 0
 
         for section in 0 ..< collectionView.numberOfSections {
@@ -20,8 +22,8 @@ class CustomPhotoPickerViewController: TLPhotosPickerViewController, ViewerContr
         return count
     }
 
-    func viewerController(_ viewerController: ViewerController, viewableAt indexPath: IndexPath) -> Viewable {
-        let viewable = ViewerPhoto(id: UUID().uuidString)
+    func viewerController(_: ViewerController, viewableAt indexPath: IndexPath) -> Viewable {
+        let viewable = PreviewItem(id: UUID().uuidString)
 
         if let cell = collectionView?.cellForItem(at: indexPath) as? Cell, let placeholder = cell.imageView?.image, let asset = cell.asset {
             viewable.assetID = asset.localIdentifier
@@ -49,11 +51,16 @@ class CustomPhotoPickerViewController: TLPhotosPickerViewController, ViewerContr
     @objc func handleCellLongPress(_ notification: Notification) {
         if let cell = notification.object as? Cell {
             if let indexPath = collectionView.indexPath(for: cell) {
-                let viewerController = ViewerController(initialIndexPath: indexPath, collectionView: collectionView)
+                self.viewerController = ViewerController(initialIndexPath: indexPath, collectionView: collectionView)
+
+                self.viewerController!.dataSource = self
 
-                viewerController.dataSource = self
+                let headerView = PreviewHeaderView()
+                headerView.viewDelegate = self
 
-                self.present(viewerController, animated: true, completion: nil)
+                self.viewerController!.headerView = headerView
+
+                self.present(self.viewerController!, animated: true, completion: nil)
             }
         }
     }
@@ -82,7 +89,7 @@ class CustomPhotoPickerViewController: TLPhotosPickerViewController, ViewerContr
         }
     }
 
-    func cellOnLongPress(_ cell: Cell) {
+    func cellOnLongPress(_: Cell) {
         //
     }
 
@@ -95,3 +102,16 @@ class CustomPhotoPickerViewController: TLPhotosPickerViewController, ViewerContr
         super.viewWillDisappear(animated)
     }
 }
+
+extension CustomPhotoPickerViewController: PreviewHeaderViewDelegate {
+    func headerView(_: PreviewHeaderView, didPressClearButton _: UIButton) {
+        self.viewerController?.dismiss(nil)
+    }
+
+    func headerView(_: PreviewHeaderView, didDoneMenuButton _: UIButton) {
+//        let rect = CGRect(x: 0, y: 0, width: 50, height: 50)
+//        self.optionsController = OptionsController(sourceView: button, sourceRect: rect)
+//        self.optionsController!.delegate = self
+//        self.viewerController?.present(self.optionsController!, animated: true, completion: nil)
+    }
+}