@coorpacademy/components 11.7.2 → 11.7.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/atom/loader/index.native.d.ts +10 -0
- package/es/atom/loader/index.native.d.ts.map +1 -0
- package/es/atom/loader/index.native.js +192 -0
- package/es/atom/loader/index.native.js.map +1 -0
- package/lib/atom/loader/index.native.d.ts +10 -0
- package/lib/atom/loader/index.native.d.ts.map +1 -0
- package/lib/atom/loader/index.native.js +205 -0
- package/lib/atom/loader/index.native.js.map +1 -0
- package/locales/.mtslconfig.json +1 -0
- package/package.json +3 -3
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { ColorValue } from 'react-native';
|
|
3
|
+
export declare type Props = {
|
|
4
|
+
color?: ColorValue;
|
|
5
|
+
height?: number;
|
|
6
|
+
readyToHide: boolean;
|
|
7
|
+
};
|
|
8
|
+
declare const Loader: (props: Props) => JSX.Element | null;
|
|
9
|
+
export default Loader;
|
|
10
|
+
//# sourceMappingURL=index.native.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/atom/loader/index.native.tsx"],"names":[],"mappings":";AAEA,OAAO,EAA0C,UAAU,EAAC,MAAM,cAAc,CAAC;AAoCjF,oBAAY,KAAK,GAAG;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;CACtB,CAAC;AAKF,QAAA,MAAM,MAAM,UAAW,KAAK,uBAqK3B,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
import { useAnimateProp } from '@coorpacademy/react-native-animation';
|
|
2
|
+
import React, { useEffect, useRef, useState } from 'react';
|
|
3
|
+
import { Animated, StyleSheet, Easing } from 'react-native';
|
|
4
|
+
import { useTemplateContext } from '../../template/app-review/template-context';
|
|
5
|
+
|
|
6
|
+
const createStyleSheet = theme => StyleSheet.create({
|
|
7
|
+
container: {
|
|
8
|
+
alignItems: 'center',
|
|
9
|
+
justifyContent: 'center'
|
|
10
|
+
},
|
|
11
|
+
dot: {
|
|
12
|
+
position: 'absolute'
|
|
13
|
+
},
|
|
14
|
+
blue: {
|
|
15
|
+
backgroundColor: theme.colors.cta
|
|
16
|
+
},
|
|
17
|
+
red: {
|
|
18
|
+
backgroundColor: theme.colors.negative
|
|
19
|
+
},
|
|
20
|
+
green: {
|
|
21
|
+
backgroundColor: theme.colors.positive
|
|
22
|
+
},
|
|
23
|
+
yellow: {
|
|
24
|
+
backgroundColor: theme.colors.battle
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
const CYCLE_DURATION = 3000;
|
|
29
|
+
const MIN_TIME = 1000;
|
|
30
|
+
|
|
31
|
+
const Loader = props => {
|
|
32
|
+
const templateContext = useTemplateContext();
|
|
33
|
+
const {
|
|
34
|
+
theme
|
|
35
|
+
} = templateContext;
|
|
36
|
+
const [styleSheet, setStylesheet] = useState(null);
|
|
37
|
+
const [visible, setVisible] = useState(true);
|
|
38
|
+
const [minTimeIsSpent, setMinTimeSpent] = useState(false);
|
|
39
|
+
const rotation = useRef(new Animated.Value(0)).current;
|
|
40
|
+
const scale = useRef(new Animated.Value(0)).current;
|
|
41
|
+
const hideAnimation = useAnimateProp({
|
|
42
|
+
property: 'opacity',
|
|
43
|
+
fromValue: 1,
|
|
44
|
+
toValue: 0
|
|
45
|
+
});
|
|
46
|
+
const {
|
|
47
|
+
height = 60,
|
|
48
|
+
color,
|
|
49
|
+
readyToHide
|
|
50
|
+
} = props;
|
|
51
|
+
useEffect(() => {
|
|
52
|
+
const _stylesheet = createStyleSheet(theme);
|
|
53
|
+
|
|
54
|
+
setStylesheet(_stylesheet);
|
|
55
|
+
}, [theme]);
|
|
56
|
+
useEffect(() => {
|
|
57
|
+
if (readyToHide && minTimeIsSpent) {
|
|
58
|
+
setVisible(false);
|
|
59
|
+
}
|
|
60
|
+
}, [readyToHide, minTimeIsSpent]);
|
|
61
|
+
useEffect(() => {
|
|
62
|
+
if (!visible) {
|
|
63
|
+
hideAnimation.start();
|
|
64
|
+
}
|
|
65
|
+
}, [visible, hideAnimation]);
|
|
66
|
+
useEffect(() => {
|
|
67
|
+
setTimeout(() => {
|
|
68
|
+
setMinTimeSpent(true);
|
|
69
|
+
}, MIN_TIME);
|
|
70
|
+
|
|
71
|
+
const _animation = Animated.parallel([Animated.loop(Animated.sequence([Animated.timing(scale, {
|
|
72
|
+
toValue: 0,
|
|
73
|
+
duration: 0,
|
|
74
|
+
useNativeDriver: false
|
|
75
|
+
}), Animated.timing(scale, {
|
|
76
|
+
toValue: 1,
|
|
77
|
+
duration: CYCLE_DURATION,
|
|
78
|
+
useNativeDriver: false,
|
|
79
|
+
easing: Easing.inOut(Easing.sin)
|
|
80
|
+
}), Animated.timing(scale, {
|
|
81
|
+
toValue: 2,
|
|
82
|
+
duration: CYCLE_DURATION,
|
|
83
|
+
useNativeDriver: false,
|
|
84
|
+
easing: Easing.inOut(Easing.sin)
|
|
85
|
+
}), Animated.timing(scale, {
|
|
86
|
+
toValue: 3,
|
|
87
|
+
duration: CYCLE_DURATION,
|
|
88
|
+
useNativeDriver: false,
|
|
89
|
+
easing: Easing.inOut(Easing.sin)
|
|
90
|
+
})])), Animated.loop(Animated.sequence([Animated.timing(rotation, {
|
|
91
|
+
toValue: 0,
|
|
92
|
+
duration: 0,
|
|
93
|
+
useNativeDriver: false
|
|
94
|
+
}), Animated.timing(rotation, {
|
|
95
|
+
toValue: 1,
|
|
96
|
+
duration: CYCLE_DURATION,
|
|
97
|
+
useNativeDriver: false,
|
|
98
|
+
easing: Easing.inOut(Easing.sin)
|
|
99
|
+
})]))]);
|
|
100
|
+
|
|
101
|
+
_animation.start();
|
|
102
|
+
|
|
103
|
+
return () => {
|
|
104
|
+
_animation.stop();
|
|
105
|
+
}; // eslint bad warning --> effect only onmount
|
|
106
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
107
|
+
}, []);
|
|
108
|
+
|
|
109
|
+
if (!styleSheet) {
|
|
110
|
+
return null;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
const interpolatedScale = scale.interpolate({
|
|
114
|
+
inputRange: [0, 0.45, 1, 1.32, 1.5, 2, 2.3, 2.64, 3],
|
|
115
|
+
outputRange: [0.5, 0.2, 0.5, 0.5, 0.8, 0.5, 0.5, 0.3, 0.5]
|
|
116
|
+
});
|
|
117
|
+
const interpolatedRotation = rotation.interpolate({
|
|
118
|
+
inputRange: [0, 1],
|
|
119
|
+
outputRange: ['0deg', '360deg']
|
|
120
|
+
});
|
|
121
|
+
const dotWidth = rotation.interpolate({
|
|
122
|
+
inputRange: [0, 0.5, 1],
|
|
123
|
+
outputRange: [height / 2, height / 6, height / 2]
|
|
124
|
+
});
|
|
125
|
+
const dotTranslate = rotation.interpolate({
|
|
126
|
+
inputRange: [0, 0.5, 1],
|
|
127
|
+
outputRange: [-25 * (height / 60), -35 * (height / 60), -25 * (height / 60)]
|
|
128
|
+
});
|
|
129
|
+
const dotStyle = {
|
|
130
|
+
width: dotWidth,
|
|
131
|
+
height: height / 6,
|
|
132
|
+
borderRadius: height / 12
|
|
133
|
+
};
|
|
134
|
+
return /*#__PURE__*/React.createElement(Animated.View, {
|
|
135
|
+
style: hideAnimation.animatedStyle
|
|
136
|
+
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
137
|
+
style: [styleSheet.container, {
|
|
138
|
+
height,
|
|
139
|
+
width: height,
|
|
140
|
+
transform: [{
|
|
141
|
+
scaleX: interpolatedScale
|
|
142
|
+
}, {
|
|
143
|
+
scaleY: interpolatedScale
|
|
144
|
+
}, {
|
|
145
|
+
rotateZ: interpolatedRotation
|
|
146
|
+
}]
|
|
147
|
+
}]
|
|
148
|
+
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
149
|
+
style: [styleSheet.dot, color ? {
|
|
150
|
+
backgroundColor: color
|
|
151
|
+
} : styleSheet.red, dotStyle, {
|
|
152
|
+
transform: [{
|
|
153
|
+
rotateZ: '45deg'
|
|
154
|
+
}, {
|
|
155
|
+
translateX: dotTranslate
|
|
156
|
+
}]
|
|
157
|
+
}]
|
|
158
|
+
}), /*#__PURE__*/React.createElement(Animated.View, {
|
|
159
|
+
style: [styleSheet.dot, color ? {
|
|
160
|
+
backgroundColor: color
|
|
161
|
+
} : styleSheet.green, dotStyle, {
|
|
162
|
+
transform: [{
|
|
163
|
+
rotateZ: '135deg'
|
|
164
|
+
}, {
|
|
165
|
+
translateX: dotTranslate
|
|
166
|
+
}]
|
|
167
|
+
}]
|
|
168
|
+
}), /*#__PURE__*/React.createElement(Animated.View, {
|
|
169
|
+
style: [styleSheet.dot, color ? {
|
|
170
|
+
backgroundColor: color
|
|
171
|
+
} : styleSheet.yellow, dotStyle, {
|
|
172
|
+
transform: [{
|
|
173
|
+
rotateZ: '225deg'
|
|
174
|
+
}, {
|
|
175
|
+
translateX: dotTranslate
|
|
176
|
+
}]
|
|
177
|
+
}]
|
|
178
|
+
}), /*#__PURE__*/React.createElement(Animated.View, {
|
|
179
|
+
style: [styleSheet.dot, color ? {
|
|
180
|
+
backgroundColor: color
|
|
181
|
+
} : styleSheet.blue, dotStyle, {
|
|
182
|
+
transform: [{
|
|
183
|
+
rotateZ: '315deg'
|
|
184
|
+
}, {
|
|
185
|
+
translateX: dotTranslate
|
|
186
|
+
}]
|
|
187
|
+
}]
|
|
188
|
+
})));
|
|
189
|
+
};
|
|
190
|
+
|
|
191
|
+
export default Loader;
|
|
192
|
+
//# sourceMappingURL=index.native.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.native.js","names":["useAnimateProp","React","useEffect","useRef","useState","Animated","StyleSheet","Easing","useTemplateContext","createStyleSheet","theme","create","container","alignItems","justifyContent","dot","position","blue","backgroundColor","colors","cta","red","negative","green","positive","yellow","battle","CYCLE_DURATION","MIN_TIME","Loader","props","templateContext","styleSheet","setStylesheet","visible","setVisible","minTimeIsSpent","setMinTimeSpent","rotation","Value","current","scale","hideAnimation","property","fromValue","toValue","height","color","readyToHide","_stylesheet","start","setTimeout","_animation","parallel","loop","sequence","timing","duration","useNativeDriver","easing","inOut","sin","stop","interpolatedScale","interpolate","inputRange","outputRange","interpolatedRotation","dotWidth","dotTranslate","dotStyle","width","borderRadius","animatedStyle","transform","scaleX","scaleY","rotateZ","translateX"],"sources":["../../../src/atom/loader/index.native.tsx"],"sourcesContent":["import {useAnimateProp} from '@coorpacademy/react-native-animation';\nimport React, {useEffect, useRef, useState} from 'react';\nimport {Animated, StyleSheet, Easing, ViewStyle, ColorValue} from 'react-native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {Theme} from '../../variables/theme.native';\n\ntype StyleSheetType = {\n container: ViewStyle;\n dot: ViewStyle;\n blue: ViewStyle;\n red: ViewStyle;\n green: ViewStyle;\n yellow: ViewStyle;\n};\n\nconst createStyleSheet = (theme: Theme): StyleSheetType =>\n StyleSheet.create({\n container: {\n alignItems: 'center',\n justifyContent: 'center'\n },\n dot: {\n position: 'absolute'\n },\n blue: {\n backgroundColor: theme.colors.cta\n },\n red: {\n backgroundColor: theme.colors.negative\n },\n green: {\n backgroundColor: theme.colors.positive\n },\n yellow: {\n backgroundColor: theme.colors.battle\n }\n });\n\nexport type Props = {\n color?: ColorValue;\n height?: number;\n readyToHide: boolean;\n};\n\nconst CYCLE_DURATION = 3000;\nconst MIN_TIME = 1000;\n\nconst Loader = (props: Props) => {\n const templateContext = useTemplateContext();\n const {theme} = templateContext;\n\n const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n const [visible, setVisible] = useState<boolean>(true);\n const [minTimeIsSpent, setMinTimeSpent] = useState<boolean>(false);\n\n const rotation = useRef<Animated.Value>(new Animated.Value(0)).current;\n const scale = useRef<Animated.Value>(new Animated.Value(0)).current;\n\n const hideAnimation = useAnimateProp({\n property: 'opacity',\n fromValue: 1,\n toValue: 0\n });\n\n const {height = 60, color, readyToHide} = props;\n\n useEffect(() => {\n const _stylesheet = createStyleSheet(theme);\n setStylesheet(_stylesheet);\n }, [theme]);\n\n useEffect(() => {\n if (readyToHide && minTimeIsSpent) {\n setVisible(false);\n }\n }, [readyToHide, minTimeIsSpent]);\n\n useEffect(() => {\n if (!visible) {\n hideAnimation.start();\n }\n }, [visible, hideAnimation]);\n\n useEffect(() => {\n setTimeout(() => {\n setMinTimeSpent(true);\n }, MIN_TIME);\n\n const _animation = Animated.parallel([\n Animated.loop(\n Animated.sequence([\n Animated.timing(scale, {toValue: 0, duration: 0, useNativeDriver: false}),\n Animated.timing(scale, {\n toValue: 1,\n duration: CYCLE_DURATION,\n useNativeDriver: false,\n easing: Easing.inOut(Easing.sin)\n }),\n Animated.timing(scale, {\n toValue: 2,\n duration: CYCLE_DURATION,\n useNativeDriver: false,\n easing: Easing.inOut(Easing.sin)\n }),\n Animated.timing(scale, {\n toValue: 3,\n duration: CYCLE_DURATION,\n useNativeDriver: false,\n easing: Easing.inOut(Easing.sin)\n })\n ])\n ),\n Animated.loop(\n Animated.sequence([\n Animated.timing(rotation, {toValue: 0, duration: 0, useNativeDriver: false}),\n Animated.timing(rotation, {\n toValue: 1,\n duration: CYCLE_DURATION,\n useNativeDriver: false,\n easing: Easing.inOut(Easing.sin)\n })\n ])\n )\n ]);\n\n _animation.start();\n\n return () => {\n _animation.stop();\n };\n // eslint bad warning --> effect only onmount\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n if (!styleSheet) {\n return null;\n }\n\n const interpolatedScale = scale.interpolate({\n inputRange: [0, 0.45, 1, 1.32, 1.5, 2, 2.3, 2.64, 3],\n outputRange: [0.5, 0.2, 0.5, 0.5, 0.8, 0.5, 0.5, 0.3, 0.5]\n });\n\n const interpolatedRotation = rotation.interpolate({\n inputRange: [0, 1],\n outputRange: ['0deg', '360deg']\n });\n const dotWidth = rotation.interpolate({\n inputRange: [0, 0.5, 1],\n outputRange: [height / 2, height / 6, height / 2]\n });\n const dotTranslate = rotation.interpolate({\n inputRange: [0, 0.5, 1],\n outputRange: [-25 * (height / 60), -35 * (height / 60), -25 * (height / 60)]\n });\n const dotStyle = {\n width: dotWidth,\n height: height / 6,\n borderRadius: height / 12\n };\n\n return (\n <Animated.View style={hideAnimation.animatedStyle}>\n <Animated.View\n style={[\n styleSheet.container,\n {\n height,\n width: height,\n transform: [\n {scaleX: interpolatedScale},\n {scaleY: interpolatedScale},\n {rotateZ: interpolatedRotation}\n ]\n }\n ]}\n >\n <Animated.View\n style={[\n styleSheet.dot,\n color ? {backgroundColor: color} : styleSheet.red,\n dotStyle,\n {transform: [{rotateZ: '45deg'}, {translateX: dotTranslate}]}\n ]}\n />\n <Animated.View\n style={[\n styleSheet.dot,\n color ? {backgroundColor: color} : styleSheet.green,\n dotStyle,\n {transform: [{rotateZ: '135deg'}, {translateX: dotTranslate}]}\n ]}\n />\n <Animated.View\n style={[\n styleSheet.dot,\n color ? {backgroundColor: color} : styleSheet.yellow,\n dotStyle,\n {transform: [{rotateZ: '225deg'}, {translateX: dotTranslate}]}\n ]}\n />\n <Animated.View\n style={[\n styleSheet.dot,\n color ? {backgroundColor: color} : styleSheet.blue,\n dotStyle,\n {transform: [{rotateZ: '315deg'}, {translateX: dotTranslate}]}\n ]}\n />\n </Animated.View>\n </Animated.View>\n );\n};\n\nexport default Loader;\n"],"mappings":"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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { ColorValue } from 'react-native';
|
|
3
|
+
export declare type Props = {
|
|
4
|
+
color?: ColorValue;
|
|
5
|
+
height?: number;
|
|
6
|
+
readyToHide: boolean;
|
|
7
|
+
};
|
|
8
|
+
declare const Loader: (props: Props) => JSX.Element | null;
|
|
9
|
+
export default Loader;
|
|
10
|
+
//# sourceMappingURL=index.native.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/atom/loader/index.native.tsx"],"names":[],"mappings":";AAEA,OAAO,EAA0C,UAAU,EAAC,MAAM,cAAc,CAAC;AAoCjF,oBAAY,KAAK,GAAG;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;CACtB,CAAC;AAKF,QAAA,MAAM,MAAM,UAAW,KAAK,uBAqK3B,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -0,0 +1,205 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.default = void 0;
|
|
5
|
+
|
|
6
|
+
var _reactNativeAnimation = require("@coorpacademy/react-native-animation");
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
10
|
+
var _reactNative = require("react-native");
|
|
11
|
+
|
|
12
|
+
var _templateContext = require("../../template/app-review/template-context");
|
|
13
|
+
|
|
14
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
15
|
+
|
|
16
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
17
|
+
|
|
18
|
+
const createStyleSheet = theme => _reactNative.StyleSheet.create({
|
|
19
|
+
container: {
|
|
20
|
+
alignItems: 'center',
|
|
21
|
+
justifyContent: 'center'
|
|
22
|
+
},
|
|
23
|
+
dot: {
|
|
24
|
+
position: 'absolute'
|
|
25
|
+
},
|
|
26
|
+
blue: {
|
|
27
|
+
backgroundColor: theme.colors.cta
|
|
28
|
+
},
|
|
29
|
+
red: {
|
|
30
|
+
backgroundColor: theme.colors.negative
|
|
31
|
+
},
|
|
32
|
+
green: {
|
|
33
|
+
backgroundColor: theme.colors.positive
|
|
34
|
+
},
|
|
35
|
+
yellow: {
|
|
36
|
+
backgroundColor: theme.colors.battle
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
const CYCLE_DURATION = 3000;
|
|
41
|
+
const MIN_TIME = 1000;
|
|
42
|
+
|
|
43
|
+
const Loader = props => {
|
|
44
|
+
const templateContext = (0, _templateContext.useTemplateContext)();
|
|
45
|
+
const {
|
|
46
|
+
theme
|
|
47
|
+
} = templateContext;
|
|
48
|
+
const [styleSheet, setStylesheet] = (0, _react.useState)(null);
|
|
49
|
+
const [visible, setVisible] = (0, _react.useState)(true);
|
|
50
|
+
const [minTimeIsSpent, setMinTimeSpent] = (0, _react.useState)(false);
|
|
51
|
+
const rotation = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
|
|
52
|
+
const scale = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
|
|
53
|
+
const hideAnimation = (0, _reactNativeAnimation.useAnimateProp)({
|
|
54
|
+
property: 'opacity',
|
|
55
|
+
fromValue: 1,
|
|
56
|
+
toValue: 0
|
|
57
|
+
});
|
|
58
|
+
const {
|
|
59
|
+
height = 60,
|
|
60
|
+
color,
|
|
61
|
+
readyToHide
|
|
62
|
+
} = props;
|
|
63
|
+
(0, _react.useEffect)(() => {
|
|
64
|
+
const _stylesheet = createStyleSheet(theme);
|
|
65
|
+
|
|
66
|
+
setStylesheet(_stylesheet);
|
|
67
|
+
}, [theme]);
|
|
68
|
+
(0, _react.useEffect)(() => {
|
|
69
|
+
if (readyToHide && minTimeIsSpent) {
|
|
70
|
+
setVisible(false);
|
|
71
|
+
}
|
|
72
|
+
}, [readyToHide, minTimeIsSpent]);
|
|
73
|
+
(0, _react.useEffect)(() => {
|
|
74
|
+
if (!visible) {
|
|
75
|
+
hideAnimation.start();
|
|
76
|
+
}
|
|
77
|
+
}, [visible, hideAnimation]);
|
|
78
|
+
(0, _react.useEffect)(() => {
|
|
79
|
+
setTimeout(() => {
|
|
80
|
+
setMinTimeSpent(true);
|
|
81
|
+
}, MIN_TIME);
|
|
82
|
+
|
|
83
|
+
const _animation = _reactNative.Animated.parallel([_reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(scale, {
|
|
84
|
+
toValue: 0,
|
|
85
|
+
duration: 0,
|
|
86
|
+
useNativeDriver: false
|
|
87
|
+
}), _reactNative.Animated.timing(scale, {
|
|
88
|
+
toValue: 1,
|
|
89
|
+
duration: CYCLE_DURATION,
|
|
90
|
+
useNativeDriver: false,
|
|
91
|
+
easing: _reactNative.Easing.inOut(_reactNative.Easing.sin)
|
|
92
|
+
}), _reactNative.Animated.timing(scale, {
|
|
93
|
+
toValue: 2,
|
|
94
|
+
duration: CYCLE_DURATION,
|
|
95
|
+
useNativeDriver: false,
|
|
96
|
+
easing: _reactNative.Easing.inOut(_reactNative.Easing.sin)
|
|
97
|
+
}), _reactNative.Animated.timing(scale, {
|
|
98
|
+
toValue: 3,
|
|
99
|
+
duration: CYCLE_DURATION,
|
|
100
|
+
useNativeDriver: false,
|
|
101
|
+
easing: _reactNative.Easing.inOut(_reactNative.Easing.sin)
|
|
102
|
+
})])), _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(rotation, {
|
|
103
|
+
toValue: 0,
|
|
104
|
+
duration: 0,
|
|
105
|
+
useNativeDriver: false
|
|
106
|
+
}), _reactNative.Animated.timing(rotation, {
|
|
107
|
+
toValue: 1,
|
|
108
|
+
duration: CYCLE_DURATION,
|
|
109
|
+
useNativeDriver: false,
|
|
110
|
+
easing: _reactNative.Easing.inOut(_reactNative.Easing.sin)
|
|
111
|
+
})]))]);
|
|
112
|
+
|
|
113
|
+
_animation.start();
|
|
114
|
+
|
|
115
|
+
return () => {
|
|
116
|
+
_animation.stop();
|
|
117
|
+
}; // eslint bad warning --> effect only onmount
|
|
118
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
119
|
+
}, []);
|
|
120
|
+
|
|
121
|
+
if (!styleSheet) {
|
|
122
|
+
return null;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
const interpolatedScale = scale.interpolate({
|
|
126
|
+
inputRange: [0, 0.45, 1, 1.32, 1.5, 2, 2.3, 2.64, 3],
|
|
127
|
+
outputRange: [0.5, 0.2, 0.5, 0.5, 0.8, 0.5, 0.5, 0.3, 0.5]
|
|
128
|
+
});
|
|
129
|
+
const interpolatedRotation = rotation.interpolate({
|
|
130
|
+
inputRange: [0, 1],
|
|
131
|
+
outputRange: ['0deg', '360deg']
|
|
132
|
+
});
|
|
133
|
+
const dotWidth = rotation.interpolate({
|
|
134
|
+
inputRange: [0, 0.5, 1],
|
|
135
|
+
outputRange: [height / 2, height / 6, height / 2]
|
|
136
|
+
});
|
|
137
|
+
const dotTranslate = rotation.interpolate({
|
|
138
|
+
inputRange: [0, 0.5, 1],
|
|
139
|
+
outputRange: [-25 * (height / 60), -35 * (height / 60), -25 * (height / 60)]
|
|
140
|
+
});
|
|
141
|
+
const dotStyle = {
|
|
142
|
+
width: dotWidth,
|
|
143
|
+
height: height / 6,
|
|
144
|
+
borderRadius: height / 12
|
|
145
|
+
};
|
|
146
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
|
|
147
|
+
style: hideAnimation.animatedStyle
|
|
148
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
|
|
149
|
+
style: [styleSheet.container, {
|
|
150
|
+
height,
|
|
151
|
+
width: height,
|
|
152
|
+
transform: [{
|
|
153
|
+
scaleX: interpolatedScale
|
|
154
|
+
}, {
|
|
155
|
+
scaleY: interpolatedScale
|
|
156
|
+
}, {
|
|
157
|
+
rotateZ: interpolatedRotation
|
|
158
|
+
}]
|
|
159
|
+
}]
|
|
160
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
|
|
161
|
+
style: [styleSheet.dot, color ? {
|
|
162
|
+
backgroundColor: color
|
|
163
|
+
} : styleSheet.red, dotStyle, {
|
|
164
|
+
transform: [{
|
|
165
|
+
rotateZ: '45deg'
|
|
166
|
+
}, {
|
|
167
|
+
translateX: dotTranslate
|
|
168
|
+
}]
|
|
169
|
+
}]
|
|
170
|
+
}), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
|
|
171
|
+
style: [styleSheet.dot, color ? {
|
|
172
|
+
backgroundColor: color
|
|
173
|
+
} : styleSheet.green, dotStyle, {
|
|
174
|
+
transform: [{
|
|
175
|
+
rotateZ: '135deg'
|
|
176
|
+
}, {
|
|
177
|
+
translateX: dotTranslate
|
|
178
|
+
}]
|
|
179
|
+
}]
|
|
180
|
+
}), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
|
|
181
|
+
style: [styleSheet.dot, color ? {
|
|
182
|
+
backgroundColor: color
|
|
183
|
+
} : styleSheet.yellow, dotStyle, {
|
|
184
|
+
transform: [{
|
|
185
|
+
rotateZ: '225deg'
|
|
186
|
+
}, {
|
|
187
|
+
translateX: dotTranslate
|
|
188
|
+
}]
|
|
189
|
+
}]
|
|
190
|
+
}), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
|
|
191
|
+
style: [styleSheet.dot, color ? {
|
|
192
|
+
backgroundColor: color
|
|
193
|
+
} : styleSheet.blue, dotStyle, {
|
|
194
|
+
transform: [{
|
|
195
|
+
rotateZ: '315deg'
|
|
196
|
+
}, {
|
|
197
|
+
translateX: dotTranslate
|
|
198
|
+
}]
|
|
199
|
+
}]
|
|
200
|
+
})));
|
|
201
|
+
};
|
|
202
|
+
|
|
203
|
+
var _default = Loader;
|
|
204
|
+
exports.default = _default;
|
|
205
|
+
//# sourceMappingURL=index.native.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.native.js","names":["createStyleSheet","theme","StyleSheet","create","container","alignItems","justifyContent","dot","position","blue","backgroundColor","colors","cta","red","negative","green","positive","yellow","battle","CYCLE_DURATION","MIN_TIME","Loader","props","templateContext","useTemplateContext","styleSheet","setStylesheet","useState","visible","setVisible","minTimeIsSpent","setMinTimeSpent","rotation","useRef","Animated","Value","current","scale","hideAnimation","useAnimateProp","property","fromValue","toValue","height","color","readyToHide","useEffect","_stylesheet","start","setTimeout","_animation","parallel","loop","sequence","timing","duration","useNativeDriver","easing","Easing","inOut","sin","stop","interpolatedScale","interpolate","inputRange","outputRange","interpolatedRotation","dotWidth","dotTranslate","dotStyle","width","borderRadius","animatedStyle","transform","scaleX","scaleY","rotateZ","translateX"],"sources":["../../../src/atom/loader/index.native.tsx"],"sourcesContent":["import {useAnimateProp} from '@coorpacademy/react-native-animation';\nimport React, {useEffect, useRef, useState} from 'react';\nimport {Animated, StyleSheet, Easing, ViewStyle, ColorValue} from 'react-native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {Theme} from '../../variables/theme.native';\n\ntype StyleSheetType = {\n container: ViewStyle;\n dot: ViewStyle;\n blue: ViewStyle;\n red: ViewStyle;\n green: ViewStyle;\n yellow: ViewStyle;\n};\n\nconst createStyleSheet = (theme: Theme): StyleSheetType =>\n StyleSheet.create({\n container: {\n alignItems: 'center',\n justifyContent: 'center'\n },\n dot: {\n position: 'absolute'\n },\n blue: {\n backgroundColor: theme.colors.cta\n },\n red: {\n backgroundColor: theme.colors.negative\n },\n green: {\n backgroundColor: theme.colors.positive\n },\n yellow: {\n backgroundColor: theme.colors.battle\n }\n });\n\nexport type Props = {\n color?: ColorValue;\n height?: number;\n readyToHide: boolean;\n};\n\nconst CYCLE_DURATION = 3000;\nconst MIN_TIME = 1000;\n\nconst Loader = (props: Props) => {\n const templateContext = useTemplateContext();\n const {theme} = templateContext;\n\n const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n const [visible, setVisible] = useState<boolean>(true);\n const [minTimeIsSpent, setMinTimeSpent] = useState<boolean>(false);\n\n const rotation = useRef<Animated.Value>(new Animated.Value(0)).current;\n const scale = useRef<Animated.Value>(new Animated.Value(0)).current;\n\n const hideAnimation = useAnimateProp({\n property: 'opacity',\n fromValue: 1,\n toValue: 0\n });\n\n const {height = 60, color, readyToHide} = props;\n\n useEffect(() => {\n const _stylesheet = createStyleSheet(theme);\n setStylesheet(_stylesheet);\n }, [theme]);\n\n useEffect(() => {\n if (readyToHide && minTimeIsSpent) {\n setVisible(false);\n }\n }, [readyToHide, minTimeIsSpent]);\n\n useEffect(() => {\n if (!visible) {\n hideAnimation.start();\n }\n }, [visible, hideAnimation]);\n\n useEffect(() => {\n setTimeout(() => {\n setMinTimeSpent(true);\n }, MIN_TIME);\n\n const _animation = Animated.parallel([\n Animated.loop(\n Animated.sequence([\n Animated.timing(scale, {toValue: 0, duration: 0, useNativeDriver: false}),\n Animated.timing(scale, {\n toValue: 1,\n duration: CYCLE_DURATION,\n useNativeDriver: false,\n easing: Easing.inOut(Easing.sin)\n }),\n Animated.timing(scale, {\n toValue: 2,\n duration: CYCLE_DURATION,\n useNativeDriver: false,\n easing: Easing.inOut(Easing.sin)\n }),\n Animated.timing(scale, {\n toValue: 3,\n duration: CYCLE_DURATION,\n useNativeDriver: false,\n easing: Easing.inOut(Easing.sin)\n })\n ])\n ),\n Animated.loop(\n Animated.sequence([\n Animated.timing(rotation, {toValue: 0, duration: 0, useNativeDriver: false}),\n Animated.timing(rotation, {\n toValue: 1,\n duration: CYCLE_DURATION,\n useNativeDriver: false,\n easing: Easing.inOut(Easing.sin)\n })\n ])\n )\n ]);\n\n _animation.start();\n\n return () => {\n _animation.stop();\n };\n // eslint bad warning --> effect only onmount\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n if (!styleSheet) {\n return null;\n }\n\n const interpolatedScale = scale.interpolate({\n inputRange: [0, 0.45, 1, 1.32, 1.5, 2, 2.3, 2.64, 3],\n outputRange: [0.5, 0.2, 0.5, 0.5, 0.8, 0.5, 0.5, 0.3, 0.5]\n });\n\n const interpolatedRotation = rotation.interpolate({\n inputRange: [0, 1],\n outputRange: ['0deg', '360deg']\n });\n const dotWidth = rotation.interpolate({\n inputRange: [0, 0.5, 1],\n outputRange: [height / 2, height / 6, height / 2]\n });\n const dotTranslate = rotation.interpolate({\n inputRange: [0, 0.5, 1],\n outputRange: [-25 * (height / 60), -35 * (height / 60), -25 * (height / 60)]\n });\n const dotStyle = {\n width: dotWidth,\n height: height / 6,\n borderRadius: height / 12\n };\n\n return (\n <Animated.View style={hideAnimation.animatedStyle}>\n <Animated.View\n style={[\n styleSheet.container,\n {\n height,\n width: height,\n transform: [\n {scaleX: interpolatedScale},\n {scaleY: interpolatedScale},\n {rotateZ: interpolatedRotation}\n ]\n }\n ]}\n >\n <Animated.View\n style={[\n styleSheet.dot,\n color ? {backgroundColor: color} : styleSheet.red,\n dotStyle,\n {transform: [{rotateZ: '45deg'}, {translateX: dotTranslate}]}\n ]}\n />\n <Animated.View\n style={[\n styleSheet.dot,\n color ? {backgroundColor: color} : styleSheet.green,\n dotStyle,\n {transform: [{rotateZ: '135deg'}, {translateX: dotTranslate}]}\n ]}\n />\n <Animated.View\n style={[\n styleSheet.dot,\n color ? {backgroundColor: color} : styleSheet.yellow,\n dotStyle,\n {transform: [{rotateZ: '225deg'}, {translateX: dotTranslate}]}\n ]}\n />\n <Animated.View\n style={[\n styleSheet.dot,\n color ? {backgroundColor: color} : styleSheet.blue,\n dotStyle,\n {transform: [{rotateZ: '315deg'}, {translateX: dotTranslate}]}\n ]}\n />\n </Animated.View>\n </Animated.View>\n );\n};\n\nexport default Loader;\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"ignore_dirs":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coorpacademy/components",
|
|
3
|
-
"version": "11.7.
|
|
3
|
+
"version": "11.7.3",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -104,7 +104,7 @@
|
|
|
104
104
|
"@babel/types": "^7.19.0",
|
|
105
105
|
"@coorpacademy/css-modules-require-hook": "3.0.0",
|
|
106
106
|
"@coorpacademy/eslint-plugin-coorpacademy": "^10.0.0",
|
|
107
|
-
"@coorpacademy/react-native-mock-render": "^0.2.
|
|
107
|
+
"@coorpacademy/react-native-mock-render": "^0.2.9",
|
|
108
108
|
"@coorpacademy/react-native-slider": "^0.11.1",
|
|
109
109
|
"@coorpacademy/translate": "6.2.0",
|
|
110
110
|
"@coorpacademy/webpack-config": "12.0.1",
|
|
@@ -160,5 +160,5 @@
|
|
|
160
160
|
"last 2 versions",
|
|
161
161
|
"IE 11"
|
|
162
162
|
],
|
|
163
|
-
"gitHead": "
|
|
163
|
+
"gitHead": "b820282540814d1f182de80adbdaf30d0152ab77"
|
|
164
164
|
}
|