{
[x: string]: unknown;
protected tag?: React.ElementType;
protected prepareProps(props: P) {
@@ -319,6 +314,7 @@ export class WebShape<
elementRef =
React.createRef = {};
/**
@@ -329,7 +325,7 @@ export class WebShape<
{},
this.props,
this.lastMergedProps,
- props.style,
+ props.style
);
this.lastMergedProps = merged;
const clean = prepare(this, this.prepareProps(merged));
@@ -343,15 +339,16 @@ export class WebShape<
break;
case 'style':
// style can be an object here or an array, so we convert it to an array and assign each element
- for (const partialStyle of ([] as {}[]).concat(clean.style ?? [])) {
- // @ts-expect-error "DOM" is not part of `compilerOptions.lib`
+ for (const partialStyle of ([] as unknown[]).concat(
+ clean.style ?? []
+ )) {
Object.assign(current.style, partialStyle);
}
break;
default:
// apply all other incoming prop updates as attributes on the node
// same logic as in https://github.com/software-mansion/react-native-reanimated/blob/d04720c82f5941532991b235787285d36d717247/src/reanimated2/js-reanimated/index.ts#L38-L39
- // @ts-expect-error "DOM" is not part of `compilerOptions.lib`
+ // @ts-expect-error TODO: fix this
current.setAttribute(camelCaseToDashed(cleanAttribute), cleanValue);
break;
}
@@ -361,17 +358,19 @@ export class WebShape<
_remeasureMetricsOnActivation: () => void;
touchableHandleStartShouldSetResponder?: (
- e: GestureResponderEvent,
+ e: GestureResponderEvent
) => boolean;
+
touchableHandleResponderMove?: (e: GestureResponderEvent) => void;
touchableHandleResponderGrant?: (e: GestureResponderEvent) => void;
touchableHandleResponderRelease?: (e: GestureResponderEvent) => void;
touchableHandleResponderTerminate?: (e: GestureResponderEvent) => void;
touchableHandleResponderTerminationRequest?: (
- e: GestureResponderEvent,
+ e: GestureResponderEvent
) => boolean;
- constructor(props: P, context: C) {
- super(props, context);
+
+ constructor(props: P) {
+ super(props);
// Do not attach touchable mixin handlers if SVG element doesn't have a touchable prop
if (hasTouchableProperty(props)) {
@@ -384,13 +383,13 @@ export class WebShape<
render(): JSX.Element {
if (!this.tag) {
throw new Error(
- 'When extending `WebShape` you need to overwrite either `tag` or `render`!',
+ 'When extending `WebShape` you need to overwrite either `tag` or `render`!'
);
}
this.lastMergedProps = {};
return createElement(
this.tag,
- prepare(this, this.prepareProps(this.props)),
+ prepare(this, this.prepareProps(this.props))
);
}
}
@@ -467,7 +466,7 @@ function encodeSvg(svgString: string) {
' extends Shape extends Shape & NativeMethods) | null)}
- {...extractedProps}
- >
+ {...extractedProps}>
{props.children}
extends Component {
super(props);
SvgTouchableMixin(this);
}
+
refMethod: (instance: (Shape & NativeMethods) | null) => void = (
- instance: (Shape & NativeMethods) | null,
+ instance: (Shape & NativeMethods) | null
) => {
this.root = instance;
};
+
// Hack to make Animated work with Shape components.
getNativeScrollRef(): (Shape & NativeMethods) | null {
return this.root;
}
+
setNativeProps = (
props: P & {
matrix?: ColumnMajorTransformMatrix;
fill?: ColorValue;
- } & TransformProps,
+ } & TransformProps
) => {
if (props.fill) {
// @ts-ignore TODO: native `fill` prop differs from the one passed in props
@@ -260,6 +274,7 @@ export default class Shape extends Component {
}
this.root?.setNativeProps(props);
};
+
/*
* The following native methods are experimental and likely broken in some
* ways. If you have a use case for these, please open an issue with a
@@ -282,42 +297,48 @@ export default class Shape extends Component {
clipped,
});
};
+
getCTM = (): SVGMatrix => {
const handle = findNodeHandle(this.root);
const RNSVGRenderableModule: Spec =
require('../fabric/NativeSvgRenderableModule').default;
return new SVGMatrix(RNSVGRenderableModule.getCTM(handle));
};
+
getScreenCTM = (): SVGMatrix => {
const handle = findNodeHandle(this.root);
const RNSVGRenderableModule: Spec =
require('../fabric/NativeSvgRenderableModule').default;
return new SVGMatrix(RNSVGRenderableModule.getScreenCTM(handle));
};
+
isPointInFill = (options: DOMPointInit): boolean | undefined => {
const handle = findNodeHandle(this.root);
const RNSVGRenderableModule: Spec =
require('../fabric/NativeSvgRenderableModule').default;
return RNSVGRenderableModule.isPointInFill(handle, options);
};
+
isPointInStroke = (options: DOMPointInit): boolean | undefined => {
const handle = findNodeHandle(this.root);
const RNSVGRenderableModule: Spec =
require('../fabric/NativeSvgRenderableModule').default;
return RNSVGRenderableModule.isPointInStroke(handle, options);
};
+
getTotalLength = (): number | undefined => {
const handle = findNodeHandle(this.root);
const RNSVGRenderableModule: Spec =
require('../fabric/NativeSvgRenderableModule').default;
return RNSVGRenderableModule.getTotalLength(handle);
};
+
getPointAtLength = (length: number): SVGPoint => {
const handle = findNodeHandle(this.root);
const RNSVGRenderableModule: Spec =
require('../fabric/NativeSvgRenderableModule').default;
return new SVGPoint(
- RNSVGRenderableModule.getPointAtLength(handle, { length }),
+ RNSVGRenderableModule.getPointAtLength(handle, { length })
);
};
}
diff --git a/src/elements/Stop.tsx b/src/elements/Stop.tsx
index b8d46fe7..f51cce87 100644
--- a/src/elements/Stop.tsx
+++ b/src/elements/Stop.tsx
@@ -9,7 +9,7 @@ export interface StopProps {
parent?: Component;
}
-export default class Stop extends Component