Skip to content

Commit 3a97bad

Browse files
MatiPl01MatiPl01
authored
chore: Pass interpolator config via helper struct (#8165)
## Summary This PR introduces a better way to pass configuration options to interpolator factories for CSS properties config. Instead of passing positional arguments to the factory function, we now can pass a struct which will allow easier extensibility in the future.
1 parent e8916d7 commit 3a97bad

File tree

6 files changed

+108
-96
lines changed

6 files changed

+108
-96
lines changed

‎packages/react-native-reanimated/Common/cpp/reanimated/CSS/configs/interpolators/base/common.h‎

Lines changed: 42 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -32,72 +32,77 @@ const InterpolatorFactoriesRecord FLEX_INTERPOLATORS = {
3232
{"borderTopWidth", value<CSSDouble>(0)},
3333
{"borderWidth", value<CSSDouble>(0)},
3434
{"bottom",
35-
value<CSSLength, CSSKeyword>(RelativeTo::Parent, "height", "auto")},
35+
value<CSSLength, CSSKeyword>("auto", {RelativeTo::Parent, "height"})},
3636
{"boxSizing", value<CSSKeyword>("border-box")},
3737
{"display", value<CSSDisplay>("flex")},
38-
{"end", value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", "auto")},
38+
{"end",
39+
value<CSSLength, CSSKeyword>("auto", {RelativeTo::Parent, "width"})},
3940
{"flex", value<CSSDouble>(0)},
4041
{"flexBasis",
41-
value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", "auto")},
42+
value<CSSLength, CSSKeyword>("auto", {RelativeTo::Parent, "width"})},
4243
{"flexDirection", value<CSSKeyword>("column")},
43-
{"rowGap", value<CSSLength>(RelativeTo::Self, "height", 0)},
44-
{"columnGap", value<CSSLength>(RelativeTo::Self, "width", 0)},
44+
{"rowGap", value<CSSLength>(0, {RelativeTo::Self, "height"})},
45+
{"columnGap", value<CSSLength>(0, {RelativeTo::Self, "width"})},
4546
{"flexGrow", value<CSSDouble>(0)},
4647
{"flexShrink", value<CSSDouble>(0)},
4748
{"flexWrap", value<CSSKeyword>("no-wrap")},
4849
{"height",
49-
value<CSSLength, CSSKeyword>(RelativeTo::Parent, "height", "auto")},
50+
value<CSSLength, CSSKeyword>("auto", {RelativeTo::Parent, "height"})},
5051
{"justifyContent", value<CSSKeyword>("flex-start")},
51-
{"left", value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", "auto")},
52-
{"margin", value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
52+
{"left",
53+
value<CSSLength, CSSKeyword>("auto", {RelativeTo::Parent, "width"})},
54+
{"margin", value<CSSLength, CSSKeyword>(0, {RelativeTo::Parent, "width"})},
5355
{"marginBottom",
54-
value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
55-
{"marginEnd", value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
56+
value<CSSLength, CSSKeyword>(0, {RelativeTo::Parent, "width"})},
57+
{"marginEnd",
58+
value<CSSLength, CSSKeyword>(0, {RelativeTo::Parent, "width"})},
5659
{"marginHorizontal",
57-
value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
60+
value<CSSLength, CSSKeyword>(0, {RelativeTo::Parent, "width"})},
5861
{"marginLeft",
59-
value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
62+
value<CSSLength, CSSKeyword>(0, {RelativeTo::Parent, "width"})},
6063
{"marginRight",
61-
value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
64+
value<CSSLength, CSSKeyword>(0, {RelativeTo::Parent, "width"})},
6265
{"marginStart",
63-
value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
64-
{"marginTop", value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
66+
value<CSSLength, CSSKeyword>(0, {RelativeTo::Parent, "width"})},
67+
{"marginTop",
68+
value<CSSLength, CSSKeyword>(0, {RelativeTo::Parent, "width"})},
6569
{"marginVertical",
66-
value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
70+
value<CSSLength, CSSKeyword>(0, {RelativeTo::Parent, "width"})},
6771
{"maxHeight",
68-
value<CSSLength, CSSKeyword>(RelativeTo::Parent, "height", "auto")},
72+
value<CSSLength, CSSKeyword>("auto", {RelativeTo::Parent, "height"})},
6973
{"maxWidth",
70-
value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", "auto")},
74+
value<CSSLength, CSSKeyword>("auto", {RelativeTo::Parent, "width"})},
7175
{"minHeight",
72-
value<CSSLength, CSSKeyword>(RelativeTo::Parent, "height", "auto")},
76+
value<CSSLength, CSSKeyword>("auto", {RelativeTo::Parent, "height"})},
7377
{"minWidth",
74-
value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", "auto")},
78+
value<CSSLength, CSSKeyword>("auto", {RelativeTo::Parent, "width"})},
7579
{"overflow", value<CSSKeyword>("visible")},
76-
{"padding", value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
80+
{"padding", value<CSSLength, CSSKeyword>(0, {RelativeTo::Parent, "width"})},
7781
{"paddingBottom",
78-
value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
82+
value<CSSLength, CSSKeyword>(0, {RelativeTo::Parent, "width"})},
7983
{"paddingEnd",
80-
value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
84+
value<CSSLength, CSSKeyword>(0, {RelativeTo::Parent, "width"})},
8185
{"paddingHorizontal",
82-
value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
86+
value<CSSLength, CSSKeyword>(0, {RelativeTo::Parent, "width"})},
8387
{"paddingLeft",
84-
value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
88+
value<CSSLength, CSSKeyword>(0, {RelativeTo::Parent, "width"})},
8589
{"paddingRight",
86-
value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
90+
value<CSSLength, CSSKeyword>(0, {RelativeTo::Parent, "width"})},
8791
{"paddingStart",
88-
value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
92+
value<CSSLength, CSSKeyword>(0, {RelativeTo::Parent, "width"})},
8993
{"paddingTop",
90-
value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
94+
value<CSSLength, CSSKeyword>(0, {RelativeTo::Parent, "width"})},
9195
{"paddingVertical",
92-
value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", 0)},
96+
value<CSSLength, CSSKeyword>(0, {RelativeTo::Parent, "width"})},
9397
{"position", value<CSSKeyword>("relative")},
9498
{"right",
95-
value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", "auto")},
99+
value<CSSLength, CSSKeyword>("auto", {RelativeTo::Parent, "width"})},
96100
{"start",
97-
value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", "auto")},
98-
{"top", value<CSSLength, CSSKeyword>(RelativeTo::Parent, "height", "auto")},
101+
value<CSSLength, CSSKeyword>("auto", {RelativeTo::Parent, "width"})},
102+
{"top",
103+
value<CSSLength, CSSKeyword>("auto", {RelativeTo::Parent, "height"})},
99104
{"width",
100-
value<CSSLength, CSSKeyword>(RelativeTo::Parent, "width", "auto")},
105+
value<CSSLength, CSSKeyword>("auto", {RelativeTo::Parent, "width"})},
101106
{"zIndex", value<CSSInteger>(0)},
102107
{"direction", value<CSSKeyword>("inherit")}};
103108

@@ -111,8 +116,8 @@ const InterpolatorFactoriesRecord SHADOW_INTERPOLATORS_IOS = {
111116
const InterpolatorFactoriesRecord TRANSFORMS_INTERPOLATORS = {
112117
{"transformOrigin",
113118
array(
114-
{value<CSSLength>(RelativeTo::Self, "width", "50%"),
115-
value<CSSLength>(RelativeTo::Self, "height", "50%"),
119+
{value<CSSLength>("50%", {RelativeTo::Self, "width"}),
120+
value<CSSLength>("50%", {RelativeTo::Self, "height"}),
116121
value<CSSDouble>(0)})},
117122
{"transform",
118123
transforms(
@@ -126,9 +131,9 @@ const InterpolatorFactoriesRecord TRANSFORMS_INTERPOLATORS = {
126131
{"scaleX", transformOp<ScaleXOperation>(1)},
127132
{"scaleY", transformOp<ScaleYOperation>(1)},
128133
{"translateX",
129-
transformOp<TranslateXOperation>(RelativeTo::Self, "width", 0)},
134+
transformOp<TranslateXOperation>(0, {RelativeTo::Self, "width"})},
130135
{"translateY",
131-
transformOp<TranslateYOperation>(RelativeTo::Self, "height", 0)},
136+
transformOp<TranslateYOperation>(0, {RelativeTo::Self, "height"})},
132137
{"skewX", transformOp<SkewXOperation>("0deg")},
133138
{"skewY", transformOp<SkewYOperation>("0deg")},
134139
{"matrix",

‎packages/react-native-reanimated/Common/cpp/reanimated/CSS/configs/interpolators/base/view.h‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -18,35 +18,38 @@ const InterpolatorFactoriesRecord VIEW_INTERPOLATORS = mergeInterpolators(
1818
{"borderBlockStartColor", value<CSSColor>(BLACK)},
1919
{"borderBottomColor", value<CSSColor>(BLACK)},
2020
{"borderBottomEndRadius",
21-
value<CSSLength>(RelativeTo::Self, "width", 0)},
21+
value<CSSLength>(0, {RelativeTo::Self, "width"})},
2222
{"borderBottomLeftRadius",
23-
value<CSSLength>(RelativeTo::Self, "width", 0)},
23+
value<CSSLength>(0, {RelativeTo::Self, "width"})},
2424
{"borderBottomRightRadius",
25-
value<CSSLength>(RelativeTo::Self, "width", 0)},
25+
value<CSSLength>(0, {RelativeTo::Self, "width"})},
2626
{"borderBottomStartRadius",
27-
value<CSSLength>(RelativeTo::Self, "width", 0)},
27+
value<CSSLength>(0, {RelativeTo::Self, "width"})},
2828
{"borderColor", value<CSSColor>(BLACK)},
2929
{"borderCurve", value<CSSKeyword>("circular")}, // TODO
3030
{"borderEndColor", value<CSSColor>(BLACK)},
31-
{"borderEndEndRadius", value<CSSLength>(RelativeTo::Self, "width", 0)},
31+
{"borderEndEndRadius",
32+
value<CSSLength>(0, {RelativeTo::Self, "width"})},
3233
{"borderEndStartRadius",
33-
value<CSSLength>(RelativeTo::Self, "width", 0)},
34+
value<CSSLength>(0, {RelativeTo::Self, "width"})},
3435
{"borderLeftColor", value<CSSColor>(BLACK)},
35-
{"borderRadius", value<CSSLength>(RelativeTo::Self, "width", 0)},
36+
{"borderRadius", value<CSSLength>(0, {RelativeTo::Self, "width"})},
3637
{"borderRightColor", value<CSSColor>(BLACK)},
3738
{"borderStartColor", value<CSSColor>(BLACK)},
3839
{"borderStartEndRadius",
39-
value<CSSLength>(RelativeTo::Self, "width", 0)},
40+
value<CSSLength>(0, {RelativeTo::Self, "width"})},
4041
{"borderStartStartRadius",
41-
value<CSSLength>(RelativeTo::Self, "width", 0)},
42+
value<CSSLength>(0, {RelativeTo::Self, "width"})},
4243
{"borderStyle", value<CSSKeyword>("solid")},
4344
{"borderTopColor", value<CSSColor>(BLACK)},
44-
{"borderTopEndRadius", value<CSSLength>(RelativeTo::Self, "width", 0)},
45-
{"borderTopLeftRadius", value<CSSLength>(RelativeTo::Self, "width", 0)},
45+
{"borderTopEndRadius",
46+
value<CSSLength>(0, {RelativeTo::Self, "width"})},
47+
{"borderTopLeftRadius",
48+
value<CSSLength>(0, {RelativeTo::Self, "width"})},
4649
{"borderTopRightRadius",
47-
value<CSSLength>(RelativeTo::Self, "width", 0)},
50+
value<CSSLength>(0, {RelativeTo::Self, "width"})},
4851
{"borderTopStartRadius",
49-
value<CSSLength>(RelativeTo::Self, "width", 0)},
52+
value<CSSLength>(0, {RelativeTo::Self, "width"})},
5053
{"outlineColor", value<CSSColor>(BLACK)},
5154
{"outlineOffset", value<CSSDouble>(0)},
5255
{"outlineStyle", value<CSSKeyword>("solid")},

