refactor: small changes to filters (#2368)

# Summary

This PR contains two small refactors of filters:
* extract common props on ViewManagers on Android
* remove unnecessary extract in `FeOffset` filter

android/src/main/java/com/horcrux/svg/RenderableViewManager.java

@@ -684,11 +684,6 @@ class RenderableViewManager<T extends RenderableView> extends VirtualViewManager
     super(svgclass);
   }
 
-  @ReactProp(name = "filter")
-  public void setFilter(T node, String filter) {
-    node.setFilter(filter);
-  }
-
   static class GroupViewManagerAbstract<U extends GroupView> extends RenderableViewManager<U> {
     GroupViewManagerAbstract(SVGClass svgClass) {
       super(svgClass);
@@ -1307,201 +1302,6 @@ class RenderableViewManager<T extends RenderableView> extends VirtualViewManager
     }
   }
 
-  static class FilterManager extends VirtualViewManager<FilterView>
-      implements RNSVGFilterManagerInterface<FilterView> {
-    FilterManager() {
-      super(SVGClass.RNSVGFilter);
-      mDelegate = new RNSVGFilterManagerDelegate(this);
-    }
-
-    public static final String REACT_CLASS = "RNSVGFilter";
-
-    @ReactProp(name = "x")
-    public void setX(FilterView node, Dynamic x) {
-      node.setX(x);
-    }
-
-    @ReactProp(name = "y")
-    public void setY(FilterView node, Dynamic y) {
-      node.setY(y);
-    }
-
-    @ReactProp(name = "width")
-    public void setWidth(FilterView node, Dynamic width) {
-      node.setWidth(width);
-    }
-
-    @ReactProp(name = "height")
-    public void setHeight(FilterView node, Dynamic height) {
-      node.setHeight(height);
-    }
-
-    @ReactProp(name = "filterUnits")
-    public void setFilterUnits(FilterView node, String filterUnits) {
-      node.setFilterUnits(filterUnits);
-    }
-
-    @ReactProp(name = "primitiveUnits")
-    public void setPrimitiveUnits(FilterView node, String primitiveUnits) {
-      node.setPrimitiveUnits(primitiveUnits);
-    }
-  }
-
-  static class FeColorMatrixManager extends VirtualViewManager<FeColorMatrixView>
-      implements RNSVGFeColorMatrixManagerInterface<FeColorMatrixView> {
-    FeColorMatrixManager() {
-      super(SVGClass.RNSVGFeColorMatrix);
-      mDelegate = new RNSVGFeColorMatrixManagerDelegate(this);
-    }
-
-    public static final String REACT_CLASS = "RNSVGFeColorMatrix";
-
-    @ReactProp(name = "x")
-    public void setX(FeColorMatrixView node, Dynamic x) {
-      node.setX(x);
-    }
-
-    @ReactProp(name = "y")
-    public void setY(FeColorMatrixView node, Dynamic y) {
-      node.setY(y);
-    }
-
-    @ReactProp(name = "width")
-    public void setWidth(FeColorMatrixView node, Dynamic width) {
-      node.setWidth(width);
-    }
-
-    @ReactProp(name = "height")
-    public void setHeight(FeColorMatrixView node, Dynamic height) {
-      node.setHeight(height);
-    }
-
-    @ReactProp(name = "result")
-    public void setResult(FeColorMatrixView node, String result) {
-      node.setResult(result);
-    }
-
-    @ReactProp(name = "in1")
-    public void setIn1(FeColorMatrixView node, String in1) {
-      node.setIn1(in1);
-    }
-
-    @ReactProp(name = "type")
-    public void setType(FeColorMatrixView node, String type) {
-      node.setType(type);
-    }
-
-    @ReactProp(name = "values")
-    public void setValues(FeColorMatrixView node, @Nullable ReadableArray values) {
-      node.setValues(values);
-    }
-  }
-
-  static class FeGaussianBlurManager extends VirtualViewManager<FeGaussianBlurView>
-      implements RNSVGFeGaussianBlurManagerInterface<FeGaussianBlurView> {
-    FeGaussianBlurManager() {
-      super(SVGClass.RNSVGFeGaussianBlur);
-      mDelegate = new RNSVGFeGaussianBlurManagerDelegate(this);
-    }
-
-    public static final String REACT_CLASS = "RNSVGFeGaussianBlur";
-
-    @ReactProp(name = "x")
-    public void setX(FeGaussianBlurView node, Dynamic x) {
-      node.setX(x);
-    }
-
-    @ReactProp(name = "y")
-    public void setY(FeGaussianBlurView node, Dynamic y) {
-      node.setY(y);
-    }
-
-    @ReactProp(name = "width")
-    public void setWidth(FeGaussianBlurView node, Dynamic width) {
-      node.setWidth(width);
-    }
-
-    @ReactProp(name = "height")
-    public void setHeight(FeGaussianBlurView node, Dynamic height) {
-      node.setHeight(height);
-    }
-
-    @ReactProp(name = "result")
-    public void setResult(FeGaussianBlurView node, String result) {
-      node.setResult(result);
-    }
-
-    @ReactProp(name = "in1")
-    public void setIn1(FeGaussianBlurView node, String in1) {
-      node.setIn1(in1);
-    }
-
-    @ReactProp(name = "stdDeviationX")
-    public void setStdDeviationX(FeGaussianBlurView node, float stdDeviationX) {
-      node.setStdDeviationX(stdDeviationX);
-    }
-
-    @ReactProp(name = "stdDeviationY")
-    public void setStdDeviationY(FeGaussianBlurView node, float stdDeviationY) {
-      node.setStdDeviationY(stdDeviationY);
-    }
-
-    @ReactProp(name = "values")
-    public void setEdgeMode(FeGaussianBlurView node, String edgeMode) {
-      node.setEdgeMode(edgeMode);
-    }
-  }
-
-  static class FeOffsetManager extends VirtualViewManager<FeOffsetView>
-      implements RNSVGFeOffsetManagerInterface<FeOffsetView> {
-    FeOffsetManager() {
-      super(SVGClass.RNSVGFeOffset);
-      mDelegate = new RNSVGFeOffsetManagerDelegate(this);
-    }
-
-    public static final String REACT_CLASS = "RNSVGFeOffset";
-
-    @ReactProp(name = "x")
-    public void setX(FeOffsetView node, Dynamic x) {
-      node.setX(x);
-    }
-
-    @ReactProp(name = "y")
-    public void setY(FeOffsetView node, Dynamic y) {
-      node.setY(y);
-    }
-
-    @ReactProp(name = "width")
-    public void setWidth(FeOffsetView node, Dynamic width) {
-      node.setWidth(width);
-    }
-
-    @ReactProp(name = "height")
-    public void setHeight(FeOffsetView node, Dynamic height) {
-      node.setHeight(height);
-    }
-
-    @ReactProp(name = "result")
-    public void setResult(FeOffsetView node, String result) {
-      node.setResult(result);
-    }
-
-    @ReactProp(name = "in1")
-    public void setIn1(FeOffsetView node, String in1) {
-      node.setIn1(in1);
-    }
-
-    @ReactProp(name = "dx")
-    public void setDx(FeOffsetView node, Dynamic dx) {
-      node.setDx(dx);
-    }
-
-    @ReactProp(name = "dy")
-    public void setDy(FeOffsetView node, Dynamic dy) {
-      node.setDy(dy);
-    }
-  }
-
   static class ForeignObjectManager extends GroupViewManagerAbstract<ForeignObjectView>
       implements RNSVGForeignObjectManagerInterface<ForeignObjectView> {
     ForeignObjectManager() {
@@ -1704,6 +1504,162 @@ class RenderableViewManager<T extends RenderableView> extends VirtualViewManager
     }
   }
 
