Skip to content

Commit e295b32

Browse files
sieu-dbsieu-db
authored
Support loading indicator component (#924)
* support loading indicator component * update loading indicator * resolve comments feedback
1 parent 304f6f9 commit e295b32

File tree

6 files changed

+92
-178
lines changed

6 files changed

+92
-178
lines changed

‎example/src/App.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,10 +73,10 @@ import VideoPlayerExample from "./VideoPlayerExample";
7373
import PinInputExample from "./PinInputExample";
7474
import KeyboardAvoidingViewExample from "./KeyboardAvoidingViewExample";
7575
import ThemeExample from "./ThemeExample";
76-
import ActivityIndicatorExample from "./ActivityIndicatorExample";
76+
import LoadingIndicatorExample from "./LoadingIndicatorExample";
7777

7878
const ROUTES = {
79-
ActivityIndicator: ActivityIndicatorExample,
79+
LoadingIndicator: LoadingIndicatorExample,
8080
Theme: ThemeExample,
8181
AudioPlayer: AudioPlayerExample,
8282
Layout: LayoutExample,

example/src/ActivityIndicatorExample.tsx renamed to example/src/LoadingIndicatorExample.tsx

Lines changed: 18 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import * as React from "react";
22
import { View, StyleSheet, Text } from "react-native";
3-
import { ActivityIndicator, withTheme } from "@draftbit/ui";
3+
import { LoadingIndicator, withTheme } from "@draftbit/ui";
44
import Section, { Container } from "./Section";
5-
import { ActivityIndicatorType } from "@draftbit/core/lib/typescript/src/components/ActivityIndicator";
5+
import { LoadingIndicatorType } from "@draftbit/core/lib/typescript/src/components/LoadingIndicator";
66

77
interface WrapperProps {
88
label: string;
@@ -20,66 +20,50 @@ const Wrapper: React.FC<WrapperProps> = ({ label, children }) => {
2020
);
2121
};
2222

23-
const ActivityIndicatorExample: React.FC = () => {
23+
const LoadingIndicatorExample: React.FC = () => {
2424
return (
2525
<Container style={{}}>
26-
<Section style={{}} title="Default">
27-
<View style={{ flexDirection: "row" }}>
28-
<Wrapper label="Small">
29-
<ActivityIndicator size="small" />
30-
</Wrapper>
31-
<Wrapper label="Large">
32-
<ActivityIndicator size="large" />
33-
</Wrapper>
34-
<Wrapper label="Size">
35-
<ActivityIndicator size={80} />
36-
</Wrapper>
37-
</View>
38-
</Section>
3926
<Section style={{}} title="Loading">
4027
<View style={{ flexDirection: "row" }}>
41-
<Wrapper label="Default">
42-
<ActivityIndicator />
43-
</Wrapper>
4428
<Wrapper label="Plane">
45-
<ActivityIndicator type={ActivityIndicatorType.plane} />
29+
<LoadingIndicator type={LoadingIndicatorType.plane} />
4630
</Wrapper>
4731
<Wrapper label="Chase">
48-
<ActivityIndicator type={ActivityIndicatorType.chase} />
32+
<LoadingIndicator type={LoadingIndicatorType.chase} />
4933
</Wrapper>
5034
<Wrapper label="Bounce">
51-
<ActivityIndicator type={ActivityIndicatorType.bounce} />
35+
<LoadingIndicator type={LoadingIndicatorType.bounce} />
5236
</Wrapper>
5337
<Wrapper label="Wave">
54-
<ActivityIndicator type={ActivityIndicatorType.wave} />
38+
<LoadingIndicator type={LoadingIndicatorType.wave} />
5539
</Wrapper>
5640
<Wrapper label="Pulse">
57-
<ActivityIndicator type={ActivityIndicatorType.pulse} />
41+
<LoadingIndicator type={LoadingIndicatorType.pulse} />
42+
</Wrapper>
43+
<Wrapper label="Flow">
44+
<LoadingIndicator type={LoadingIndicatorType.flow} />
5845
</Wrapper>
5946
</View>
6047
</Section>
6148
<Section style={{}} title="Loading">
6249
<View style={{ flexDirection: "row" }}>
63-
<Wrapper label="Flow">
64-
<ActivityIndicator type={ActivityIndicatorType.flow} />
65-
</Wrapper>
6650
<Wrapper label="Swing">
67-
<ActivityIndicator type={ActivityIndicatorType.swing} />
51+
<LoadingIndicator type={LoadingIndicatorType.swing} />
6852
</Wrapper>
6953
<Wrapper label="Circle">
70-
<ActivityIndicator type={ActivityIndicatorType.circle} />
54+
<LoadingIndicator type={LoadingIndicatorType.circle} />
7155
</Wrapper>
7256
<Wrapper label="Circle Fade">
73-
<ActivityIndicator type={ActivityIndicatorType.circleFade} />
57+
<LoadingIndicator type={LoadingIndicatorType.circleFade} />
7458
</Wrapper>
7559
<Wrapper label="Grid">
76-
<ActivityIndicator type={ActivityIndicatorType.grid} />
60+
<LoadingIndicator type={LoadingIndicatorType.grid} />
7761
</Wrapper>
7862
<Wrapper label="Fold">
79-
<ActivityIndicator type={ActivityIndicatorType.fold} />
63+
<LoadingIndicator type={LoadingIndicatorType.fold} />
8064
</Wrapper>
8165
<Wrapper label="Wander">
82-
<ActivityIndicator type={ActivityIndicatorType.wander} />
66+
<LoadingIndicator type={LoadingIndicatorType.wander} />
8367
</Wrapper>
8468
</View>
8569
</Section>
@@ -102,4 +86,4 @@ const styles = StyleSheet.create({
10286
},
10387
});
10488

105-
export default withTheme(ActivityIndicatorExample);
89+
export default withTheme(LoadingIndicatorExample);

‎packages/core/src/components/ActivityIndicator.tsx‎

Lines changed: 0 additions & 140 deletions
This file was deleted.

‎packages/core/src/components/LoadingIndicator.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import * as React from "react";
2+
import { StyleProp, ViewStyle } from "react-native";
3+
import { withTheme } from "@draftbit/theme";
4+
import type { ReadTheme } from "@draftbit/theme";
5+
import {
6+
Bounce,
7+
Chase,
8+
Circle,
9+
CircleFade,
10+
Flow,
11+
Fold,
12+
Grid,
13+
Plane,
14+
Pulse,
15+
Swing,
16+
Wander,
17+
Wave,
18+
} from "react-native-animated-spinkit";
19+
20+
export enum LoadingIndicatorType {
21+
plane = "plane",
22+
chase = "chase",
23+
bounce = "bounce",
24+
wave = "wave",
25+
pulse = "pulse",
26+
flow = "flow",
27+
swing = "swing",
28+
circle = "circle",
29+
circleFade = "circleFade",
30+
grid = "grid",
31+
fold = "fold",
32+
wander = "wander",
33+
}
34+
35+
type Props = {
36+
style?: StyleProp<ViewStyle>;
37+
color?: string;
38+
theme: ReadTheme;
39+
type?: LoadingIndicatorType;
40+
size?: number;
41+
};
42+
43+
const SPINNER_COMPONENTS = {
44+
[LoadingIndicatorType.plane]: Plane,
45+
[LoadingIndicatorType.chase]: Chase,
46+
[LoadingIndicatorType.bounce]: Bounce,
47+
[LoadingIndicatorType.wave]: Wave,
48+
[LoadingIndicatorType.pulse]: Pulse,
49+
[LoadingIndicatorType.flow]: Flow,
50+
[LoadingIndicatorType.swing]: Swing,
51+
[LoadingIndicatorType.circle]: Circle,
52+
[LoadingIndicatorType.circleFade]: CircleFade,
53+
[LoadingIndicatorType.grid]: Grid,
54+
[LoadingIndicatorType.fold]: Fold,
55+
[LoadingIndicatorType.wander]: Wander,
56+
};
57+
58+
const LoadingIndicator: React.FC<React.PropsWithChildren<Props>> = ({
59+
theme,
60+
color = theme.colors.branding.primary,
61+
type = LoadingIndicatorType.plane,
62+
size,
63+
style,
64+
...rest
65+
}) => {
66+
const SpinnerComponent = SPINNER_COMPONENTS[type];
67+
return <SpinnerComponent size={size} color={color} style={style} {...rest} />;
68+
};
69+
70+
export default withTheme(LoadingIndicator);

‎packages/core/src/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export { default as SimpleStyleMasonryFlashList } from "./components/SimpleStyle
7979
export { default as SimpleStyleScrollView } from "./components/SimpleStyleScrollables/SimpleStyleScrollView";
8080
export { default as SimpleStyleSectionList } from "./components/SimpleStyleScrollables/SimpleStyleSectionList";
8181
export { default as SimpleStyleSwipeableList } from "./components/SimpleStyleScrollables/SimpleStyleSwipeableList";
82-
export { default as ActivityIndicator } from "./components/ActivityIndicator";
82+
export { default as LoadingIndicator } from "./components/LoadingIndicator";
8383

8484
/* Deprecated: Fix or Delete! */
8585
export { default as AccordionItem } from "./deprecated-components/AccordionItem";

‎packages/ui/src/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export {
7575
SimpleStyleScrollView,
7676
SimpleStyleSectionList,
7777
SimpleStyleSwipeableList,
78-
ActivityIndicator,
78+
LoadingIndicator,
7979
} from "@draftbit/core";
8080

8181
export {

0 commit comments

Comments
 (0)