‎packages/react-native-reanimated/Common/cpp/reanimated/CSS/interpolation/InterpolatorFactory.h‎

Lines changed: 15 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
11
#pragma once
22

33
#include <reanimated/CSS/interpolation/PropertyInterpolator.h>
4-
5-
#include <reanimated/CSS/interpolation/values/ResolvableValueInterpolator.h>
6-
#include <reanimated/CSS/interpolation/values/ValueInterpolator.h>
7-
4+
#include <reanimated/CSS/interpolation/configs.h>
85
#include <reanimated/CSS/interpolation/groups/ArrayPropertiesInterpolator.h>
96
#include <reanimated/CSS/interpolation/groups/RecordPropertiesInterpolator.h>
10-
117
#include <reanimated/CSS/interpolation/transforms/TransformOperation.h>
128
#include <reanimated/CSS/interpolation/transforms/TransformOperationInterpolator.h>
139
#include <reanimated/CSS/interpolation/transforms/TransformsStyleInterpolator.h>
10+
#include <reanimated/CSS/interpolation/values/ResolvableValueInterpolator.h>
11+
#include <reanimated/CSS/interpolation/values/ValueInterpolator.h>
1412

1513
#include <memory>
1614
#include <string>
1715
#include <unordered_map>
16+
#include <utility>
1817

