Support loading indicator component (#924)

* support loading indicator component * update loading indicator * resolve comments feedback
draftbit · Aug 11, 2024 · e295b32 · e295b32
1 parent 304f6f9
commit e295b32
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 178 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -73,10 +73,10 @@ import VideoPlayerExample from "./VideoPlayerExample";
 import PinInputExample from "./PinInputExample";
 import KeyboardAvoidingViewExample from "./KeyboardAvoidingViewExample";
 import ThemeExample from "./ThemeExample";
-import ActivityIndicatorExample from "./ActivityIndicatorExample";
+import LoadingIndicatorExample from "./LoadingIndicatorExample";
 
 const ROUTES = {
-  ActivityIndicator: ActivityIndicatorExample,
+  LoadingIndicator: LoadingIndicatorExample,
   Theme: ThemeExample,
   AudioPlayer: AudioPlayerExample,
   Layout: LayoutExample,

diff --git a/example/src/ActivityIndicatorExample.tsx → example/src/LoadingIndicatorExample.tsx b/example/src/ActivityIndicatorExample.tsx → example/src/LoadingIndicatorExample.tsx
@@ -1,8 +1,8 @@
 import * as React from "react";
 import { View, StyleSheet, Text } from "react-native";
-import { ActivityIndicator, withTheme } from "@draftbit/ui";
+import { LoadingIndicator, withTheme } from "@draftbit/ui";
 import Section, { Container } from "./Section";
-import { ActivityIndicatorType } from "@draftbit/core/lib/typescript/src/components/ActivityIndicator";
+import { LoadingIndicatorType } from "@draftbit/core/lib/typescript/src/components/LoadingIndicator";
 
 interface WrapperProps {
   label: string;
@@ -20,66 +20,50 @@ const Wrapper: React.FC<WrapperProps> = ({ label, children }) => {
   );
 };
 
-const ActivityIndicatorExample: React.FC = () => {
+const LoadingIndicatorExample: React.FC = () => {
   return (
     <Container style={{}}>
-      <Section style={{}} title="Default">
-        <View style={{ flexDirection: "row" }}>
-          <Wrapper label="Small">
-            <ActivityIndicator size="small" />
-          </Wrapper>
-          <Wrapper label="Large">
-            <ActivityIndicator size="large" />
-          </Wrapper>
-          <Wrapper label="Size">
-            <ActivityIndicator size={80} />
-          </Wrapper>
-        </View>
-      </Section>
       <Section style={{}} title="Loading">
         <View style={{ flexDirection: "row" }}>
-          <Wrapper label="Default">
-            <ActivityIndicator />
-          </Wrapper>
           <Wrapper label="Plane">
-            <ActivityIndicator type={ActivityIndicatorType.plane} />
+            <LoadingIndicator type={LoadingIndicatorType.plane} />
           </Wrapper>
           <Wrapper label="Chase">
-            <ActivityIndicator type={ActivityIndicatorType.chase} />
+            <LoadingIndicator type={LoadingIndicatorType.chase} />
           </Wrapper>
           <Wrapper label="Bounce">
-            <ActivityIndicator type={ActivityIndicatorType.bounce} />
+            <LoadingIndicator type={LoadingIndicatorType.bounce} />
           </Wrapper>
           <Wrapper label="Wave">
-            <ActivityIndicator type={ActivityIndicatorType.wave} />
+            <LoadingIndicator type={LoadingIndicatorType.wave} />
           </Wrapper>
           <Wrapper label="Pulse">
-            <ActivityIndicator type={ActivityIndicatorType.pulse} />
+            <LoadingIndicator type={LoadingIndicatorType.pulse} />
+          </Wrapper>
+          <Wrapper label="Flow">
+            <LoadingIndicator type={LoadingIndicatorType.flow} />
           </Wrapper>
         </View>
       </Section>
       <Section style={{}} title="Loading">
         <View style={{ flexDirection: "row" }}>
-          <Wrapper label="Flow">
-            <ActivityIndicator type={ActivityIndicatorType.flow} />
-          </Wrapper>
           <Wrapper label="Swing">
-            <ActivityIndicator type={ActivityIndicatorType.swing} />
+            <LoadingIndicator type={LoadingIndicatorType.swing} />
           </Wrapper>
           <Wrapper label="Circle">
-            <ActivityIndicator type={ActivityIndicatorType.circle} />
+            <LoadingIndicator type={LoadingIndicatorType.circle} />
           </Wrapper>
           <Wrapper label="Circle Fade">
-            <ActivityIndicator type={ActivityIndicatorType.circleFade} />
+            <LoadingIndicator type={LoadingIndicatorType.circleFade} />
           </Wrapper>
           <Wrapper label="Grid">
-            <ActivityIndicator type={ActivityIndicatorType.grid} />
+            <LoadingIndicator type={LoadingIndicatorType.grid} />
           </Wrapper>
           <Wrapper label="Fold">
-            <ActivityIndicator type={ActivityIndicatorType.fold} />
+            <LoadingIndicator type={LoadingIndicatorType.fold} />
           </Wrapper>
           <Wrapper label="Wander">
-            <ActivityIndicator type={ActivityIndicatorType.wander} />
+            <LoadingIndicator type={LoadingIndicatorType.wander} />
           </Wrapper>
         </View>
       </Section>
@@ -102,4 +86,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default withTheme(ActivityIndicatorExample);
+export default withTheme(LoadingIndicatorExample);
diff --git a/packages/core/src/components/ActivityIndicator.tsx b/packages/core/src/components/ActivityIndicator.tsx
diff --git a/packages/core/src/components/LoadingIndicator.tsx b/packages/core/src/components/LoadingIndicator.tsx
@@ -0,0 +1,70 @@
+import * as React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+import { withTheme } from "@draftbit/theme";
+import type { ReadTheme } from "@draftbit/theme";
+import {
+  Bounce,
+  Chase,
+  Circle,
+  CircleFade,
+  Flow,
+  Fold,
+  Grid,
+  Plane,
+  Pulse,
+  Swing,
+  Wander,
+  Wave,
+} from "react-native-animated-spinkit";
+
+export enum LoadingIndicatorType {
+  plane = "plane",
+  chase = "chase",
+  bounce = "bounce",
+  wave = "wave",
+  pulse = "pulse",
+  flow = "flow",
+  swing = "swing",
+  circle = "circle",
+  circleFade = "circleFade",
+  grid = "grid",
+  fold = "fold",
+  wander = "wander",
+}
+
+type Props = {
+  style?: StyleProp<ViewStyle>;
+  color?: string;
+  theme: ReadTheme;
+  type?: LoadingIndicatorType;
+  size?: number;
+};
+
+const SPINNER_COMPONENTS = {
+  [LoadingIndicatorType.plane]: Plane,
+  [LoadingIndicatorType.chase]: Chase,
+  [LoadingIndicatorType.bounce]: Bounce,
+  [LoadingIndicatorType.wave]: Wave,
+  [LoadingIndicatorType.pulse]: Pulse,
+  [LoadingIndicatorType.flow]: Flow,
+  [LoadingIndicatorType.swing]: Swing,
+  [LoadingIndicatorType.circle]: Circle,
+  [LoadingIndicatorType.circleFade]: CircleFade,
+  [LoadingIndicatorType.grid]: Grid,
+  [LoadingIndicatorType.fold]: Fold,
+  [LoadingIndicatorType.wander]: Wander,
+};
+
+const LoadingIndicator: React.FC<React.PropsWithChildren<Props>> = ({
+  theme,
+  color = theme.colors.branding.primary,
+  type = LoadingIndicatorType.plane,
+  size,
+  style,
+  ...rest
+}) => {
+  const SpinnerComponent = SPINNER_COMPONENTS[type];
+  return <SpinnerComponent size={size} color={color} style={style} {...rest} />;
+};
+
+export default withTheme(LoadingIndicator);
diff --git a/packages/core/src/index.tsx b/packages/core/src/index.tsx
@@ -79,7 +79,7 @@ export { default as SimpleStyleMasonryFlashList } from "./components/SimpleStyle
 export { default as SimpleStyleScrollView } from "./components/SimpleStyleScrollables/SimpleStyleScrollView";
 export { default as SimpleStyleSectionList } from "./components/SimpleStyleScrollables/SimpleStyleSectionList";
 export { default as SimpleStyleSwipeableList } from "./components/SimpleStyleScrollables/SimpleStyleSwipeableList";
-export { default as ActivityIndicator } from "./components/ActivityIndicator";
+export { default as LoadingIndicator } from "./components/LoadingIndicator";
 
 /* Deprecated: Fix or Delete!  */
 export { default as AccordionItem } from "./deprecated-components/AccordionItem";

diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
@@ -75,7 +75,7 @@ export {
   SimpleStyleScrollView,
   SimpleStyleSectionList,
   SimpleStyleSwipeableList,
-  ActivityIndicator,
+  LoadingIndicator,
 } from "@draftbit/core";
 
 export {