Skip to content

Commit c22fe36

Browse files
ethansharethanshar
committed
move Button types into the same file
1 parent 4ba7264 commit c22fe36

File tree

3 files changed

+240
-126
lines changed

3 files changed

+240
-126
lines changed

‎generatedTypes/components/button/index.d.ts

Lines changed: 113 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,124 @@
11
import React, { PureComponent } from 'react';
2-
import { ImageStyle, LayoutChangeEvent } from 'react-native';
3-
import { BaseComponentInjectedProps, ForwardRefInjectedProps } from '../../commons/new';
4-
import { ButtonPropTypes, ButtonState } from './type';
2+
import { LayoutChangeEvent, ImageStyle, TextStyle } from 'react-native';
3+
import { BaseComponentInjectedProps, ForwardRefInjectedProps, TypographyModifiers, ColorsModifiers, BackgroundColorModifier, MarginModifiers } from '../../commons/new';
4+
import { TextPropTypes } from '../text';
5+
export declare type ButtonPropTypes = TextPropTypes & TypographyModifiers & ColorsModifiers & BackgroundColorModifier & MarginModifiers & {
6+
/**
7+
* Text to show inside the button
8+
*/
9+
label?: string;
10+
/**
11+
* The Button text color (inherited from Text component)
12+
*/
13+
color?: string;
14+
/**
15+
* Icon image source
16+
*/
17+
iconSource?: object | number | Function;
18+
/**
19+
* Icon image style
20+
*/
21+
iconStyle?: ImageStyle;
22+
/**
23+
* Should the icon be right to the label
24+
*/
25+
iconOnRight?: boolean;
26+
/**
27+
* Color of the button background
28+
*/
29+
backgroundColor?: string;
30+
/**
31+
* Size of the button [large, medium, small, xSmall]
32+
*/
33+
size?: 'xSmall' | 'small' | 'medium' | 'large';
34+
/**
35+
* Custom border radius.
36+
*/
37+
borderRadius?: number;
38+
/**
39+
* Actions handler
40+
*/
41+
onPress?: Function;
42+
/**
43+
* Disable interactions for the component
44+
*/
45+
disabled?: boolean;
46+
/**
47+
* Button will have outline style
48+
*/
49+
outline?: boolean;
50+
/**
51+
* The outline color
52+
*/
53+
outlineColor?: string;
54+
/**
55+
* The outline width
56+
*/
57+
outlineWidth?: number;
58+
/**
59+
* Button will look like a link
60+
*/
61+
link?: boolean;
62+
/**
63+
* label color for when it's displayed as link
64+
*/
65+
linkColor?: string;
66+
/**
67+
* Additional styles for label text
68+
*/
69+
labelStyle?: TextStyle;
70+
/**
71+
* Props that will be passed to the button's Text label.
72+
*/
73+
labelProps?: object;
74+
/**
75+
* should the button act as a coast to coast button (no border radius)
76+
*/
77+
fullWidth?: boolean;
78+
/**
79+
* should the button be a round button
80+
*/
81+
round?: boolean;
82+
/**
83+
* Control shadow visibility (iOS-only)
84+
*/
85+
enableShadow?: boolean;
86+
/**
87+
* avoid inner button padding
88+
*/
89+
avoidInnerPadding?: boolean;
90+
/**
91+
* avoid minimum width constraints
92+
*/
93+
avoidMinWidth?: boolean;
94+
/**
95+
* callback for getting activeBackgroundColor (e.g. (calculatedBackgroundColor, prop) => {...})
96+
* better set using ThemeManager
97+
*/
98+
getActiveBackgroundColor?: Function;
99+
/**
100+
* should animate layout change
101+
* Note?: For Android you must set 'setLayoutAnimationEnabledExperimental(true)' via RN's 'UIManager'
102+
*/
103+
animateLayout?: boolean;
104+
/**
105+
* the direction of the animation ('left' and 'right' will effect the button's own alignment)
106+
*/
107+
animateTo?: 'center' | 'left' | 'right';
108+
};
109+
export declare type ButtonState = {
110+
size?: number;
111+
borderRadius?: number;
112+
isLandscape?: boolean;
113+
};
5114
declare type Props = ButtonPropTypes & BaseComponentInjectedProps & ForwardRefInjectedProps;
6115
/**
7116
* @description: Basic button component
8117
* @extends: TouchableOpacity
9118
* @extendslink: docs/TouchableOpacity
10119
* @modifiers: margin, background
11120
* @gif: https://media.giphy.com/media/xULW8j5WzsuPytqklq/giphy.gif
12-
* @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ButtonsScreen.js
121+
* @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ButtonsScreen.tsx
13122
*/
14123
declare class Button extends PureComponent<Props, ButtonState> {
15124
static displayName: string;

‎src/components/button/index.tsx

Lines changed: 127 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,137 @@
11
import React, {PureComponent} from 'react';
2-
import {Platform, StyleSheet, LayoutAnimation, Image, ImageStyle, LayoutChangeEvent} from 'react-native';
2+
import {Platform, StyleSheet, LayoutAnimation, Image, LayoutChangeEvent, ImageStyle, TextStyle} from 'react-native';
33
import _ from 'lodash';
4+
import {
5+
asBaseComponent,
6+
forwardRef,
7+
BaseComponentInjectedProps,
8+
ForwardRefInjectedProps,
9+
TypographyModifiers,
10+
ColorsModifiers,
11+
BackgroundColorModifier,
12+
MarginModifiers
13+
} from '../../commons/new';
414
//@ts-ignore
515
import {Constants} from '../../helpers';
616
import {Colors, Typography, ThemeManager, BorderRadiuses} from '../../style';
7-
import {asBaseComponent, forwardRef, BaseComponentInjectedProps, ForwardRefInjectedProps} from '../../commons/new';
817
import {extractColorValue, extractTypographyValue} from '../../commons/modifiers';
918
import TouchableOpacity from '../touchableOpacity';
10-
import Text from '../text';
11-
import {ButtonPropTypes, ButtonState} from './type';
19+
import Text, {TextPropTypes} from '../text';
20+
21+
export type ButtonPropTypes = TextPropTypes &
22+
TypographyModifiers &
23+
ColorsModifiers &
24+
BackgroundColorModifier &
25+
MarginModifiers & {
26+
/**
27+
* Text to show inside the button
28+
*/
29+
label?: string;
30+
/**
31+
* The Button text color (inherited from Text component)
32+
*/
33+
color?: string;
34+
/**
35+
* Icon image source
36+
*/
37+
iconSource?: object | number | Function;
38+
/**
39+
* Icon image style
40+
*/
41+
iconStyle?: ImageStyle;
42+
/**
43+
* Should the icon be right to the label
44+
*/
45+
iconOnRight?: boolean;
46+
/**
47+
* Color of the button background
48+
*/
49+
backgroundColor?: string;
50+
/**
51+
* Size of the button [large, medium, small, xSmall]
52+
*/
53+
size?: 'xSmall' | 'small' | 'medium' | 'large';
54+
/**
55+
* Custom border radius.
56+
*/
57+
borderRadius?: number;
58+
/**
59+
* Actions handler
60+
*/
61+
onPress?: Function;
62+
/**
63+
* Disable interactions for the component
64+
*/
65+
disabled?: boolean;
66+
/**
67+
* Button will have outline style
68+
*/
69+
outline?: boolean;
70+
/**
71+
* The outline color
72+
*/
73+
outlineColor?: string;
74+
/**
75+
* The outline width
76+
*/
77+
outlineWidth?: number;
78+
/**
79+
* Button will look like a link
80+
*/
81+
link?: boolean;
82+
/**
83+
* label color for when it's displayed as link
84+
*/
85+
linkColor?: string;
86+
/**
87+
* Additional styles for label text
88+
*/
89+
labelStyle?: TextStyle;
90+
/**
91+
* Props that will be passed to the button's Text label.
92+
*/
93+
labelProps?: object;
94+
/**
95+
* should the button act as a coast to coast button (no border radius)
96+
*/
97+
fullWidth?: boolean;
98+
/**
99+
* should the button be a round button
100+
*/
101+
round?: boolean;
102+
/**
103+
* Control shadow visibility (iOS-only)
104+
*/
105+
enableShadow?: boolean;
106+
/**
107+
* avoid inner button padding
108+
*/
109+
avoidInnerPadding?: boolean;
110+
/**
111+
* avoid minimum width constraints
112+
*/
113+
avoidMinWidth?: boolean;
114+
/**
115+
* callback for getting activeBackgroundColor (e.g. (calculatedBackgroundColor, prop) => {...})
116+
* better set using ThemeManager
117+
*/
118+
getActiveBackgroundColor?: Function;
119+
/**
120+
* should animate layout change
121+
* Note?: For Android you must set 'setLayoutAnimationEnabledExperimental(true)' via RN's 'UIManager'
122+
*/
123+
animateLayout?: boolean;
124+
/**
125+
* the direction of the animation ('left' and 'right' will effect the button's own alignment)
126+
*/
127+
animateTo?: 'center' | 'left' | 'right';
128+
};
129+
130+
export type ButtonState = {
131+
size?: number;
132+
borderRadius?: number;
133+
isLandscape?: boolean;
134+
};
12135

13136
const PADDINGS = {
14137
XSMALL: 3,

‎src/components/button/type.ts

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

0 commit comments

Comments
 (0)