feat: doing handle footer for preview controller

Author: baronha

example/ios/Podfile.lock

@@ -330,12 +330,12 @@ PODS:
   - React-jsinspector (0.71.5)
   - React-logger (0.71.5):
     - glog
-  - react-native-multiple-image-picker (1.0.2):
+  - react-native-multiple-image-picker (1.0.3):
     - CropViewController (= 2.6.1)
     - React-Core
-    - react-native-multiple-image-picker/Viewer (= 1.0.2)
+    - react-native-multiple-image-picker/Viewer (= 1.0.3)
     - TLPhotoPicker (= 2.1.9)
-  - react-native-multiple-image-picker/Viewer (1.0.2):
+  - react-native-multiple-image-picker/Viewer (1.0.3):
     - CropViewController (= 2.6.1)
     - React-Core
     - TLPhotoPicker (= 2.1.9)
@@ -618,7 +618,7 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 1579bf3207afadc72ac3638a66a102d1bf5263e3
   React-jsinspector: 14a342151ab810862998dfc99e2720746734e9b3
   React-logger: 94ec392ae471683635e4bf874d4e82f675399d2d
-  react-native-multiple-image-picker: bf07238dbbd6ba7928f01705d85584ac0d7b27a1
+  react-native-multiple-image-picker: 83b0fe4a14eaa7ae6fd5e5af46d7706ce26b2c7b
   React-perflogger: 883a55a9a899535eaf06d0029108ef9ef22cce92
   React-RCTActionSheet: 1a3b8416688a3d291367be645022886f71d6842a
   React-RCTAnimation: e5560cb72d91ba35151d51e2eb0d467b42763f43

ios/CustomPhotoPicker/Cell.swift

@@ -31,8 +31,7 @@ class Cell: TLPhotoCollectionViewCell {
 
     // Xử lý sự kiện Long Press
     @objc private func handleLongPress(_ gestureRecognizer: UILongPressGestureRecognizer) {
-        guard gestureRecognizer.state == .began,
-              let collectionView = superview as? UICollectionView
+        guard gestureRecognizer.state == .began
         else {
             return
         }

ios/CustomPhotoPicker/CustomPhotoPickerViewController.swift

@@ -55,13 +55,18 @@ class CustomPhotoPickerViewController: TLPhotosPickerViewController, ViewerContr
 
                 self.viewerController!.dataSource = self
 
-                self.viewerController?.viewSafeAreaInsetsDidChange()
-
                 let headerView = PreviewHeaderView()
                 headerView.viewDelegate = self
 
                 self.viewerController!.headerView = headerView
 
+                if config.singleSelectedMode != true {
+                    let footerView = PreviewFooterView()
+                    footerView.viewDelegate = self
+
+                    self.viewerController!.footerView = footerView
+                }
+
                 self.present(self.viewerController!, animated: true, completion: nil)
             }
         }
@@ -105,7 +110,7 @@ class CustomPhotoPickerViewController: TLPhotosPickerViewController, ViewerContr
     }
 }
 
-extension CustomPhotoPickerViewController: PreviewHeaderViewDelegate {
+extension CustomPhotoPickerViewController: PreviewHeaderViewDelegate, PreviewFooterViewDelegate {
     func headerView(_: PreviewHeaderView, didPressClearButton _: UIButton) {
         self.viewerController?.dismiss(nil)
     }
@@ -117,4 +122,8 @@ extension CustomPhotoPickerViewController: PreviewHeaderViewDelegate {
             })
         }
     }
+
+    func footerView(_: PreviewFooterView, didPressSelectButton _: UIButton) {
+        self.viewerController?.dismiss(nil)
+    }
 }

ios/Preview/PreviewFooter.swift

