Skip to content

Commit

Permalink
💫 Update: Exp - AdaptiveModal
Browse files Browse the repository at this point in the history 
Summary: Update experiment/test - `swift-programmatic-modal/AdaptiveModal`.
  • Loading branch information
@dominicstop
dominicstop committed Jun 17, 2023
1 parent fe35017 commit 2620c3f
Show file tree
Hide file tree
Showing 2 changed files with 142 additions and 6 deletions.
4 changes: 2 additions & 2 deletions experiments/swift-programmatic-modal/AdaptiveModal/AdaptiveModalConfig.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,10 +113,10 @@ struct AdaptiveModalConfig {

func sortInterpolationSteps<T>(_ array: [T]) -> [T] {
switch self.snapDirection {
case .bottomToTop, .rightToLeft:
case .bottomToTop, .leftToRight:
return array;

case .topToBottom, .leftToRight:
case .topToBottom, .rightToLeft:
return array.reversed();
};
};
Expand Down
144 changes: 140 additions & 4 deletions experiments/swift-programmatic-modal/Test/AdaptiveModalConfigTestPresets.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,16 @@ import UIKit

enum AdaptiveModalConfigTestPresets: CaseIterable {

static let `default`: Self = .testModalBorderAndShadow01;
static let `default`: Self = .testLeftToRight;

case testModalTransform01;
case testModalBorderAndShadow01;
case testLeftToRight;

case test01;
case test02;
case test03;
case test04;

var config: AdaptiveModalConfig {
switch self {
Expand Down Expand Up @@ -162,6 +164,48 @@ enum AdaptiveModalConfigTestPresets: CaseIterable {
layoutPreset: .fitScreenVertically
)
);

case .testLeftToRight: return AdaptiveModalConfig(
snapPoints: [
// snap point - 1
AdaptiveModalSnapPointConfig(
snapPoint: RNILayout(
horizontalAlignment: .left,
verticalAlignment: .center,
width: RNILayoutValue(
mode: .percent(percentValue: 0.5)
),
height: RNILayoutValue(
mode: .percent(percentValue: 0.65)
),
marginLeft: .constant(15)
),
animationKeyframe: AdaptiveModalAnimationConfig(
)
),
// snap point - 2
AdaptiveModalSnapPointConfig(
snapPoint: RNILayout(
horizontalAlignment: .center,
verticalAlignment: .center,
width: RNILayoutValue(
mode: .stretch
),
height: RNILayoutValue(
mode: .percent(percentValue: 0.85)
),
marginLeft: .constant(20),
marginRight: .constant(20)
),
animationKeyframe: AdaptiveModalAnimationConfig(
)
),
],
snapDirection: .leftToRight,
overshootSnapPoint: AdaptiveModalSnapPointPreset(
layoutPreset: .edgeRight
)
);

case .test01: return AdaptiveModalConfig(
snapPoints: [
Expand Down Expand Up @@ -279,14 +323,16 @@ enum AdaptiveModalConfigTestPresets: CaseIterable {
animationKeyframe: AdaptiveModalAnimationConfig(
//modalOpacity: 1,
modalBackgroundOpacity: 0.9,
modalCornerRadius: 15,
modalShadowOffset: .init(width: 0, height: -2),
modalShadowOpacity: 0.2,
modalShadowRadius: 7,
modalCornerRadius: 25,
modalMaskedCorners: [
.layerMinXMinYCorner,
.layerMaxXMinYCorner
],
modalBackgroundVisualEffect: UIBlurEffect(style: .systemUltraThinMaterial),
modalBackgroundVisualEffectIntensity: 1,

backgroundOpacity: 0,
backgroundVisualEffect: UIBlurEffect(style: .systemUltraThinMaterialDark),
backgroundVisualEffectIntensity: 0
Expand All @@ -312,7 +358,10 @@ enum AdaptiveModalConfigTestPresets: CaseIterable {
//modalOpacity: 0.5,
//modalBackgroundColor: .red,
modalBackgroundOpacity: 0.85,
modalCornerRadius: 15,
modalShadowOffset: .init(width: 2, height: 2),
modalShadowOpacity: 0.2,
modalShadowRadius: 15,
modalCornerRadius: 10,
modalMaskedCorners: [
.layerMinXMinYCorner,
.layerMaxXMinYCorner,
Expand Down Expand Up @@ -342,6 +391,9 @@ enum AdaptiveModalConfigTestPresets: CaseIterable {
),
animationKeyframe: AdaptiveModalAnimationConfig(
modalBackgroundOpacity: 0.8,
modalShadowOffset: .init(width: 2, height: 2),
modalShadowOpacity: 0.3,
modalShadowRadius: 10,
modalCornerRadius: 20,
modalMaskedCorners: [
.layerMinXMinYCorner,
Expand Down Expand Up @@ -371,6 +423,9 @@ enum AdaptiveModalConfigTestPresets: CaseIterable {
),
animationKeyframe: AdaptiveModalAnimationConfig(
modalBackgroundOpacity: 0.83,
modalShadowOffset: .init(width: 0, height: -1),
modalShadowOpacity: 0.4,
modalShadowRadius: 10,
modalCornerRadius: 25,
modalMaskedCorners: [
.layerMinXMinYCorner,
Expand All @@ -391,6 +446,87 @@ enum AdaptiveModalConfigTestPresets: CaseIterable {
layoutPreset: .fitScreen
)
);

case .test04: return AdaptiveModalConfig(
snapPoints: [
// snap point - 1
AdaptiveModalSnapPointConfig(
snapPoint: RNILayout(
horizontalAlignment: .center,
verticalAlignment: .bottom,
width: RNILayoutValue(
mode: .percent(percentValue: 0.8)
),
height: RNILayoutValue(
mode: .percent(percentValue: 0.2)
)
),
animationKeyframe: AdaptiveModalAnimationConfig(
modalShadowOffset: .init(width: 0, height: -2),
modalShadowOpacity: 0.3,
modalShadowRadius: 7,
modalCornerRadius: 10,
modalMaskedCorners: [
.layerMinXMinYCorner,
.layerMaxXMinYCorner
],
backgroundOpacity: 0,
backgroundVisualEffect: UIBlurEffect(style: .regular),
backgroundVisualEffectIntensity: 0
)
),

// snap point - 2
AdaptiveModalSnapPointConfig(
snapPoint: RNILayout(
horizontalAlignment: .center,
verticalAlignment: .bottom,
width: RNILayoutValue(
mode: .percent(percentValue: 0.8)
),
height: RNILayoutValue(
mode: .percent(percentValue: 0.4)
)
),
animationKeyframe: AdaptiveModalAnimationConfig(
modalShadowOffset: .init(width: 1, height: 1),
modalShadowOpacity: 0.4,
modalShadowRadius: 7,
modalCornerRadius: 15,
modalMaskedCorners: [
.layerMinXMinYCorner,
.layerMaxXMinYCorner
],
backgroundOpacity: 0.1
)
),
// snap point - 3
AdaptiveModalSnapPointConfig(
snapPoint: RNILayout(
horizontalAlignment: .center,
verticalAlignment: .bottom,
width: RNILayoutValue(
mode: .percent(percentValue: 0.9)
),
height: RNILayoutValue(
mode: .percent(percentValue: 0.7)
)
),
animationKeyframe: AdaptiveModalAnimationConfig(
modalShadowOffset: .init(width: 2, height: 2),
modalShadowOpacity: 0.3,
modalShadowRadius: 8,
backgroundOpacity: 0.3,
backgroundVisualEffect: UIBlurEffect(style: .regular),
backgroundVisualEffectIntensity: 0.3
)
),
],
snapDirection: .bottomToTop,
overshootSnapPoint: AdaptiveModalSnapPointPreset(
layoutPreset: .fitScreenVertically
)
);
};
};
};
Expand Down

0 comments on commit 2620c3f

Please sign in to comment.