From f1a6033a1e3a05ac77daa326fe6abaff958e7676 Mon Sep 17 00:00:00 2001 From: Gonzalo Lopez Date: Thu, 19 Oct 2023 16:41:29 -0300 Subject: [PATCH] swipeUp component was updated --- .ondevice/storybook.requires.js | 1 + App.tsx | 31 +----- index.js | 4 +- package.json | 2 +- src/components/BottomDrawer/index.tsx | 51 ---------- .../SwipeUp/childComponents/index.tsx | 43 +++++++++ src/components/SwipeUp/index.tsx | 37 ++++++++ src/index.ts | 8 +- storybook/stories/SwipeUp/SwipeUp.stories.js | 95 +++++++++++++++++++ 9 files changed, 191 insertions(+), 81 deletions(-) delete mode 100644 src/components/BottomDrawer/index.tsx create mode 100644 src/components/SwipeUp/childComponents/index.tsx create mode 100644 src/components/SwipeUp/index.tsx create mode 100644 storybook/stories/SwipeUp/SwipeUp.stories.js diff --git a/.ondevice/storybook.requires.js b/.ondevice/storybook.requires.js index cb4b930..054feae 100644 --- a/.ondevice/storybook.requires.js +++ b/.ondevice/storybook.requires.js @@ -57,6 +57,7 @@ const getStories = () => { "./storybook/stories/RadioButton/RadioButton.stories.js": require("../storybook/stories/RadioButton/RadioButton.stories.js"), "./storybook/stories/StatusChip/StatusChip.stories.js": require("../storybook/stories/StatusChip/StatusChip.stories.js"), "./storybook/stories/Svg/Svg.stories.js": require("../storybook/stories/Svg/Svg.stories.js"), + "./storybook/stories/SwipeUp/SwipeUp.stories.js": require("../storybook/stories/SwipeUp/SwipeUp.stories.js"), "./storybook/stories/Text/Text.stories.js": require("../storybook/stories/Text/Text.stories.js"), }; }; diff --git a/App.tsx b/App.tsx index 5e08723..66d98ca 100644 --- a/App.tsx +++ b/App.tsx @@ -1,31 +1,10 @@ import React from 'react'; -import {Text} from 'react-native'; -import {GestureHandlerRootView} from 'react-native-gesture-handler' -import BottomDrawer from './src/components/BottomDrawer'; -import RadioButton from './src/components/RadioButton' - - const dataItem = [1,2,3,4,5,6,7,8,9,10,11,12,13,14] - - const renderItem = ({item,index}) => { - return ( - - {item} - - ) - } +import {View, Text} from 'react-native'; const App = () => ( - - - + + UI native + ); -export default App; +export default App; \ No newline at end of file diff --git a/index.js b/index.js index 4d2b94b..6b3cc9b 100644 --- a/index.js +++ b/index.js @@ -5,5 +5,7 @@ import App from './App'; import {name as appName} from './app.json'; import Storybook from './storybook'; -const Component = App; + +const Component = __DEV__ ? Storybook : App; + AppRegistry.registerComponent(appName, () => Component); diff --git a/package.json b/package.json index 6d76279..ddfe4e6 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,7 @@ "homepage": "https://github.com/janis-commerce/ui-native#readme", "peerDependencies": { "react": ">=17.0.2 <=18.2.0", - "react-native": ">=0.67.5 <=0.71.5" + "react-native": ">=0.67.5 <=0.71.7" }, "devDependencies": { "@babel/core": "^7.12.9", diff --git a/src/components/BottomDrawer/index.tsx b/src/components/BottomDrawer/index.tsx deleted file mode 100644 index fbe41f7..0000000 --- a/src/components/BottomDrawer/index.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import React, { ReactElement } from 'react' -import BottomSheet, {BottomSheetFlatList, BottomSheetProps, BottomSheetScrollView, BottomSheetView} from '@gorhom/bottom-sheet' -import { FlatListProps } from 'react-native' - - -type typeList = 'none' | 'flatList' | 'scrollView' - - -export interface BottomDrawerProps extends BottomSheetProps { - children: ReactElement | null - typeList?: typeList - data: any[], - renderItem: any -} - -const BottomDrawer = ({ - children, - snapPoints, - index = 0, - style, - onChange, - typeList = 'none', - containerStyle, - data, - renderItem, - ...props} : BottomDrawerProps) => { - - if(!snapPoints || !snapPoints ) return null; - - const wrapper = { - flatList: () => , - scrollView: () => {children}, - none: () => {children} - } - - const BottomContent = wrapper[typeList] - - return ( - - {BottomContent} - - ) -} - -export default BottomDrawer \ No newline at end of file diff --git a/src/components/SwipeUp/childComponents/index.tsx b/src/components/SwipeUp/childComponents/index.tsx new file mode 100644 index 0000000..1620cd7 --- /dev/null +++ b/src/components/SwipeUp/childComponents/index.tsx @@ -0,0 +1,43 @@ +import React,{EffectCallback, DependencyList, JSX} from 'react'; +import { BottomSheetFlatList, BottomSheetScrollView, BottomSheetScrollableProps, BottomSheetView } from '@gorhom/bottom-sheet'; +import {FlatListProps, ScrollViewProps, ViewProps} from 'react-native' + +interface BottomSheetFocusProps { + focusHook?: (effect: EffectCallback, deps?: DependencyList) => void +} + +type SwipeUpFlatListProps = FlatListProps & BottomSheetScrollableProps +type SwipeUpScrollViewProps = ScrollViewProps & BottomSheetScrollableProps +type SwipeUpViewProps = ViewProps & BottomSheetFocusProps + +export const SwipeUpFlatList = ({data = [] ,renderItem, ...props} : SwipeUpFlatListProps) : JSX.Element | null => { + + if(!data || !data.length || !renderItem) return null + + return ( + + ) +} + +export const SwipeUpScrollView = ({children, ...props} : SwipeUpScrollViewProps) : JSX.Element | null => { + + if(!children) return null + + return ( + + {children} + + ) +} + + +export const SwipeUpView = ({children, ...props} :SwipeUpViewProps) : JSX.Element | null => { + + if(!children) return null + + return ( + + {children} + + ) +} \ No newline at end of file diff --git a/src/components/SwipeUp/index.tsx b/src/components/SwipeUp/index.tsx new file mode 100644 index 0000000..d83a37b --- /dev/null +++ b/src/components/SwipeUp/index.tsx @@ -0,0 +1,37 @@ +import React from 'react' +import BottomSheet, { BottomSheetProps } from '@gorhom/bottom-sheet' +import { ViewStyle } from 'react-native' + +export interface SwipeUpProps extends BottomSheetProps { + onChangeSnap?: () => void + swipeWrapperStyle?: ViewStyle + snapPosition?: number +} + +const SwipeUp =({ + children, + snapPoints = ['100%'], + snapPosition = 0, + style, + onChangeSnap, + backgroundStyle, + swipeWrapperStyle, + ...props} : SwipeUpProps) => { + + if(!children) return null; + + return ( + + {children} + + ) +} + +export default SwipeUp; \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index 6839aa9..3b9f818 100644 --- a/src/index.ts +++ b/src/index.ts @@ -9,7 +9,8 @@ import Input from './components/Input'; import LoadingFullScreen from './components/LoadingFullScreen'; import {palette} from './theme/palette'; import RadioButton from './components/RadioButton'; -import BottomDrawer from './components/BottomDrawer'; +import SwipeUp from './components/SwipeUp'; +import { SwipeUpFlatList, SwipeUpScrollView, SwipeUpView } from './components/SwipeUp/childComponents'; export { Text, @@ -23,5 +24,8 @@ export { palette, LoadingFullScreen, RadioButton, - BottomDrawer + SwipeUp, + SwipeUpFlatList, + SwipeUpScrollView, + SwipeUpView }; diff --git a/storybook/stories/SwipeUp/SwipeUp.stories.js b/storybook/stories/SwipeUp/SwipeUp.stories.js new file mode 100644 index 0000000..cb6cbed --- /dev/null +++ b/storybook/stories/SwipeUp/SwipeUp.stories.js @@ -0,0 +1,95 @@ +import React from 'react' +import { GestureHandlerRootView } from 'react-native-gesture-handler' +import {Text, StyleSheet, View } from 'react-native' +import SwipeUp from '../../../src/components/SwipeUp' +import RadioButton from '../../../src/components/RadioButton' +import Svg from '../../../src/components/Svg' +import { SwipeUpFlatList, SwipeUpView } from '../../../src/components/SwipeUp/childComponents' + + +export default { + title: 'Components/SwipeUp', + argTypes: { + snapPoints: { + options:[["25%","50%","100%"],[120,240,460]], + control: {type: 'select'} + }, + snapPosition: { + options: [0,1,2], + control: {type: 'radio'} + } + } +} + +const styles = StyleSheet.create({ + screenStyle: { + height:"100%", + width:"100%" + }, + wrapperStyle: { + backgroundColor:'rgb(122, 193, 224)' + }, + contentStyle: { + flex:1, + justifyContent:'center', + alignItems:'center', + backgroundColor:'rgb(122, 193, 224)' + } + +}) + +const dataItem = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30] + +const renderItem = ({item,index}) => { + return ( + + {item} + + ) +} + +export const WithSwipeUpViewComponent = (props) => { + return ( + + + + + + + + ) +} + +export const WithSwipeUpFlatListComponent = (props) => { + return ( + + + To render scrollable components, you must use the next additional components as children: + SwipeUpFlatList + SwipeUpSCrollView + + + + + + ) +} + + +WithSwipeUpViewComponent.args = { + snapPoints: ["25%","50%","100%"], + snapPosition:0 +} + +WithSwipeUpViewComponent.storyName = 'render with static children;' + +WithSwipeUpFlatListComponent.args = { + snapPoints: ["1%","50%","100%"], + snapPosition:1 +} + +WithSwipeUpFlatListComponent.storyName = 'render with scrollable component' \ No newline at end of file