Skip to content

Commit 806c9ae

Browse files
Inbal-TishInbal-Tish
authored
WheelPicker - allow pass labels alignment (#1813)
* WheelPicker - allow pass labels alignment * moving WheelPickerAlign to types.ts, moving item 'align' prop to ItemProps * moving fakeLabel props to internal * fix export and add generated types * format
1 parent df5376a commit 806c9ae

File tree

9 files changed

+69
-46
lines changed

9 files changed

+69
-46
lines changed

‎demo/src/screens/incubatorScreens/WheelPickerScreen.tsx‎

Lines changed: 39 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1+
import _ from 'lodash';
12
import React, {useCallback, useState} from 'react';
23
import {View, Text, Incubator, Colors, Typography, Button, Dialog} from 'react-native-ui-lib';
3-
import _ from 'lodash';
44

55
const monthItems = _.map([
66
'January',
@@ -16,7 +16,7 @@ const monthItems = _.map([
1616
'November',
1717
'December'
1818
],
19-
item => ({label: item, value: item}));
19+
item => ({label: item, value: item, align: Incubator.WheelPickerAlign.RIGHT}));
2020

2121
const yearItems = _.times(2050, i => i)
2222
.reverse()
@@ -28,10 +28,14 @@ export default () => {
2828
const [yearsValue, setYearsValue] = useState(2022);
2929

3030
const updateYearsInitialValue = useCallback((increaseYears: boolean) => {
31-
increaseYears ? setYearsValue(Math.min(yearsValue + 5, 2049)) : setYearsValue(Math.max(yearsValue - 5, 0));
31+
increaseYears ? setYearsValue(Math.min(yearsValue + 1, 2049)) : setYearsValue(Math.max(yearsValue - 1, 0));
3232
},
3333
[yearsValue]);
3434

35+
const onChange = useCallback((value) => {
36+
setYearsValue(value);
37+
}, []);
38+
3539
const onPickDaysPress = useCallback(() => {
3640
setShowDialog(true);
3741
}, []);
@@ -44,32 +48,46 @@ export default () => {
4448
<View flex padding-page>
4549
<Text h1>Wheel Picker</Text>
4650

47-
<View marginT-s5 centerH>
48-
<Text h3>Months</Text>
49-
<Incubator.WheelPicker
50-
initialValue={'February'}
51-
activeTextColor={Colors.primary}
52-
inactiveTextColor={Colors.grey20}
53-
items={monthItems}
54-
textStyle={Typography.text60R}
55-
/>
51+
<View row center marginT-30>
52+
<View center>
53+
<Text h3>Months</Text>
54+
<Incubator.WheelPicker
55+
initialValue={'February'}
56+
activeTextColor={Colors.primary}
57+
inactiveTextColor={Colors.grey20}
58+
items={monthItems}
59+
textStyle={Typography.text60R}
60+
numberOfVisibleRows={3}
61+
/>
62+
</View>
5663

57-
<Text h3>Years</Text>
58-
<View width={'100%'} marginT-s3>
59-
<Incubator.WheelPicker numberOfVisibleRows={3} initialValue={yearsValue} items={yearItems}/>
64+
<View center>
65+
<Text h3>Years</Text>
66+
<Incubator.WheelPicker
67+
numberOfVisibleRows={3}
68+
initialValue={yearsValue}
69+
items={yearItems}
70+
onChange={onChange}
71+
/>
6072
</View>
73+
</View>
6174

62-
<Text marginT-10 bodySmall grey30>
63-
(update value by passing a new initialValue)
75+
<View center marginT-30>
76+
<Text body>
77+
Move the wheel programmatically
78+
</Text>
79+
<Text bodySmall grey30>
80+
(by updating the initialValue prop)
6481
</Text>
6582
<View marginT-10 row>
66-
<Button label={'-5 years'} marginR-20 onPress={() => updateYearsInitialValue(false)}/>
67-
<Button label={'+5 years'} onPress={() => updateYearsInitialValue(true)}/>
83+
<Button size="medium" label={'Previous'} marginR-20 onPress={() => updateYearsInitialValue(false)}/>
84+
<Button size="medium" label={'Next'} onPress={() => updateYearsInitialValue(true)}/>
6885
</View>
6986
</View>
7087

71-
<View marginB-s10>
72-
<Button marginT-40 label={'Pick Days'} marginH-100 onPress={onPickDaysPress}/>
88+
<View center marginT-40>
89+
<Text h3 marginB-20>Days</Text>
90+
<Button size="small" label={'Pick Days'} onPress={onPickDaysPress}/>
7391
<Dialog width={'90%'} height={260} bottom visible={showDialog} onDismiss={onDialogDismissed}>
7492
<Incubator.WheelPicker initialValue={5} label={'Days'} items={dayItems}/>
7593
</Dialog>

‎generatedTypes/src/incubator/WheelPicker/Item.d.ts‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
import React from 'react';
2-
import { TextStyle } from 'react-native';
3-
import { TextProps } from '../../components/text';
2+
import { WheelPickerAlign } from './types';
43
export interface ItemProps {
54
label: string;
6-
fakeLabel?: string;
7-
fakeLabelStyle?: TextStyle;
8-
fakeLabelProps?: TextProps;
95
value: string | number;
6+
align?: WheelPickerAlign;
107
}
118
declare const _default: React.ComponentClass<ItemProps & {
129
useCustomTheme?: boolean | undefined;

‎generatedTypes/src/incubator/WheelPicker/index.d.ts‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,7 @@ import React from 'react';
22
import { TextStyle, ViewStyle } from 'react-native';
33
import { ItemProps } from './Item';
44
import { TextProps } from '../../components/text';
5-
export declare enum WheelPickerAlign {
6-
CENTER = "center",
7-
RIGHT = "right",
8-
LEFT = "left"
9-
}
5+
import { WheelPickerAlign } from './types';
106
export interface WheelPickerProps {
117
/**
128
* Initial value

‎generatedTypes/src/incubator/WheelPicker/types.d.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export declare enum WheelPickerAlign {
2+
CENTER = "center",
3+
RIGHT = "right",
4+
LEFT = "left"
5+
}

‎generatedTypes/src/incubator/index.d.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ export { default as ExpandableOverlay } from './expandableOverlay';
33
export { default as TextField, TextFieldProps, FieldContextType } from './TextField';
44
export { default as Toast, ToastProps, ToastPresets } from './toast';
55
export { default as TouchableOpacity, TouchableOpacityProps } from './TouchableOpacity';
6-
export { default as WheelPicker, WheelPickerProps, WheelPickerAlign, WheelPickerItemProps } from './WheelPicker';
6+
export { default as WheelPicker, WheelPickerProps, WheelPickerItemProps } from './WheelPicker';
7+
export { WheelPickerAlign } from './WheelPicker/types';
78
export { default as PanView, PanViewProps, PanViewDirections, PanViewDismissThreshold } from './panView';
89
export { default as TransitionView, TransitionViewProps, TransitionViewDirection, TransitionViewDirectionEnum, TransitionViewAnimationType } from './TransitionView';
910
export { default as Dialog, DialogProps, DialogHeaderProps, DialogTextProps } from './Dialog';

‎src/incubator/WheelPicker/Item.tsx‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,16 @@ import Text, {TextProps} from '../../components/text';
55
import TouchableOpacity from '../../components/touchableOpacity';
66
import {Colors, Spacings} from '../../../src/style';
77
import {asBaseComponent} from '../../commons/new';
8+
import {WheelPickerAlign} from './types';
9+
810

911
const AnimatedTouchableOpacity = Animated.createAnimatedComponent(TouchableOpacity);
1012
const AnimatedText = Animated.createAnimatedComponent(Text);
1113

1214
export interface ItemProps {
1315
label: string;
14-
fakeLabel?: string;
15-
fakeLabelStyle?: TextStyle;
16-
fakeLabelProps?: TextProps;
1716
value: string | number;
17+
align?: WheelPickerAlign
1818
}
1919

2020
interface InternalProps extends ItemProps {
@@ -25,8 +25,11 @@ interface InternalProps extends ItemProps {
2525
inactiveColor?: string;
2626
style?: TextStyle;
2727
onSelect: (index: number) => void;
28-
testID?: string;
2928
centerH?: boolean;
29+
fakeLabel?: string;
30+
fakeLabelStyle?: TextStyle;
31+
fakeLabelProps?: TextProps;
32+
testID?: string;
3033
}
3134

3235
const WheelPickerItem = memo(({
@@ -42,7 +45,8 @@ const WheelPickerItem = memo(({
4245
inactiveColor = Colors.grey20,
4346
style,
4447
testID,
45-
centerH = true
48+
centerH = true,
49+
align
4650
}: InternalProps) => {
4751
const selectItem = useCallback(() => onSelect(index), [index]);
4852
const itemOffset = index * itemHeight;
@@ -64,8 +68,9 @@ const WheelPickerItem = memo(({
6468
style={containerStyle}
6569
key={index}
6670
centerV
67-
centerH={centerH}
68-
right={!centerH}
71+
centerH={align ? align === WheelPickerAlign.CENTER : centerH}
72+
right={align ? align === WheelPickerAlign.RIGHT : !centerH}
73+
left={align === WheelPickerAlign.LEFT}
6974
onPress={selectItem}
7075
// @ts-ignore reanimated2
7176
index={index}

‎src/incubator/WheelPicker/index.tsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,10 @@ import Fader, {FaderPosition} from '../../components/fader';
1010
import Item, {ItemProps} from './Item';
1111
import Text, {TextProps} from '../../components/text';
1212
import usePresenter from './usePresenter';
13+
import {WheelPickerAlign} from './types';
1314

1415
const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
1516

16-
export enum WheelPickerAlign {
17-
CENTER = 'center',
18-
RIGHT = 'right',
19-
LEFT = 'left'
20-
}
21-
2217
export interface WheelPickerProps {
2318
/**
2419
* Initial value

‎src/incubator/WheelPicker/types.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export enum WheelPickerAlign {
2+
CENTER = 'center',
3+
RIGHT = 'right',
4+
LEFT = 'left'
5+
}

‎src/incubator/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ export {default as ExpandableOverlay} from './expandableOverlay';
44
export {default as TextField, TextFieldProps, FieldContextType} from './TextField';
55
export {default as Toast, ToastProps, ToastPresets} from './toast';
66
export {default as TouchableOpacity, TouchableOpacityProps} from './TouchableOpacity';
7-
export {default as WheelPicker, WheelPickerProps, WheelPickerAlign, WheelPickerItemProps} from './WheelPicker';
7+
export {default as WheelPicker, WheelPickerProps, WheelPickerItemProps} from './WheelPicker';
8+
export {WheelPickerAlign} from './WheelPicker/types';
89
export {default as PanView, PanViewProps, PanViewDirections, PanViewDismissThreshold} from './panView';
910
export {
1011
default as TransitionView,

0 commit comments

Comments
 (0)