diff --git a/package-lock.json b/package-lock.json index ab7b2481..13b3275b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,15 +6,15 @@ "": { "name": "root", "dependencies": { - "@jmsstudiosinc/cart": "^0.0.32", - "@jmsstudiosinc/commons": "^0.0.32", - "@jmsstudiosinc/driver": "^0.0.32", + "@jmsstudiosinc/cart": "^0.0.35", + "@jmsstudiosinc/commons": "^0.0.35", + "@jmsstudiosinc/driver": "^0.0.35", "@jmsstudiosinc/material-tokens": "^0.0.16", - "@jmsstudiosinc/order": "^0.0.32", + "@jmsstudiosinc/order": "^0.0.35", "@jmsstudiosinc/pud": "^0.0.28", "@jmsstudiosinc/react-native-paper": "^5.0.0-rc.19", - "@jmsstudiosinc/user": "^0.0.31", - "@jmsstudiosinc/vendor": "^0.0.32", + "@jmsstudiosinc/user": "^0.0.34", + "@jmsstudiosinc/vendor": "^0.0.35", "@react-native-async-storage/async-storage": "^1.17.3", "@react-native-community/datetimepicker": "^6.1.2", "@react-native-community/slider": "^4.2.1", @@ -2960,33 +2960,33 @@ } }, "node_modules/@jmsstudiosinc/cart": { - "version": "0.0.32", - "resolved": "https://npm.pkg.github.com/download/@jmsstudiosinc/cart/0.0.32/5ffa12ded1525c5cd259cc13e61de4f09942698a", - "integrity": "sha512-iQ8gObLMEQNl201R6PoI78AP846zTr8bcwtY985PN9ARFSVGvuDmdKA6bwOrnkM0315c8sLFtEtnbJqx8r9ryQ==", + "version": "0.0.35", + "resolved": "https://npm.pkg.github.com/download/@jmsstudiosinc/cart/0.0.35/a236fb4cdc35f64e38aa5d61fa9afc047f30ad83", + "integrity": "sha512-2jr112lI4uA0EnaBEMFnr+2Z0iXlsaj63B3ag1OoKFL8jvAj+IuymmvkIPkBZFYzYSQWr71JKoSvJxvDVSDQyg==", "license": "ISC", "dependencies": { - "@jmsstudiosinc/commons": "^0.0.32", - "@jmsstudiosinc/vendor": "^0.0.32" + "@jmsstudiosinc/commons": "^0.0.35", + "@jmsstudiosinc/vendor": "^0.0.35" } }, "node_modules/@jmsstudiosinc/commons": { - "version": "0.0.32", - "resolved": "https://npm.pkg.github.com/download/@jmsstudiosinc/commons/0.0.32/59e36627fc15e21671f63a2501179f4dfc3680e2", - "integrity": "sha512-lIqudUsSUPc97oC3/Qa+RQ80wSTTZF33S8lvkEBaoGa56aIJ57TNFaKqxAFb8hViyUVqd7ryhGURZjrYoD3Vng==", + "version": "0.0.35", + "resolved": "https://npm.pkg.github.com/download/@jmsstudiosinc/commons/0.0.35/84a93680f670fc4f1d881df81ed9198d2f72b52b", + "integrity": "sha512-Jcp7/pWb6pj0C6y0i7WNJgvXYMw+aAnS7Irq+0B1gYqzh9qwiVf+qZhV21gTQG8rlCriGw6m6RTh2Kd7M1aSVQ==", "license": "ISC", "dependencies": { - "@jmsstudiosinc/vendor": "^0.0.32", + "@jmsstudiosinc/vendor": "^0.0.35", "turf-distance": "^3.0.12" } }, "node_modules/@jmsstudiosinc/driver": { - "version": "0.0.32", - "resolved": "https://npm.pkg.github.com/download/@jmsstudiosinc/driver/0.0.32/36f87974365ae39431c421baf7b28dd90e5a03c9", - "integrity": "sha512-LoYCdoMXOqziYZ8lPqEMzfHQnT8epKhhfhoi49/WyY3u2S9236QfMkPE3aVovzetv5LYqs3KB2Lvwp/Geoe7uQ==", + "version": "0.0.35", + "resolved": "https://npm.pkg.github.com/download/@jmsstudiosinc/driver/0.0.35/9fb845b2ff2ed0c330d331622c823cb843a0a2fc", + "integrity": "sha512-JrCFJodBntW7FLxYhfToQlvCB8JXcepwp6k6IfkqAg5gFFacohlNiyGuX2iboKW2b1mtaMtHzmIBp7Zv8zegDw==", "license": "ISC", "dependencies": { - "@jmsstudiosinc/commons": "^0.0.32", - "@jmsstudiosinc/vendor": "^0.0.32" + "@jmsstudiosinc/commons": "^0.0.35", + "@jmsstudiosinc/vendor": "^0.0.35" } }, "node_modules/@jmsstudiosinc/material-tokens": { @@ -2996,14 +2996,14 @@ "license": "ISC" }, "node_modules/@jmsstudiosinc/order": { - "version": "0.0.32", - "resolved": "https://npm.pkg.github.com/download/@jmsstudiosinc/order/0.0.32/f88341bf07307196156a1143de20e8855533138d", - "integrity": "sha512-4fWu9ucG/a8YIAduBy62iemrrH++yZrwP4KJASJrl9Obno/oqxiPoHAxz4afKtvwAgYYBWJLRzYU4JrEomtI+g==", + "version": "0.0.35", + "resolved": "https://npm.pkg.github.com/download/@jmsstudiosinc/order/0.0.35/5535f57fc2ebaed626e5ea41e6f65f2163509835", + "integrity": "sha512-LjreQ6RHzi8TCCpFs9gWw9Urm1113s4znNiy2VxlQbr+oF1xlCsanPB3JfRGxevNoocPfxNxXJpYqDvfaPdgqA==", "license": "ISC", "dependencies": { - "@jmsstudiosinc/commons": "^0.0.32", - "@jmsstudiosinc/user": "^0.0.31", - "@jmsstudiosinc/vendor": "^0.0.32" + "@jmsstudiosinc/commons": "^0.0.35", + "@jmsstudiosinc/user": "^0.0.34", + "@jmsstudiosinc/vendor": "^0.0.35" } }, "node_modules/@jmsstudiosinc/pud": { @@ -3085,22 +3085,22 @@ "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" }, "node_modules/@jmsstudiosinc/user": { - "version": "0.0.31", - "resolved": "https://npm.pkg.github.com/download/@jmsstudiosinc/user/0.0.31/d95a4883fbeb58472ed387e10bc25e9fb8bac6db", - "integrity": "sha512-Q9FXSa5MlqlB8YERVOyz7wgjcp38qXodx7ZHTrSzYclthFjlGsCu/yF36nni8lsCX7Vh6CoPh0v6ZZUU5jIOSA==", + "version": "0.0.34", + "resolved": "https://npm.pkg.github.com/download/@jmsstudiosinc/user/0.0.34/fde259d8a939c1950f726534bcdd2feee727b3d7", + "integrity": "sha512-MyC4KFBVCRnAZGY38zwHj1v7V4UU9FpeMQJro7C1TutuEUjfB0oBOM5esbmNvDAWP/j66oLebC35eCRW5eSIvg==", "license": "ISC", "dependencies": { - "@jmsstudiosinc/commons": "^0.0.32", - "@jmsstudiosinc/vendor": "^0.0.32" + "@jmsstudiosinc/commons": "^0.0.35", + "@jmsstudiosinc/vendor": "^0.0.35" } }, "node_modules/@jmsstudiosinc/vendor": { - "version": "0.0.32", - "resolved": "https://npm.pkg.github.com/download/@jmsstudiosinc/vendor/0.0.32/9a79ee133739f960391b8d1e7a4bfcc0b238ad3a", - "integrity": "sha512-wVYk3VozGUNE+8IitWPN4/c2rH9gxTBuXgFz1P+eGUXQiT3NIH6RgzoG+JQE5ZT7BkV1KEYQbVuLV1Za0m0IxQ==", + "version": "0.0.35", + "resolved": "https://npm.pkg.github.com/download/@jmsstudiosinc/vendor/0.0.35/c4685814e8bb6c5070515567ab9dd6c673b5c885", + "integrity": "sha512-zv5HyPBZyj0O4PgVK3MKboFFqWArFv58Vno4FzgtSwV1Jzea8vNkOmnqDfEOwxLD+VNdWnta2hI2LTVYWREiyg==", "license": "ISC", "dependencies": { - "@jmsstudiosinc/commons": "^0.0.32" + "@jmsstudiosinc/commons": "^0.0.35" } }, "node_modules/@jridgewell/gen-mapping": { @@ -48976,30 +48976,30 @@ } }, "@jmsstudiosinc/cart": { - "version": "0.0.32", - "resolved": "https://npm.pkg.github.com/download/@jmsstudiosinc/cart/0.0.32/5ffa12ded1525c5cd259cc13e61de4f09942698a", - "integrity": "sha512-iQ8gObLMEQNl201R6PoI78AP846zTr8bcwtY985PN9ARFSVGvuDmdKA6bwOrnkM0315c8sLFtEtnbJqx8r9ryQ==", + "version": "0.0.35", + "resolved": "https://npm.pkg.github.com/download/@jmsstudiosinc/cart/0.0.35/a236fb4cdc35f64e38aa5d61fa9afc047f30ad83", + "integrity": "sha512-2jr112lI4uA0EnaBEMFnr+2Z0iXlsaj63B3ag1OoKFL8jvAj+IuymmvkIPkBZFYzYSQWr71JKoSvJxvDVSDQyg==", "requires": { - "@jmsstudiosinc/commons": "^0.0.32", - "@jmsstudiosinc/vendor": "^0.0.32" + "@jmsstudiosinc/commons": "^0.0.35", + "@jmsstudiosinc/vendor": "^0.0.35" } }, "@jmsstudiosinc/commons": { - "version": "0.0.32", - "resolved": "https://npm.pkg.github.com/download/@jmsstudiosinc/commons/0.0.32/59e36627fc15e21671f63a2501179f4dfc3680e2", - "integrity": "sha512-lIqudUsSUPc97oC3/Qa+RQ80wSTTZF33S8lvkEBaoGa56aIJ57TNFaKqxAFb8hViyUVqd7ryhGURZjrYoD3Vng==", + "version": "0.0.35", + "resolved": "https://npm.pkg.github.com/download/@jmsstudiosinc/commons/0.0.35/84a93680f670fc4f1d881df81ed9198d2f72b52b", + "integrity": "sha512-Jcp7/pWb6pj0C6y0i7WNJgvXYMw+aAnS7Irq+0B1gYqzh9qwiVf+qZhV21gTQG8rlCriGw6m6RTh2Kd7M1aSVQ==", "requires": { - "@jmsstudiosinc/vendor": "^0.0.32", + "@jmsstudiosinc/vendor": "^0.0.35", "turf-distance": "^3.0.12" } }, "@jmsstudiosinc/driver": { - "version": "0.0.32", - "resolved": "https://npm.pkg.github.com/download/@jmsstudiosinc/driver/0.0.32/36f87974365ae39431c421baf7b28dd90e5a03c9", - "integrity": "sha512-LoYCdoMXOqziYZ8lPqEMzfHQnT8epKhhfhoi49/WyY3u2S9236QfMkPE3aVovzetv5LYqs3KB2Lvwp/Geoe7uQ==", + "version": "0.0.35", + "resolved": "https://npm.pkg.github.com/download/@jmsstudiosinc/driver/0.0.35/9fb845b2ff2ed0c330d331622c823cb843a0a2fc", + "integrity": "sha512-JrCFJodBntW7FLxYhfToQlvCB8JXcepwp6k6IfkqAg5gFFacohlNiyGuX2iboKW2b1mtaMtHzmIBp7Zv8zegDw==", "requires": { - "@jmsstudiosinc/commons": "^0.0.32", - "@jmsstudiosinc/vendor": "^0.0.32" + "@jmsstudiosinc/commons": "^0.0.35", + "@jmsstudiosinc/vendor": "^0.0.35" } }, "@jmsstudiosinc/material-tokens": { @@ -49008,13 +49008,13 @@ "integrity": "sha512-00ut9s9sbkUZNqBPV87Skzb9Y5k3ltPd1l0gi5rrnsMQoGooJIQeom0ieVK8cwDZgBMpE2HVtdC5Sj1N5ymBWA==" }, "@jmsstudiosinc/order": { - "version": "0.0.32", - "resolved": "https://npm.pkg.github.com/download/@jmsstudiosinc/order/0.0.32/f88341bf07307196156a1143de20e8855533138d", - "integrity": "sha512-4fWu9ucG/a8YIAduBy62iemrrH++yZrwP4KJASJrl9Obno/oqxiPoHAxz4afKtvwAgYYBWJLRzYU4JrEomtI+g==", + "version": "0.0.35", + "resolved": "https://npm.pkg.github.com/download/@jmsstudiosinc/order/0.0.35/5535f57fc2ebaed626e5ea41e6f65f2163509835", + "integrity": "sha512-LjreQ6RHzi8TCCpFs9gWw9Urm1113s4znNiy2VxlQbr+oF1xlCsanPB3JfRGxevNoocPfxNxXJpYqDvfaPdgqA==", "requires": { - "@jmsstudiosinc/commons": "^0.0.32", - "@jmsstudiosinc/user": "^0.0.31", - "@jmsstudiosinc/vendor": "^0.0.32" + "@jmsstudiosinc/commons": "^0.0.35", + "@jmsstudiosinc/user": "^0.0.34", + "@jmsstudiosinc/vendor": "^0.0.35" } }, "@jmsstudiosinc/pud": { @@ -49087,20 +49087,20 @@ } }, "@jmsstudiosinc/user": { - "version": "0.0.31", - "resolved": "https://npm.pkg.github.com/download/@jmsstudiosinc/user/0.0.31/d95a4883fbeb58472ed387e10bc25e9fb8bac6db", - "integrity": "sha512-Q9FXSa5MlqlB8YERVOyz7wgjcp38qXodx7ZHTrSzYclthFjlGsCu/yF36nni8lsCX7Vh6CoPh0v6ZZUU5jIOSA==", + "version": "0.0.34", + "resolved": "https://npm.pkg.github.com/download/@jmsstudiosinc/user/0.0.34/fde259d8a939c1950f726534bcdd2feee727b3d7", + "integrity": "sha512-MyC4KFBVCRnAZGY38zwHj1v7V4UU9FpeMQJro7C1TutuEUjfB0oBOM5esbmNvDAWP/j66oLebC35eCRW5eSIvg==", "requires": { - "@jmsstudiosinc/commons": "^0.0.32", - "@jmsstudiosinc/vendor": "^0.0.32" + "@jmsstudiosinc/commons": "^0.0.35", + "@jmsstudiosinc/vendor": "^0.0.35" } }, "@jmsstudiosinc/vendor": { - "version": "0.0.32", - "resolved": "https://npm.pkg.github.com/download/@jmsstudiosinc/vendor/0.0.32/9a79ee133739f960391b8d1e7a4bfcc0b238ad3a", - "integrity": "sha512-wVYk3VozGUNE+8IitWPN4/c2rH9gxTBuXgFz1P+eGUXQiT3NIH6RgzoG+JQE5ZT7BkV1KEYQbVuLV1Za0m0IxQ==", + "version": "0.0.35", + "resolved": "https://npm.pkg.github.com/download/@jmsstudiosinc/vendor/0.0.35/c4685814e8bb6c5070515567ab9dd6c673b5c885", + "integrity": "sha512-zv5HyPBZyj0O4PgVK3MKboFFqWArFv58Vno4FzgtSwV1Jzea8vNkOmnqDfEOwxLD+VNdWnta2hI2LTVYWREiyg==", "requires": { - "@jmsstudiosinc/commons": "^0.0.32" + "@jmsstudiosinc/commons": "^0.0.35" } }, "@jridgewell/gen-mapping": { diff --git a/package.json b/package.json index 96744ad7..2e73922c 100644 --- a/package.json +++ b/package.json @@ -14,12 +14,13 @@ "build-storybook": "build-storybook" }, "dependencies": { - "@jmsstudiosinc/cart": "^0.0.32", - "@jmsstudiosinc/commons": "^0.0.32", - "@jmsstudiosinc/driver": "^0.0.32", - "@jmsstudiosinc/order": "^0.0.32", - "@jmsstudiosinc/user": "^0.0.31", - "@jmsstudiosinc/vendor": "^0.0.32", + + "@jmsstudiosinc/cart": "^0.0.35", + "@jmsstudiosinc/commons": "^0.0.35", + "@jmsstudiosinc/driver": "^0.0.35", + "@jmsstudiosinc/order": "^0.0.35", + "@jmsstudiosinc/user": "^0.0.34", + "@jmsstudiosinc/vendor": "^0.0.35", "@jmsstudiosinc/pud": "^0.0.28", "@jmsstudiosinc/material-tokens": "^0.0.16", "@jmsstudiosinc/react-native-paper": "^5.0.0-rc.19", diff --git a/packages/components/package.json b/packages/components/package.json index 1d3884e6..8edcab4b 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@jmsstudiosinc/react-native-components", - "version": "0.1.34", + "version": "0.1.35", "description": "> TODO: description", "author": "yerloveraaa ", "homepage": "https://github.com/jmsstudiosinc/react-native-components#readme", diff --git a/packages/components/src/ProductList/ProductListItem.js b/packages/components/src/ProductList/ProductListItem.js index cbdc25b3..cdb25fab 100755 --- a/packages/components/src/ProductList/ProductListItem.js +++ b/packages/components/src/ProductList/ProductListItem.js @@ -2,35 +2,32 @@ import React from 'react'; import * as JMSList from '../List/List'; -import {fastImageUrl} from '@jmsstudiosinc/commons'; +import { fastImageUrl } from '@jmsstudiosinc/commons'; - -const ProductListItem = ({ - title, - photo, - description, - formattedPrice, - cartQuantity, +const ProductListItem = ({ + title, + photo, + description, + formattedPrice, + cartQuantity, isOutofStock, formattedQuantity, - onPress + onPress, }) => { const descriptionList = []; - if(isOutofStock) { - descriptionList.push("Out of Stock") + if (isOutofStock) { + descriptionList.push('Out of Stock'); } - if(formattedQuantity) { + if (formattedQuantity) { descriptionList.push(formattedQuantity); } - if(description) { + if (description) { descriptionList.push(description); } - - return ( + descriptionNumberOfLines={5} + /> ); -} +}; ProductListItem.whyDidYouRender = true; function areEqual(prevProps, nextProps) { - if(prevProps.title !== nextProps.title || + if ( + prevProps.title !== nextProps.title || prevProps.photo !== nextProps.photo || prevProps.description !== nextProps.description || prevProps.formattedPrice !== nextProps.formattedPrice || prevProps.cartQuantity !== nextProps.cartQuantity || prevProps.isOutofStock !== nextProps.isOutofStock || prevProps.formattedQuantity !== nextProps.formattedQuantity || - prevProps.fulfillmentMethodFilter !== nextProps.fulfillmentMethodFilter) { + prevProps.fulfillmentMethodFilter !== nextProps.fulfillmentMethodFilter + ) { return false; } diff --git a/packages/components/src/ProductList/ProductListSticky.js b/packages/components/src/ProductList/ProductListSticky.js index 5dd69a6f..ff27f670 100755 --- a/packages/components/src/ProductList/ProductListSticky.js +++ b/packages/components/src/ProductList/ProductListSticky.js @@ -3,52 +3,78 @@ import React from 'react'; import { List } from '@jmsstudiosinc/react-native-paper'; +import { View } from 'react-native' + import StickySectionList from '../StickySectionList/StickySectionList'; import ProductListItem from './ProductListItem'; +import { moderateScale } from 'react-native-size-matters'; const keyExtractor = (productItem) => productItem.id; -const ProductListSticky = ({ - sections, +const ProductListSticky = ({ + sections, productItemQuantityMapping, fulfillmentMethodFilter, - onPress, + onPress, onContentOffsetYScroll, contentOffsetY, - ...props }) => ( - {title}} - keyExtractor={keyExtractor} - onContentOffsetYScroll={onContentOffsetYScroll} - contentOffsetY={contentOffsetY} - renderItem={({ item }) => ( - onPress(item)} /> - )} - /> -); + ...props }) => { + + + + return ( + + + {title} + + } + keyExtractor={keyExtractor} + onContentOffsetYScroll={onContentOffsetYScroll} + contentOffsetY={contentOffsetY} + getItemLayout={(data, index) => getItemLayout(data, index)} + renderItem={({ item }) => { + + const value = item.photo === null && item.hasOwnProperty('description') === false ? 60 + : item.photo === null && item?.description?.length <= 40 ? 60 + : item.photo === null && item?.description?.length >= 100 ? 140 + : item.photo !== null && item?.description?.length >= 60 ? 140 + : item.photo !== null && item.hasOwnProperty('description') === false ? 90 + : item.photo !== null && item.hasOwnProperty('description') === true ? 100 + : 100 + + + return ( + + onPress(item)} /> + + )}} + /> + ) +} ProductListSticky.whyDidYouRender = true; function areEqual(prevProps, nextProps) { - if(prevProps.productItemQuantityMapping !== nextProps.productItemQuantityMapping || - prevProps.listHeaderComponent !== nextProps.listHeaderComponent || + if (prevProps.productItemQuantityMapping !== nextProps.productItemQuantityMapping || + prevProps.listHeaderComponent !== nextProps.listHeaderComponent || prevProps.contentOffsetY !== nextProps.contentOffsetY) { return false; } - + return true; } diff --git a/packages/components/src/ScreenWrapper/ScreenWrapper.js b/packages/components/src/ScreenWrapper/ScreenWrapper.js index 02934912..2f20c7bc 100755 --- a/packages/components/src/ScreenWrapper/ScreenWrapper.js +++ b/packages/components/src/ScreenWrapper/ScreenWrapper.js @@ -1,54 +1,53 @@ import * as React from 'react'; -import { - ScrollView, - StyleSheet, - View, -} from 'react-native'; +import { ScrollView, StyleSheet, View } from 'react-native'; import { MD3LightTheme } from '@jmsstudiosinc/react-native-paper'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; export default function ScreenWrapper({ - children, - withScrollView = true, - withBottomInset = true, - withTopInset = false, - style, - contentContainerStyle, - ...rest + children, + withScrollView = true, + withBottomInset = true, + withTopInset = false, + style, + contentContainerStyle, + ...rest }) { + const insets = useSafeAreaInsets(); + const isBottom = insets.bottom === 0 ? MD3LightTheme.spacing.x4 : insets.bottom; - const insets = useSafeAreaInsets(); + const containerStyle = [ + styles.container, + { + backgroundColor: MD3LightTheme.colors.background, + paddingTop: withTopInset ? insets.top : 0, + paddingBottom: withBottomInset ? isBottom : 0, + paddingLeft: insets.left, + paddingRight: insets.left, + }, + ]; - const containerStyle = [ - styles.container, - { - backgroundColor: MD3LightTheme.colors.background, - paddingTop: withTopInset ? insets.top : 0, - paddingBottom: withBottomInset ? insets.bottom : 0, - paddingLeft: insets.left, - paddingRight: insets.left, - }, - ]; - - return ( - <> - {withScrollView ? ( - - - {children} - - - ) : {children}} - - ); + return ( + <> + {withScrollView ? ( + + + {children} + + + ) : ( + {children} + )} + + ); } const styles = StyleSheet.create({ - container: { - flex: 1, - }, + container: { + flex: 1, + }, }); diff --git a/packages/components/src/StickySectionList/StickySectionList.js b/packages/components/src/StickySectionList/StickySectionList.js index f8f8d5e1..d59c157b 100755 --- a/packages/components/src/StickySectionList/StickySectionList.js +++ b/packages/components/src/StickySectionList/StickySectionList.js @@ -6,18 +6,22 @@ import { MD3LightTheme } from '@jmsstudiosinc/react-native-paper'; import { itemSeparator } from '../utils'; import * as Tabs from '../Tabs/Tabs'; +import sectionListGetItemLayout from './utils'; +import { moderateScale } from 'react-native-size-matters'; + const AnimatedSectionList = Animated.createAnimatedComponent(NativeSectionList); -const animatedValue = new Animated.Value(0); -const StickyList = ({ - title, - sections, - listHeaderComponent, - onItemPress, +const StickyList = ({ + title, + sections, + + listHeaderComponent, + onItemPress, onContentOffsetYScroll, contentOffsetY, - ...props + ...props }) => { + const animatedValue = new Animated.Value(0); const scrollY = useRef(animatedValue).current; const blockUpdateIndexRef = useRef(false); const sectionListRef = useRef(); @@ -33,6 +37,13 @@ const StickyList = ({ extrapolate: 'clamp', }); + const getItemLayout = sectionListGetItemLayout({ + getSeparatorHeight: () => 0, + getSectionHeaderHeight: () => moderateScale(50), + getSectionFooterHeight: () => 0, + listHeaderHeight: layoutHeight, + }); + const renderTab = ( {sections.map((item, index) => ( @@ -40,7 +51,7 @@ const StickyList = ({ key={`sticky-section-${item.id}`} title={item.title} isSelected={currentIndex === index} - style={{backgroundColor: itemSeparator(index, sections.length) ? MD3LightTheme.spacing.x4 : null}} + style={{ backgroundColor: itemSeparator(index, sections.length) ? MD3LightTheme.spacing.x4 : null }} onPress={() => { setCurrentIdex(index); blockUpdateIndexRef.current = true; @@ -69,15 +80,23 @@ const StickyList = ({ sections={sections} onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], { useNativeDriver: true, - listener: onContentOffsetYScroll ? (event) => { - if(event.nativeEvent.contentOffset.y > contentOffsetY && contentOffsetYRangeRef.current === false) { - onContentOffsetYScroll(event.nativeEvent.contentOffset.y) - contentOffsetYRangeRef.current = true; - } else if(event.nativeEvent.contentOffset.y < contentOffsetY && contentOffsetYRangeRef.current === true) { - onContentOffsetYScroll(event.nativeEvent.contentOffset.y) - contentOffsetYRangeRef.current = false; - } - } : null + listener: onContentOffsetYScroll + ? (event) => { + if ( + event.nativeEvent.contentOffset.y > contentOffsetY && + contentOffsetYRangeRef.current === false + ) { + onContentOffsetYScroll(event.nativeEvent.contentOffset.y); + contentOffsetYRangeRef.current = true; + } else if ( + event.nativeEvent.contentOffset.y < contentOffsetY && + contentOffsetYRangeRef.current === true + ) { + onContentOffsetYScroll(event.nativeEvent.contentOffset.y); + contentOffsetYRangeRef.current = false; + } + } + : null, })} onMomentumScrollEnd={() => (blockUpdateIndexRef.current = false)} showsVerticalScrollIndicator={true} @@ -99,16 +118,19 @@ const StickyList = ({ setLayoutHeight(ev.nativeEvent.layout.y)}> } - showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false} + getItemLayout={getItemLayout} /> - - {renderTab} + + {renderTab} ); diff --git a/packages/components/src/StickySectionList/utils.ts b/packages/components/src/StickySectionList/utils.ts new file mode 100644 index 00000000..9e689409 --- /dev/null +++ b/packages/components/src/StickySectionList/utils.ts @@ -0,0 +1,147 @@ +export type SectionListDataProp = Array<{ + title: string; + data: any[]; +}>; + +interface SectionHeader { + type: "SECTION_HEADER"; +} + +interface Row { + type: "ROW"; + index: number; +} + +interface SectionFooter { + type: "SECTION_FOOTER"; +} + +type ListElement = SectionHeader | Row | SectionFooter; + +export interface Parameters { + getItemHeight: ( + rowData: any, + sectionIndex: number, + rowIndex: number + ) => number; + getSeparatorHeight?: (sectionIndex: number, rowIndex: number) => number; + getSectionHeaderHeight?: (sectionIndex: number) => number; + getSectionFooterHeight?: (sectionIndex: number) => number; + listHeaderHeight?: number | (() => number); +} + +export default ({ + // getItemHeight, + getSeparatorHeight = () => 0, + getSectionHeaderHeight = () => 0, + getSectionFooterHeight = () => 0, + listHeaderHeight = 0, +}: Parameters) => + (data: SectionListDataProp, index: number) => { + let i = 0; + let sectionIndex = 0; + let elementPointer: ListElement = { type: "SECTION_HEADER" }; + let offset = + typeof listHeaderHeight === "function" + ? listHeaderHeight() + : listHeaderHeight; + + while (i < index) { + switch (elementPointer.type) { + case "SECTION_HEADER": { + const sectionData = data[sectionIndex].data; + + offset += getSectionHeaderHeight(sectionIndex); + + // If this section is empty, we go right to the footer... + if (sectionData.length === 0) { + elementPointer = { type: "SECTION_FOOTER" }; + // ...otherwise we make elementPointer point at the first row in this section + } else { + elementPointer = { type: "ROW", index: 0 }; + } + + break; + } + case "ROW": { + const sectionData = data[sectionIndex].data; + + const rowIndex = elementPointer.index; + + const isData = data[sectionIndex].data[rowIndex]; + + + const value = isData.photo === null && isData.hasOwnProperty('description') === false ? 60 + : isData.photo === null && isData?.description?.length <= 40 ? 60 + : isData.photo === null && isData?.description?.length > 14 ? 110 + + : isData.photo !== null && isData?.description?.length >= 60 ? 120 + : isData.photo !== null && isData.hasOwnProperty('description') === false ? 90 + : isData.photo !== null && isData.hasOwnProperty('description') === true ? 100 + : 100 + + const getItemHeight = () => value; + + offset += getItemHeight( + sectionData[rowIndex], + sectionIndex, + rowIndex + ); + elementPointer.index += 1; + + if (rowIndex === sectionData.length - 1) { + elementPointer = { type: "SECTION_FOOTER" }; + } else { + offset += getSeparatorHeight(sectionIndex, rowIndex); + } + + break; + } + case "SECTION_FOOTER": { + offset += getSectionFooterHeight(sectionIndex); + sectionIndex += 1; + elementPointer = { type: "SECTION_HEADER" }; + break; + } + } + + i += 1; + } + + let length; + switch (elementPointer.type) { + case "SECTION_HEADER": + length = getSectionHeaderHeight(sectionIndex); + break; + case "ROW": + const rowIndex = elementPointer.index; + const isData = data[sectionIndex].data[rowIndex]; + + + + + const value = isData.photo === null && isData.hasOwnProperty('description') === false ? 60 + : isData.photo === null && isData?.description?.length <= 40 ? 60 + : isData.photo === null && isData?.description?.length > 14 ? 110 + : isData.photo !== null && isData?.description?.length >= 60 ? 120 + : isData.photo !== null && isData.hasOwnProperty('description') === false ? 90 + : isData.photo !== null && isData.hasOwnProperty('description') === true ? 100 + : 100 + + const getItemHeight = () => value; + + length = getItemHeight( + data[sectionIndex].data[rowIndex], + sectionIndex, + rowIndex + ); + break; + case "SECTION_FOOTER": + length = getSectionFooterHeight(sectionIndex); + break; + default: + throw new Error("Unknown elementPointer.type"); + } + + return { length, offset, index }; + }; diff --git a/yarn.lock b/yarn.lock index 4d24c2ee..25dd24dc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1955,13 +1955,13 @@ "@types/yargs" "^17.0.8" "chalk" "^4.0.0" -"@jmsstudiosinc/cart@^0.0.32": - "integrity" "sha512-iQ8gObLMEQNl201R6PoI78AP846zTr8bcwtY985PN9ARFSVGvuDmdKA6bwOrnkM0315c8sLFtEtnbJqx8r9ryQ==" - "resolved" "https://npm.pkg.github.com/download/@jmsstudiosinc/cart/0.0.32/5ffa12ded1525c5cd259cc13e61de4f09942698a" - "version" "0.0.32" +"@jmsstudiosinc/cart@^0.0.35": + "integrity" "sha512-2jr112lI4uA0EnaBEMFnr+2Z0iXlsaj63B3ag1OoKFL8jvAj+IuymmvkIPkBZFYzYSQWr71JKoSvJxvDVSDQyg==" + "resolved" "https://npm.pkg.github.com/download/@jmsstudiosinc/cart/0.0.35/a236fb4cdc35f64e38aa5d61fa9afc047f30ad83" + "version" "0.0.35" dependencies: - "@jmsstudiosinc/commons" "^0.0.32" - "@jmsstudiosinc/vendor" "^0.0.32" + "@jmsstudiosinc/commons" "^0.0.35" + "@jmsstudiosinc/vendor" "^0.0.35" "@jmsstudiosinc/commons@^0.0.30": "integrity" "sha512-lpGdddbEwDo/HpjnrJIV44HWsfaOA/dAo/QJ/OzxY+Y0fL/DiJkdWE3J0c+OE8UUTHqmRxwV9u7hHjZHHlJ5Mw==" @@ -1970,35 +1970,35 @@ dependencies: "@jmsstudiosinc/vendor" "^0.0.30" -"@jmsstudiosinc/commons@^0.0.32": - "integrity" "sha512-lIqudUsSUPc97oC3/Qa+RQ80wSTTZF33S8lvkEBaoGa56aIJ57TNFaKqxAFb8hViyUVqd7ryhGURZjrYoD3Vng==" - "resolved" "https://npm.pkg.github.com/download/@jmsstudiosinc/commons/0.0.32/59e36627fc15e21671f63a2501179f4dfc3680e2" - "version" "0.0.32" +"@jmsstudiosinc/commons@^0.0.35": + "integrity" "sha512-Jcp7/pWb6pj0C6y0i7WNJgvXYMw+aAnS7Irq+0B1gYqzh9qwiVf+qZhV21gTQG8rlCriGw6m6RTh2Kd7M1aSVQ==" + "resolved" "https://npm.pkg.github.com/download/@jmsstudiosinc/commons/0.0.35/84a93680f670fc4f1d881df81ed9198d2f72b52b" + "version" "0.0.35" dependencies: - "@jmsstudiosinc/vendor" "^0.0.32" + "@jmsstudiosinc/vendor" "^0.0.35" "turf-distance" "^3.0.12" -"@jmsstudiosinc/driver@^0.0.32": - "integrity" "sha512-LoYCdoMXOqziYZ8lPqEMzfHQnT8epKhhfhoi49/WyY3u2S9236QfMkPE3aVovzetv5LYqs3KB2Lvwp/Geoe7uQ==" - "resolved" "https://npm.pkg.github.com/download/@jmsstudiosinc/driver/0.0.32/36f87974365ae39431c421baf7b28dd90e5a03c9" - "version" "0.0.32" +"@jmsstudiosinc/driver@^0.0.35": + "integrity" "sha512-JrCFJodBntW7FLxYhfToQlvCB8JXcepwp6k6IfkqAg5gFFacohlNiyGuX2iboKW2b1mtaMtHzmIBp7Zv8zegDw==" + "resolved" "https://npm.pkg.github.com/download/@jmsstudiosinc/driver/0.0.35/9fb845b2ff2ed0c330d331622c823cb843a0a2fc" + "version" "0.0.35" dependencies: - "@jmsstudiosinc/commons" "^0.0.32" - "@jmsstudiosinc/vendor" "^0.0.32" + "@jmsstudiosinc/commons" "^0.0.35" + "@jmsstudiosinc/vendor" "^0.0.35" "@jmsstudiosinc/material-tokens@^0.0.16": "integrity" "sha512-00ut9s9sbkUZNqBPV87Skzb9Y5k3ltPd1l0gi5rrnsMQoGooJIQeom0ieVK8cwDZgBMpE2HVtdC5Sj1N5ymBWA==" "resolved" "https://npm.pkg.github.com/download/@jmsstudiosinc/material-tokens/0.0.16/bb5d25f9dca1717f7f74ec3ef9161eaa22dd418e" "version" "0.0.16" -"@jmsstudiosinc/order@^0.0.32": - "integrity" "sha512-4fWu9ucG/a8YIAduBy62iemrrH++yZrwP4KJASJrl9Obno/oqxiPoHAxz4afKtvwAgYYBWJLRzYU4JrEomtI+g==" - "resolved" "https://npm.pkg.github.com/download/@jmsstudiosinc/order/0.0.32/f88341bf07307196156a1143de20e8855533138d" - "version" "0.0.32" +"@jmsstudiosinc/order@^0.0.35": + "integrity" "sha512-LjreQ6RHzi8TCCpFs9gWw9Urm1113s4znNiy2VxlQbr+oF1xlCsanPB3JfRGxevNoocPfxNxXJpYqDvfaPdgqA==" + "resolved" "https://npm.pkg.github.com/download/@jmsstudiosinc/order/0.0.35/5535f57fc2ebaed626e5ea41e6f65f2163509835" + "version" "0.0.35" dependencies: - "@jmsstudiosinc/commons" "^0.0.32" - "@jmsstudiosinc/user" "^0.0.31" - "@jmsstudiosinc/vendor" "^0.0.32" + "@jmsstudiosinc/commons" "^0.0.35" + "@jmsstudiosinc/user" "^0.0.34" + "@jmsstudiosinc/vendor" "^0.0.35" "@jmsstudiosinc/pud@^0.0.28": "integrity" "sha512-hQVCAu84p9Utdg5rRK3GtzgDIpGldCGorhVR7qvM+lU7VQMbHRGIm1eCiUDpr5ldbpXmIsMnnljH+RaA9IjU5Q==" @@ -2016,13 +2016,13 @@ "@callstack/react-theme-provider" "^3.0.8" "color" "^3.1.2" -"@jmsstudiosinc/user@^0.0.31": - "integrity" "sha512-Q9FXSa5MlqlB8YERVOyz7wgjcp38qXodx7ZHTrSzYclthFjlGsCu/yF36nni8lsCX7Vh6CoPh0v6ZZUU5jIOSA==" - "resolved" "https://npm.pkg.github.com/download/@jmsstudiosinc/user/0.0.31/d95a4883fbeb58472ed387e10bc25e9fb8bac6db" - "version" "0.0.31" +"@jmsstudiosinc/user@^0.0.34": + "integrity" "sha512-MyC4KFBVCRnAZGY38zwHj1v7V4UU9FpeMQJro7C1TutuEUjfB0oBOM5esbmNvDAWP/j66oLebC35eCRW5eSIvg==" + "resolved" "https://npm.pkg.github.com/download/@jmsstudiosinc/user/0.0.34/fde259d8a939c1950f726534bcdd2feee727b3d7" + "version" "0.0.34" dependencies: - "@jmsstudiosinc/commons" "^0.0.32" - "@jmsstudiosinc/vendor" "^0.0.32" + "@jmsstudiosinc/commons" "^0.0.35" + "@jmsstudiosinc/vendor" "^0.0.35" "@jmsstudiosinc/vendor@^0.0.30": "integrity" "sha512-dOMlBxEUkl27zIHQHpDGWU+0Ncka63IYKCe4BZ/C0QFb4HHQjOuugcHMebppc4awH/+eQg9NXC+ItHpRE9l9hA==" @@ -2031,12 +2031,12 @@ dependencies: "@jmsstudiosinc/commons" "^0.0.30" -"@jmsstudiosinc/vendor@^0.0.32": - "integrity" "sha512-wVYk3VozGUNE+8IitWPN4/c2rH9gxTBuXgFz1P+eGUXQiT3NIH6RgzoG+JQE5ZT7BkV1KEYQbVuLV1Za0m0IxQ==" - "resolved" "https://npm.pkg.github.com/download/@jmsstudiosinc/vendor/0.0.32/9a79ee133739f960391b8d1e7a4bfcc0b238ad3a" - "version" "0.0.32" +"@jmsstudiosinc/vendor@^0.0.35": + "integrity" "sha512-zv5HyPBZyj0O4PgVK3MKboFFqWArFv58Vno4FzgtSwV1Jzea8vNkOmnqDfEOwxLD+VNdWnta2hI2LTVYWREiyg==" + "resolved" "https://npm.pkg.github.com/download/@jmsstudiosinc/vendor/0.0.35/c4685814e8bb6c5070515567ab9dd6c673b5c885" + "version" "0.0.35" dependencies: - "@jmsstudiosinc/commons" "^0.0.32" + "@jmsstudiosinc/commons" "^0.0.35" "@jridgewell/gen-mapping@^0.1.0": "integrity" "sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w=="