Skip to content

Commit

Permalink
Merge pull request GeekyAnts#4226 from GeekyAnts/fix/example-bugs
Browse files Browse the repository at this point in the history 
Fix: Example bugs
  • Loading branch information
@surajahmed
surajahmed authored Oct 22, 2021
2 parents 86ed279 + 3c63792 commit c1a8717
Show file tree
Hide file tree
Showing 5 changed files with 45 additions and 115 deletions.
3 changes: 2 additions & 1 deletion example/storybook/stories/components/primitives/Box/composition.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
export const Example = () => {
return (
<Box
maxW="80"
rounded="lg"
overflow="hidden"
borderColor="coolGray.200"
Expand All @@ -25,7 +26,7 @@ export const Example = () => {
_light={{ backgroundColor: 'gray.50' }}
>
<Box>
<AspectRatio ratio={16 / 9}>
<AspectRatio w="100%" ratio={16 / 9}>
<Image
source={{
uri:
Expand Down
15 changes: 5 additions & 10 deletions example/storybook/stories/components/primitives/Button/WithRef.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from 'react';
import { Button } from 'native-base';
import { Platform } from 'react-native';

export const Example = () => {
const myRef = React.useRef({});
Expand All @@ -9,16 +8,12 @@ export const Example = () => {
const styleObj = {
backgroundColor: '#facc15',
borderColor: '#CA8A04',
borderWidth: '1',
borderRadius: '4',
borderWidth: 1,
borderRadius: 4,
};
if (Platform.OS === 'web') {
//@ts-ignore
myRef?.current?.setNativeProps({ style: styleObj });
} else {
//@ts-ignore
myRef?.current?.setNativeProps({ styleObj });
}

//@ts-ignore
myRef?.current?.setNativeProps({ style: styleObj });
}, [myRef]);
return (
<Button
Expand Down
108 changes: 17 additions & 91 deletions example/storybook/stories/components/primitives/Button/variants.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {

export const Example = () => {
return (
<ScrollView px="32">
<ScrollView showsVerticalScrollIndicator={false} px="3">
<VStack
w="100%"
space={2.5}
Expand All @@ -28,24 +28,11 @@ export const Example = () => {
space={2}
mx={{ base: 'auto', md: '0' }}
>
<Button
size="sm"
// onPress={() => console.log('hello world')}
>
PRIMARY
</Button>
<Button
size="sm"
colorScheme="secondary"
// onPress={() => console.log('hello world')}
>
<Button size="sm">PRIMARY</Button>
<Button size="sm" colorScheme="secondary">
SECONDARY
</Button>
<Button
size="sm"
isDisabled
// onPress={() => console.log('hello world')}
>
<Button size="sm" isDisabled>
DISABLED
</Button>
</Stack>
Expand All @@ -62,27 +49,13 @@ export const Example = () => {
space={2}
mx={{ base: 'auto', md: '0' }}
>
<Button
size="sm"
variant="subtle"
// onPress={() => console.log('hello world')}
>
<Button size="sm" variant="subtle">
PRIMARY
</Button>
<Button
size="sm"
variant="subtle"
colorScheme="secondary"
// onPress={() => console.log('hello world')}
>
<Button size="sm" variant="subtle" colorScheme="secondary">
SECONDARY
</Button>
<Button
size="sm"
variant="subtle"
isDisabled
// onPress={() => console.log('hello world')}
>
<Button size="sm" variant="subtle" isDisabled>
DISABLED
</Button>
</Stack>
Expand All @@ -97,27 +70,13 @@ export const Example = () => {
space={2}
mx={{ base: 'auto', md: '0' }}
>
<Button
size="sm"
variant="outline"
// onPress={() => console.log('hello world')}
>
<Button size="sm" variant="outline">
PRIMARY
</Button>
<Button
size="sm"
variant="outline"
colorScheme="secondary"
// onPress={() => console.log('hello world')}
>
<Button size="sm" variant="outline" colorScheme="secondary">
SECONDARY
</Button>
<Button
size="sm"
variant="outline"
isDisabled
// onPress={() => console.log('hello world')}
>
<Button size="sm" variant="outline" isDisabled>
DISABLED
</Button>
</Stack>
Expand All @@ -133,27 +92,13 @@ export const Example = () => {
space={2}
mx={{ base: 'auto', md: '0' }}
>
<Button
size="sm"
variant="link"
// onPress={() => console.log('hello world')}
>
<Button size="sm" variant="link">
PRIMARY
</Button>
<Button
size="sm"
variant="link"
colorScheme="secondary"
// onPress={() => console.log('hello world')}
>
<Button size="sm" variant="link" colorScheme="secondary">
SECONDARY
</Button>
<Button
size="sm"
variant="link"
isDisabled
// onPress={() => console.log('hello world')}
>
<Button size="sm" variant="link" isDisabled>
DISABLED
</Button>
</Stack>
Expand All @@ -169,27 +114,13 @@ export const Example = () => {
space={2}
mx={{ base: 'auto', md: '0' }}
>
<Button
size="sm"
variant="ghost"
// onPress={() => console.log('hello world')}
>
<Button size="sm" variant="ghost">
PRIMARY
</Button>
<Button
size="sm"
variant="ghost"
colorScheme="secondary"
// onPress={() => console.log('hello world')}
>
<Button size="sm" variant="ghost" colorScheme="secondary">
SECONDARY
</Button>
<Button
size="sm"
variant="ghost"
isDisabled
// onPress={() => console.log('hello world')}
>
<Button size="sm" variant="ghost" isDisabled>
DISABLED
</Button>
</Stack>
Expand All @@ -206,12 +137,7 @@ export const Example = () => {
space={2}
mx={{ base: 'auto', md: '0' }}
>
<Button
variant="unstyled"
// onPress={() => console.log('hello world')}
>
Unstyled
</Button>
<Button variant="unstyled">Unstyled</Button>
</Stack>
</VStack>
</ScrollView>
Expand Down
28 changes: 18 additions & 10 deletions example/storybook/stories/components/primitives/Flex/basic.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,23 @@ import {
ScrollView,
VStack,
Divider,
Box,
} from 'native-base';

export function Example() {
return (
<ScrollView>
<Center mt="4">
<VStack space={2.5} w="100%">
<Box flex="1" safeAreaTop>
<ScrollView>
<VStack space={2.5} w="100%" px="3">
{/* flexDirection -> row */}
<Heading size="md">row</Heading>

<Flex
direction="row"
mb="2.5"
mt="1.5"
_text={{ color: 'coolGray.800' }}
_text={{
color: 'coolGray.800',
}}
>
<Center size="16" bg="primary.100">
100
Expand All @@ -43,7 +45,9 @@ export function Example() {
direction="column"
mb="2.5"
mt="1.5"
_text={{ color: 'coolGray.800' }}
_text={{
color: 'coolGray.800',
}}
>
<Center size="16" bg="primary.100">
100
Expand All @@ -65,7 +69,9 @@ export function Example() {
direction="row-reverse"
mb="2.5"
mt="1.5"
_text={{ color: 'coolGray.800' }}
_text={{
color: 'coolGray.800',
}}
>
<Center size="16" bg="primary.100">
100
Expand All @@ -87,7 +93,9 @@ export function Example() {
direction="column-reverse"
mb="2.5"
mt="1.5"
_text={{ color: 'coolGray.800' }}
_text={{
color: 'coolGray.800',
}}
>
<Center size="16" bg="primary.100">
100
Expand All @@ -104,7 +112,7 @@ export function Example() {
</Flex>
<Divider />
</VStack>
</Center>
</ScrollView>
</ScrollView>
</Box>
);
}
6 changes: 3 additions & 3 deletions example/storybook/stories/components/primitives/Switch/ColorSchemes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ export const Example = () => {
<Heading textAlign="center" mb="10">
Color Scheme
</Heading>
<Switch isChecked colorScheme="primary" />
<Switch isChecked colorScheme="secondary" />
<Switch isChecked colorScheme="emerald" />
<Switch defaultIsChecked colorScheme="primary" />
<Switch defaultIsChecked colorScheme="secondary" />
<Switch defaultIsChecked colorScheme="emerald" />
</VStack>
);
};

0 comments on commit c1a8717

Please sign in to comment.