Skip to content

Commit

Permalink
Merge pull request #4851 from GeekyAnts/release/3.4.0-rc.0
Browse files Browse the repository at this point in the history
Release/3.4.0 rc.0
  • Loading branch information
surajahmed authored Mar 31, 2022
2 parents 2d42ff6 + 313cdae commit c0cbd28
Show file tree
Hide file tree
Showing 260 changed files with 8,738 additions and 2,092 deletions.
3 changes: 2 additions & 1 deletion example/storybook/stories/components/Wrapper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@ function MyWrapper({ children }: any) {
zIndex={4}
onPress={toggleColorMode}
icon={colorMode === 'dark' ? <SunIcon /> : <MoonIcon />}
size="lg"
/>
</Tooltip>
{children}
Expand All @@ -126,7 +127,7 @@ export default ({ children, theme }: any) => {
const colorModeManager: StorageManager = {
get: async () => {
try {
let val = await AsyncStorage.getItem('@example-wrapper-mode');
const val = await AsyncStorage.getItem('@example-wrapper-mode');
return val === 'dark' ? 'dark' : 'light';
} catch (e) {
console.log(e);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export function Example() {
</HStack>
<IconButton
variant="unstyled"
_focus={{ borderWidth: 0 }}
icon={<CloseIcon size="3" color="coolGray.600" />}
onPress={() => setShow(false)}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export const Example = () => {
</HStack>
<IconButton
variant="unstyled"
_focus={{ borderWidth: 0 }}
icon={<CloseIcon size="3" color="coolGray.600" />}
/>
</HStack>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export function Example() {
</HStack>
<IconButton
variant="unstyled"
_focus={{ borderWidth: 0 }}
icon={<CloseIcon size="3" color="coolGray.600" />}
/>
</HStack>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export function Example() {
</HStack>
<IconButton
variant="unstyled"
_focus={{ borderWidth: 0 }}
icon={<CloseIcon size="3" color="coolGray.600" />}
/>
</HStack>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ export function Example() {
</HStack>
<IconButton
variant="unstyled"
_focus={{ borderWidth: 0 }}
icon={<CloseIcon size="3" color="coolGray.600" />}
/>
</HStack>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export function Example() {
</HStack>
<IconButton
variant="unstyled"
_focus={{ borderWidth: 0 }}
icon={<CloseIcon size="3" color="coolGray.600" />}
/>
</HStack>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import React from 'react';
import { Avatar, HStack } from 'native-base';
import { Avatar, VStack } from 'native-base';

export const Example = () => {
return (
<HStack justifyContent="center" mx={{ base: 'auto', md: '0' }} space={2}>
<VStack space={2} alignItems="center">
<Avatar
bg="lightBlue.400"
source={{
uri:
'https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
}}
size="xs"
>
NB
<Avatar.Badge bg="green.500" />
Expand All @@ -20,10 +21,55 @@ export const Example = () => {
uri:
'https://images.unsplash.com/photo-1614289371518-722f2615943d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
}}
size="sm"
>
NB
<Avatar.Badge bg="green.500" />
</Avatar>
</HStack>
<Avatar
bg="amber.500"
source={{
uri:
'https://images.unsplash.com/photo-1614289371518-722f2615943d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
}}
size="md"
>
NB
<Avatar.Badge bg="green.500" />
</Avatar>
<Avatar
bg="amber.500"
source={{
uri:
'https://images.unsplash.com/photo-1614289371518-722f2615943d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
}}
size="lg"
>
NB
<Avatar.Badge bg="green.500" />
</Avatar>
<Avatar
bg="amber.500"
source={{
uri:
'https://images.unsplash.com/photo-1614289371518-722f2615943d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
}}
size="xl"
>
NB
<Avatar.Badge bg="green.500" />
</Avatar>
<Avatar
bg="amber.500"
source={{
uri:
'https://images.unsplash.com/photo-1614289371518-722f2615943d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
}}
size="2xl"
>
NB
<Avatar.Badge bg="green.500" />
</Avatar>
</VStack>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Avatar, Center } from 'native-base';
export const Example = () => {
return (
<Center>
<Avatar.Group size="lg" max={3}>
<Avatar.Group _avatar={{ size: 'lg' }} max={3}>
<Avatar
bg="green.500"
source={{
Expand Down
19 changes: 19 additions & 0 deletions example/storybook/stories/components/composites/Badge/icons.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React from 'react';
import { Badge, Stack, AddIcon } from 'native-base';

export const Example = () => {
return (
<Stack direction={{ base: 'column', md: 'row' }} space={4}>
<Badge colorScheme="success" endIcon={<AddIcon size="2xs" />}>
SUCCESS
</Badge>
<Badge
colorScheme="warning"
variant="outline"
startIcon={<AddIcon size="2xs" />}
>
SUCCESS
</Badge>
</Stack>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,14 @@ import { Example as Color } from './color';
import { Example as Playground } from './knobEnabled';
import { Example as Variants } from './variants';
import { Example as Composition } from './composition';
import { Example as Icon } from './icons';

storiesOf('Badge', module)
.addDecorator(withKnobs)
.addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)
.add('Playground', () => <Playground />)
.add('Usage', () => <Usage />)
.add('Icon', () => <Icon />)
.add('Color', () => <Color />)
.add('Variants', () => <Variants />)
.add('Composition', () => <Composition />);
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,15 @@ export function Example() {
<Badge colorScheme="success" alignSelf="center" variant={key}>
SUCCESS
</Badge>
<Badge colorScheme="danger" alignSelf="center" variant={key}>
DANGER
<Badge colorScheme="error" alignSelf="center" variant={key}>
ERROR
</Badge>
<Badge colorScheme="info" alignSelf="center" variant={key}>
INFO
</Badge>
<Badge colorScheme="warning" alignSelf="center" variant={key}>
WARNING
</Badge>
</VStack>
))}
</HStack>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
export const Example = () => {
return (
<Box alignItems="center">
<Box w="90%" maxWidth="300px">
<Box w="100%" maxWidth="300px">
<FormControl isRequired>
<Stack mx="4">
<FormControl.Label>Password</FormControl.Label>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,21 +1,19 @@
import React from 'react';
import { IconButton, Box, Center, VStack } from 'native-base';
import { IconButton, Center, VStack } from 'native-base';
import { MaterialIcons } from '@expo/vector-icons';
export const Example = () => {
return (
<Center>
<VStack space={4} alignItems="center">
{['sm', 'md', 'lg'].map((size: any) => (
<Box>
<IconButton
size={size}
variant="solid"
_icon={{
as: MaterialIcons,
name: 'menu',
}}
/>
</Box>
{['xs', 'sm', 'md', 'lg'].map((size: any) => (
<IconButton
size={size}
variant="solid"
_icon={{
as: MaterialIcons,
name: 'menu',
}}
/>
))}
</VStack>
</Center>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
import React from 'react';
import {
Button,
useToast,
VStack,
HStack,
Text,
Center,
IconButton,
CloseIcon,
Alert,
} from 'native-base';

export const Example = () => {
const toast = useToast();
const ToastDetails = [
{
title: 'Account verified',
status: 'success',
description: 'Thanks for signing up with us.',
isClosable: true,
},
{
title: 'Something went wrong',
status: 'error',
description: 'Please create a support ticket from the support page',
},
{
title: 'Network connection restored',
status: 'info',
description:
'This is to inform you that your network connectivity is restored',
isClosable: true,
},
{
title: 'Invalid email address',
status: 'warning',
description: 'Please enter a valid email address',
},
];

const ToastAlert = ({
id,
status,
variant,
title,
description,
isClosable,
...rest
}: any) => (
<Alert
maxWidth="100%"
alignSelf="center"
flexDirection="row"
status={status ?? 'info'}
variant={variant as any}
{...rest}
>
<VStack space={1} flexShrink={1} w="100%">
<HStack
flexShrink={1}
alignItems="center"
justifyContent="space-between"
>
<HStack space={2} flexShrink={1} alignItems="center">
<Alert.Icon />
<Text
fontSize="md"
fontWeight="medium"
flexShrink={1}
color="darkText"
>
{title}
</Text>
</HStack>
{isClosable ? (
<IconButton
variant="unstyled"
icon={<CloseIcon size="3" />}
onPress={() => toast.close(id)}
/>
) : null}
</HStack>
<Text px="6" color="darkText">
{description}
</Text>
</VStack>
</Alert>
);

return (
<Center>
<VStack space={2}>
{ToastDetails.map((item) => (
<Button
colorScheme={item.status}
onPress={() =>
toast.show({
render: ({ id }) => {
return <ToastAlert id={id} {...item} />;
},
})
}
>
{item.status}
</Button>
))}
</VStack>
</Center>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,6 @@ export const Example = () => {
toast.show({
title: 'Hello world',
placement: 'top-right',
backgroundColor: 'pink.400',
})
}
>
Expand Down
Loading

0 comments on commit c0cbd28

Please sign in to comment.