From c82edec62e2149a746627c6b474d4d413f545128 Mon Sep 17 00:00:00 2001 From: Nick Gerleman Date: Wed, 17 Jul 2024 23:22:45 -0700 Subject: [PATCH] FilterPrimitive -> FilterFunction (#45505) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/45505 These are filter functions, not primitives. Change the name to be more accurate and easier to understand. https://drafts.fxtf.org/filter-effects/#filter-functions changelog: [internal] Reviewed By: joevilches Differential Revision: D59793167 fbshipit-source-id: a0ab9bfbcab0c1e17d3094ce6ada44040aaa6afb --- .../Libraries/StyleSheet/StyleSheetTypes.d.ts | 2 +- .../Libraries/StyleSheet/StyleSheetTypes.js | 4 ++-- .../StyleSheet/__tests__/processFilter-test.js | 8 ++++---- .../Libraries/StyleSheet/processFilter.js | 14 +++++++------- .../__snapshots__/public-api-test.js.snap | 6 +++--- .../react/renderer/components/view/BaseViewProps.h | 2 +- .../react/renderer/components/view/conversions.h | 14 +++++++------- .../ReactCommon/react/renderer/graphics/Filter.h | 4 ++-- packages/react-native/types/experimental.d.ts | 4 ++-- 9 files changed, 29 insertions(+), 29 deletions(-) diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts index 78a9e732c48..49b96d5453d 100644 --- a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts +++ b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts @@ -227,7 +227,7 @@ export interface TransformsStyle { translateY?: AnimatableNumericValue | undefined; } -export type FilterPrimitive = +export type FilterFunction = | {brightness: number | string} | {blur: number | string} | {contrast: number | string} diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js index 561cc30cdfa..0f00224adff 100644 --- a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js +++ b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js @@ -690,7 +690,7 @@ export type ____ShadowStyle_Internal = $ReadOnly<{ ...____ShadowStyle_InternalOverrides, }>; -export type FilterPrimitive = +export type FilterFunction = | {brightness: number | string} | {blur: number | string} | {contrast: number | string} @@ -779,7 +779,7 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{ pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only', cursor?: CursorValue, experimental_boxShadow?: $ReadOnlyArray, - experimental_filter?: $ReadOnlyArray, + experimental_filter?: $ReadOnlyArray, experimental_mixBlendMode?: ____BlendMode_Internal, }>; diff --git a/packages/react-native/Libraries/StyleSheet/__tests__/processFilter-test.js b/packages/react-native/Libraries/StyleSheet/__tests__/processFilter-test.js index 1f1357cc3f0..c1d2bf4128b 100644 --- a/packages/react-native/Libraries/StyleSheet/__tests__/processFilter-test.js +++ b/packages/react-native/Libraries/StyleSheet/__tests__/processFilter-test.js @@ -11,7 +11,7 @@ 'use strict'; -import type {FilterPrimitive} from '../StyleSheetTypes'; +import type {FilterFunction} from '../StyleSheetTypes'; import processColor from '../processColor'; @@ -165,7 +165,7 @@ function testStandardFilter(filter: string): void { function testNumericFilter( filter: string, value: number, - expected: Array, + expected: Array, ): void { const filterObject = createFilterPrimitive(filter, value); const filterString = filter + '(' + value.toString() + ')'; @@ -182,7 +182,7 @@ function testUnitFilter( filter: string, value: number, unit: string, - expected: Array, + expected: Array, ): void { const unitAmount = value + unit; const filterObject = createFilterPrimitive(filter, unitAmount); @@ -199,7 +199,7 @@ function testUnitFilter( function createFilterPrimitive( filter: string, value: number | string, -): FilterPrimitive { +): FilterFunction { switch (filter) { case 'brightness': return {brightness: value}; diff --git a/packages/react-native/Libraries/StyleSheet/processFilter.js b/packages/react-native/Libraries/StyleSheet/processFilter.js index 45328eb9335..1c2d3a0ef9c 100644 --- a/packages/react-native/Libraries/StyleSheet/processFilter.js +++ b/packages/react-native/Libraries/StyleSheet/processFilter.js @@ -12,7 +12,7 @@ 'use strict'; import type {ColorValue} from './StyleSheet'; -import type {DropShadowPrimitive, FilterPrimitive} from './StyleSheetTypes'; +import type {DropShadowPrimitive, FilterFunction} from './StyleSheetTypes'; import processColor from './processColor'; @@ -36,7 +36,7 @@ type ParsedDropShadow = { }; export default function processFilter( - filter: $ReadOnlyArray | string, + filter: $ReadOnlyArray | string, ): $ReadOnlyArray { let result: Array = []; if (typeof filter === 'string') { @@ -63,11 +63,11 @@ export default function processFilter( const amount = _getFilterAmount(camelizedName, matches[2]); if (amount != null) { - const filterPrimitive = {}; + const filterFunction = {}; // $FlowFixMe The key will be the correct one but flow can't see that. - filterPrimitive[camelizedName] = amount; + filterFunction[camelizedName] = amount; // $FlowFixMe The key will be the correct one but flow can't see that. - result.push(filterPrimitive); + result.push(filterFunction); } else { // If any primitive is invalid then apply none of the filters. This is how // web works and makes it clear that something is wrong becuase no @@ -77,8 +77,8 @@ export default function processFilter( } } } else { - for (const filterPrimitive of filter) { - const [filterName, filterValue] = Object.entries(filterPrimitive)[0]; + for (const filterFunction of filter) { + const [filterName, filterValue] = Object.entries(filterFunction)[0]; if (filterName === 'dropShadow') { // $FlowFixMe const dropShadow = parseDropShadow(filterValue); diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap index 0d106b5adff..181990cd203 100644 --- a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap +++ b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap @@ -7683,7 +7683,7 @@ export type ____ShadowStyle_Internal = $ReadOnly<{ ...____ShadowStyle_InternalCore, ...____ShadowStyle_InternalOverrides, }>; -export type FilterPrimitive = +export type FilterFunction = | { brightness: number | string } | { blur: number | string } | { contrast: number | string } @@ -7768,7 +7768,7 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{ pointerEvents?: \\"auto\\" | \\"none\\" | \\"box-none\\" | \\"box-only\\", cursor?: CursorValue, experimental_boxShadow?: $ReadOnlyArray, - experimental_filter?: $ReadOnlyArray, + experimental_filter?: $ReadOnlyArray, experimental_mixBlendMode?: ____BlendMode_Internal, }>; export type ____ViewStyle_Internal = $ReadOnly<{ @@ -8062,7 +8062,7 @@ type ParsedDropShadow = { color?: ColorValue, }; declare export default function processFilter( - filter: $ReadOnlyArray | string + filter: $ReadOnlyArray | string ): $ReadOnlyArray; " `; diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.h b/packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.h index 4d79b669436..ff5c4971075 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.h +++ b/packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.h @@ -61,7 +61,7 @@ class BaseViewProps : public YogaStylableProps, public AccessibilityProps { std::vector boxShadow{}; // Filter - std::vector filter{}; + std::vector filter{}; // MixBlendMode BlendMode mixBlendMode; diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/conversions.h b/packages/react-native/ReactCommon/react/renderer/components/view/conversions.h index 1fd24de76c0..efa00946208 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/conversions.h +++ b/packages/react-native/ReactCommon/react/renderer/components/view/conversions.h @@ -1031,14 +1031,14 @@ inline void fromRawValue( inline void fromRawValue( const PropsParserContext& /*context*/, const RawValue& value, - std::vector& result) { + std::vector& result) { react_native_expect(value.hasType>()); if (!value.hasType>()) { result = {}; return; } - std::vector filter{}; + std::vector filter{}; auto rawFilter = static_cast>(value); for (const auto& rawFilterPrimitive : rawFilter) { bool isMap = @@ -1054,14 +1054,14 @@ inline void fromRawValue( auto rawFilterPrimitiveMap = static_cast>( rawFilterPrimitive); - FilterPrimitive filterPrimitive{}; + FilterFunction filterFunction{}; try { - filterPrimitive.type = + filterFunction.type = filterTypeFromString(rawFilterPrimitiveMap.begin()->first); - filterPrimitive.amount = (float)rawFilterPrimitiveMap.begin()->second; - filter.push_back(filterPrimitive); + filterFunction.amount = (float)rawFilterPrimitiveMap.begin()->second; + filter.push_back(std::move(filterFunction)); } catch (const std::exception& e) { - LOG(ERROR) << "Could not parse FilterPrimitive: " << e.what(); + LOG(ERROR) << "Could not parse FilterFunction: " << e.what(); result = {}; return; } diff --git a/packages/react-native/ReactCommon/react/renderer/graphics/Filter.h b/packages/react-native/ReactCommon/react/renderer/graphics/Filter.h index c4a7f18b068..967afc843ad 100644 --- a/packages/react-native/ReactCommon/react/renderer/graphics/Filter.h +++ b/packages/react-native/ReactCommon/react/renderer/graphics/Filter.h @@ -28,8 +28,8 @@ enum class FilterType { DropShadow }; -struct FilterPrimitive { - bool operator==(const FilterPrimitive& other) const = default; +struct FilterFunction { + bool operator==(const FilterFunction& other) const = default; FilterType type; Float amount; diff --git a/packages/react-native/types/experimental.d.ts b/packages/react-native/types/experimental.d.ts index ab0fafec57d..deea3034b45 100644 --- a/packages/react-native/types/experimental.d.ts +++ b/packages/react-native/types/experimental.d.ts @@ -36,7 +36,7 @@ import { BlendMode, BoxShadowPrimitive, DimensionValue, - FilterPrimitive, + FilterFunction, } from 'react-native/Libraries/StyleSheet/StyleSheetTypes'; export {}; @@ -150,7 +150,7 @@ declare module '.' { export interface ViewStyle { experimental_boxShadow?: BoxShadowPrimitive | undefined; - experimental_filter?: ReadonlyArray | undefined; + experimental_filter?: ReadonlyArray | undefined; experimental_mixBlendMode?: BlendMode | undefined; } }