Typescript/action sheet (#1336)

* actionSheet.js -> .tsx

* migrate ActionSheet to typescript

* back to 100%

* Support `icon` prop of `options`, will be deprecated, use `iconSource` instead

* change demo to show we support `icon` and `iconSource` for options

* demo-screen .js -> .tsx

* prevent of rendering empty Image

* migrating ActionSheet demo to typescript

* Fixed demo screen behaviour

* export action-sheet, typescript version

* Fix api typing

* remove manual typings

* remove manual typing export

* Update src/components/actionSheet/index.tsx

Co-authored-by: Miki Leib <[email protected]>

* Update src/components/actionSheet/index.tsx

Co-authored-by: Miki Leib <[email protected]>

* PR comments

* add missing export

* Ignoring ListItem type for now

* Send an empty string when label was not provided

Co-authored-by: Miki Leib <[email protected]>

Author: mendyEdri

demo/src/screens/componentScreens/ActionSheetScreen.js renamed to demo/src/screens/componentScreens/ActionSheetScreen.tsx

@@ -5,7 +5,7 @@ import _ from 'lodash';
 const useCases = [
   {label: 'Default (Android/iOS)', useNativeIOS: false, icons: false},
   {label: 'Default with icons', useNativeIOS: false, icons: true},
-  {label: 'Native IOS', useNativeIOS: true},
+  {label: 'Native IOS', useNativeIOS: true}
 ];
 const collectionsIcon = require('../../assets/icons/collections.png');
 const starIcon = require('../../assets/icons/star.png');
@@ -17,11 +17,12 @@ export default class ActionSheetScreen extends Component {
     showNative: false,
     showCustom: false,
     showCustomIcons: false,
+    pickedOption: undefined
   };
 
-  pickOption(index) {
+  pickOption(index: string) {
     this.setState({
-      pickedOption: index,
+      pickedOption: index
     });
   }
 
@@ -36,7 +37,7 @@ export default class ActionSheetScreen extends Component {
               <Button
                 key={index}
                 link
-                size='small'
+                size={Button.sizes.small}
                 text50
                 marginB-10
                 dark10
@@ -45,7 +46,7 @@ export default class ActionSheetScreen extends Component {
                   this.setState({
                     showNative: useCase.useNativeIOS,
                     showCustom: !useCase.useNativeIOS && !useCase.icons,
-                    showCustomIcons: !useCase.useNativeIOS && useCase.icons,
+                    showCustomIcons: !useCase.useNativeIOS && useCase.icons
                   })}
               />
             );
@@ -58,46 +59,47 @@ export default class ActionSheetScreen extends Component {
         )}
 
         <ActionSheet
-          title='Title'
-          message='Message of action sheet'
+          title={'Title'}
+          message={'Message of action sheet'}
           cancelButtonIndex={3}
           destructiveButtonIndex={0}
           useNativeIOS={false}
           options={[
             {label: 'option 1', onPress: () => this.pickOption('option 1')},
             {label: 'option 2', onPress: () => this.pickOption('option 2')},
             {label: 'option 3', onPress: () => this.pickOption('option 3')},
-            {label: 'cancel', onPress: () => this.pickOption('cancel')},
+            {label: 'cancel', onPress: () => this.pickOption('cancel')}
           ]}
           visible={showCustom}
           onDismiss={() => this.setState({showCustom: false})}
         />
 
         <ActionSheet
-          title='Title'
-          message='Message of action sheet'
+          title={'Title'}
+          message={'Message of action sheet'}
           cancelButtonIndex={3}
           destructiveButtonIndex={0}
           options={[
-            {label: 'option 1', onPress: () => this.pickOption('option 1'), icon: collectionsIcon},
-            {label: 'option 2', onPress: () => this.pickOption('option 2'), icon: shareIcon},
+            {label: 'option 1', onPress: () => this.pickOption('option 1'), iconSource: collectionsIcon},
+            {label: 'option 2', onPress: () => this.pickOption('option 2'), iconSource: shareIcon},
+            // `icon` prop will be deprecated, please use `iconSource`
             {label: 'option 3', onPress: () => this.pickOption('option 3'), icon: starIcon},
-            {label: 'cancel', onPress: () => this.pickOption('cancel')},
+            {label: 'cancel', onPress: () => this.pickOption('cancel')}
           ]}
           visible={showCustomIcons}
           onDismiss={() => this.setState({showCustomIcons: false})}
         />
 
         <ActionSheet
-          title='Title'
-          message='Message of action sheet'
+          title={'Title'}
+          message={'Message of action sheet'}
           cancelButtonIndex={3}
           destructiveButtonIndex={0}
           options={[
             {label: 'option 1', onPress: () => this.pickOption('option 1')},
             {label: 'option 2', onPress: () => this.pickOption('option 2')},
             {label: 'option 3', onPress: () => this.pickOption('option 3')},
-            {label: 'cancel', onPress: () => this.pickOption('cancel')},
+            {label: 'cancel', onPress: () => this.pickOption('cancel')}
           ]}
           visible={showNative}
           useNativeIOS

generatedTypes/index.d.ts

@@ -67,10 +67,10 @@ export {default as PanDismissibleView, PanDismissibleViewPropTypes, DismissibleA
 export {default as Dialog, DialogProps} from './components/dialog';
 export {default as PageControl, PageControlProps} from './components/pageControl';
 export {default as Carousel, CarouselProps} from './components/carousel';
+export {default as ActionSheet} from './components/actionSheet';
 
 /* All components with manual typings */
 export {
-  ActionSheet,
   ConnectionStatusBar,
   FeatureHighlight,
   Hint,