From 4a4b503fc74974065e5d7bf8897306d9446200e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olaf=20Chwo=C5=82ka?= Date: Mon, 24 Jun 2024 14:10:06 +0200 Subject: [PATCH 01/14] expo-image added --- package.json | 1 + src/components/CompanyLogo.tsx | 12 ++----- src/components/LandingHeader.tsx | 6 ++-- .../molecules/SocialButtons/SocialButton.tsx | 8 +++-- .../screens/profile/ProfileEditImage.tsx | 3 +- yarn.lock | 36 +++++++++++++++++-- 6 files changed, 48 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index b962cc2a..f0935892 100644 --- a/package.json +++ b/package.json @@ -121,6 +121,7 @@ "expo-device": "~6.0.2", "expo-font": "~12.0.5", "expo-haptics": "~13.0.1", + "expo-image": "~1.12.12", "expo-image-picker": "~15.0.5", "expo-linear-gradient": "~13.0.2", "expo-linking": "~6.3.1", diff --git a/src/components/CompanyLogo.tsx b/src/components/CompanyLogo.tsx index 831725cf..25fa4a11 100644 --- a/src/components/CompanyLogo.tsx +++ b/src/components/CompanyLogo.tsx @@ -1,6 +1,7 @@ import { darkBinarLogo, darkLogoSygnet, lightBinarLogo, lightLogoSygnet } from '@baca/constants' import { ColorSchemeName, useColorScheme } from '@baca/contexts' -import { Image, ImageProps, ImageStyle } from 'react-native' +import { Image } from 'expo-image' +import { ImageProps, ImageStyle } from 'react-native' type LogoTypes = 'binarSygnet' | 'binar' @@ -26,12 +27,5 @@ export const CompanyLogo = ({ const source = LOGO[colorScheme][type] - return ( - - ) + return } diff --git a/src/components/LandingHeader.tsx b/src/components/LandingHeader.tsx index 54e326a8..db8af805 100644 --- a/src/components/LandingHeader.tsx +++ b/src/components/LandingHeader.tsx @@ -5,9 +5,10 @@ import { useFullScreenModal } from '@baca/design-system/modals/useFullScreenModa import { useCallback, useMemo, useTheme, useTranslation } from '@baca/hooks' import { useUniversalWidth } from '@baca/navigation/tabNavigator/hooks' import { isSignedInAtom } from '@baca/store/auth' +import { Image } from 'expo-image' import { useRouter } from 'expo-router' import { useAtomValue } from 'jotai' -import { Image, StyleSheet, Platform, View } from 'react-native' +import { StyleSheet, Platform, View } from 'react-native' import { useSafeAreaInsets } from 'react-native-safe-area-context' export function LandingHeader() { @@ -36,8 +37,7 @@ export function LandingHeader() { ) : ( diff --git a/src/components/molecules/SocialButtons/SocialButton.tsx b/src/components/molecules/SocialButtons/SocialButton.tsx index 11e51700..efe069bf 100644 --- a/src/components/molecules/SocialButtons/SocialButton.tsx +++ b/src/components/molecules/SocialButtons/SocialButton.tsx @@ -2,8 +2,9 @@ import { googleIcon } from '@baca/constants' import { useColorScheme } from '@baca/contexts' import { Button, ButtonProps, Icon } from '@baca/design-system' import i18n from '@baca/i18n' +import { Image, ImageStyle } from 'expo-image' import { FC, useCallback } from 'react' -import { Image, ImageSourcePropType } from 'react-native' +import { ImageSourcePropType } from 'react-native' type SocialMediaType = 'apple' | 'facebook' | 'google' @@ -51,7 +52,10 @@ export const SocialButton: FC = ({ type = 'google', ...rest } return case 'google': return ( - + ) } }, diff --git a/src/components/screens/profile/ProfileEditImage.tsx b/src/components/screens/profile/ProfileEditImage.tsx index 5ab78b6e..ab190e7b 100644 --- a/src/components/screens/profile/ProfileEditImage.tsx +++ b/src/components/screens/profile/ProfileEditImage.tsx @@ -1,8 +1,9 @@ import { Box, Text, Button, Row, themeColors } from '@baca/design-system' +import { Image } from 'expo-image' import * as ImagePicker from 'expo-image-picker' import { t } from 'i18next' import { useState, useCallback } from 'react' -import { Image, StyleSheet } from 'react-native' +import { StyleSheet } from 'react-native' export const ProfileEditImage: React.FC = () => { const [image, setImage] = useState(null) diff --git a/yarn.lock b/yarn.lock index 707cf7e5..81147a7d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6310,6 +6310,11 @@ expo-image-picker@~15.0.5: dependencies: expo-image-loader "~4.7.0" +expo-image@~1.12.12: + version "1.12.12" + resolved "https://registry.yarnpkg.com/expo-image/-/expo-image-1.12.12.tgz#b6422a07da0f6dddcea154d2857f617086a527cc" + integrity sha512-zZutUhKYqcqTH12o87pGCVLsuQeRK2vaNwxa8beznbDnmWevm3dmbOTCxaOhGgjyDxwcdwDa483Q4IKCXL6tBw== + expo-json-utils@~0.13.0: version "0.13.1" resolved "https://registry.yarnpkg.com/expo-json-utils/-/expo-json-utils-0.13.1.tgz#e49b697198e11c573d346f08ab91c467095934a9" @@ -12157,7 +12162,16 @@ string-length@^5.0.1: char-regex "^2.0.0" strip-ansi "^7.0.1" -"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0": + version "4.2.3" + resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" + integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== + dependencies: + emoji-regex "^8.0.0" + is-fullwidth-code-point "^3.0.0" + strip-ansi "^6.0.1" + +string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -12235,7 +12249,7 @@ string_decoder@~1.1.1: dependencies: safe-buffer "~5.1.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1": version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -12249,6 +12263,13 @@ strip-ansi@^5.0.0, strip-ansi@^5.2.0: dependencies: ansi-regex "^4.1.0" +strip-ansi@^6.0.0, strip-ansi@^6.0.1: + version "6.0.1" + resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" + integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== + dependencies: + ansi-regex "^5.0.1" + strip-ansi@^7.0.1: version "7.1.0" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45" @@ -13353,7 +13374,7 @@ word-wrap@^1.2.5: resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34" integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA== -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -13371,6 +13392,15 @@ wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" +wrap-ansi@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" + integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== + dependencies: + ansi-styles "^4.0.0" + string-width "^4.1.0" + strip-ansi "^6.0.0" + wrap-ansi@^8.0.1, wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214" From a7350cc7b9d34b28c59b1aff1c8ced6b91370a93 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olaf=20Chwo=C5=82ka?= Date: Mon, 24 Jun 2024 15:31:59 +0200 Subject: [PATCH 02/14] deleted react native image props --- src/components/CompanyLogo.tsx | 3 +-- src/components/molecules/SocialButtons/SocialButton.tsx | 5 ++--- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/CompanyLogo.tsx b/src/components/CompanyLogo.tsx index 25fa4a11..99ffbc52 100644 --- a/src/components/CompanyLogo.tsx +++ b/src/components/CompanyLogo.tsx @@ -1,7 +1,6 @@ import { darkBinarLogo, darkLogoSygnet, lightBinarLogo, lightLogoSygnet } from '@baca/constants' import { ColorSchemeName, useColorScheme } from '@baca/contexts' -import { Image } from 'expo-image' -import { ImageProps, ImageStyle } from 'react-native' +import { Image, ImageStyle, ImageProps } from 'expo-image' type LogoTypes = 'binarSygnet' | 'binar' diff --git a/src/components/molecules/SocialButtons/SocialButton.tsx b/src/components/molecules/SocialButtons/SocialButton.tsx index efe069bf..25715f71 100644 --- a/src/components/molecules/SocialButtons/SocialButton.tsx +++ b/src/components/molecules/SocialButtons/SocialButton.tsx @@ -2,15 +2,14 @@ import { googleIcon } from '@baca/constants' import { useColorScheme } from '@baca/contexts' import { Button, ButtonProps, Icon } from '@baca/design-system' import i18n from '@baca/i18n' -import { Image, ImageStyle } from 'expo-image' +import { Image, ImageStyle, ImageSource } from 'expo-image' import { FC, useCallback } from 'react' -import { ImageSourcePropType } from 'react-native' type SocialMediaType = 'apple' | 'facebook' | 'google' const socialButtonVariants: { [key in SocialMediaType]: { - source?: { light: ImageSourcePropType; dark?: ImageSourcePropType } + source?: { light: ImageSource; dark?: ImageSource } text: () => string } } = { From ffb38b7cebb6332257023b5c395fb1ee35926cee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olaf=20Chwo=C5=82ka?= Date: Mon, 24 Jun 2024 16:36:43 +0200 Subject: [PATCH 03/14] testing FlashList --- package.json | 1 + src/components/COMPONENTS.md | 1 + .../bottomSheets/BootomSheetScrollables.tsx | 7 +++-- .../bottomSheets/BottomSheetFlashList.tsx | 2 ++ .../bottomSheets/BottomSheetFlashList.web.tsx | 1 + .../bottomSheets/BottomSheetFlatList.tsx | 2 -- .../bottomSheets/BottomSheetFlatList.web.tsx | 1 - src/design-system/components/Select.tsx | 27 ++++++++-------- yarn.lock | 31 +++++++++++++++++-- 9 files changed, 52 insertions(+), 21 deletions(-) create mode 100644 src/design-system/bottomSheets/BottomSheetFlashList.tsx create mode 100644 src/design-system/bottomSheets/BottomSheetFlashList.web.tsx delete mode 100644 src/design-system/bottomSheets/BottomSheetFlatList.tsx delete mode 100644 src/design-system/bottomSheets/BottomSheetFlatList.web.tsx diff --git a/package.json b/package.json index f0935892..0af3cb28 100644 --- a/package.json +++ b/package.json @@ -106,6 +106,7 @@ "@react-navigation/native": "^6.1.9", "@react-navigation/native-stack": "^6.9.17", "@react-navigation/stack": "^6.3.20", + "@shopify/flash-list": "1.6.4", "@tanstack/react-query": "^4.29.19", "axios": "^1.7.2", "core-js": "^3.37.1", diff --git a/src/components/COMPONENTS.md b/src/components/COMPONENTS.md index b75d73e5..cc34c112 100644 --- a/src/components/COMPONENTS.md +++ b/src/components/COMPONENTS.md @@ -124,6 +124,7 @@ FAB.Group Fail // Toast FieldWrapper FlatList +FlashList Flex // TODO: FloatingMenu Form // TODO: diff --git a/src/design-system/bottomSheets/BootomSheetScrollables.tsx b/src/design-system/bottomSheets/BootomSheetScrollables.tsx index 24be6705..ee237e70 100644 --- a/src/design-system/bottomSheets/BootomSheetScrollables.tsx +++ b/src/design-system/bottomSheets/BootomSheetScrollables.tsx @@ -2,10 +2,11 @@ // Could be connected to this: https://github.com/gorhom/react-native-bottom-sheet/issues/1524 // Could be connected to this: https://github.com/gorhom/react-native-bottom-sheet/issues/1760 // After upgrading bottom sheet library try changing the imports, maybe it will work as expected -// import { BottomSheetScrollView as ScrollView, BottomSheetFlatList as FlatList, BottomSheetSectionList as SectionList } from "@gorhom/bottom-sheet"; +// import { BottomSheetScrollView as ScrollView, BottomSheetFlashList as FlashList, BottomSheetSectionList as SectionList } from "@gorhom/bottom-sheet"; +import { FlashList } from '@shopify/flash-list' import { SectionList } from 'react-native' -import { ScrollView, FlatList } from 'react-native-gesture-handler' +import { ScrollView } from 'react-native-gesture-handler' export const BottomSheetScrollView = ScrollView -export const BottomSheetFlatList = FlatList +export const BottomSheetFlashList = FlashList export const BottomSheetSectionList = SectionList diff --git a/src/design-system/bottomSheets/BottomSheetFlashList.tsx b/src/design-system/bottomSheets/BottomSheetFlashList.tsx new file mode 100644 index 00000000..b176d837 --- /dev/null +++ b/src/design-system/bottomSheets/BottomSheetFlashList.tsx @@ -0,0 +1,2 @@ +// export { BottomSheetFlashList } from '@gorhom/bottom-sheet' +export { BottomSheetFlashList } from './BootomSheetScrollables' diff --git a/src/design-system/bottomSheets/BottomSheetFlashList.web.tsx b/src/design-system/bottomSheets/BottomSheetFlashList.web.tsx new file mode 100644 index 00000000..2b81e2b7 --- /dev/null +++ b/src/design-system/bottomSheets/BottomSheetFlashList.web.tsx @@ -0,0 +1 @@ +export { FlashList as BottomSheetFlashList } from '@shopify/flash-list' diff --git a/src/design-system/bottomSheets/BottomSheetFlatList.tsx b/src/design-system/bottomSheets/BottomSheetFlatList.tsx deleted file mode 100644 index 07853a17..00000000 --- a/src/design-system/bottomSheets/BottomSheetFlatList.tsx +++ /dev/null @@ -1,2 +0,0 @@ -// export { BottomSheetFlatList } from '@gorhom/bottom-sheet' -export { BottomSheetFlatList } from './BootomSheetScrollables' diff --git a/src/design-system/bottomSheets/BottomSheetFlatList.web.tsx b/src/design-system/bottomSheets/BottomSheetFlatList.web.tsx deleted file mode 100644 index 2af9f526..00000000 --- a/src/design-system/bottomSheets/BottomSheetFlatList.web.tsx +++ /dev/null @@ -1 +0,0 @@ -export { FlatList as BottomSheetFlatList } from 'react-native' diff --git a/src/design-system/components/Select.tsx b/src/design-system/components/Select.tsx index 38396698..c627959a 100644 --- a/src/design-system/components/Select.tsx +++ b/src/design-system/components/Select.tsx @@ -11,9 +11,9 @@ import { Text } from './Text' import { Touchable } from './Touchables/Touchable' import { SelectKey, SelectItemProps, SelectProps } from './types' import { BottomSheet } from '../bottomSheets/BottomSheet' -import { BottomSheetFlatList } from '../bottomSheets/BottomSheetFlatList' +import { BottomSheetFlashList } from '../bottomSheets/BottomSheetFlashList' -const ITEM_HEIGHT = 56 +// const ITEM_HEIGHT = 56 const BOTTOM_SHEET_CONTENT_HEIGHT = Dimensions.get('screen').height / 1.5 const SelectItem = ({ @@ -148,12 +148,12 @@ export const Select = ({ const keyExtractor = useCallback((item: SelectItemProps) => item.value.toString(), []) - const getItemLayout = useCallback( - (_data: ArrayLike> | null | undefined, index: number) => { - return { length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index } - }, - [] - ) + // const getItemLayout = useCallback( + // (_data: ArrayLike> | null | undefined, index: number) => { + // return { length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index } + // }, + // [] + // ) const inputColor = useMemo(() => { return isError ? 'text.error.primary' : dropdownDisabled ? 'utility.gray.500' : 'text.primary' @@ -177,13 +177,14 @@ export const Select = ({ - - + @@ -192,7 +193,7 @@ export const Select = ({ } const styles = StyleSheet.create({ - bottomSheetFlatList: { + bottomSheetFlashList: { maxHeight: BOTTOM_SHEET_CONTENT_HEIGHT, }, icon: { diff --git a/yarn.lock b/yarn.lock index 81147a7d..52143a83 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2645,6 +2645,14 @@ component-type "^1.2.1" join-component "^1.1.0" +"@shopify/flash-list@1.6.4": + version "1.6.4" + resolved "https://registry.yarnpkg.com/@shopify/flash-list/-/flash-list-1.6.4.tgz#2844ae7334f314c06c62b649bc9c5de2480800b4" + integrity sha512-M2momcnY7swsvmpHIFDVbdOaFw4aQocJXA/lFP0Gpz+alQjFylqVKvszxl4atYO2SNbjxlb2L6hEP9WEcAknGQ== + dependencies: + recyclerlistview "4.2.0" + tslib "2.4.0" + "@sideway/address@^4.1.5": version "4.1.5" resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.5.tgz#4bc149a0076623ced99ca8208ba780d65a99b9d5" @@ -8916,7 +8924,7 @@ locate-path@^7.1.0: dependencies: p-locate "^6.0.0" -lodash.debounce@^4.0.8: +lodash.debounce@4.0.8, lodash.debounce@^4.0.8: version "4.0.8" resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow== @@ -10820,7 +10828,7 @@ prompts@^2.0.1, prompts@^2.2.1, prompts@^2.3.2, prompts@^2.4.2: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1: +prop-types@15.8.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -11246,6 +11254,15 @@ recast@^0.21.0: source-map "~0.6.1" tslib "^2.0.1" +recyclerlistview@4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/recyclerlistview/-/recyclerlistview-4.2.0.tgz#a140149aaa470c9787a1426452651934240d69ef" + integrity sha512-uuBCi0c+ggqHKwrzPX4Z/mJOzsBbjZEAwGGmlwpD/sD7raXixdAbdJ6BTcAmuWG50Cg4ru9p12M94Njwhr/27A== + dependencies: + lodash.debounce "4.0.8" + prop-types "15.8.1" + ts-object-utils "0.0.5" + redent@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f" @@ -12669,6 +12686,11 @@ ts-interface-checker@^0.1.9: resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699" integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA== +ts-object-utils@0.0.5: + version "0.0.5" + resolved "https://registry.yarnpkg.com/ts-object-utils/-/ts-object-utils-0.0.5.tgz#95361cdecd7e52167cfc5e634c76345e90a26077" + integrity sha512-iV0GvHqOmilbIKJsfyfJY9/dNHCs969z3so90dQWsO1eMMozvTpnB1MEaUbb3FYtZTGjv5sIy/xmslEz0Rg2TA== + tsconfck@^2.0.1: version "2.1.2" resolved "https://registry.yarnpkg.com/tsconfck/-/tsconfck-2.1.2.tgz#f667035874fa41d908c1fe4d765345fcb1df6e35" @@ -12684,6 +12706,11 @@ tsconfig-paths@^3.15.0: minimist "^1.2.6" strip-bom "^3.0.0" +tslib@2.4.0: + version "2.4.0" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3" + integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ== + tslib@^1.10.0, tslib@^1.14.1, tslib@^1.8.1: version "1.14.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" From cc0eb785cd577b8bb31ce784ed3a16bfd5d1b396 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olaf=20Chwo=C5=82ka?= Date: Tue, 25 Jun 2024 01:40:28 +0200 Subject: [PATCH 04/14] FlashList working but not fully accurate --- src/design-system/components/Select.tsx | 242 ++++++++++++++++++++++-- 1 file changed, 226 insertions(+), 16 deletions(-) diff --git a/src/design-system/components/Select.tsx b/src/design-system/components/Select.tsx index c627959a..48e3fe9d 100644 --- a/src/design-system/components/Select.tsx +++ b/src/design-system/components/Select.tsx @@ -1,7 +1,7 @@ import { useTheme } from '@baca/hooks' import { BottomSheetModal } from '@gorhom/bottom-sheet' import { useCallback, useMemo, useRef } from 'react' -import { Keyboard, StyleSheet, Dimensions } from 'react-native' +import { Keyboard, StyleSheet, Dimensions, Platform, useWindowDimensions } from 'react-native' import { TouchableOpacity } from 'react-native-gesture-handler' import { Box } from './Box' @@ -13,7 +13,6 @@ import { SelectKey, SelectItemProps, SelectProps } from './types' import { BottomSheet } from '../bottomSheets/BottomSheet' import { BottomSheetFlashList } from '../bottomSheets/BottomSheetFlashList' -// const ITEM_HEIGHT = 56 const BOTTOM_SHEET_CONTENT_HEIGHT = Dimensions.get('screen').height / 1.5 const SelectItem = ({ @@ -100,6 +99,7 @@ export const Select = ({ }: SelectProps) => { const ref = useRef(null) const { colors } = useTheme() + const { width: windowWidth } = useWindowDimensions() const showDropdown = useCallback(() => { onOpen && onOpen() @@ -148,17 +148,12 @@ export const Select = ({ const keyExtractor = useCallback((item: SelectItemProps) => item.value.toString(), []) - // const getItemLayout = useCallback( - // (_data: ArrayLike> | null | undefined, index: number) => { - // return { length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index } - // }, - // [] - // ) - const inputColor = useMemo(() => { return isError ? 'text.error.primary' : dropdownDisabled ? 'utility.gray.500' : 'text.primary' }, [dropdownDisabled, isError]) + const contentWidth = Platform.OS === 'web' ? Math.min(windowWidth * 0.4, 400) : 'auto' + return ( <> @@ -177,14 +172,20 @@ export const Select = ({ - + 400} /> @@ -193,9 +194,6 @@ export const Select = ({ } const styles = StyleSheet.create({ - bottomSheetFlashList: { - maxHeight: BOTTOM_SHEET_CONTENT_HEIGHT, - }, icon: { position: 'absolute', right: 8, @@ -214,3 +212,215 @@ const styles = StyleSheet.create({ paddingVertical: 12, }, }) + +// import { useTheme } from '@baca/hooks' +// import { BottomSheetModal } from '@gorhom/bottom-sheet' +// import { useCallback, useMemo, useRef } from 'react' +// import { Keyboard, StyleSheet, Dimensions, Platform } from 'react-native' +// import { TouchableOpacity } from 'react-native-gesture-handler' + +// import { Box } from './Box' +// import { Icon } from './Icon' +// import { Row } from './Row' +// import { Text } from './Text' +// import { Touchable } from './Touchables/Touchable' +// import { SelectKey, SelectItemProps, SelectProps } from './types' +// import { BottomSheet } from '../bottomSheets/BottomSheet' +// import { BottomSheetFlashList } from '../bottomSheets/BottomSheetFlashList' + +// const BOTTOM_SHEET_CONTENT_HEIGHT = Dimensions.get('screen').height / 1.5 +// const BOTTOM_SHEET_CONTENT_WIDTH = Dimensions.get('screen').width / 3 + +// const SelectItem = ({ +// item, +// setValue, +// maxSelectedItems, +// closeDropdown, +// value, +// disabled, +// }: { +// item: SelectItemProps +// setValue: (newValue: T[]) => void +// maxSelectedItems: number +// closeDropdown: () => void +// value: T[] +// disabled: boolean +// }) => { +// const selected = value?.includes(item.value) +// const { colors } = useTheme() + +// const onItemSelect = useCallback(() => { +// if (maxSelectedItems === 1) { +// setValue([item.value]) +// closeDropdown() +// return +// } +// const newValue = [...value].filter((el) => el) +// if (value?.includes(item.value)) { +// const index = newValue.indexOf(item.value) +// newValue.splice(index, 1) +// setValue(newValue) +// return +// } +// if (value?.length < maxSelectedItems) { +// newValue.push(item.value) +// setValue(newValue) +// } +// }, [closeDropdown, item.value, maxSelectedItems, setValue, value]) + +// const color = useMemo( +// () => (disabled && !selected ? colors.bg.brand.primary : colors.bg.active), +// [disabled, selected, colors] +// ) + +// return ( +// +// {maxSelectedItems === 1 ? ( +// +// {item.labelInDropdown ?? item.label} +// +// ) : null} +// {maxSelectedItems > 1 ? ( +// +// +// {selected ? : null} +// +// +// {item.labelInDropdown ?? item.label} +// +// +// ) : null} +// +// ) +// } + +// export const Select = ({ +// placeholder, +// disabled: dropdownDisabled = false, +// items, +// value, +// setValue, +// maxSelectedItems = 1, +// onOpen, +// isError = false, +// }: SelectProps) => { +// const ref = useRef(null) +// const { colors } = useTheme() + +// const showDropdown = useCallback(() => { +// onOpen && onOpen() +// Keyboard.dismiss() +// ref?.current?.present?.() +// }, [onOpen]) + +// const closeDropdown = useCallback(() => { +// ref.current?.snapToPosition(-1) +// }, []) + +// const disabled = useMemo( +// () => value?.length === maxSelectedItems, +// [maxSelectedItems, value?.length] +// ) + +// const label = useMemo(() => { +// let retVal = '' +// const selectedItems = items?.filter((item) => value.includes(item.value)) ?? [] +// if (selectedItems?.length === 0) { +// return placeholder ?? '' +// } +// for (const item of selectedItems) { +// retVal += `${item.label}, ` +// } +// retVal = retVal.slice(0, -2) +// return retVal +// }, [items, placeholder, value]) + +// const renderItem = useCallback( +// ({ item }: { item: SelectItemProps }) => { +// return ( +// +// ) +// }, +// [closeDropdown, disabled, maxSelectedItems, setValue, value] +// ) + +// const keyExtractor = useCallback((item: SelectItemProps) => item.value.toString(), []) + +// const inputColor = useMemo(() => { +// return isError ? 'text.error.primary' : dropdownDisabled ? 'utility.gray.500' : 'text.primary' +// }, [dropdownDisabled, isError]) + +// return ( +// <> +// +// +// {label} +// +// +// +// +// +// +// +// +// +// ) +// } + +// const styles = StyleSheet.create({ +// icon: { +// position: 'absolute', +// right: 8, +// }, +// itemWrapper: { +// paddingVertical: 8, +// }, +// textInput: { +// alignItems: 'center', +// borderRadius: 8, +// borderWidth: 1, +// flex: 1, +// fontSize: 16, +// paddingHorizontal: 10, +// paddingRight: 28, +// paddingVertical: 12, +// }, +// }) From 5c30e47591aac4136b66fd5c8ae1274567e65b03 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olaf=20Chwo=C5=82ka?= Date: Tue, 25 Jun 2024 10:09:49 +0200 Subject: [PATCH 05/14] FlashList working properly --- .../bottomSheets/BottomSheet.tsx | 2 +- .../bottomSheets/BottomSheetFlashList.tsx | 2 +- ...llables.tsx => BottomSheetScrollables.tsx} | 0 src/design-system/bottomSheets/index.tsx | 1 + src/design-system/components/Select.tsx | 235 +----------------- 5 files changed, 16 insertions(+), 224 deletions(-) rename src/design-system/bottomSheets/{BootomSheetScrollables.tsx => BottomSheetScrollables.tsx} (100%) diff --git a/src/design-system/bottomSheets/BottomSheet.tsx b/src/design-system/bottomSheets/BottomSheet.tsx index 2e593acc..bb9b6e9d 100644 --- a/src/design-system/bottomSheets/BottomSheet.tsx +++ b/src/design-system/bottomSheets/BottomSheet.tsx @@ -9,8 +9,8 @@ import { import { useCallback } from 'react' import { Dimensions } from 'react-native' -import { BottomSheetScrollView } from './BootomSheetScrollables' import { BottomSheetHeader } from './BottomSheetHeader' +import { BottomSheetScrollView } from './BottomSheetScrollables' import { BottomSheetProps } from './types' const screenHeight = Dimensions.get('screen').height diff --git a/src/design-system/bottomSheets/BottomSheetFlashList.tsx b/src/design-system/bottomSheets/BottomSheetFlashList.tsx index b176d837..749ffd8a 100644 --- a/src/design-system/bottomSheets/BottomSheetFlashList.tsx +++ b/src/design-system/bottomSheets/BottomSheetFlashList.tsx @@ -1,2 +1,2 @@ // export { BottomSheetFlashList } from '@gorhom/bottom-sheet' -export { BottomSheetFlashList } from './BootomSheetScrollables' +export { BottomSheetFlashList } from './BottomSheetScrollables' diff --git a/src/design-system/bottomSheets/BootomSheetScrollables.tsx b/src/design-system/bottomSheets/BottomSheetScrollables.tsx similarity index 100% rename from src/design-system/bottomSheets/BootomSheetScrollables.tsx rename to src/design-system/bottomSheets/BottomSheetScrollables.tsx diff --git a/src/design-system/bottomSheets/index.tsx b/src/design-system/bottomSheets/index.tsx index cc2c16aa..8b9dfee4 100644 --- a/src/design-system/bottomSheets/index.tsx +++ b/src/design-system/bottomSheets/index.tsx @@ -1 +1,2 @@ export * from './useBottomSheets' +export * from './BottomSheet' diff --git a/src/design-system/components/Select.tsx b/src/design-system/components/Select.tsx index 48e3fe9d..b523e271 100644 --- a/src/design-system/components/Select.tsx +++ b/src/design-system/components/Select.tsx @@ -1,17 +1,20 @@ -import { useTheme } from '@baca/hooks' +import { + Box, + BottomSheet, + Icon, + Row, + SelectItemProps, + SelectKey, + SelectProps, + Text, + Touchable, +} from '@baca/design-system' +import { useTheme, useCallback, useMemo, useRef } from '@baca/hooks' import { BottomSheetModal } from '@gorhom/bottom-sheet' -import { useCallback, useMemo, useRef } from 'react' import { Keyboard, StyleSheet, Dimensions, Platform, useWindowDimensions } from 'react-native' import { TouchableOpacity } from 'react-native-gesture-handler' -import { Box } from './Box' -import { Icon } from './Icon' -import { Row } from './Row' -import { Text } from './Text' -import { Touchable } from './Touchables/Touchable' -import { SelectKey, SelectItemProps, SelectProps } from './types' -import { BottomSheet } from '../bottomSheets/BottomSheet' -import { BottomSheetFlashList } from '../bottomSheets/BottomSheetFlashList' +import { BottomSheetFlashList } from '../bottomSheets/BottomSheetScrollables' const BOTTOM_SHEET_CONTENT_HEIGHT = Dimensions.get('screen').height / 1.5 @@ -212,215 +215,3 @@ const styles = StyleSheet.create({ paddingVertical: 12, }, }) - -// import { useTheme } from '@baca/hooks' -// import { BottomSheetModal } from '@gorhom/bottom-sheet' -// import { useCallback, useMemo, useRef } from 'react' -// import { Keyboard, StyleSheet, Dimensions, Platform } from 'react-native' -// import { TouchableOpacity } from 'react-native-gesture-handler' - -// import { Box } from './Box' -// import { Icon } from './Icon' -// import { Row } from './Row' -// import { Text } from './Text' -// import { Touchable } from './Touchables/Touchable' -// import { SelectKey, SelectItemProps, SelectProps } from './types' -// import { BottomSheet } from '../bottomSheets/BottomSheet' -// import { BottomSheetFlashList } from '../bottomSheets/BottomSheetFlashList' - -// const BOTTOM_SHEET_CONTENT_HEIGHT = Dimensions.get('screen').height / 1.5 -// const BOTTOM_SHEET_CONTENT_WIDTH = Dimensions.get('screen').width / 3 - -// const SelectItem = ({ -// item, -// setValue, -// maxSelectedItems, -// closeDropdown, -// value, -// disabled, -// }: { -// item: SelectItemProps -// setValue: (newValue: T[]) => void -// maxSelectedItems: number -// closeDropdown: () => void -// value: T[] -// disabled: boolean -// }) => { -// const selected = value?.includes(item.value) -// const { colors } = useTheme() - -// const onItemSelect = useCallback(() => { -// if (maxSelectedItems === 1) { -// setValue([item.value]) -// closeDropdown() -// return -// } -// const newValue = [...value].filter((el) => el) -// if (value?.includes(item.value)) { -// const index = newValue.indexOf(item.value) -// newValue.splice(index, 1) -// setValue(newValue) -// return -// } -// if (value?.length < maxSelectedItems) { -// newValue.push(item.value) -// setValue(newValue) -// } -// }, [closeDropdown, item.value, maxSelectedItems, setValue, value]) - -// const color = useMemo( -// () => (disabled && !selected ? colors.bg.brand.primary : colors.bg.active), -// [disabled, selected, colors] -// ) - -// return ( -// -// {maxSelectedItems === 1 ? ( -// -// {item.labelInDropdown ?? item.label} -// -// ) : null} -// {maxSelectedItems > 1 ? ( -// -// -// {selected ? : null} -// -// -// {item.labelInDropdown ?? item.label} -// -// -// ) : null} -// -// ) -// } - -// export const Select = ({ -// placeholder, -// disabled: dropdownDisabled = false, -// items, -// value, -// setValue, -// maxSelectedItems = 1, -// onOpen, -// isError = false, -// }: SelectProps) => { -// const ref = useRef(null) -// const { colors } = useTheme() - -// const showDropdown = useCallback(() => { -// onOpen && onOpen() -// Keyboard.dismiss() -// ref?.current?.present?.() -// }, [onOpen]) - -// const closeDropdown = useCallback(() => { -// ref.current?.snapToPosition(-1) -// }, []) - -// const disabled = useMemo( -// () => value?.length === maxSelectedItems, -// [maxSelectedItems, value?.length] -// ) - -// const label = useMemo(() => { -// let retVal = '' -// const selectedItems = items?.filter((item) => value.includes(item.value)) ?? [] -// if (selectedItems?.length === 0) { -// return placeholder ?? '' -// } -// for (const item of selectedItems) { -// retVal += `${item.label}, ` -// } -// retVal = retVal.slice(0, -2) -// return retVal -// }, [items, placeholder, value]) - -// const renderItem = useCallback( -// ({ item }: { item: SelectItemProps }) => { -// return ( -// -// ) -// }, -// [closeDropdown, disabled, maxSelectedItems, setValue, value] -// ) - -// const keyExtractor = useCallback((item: SelectItemProps) => item.value.toString(), []) - -// const inputColor = useMemo(() => { -// return isError ? 'text.error.primary' : dropdownDisabled ? 'utility.gray.500' : 'text.primary' -// }, [dropdownDisabled, isError]) - -// return ( -// <> -// -// -// {label} -// -// -// -// -// -// -// -// -// -// ) -// } - -// const styles = StyleSheet.create({ -// icon: { -// position: 'absolute', -// right: 8, -// }, -// itemWrapper: { -// paddingVertical: 8, -// }, -// textInput: { -// alignItems: 'center', -// borderRadius: 8, -// borderWidth: 1, -// flex: 1, -// fontSize: 16, -// paddingHorizontal: 10, -// paddingRight: 28, -// paddingVertical: 12, -// }, -// }) From 9c3311835437045e963364062735db96fff94212 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olaf=20Chwo=C5=82ka?= Date: Tue, 25 Jun 2024 12:15:38 +0200 Subject: [PATCH 06/14] all FlashLists added --- docs/docs/data-management/API-EXAMPLE.md | 5 +++-- src/design-system/modals/FullScreenModal.tsx | 3 +-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/docs/data-management/API-EXAMPLE.md b/docs/docs/data-management/API-EXAMPLE.md index b267f326..d34ea789 100644 --- a/docs/docs/data-management/API-EXAMPLE.md +++ b/docs/docs/data-management/API-EXAMPLE.md @@ -27,7 +27,8 @@ import { ArticleEntity } from '@baca/api/types' import { Loader, Center, Text, Box, Spacer } from '@baca/design-system' import { useScreenOptions, useTranslation } from '@baca/hooks' import { useCallback } from 'react' -import { ListRenderItem, FlatList } from 'react-native' +import { FlashList } from '@shopify/flash-list' +import { ListRenderItem } from 'react-native' export const DataFromBeScreen_EXAMPLE = () => { const { t } = useTranslation() @@ -56,7 +57,7 @@ export const DataFromBeScreen_EXAMPLE = () => { THIS IS EXAMPLE SCREEN which contains data from backend - diff --git a/src/design-system/modals/FullScreenModal.tsx b/src/design-system/modals/FullScreenModal.tsx index e92106cb..ae94125d 100644 --- a/src/design-system/modals/FullScreenModal.tsx +++ b/src/design-system/modals/FullScreenModal.tsx @@ -1,9 +1,8 @@ +import { Box } from '@baca/design-system' import { useBoolean, useImperativeHandle } from '@baca/hooks' import { RefObject } from 'react' import { Modal, ModalProps } from 'react-native' -import { Box } from '../components' - export type ModalMethods = { present: () => void close: () => void From 6d950ec2f7d7be7573f4f7442bc034bb32610cbc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olaf=20Chwo=C5=82ka?= Date: Tue, 25 Jun 2024 13:34:16 +0200 Subject: [PATCH 07/14] testing on backend example screen --- src/screens/DataFromBeScreen_EXAMPLE.tsx | 39 ++++++++++++------------ 1 file changed, 19 insertions(+), 20 deletions(-) diff --git a/src/screens/DataFromBeScreen_EXAMPLE.tsx b/src/screens/DataFromBeScreen_EXAMPLE.tsx index f11f903d..a739fa6d 100644 --- a/src/screens/DataFromBeScreen_EXAMPLE.tsx +++ b/src/screens/DataFromBeScreen_EXAMPLE.tsx @@ -2,8 +2,8 @@ import { useArticlesControllerFindAll } from '@baca/api/query/articles/articles' import { ArticleEntity } from '@baca/api/types' import { Loader, Center, Text, Box, Spacer } from '@baca/design-system' import { useScreenOptions, useTranslation } from '@baca/hooks' +import { FlashList } from '@shopify/flash-list' import { useCallback } from 'react' -import { ListRenderItem, FlatList } from 'react-native' export const DataFromBeScreen_EXAMPLE = () => { const { t } = useTranslation() @@ -15,7 +15,7 @@ export const DataFromBeScreen_EXAMPLE = () => { const { data: articles, isInitialLoading: isInitialLoadingArticles } = useArticlesControllerFindAll({ page: 1, pageSize: 10 }) - const renderItem: ListRenderItem = useCallback(({ item: { id, title } }) => { + const renderItem = useCallback(({ item: { id, title } }: { item: ArticleEntity }) => { return ( {'id: ' + id} @@ -26,24 +26,23 @@ export const DataFromBeScreen_EXAMPLE = () => { return ( -
- THIS IS EXAMPLE SCREEN - which contains data from backend - - - -
- ) : ( - No data found - ) - } - data={articles} - renderItem={renderItem} - /> - + THIS IS EXAMPLE SCREEN + which contains data from backend + + + + + ) : ( + No data found + ) + } + data={articles} + renderItem={renderItem} + estimatedItemSize={81} + /> ) } From 889468df19a5bc2f8d561501a8f014efe6d67f73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olaf=20Chwo=C5=82ka?= Date: Tue, 25 Jun 2024 14:25:47 +0200 Subject: [PATCH 08/14] backend screen changed to FlashList done --- src/screens/DataFromBeScreen_EXAMPLE.tsx | 32 +++++++++++++++++------- 1 file changed, 23 insertions(+), 9 deletions(-) diff --git a/src/screens/DataFromBeScreen_EXAMPLE.tsx b/src/screens/DataFromBeScreen_EXAMPLE.tsx index a739fa6d..f8a96c13 100644 --- a/src/screens/DataFromBeScreen_EXAMPLE.tsx +++ b/src/screens/DataFromBeScreen_EXAMPLE.tsx @@ -1,12 +1,14 @@ import { useArticlesControllerFindAll } from '@baca/api/query/articles/articles' import { ArticleEntity } from '@baca/api/types' import { Loader, Center, Text, Box, Spacer } from '@baca/design-system' -import { useScreenOptions, useTranslation } from '@baca/hooks' +import { useScreenOptions, useTranslation, useWindowDimensions } from '@baca/hooks' import { FlashList } from '@shopify/flash-list' import { useCallback } from 'react' +import { Platform } from 'react-native' export const DataFromBeScreen_EXAMPLE = () => { const { t } = useTranslation() + const { width } = useWindowDimensions() useScreenOptions({ title: t('navigation.screen_titles.data_from_be_screen_example'), @@ -15,14 +17,26 @@ export const DataFromBeScreen_EXAMPLE = () => { const { data: articles, isInitialLoading: isInitialLoadingArticles } = useArticlesControllerFindAll({ page: 1, pageSize: 10 }) - const renderItem = useCallback(({ item: { id, title } }: { item: ArticleEntity }) => { - return ( - - {'id: ' + id} - {'title: ' + title} - - ) - }, []) + const renderItem = useCallback( + ({ item: { id, title } }: { item: ArticleEntity }) => { + const boxWidth = Platform.OS === 'web' ? Math.min(width * 0.8, 400) : width + + return ( + + {'id: ' + id} + {'title: ' + title} + + ) + }, + [width] + ) return ( From 5ce0c42284bdb97d1e7addea1c262c3c3a234a2d Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Wed, 26 Jun 2024 13:53:06 +0200 Subject: [PATCH 09/14] chore: Update Modal scrollContent padding based on window width --- src/components/Modal.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index e87ef668..d3495405 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -8,6 +8,7 @@ import { View, ViewStyle, StyleSheet, + Dimensions, } from 'react-native' import { KeyboardAwareScrollView } from './KeyboardAwareScrollView' @@ -68,6 +69,6 @@ const styles = StyleSheet.create({ }, scrollContent: { justifyContent: 'center', - paddingHorizontal: 32, + paddingHorizontal: Dimensions.get('window').width < 450 ? 16 : 32, }, }) From b27e33d5c7650335e0bfeeaaf634070b543fe6e0 Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Wed, 26 Jun 2024 13:55:11 +0200 Subject: [PATCH 10/14] feat: create radio button --- src/design-system/components/RadioButton.tsx | 60 ++++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 src/design-system/components/RadioButton.tsx diff --git a/src/design-system/components/RadioButton.tsx b/src/design-system/components/RadioButton.tsx new file mode 100644 index 00000000..92c7eac6 --- /dev/null +++ b/src/design-system/components/RadioButton.tsx @@ -0,0 +1,60 @@ +import { forwardRef, useCallback, useMemo } from 'react' + +import { Box } from './Box' +import { Text } from './Text' +import { Touchable, TouchableRef } from './Touchables' +import { RadioButtonProps } from './types' + +const radioSizes = { + sm: { + boxSize: 4, + }, + md: { + boxSize: 5, + }, +} as const + +export const RadioButton = forwardRef( + ({ isSelected, isDisabled, isError, onChange, label, size = 'md', pb }, ref) => { + const checkboxSize = useMemo(() => radioSizes[size], [size]) + + const getBorderColor = useCallback( + (isSelected?: boolean): ColorNames | undefined => { + if (isDisabled) { + return 'border.disabled' + } + if (isError) { + return 'border.error' + } + + if (isSelected) { + return 'bg.brand.solid' + } + + return 'border.primary' + }, + [isDisabled, isError] + ) + + return ( + onChange(!isSelected)} + alignItems="center" + flexDirection="row" + pb={pb} + > + + {label} + + ) + } +) From 938e4d6a4ddd1e07cef2fa3d68051100dae707f1 Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Wed, 26 Jun 2024 13:55:35 +0200 Subject: [PATCH 11/14] chore: improve bottom sheet scrollables --- src/design-system/bottomSheets/BottomSheet.web.tsx | 7 ++++--- src/design-system/bottomSheets/BottomSheetFlashList.tsx | 2 -- .../bottomSheets/BottomSheetFlashList.web.tsx | 1 - src/design-system/bottomSheets/BottomSheetScrollables.tsx | 7 +++---- 4 files changed, 7 insertions(+), 10 deletions(-) delete mode 100644 src/design-system/bottomSheets/BottomSheetFlashList.tsx delete mode 100644 src/design-system/bottomSheets/BottomSheetFlashList.web.tsx diff --git a/src/design-system/bottomSheets/BottomSheet.web.tsx b/src/design-system/bottomSheets/BottomSheet.web.tsx index c601336b..a355701b 100644 --- a/src/design-system/bottomSheets/BottomSheet.web.tsx +++ b/src/design-system/bottomSheets/BottomSheet.web.tsx @@ -1,5 +1,5 @@ import { Modal } from '@baca/components/Modal' -import { useBoolean, useWeb } from '@baca/hooks' +import { useBoolean } from '@baca/hooks' import { useCallback, useImperativeHandle } from 'react' import { ScrollView } from 'react-native' @@ -18,7 +18,6 @@ export const BottomSheet = ({ bottomSheetRef, }: BottomSheetProps) => { const [isOpen, setIsOpen] = useBoolean(false) - const { webContentWidth } = useWeb() useImperativeHandle(bottomSheetRef, () => ({ snapToPosition: (index: string | number) => { @@ -46,11 +45,13 @@ export const BottomSheet = ({ Date: Wed, 26 Jun 2024 13:56:30 +0200 Subject: [PATCH 12/14] chore: improve radio, select and checkbox components --- src/components/molecules/Field/Radio.tsx | 64 ++------- src/components/molecules/Field/Select.tsx | 2 +- src/components/molecules/Field/types.ts | 28 ++-- src/design-system/components/Checkbox.tsx | 48 +++---- src/design-system/components/Select.tsx | 152 +++++++++++----------- src/design-system/components/index.ts | 1 + src/design-system/components/types.ts | 12 +- 7 files changed, 135 insertions(+), 172 deletions(-) diff --git a/src/components/molecules/Field/Radio.tsx b/src/components/molecules/Field/Radio.tsx index d1bfb7f1..0fa541de 100644 --- a/src/components/molecules/Field/Radio.tsx +++ b/src/components/molecules/Field/Radio.tsx @@ -2,23 +2,13 @@ import { FormErrorMessage, FormLabel, Box, - Touchable, - Text, TouchableRef, + RadioButton, } from '@baca/design-system/components' -import { forwardRef, useCallback, useMemo } from 'react' +import { forwardRef, useMemo } from 'react' import { FieldRadioProps } from './types' -const radioSizes = { - sm: { - boxSize: 4, - }, - md: { - boxSize: 5, - }, -} as const - export const Radio = forwardRef( ( { @@ -27,7 +17,7 @@ export const Radio = forwardRef( radioOptions, errorMessage, isError, - size = 'sm', + size = 'md', onChange, label, labelStyle, @@ -35,52 +25,24 @@ export const Radio = forwardRef( }, ref ) => { - const checkboxSize = useMemo(() => radioSizes[size], [size]) - - const getBorderColor = useCallback( - (isSelected: boolean): ColorNames | undefined => { - if (isDisabled) { - return 'border.disabled' - } - if (isError) { - return 'border.error' - } - - if (isSelected) { - return 'bg.brand.solid' - } - - return 'border.primary' - }, - [isDisabled, isError] - ) - const renderRadioButtons = useMemo( () => radioOptions?.map((item: string, index: number) => { return ( - onChange(item)} - alignItems="center" - flexDirection="row" - height={8} - > - - {item} - + isDisabled={isDisabled} + isError={isError} + isSelected={item === value} + onChange={() => onChange(item)} + pb={2} + label={item} + size={size} + /> ) }), - [radioOptions, ref, checkboxSize.boxSize, getBorderColor, value, onChange] + [radioOptions, ref, isDisabled, isError, value, size, onChange] ) return ( diff --git a/src/components/molecules/Field/Select.tsx b/src/components/molecules/Field/Select.tsx index 1c4ca78a..d8aee5df 100644 --- a/src/components/molecules/Field/Select.tsx +++ b/src/components/molecules/Field/Select.tsx @@ -58,7 +58,7 @@ export const Select = ({ - + diff --git a/src/components/molecules/Field/types.ts b/src/components/molecules/Field/types.ts index 16110b12..59f3674e 100644 --- a/src/components/molecules/Field/types.ts +++ b/src/components/molecules/Field/types.ts @@ -1,10 +1,4 @@ -import { - CheckboxProps, - FormLabelProps, - InputProps, - RadioProps, - SelectProps, -} from '@baca/design-system' +import { CheckboxProps, FormLabelProps, InputProps, SelectProps } from '@baca/design-system' export type FieldInputProps = InputProps & FormLabelProps & { @@ -14,14 +8,18 @@ export type FieldInputProps = InputProps & onFocus?: () => void } -export type FieldRadioProps = RadioProps & - FormLabelProps & { - radioOptions?: string[] - errorMessage?: string - isInvalid?: boolean - isDisabled?: boolean - name: string - } +export type FieldRadioProps = FormLabelProps & { + radioOptions?: string[] + errorMessage?: string + isInvalid?: boolean + isDisabled?: boolean + name: string + onChange: (val: string) => void + label?: string + isError?: boolean + value?: string | number + size?: 'sm' | 'md' +} export type FieldSelectProps = SelectProps & FormLabelProps & { diff --git a/src/design-system/components/Checkbox.tsx b/src/design-system/components/Checkbox.tsx index 5bf6b72e..3c89c6dc 100644 --- a/src/design-system/components/Checkbox.tsx +++ b/src/design-system/components/Checkbox.tsx @@ -1,6 +1,7 @@ import { forwardRef, useCallback, useMemo } from 'react' import { TouchableOpacity, StyleSheet } from 'react-native' +import { Box } from './Box' import { Center } from './Center' import { Icon } from './Icon' import { Text } from './Text' @@ -32,8 +33,9 @@ export const Checkbox = forwardRef( isChecked, isError, onChange, - size = 'sm', + size = 'md', value, + pb, ...props }, ref @@ -80,28 +82,30 @@ export const Checkbox = forwardRef( }, [isChecked, isError, disabled]) return ( - -
+ - {isChecked ? ( - - ) : null} -
- {checkboxText} - +
+ {isChecked ? ( + + ) : null} +
+ {checkboxText} + + ) } ) diff --git a/src/design-system/components/Select.tsx b/src/design-system/components/Select.tsx index b523e271..c29ba0ad 100644 --- a/src/design-system/components/Select.tsx +++ b/src/design-system/components/Select.tsx @@ -1,21 +1,18 @@ -import { - Box, - BottomSheet, - Icon, - Row, - SelectItemProps, - SelectKey, - SelectProps, - Text, - Touchable, -} from '@baca/design-system' -import { useTheme, useCallback, useMemo, useRef } from '@baca/hooks' +import { useSafeAreaInsets, useTheme } from '@baca/hooks' import { BottomSheetModal } from '@gorhom/bottom-sheet' -import { Keyboard, StyleSheet, Dimensions, Platform, useWindowDimensions } from 'react-native' -import { TouchableOpacity } from 'react-native-gesture-handler' - -import { BottomSheetFlashList } from '../bottomSheets/BottomSheetScrollables' - +import { useCallback, useMemo, useRef } from 'react' +import { Keyboard, StyleSheet, Dimensions, Platform } from 'react-native' + +import { Checkbox } from './Checkbox' +import { Icon } from './Icon' +import { RadioButton } from './RadioButton' +import { Text } from './Text' +import { Touchable } from './Touchables/Touchable' +import { SelectKey, SelectItemProps, SelectProps } from './types' +import { BottomSheet } from '../bottomSheets/BottomSheet' +import { BottomSheetFlatList } from '../bottomSheets/BottomSheetScrollables' + +const ITEM_HEIGHT = 56 const BOTTOM_SHEET_CONTENT_HEIGHT = Dimensions.get('screen').height / 1.5 const SelectItem = ({ @@ -34,7 +31,6 @@ const SelectItem = ({ disabled: boolean }) => { const selected = value?.includes(item.value) - const { colors } = useTheme() const onItemSelect = useCallback(() => { if (maxSelectedItems === 1) { @@ -55,38 +51,36 @@ const SelectItem = ({ } }, [closeDropdown, item.value, maxSelectedItems, setValue, value]) - const color = useMemo( - () => (disabled && !selected ? colors.bg.brand.primary : colors.bg.active), - [disabled, selected, colors] - ) + if (maxSelectedItems === 1) { + return ( + + ) + } return ( - - {maxSelectedItems === 1 ? ( - - {item.labelInDropdown ?? item.label} - - ) : null} - {maxSelectedItems > 1 ? ( - - - {selected ? : null} - - - {item.labelInDropdown ?? item.label} - - - ) : null} - + ) } @@ -96,13 +90,14 @@ export const Select = ({ items, value, setValue, + label, maxSelectedItems = 1, onOpen, isError = false, }: SelectProps) => { const ref = useRef(null) const { colors } = useTheme() - const { width: windowWidth } = useWindowDimensions() + const { bottom } = useSafeAreaInsets() const showDropdown = useCallback(() => { onOpen && onOpen() @@ -114,12 +109,7 @@ export const Select = ({ ref.current?.snapToPosition(-1) }, []) - const disabled = useMemo( - () => value?.length === maxSelectedItems, - [maxSelectedItems, value?.length] - ) - - const label = useMemo(() => { + const valueToShow = useMemo(() => { let retVal = '' const selectedItems = items?.filter((item) => value.includes(item.value)) ?? [] if (selectedItems?.length === 0) { @@ -142,20 +132,27 @@ export const Select = ({ maxSelectedItems={maxSelectedItems} closeDropdown={closeDropdown} value={value} - disabled={disabled} + disabled={dropdownDisabled} /> ) }, - [closeDropdown, disabled, maxSelectedItems, setValue, value] + [closeDropdown, dropdownDisabled, maxSelectedItems, setValue, value] ) const keyExtractor = useCallback((item: SelectItemProps) => item.value.toString(), []) + const getItemLayout = useCallback( + (_data: ArrayLike> | null | undefined, index: number) => { + return { length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index } + }, + [] + ) + const inputColor = useMemo(() => { return isError ? 'text.error.primary' : dropdownDisabled ? 'utility.gray.500' : 'text.primary' }, [dropdownDisabled, isError]) - const contentWidth = Platform.OS === 'web' ? Math.min(windowWidth * 0.4, 400) : 'auto' + const flatListPaddingBottom = Platform.OS === 'web' ? 0 : 24 + bottom return ( <> @@ -170,40 +167,39 @@ export const Select = ({ ]} color={inputColor} > - {label} + {valueToShow} - - 400} - /> - + ) } const styles = StyleSheet.create({ + bottomSheetContentFlatList: { + paddingHorizontal: 16, + paddingTop: 16, + }, + bottomSheetFlatList: { + maxHeight: BOTTOM_SHEET_CONTENT_HEIGHT, + }, icon: { position: 'absolute', right: 8, }, - itemWrapper: { - paddingVertical: 8, - }, textInput: { alignItems: 'center', borderRadius: 8, diff --git a/src/design-system/components/index.ts b/src/design-system/components/index.ts index 0e63b20c..b8a6f206 100644 --- a/src/design-system/components/index.ts +++ b/src/design-system/components/index.ts @@ -17,6 +17,7 @@ export * from './FormErrorMessage' export * from './FormLabel' export * from './Icon' export * from './Input' +export * from './RadioButton' export * from './Loader' export * from './Select' export * from './types' diff --git a/src/design-system/components/types.ts b/src/design-system/components/types.ts index 0893a537..9e979445 100644 --- a/src/design-system/components/types.ts +++ b/src/design-system/components/types.ts @@ -208,13 +208,14 @@ export type SelectProps = { onOpen?: () => void } -export type RadioProps = { - onChange: (val: string) => void - label?: string - radioOptions?: string[] +export type RadioButtonProps = { + onChange: (val: boolean) => void + isSelected?: boolean + isDisabled?: boolean isError?: boolean - value?: string | number + label?: string size?: 'sm' | 'md' + pb?: SizingValue } export type CheckboxProps = ViewProps & { @@ -226,4 +227,5 @@ export type CheckboxProps = ViewProps & { isError?: boolean isChecked?: boolean checkboxes?: string[] + pb?: SizingValue } From 6a4d2c8cac6bed6871e89a75c9adfe34bfa9e7d4 Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Wed, 26 Jun 2024 13:57:12 +0200 Subject: [PATCH 13/14] chore: remove event listener subsription --- src/hooks/navigation/useWeb.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/hooks/navigation/useWeb.ts b/src/hooks/navigation/useWeb.ts index 2581fdfb..e44ae5a5 100644 --- a/src/hooks/navigation/useWeb.ts +++ b/src/hooks/navigation/useWeb.ts @@ -29,12 +29,16 @@ export const useWeb: () => ReturnType = () => { } } setDimensions(Dimensions.get('window').width, Dimensions.get('screen').width) - Dimensions.addEventListener( + const subscription = Dimensions.addEventListener( 'change', ({ window: { width: windowWidth }, screen: { width: screenWidth } }) => { setDimensions(windowWidth, screenWidth) } ) + + return () => { + subscription.remove() + } }, []) return { From 881da2608583669cc18468a3f6fe35ae8a46e4c1 Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Fri, 28 Jun 2024 12:14:52 +0200 Subject: [PATCH 14/14] fix: code review improvements --- .../bottomSheets/BottomSheetScrollables.tsx | 10 +++++++--- src/design-system/components/Select.tsx | 9 +-------- src/design-system/modals/FullScreenModal.tsx | 2 +- 3 files changed, 9 insertions(+), 12 deletions(-) diff --git a/src/design-system/bottomSheets/BottomSheetScrollables.tsx b/src/design-system/bottomSheets/BottomSheetScrollables.tsx index 56019933..01c1185f 100644 --- a/src/design-system/bottomSheets/BottomSheetScrollables.tsx +++ b/src/design-system/bottomSheets/BottomSheetScrollables.tsx @@ -2,10 +2,14 @@ // Could be connected to this: https://github.com/gorhom/react-native-bottom-sheet/issues/1524 // Could be connected to this: https://github.com/gorhom/react-native-bottom-sheet/issues/1760 // After upgrading bottom sheet library try changing the imports, maybe it will work as expected -// import { BottomSheetScrollView as ScrollView, BottomSheetFlashList as FlashList, BottomSheetSectionList as SectionList } from "@gorhom/bottom-sheet"; -import { FlatList as RNFlatList, Platform, SectionList } from 'react-native' +import { + // BottomSheetScrollView as ScrollView, + // BottomSheetFlashList as FlashList, + BottomSheetSectionList as SectionList, +} from '@gorhom/bottom-sheet' +// import { SectionList } from 'react-native' import { ScrollView, FlatList } from 'react-native-gesture-handler' export const BottomSheetScrollView = ScrollView -export const BottomSheetFlatList = Platform.OS === 'web' ? RNFlatList : FlatList +export const BottomSheetFlatList = FlatList export const BottomSheetSectionList = SectionList diff --git a/src/design-system/components/Select.tsx b/src/design-system/components/Select.tsx index c29ba0ad..ef4b8bb4 100644 --- a/src/design-system/components/Select.tsx +++ b/src/design-system/components/Select.tsx @@ -73,13 +73,6 @@ const SelectItem = ({ isChecked={selected} size="md" pb={4} - // isDisabled={disabled} - // isError={false} - // isSelected={selected} - // label={item.labelInDropdown ?? item.label} - // onChange={onItemSelect} - // size="md" - // pb={4} /> ) } @@ -178,7 +171,7 @@ export const Select = ({ styles.bottomSheetContentFlatList, { paddingBottom: flatListPaddingBottom }, ]} - data={items} + data={[...items, ...items]} keyExtractor={keyExtractor} renderItem={renderItem} getItemLayout={getItemLayout} diff --git a/src/design-system/modals/FullScreenModal.tsx b/src/design-system/modals/FullScreenModal.tsx index ae94125d..baf1bd8b 100644 --- a/src/design-system/modals/FullScreenModal.tsx +++ b/src/design-system/modals/FullScreenModal.tsx @@ -1,4 +1,4 @@ -import { Box } from '@baca/design-system' +import { Box } from '@baca/design-system/components/Box' import { useBoolean, useImperativeHandle } from '@baca/hooks' import { RefObject } from 'react' import { Modal, ModalProps } from 'react-native'