1918
namespace reanimated::css {
2019

@@ -53,13 +52,11 @@ class ResolvableValueInterpolatorFactory : public PropertyInterpolatorFactory {
5352
public:
5453
template <typename TValue>
5554
explicit ResolvableValueInterpolatorFactory(
56-
RelativeTo relativeTo,
57-
const std::string &relativeProperty,
58-
const TValue &defaultValue)
55+
const TValue &defaultValue,
56+
ResolvableValueInterpolatorConfig config)
5957
: PropertyInterpolatorFactory(),
60-
relativeTo_(relativeTo),
61-
relativeProperty_(relativeProperty),
62-
defaultValue_(defaultValue) {}
58+
defaultValue_(defaultValue),
59+
config_(std::move(config)) {}
6360

6461
const CSSValue &getDefaultValue() const override {
6562
return defaultValue_;
@@ -70,17 +67,12 @@ class ResolvableValueInterpolatorFactory : public PropertyInterpolatorFactory {
7067
const std::shared_ptr<ViewStylesRepository> &viewStylesRepository)
7168
const override {
7269
return std::make_shared<ResolvableValueInterpolator<AllowedTypes...>>(
73-
propertyPath,
74-
defaultValue_,
75-
viewStylesRepository,
76-
relativeTo_,
77-
relativeProperty_);
70+
propertyPath, defaultValue_, viewStylesRepository, config_);
7871
}
7972

8073
private:
81-
const RelativeTo relativeTo_;
82-
const std::string relativeProperty_;
8374
const CSSValueVariant<AllowedTypes...> defaultValue_;
75+
ResolvableValueInterpolatorConfig config_;
8476
};
8577

