@impulse-ui-native/data-state 15.0.5 → 16.0.0
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 +69 -69
- package/dist/components/data-view.js.map +1 -1
- package/dist/components/empty-details.js.map +1 -1
- package/dist/components/error-details.js.map +1 -1
- package/dist/components/loading-view.js.map +1 -1
- package/dist/components/state-actions-footer.js.map +1 -1
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -1,69 +1,69 @@
|
|
|
1
|
-
# @impulse-ui-native/data-state
|
|
2
|
-
|
|
3
|
-
Reusable loading, empty, error, and content-state composition for data-backed screens.
|
|
4
|
-
|
|
5
|
-
## Installation
|
|
6
|
-
|
|
7
|
-
```sh
|
|
8
|
-
pnpm add @impulse-ui-native/data-state react-native-reanimated react-native-worklets
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
Complete the Reanimated and Worklets setup required by your React Native or Expo project.
|
|
12
|
-
|
|
13
|
-
## Main exports
|
|
14
|
-
|
|
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.
|
|
18
|
-
- Public prop types describe each state view and its action footer.
|
|
19
|
-
|
|
20
|
-
`EmptyView` and `ErrorView` always render their supplied children. Their only
|
|
21
|
-
container-specific option is `contentContainerStyle`, which styles the inner
|
|
22
|
-
content separately from the outer `style`. They accept native/themed View props
|
|
23
|
-
and children; text, action, `variant`, `isEmpty`, and `error` props are not part
|
|
24
|
-
of their API. Use `DataView` for automatic state selection and configured details.
|
|
25
|
-
|
|
26
|
-
## Usage
|
|
27
|
-
|
|
28
|
-
```tsx
|
|
29
|
-
import { ActivityIndicator } from "react-native";
|
|
30
|
-
|
|
31
|
-
import { DataView } from "@impulse-ui-native/data-state";
|
|
32
|
-
|
|
33
|
-
<DataView
|
|
34
|
-
loading={query.isLoading}
|
|
35
|
-
error={query.error}
|
|
36
|
-
isEmpty={!query.data?.length}
|
|
37
|
-
LoadingComponent={ActivityIndicator}
|
|
38
|
-
errorViewProps={{
|
|
39
|
-
text: "Could not load projects.",
|
|
40
|
-
primaryActionLabel: "Try again",
|
|
41
|
-
onPressPrimaryAction: () => query.refetch(),
|
|
42
|
-
}}
|
|
43
|
-
emptyViewProps={{
|
|
44
|
-
text: "No projects yet.",
|
|
45
|
-
primaryActionLabel: "Create project",
|
|
46
|
-
onPressPrimaryAction: openCreateProject,
|
|
47
|
-
}}
|
|
48
|
-
>
|
|
49
|
-
<ProjectList projects={query.data ?? []} />
|
|
50
|
-
</DataView>;
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
While loading, `DataView` keeps its successful-state children mounted and
|
|
54
|
-
visually hidden beneath the loader. Give those children their expected loaded
|
|
55
|
-
height to prevent the surrounding layout from shifting when loading finishes.
|
|
56
|
-
|
|
57
|
-
The views use component tokens from `ThemeProvider` for their layout, layering, and presentation.
|
|
58
|
-
|
|
59
|
-
## Repository palette consistency
|
|
60
|
-
|
|
61
|
-
DataView and its internal state details/actions accept tone (default primary).
|
|
62
|
-
The icon accent and default action buttons use the same tone, with per-state tone
|
|
63
|
-
overrides allowed in errorViewProps/emptyViewProps. LoadingView passes the optional
|
|
64
|
-
tone prop to custom LoadingComponent; custom loaders decide how to consume it.
|
|
65
|
-
Details icon tokens move to dataState.details.colors[tone]. Skeletons remain neutral.
|
|
66
|
-
|
|
67
|
-
## Agent and design reference
|
|
68
|
-
|
|
69
|
-
Start with the [capability guide](../../docs/design-system/capabilities/data-state.md) for supported exports, props, defaults, composition rules, setup, and recipes. Use the [component chooser](../../docs/design-system/component-chooser.md) to select a package. These references describe the repository source; verify your installed package version before copying examples.
|
|
1
|
+
# @impulse-ui-native/data-state
|
|
2
|
+
|
|
3
|
+
Reusable loading, empty, error, and content-state composition for data-backed screens.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```sh
|
|
8
|
+
pnpm add @impulse-ui-native/data-state react-native-reanimated react-native-worklets
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Complete the Reanimated and Worklets setup required by your React Native or Expo project.
|
|
12
|
+
|
|
13
|
+
## Main exports
|
|
14
|
+
|
|
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.
|
|
18
|
+
- Public prop types describe each state view and its action footer.
|
|
19
|
+
|
|
20
|
+
`EmptyView` and `ErrorView` always render their supplied children. Their only
|
|
21
|
+
container-specific option is `contentContainerStyle`, which styles the inner
|
|
22
|
+
content separately from the outer `style`. They accept native/themed View props
|
|
23
|
+
and children; text, action, `variant`, `isEmpty`, and `error` props are not part
|
|
24
|
+
of their API. Use `DataView` for automatic state selection and configured details.
|
|
25
|
+
|
|
26
|
+
## Usage
|
|
27
|
+
|
|
28
|
+
```tsx
|
|
29
|
+
import { ActivityIndicator } from "react-native";
|
|
30
|
+
|
|
31
|
+
import { DataView } from "@impulse-ui-native/data-state";
|
|
32
|
+
|
|
33
|
+
<DataView
|
|
34
|
+
loading={query.isLoading}
|
|
35
|
+
error={query.error}
|
|
36
|
+
isEmpty={!query.data?.length}
|
|
37
|
+
LoadingComponent={ActivityIndicator}
|
|
38
|
+
errorViewProps={{
|
|
39
|
+
text: "Could not load projects.",
|
|
40
|
+
primaryActionLabel: "Try again",
|
|
41
|
+
onPressPrimaryAction: () => query.refetch(),
|
|
42
|
+
}}
|
|
43
|
+
emptyViewProps={{
|
|
44
|
+
text: "No projects yet.",
|
|
45
|
+
primaryActionLabel: "Create project",
|
|
46
|
+
onPressPrimaryAction: openCreateProject,
|
|
47
|
+
}}
|
|
48
|
+
>
|
|
49
|
+
<ProjectList projects={query.data ?? []} />
|
|
50
|
+
</DataView>;
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
While loading, `DataView` keeps its successful-state children mounted and
|
|
54
|
+
visually hidden beneath the loader. Give those children their expected loaded
|
|
55
|
+
height to prevent the surrounding layout from shifting when loading finishes.
|
|
56
|
+
|
|
57
|
+
The views use component tokens from `ThemeProvider` for their layout, layering, and presentation.
|
|
58
|
+
|
|
59
|
+
## Repository palette consistency
|
|
60
|
+
|
|
61
|
+
DataView and its internal state details/actions accept tone (default primary).
|
|
62
|
+
The icon accent and default action buttons use the same tone, with per-state tone
|
|
63
|
+
overrides allowed in errorViewProps/emptyViewProps. LoadingView passes the optional
|
|
64
|
+
tone prop to custom LoadingComponent; custom loaders decide how to consume it.
|
|
65
|
+
Details icon tokens move to dataState.details.colors[tone]. Skeletons remain neutral.
|
|
66
|
+
|
|
67
|
+
## Agent and design reference
|
|
68
|
+
|
|
69
|
+
Start with the [capability guide](../../docs/design-system/capabilities/data-state.md) for supported exports, props, defaults, composition rules, setup, and recipes. Use the [component chooser](../../docs/design-system/component-chooser.md) to select a package. These references describe the repository source; verify your installed package version before copying examples.
|
|
@@ -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();\n\n const dataStateTokens = tokens.dataState;\n const {\n error,\n tone = \"primary\",\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 const errorTone = errorViewProps.tone ?? tone;\n const emptyTone = emptyViewProps.tone ?? tone;\n\n return (\n <View\n alignItems=\"center\"\n justifyContent=\"center\"\n zIndex={dataStateTokens.content.zIndex}\n >\n {error ? <ErrorDetails {...errorViewProps} tone={errorTone} /> : null}\n {isEmpty ? <EmptyDetails {...emptyViewProps} tone={emptyTone} /> : null}\n </View>\n );\n }, [\n dataStateTokens.content.zIndex,\n emptyViewProps,\n error,\n errorViewProps,\n tone,\n isEmpty,\n ]);\n\n const showContent = !error && !isEmpty;\n\n return (\n <LoadingView\n tone={tone}\n {...rest}\n LoadingComponent={LoadingComponent}\n contentContainerStyle={contentContainerStyle}\n loading={loading}\n >\n {showContent ? children : null}\n {content}\n </LoadingView>\n );\n});\n"],"mappings":"AAoCM,SAKW,KALX;AApCN,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;AAEnC,QAAM,kBAAkB,OAAO;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,IACP;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,UAAM,YAAY,eAAe,QAAQ;AACzC,UAAM,YAAY,eAAe,QAAQ;AAEzC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,gBAAe;AAAA,QACf,QAAQ,gBAAgB,QAAQ;AAAA,QAE/B;AAAA,kBAAQ,oBAAC,gBAAc,GAAG,gBAAgB,MAAM,WAAW,IAAK;AAAA,UAChE,UAAU,oBAAC,gBAAc,GAAG,gBAAgB,MAAM,WAAW,IAAK;AAAA;AAAA;AAAA,IACrE;AAAA,EAEJ,GAAG;AAAA,IACD,gBAAgB,QAAQ;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,cAAc,CAAC,SAAS,CAAC;AAE/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACC,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA,sBAAc,WAAW;AAAA,QACzB;AAAA;AAAA;AAAA,EACH;AAEJ,CAAC;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/data-view.tsx"],"sourcesContent":["import { memo, PropsWithChildren, useMemo } from \"react\";\r\n\r\nimport { View } from \"@impulse-ui-native/primitives\";\r\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\r\n\r\nimport { DataViewProps } from \"../types\";\r\nimport { EmptyDetails } from \"./empty-details\";\r\nimport { ErrorDetails } from \"./error-details\";\r\nimport { LoadingView } from \"./loading-view\";\r\n\r\nexport const DataView = memo((props: PropsWithChildren<DataViewProps>) => {\r\n const tokens = useComponentsTokens();\r\n\r\n const dataStateTokens = tokens.dataState;\r\n const {\r\n error,\r\n tone = \"primary\",\r\n isEmpty,\r\n loading,\r\n errorViewProps,\r\n emptyViewProps,\r\n LoadingComponent,\r\n contentContainerStyle,\r\n children,\r\n ...rest\r\n } = props;\r\n\r\n const content = useMemo(() => {\r\n if (!error && !isEmpty) {\r\n return null;\r\n }\r\n\r\n const errorTone = errorViewProps.tone ?? tone;\r\n const emptyTone = emptyViewProps.tone ?? tone;\r\n\r\n return (\r\n <View\r\n alignItems=\"center\"\r\n justifyContent=\"center\"\r\n zIndex={dataStateTokens.content.zIndex}\r\n >\r\n {error ? <ErrorDetails {...errorViewProps} tone={errorTone} /> : null}\r\n {isEmpty ? <EmptyDetails {...emptyViewProps} tone={emptyTone} /> : null}\r\n </View>\r\n );\r\n }, [\r\n dataStateTokens.content.zIndex,\r\n emptyViewProps,\r\n error,\r\n errorViewProps,\r\n tone,\r\n isEmpty,\r\n ]);\r\n\r\n const showContent = !error && !isEmpty;\r\n\r\n return (\r\n <LoadingView\r\n tone={tone}\r\n {...rest}\r\n LoadingComponent={LoadingComponent}\r\n contentContainerStyle={contentContainerStyle}\r\n loading={loading}\r\n >\r\n {showContent ? children : null}\r\n {content}\r\n </LoadingView>\r\n );\r\n});\r\n"],"mappings":"AAoCM,SAKW,KALX;AApCN,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;AAEnC,QAAM,kBAAkB,OAAO;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,IACP;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,UAAM,YAAY,eAAe,QAAQ;AACzC,UAAM,YAAY,eAAe,QAAQ;AAEzC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,gBAAe;AAAA,QACf,QAAQ,gBAAgB,QAAQ;AAAA,QAE/B;AAAA,kBAAQ,oBAAC,gBAAc,GAAG,gBAAgB,MAAM,WAAW,IAAK;AAAA,UAChE,UAAU,oBAAC,gBAAc,GAAG,gBAAgB,MAAM,WAAW,IAAK;AAAA;AAAA;AAAA,IACrE;AAAA,EAEJ,GAAG;AAAA,IACD,gBAAgB,QAAQ;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,cAAc,CAAC,SAAS,CAAC;AAE/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACC,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA,sBAAc,WAAW;AAAA,QACzB;AAAA;AAAA;AAAA,EACH;AAEJ,CAAC;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/empty-details.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { EmptyIcon } from \"@impulse-ui-native/icon/icons/empty\";\nimport { Typography, View } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport { StateViewProps } from \"../types\";\nimport { StateActionsFooter } from \"./state-actions-footer\";\n\nexport const EmptyDetails = memo(function EmptyDetails(props: StateViewProps) {\n const tokens = useComponentsTokens();\n\n const detailsTokens = tokens.dataState.details;\n\n const iconColor = detailsTokens.colors[props.tone ?? \"primary\"].iconColor;\n\n return (\n <View alignItems=\"center\" justifyContent=\"center\" gap={detailsTokens.gap}>\n <EmptyIcon\n width={detailsTokens.iconSize}\n height={detailsTokens.iconSize}\n variant={props.variant}\n color={iconColor}\n />\n <Typography.Body>{props.text}</Typography.Body>\n <StateActionsFooter\n tone={props.tone}\n onPressPrimaryAction={props.onPressPrimaryAction}\n primaryActionLabel={props.primaryActionLabel}\n onPressSecondaryAction={props.onPressSecondaryAction}\n secondaryActionLabel={props.secondaryActionLabel}\n />\n </View>\n );\n});\n"],"mappings":"AAiBI,SACE,KADF;AAjBJ,SAAS,YAAY;AAErB,SAAS,iBAAiB;AAC1B,SAAS,YAAY,YAAY;AACjC,SAAS,2BAA2B;AAGpC,SAAS,0BAA0B;AAE5B,MAAM,eAAe,KAAK,SAASA,cAAa,OAAuB;AAC5E,QAAM,SAAS,oBAAoB;AAEnC,QAAM,gBAAgB,OAAO,UAAU;AAEvC,QAAM,YAAY,cAAc,OAAO,MAAM,QAAQ,SAAS,EAAE;AAEhE,SACE,qBAAC,QAAK,YAAW,UAAS,gBAAe,UAAS,KAAK,cAAc,KACnE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,cAAc;AAAA,QACrB,QAAQ,cAAc;AAAA,QACtB,SAAS,MAAM;AAAA,QACf,OAAO;AAAA;AAAA,IACT;AAAA,IACA,oBAAC,WAAW,MAAX,EAAiB,gBAAM,MAAK;AAAA,IAC7B;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,MAAM;AAAA,QACZ,sBAAsB,MAAM;AAAA,QAC5B,oBAAoB,MAAM;AAAA,QAC1B,wBAAwB,MAAM;AAAA,QAC9B,sBAAsB,MAAM;AAAA;AAAA,IAC9B;AAAA,KACF;AAEJ,CAAC;","names":["EmptyDetails"]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/empty-details.tsx"],"sourcesContent":["import { memo } from \"react\";\r\n\r\nimport { EmptyIcon } from \"@impulse-ui-native/icon/icons/empty\";\r\nimport { Typography, View } from \"@impulse-ui-native/primitives\";\r\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\r\n\r\nimport { StateViewProps } from \"../types\";\r\nimport { StateActionsFooter } from \"./state-actions-footer\";\r\n\r\nexport const EmptyDetails = memo(function EmptyDetails(props: StateViewProps) {\r\n const tokens = useComponentsTokens();\r\n\r\n const detailsTokens = tokens.dataState.details;\r\n\r\n const iconColor = detailsTokens.colors[props.tone ?? \"primary\"].iconColor;\r\n\r\n return (\r\n <View alignItems=\"center\" justifyContent=\"center\" gap={detailsTokens.gap}>\r\n <EmptyIcon\r\n width={detailsTokens.iconSize}\r\n height={detailsTokens.iconSize}\r\n variant={props.variant}\r\n color={iconColor}\r\n />\r\n <Typography.Body>{props.text}</Typography.Body>\r\n <StateActionsFooter\r\n tone={props.tone}\r\n onPressPrimaryAction={props.onPressPrimaryAction}\r\n primaryActionLabel={props.primaryActionLabel}\r\n onPressSecondaryAction={props.onPressSecondaryAction}\r\n secondaryActionLabel={props.secondaryActionLabel}\r\n />\r\n </View>\r\n );\r\n});\r\n"],"mappings":"AAiBI,SACE,KADF;AAjBJ,SAAS,YAAY;AAErB,SAAS,iBAAiB;AAC1B,SAAS,YAAY,YAAY;AACjC,SAAS,2BAA2B;AAGpC,SAAS,0BAA0B;AAE5B,MAAM,eAAe,KAAK,SAASA,cAAa,OAAuB;AAC5E,QAAM,SAAS,oBAAoB;AAEnC,QAAM,gBAAgB,OAAO,UAAU;AAEvC,QAAM,YAAY,cAAc,OAAO,MAAM,QAAQ,SAAS,EAAE;AAEhE,SACE,qBAAC,QAAK,YAAW,UAAS,gBAAe,UAAS,KAAK,cAAc,KACnE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,cAAc;AAAA,QACrB,QAAQ,cAAc;AAAA,QACtB,SAAS,MAAM;AAAA,QACf,OAAO;AAAA;AAAA,IACT;AAAA,IACA,oBAAC,WAAW,MAAX,EAAiB,gBAAM,MAAK;AAAA,IAC7B;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,MAAM;AAAA,QACZ,sBAAsB,MAAM;AAAA,QAC5B,oBAAoB,MAAM;AAAA,QAC1B,wBAAwB,MAAM;AAAA,QAC9B,sBAAsB,MAAM;AAAA;AAAA,IAC9B;AAAA,KACF;AAEJ,CAAC;","names":["EmptyDetails"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/error-details.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { CloudXIcon } from \"@impulse-ui-native/icon/icons/cloud-x\";\nimport { Typography, View } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport { StateViewProps } from \"../types\";\nimport { StateActionsFooter } from \"./state-actions-footer\";\n\nexport const ErrorDetails = memo(function ErrorDetails(props: StateViewProps) {\n const tokens = useComponentsTokens();\n\n const detailsTokens = tokens.dataState.details;\n\n const iconColor = detailsTokens.colors[props.tone ?? \"primary\"].iconColor;\n\n return (\n <View alignItems=\"center\" justifyContent=\"center\" gap={detailsTokens.gap}>\n <CloudXIcon\n width={detailsTokens.iconSize}\n height={detailsTokens.iconSize}\n variant={props.variant}\n color={iconColor}\n />\n <Typography.Body>{props.text}</Typography.Body>\n <StateActionsFooter\n tone={props.tone}\n onPressPrimaryAction={props.onPressPrimaryAction}\n primaryActionLabel={props.primaryActionLabel}\n onPressSecondaryAction={props.onPressSecondaryAction}\n secondaryActionLabel={props.secondaryActionLabel}\n />\n </View>\n );\n});\n"],"mappings":"AAiBI,SACE,KADF;AAjBJ,SAAS,YAAY;AAErB,SAAS,kBAAkB;AAC3B,SAAS,YAAY,YAAY;AACjC,SAAS,2BAA2B;AAGpC,SAAS,0BAA0B;AAE5B,MAAM,eAAe,KAAK,SAASA,cAAa,OAAuB;AAC5E,QAAM,SAAS,oBAAoB;AAEnC,QAAM,gBAAgB,OAAO,UAAU;AAEvC,QAAM,YAAY,cAAc,OAAO,MAAM,QAAQ,SAAS,EAAE;AAEhE,SACE,qBAAC,QAAK,YAAW,UAAS,gBAAe,UAAS,KAAK,cAAc,KACnE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,cAAc;AAAA,QACrB,QAAQ,cAAc;AAAA,QACtB,SAAS,MAAM;AAAA,QACf,OAAO;AAAA;AAAA,IACT;AAAA,IACA,oBAAC,WAAW,MAAX,EAAiB,gBAAM,MAAK;AAAA,IAC7B;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,MAAM;AAAA,QACZ,sBAAsB,MAAM;AAAA,QAC5B,oBAAoB,MAAM;AAAA,QAC1B,wBAAwB,MAAM;AAAA,QAC9B,sBAAsB,MAAM;AAAA;AAAA,IAC9B;AAAA,KACF;AAEJ,CAAC;","names":["ErrorDetails"]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/error-details.tsx"],"sourcesContent":["import { memo } from \"react\";\r\n\r\nimport { CloudXIcon } from \"@impulse-ui-native/icon/icons/cloud-x\";\r\nimport { Typography, View } from \"@impulse-ui-native/primitives\";\r\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\r\n\r\nimport { StateViewProps } from \"../types\";\r\nimport { StateActionsFooter } from \"./state-actions-footer\";\r\n\r\nexport const ErrorDetails = memo(function ErrorDetails(props: StateViewProps) {\r\n const tokens = useComponentsTokens();\r\n\r\n const detailsTokens = tokens.dataState.details;\r\n\r\n const iconColor = detailsTokens.colors[props.tone ?? \"primary\"].iconColor;\r\n\r\n return (\r\n <View alignItems=\"center\" justifyContent=\"center\" gap={detailsTokens.gap}>\r\n <CloudXIcon\r\n width={detailsTokens.iconSize}\r\n height={detailsTokens.iconSize}\r\n variant={props.variant}\r\n color={iconColor}\r\n />\r\n <Typography.Body>{props.text}</Typography.Body>\r\n <StateActionsFooter\r\n tone={props.tone}\r\n onPressPrimaryAction={props.onPressPrimaryAction}\r\n primaryActionLabel={props.primaryActionLabel}\r\n onPressSecondaryAction={props.onPressSecondaryAction}\r\n secondaryActionLabel={props.secondaryActionLabel}\r\n />\r\n </View>\r\n );\r\n});\r\n"],"mappings":"AAiBI,SACE,KADF;AAjBJ,SAAS,YAAY;AAErB,SAAS,kBAAkB;AAC3B,SAAS,YAAY,YAAY;AACjC,SAAS,2BAA2B;AAGpC,SAAS,0BAA0B;AAE5B,MAAM,eAAe,KAAK,SAASA,cAAa,OAAuB;AAC5E,QAAM,SAAS,oBAAoB;AAEnC,QAAM,gBAAgB,OAAO,UAAU;AAEvC,QAAM,YAAY,cAAc,OAAO,MAAM,QAAQ,SAAS,EAAE;AAEhE,SACE,qBAAC,QAAK,YAAW,UAAS,gBAAe,UAAS,KAAK,cAAc,KACnE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,cAAc;AAAA,QACrB,QAAQ,cAAc;AAAA,QACtB,SAAS,MAAM;AAAA,QACf,OAAO;AAAA;AAAA,IACT;AAAA,IACA,oBAAC,WAAW,MAAX,EAAiB,gBAAM,MAAK;AAAA,IAC7B;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,MAAM;AAAA,QACZ,sBAAsB,MAAM;AAAA,QAC5B,oBAAoB,MAAM;AAAA,QAC1B,wBAAwB,MAAM;AAAA,QAC9B,sBAAsB,MAAM;AAAA;AAAA,IAC9B;AAAA,KACF;AAEJ,CAAC;","names":["ErrorDetails"]}
|
|
@@ -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 tone = \"primary\",\n children,\n LoadingComponent,\n contentContainerStyle,\n style,\n ...rest\n } = props;\n\n const tokens = useComponentsTokens();\n\n const loadingTokens = tokens.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: loadingTokens.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: loadingTokens.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: loadingTokens.transitionDuration,\n easing: Easing.linear,\n });\n }, [\n childrenOpacity,\n loaderOpacity,\n loading,\n loadingTokens.transitionDuration,\n ]);\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 tone={tone} />\n </View>\n </Animated.View>\n ) : null}\n </View>\n );\n});\n"],"mappings":"AAiHI,SACE,KADF;AAjHJ,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,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,SAAS,oBAAoB;AAEnC,QAAM,gBAAgB,OAAO,UAAU;AAEvC,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,cAAc;AAAA,IACtB,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,cAAc;AAAA,QACxB,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,cAAc;AAAA,MACxB,QAAQ,OAAO;AAAA,IACjB,CAAC;AAAA,EACH,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,EAChB,CAAC;AAED,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,MAAY,GAChC,GACF,IACE;AAAA,KACN;AAEJ,CAAC;","names":["LoadingView"]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/loading-view.tsx"],"sourcesContent":["import { memo, useCallback, useEffect, useMemo, useState } from \"react\";\r\nimport { LayoutChangeEvent, StyleProp, ViewStyle } from \"react-native\";\r\nimport Animated, {\r\n Easing,\r\n useAnimatedStyle,\r\n useSharedValue,\r\n withTiming,\r\n} from \"react-native-reanimated\";\r\nimport { scheduleOnRN } from \"react-native-worklets\";\r\n\r\nimport { View } from \"@impulse-ui-native/primitives\";\r\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\r\n\r\nimport { LoadingViewProps } from \"../types\";\r\n\r\nexport const LoadingView = memo(function LoadingView(props: LoadingViewProps) {\r\n const {\r\n loading,\r\n tone = \"primary\",\r\n children,\r\n LoadingComponent,\r\n contentContainerStyle,\r\n style,\r\n ...rest\r\n } = props;\r\n\r\n const tokens = useComponentsTokens();\r\n\r\n const loadingTokens = tokens.dataState.loading;\r\n\r\n const [shouldMountLoader, setShouldMountLoader] = useState(loading);\r\n const [loaderHeight, setLoaderHeight] = useState(0);\r\n\r\n const loaderOpacity = useSharedValue(loading ? 1 : 0);\r\n const childrenOpacity = useSharedValue(loading ? 0 : 1);\r\n\r\n const loaderStyles = useAnimatedStyle(() => ({\r\n position: \"absolute\",\r\n bottom: 0,\r\n left: 0,\r\n right: 0,\r\n top: 0,\r\n zIndex: loadingTokens.loaderZIndex,\r\n opacity: loaderOpacity.value,\r\n }));\r\n\r\n const childrenStyles = useAnimatedStyle(() => ({\r\n opacity: childrenOpacity.value,\r\n }));\r\n\r\n const containerStyle = useMemo<StyleProp<ViewStyle>>(\r\n () => [\r\n {\r\n position: \"relative\",\r\n minHeight: shouldMountLoader ? loaderHeight : undefined,\r\n },\r\n style,\r\n ],\r\n [loaderHeight, shouldMountLoader, style],\r\n );\r\n\r\n const childrenContainerStyles = useMemo(\r\n () => [contentContainerStyle, childrenStyles],\r\n [contentContainerStyle, childrenStyles],\r\n );\r\n\r\n const onLoaderLayout = useCallback((event: LayoutChangeEvent) => {\r\n const height = event.nativeEvent.layout.height;\r\n\r\n setLoaderHeight((prev) => {\r\n if (prev === height) {\r\n return prev;\r\n }\r\n\r\n return height;\r\n });\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (loading) {\r\n setShouldMountLoader(true);\r\n\r\n loaderOpacity.value = 1;\r\n childrenOpacity.value = 0;\r\n\r\n return;\r\n }\r\n\r\n loaderOpacity.value = withTiming(\r\n 0,\r\n {\r\n duration: loadingTokens.transitionDuration,\r\n easing: Easing.linear,\r\n },\r\n (finished) => {\r\n if (finished) {\r\n scheduleOnRN(setShouldMountLoader, false);\r\n }\r\n },\r\n );\r\n\r\n childrenOpacity.value = withTiming(1, {\r\n duration: loadingTokens.transitionDuration,\r\n easing: Easing.linear,\r\n });\r\n }, [\r\n childrenOpacity,\r\n loaderOpacity,\r\n loading,\r\n loadingTokens.transitionDuration,\r\n ]);\r\n\r\n return (\r\n <View {...rest} style={containerStyle}>\r\n <Animated.View style={childrenContainerStyles}>{children}</Animated.View>\r\n\r\n {shouldMountLoader ? (\r\n <Animated.View style={loaderStyles} pointerEvents=\"auto\">\r\n <View onLayout={onLoaderLayout}>\r\n <LoadingComponent tone={tone} />\r\n </View>\r\n </Animated.View>\r\n ) : null}\r\n </View>\r\n );\r\n});\r\n"],"mappings":"AAiHI,SACE,KADF;AAjHJ,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,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,SAAS,oBAAoB;AAEnC,QAAM,gBAAgB,OAAO,UAAU;AAEvC,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,cAAc;AAAA,IACtB,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,cAAc;AAAA,QACxB,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,cAAc;AAAA,MACxB,QAAQ,OAAO;AAAA,IACjB,CAAC;AAAA,EACH,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,EAChB,CAAC;AAED,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,MAAY,GAChC,GACF,IACE;AAAA,KACN;AAEJ,CAAC;","names":["LoadingView"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/state-actions-footer.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { Button, View } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport { StateActionsFooterProps } from \"../types\";\n\nexport const StateActionsFooter = memo(function StateActionsFooter(\n props: StateActionsFooterProps,\n) {\n const tokens = useComponentsTokens();\n\n const actionsFooterTokens = tokens.dataState.actionsFooter;\n const {\n onPressPrimaryAction,\n onPressSecondaryAction,\n primaryActionLabel,\n tone = \"primary\",\n secondaryActionLabel,\n ...rest\n } = props;\n\n return (\n <View\n flexDirection=\"row\"\n gap={actionsFooterTokens.gap}\n justifyContent=\"center\"\n alignItems=\"center\"\n {...rest}\n >\n <Button tone={tone} onPress={props.onPressPrimaryAction}>\n {props.primaryActionLabel}\n </Button>\n {props.onPressSecondaryAction ? (\n <Button\n tone={tone}\n variant=\"outlined\"\n onPress={props.onPressSecondaryAction}\n >\n {props.secondaryActionLabel}\n </Button>\n ) : null}\n </View>\n );\n});\n"],"mappings":"AAuBI,SAOE,KAPF;AAvBJ,SAAS,YAAY;AAErB,SAAS,QAAQ,YAAY;AAC7B,SAAS,2BAA2B;AAI7B,MAAM,qBAAqB,KAAK,SAASA,oBAC9C,OACA;AACA,QAAM,SAAS,oBAAoB;AAEnC,QAAM,sBAAsB,OAAO,UAAU;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAc;AAAA,MACd,KAAK,oBAAoB;AAAA,MACzB,gBAAe;AAAA,MACf,YAAW;AAAA,MACV,GAAG;AAAA,MAEJ;AAAA,4BAAC,UAAO,MAAY,SAAS,MAAM,sBAChC,gBAAM,oBACT;AAAA,QACC,MAAM,yBACL;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,SAAQ;AAAA,YACR,SAAS,MAAM;AAAA,YAEd,gBAAM;AAAA;AAAA,QACT,IACE;AAAA;AAAA;AAAA,EACN;AAEJ,CAAC;","names":["StateActionsFooter"]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/state-actions-footer.tsx"],"sourcesContent":["import { memo } from \"react\";\r\n\r\nimport { Button, View } from \"@impulse-ui-native/primitives\";\r\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\r\n\r\nimport { StateActionsFooterProps } from \"../types\";\r\n\r\nexport const StateActionsFooter = memo(function StateActionsFooter(\r\n props: StateActionsFooterProps,\r\n) {\r\n const tokens = useComponentsTokens();\r\n\r\n const actionsFooterTokens = tokens.dataState.actionsFooter;\r\n const {\r\n onPressPrimaryAction,\r\n onPressSecondaryAction,\r\n primaryActionLabel,\r\n tone = \"primary\",\r\n secondaryActionLabel,\r\n ...rest\r\n } = props;\r\n\r\n return (\r\n <View\r\n flexDirection=\"row\"\r\n gap={actionsFooterTokens.gap}\r\n justifyContent=\"center\"\r\n alignItems=\"center\"\r\n {...rest}\r\n >\r\n <Button tone={tone} onPress={props.onPressPrimaryAction}>\r\n {props.primaryActionLabel}\r\n </Button>\r\n {props.onPressSecondaryAction ? (\r\n <Button\r\n tone={tone}\r\n variant=\"outlined\"\r\n onPress={props.onPressSecondaryAction}\r\n >\r\n {props.secondaryActionLabel}\r\n </Button>\r\n ) : null}\r\n </View>\r\n );\r\n});\r\n"],"mappings":"AAuBI,SAOE,KAPF;AAvBJ,SAAS,YAAY;AAErB,SAAS,QAAQ,YAAY;AAC7B,SAAS,2BAA2B;AAI7B,MAAM,qBAAqB,KAAK,SAASA,oBAC9C,OACA;AACA,QAAM,SAAS,oBAAoB;AAEnC,QAAM,sBAAsB,OAAO,UAAU;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAc;AAAA,MACd,KAAK,oBAAoB;AAAA,MACzB,gBAAe;AAAA,MACf,YAAW;AAAA,MACV,GAAG;AAAA,MAEJ;AAAA,4BAAC,UAAO,MAAY,SAAS,MAAM,sBAChC,gBAAM,oBACT;AAAA,QACC,MAAM,yBACL;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,SAAQ;AAAA,YACR,SAAS,MAAM;AAAA,YAEd,gBAAM;AAAA;AAAA,QACT,IACE;AAAA;AAAA;AAAA,EACN;AAEJ,CAAC;","names":["StateActionsFooter"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/data-state",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "16.0.0",
|
|
4
4
|
"description": "Loading, empty, and error state components for ImpulseUI Native applications.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
@@ -28,11 +28,11 @@
|
|
|
28
28
|
],
|
|
29
29
|
"sideEffects": false,
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@impulse-ui-native/core": "
|
|
32
|
-
"@impulse-ui-native/theme": "
|
|
33
|
-
"@impulse-ui-native/primitives": "
|
|
34
|
-
"@impulse-ui-native/icon": "
|
|
35
|
-
"@impulse-ui-native/skeleton": "
|
|
31
|
+
"@impulse-ui-native/core": "16.0.0",
|
|
32
|
+
"@impulse-ui-native/theme": "16.0.0",
|
|
33
|
+
"@impulse-ui-native/primitives": "16.0.0",
|
|
34
|
+
"@impulse-ui-native/icon": "16.0.0",
|
|
35
|
+
"@impulse-ui-native/skeleton": "16.0.0"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@impulse-ui-native/eslint-config": "1.0.0",
|