+  static class FilterManager extends VirtualViewManager<FilterView>
+      implements RNSVGFilterManagerInterface<FilterView> {
+    FilterManager() {
+      super(SVGClass.RNSVGFilter);
+      mDelegate = new RNSVGFilterManagerDelegate(this);
+    }
+
+    public static final String REACT_CLASS = "RNSVGFilter";
+
+    @ReactProp(name = "x")
+    public void setX(FilterView node, Dynamic x) {
+      node.setX(x);
+    }
+
+    @ReactProp(name = "y")
+    public void setY(FilterView node, Dynamic y) {
+      node.setY(y);
+    }
+
+    @ReactProp(name = "width")
+    public void setWidth(FilterView node, Dynamic width) {
+      node.setWidth(width);
+    }
+
+    @ReactProp(name = "height")
+    public void setHeight(FilterView node, Dynamic height) {
+      node.setHeight(height);
+    }
+
+    @ReactProp(name = "filterUnits")
+    public void setFilterUnits(FilterView node, String filterUnits) {
+      node.setFilterUnits(filterUnits);
+    }
+
+    @ReactProp(name = "primitiveUnits")
+    public void setPrimitiveUnits(FilterView node, String primitiveUnits) {
+      node.setPrimitiveUnits(primitiveUnits);
+    }
+  }
+
+  static class FilterPrimitiveManager<T extends FilterPrimitiveView> extends VirtualViewManager<T> {
+    protected FilterPrimitiveManager(SVGClass svgclass) {
+      super(svgclass);
+    }
+
+    @ReactProp(name = "x")
+    public void setX(T node, Dynamic x) {
+      node.setX(x);
+    }
+
+    @ReactProp(name = "y")
+    public void setY(T node, Dynamic y) {
+      node.setY(y);
+    }
+
+    @ReactProp(name = "width")
+    public void setWidth(T node, Dynamic width) {
+      node.setWidth(width);
+    }
+
+    @ReactProp(name = "height")
+    public void setHeight(T node, Dynamic height) {
+      node.setHeight(height);
+    }
+
+    @ReactProp(name = "result")
+    public void setResult(T node, String result) {
+      node.setResult(result);
+    }
+  }
+
+  static class FeColorMatrixManager extends FilterPrimitiveManager<FeColorMatrixView>
+      implements RNSVGFeColorMatrixManagerInterface<FeColorMatrixView> {
+    FeColorMatrixManager() {
+      super(SVGClass.RNSVGFeColorMatrix);
+      mDelegate = new RNSVGFeColorMatrixManagerDelegate(this);
+    }
+
+    public static final String REACT_CLASS = "RNSVGFeColorMatrix";
+
+    @ReactProp(name = "in1")
+    public void setIn1(FeColorMatrixView node, String in1) {
+      node.setIn1(in1);
+    }
+
+    @ReactProp(name = "type")
+    public void setType(FeColorMatrixView node, String type) {
+      node.setType(type);
+    }
+
+    @ReactProp(name = "values")
+    public void setValues(FeColorMatrixView node, @Nullable ReadableArray values) {
+      node.setValues(values);
+    }
+  }
+
+  static class FeGaussianBlurManager extends FilterPrimitiveManager<FeGaussianBlurView>
+      implements RNSVGFeGaussianBlurManagerInterface<FeGaussianBlurView> {
+    FeGaussianBlurManager() {
+      super(SVGClass.RNSVGFeGaussianBlur);
+      mDelegate = new RNSVGFeGaussianBlurManagerDelegate(this);
+    }
+
+    public static final String REACT_CLASS = "RNSVGFeGaussianBlur";
+
+    @ReactProp(name = "in1")
+    public void setIn1(FeGaussianBlurView node, String in1) {
+      node.setIn1(in1);
+    }
+
+    @ReactProp(name = "stdDeviationX")
+    public void setStdDeviationX(FeGaussianBlurView node, float stdDeviationX) {
+      node.setStdDeviationX(stdDeviationX);
+    }
+
+    @ReactProp(name = "stdDeviationY")
+    public void setStdDeviationY(FeGaussianBlurView node, float stdDeviationY) {
+      node.setStdDeviationY(stdDeviationY);
+    }
+
+    @ReactProp(name = "values")
+    public void setEdgeMode(FeGaussianBlurView node, String edgeMode) {
+      node.setEdgeMode(edgeMode);
+    }
+  }
+
+  static class FeOffsetManager extends FilterPrimitiveManager<FeOffsetView>
+      implements RNSVGFeOffsetManagerInterface<FeOffsetView> {
+    FeOffsetManager() {
+      super(SVGClass.RNSVGFeOffset);
+      mDelegate = new RNSVGFeOffsetManagerDelegate(this);
+    }
+
+    public static final String REACT_CLASS = "RNSVGFeOffset";
+
+    @ReactProp(name = "in1")
+    public void setIn1(FeOffsetView node, String in1) {
+      node.setIn1(in1);
+    }
+
+    @ReactProp(name = "dx")
+    public void setDx(FeOffsetView node, Dynamic dx) {
+      node.setDx(dx);
+    }
+
+    @ReactProp(name = "dy")
+    public void setDy(FeOffsetView node, Dynamic dy) {
+      node.setDy(dy);
+    }
+  }
+
+  @ReactProp(name = "filter")
+  public void setFilter(T node, String filter) {
+    node.setFilter(filter);
+  }
+
   @ReactProp(name = "fill")
   public void setFill(T node, @Nullable Dynamic fill) {
     node.setFill(fill);

src/elements/filters/FeOffset.tsx

@@ -1,10 +1,7 @@
 import * as React from 'react';
 import { NativeMethods } from 'react-native';
 import RNSVGFeOffset from '../../fabric/FeOffsetNativeComponent';
-import {
+import { extractFilter } from '../../lib/extract/extractFilter';
-  extractFeOffset,
-  extractFilter,
-} from '../../lib/extract/extractFilter';
 import { NumberProp } from '../../lib/extract/types';
 import FilterPrimitive from './FilterPrimitive';
 
@@ -27,8 +24,8 @@ export default class FeOffset extends FilterPrimitive<FeOffsetProps> {
     return (
       <RNSVGFeOffset
         ref={(ref) => this.refMethod(ref as (FeOffset & NativeMethods) | null)}
+        {...this.props}
         {...extractFilter(this.props)}
-        {...extractFeOffset(this.props)}
       />
     );
   }

src/lib/extract/extractFilter.ts

@@ -1,9 +1,7 @@
 import { FeColorMatrixProps as FeColorMatrixComponentProps } from '../../elements/filters/FeColorMatrix';
-import { NativeProps as FeColorMatrixNativeProps } from '../../fabric/FeColorMatrixNativeComponent';
 import { FeGaussianBlurProps as FeGaussianBlurComponentProps } from '../../elements/filters/FeGaussianBlur';
+import { NativeProps as FeColorMatrixNativeProps } from '../../fabric/FeColorMatrixNativeComponent';
 import { NativeProps as FeGaussianBlurNativeProps } from '../../fabric/FeGaussianBlurNativeComponent';
-import { FeOffsetProps as FeOffsetComponentProps } from '../../elements/filters/FeOffset';
-import { NativeProps as FeOffsetNativeProps } from '../../fabric/FeOffsetNativeComponent';
 import { NumberProp } from './types';
 
 const spaceReg = /\s+/;
@@ -60,24 +58,6 @@ export const extractFeColorMatrix = (
   return extracted;
 };
 
-export const extractFeOffset = (
-  props: FeOffsetComponentProps
-): FeOffsetNativeProps => {
-  const extracted: FeOffsetNativeProps = {};
-
-  if (props.in) {
-    extracted.in1 = props.in;
-  }
-  if (props.dx) {
-    extracted.dx = props.dx;
-  }
-  if (props.dy) {
-    extracted.dy = props.dy;
-  }
-
-  return extracted;
-};
-
 export const extractFeGaussianBlur = (
   props: FeGaussianBlurComponentProps
 ): FeGaussianBlurNativeProps => {