Skip to content

Commit 19f86d1

Browse files
mendyEdriM-i-k-e-l
andauthored
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]>
1 parent db60685 commit 19f86d1

File tree

6 files changed

+281
-298
lines changed

6 files changed

+281
-298
lines changed

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

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import _ from 'lodash';
55
const useCases = [
66
{label: 'Default (Android/iOS)', useNativeIOS: false, icons: false},
77
{label: 'Default with icons', useNativeIOS: false, icons: true},
8-
{label: 'Native IOS', useNativeIOS: true},
8+
{label: 'Native IOS', useNativeIOS: true}
99
];
1010
const collectionsIcon = require('../../assets/icons/collections.png');
1111
const starIcon = require('../../assets/icons/star.png');
@@ -17,11 +17,12 @@ export default class ActionSheetScreen extends Component {
1717
showNative: false,
1818
showCustom: false,
1919
showCustomIcons: false,
20+
pickedOption: undefined
2021
};
2122

22-
pickOption(index) {
23+
pickOption(index: string) {
2324
this.setState({
24-
pickedOption: index,
25+
pickedOption: index
2526
});
2627
}
2728

@@ -36,7 +37,7 @@ export default class ActionSheetScreen extends Component {
3637
<Button
3738
key={index}
3839
link
39-
size='small'
40+
size={Button.sizes.small}
4041
text50
4142
marginB-10
4243
dark10
@@ -45,7 +46,7 @@ export default class ActionSheetScreen extends Component {
4546
this.setState({
4647
showNative: useCase.useNativeIOS,
4748
showCustom: !useCase.useNativeIOS && !useCase.icons,
48-
showCustomIcons: !useCase.useNativeIOS && useCase.icons,
49+
showCustomIcons: !useCase.useNativeIOS && useCase.icons
4950
})}
5051
/>
5152
);
@@ -58,46 +59,47 @@ export default class ActionSheetScreen extends Component {
5859
)}
5960

6061
<ActionSheet
61-
title='Title'
62-
message='Message of action sheet'
62+
title={'Title'}
63+
message={'Message of action sheet'}
6364
cancelButtonIndex={3}
6465
destructiveButtonIndex={0}
6566
useNativeIOS={false}
6667
options={[
6768
{label: 'option 1', onPress: () => this.pickOption('option 1')},
6869
{label: 'option 2', onPress: () => this.pickOption('option 2')},
6970
{label: 'option 3', onPress: () => this.pickOption('option 3')},
70-
{label: 'cancel', onPress: () => this.pickOption('cancel')},
71+
{label: 'cancel', onPress: () => this.pickOption('cancel')}
7172
]}
7273
visible={showCustom}
7374
onDismiss={() => this.setState({showCustom: false})}
7475
/>
7576

7677
<ActionSheet
77-
title='Title'
78-
message='Message of action sheet'
78+
title={'Title'}
79+
message={'Message of action sheet'}
7980
cancelButtonIndex={3}
8081
destructiveButtonIndex={0}
8182
options={[
82-
{label: 'option 1', onPress: () => this.pickOption('option 1'), icon: collectionsIcon},
83-
{label: 'option 2', onPress: () => this.pickOption('option 2'), icon: shareIcon},
83+
{label: 'option 1', onPress: () => this.pickOption('option 1'), iconSource: collectionsIcon},
84+
{label: 'option 2', onPress: () => this.pickOption('option 2'), iconSource: shareIcon},
85+
// `icon` prop will be deprecated, please use `iconSource`
8486
{label: 'option 3', onPress: () => this.pickOption('option 3'), icon: starIcon},
85-
{label: 'cancel', onPress: () => this.pickOption('cancel')},
87+
{label: 'cancel', onPress: () => this.pickOption('cancel')}
8688
]}
8789
visible={showCustomIcons}
8890
onDismiss={() => this.setState({showCustomIcons: false})}
8991
/>
9092

9193
<ActionSheet
92-
title='Title'
93-
message='Message of action sheet'
94+
title={'Title'}
95+
message={'Message of action sheet'}
9496
cancelButtonIndex={3}
9597
destructiveButtonIndex={0}
9698
options={[
9799
{label: 'option 1', onPress: () => this.pickOption('option 1')},
98100
{label: 'option 2', onPress: () => this.pickOption('option 2')},
99101
{label: 'option 3', onPress: () => this.pickOption('option 3')},
100-
{label: 'cancel', onPress: () => this.pickOption('cancel')},
102+
{label: 'cancel', onPress: () => this.pickOption('cancel')}
101103
]}
102104
visible={showNative}
103105
useNativeIOS

generatedTypes/index.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,10 +67,10 @@ export {default as PanDismissibleView, PanDismissibleViewPropTypes, DismissibleA
6767
export {default as Dialog, DialogProps} from './components/dialog';
6868
export {default as PageControl, PageControlProps} from './components/pageControl';
6969
export {default as Carousel, CarouselProps} from './components/carousel';
70+
export {default as ActionSheet} from './components/actionSheet';
7071

7172
/* All components with manual typings */
7273
export {
73-
ActionSheet,
7474
ConnectionStatusBar,
7575
FeatureHighlight,
7676
Hint,

src/components/actionSheet/index.js

Lines changed: 0 additions & 252 deletions
This file was deleted.

0 commit comments

Comments
 (0)