@impulse-ui-native/data-state 2.1.1 → 2.1.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.
|
@@ -23,25 +23,6 @@ const LoadingView = memo(function LoadingView2(props) {
|
|
|
23
23
|
const [loaderHeight, setLoaderHeight] = useState(0);
|
|
24
24
|
const loaderOpacity = useSharedValue(loading ? 1 : 0);
|
|
25
25
|
const childrenOpacity = useSharedValue(loading ? 0 : 1);
|
|
26
|
-
const onLoaderLayout = useCallback((event) => {
|
|
27
|
-
const height = event.nativeEvent.layout.height;
|
|
28
|
-
setLoaderHeight((prev) => {
|
|
29
|
-
if (prev === height) {
|
|
30
|
-
return prev;
|
|
31
|
-
}
|
|
32
|
-
return height;
|
|
33
|
-
});
|
|
34
|
-
}, []);
|
|
35
|
-
const containerStyle = useMemo(
|
|
36
|
-
() => [
|
|
37
|
-
{
|
|
38
|
-
position: "relative",
|
|
39
|
-
minHeight: shouldMountLoader ? loaderHeight : void 0
|
|
40
|
-
},
|
|
41
|
-
style
|
|
42
|
-
],
|
|
43
|
-
[loaderHeight, shouldMountLoader, style]
|
|
44
|
-
);
|
|
45
26
|
const loaderStyles = useAnimatedStyle(() => ({
|
|
46
27
|
position: "absolute",
|
|
47
28
|
bottom: 0,
|
|
@@ -54,10 +35,29 @@ const LoadingView = memo(function LoadingView2(props) {
|
|
|
54
35
|
const childrenStyles = useAnimatedStyle(() => ({
|
|
55
36
|
opacity: childrenOpacity.value
|
|
56
37
|
}));
|
|
38
|
+
const containerStyle = useMemo(
|
|
39
|
+
() => [
|
|
40
|
+
{
|
|
41
|
+
position: "relative",
|
|
42
|
+
minHeight: shouldMountLoader ? loaderHeight : void 0
|
|
43
|
+
},
|
|
44
|
+
style
|
|
45
|
+
],
|
|
46
|
+
[loaderHeight, shouldMountLoader, style]
|
|
47
|
+
);
|
|
57
48
|
const childrenContainerStyles = useMemo(
|
|
58
49
|
() => [contentContainerStyle, childrenStyles],
|
|
59
50
|
[contentContainerStyle, childrenStyles]
|
|
60
51
|
);
|
|
52
|
+
const onLoaderLayout = useCallback((event) => {
|
|
53
|
+
const height = event.nativeEvent.layout.height;
|
|
54
|
+
setLoaderHeight((prev) => {
|
|
55
|
+
if (prev === height) {
|
|
56
|
+
return prev;
|
|
57
|
+
}
|
|
58
|
+
return height;
|
|
59
|
+
});
|
|
60
|
+
}, []);
|
|
61
61
|
useEffect(() => {
|
|
62
62
|
if (loading) {
|
|
63
63
|
setShouldMountLoader(true);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/loading-view.tsx"],"sourcesContent":["import { memo, useCallback, useEffect, useMemo, useState } from \"react\";\nimport { LayoutChangeEvent, StyleProp, ViewStyle } from \"react-native\";\nimport Animated, {\n Easing,\n useAnimatedStyle,\n useSharedValue,\n withTiming,\n} from \"react-native-reanimated\";\nimport { scheduleOnRN } from \"react-native-worklets\";\n\nimport { View } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport { LoadingViewProps } from \"../types\";\n\nexport const LoadingView = memo(function LoadingView(props: LoadingViewProps) {\n const {\n loading,\n children,\n LoadingComponent,\n contentContainerStyle,\n style,\n ...rest\n } = props;\n\n const tokens = useComponentsTokens().dataState.loading;\n\n const [shouldMountLoader, setShouldMountLoader] = useState(loading);\n const [loaderHeight, setLoaderHeight] = useState(0);\n\n const loaderOpacity = useSharedValue(loading ? 1 : 0);\n const childrenOpacity = useSharedValue(loading ? 0 : 1);\n\n const
|
|
1
|
+
{"version":3,"sources":["../../src/components/loading-view.tsx"],"sourcesContent":["import { memo, useCallback, useEffect, useMemo, useState } from \"react\";\nimport { LayoutChangeEvent, StyleProp, ViewStyle } from \"react-native\";\nimport Animated, {\n Easing,\n useAnimatedStyle,\n useSharedValue,\n withTiming,\n} from \"react-native-reanimated\";\nimport { scheduleOnRN } from \"react-native-worklets\";\n\nimport { View } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport { LoadingViewProps } from \"../types\";\n\nexport const LoadingView = memo(function LoadingView(props: LoadingViewProps) {\n const {\n loading,\n children,\n LoadingComponent,\n contentContainerStyle,\n style,\n ...rest\n } = props;\n\n const tokens = useComponentsTokens().dataState.loading;\n\n const [shouldMountLoader, setShouldMountLoader] = useState(loading);\n const [loaderHeight, setLoaderHeight] = useState(0);\n\n const loaderOpacity = useSharedValue(loading ? 1 : 0);\n const childrenOpacity = useSharedValue(loading ? 0 : 1);\n\n const loaderStyles = useAnimatedStyle(() => ({\n position: \"absolute\",\n bottom: 0,\n left: 0,\n right: 0,\n top: 0,\n zIndex: tokens.loaderZIndex,\n opacity: loaderOpacity.value,\n }));\n\n const childrenStyles = useAnimatedStyle(() => ({\n opacity: childrenOpacity.value,\n }));\n\n const containerStyle = useMemo<StyleProp<ViewStyle>>(\n () => [\n {\n position: \"relative\",\n minHeight: shouldMountLoader ? loaderHeight : undefined,\n },\n style,\n ],\n [loaderHeight, shouldMountLoader, style],\n );\n\n const childrenContainerStyles = useMemo(\n () => [contentContainerStyle, childrenStyles],\n [contentContainerStyle, childrenStyles],\n );\n\n const onLoaderLayout = useCallback((event: LayoutChangeEvent) => {\n const height = event.nativeEvent.layout.height;\n\n setLoaderHeight((prev) => {\n if (prev === height) {\n return prev;\n }\n\n return height;\n });\n }, []);\n\n useEffect(() => {\n if (loading) {\n setShouldMountLoader(true);\n\n loaderOpacity.value = 1;\n childrenOpacity.value = 0;\n\n return;\n }\n\n loaderOpacity.value = withTiming(\n 0,\n {\n duration: tokens.transitionDuration,\n easing: Easing.linear,\n },\n (finished) => {\n if (finished) {\n scheduleOnRN(setShouldMountLoader, false);\n }\n },\n );\n\n childrenOpacity.value = withTiming(1, {\n duration: tokens.transitionDuration,\n easing: Easing.linear,\n });\n }, [loading, loaderOpacity, childrenOpacity, tokens.transitionDuration]);\n\n return (\n <View {...rest} style={containerStyle}>\n <Animated.View style={childrenContainerStyles}>{children}</Animated.View>\n\n {shouldMountLoader ? (\n <Animated.View style={loaderStyles} pointerEvents=\"auto\">\n <View onLayout={onLoaderLayout}>\n <LoadingComponent />\n </View>\n </Animated.View>\n ) : null}\n </View>\n );\n});\n"],"mappings":"AAyGI,SACE,KADF;AAzGJ,SAAS,MAAM,aAAa,WAAW,SAAS,gBAAgB;AAEhE,OAAO;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAE7B,SAAS,YAAY;AACrB,SAAS,2BAA2B;AAI7B,MAAM,cAAc,KAAK,SAASA,aAAY,OAAyB;AAC5E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,SAAS,oBAAoB,EAAE,UAAU;AAE/C,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,OAAO;AAClE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,CAAC;AAElD,QAAM,gBAAgB,eAAe,UAAU,IAAI,CAAC;AACpD,QAAM,kBAAkB,eAAe,UAAU,IAAI,CAAC;AAEtD,QAAM,eAAe,iBAAiB,OAAO;AAAA,IAC3C,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,IACL,QAAQ,OAAO;AAAA,IACf,SAAS,cAAc;AAAA,EACzB,EAAE;AAEF,QAAM,iBAAiB,iBAAiB,OAAO;AAAA,IAC7C,SAAS,gBAAgB;AAAA,EAC3B,EAAE;AAEF,QAAM,iBAAiB;AAAA,IACrB,MAAM;AAAA,MACJ;AAAA,QACE,UAAU;AAAA,QACV,WAAW,oBAAoB,eAAe;AAAA,MAChD;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,mBAAmB,KAAK;AAAA,EACzC;AAEA,QAAM,0BAA0B;AAAA,IAC9B,MAAM,CAAC,uBAAuB,cAAc;AAAA,IAC5C,CAAC,uBAAuB,cAAc;AAAA,EACxC;AAEA,QAAM,iBAAiB,YAAY,CAAC,UAA6B;AAC/D,UAAM,SAAS,MAAM,YAAY,OAAO;AAExC,oBAAgB,CAAC,SAAS;AACxB,UAAI,SAAS,QAAQ;AACnB,eAAO;AAAA,MACT;AAEA,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,QAAI,SAAS;AACX,2BAAqB,IAAI;AAEzB,oBAAc,QAAQ;AACtB,sBAAgB,QAAQ;AAExB;AAAA,IACF;AAEA,kBAAc,QAAQ;AAAA,MACpB;AAAA,MACA;AAAA,QACE,UAAU,OAAO;AAAA,QACjB,QAAQ,OAAO;AAAA,MACjB;AAAA,MACA,CAAC,aAAa;AACZ,YAAI,UAAU;AACZ,uBAAa,sBAAsB,KAAK;AAAA,QAC1C;AAAA,MACF;AAAA,IACF;AAEA,oBAAgB,QAAQ,WAAW,GAAG;AAAA,MACpC,UAAU,OAAO;AAAA,MACjB,QAAQ,OAAO;AAAA,IACjB,CAAC;AAAA,EACH,GAAG,CAAC,SAAS,eAAe,iBAAiB,OAAO,kBAAkB,CAAC;AAEvE,SACE,qBAAC,QAAM,GAAG,MAAM,OAAO,gBACrB;AAAA,wBAAC,SAAS,MAAT,EAAc,OAAO,yBAA0B,UAAS;AAAA,IAExD,oBACC,oBAAC,SAAS,MAAT,EAAc,OAAO,cAAc,eAAc,QAChD,8BAAC,QAAK,UAAU,gBACd,8BAAC,oBAAiB,GACpB,GACF,IACE;AAAA,KACN;AAEJ,CAAC;","names":["LoadingView"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/data-state",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.3",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.mts",
|
|
@@ -19,11 +19,11 @@
|
|
|
19
19
|
],
|
|
20
20
|
"sideEffects": false,
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@impulse-ui-native/
|
|
23
|
-
"@impulse-ui-native/
|
|
24
|
-
"@impulse-ui-native/skeleton": "2.1.
|
|
25
|
-
"@impulse-ui-native/
|
|
26
|
-
"@impulse-ui-native/
|
|
22
|
+
"@impulse-ui-native/core": "2.1.3",
|
|
23
|
+
"@impulse-ui-native/primitives": "2.1.3",
|
|
24
|
+
"@impulse-ui-native/skeleton": "2.1.3",
|
|
25
|
+
"@impulse-ui-native/icon": "2.1.3",
|
|
26
|
+
"@impulse-ui-native/theme": "2.1.3"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@types/react": "~19.2.14",
|