forked from ibitcy/react-native-hole-view
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.tsx
92 lines (80 loc) · 3.52 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import { requireNativeComponent, ViewProps } from 'react-native';
import * as React from 'react';
const isFabricEnabled = global.nativeFabricUIManager != null;
const RNHoleViewManager = isFabricEnabled ?
require("./codegenSpec/RNHoleViewNativeComponent").default :
requireNativeComponent<IRNHoleView>('RNHoleView');
const DEFAULT_DURATION = 1000;
const DEFAULT_RADIUS_VALUE = 0;
export class RNHole {
height: number;
width: number;
x: number;
y: number;
borderRadius?: number = DEFAULT_RADIUS_VALUE;
isRTL? = false;
borderTopLeftRadius? = DEFAULT_RADIUS_VALUE;
borderTopRightRadius? = DEFAULT_RADIUS_VALUE;
borderBottomLeftRadius? = DEFAULT_RADIUS_VALUE;
borderBottomRightRadius? = DEFAULT_RADIUS_VALUE;
borderTopStartRadius? = DEFAULT_RADIUS_VALUE;
borderTopEndRadius? = DEFAULT_RADIUS_VALUE;
borderBottomStartRadius? = DEFAULT_RADIUS_VALUE;
borderBottomEndRadius? = DEFAULT_RADIUS_VALUE;
}
export enum ERNHoleViewTimingFunction {
LINEAR = 'LINEAR',
EASE_IN = 'EASE_IN',
EASE_OUT = 'EASE_OUT',
EASE_IN_OUT = 'EASE_IN_OUT',
}
export interface IRNHoleViewAnimation {
duration?: number;
timingFunction?: ERNHoleViewTimingFunction;
}
export interface IRNHoleView extends ViewProps {
holes?: RNHole[];
animation?: IRNHoleViewAnimation;
onAnimationFinished?: () => void;
}
const sanitizeAnimationProp = (animation) => {
const animationProp = animation
? {
duration: typeof animation.duration === 'number' ? animation.duration : DEFAULT_DURATION,
timingFunction: animation.timingFunction || ERNHoleViewTimingFunction.LINEAR,
}
: undefined;
return animationProp;
}
const sanitizeHolesProp = (holes) => {
const holesProp = [];
if (holes!=null) {
holes.forEach(h => {
holesProp.push({
height: h.height,
width: h.width,
x: h.x,
y: h.y,
borderRadius: typeof h.borderRadius === 'number' ? h.borderRadius : DEFAULT_RADIUS_VALUE,
isRTL: !!h.isRTL,
borderTopLeftRadius: typeof h.borderTopLeftRadius === 'number' ? h.borderTopLeftRadius : DEFAULT_RADIUS_VALUE,
borderTopRightRadius: typeof h.borderTopRightRadius === 'number' ? h.borderTopRightRadius : DEFAULT_RADIUS_VALUE,
borderBottomLeftRadius: typeof h.borderBottomLeftRadius === 'number' ? h.borderBottomLeftRadius : DEFAULT_RADIUS_VALUE,
borderBottomRightRadius: typeof h.borderBottomRightRadius === 'number' ? h.borderBottomRightRadius : DEFAULT_RADIUS_VALUE,
borderTopStartRadius: typeof h.borderTopStartRadius === 'number' ? h.borderTopStartRadius : DEFAULT_RADIUS_VALUE,
borderTopEndRadius: typeof h.borderTopEndRadius === 'number' ? h.borderTopEndRadius : DEFAULT_RADIUS_VALUE,
borderBottomStartRadius: typeof h.borderBottomStartRadius === 'number' ? h.borderBottomStartRadius : DEFAULT_RADIUS_VALUE,
borderBottomEndRadius: typeof h.borderBottomEndRadius === 'number' ? h.borderBottomEndRadius : DEFAULT_RADIUS_VALUE
});
});
}
return holesProp;
}
export const RNHoleView: React.FC<IRNHoleView> = props => {
const { animation, holes, onAnimationFinished, ...rest } = props;
const animationProp = sanitizeAnimationProp(animation);
const holesProp = sanitizeHolesProp(holes);
return (
<RNHoleViewManager holes={holesProp} animation={animationProp} onAnimationFinished={onAnimationFinished} {...rest} />
);
};