-
Notifications
You must be signed in to change notification settings - Fork 116
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1658 from gluestack/release/@gluestack-ui/themed@…
…1.0.37 Release/@gluestack UI/themed@1.0.37
- Loading branch information
Showing
33 changed files
with
11,075 additions
and
61 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
11 changes: 11 additions & 0 deletions
11
example/storybook/src/ui/react-native-components/ImageBackground/ImageBackground.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import type { ComponentMeta } from '@storybook/react-native'; | ||
| import ImageBackground from './ImageBackground'; | ||
|
|
||
| const ImageBackgroundMeta: ComponentMeta<typeof ImageBackground> = { | ||
| title: 'stories/React Native Components/ImageBackground', | ||
| component: ImageBackground, | ||
| }; | ||
|
|
||
| export default ImageBackgroundMeta; | ||
|
|
||
| export { ImageBackground }; |
33 changes: 33 additions & 0 deletions
33
example/storybook/src/ui/react-native-components/ImageBackground/ImageBackground.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { | ||
| Center, | ||
| Heading, | ||
| Text, | ||
| View, | ||
| ImageBackground, | ||
| } from '@gluestack-ui/themed'; | ||
| import React from 'react'; | ||
| import Wrapper from '../../components/Wrapper'; | ||
|
|
||
| export default function ImageBackgroundStory() { | ||
| return ( | ||
| <View h="$96" w="$96"> | ||
| <ImageBackground | ||
| source={{ uri: 'https://legacy.reactjs.org/logo-og.png' }} | ||
| style={{ flex: 1, justifyContent: 'center' }} | ||
| > | ||
| <Text | ||
| color="$white" | ||
| fontSize={42} | ||
| lineHeight={84} | ||
| fontWeight="$bold" | ||
| textAlign="center" | ||
| backgroundColor="#000000c0" | ||
| > | ||
| Inside | ||
| </Text> | ||
| </ImageBackground> | ||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| export { View, Center, Heading, Text, Wrapper, ImageBackground }; |
119 changes: 119 additions & 0 deletions
119
example/storybook/src/ui/react-native-components/ImageBackground/index.stories.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,119 @@ | ||
| --- | ||
| title: ImageBackground | gluestack-ui | ||
| description: ImageBackground is the most fundamental component for building a UI. It is a common feature request from developers familiar with the web is background-image. | ||
| --- | ||
|
|
||
| import { Canvas, Meta, Story } from '@storybook/addon-docs'; | ||
| import { transformedCode } from '../../utils'; | ||
| import { | ||
| AppProvider, | ||
| CodePreview, | ||
| Table, | ||
| TableContainer, | ||
| InlineCode, | ||
| } from '@gluestack/design-system'; | ||
| import {ImageBackground, Text, Heading, Wrapper, View } from './ImageBackground'; | ||
|
|
||
| <Meta title="ui/React Native Components/ImageBackground" /> | ||
|
|
||
| #ImageBackground | ||
|
|
||
| The most fundamental component for building a UI. | ||
|
|
||
| <AppProvider> | ||
| <CodePreview | ||
| showComponentRenderer={true} | ||
| showArgsController={false} | ||
| metaData={{ | ||
| code: ` | ||
| <View h="$96" w="$96"> | ||
| <ImageBackground | ||
| source={{ uri: 'https://legacy.reactjs.org/logo-og.png' }} | ||
| style={{ flex: 1, justifyContent: 'center' }} | ||
| > | ||
| <Text | ||
| color="$white" | ||
| fontSize={42} | ||
| lineHeight={84} | ||
| fontWeight="$bold" | ||
| textAlign="center" | ||
| backgroundColor="#000000c0" | ||
| > | ||
| Inside | ||
| </Text> | ||
| </ImageBackground> | ||
| </View> | ||
| `, | ||
| transformCode: (code) => { | ||
| return transformedCode(code); | ||
| }, | ||
| scope: { | ||
| Wrapper, | ||
| Text, | ||
| Heading,View, | ||
| ImageBackground, | ||
| }, | ||
| }} | ||
| /> | ||
| </AppProvider> | ||
|
|
||
| <br /> | ||
|
|
||
| > Note: You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/ImageBackground/styled-components) to learn about default styling of StatusBar component | ||
| ### Import | ||
|
|
||
| To use this component in your project, include the following import statement in your file. | ||
|
|
||
| ```bash | ||
| import {ImageBackground } from '@gluestack-ui/themed'; | ||
| ``` | ||
|
|
||
| ### Anatomy | ||
|
|
||
| The structure provided below can help you identify and understand a badge component's various parts. | ||
|
|
||
| ```jsx | ||
| export default () => <ImageBackground></ImageBackground>; | ||
| ``` | ||
|
|
||
| ### Props | ||
|
|
||
| gluestack-uiImageBackground component is created usingImageBackground component from react-native. It extends all the props supported by [React Native ImageBackground](https://reactnative.dev/docs/ImageBackground#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below. | ||
|
|
||
| #### ImageBackground | ||
|
|
||
| <AppProvider> | ||
| <TableContainer> | ||
| <Table> | ||
| <Table.THead> | ||
| <Table.TR> | ||
| <Table.TH> | ||
| <Table.TText>Name</Table.TText> | ||
| </Table.TH> | ||
| <Table.TH> | ||
| <Table.TText>Value</Table.TText> | ||
| </Table.TH> | ||
| <Table.TH> | ||
| <Table.TText>Default</Table.TText> | ||
| </Table.TH> | ||
| </Table.TR> | ||
| </Table.THead> | ||
| <Table.TBody> | ||
| <Table.TR> | ||
| <Table.TD> | ||
| <Table.TText> | ||
| <InlineCode>children</InlineCode> | ||
| </Table.TText> | ||
| </Table.TD> | ||
| <Table.TD> | ||
| <Table.TText>any</Table.TText> | ||
| </Table.TD> | ||
| <Table.TD> | ||
| <Table.TText>-</Table.TText> | ||
| </Table.TD> | ||
| </Table.TR> | ||
| </Table.TBody> | ||
| </Table> | ||
| </TableContainer> | ||
| </AppProvider> |
11 changes: 11 additions & 0 deletions
11
example/storybook/src/ui/react-native-components/RefreshControl/RefreshControl.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import type { ComponentMeta } from '@storybook/react-native'; | ||
| import RefreshControl from './RefreshControl'; | ||
|
|
||
| const RefreshControlMeta: ComponentMeta<typeof RefreshControl> = { | ||
| title: 'stories/React Native Components/RefreshControl', | ||
| component: RefreshControl, | ||
| }; | ||
|
|
||
| export default RefreshControlMeta; | ||
|
|
||
| export { RefreshControl }; |
43 changes: 43 additions & 0 deletions
43
example/storybook/src/ui/react-native-components/RefreshControl/RefreshControl.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import { | ||
| Center, | ||
| Button, | ||
| ButtonText, | ||
| Text, | ||
| Box, | ||
| StatusBar, | ||
| } from '@gluestack-ui/themed'; | ||
| import React from 'react'; | ||
| import { Platform } from 'react-native'; | ||
|
|
||
| export default function RefreshControlStory() { | ||
| const [visible, setVisible] = React.useState(true); | ||
| if (Platform.OS === 'web') { | ||
| return ( | ||
| <Center | ||
| sx={{ | ||
| _web: { | ||
| h: '100vh', | ||
| }, | ||
| }} | ||
| > | ||
| <Text>This Component only work on native devices</Text> | ||
| </Center> | ||
| ); | ||
| } | ||
| return ( | ||
| <Center> | ||
| <Box flex={1} h="100%"> | ||
| <StatusBar hidden={!visible} /> | ||
| <Center flex={1} h="100%"> | ||
| <Button | ||
| onPress={() => { | ||
| setVisible((prev) => !prev); | ||
| }} | ||
| > | ||
| <ButtonText>Toggle StatusBar Visibility</ButtonText> | ||
| </Button> | ||
| </Center> | ||
| </Box> | ||
| </Center> | ||
| ); | ||
| } |
Oops, something went wrong.