ContextMenuAuxiliaryPreview

A library to add an auxiliary preview to the edge of the context menu preview.

• Support for programmatically showing the context menu.
• Preset transition for the aux. preview entrance/exit.
• Support for showing the aux. preview as a popover.
• This library is used in react-native-ios-context-menu.

Acknowledgements

Development and maintenance of this library was generously sponsored by beatgig from 11/15/2023 to 04/30/2024 at $1,535/month (totaling ≈ $9,100 over the course of 6 months)

Further fixes to this library was made possible through a generous $3,750 sponsorship by natew + tamagui over the course of 4 months (from: 05/27/24 to 09/30/24) 🐦✨

very special thanks to: junzhengca, brentvatne, expo, EvanBacon, corasan, lauridskern, and ronintechnologies for becoming a monthly sponsor and fobos531 for being a one time sponsor 🥺 (if you have the means to do so, please considering sponsoring here)

Installation

Cocoapods

ContextMenuAuxiliaryPreview is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'ContextMenuAuxiliaryPreview'

Swift Package Manager (SPM)

Method: #1: Via Xcode GUI:

1. File > Swift Packages > Add Package Dependency
2. Add https://github.com/dominicstop/ContextMenuAuxiliaryPreview.git

Method: #2: Via Package.swift:

• Open your project's Package.swift file.
• Update dependencies in Package.swift, and add the following:

dependencies: [
  .package(url: "https://github.com/dominicstop/ContextMenuAuxiliaryPreview.git",
  .upToNextMajor(from: "0.3.0"))
]

Basic Usage

🔗 Full Example

// ✨ Some code ommmitted for brevity

import UIKit
import ContextMenuAuxiliaryPreview

class AuxiliaryPreviewBasicUsage01Controller: UIViewController, ContextMenuManagerDelegate {

  var interaction: UIContextMenuInteraction?;
  var contextMenuManager: ContextMenuManager?;

  override func viewDidLoad() {
    super.viewDidLoad()
    self.view.backgroundColor = .white;
    
    let boxView: UIView = {
      let view = UIView();
      view.backgroundColor = .systemPink;
      view.layer.cornerRadius = 10;
      
      let interaction = UIContextMenuInteraction(delegate: self);
      self.interaction = interaction;
      
      view.addInteraction(interaction);
      
      let contextMenuManager = ContextMenuManager(
        contextMenuInteraction: interaction,
        menuTargetView: self.view
      );
      
      self.contextMenuManager = contextMenuManager;
      contextMenuManager.delegate = self;
      
      contextMenuManager.auxiliaryPreviewConfig = AuxiliaryPreviewConfig(
        verticalAnchorPosition: .automatic,
        horizontalAlignment: .targetCenter,
        preferredWidth: .constant(100),
        preferredHeight: .constant(100),
        marginInner: 10,
        marginOuter: 10,
        transitionConfigEntrance: .syncedToMenuEntranceTransition(),
        transitionExitPreset: .fade
      );

      return view;
    }();
    
    boxView.translatesAutoresizingMaskIntoConstraints = false;
    self.view.addSubview(boxView);
    
    NSLayoutConstraint.activate([
      boxView.centerXAnchor.constraint(
        equalTo: self.view.centerXAnchor
      ),
      boxView.centerYAnchor.constraint(
        equalTo: self.view.centerYAnchor
      ),
      boxView.widthAnchor.constraint(
        equalToConstant: 100
      ),
      boxView.heightAnchor.constraint(
        equalToConstant: 100
      ),
    ]);
  };
};

extension AuxiliaryPreviewBasicUsage01Controller: UIContextMenuInteractionDelegate {

  func contextMenuInteraction(
    _ interaction: UIContextMenuInteraction,
    configurationForMenuAtLocation location: CGPoint
  ) -> UIContextMenuConfiguration? {
  
    self.contextMenuManager!.notifyOnContextMenuInteraction(
      interaction,
      configurationForMenuAtLocation: location
    );
    
    return UIContextMenuConfiguration(identifier: nil, previewProvider: nil) { _ -> UIMenu? in
      let shareAction = UIAction(
        title: "Share",
        image: UIImage(systemName: "square.and.arrow.up")
      ) { _ in
        // no-op
      };
      
      return UIMenu(title: "", children: [shareAction]);
    };
  };
  
  func contextMenuInteraction(
    _ interaction: UIContextMenuInteraction,
    willDisplayMenuFor configuration: UIContextMenuConfiguration,
    animator: UIContextMenuInteractionAnimating?
  ) {
    
    self.contextMenuManager!.notifyOnContextMenuInteraction(
      interaction,
      willDisplayMenuFor: configuration,
      animator: animator
    );
  };
  
  func contextMenuInteraction(
    _ interaction: UIContextMenuInteraction,
    willEndFor configuration: UIContextMenuConfiguration,
    animator: UIContextMenuInteractionAnimating?
  ) {
    
    self.contextMenuManager!.notifyOnContextMenuInteraction(
      interaction,
      willEndFor: configuration,
      animator: animator
    );
  };
  
  func onRequestMenuAuxiliaryPreview(sender: ContextMenuManager) -> UIView? {
    let menuAuxiliaryPreview = UIView(frame: .zero);
    menuAuxiliaryPreview.backgroundColor = .red;
    
    return menuAuxiliaryPreview;
  };
};