8678
/**
@@ -95,17 +87,12 @@ auto value(const auto &defaultValue) -> std::enable_if_t<
9587
}
9688

9789
template <typename... AllowedTypes>
98-
auto value(
99-
RelativeTo relativeTo,
100-
const std::string &relativeProperty,
101-
const auto &defaultValue)
90+
auto value(const auto &defaultValue, ResolvableValueInterpolatorConfig config)
10291
-> std::enable_if_t<
10392
(std::is_constructible_v<AllowedTypes, decltype(defaultValue)> || ...),
10493
std::shared_ptr<PropertyInterpolatorFactory>> {
10594
return std::make_shared<ResolvableValueInterpolatorFactory<AllowedTypes...>>(
106-
relativeTo,
107-
relativeProperty,
108-
CSSValueVariant<AllowedTypes...>(defaultValue));
95+
CSSValueVariant<AllowedTypes...>(defaultValue), std::move(config));
10996
}
11097

11198
/**
@@ -122,16 +109,15 @@ auto transformOp(const auto &defaultValue) -> std::enable_if_t<
122109

123110
template <typename TOperation>
124111
auto transformOp(
125-
RelativeTo relativeTo,
126-
const std::string &relativeProperty,
127-
const auto &defaultValue)
112+
const auto &defaultValue,
113+
ResolvableValueInterpolatorConfig config)
128114
-> std::enable_if_t<
129115
std::is_base_of_v<TransformOperation, TOperation> &&
130116
std::is_constructible_v<TOperation, decltype(defaultValue)> &&
131117
ResolvableOperation<TOperation>,
132118
std::shared_ptr<TransformInterpolator>> {
133119
return std::make_shared<TransformOperationInterpolator<TOperation>>(
134-
std::make_shared<TOperation>(defaultValue), relativeTo, relativeProperty);
120+
std::make_shared<TOperation>(defaultValue), std::move(config));
135121
}
136122

137123
/**

‎packages/react-native-reanimated/Common/cpp/reanimated/CSS/interpolation/configs.h‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
#pragma once
2+
3+
#include <reanimated/CSS/common/values/CSSLength.h>
4+
5+
#include <string>
6+
#include <utility>
7+
8+
namespace reanimated::css {
9+
10+
struct ResolvableValueInterpolatorConfig {
11+
RelativeTo relativeTo;
12+
std::string relativeProperty;
13+
14+
ResolvableValueInterpolatorConfig(
15+
RelativeTo relativeTo,
16+
std::string relativeProperty)
17+
: relativeTo(relativeTo), relativeProperty(std::move(relativeProperty)) {}
18+
19+
ResolvableValueInterpolatorConfig() = default;
20+
};
21+
22+
} // namespace reanimated::css

‎packages/react-native-reanimated/Common/cpp/reanimated/CSS/interpolation/transforms/TransformOperationInterpolator.h‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
#pragma once
22

33
#include <reanimated/CSS/common/values/CSSValue.h>
4+
#include <reanimated/CSS/interpolation/configs.h>
45
#include <reanimated/CSS/interpolation/transforms/TransformInterpolator.h>
56
#include <reanimated/CSS/interpolation/transforms/operations/matrix.h>
67
#include <reanimated/CSS/interpolation/transforms/operations/perspective.h>
78

89
#include <memory>
910
#include <string>
11+
#include <utility>
1012

1113
namespace reanimated::css {
1214

@@ -78,11 +80,9 @@ class TransformOperationInterpolator<TOperation>
7880
public:
7981
TransformOperationInterpolator(
8082
const std::shared_ptr<TOperation> &defaultOperation,
81-
RelativeTo relativeTo,
82-
const std::string &relativeProperty)
83+
ResolvableValueInterpolatorConfig config)
8384
: TransformInterpolatorBase<TOperation>(defaultOperation),
84-
relativeTo_(relativeTo),
85-
relativeProperty_(relativeProperty) {}
85+
config_(std::move(config)) {}
8686

8787
TOperation interpolate(
8888
double progress,
@@ -107,16 +107,15 @@ class TransformOperationInterpolator<TOperation>
107107
}
108108

109109
private:
110-
const RelativeTo relativeTo_;
111-
const std::string relativeProperty_;
110+
const ResolvableValueInterpolatorConfig config_;
112111

113112
CSSResolvableValueInterpolationContext getResolvableValueContext(
114113
const TransformInterpolatorUpdateContext &context) const {
115114
return {
116115
.node = context.node,
117116
.viewStylesRepository = context.viewStylesRepository,
118-
.relativeProperty = relativeProperty_,
119-
.relativeTo = relativeTo_,
117+
.relativeProperty = config_.relativeProperty,
118+
.relativeTo = config_.relativeTo,
120119
};
121120
}
122121
};

0 commit comments

Comments
 (0)