@impulse-ui-native/data-state 2.1.3 → 2.1.5
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/README.md
CHANGED
|
@@ -5,15 +5,16 @@ Reusable loading, empty, error, and content-state composition for data-backed sc
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```sh
|
|
8
|
-
pnpm add @impulse-ui-native/data-state
|
|
8
|
+
pnpm add @impulse-ui-native/data-state react-native-reanimated react-native-worklets
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
+
Complete the Reanimated and Worklets setup required by your React Native or Expo project.
|
|
12
|
+
|
|
11
13
|
## Main exports
|
|
12
14
|
|
|
13
|
-
- `LoadingView`
|
|
14
|
-
- `EmptyView`
|
|
15
|
-
- `
|
|
16
|
-
- `DataView` coordinates loading, error, empty, and successful-content states in one component.
|
|
15
|
+
- `LoadingView` transitions between content and a caller-provided loading component.
|
|
16
|
+
- `EmptyView` and `ErrorView` are standalone containers for caller-rendered state content.
|
|
17
|
+
- `DataView` coordinates loading, error, empty, and successful-content states and renders the configured state copy and actions.
|
|
17
18
|
- Public prop types describe each state view and its action footer.
|
|
18
19
|
|
|
19
20
|
## Usage
|
|
@@ -31,7 +32,7 @@ import { DataView } from "@impulse-ui-native/data-state";
|
|
|
31
32
|
errorViewProps={{
|
|
32
33
|
text: "Could not load projects.",
|
|
33
34
|
primaryActionLabel: "Try again",
|
|
34
|
-
onPressPrimaryAction: query.refetch,
|
|
35
|
+
onPressPrimaryAction: () => query.refetch(),
|
|
35
36
|
}}
|
|
36
37
|
emptyViewProps={{
|
|
37
38
|
text: "No projects yet.",
|
|
@@ -43,4 +44,8 @@ import { DataView } from "@impulse-ui-native/data-state";
|
|
|
43
44
|
</DataView>;
|
|
44
45
|
```
|
|
45
46
|
|
|
47
|
+
While loading, `DataView` keeps its successful-state children mounted and
|
|
48
|
+
visually hidden beneath the loader. Give those children their expected loaded
|
|
49
|
+
height to prevent the surrounding layout from shifting when loading finishes.
|
|
50
|
+
|
|
46
51
|
The views use component tokens from `ThemeProvider` for their layout, layering, and presentation.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/data-view.tsx"],"sourcesContent":["import { memo, PropsWithChildren, useMemo } from \"react\";\n\nimport { View } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport { DataViewProps } from \"../types\";\nimport { EmptyDetails } from \"./empty-details\";\nimport { ErrorDetails } from \"./error-details\";\nimport { LoadingView } from \"./loading-view\";\n\nexport const DataView = memo((props: PropsWithChildren<DataViewProps>) => {\n const tokens = useComponentsTokens().dataState;\n const {\n error,\n isEmpty,\n loading,\n errorViewProps,\n emptyViewProps,\n LoadingComponent,\n contentContainerStyle,\n children,\n ...rest\n } = props;\n\n const content = useMemo(() => {\n if (!error && !isEmpty) {\n return null;\n }\n\n return (\n <View\n alignItems=\"center\"\n justifyContent=\"center\"\n zIndex={tokens.content.zIndex}\n >\n {error ? <ErrorDetails {...errorViewProps} /> : null}\n {isEmpty ? <EmptyDetails {...emptyViewProps} /> : null}\n </View>\n );\n }, [error, isEmpty, errorViewProps, emptyViewProps, tokens.content.zIndex]);\n\n return (\n <LoadingView\n {...rest}\n LoadingComponent={LoadingComponent}\n contentContainerStyle={contentContainerStyle}\n loading={loading}\n >\n {!error && !isEmpty
|
|
1
|
+
{"version":3,"sources":["../../src/components/data-view.tsx"],"sourcesContent":["import { memo, PropsWithChildren, useMemo } from \"react\";\n\nimport { View } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport { DataViewProps } from \"../types\";\nimport { EmptyDetails } from \"./empty-details\";\nimport { ErrorDetails } from \"./error-details\";\nimport { LoadingView } from \"./loading-view\";\n\nexport const DataView = memo((props: PropsWithChildren<DataViewProps>) => {\n const tokens = useComponentsTokens().dataState;\n const {\n error,\n isEmpty,\n loading,\n errorViewProps,\n emptyViewProps,\n LoadingComponent,\n contentContainerStyle,\n children,\n ...rest\n } = props;\n\n const content = useMemo(() => {\n if (!error && !isEmpty) {\n return null;\n }\n\n return (\n <View\n alignItems=\"center\"\n justifyContent=\"center\"\n zIndex={tokens.content.zIndex}\n >\n {error ? <ErrorDetails {...errorViewProps} /> : null}\n {isEmpty ? <EmptyDetails {...emptyViewProps} /> : null}\n </View>\n );\n }, [error, isEmpty, errorViewProps, emptyViewProps, tokens.content.zIndex]);\n\n return (\n <LoadingView\n {...rest}\n LoadingComponent={LoadingComponent}\n contentContainerStyle={contentContainerStyle}\n loading={loading}\n >\n {!error && !isEmpty ? children : null}\n {content}\n </LoadingView>\n );\n});\n"],"mappings":"AA8BM,SAKW,KALX;AA9BN,SAAS,MAAyB,eAAe;AAEjD,SAAS,YAAY;AACrB,SAAS,2BAA2B;AAGpC,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAErB,MAAM,WAAW,KAAK,CAAC,UAA4C;AACxE,QAAM,SAAS,oBAAoB,EAAE;AACrC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,CAAC,SAAS,CAAC,SAAS;AACtB,aAAO;AAAA,IACT;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,gBAAe;AAAA,QACf,QAAQ,OAAO,QAAQ;AAAA,QAEtB;AAAA,kBAAQ,oBAAC,gBAAc,GAAG,gBAAgB,IAAK;AAAA,UAC/C,UAAU,oBAAC,gBAAc,GAAG,gBAAgB,IAAK;AAAA;AAAA;AAAA,IACpD;AAAA,EAEJ,GAAG,CAAC,OAAO,SAAS,gBAAgB,gBAAgB,OAAO,QAAQ,MAAM,CAAC;AAE1E,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA,SAAC,SAAS,CAAC,UAAU,WAAW;AAAA,QAChC;AAAA;AAAA;AAAA,EACH;AAEJ,CAAC;","names":[]}
|
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.5",
|
|
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/theme": "2.1.5",
|
|
23
|
+
"@impulse-ui-native/icon": "2.1.5",
|
|
24
|
+
"@impulse-ui-native/skeleton": "2.1.5",
|
|
25
|
+
"@impulse-ui-native/primitives": "2.1.5",
|
|
26
|
+
"@impulse-ui-native/core": "2.1.5"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@types/react": "~19.2.14",
|