feat(playground): missing spinner showcases add

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}/>
     );

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',
+  },
+});

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,
   ],
 };