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

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}

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<BoxShadowPrimitive>,
-  experimental_filter?: $ReadOnlyArray<FilterPrimitive>,
+  experimental_filter?: $ReadOnlyArray<FilterFunction>,
   experimental_mixBlendMode?: ____BlendMode_Internal,
 }>;
 

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<FilterPrimitive>,
+  expected: Array<FilterFunction>,
 ): 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<FilterPrimitive>,
+  expected: Array<FilterFunction>,
 ): 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};

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<FilterPrimitive> | string,
+  filter: $ReadOnlyArray<FilterFunction> | string,
 ): $ReadOnlyArray<ParsedFilter> {
   let result: Array<ParsedFilter> = [];
   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);

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<BoxShadowPrimitive>,
-  experimental_filter?: $ReadOnlyArray<FilterPrimitive>,
+  experimental_filter?: $ReadOnlyArray<FilterFunction>,
   experimental_mixBlendMode?: ____BlendMode_Internal,
 }>;
 export type ____ViewStyle_Internal = $ReadOnly<{
@@ -8062,7 +8062,7 @@ type ParsedDropShadow = {
   color?: ColorValue,
 };
 declare export default function processFilter(
-  filter: $ReadOnlyArray<FilterPrimitive> | string
+  filter: $ReadOnlyArray<FilterFunction> | string
 ): $ReadOnlyArray<ParsedFilter>;
 "
 `;

packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.h

@@ -61,7 +61,7 @@ class BaseViewProps : public YogaStylableProps, public AccessibilityProps {
   std::vector<BoxShadow> boxShadow{};
 
   // Filter
-  std::vector<FilterPrimitive> filter{};
+  std::vector<FilterFunction> filter{};
 
   // MixBlendMode
   BlendMode mixBlendMode;

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<FilterPrimitive>& result) {
+    std::vector<FilterFunction>& result) {
   react_native_expect(value.hasType<std::vector<RawValue>>());
   if (!value.hasType<std::vector<RawValue>>()) {
     result = {};
     return;
   }
 
-  std::vector<FilterPrimitive> filter{};
+  std::vector<FilterFunction> filter{};
   auto rawFilter = static_cast<std::vector<RawValue>>(value);
   for (const auto& rawFilterPrimitive : rawFilter) {
     bool isMap =
@@ -1054,14 +1054,14 @@ inline void fromRawValue(
     auto rawFilterPrimitiveMap =
         static_cast<std::unordered_map<std::string, RawValue>>(
             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;
     }

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;

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<FilterPrimitive> | undefined;
+    experimental_filter?: ReadonlyArray<FilterFunction> | undefined;
     experimental_mixBlendMode?: BlendMode | undefined;
   }
 }