Styling Busy component

dokuhero · Sep 21, 2018 · c76c19b · c76c19b
1 parent 2387234
commit c76c19b
Showing 1 changed file with 60 additions and 59 deletions.
diff --git a/src/components/Busy.tsx b/src/components/Busy.tsx
@@ -1,4 +1,11 @@
-import { withTheme } from '@dokuhero/react-native-theme'
+import {
+  ColorKeys,
+  createStyleSheet,
+  FontNameKeys,
+  FontSizesKeys,
+  RadiusKeys,
+  SpaceKeys
+} from '@dokuhero/react-native-theme'
 import * as React from 'react'
 import { ActivityIndicator, View } from 'react-native'
 import { Modal } from './Modal'
@@ -10,65 +17,59 @@ export interface BusyProps {
   layout?: 'full' | 'top' | 'bottom'
 }
 
-export const Busy = withTheme<BusyProps>(
-  ({ visible, theme: { color, space, radius }, text, layout }) => {
-    if (!layout || layout === 'full') {
-      return (
-        <Modal visible={visible}>
-          <View>
-            <ActivityIndicator size="large" />
-            {text && (
-              <Text
-                style={{ textAlign: 'center', marginTop: 10 }}
-                color={color.white}
-              >
-                {text}
-              </Text>
-            )}
-          </View>
-        </Modal>
-      )
-    }
-
-    if (!visible) {
-      return null
-    }
-
+export const Busy: React.SFC<BusyProps> = ({ visible, text, layout }) => {
+  if (!layout || layout === 'full') {
     return (
-      <View
-        style={[
-          {
-            position: 'absolute',
-            left: 15,
-            right: 15,
-            margin: 10,
-            zIndex: 99
-          },
-          layout === 'top' ? { top: 80 } : { bottom: 20 }
-        ]}
-      >
-        <View
-          style={{
-            flex: 1,
-            flexDirection: 'row',
-            height: 40,
-            backgroundColor: color.semiTransparent,
-            borderRadius: radius.medium,
-            paddingLeft: space.small,
-            paddingRight: space.small
-          }}
-        >
-          <ActivityIndicator size="small" style={{ marginRight: 10 }} />
-          {text ? (
-            <Text
-              style={{ textAlign: 'center', marginTop: 10 }}
-              color={color.white}
-            >
-              {text}
-            </Text>
-          ) : null}
+      <Modal visible={visible}>
+        <View>
+          <ActivityIndicator size="large" />
+          {text && <Text style={styles.text}>{text}</Text>}
         </View>
-      </View>
+      </Modal>
     )
   }
-)
+
+  if (!visible) {
+    return null
+  }
+
+  return (
+    <View
+      style={[
+        styles.container,
+        layout === 'top' ? { top: 80 } : { bottom: 20 }
+      ]}
+    >
+      <View style={styles.innerContainer}>
+        <ActivityIndicator size="small" style={{ marginRight: 10 }} />
+        {text ? <Text style={styles.text}>{text}</Text> : null}
+      </View>
+    </View>
+  )
+}
+
+const styles = createStyleSheet({
+  container: {
+    position: 'absolute',
+    left: 15,
+    right: 15,
+    margin: 10,
+    zIndex: 99
+  },
+  innerContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    height: 40,
+    backgroundColor: ColorKeys.semiTransparent,
+    borderRadius: RadiusKeys.medium,
+    paddingLeft: SpaceKeys.small,
+    paddingRight: SpaceKeys.small
+  },
+  text: {
+    textAlign: 'center',
+    marginTop: 10,
+    color: ColorKeys.white,
+    fontStyle: FontSizesKeys.medium,
+    fontFamily: FontNameKeys.regular
+  }
+})