Skip to content

Commit e609fb6

Browse files
author
Hossein Pousti
committed
chore: updating Button and docs
1 parent 43aba27 commit e609fb6

6 files changed

Lines changed: 58 additions & 53 deletions

File tree

‎example/src/ImageExample/index.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,16 @@ const ImagesCompression: React.FC = () => {
2020
<React.Fragment>
2121
{Sizes.map(size => {
2222
return (
23-
<Image key={size} size={size} radius={size} source={{uri: IMAGE}} />
23+
<Image
24+
key={size}
25+
size={size}
26+
radius={size}
27+
skeletonLoading
28+
source={{uri: IMAGE}}
29+
/>
2430
);
2531
})}
26-
<Image radius="full" source={{uri: IMAGE}} />
32+
<Image skeletonLoading radius="full" source={{uri: IMAGE}} />
2733
</React.Fragment>
2834
);
2935
};

‎example/src/InputExample/index.tsx‎

Lines changed: 43 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import * as React from 'react';
2-
import {Text, Input, Button, InputRef, useTheme} from '@fast-base/native';
3-
4-
const inputStyle = {marginBottom: 15};
2+
import {Text, Input, Button, InputRef, useTheme, Gap} from '@fast-base/native';
53

64
const InputExample: React.FC = () => {
75
const {colors} = useTheme();
@@ -28,54 +26,48 @@ const InputExample: React.FC = () => {
2826

2927
return (
3028
<React.Fragment>
31-
<Input.Underline
32-
ref={ref}
33-
animatable
34-
label="Label"
35-
containerStyle={inputStyle}
36-
placeholder="Write inline..."
37-
focusedBorderColor="purple-400"
38-
/>
39-
<Input.Outline
40-
// invalid
41-
label="Username"
42-
containerStyle={inputStyle}
43-
placeholder="Write inline..."
44-
invalidLabel="Username pattern is invalid"
45-
hintLabel="Username should be only characters"
46-
/>
47-
<Input.Outline
48-
radius="lg"
49-
leftElement={Left}
50-
rightElement={Right}
51-
placeholder="Enter website"
52-
containerStyle={inputStyle}
53-
/>
54-
<Input.Outline
55-
size="lg"
56-
multiline
57-
radius="full"
58-
containerStyle={inputStyle}
59-
placeholder="Enter multiline..."
60-
/>
61-
<Button pressable size="sm" onPress={() => ref.current?.shake()}>
62-
Shake!
63-
</Button>
64-
<Button pressable size="sm" onPress={() => ref.current?.bounce()}>
65-
Bounce!
66-
</Button>
67-
<Button pressable size="sm" onPress={() => ref.current?.focus()}>
68-
Focus!
69-
</Button>
70-
<Button pressable size="sm" onPress={() => ref.current?.blur()}>
71-
Blur!
72-
</Button>
73-
<Button pressable size="sm" onPress={() => ref.current?.clear()}>
74-
Clear!
75-
</Button>
76-
<Text color={colors?.secondText} ax="justify" size={13}>
77-
The above action buttons were been referenced to the first text input.{' '}
78-
</Text>
29+
<Gap space={10}>
30+
<Input.Underline
31+
ref={ref}
32+
animatable
33+
label="Label"
34+
placeholder="Write inline..."
35+
focusedBorderColor="purple-400"
36+
/>
37+
<Input.Outline
38+
// invalid
39+
label="Username"
40+
placeholder="Write inline..."
41+
invalidLabel="Username pattern is invalid"
42+
hintLabel="Username should be only characters"
43+
/>
44+
<Input.Outline
45+
radius="lg"
46+
leftElement={Left}
47+
rightElement={Right}
48+
placeholder="Enter website"
49+
/>
50+
<Input.Outline radius="full" passowrd placeholder="Password" />
51+
<Input.Outline size="lg" multiline placeholder="Enter multiline..." />
52+
<Button pressable size="sm" onPress={() => ref.current?.shake()}>
53+
Shake!
54+
</Button>
55+
<Button pressable size="sm" onPress={() => ref.current?.bounce()}>
56+
Bounce!
57+
</Button>
58+
<Button pressable size="sm" onPress={() => ref.current?.focus()}>
59+
Focus!
60+
</Button>
61+
<Button pressable size="sm" onPress={() => ref.current?.blur()}>
62+
Blur!
63+
</Button>
64+
<Button pressable size="sm" onPress={() => ref.current?.clear()}>
65+
Clear!
66+
</Button>
67+
<Text color={colors?.secondText} ax="justify" size={13}>
68+
The above action buttons were been referenced to the first text input.{' '}
69+
</Text>
70+
</Gap>
7971
</React.Fragment>
8072
);
8173
};

‎src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ exports[`Button component should render correcly 1`] = `
3232
onResponderTerminate={[Function]}
3333
onResponderTerminationRequest={[Function]}
3434
onStartShouldSetResponder={[Function]}
35+
role="button"
3536
style={
3637
Object {
3738
"alignItems": "center",

‎src/components/Button/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -214,13 +214,15 @@ const Button = React.forwardRef<any, Partial<ButtonProps>>(
214214
})}>
215215
<Pressable
216216
ref={ref}
217+
role="button"
217218
disabled={disabled}
218219
onPressOut={onPressOut}
219220
onPress={onButtonPress}
220221
testID="FAST_BASE_BUTTON"
221222
accessibilityRole="button"
222223
onPressIn={onButtonPressIn}
223224
onLongPress={onLongButtonPress}
225+
aria-busy={accessibilityState.busy}
224226
accessibilityState={accessibilityState}
225227
style={StyleSheet.flatten([memorizedButtonStyle, style])}
226228
{...rest}>

‎src/components/Input/__tests__/__snapshots__/Input.test.tsx.snap‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ exports[`Input components should render outline correctly 1`] = `
4444
"color": "#000000",
4545
"flex": 1,
4646
"fontSize": 27.083333333333336,
47+
"outlineStyle": "none",
4748
"paddingBottom": 21.666666666666668,
4849
"paddingEnd": 27.083333333333336,
4950
"paddingStart": 27.083333333333336,
@@ -97,6 +98,7 @@ exports[`Input components should render underline correctly 1`] = `
9798
"color": "#000000",
9899
"flex": 1,
99100
"fontSize": 27.083333333333336,
101+
"outlineStyle": "none",
100102
"paddingBottom": 21.666666666666668,
101103
"paddingTop": 21.666666666666668,
102104
}

‎src/components/Input/styles.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -172,6 +172,8 @@ export const useInputStyle = ({
172172
const textInputStyle = useStyle(() => {
173173
let appliedStyles: TextStyle = {
174174
flex: 1,
175+
//@ts-expect-error it's only works for web
176+
outlineStyle: 'none',
175177
color: disabled ? colors?.disabled : colors?.text,
176178
};
177179
if (size in DefaultSizes) {

0 commit comments

Comments
 (0)