@@ -0,0 +1,88 @@
+//
+//  PreviewFooter.swift
+//  react-native-multiple-image-picker
+//
+//  Created by BẢO HÀ on 15/09/2023.
+//
+
+import TLPhotoPicker
+import UIKit
+
+protocol PreviewFooterViewDelegate: AnyObject {
+    func footerView(_ headerView: PreviewFooterView, didPressSelectButton button: UIButton)
+}
+
+class PreviewFooterView: TLPhotoCollectionViewCell {
+    weak var viewDelegate: PreviewFooterViewDelegate?
+
+    lazy var selectButton: UIButton = {
+        let button = UIButton(type: .system)
+
+        button.addTarget(self, action: #selector(PreviewFooterView.selectAction(button:)), for: .touchUpInside)
+        button.frame = CGRect(x: 0, y: 0, width: 24, height: 24)
+//
+//        button.layer.cornerRadius = 12
+//        button.clipsToBounds = true
+
+        button.backgroundColor = config.selectedColor
+
+        button.layer.borderWidth = 1.5
+        button.layer.borderColor = UIColor.white.cgColor
+
+        button.layer.cornerRadius = 16
+        button.clipsToBounds = true
+        button.contentEdgeInsets = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8)
+
+        button.setTitle("1", for: .normal)
+        button.setTitleColor(.white, for: .normal)
+
+        button.translatesAutoresizingMaskIntoConstraints = false
+
+        // Tạo constraints để cố định vị trí của tiêu đề ở giữa tuyệt đối (absolute center)
+
+//        let label = UILabel()
+//        label.text = "2"
+//        label.textColor = UIColor.white // Tuỳ chỉnh màu văn bản theo ý muốn
+//        label.textAlignment = .center
+//        label.frame = button.bounds // Đặt kích thước và vị trí của UILabel bằng bằng với UIButton
+//        button.addSubview(label)
+
+        return button
+    }()
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        let stackView = UIStackView()
+        stackView.translatesAutoresizingMaskIntoConstraints = false
+        stackView.axis = .horizontal
+        stackView.alignment = .trailing
+        addSubview(stackView)
+
+        self.selectButton.translatesAutoresizingMaskIntoConstraints = false
+        stackView.addArrangedSubview(self.selectButton)
+
+        self.selectButton.centerXAnchor.constraint(equalTo: stackView.centerXAnchor).isActive = true
+        self.selectButton.centerYAnchor.constraint(equalTo: stackView.centerYAnchor).isActive = true
+
+        // (Tuỳ chọn) Đặt constraints cho chiều rộng và chiều cao của UIButton
+        self.selectButton.widthAnchor.constraint(equalToConstant: 32).isActive = true
+        self.selectButton.heightAnchor.constraint(equalToConstant: 32).isActive = true
+
+        NSLayoutConstraint.activate([
+            stackView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -20),
+        ])
+    }
+
+    @available(*, unavailable)
+    required init?(coder _: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    override func layoutSubviews() {
+        super.layoutSubviews()
+    }
+
+    @objc func selectAction(button: UIButton) {
+        self.viewDelegate?.footerView(self, didPressSelectButton: button)
+    }
+}

ios/Preview/PreviewHeader.swift

@@ -9,7 +9,7 @@ class PreviewHeaderView: UIView {
     weak var viewDelegate: PreviewHeaderViewDelegate?
 
     lazy var clearButton: UIButton = {
-        let image = UIImage.close.setTintColor(.black)?.resize(to: .init(width: 18, height: 18))
+        let image = UIImage.close.resize(to: .init(width: 18, height: 18))
 
         let button = UIButton(type: .custom)
 
@@ -21,26 +21,27 @@ class PreviewHeaderView: UIView {
     }()
 
     lazy var doneButton: UIButton = {
-        let button = UIButton(type: .system) // Sử dụng type .system cho button với giao diện người dùng tiêu chuẩn
+        let button = UIButton(type: .system)
 
-        // Đặt tiêu đề (text) cho button
         button.setTitle(config.doneTitle, for: .normal)
+        button.setTitleColor(.white, for: .normal)
+        button.titleLabel?.font = UIFont.boldSystemFont(ofSize: UIFont.systemFontSize)
+        button.addTarget(self, action: #selector(PreviewHeaderView.doneAction(button:)), for: .touchUpInside)
+        button.backgroundColor = config.selectedColor
 
-        // Đặt màu chữ và màu nền cho button (tuỳ chọn)
-        button.setTitleColor(config.selectedColor, for: .normal)
+        button.contentEdgeInsets = UIEdgeInsets(top: 8, left: 14, bottom: 8, right: 14)
 
-        button.titleLabel?.font = UIFont.boldSystemFont(ofSize: UIFont.labelFontSize)
+        button.layer.cornerRadius = 6.0
 
-        button.addTarget(self, action: #selector(PreviewHeaderView.doneAction(button:)), for: .touchUpInside)
+        button.setContentHuggingPriority(.required, for: .vertical)
+        button.setContentCompressionResistancePriority(.required, for: .vertical)
 
         return button
     }()
 
     override init(frame: CGRect) {
         super.init(frame: frame)
 
-        self.backgroundColor = .white
-
         let stackView = UIStackView()
         stackView.translatesAutoresizingMaskIntoConstraints = false
         stackView.axis = .horizontal
@@ -55,10 +56,9 @@ class PreviewHeaderView: UIView {
         stackView.addArrangedSubview(self.doneButton)
 
         NSLayoutConstraint.activate([
-            stackView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 24),
-            stackView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -24),
-            stackView.topAnchor.constraint(equalTo: topAnchor),
-            stackView.bottomAnchor.constraint(equalTo: bottomAnchor),
+            stackView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 20),
+            stackView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -20),
+            stackView.topAnchor.constraint(equalTo: topAnchor, constant: 12),
         ])
     }