From 881c668fb2c18b3c18acae59d054a8c9da6fbc05 Mon Sep 17 00:00:00 2001
From: Yauhen Penkin <e.penkin@akveo.com>
Date: Mon, 19 Aug 2019 14:47:08 +0300
Subject: [PATCH] feat(playground): missing spinner showcases add

---
 .../ui/screen/spinner/spinner.container.tsx   |  7 ++--
 .../spinner/spinnerShowcase.component.tsx     | 34 ++++++++++++++++++-
 src/playground/src/ui/screen/spinner/type.ts  | 16 +++++++++
 3 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/src/playground/src/ui/screen/spinner/spinner.container.tsx b/src/playground/src/ui/screen/spinner/spinner.container.tsx
index 651e8a031..e418cff38 100644
--- a/src/playground/src/ui/screen/spinner/spinner.container.tsx
+++ b/src/playground/src/ui/screen/spinner/spinner.container.tsx
@@ -1,5 +1,8 @@
 import React from 'react';
-import { SpinnerProps } from '@kitten/ui';
+import {
+  SpinnerProps,
+  SpinnerElement,
+} from '@kitten/ui';
 import { SpinnerShowcase } from './spinnerShowcase.component';
 import {
   spinnerSettings,
@@ -9,7 +12,7 @@ import { ShowcaseContainer } from '../common/showcase.container';
 
 export class SpinnerContainer extends React.Component {
 
-  private renderItem = (props: SpinnerProps): React.ReactElement<SpinnerProps> => {
+  private renderItem = (props: SpinnerProps): SpinnerElement => {
     return (
       <SpinnerShowcase {...props}/>
     );
diff --git a/src/playground/src/ui/screen/spinner/spinnerShowcase.component.tsx b/src/playground/src/ui/screen/spinner/spinnerShowcase.component.tsx
index b3fd1286f..31fd701a6 100644
--- a/src/playground/src/ui/screen/spinner/spinnerShowcase.component.tsx
+++ b/src/playground/src/ui/screen/spinner/spinnerShowcase.component.tsx
@@ -1,11 +1,43 @@
 import React from 'react';
+import {
+  StyleSheet,
+  View,
+  ViewProps,
+} from 'react-native';
 import {
   Spinner,
   SpinnerProps,
+  SpinnerElement,
 } from '@kitten/ui';
 
-export const SpinnerShowcase = (props?: SpinnerProps): React.ReactElement<SpinnerProps> => {
+export const SpinnerShowcase = (props?: SpinnerProps): SpinnerElement => {
+  if (props.status === 'white') {
+    return WhiteSpinner(props);
+  } else {
+    return DefaultSpinner(props);
+  }
+};
+
+const DefaultSpinner = (props?: SpinnerProps): SpinnerElement => {
   return (
     <Spinner {...props} />
   );
 };
+
+const WhiteSpinner = (props?: SpinnerProps): React.ReactElement<ViewProps> => {
+  return (
+    <View style={styles.blackSpinnerContainer}>
+      <Spinner {...props} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  blackSpinnerContainer: {
+    width: 40,
+    height: 40,
+    backgroundColor: '#7f7e82',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
diff --git a/src/playground/src/ui/screen/spinner/type.ts b/src/playground/src/ui/screen/spinner/type.ts
index 5dc9b8f02..d23bed760 100644
--- a/src/playground/src/ui/screen/spinner/type.ts
+++ b/src/playground/src/ui/screen/spinner/type.ts
@@ -75,6 +75,20 @@ const dangerSpinner: ComponentShowcaseItem = {
   },
 };
 
+const blackSpinner: ComponentShowcaseItem = {
+  title: 'Black',
+  props: {
+    status: 'black',
+  },
+};
+
+const whiteSpinner: ComponentShowcaseItem = {
+  title: 'White',
+  props: {
+    status: 'white',
+  },
+};
+
 const sizeSection: ComponentShowcaseSection = {
   title: 'Size',
   items: [
@@ -94,6 +108,8 @@ const statusSection: ComponentShowcaseSection = {
     infoSpinner,
     warningSpinner,
     dangerSpinner,
+    blackSpinner,
+    whiteSpinner,
   ],
 };