From 0a9d67dbc55ade5fa8ac96515f78a204d51c5af1 Mon Sep 17 00:00:00 2001 From: Angel Date: Tue, 28 Feb 2023 13:59:50 -0400 Subject: [PATCH 1/6] set the local scope animation --- .../StickySectionList/StickySectionList.js | 60 +++++++++++-------- 1 file changed, 35 insertions(+), 25 deletions(-) diff --git a/packages/components/src/StickySectionList/StickySectionList.js b/packages/components/src/StickySectionList/StickySectionList.js index f8f8d5e1..3d1dba4b 100755 --- a/packages/components/src/StickySectionList/StickySectionList.js +++ b/packages/components/src/StickySectionList/StickySectionList.js @@ -7,17 +7,17 @@ import { itemSeparator } from '../utils'; import * as Tabs from '../Tabs/Tabs'; 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(); @@ -40,7 +40,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 +69,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 +107,18 @@ const StickyList = ({ setLayoutHeight(ev.nativeEvent.layout.y)}> } - showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false} /> - - {renderTab} + + {renderTab} ); From 6bf3368d0fb5515d8eaa53d358af08f2bcdd74ac Mon Sep 17 00:00:00 2001 From: Angel Date: Tue, 28 Feb 2023 16:26:07 -0400 Subject: [PATCH 2/6] fix padding bottom --- .../src/ScreenWrapper/ScreenWrapper.js | 83 +++++++++---------- 1 file changed, 41 insertions(+), 42 deletions(-) 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, + }, }); From e5c9f7cf39541e09d6b7901284072d366b26c575 Mon Sep 17 00:00:00 2001 From: Angel Date: Tue, 28 Feb 2023 16:28:33 -0400 Subject: [PATCH 3/6] Publish - @jmsstudiosinc/react-native-components@0.1.35 --- packages/components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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", From 6335a9976291143b8b1dbe9cafc5a71b8c6a0972 Mon Sep 17 00:00:00 2001 From: Angel Date: Wed, 1 Mar 2023 18:05:07 -0400 Subject: [PATCH 4/6] set hight --- .../src/ProductList/ProductListSticky.js | 79 ++++++---- packages/components/src/ProductList/utils.ts | 138 ++++++++++++++++++ .../StickySectionList/StickySectionList.js | 12 +- 3 files changed, 192 insertions(+), 37 deletions(-) create mode 100644 packages/components/src/ProductList/utils.ts diff --git a/packages/components/src/ProductList/ProductListSticky.js b/packages/components/src/ProductList/ProductListSticky.js index 5dd69a6f..c9d41853 100755 --- a/packages/components/src/ProductList/ProductListSticky.js +++ b/packages/components/src/ProductList/ProductListSticky.js @@ -1,54 +1,71 @@ import React from 'react'; import { List } from '@jmsstudiosinc/react-native-paper'; +import sectionListGetItemLayout from './utils' - +import { View } from 'react-native' + import StickySectionList from '../StickySectionList/StickySectionList'; import ProductListItem from './ProductListItem'; 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 }) => { + + const getItemLayout = sectionListGetItemLayout({ + getItemHeight: () => 90, + getSeparatorHeight: () => 0, + getSectionHeaderHeight: () => 0, + getSectionFooterHeight: () => 0, + listHeaderHeight: 0, + }); + + + return ( + {title}} + keyExtractor={keyExtractor} + onContentOffsetYScroll={onContentOffsetYScroll} + contentOffsetY={contentOffsetY} + getItemLayout={(data, index) => getItemLayout(data, index)} + renderItem={({ item }) => ( + + 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/ProductList/utils.ts b/packages/components/src/ProductList/utils.ts new file mode 100644 index 00000000..20ac5d8a --- /dev/null +++ b/packages/components/src/ProductList/utils.ts @@ -0,0 +1,138 @@ +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 + // ? 70 + // : isData.hasOwnProperty('description') === false && isData.photo === null + // ? 50 + // : 100; + + // const value = data[sectionIndex].data[rowIndex].photo === null ? 50 : 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 value = data[sectionIndex].data[rowIndex].photo === null ? 50 : 100; + // const isData = data[sectionIndex].data[rowIndex]; + // const value = + // isData.photo === null + // ? 70 + // : isData.hasOwnProperty('description') === false && isData.photo === null + // ? 50 + // : 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/packages/components/src/StickySectionList/StickySectionList.js b/packages/components/src/StickySectionList/StickySectionList.js index 3d1dba4b..d58c099a 100755 --- a/packages/components/src/StickySectionList/StickySectionList.js +++ b/packages/components/src/StickySectionList/StickySectionList.js @@ -101,12 +101,12 @@ const StickyList = ({ minimumViewTime: 10, itemVisiblePercentThreshold: 10, }} - ListHeaderComponent={ - <> - {listHeaderComponent} - setLayoutHeight(ev.nativeEvent.layout.y)}> - - } + // ListHeaderComponent={ + // <> + // {listHeaderComponent} + // setLayoutHeight(ev.nativeEvent.layout.y)}> + // + // } showsHorizontalScrollIndicator={false} /> Date: Wed, 1 Mar 2023 23:21:22 -0400 Subject: [PATCH 5/6] Ready for test --- .../src/ProductList/ProductListItem.js | 38 ++--- .../src/ProductList/ProductListSticky.js | 33 +++-- packages/components/src/ProductList/utils.ts | 138 ----------------- .../StickySectionList/StickySectionList.js | 23 ++- .../components/src/StickySectionList/utils.ts | 140 ++++++++++++++++++ 5 files changed, 197 insertions(+), 175 deletions(-) delete mode 100644 packages/components/src/ProductList/utils.ts create mode 100644 packages/components/src/StickySectionList/utils.ts diff --git a/packages/components/src/ProductList/ProductListItem.js b/packages/components/src/ProductList/ProductListItem.js index cbdc25b3..c01a54d6 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={3} + /> ); -} +}; 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 c9d41853..4e59bcb9 100755 --- a/packages/components/src/ProductList/ProductListSticky.js +++ b/packages/components/src/ProductList/ProductListSticky.js @@ -1,12 +1,13 @@ import React from 'react'; import { List } from '@jmsstudiosinc/react-native-paper'; -import sectionListGetItemLayout from './utils' + 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; @@ -19,26 +20,34 @@ const ProductListSticky = ({ contentOffsetY, ...props }) => { - const getItemLayout = sectionListGetItemLayout({ - getItemHeight: () => 90, - getSeparatorHeight: () => 0, - getSectionHeaderHeight: () => 0, - getSectionFooterHeight: () => 0, - listHeaderHeight: 0, - }); return ( {title}} + renderSectionHeader={({ section: { title } }) => + + {title} + + } keyExtractor={keyExtractor} onContentOffsetYScroll={onContentOffsetYScroll} contentOffsetY={contentOffsetY} getItemLayout={(data, index) => getItemLayout(data, index)} - renderItem={({ item }) => ( - + 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 > 14 ? 110 + : item.photo !== null && item?.description?.length >= 60 ? 120 + : item.photo !== null && item.hasOwnProperty('description') === false ? 90 + : item.photo !== null && item.hasOwnProperty('description') === true ? 100 + : 100 + + + return ( + onPress(item)} /> - )} + )}} /> ) } diff --git a/packages/components/src/ProductList/utils.ts b/packages/components/src/ProductList/utils.ts deleted file mode 100644 index 20ac5d8a..00000000 --- a/packages/components/src/ProductList/utils.ts +++ /dev/null @@ -1,138 +0,0 @@ -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 - // ? 70 - // : isData.hasOwnProperty('description') === false && isData.photo === null - // ? 50 - // : 100; - - // const value = data[sectionIndex].data[rowIndex].photo === null ? 50 : 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 value = data[sectionIndex].data[rowIndex].photo === null ? 50 : 100; - // const isData = data[sectionIndex].data[rowIndex]; - // const value = - // isData.photo === null - // ? 70 - // : isData.hasOwnProperty('description') === false && isData.photo === null - // ? 50 - // : 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/packages/components/src/StickySectionList/StickySectionList.js b/packages/components/src/StickySectionList/StickySectionList.js index d58c099a..46e3fad3 100755 --- a/packages/components/src/StickySectionList/StickySectionList.js +++ b/packages/components/src/StickySectionList/StickySectionList.js @@ -6,6 +6,9 @@ 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 StickyList = ({ @@ -33,6 +36,13 @@ const StickyList = ({ extrapolate: 'clamp', }); + const getItemLayout = sectionListGetItemLayout({ + getSeparatorHeight: () => 0, + getSectionHeaderHeight: () => moderateScale(50), + getSectionFooterHeight: () => 0, + listHeaderHeight: layoutHeight, + }); + const renderTab = ( {sections.map((item, index) => ( @@ -101,13 +111,14 @@ const StickyList = ({ minimumViewTime: 10, itemVisiblePercentThreshold: 10, }} - // ListHeaderComponent={ - // <> - // {listHeaderComponent} - // setLayoutHeight(ev.nativeEvent.layout.y)}> - // - // } + ListHeaderComponent={ + <> + {listHeaderComponent} + setLayoutHeight(ev.nativeEvent.layout.y)}> + + } showsHorizontalScrollIndicator={false} + getItemLayout={getItemLayout} /> ; + +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 ({ + 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 }; + }; From e96140d20d805e81286ddf5dae73ab3acf22d854 Mon Sep 17 00:00:00 2001 From: Angel Date: Fri, 3 Mar 2023 13:28:39 -0400 Subject: [PATCH 6/6] Update hight --- package-lock.json | 128 +++++++++--------- package.json | 13 +- .../src/ProductList/ProductListItem.js | 2 +- .../src/ProductList/ProductListSticky.js | 4 +- .../StickySectionList/StickySectionList.js | 1 + .../components/src/StickySectionList/utils.ts | 111 ++++++++------- yarn.lock | 70 +++++----- 7 files changed, 169 insertions(+), 160 deletions(-) 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/src/ProductList/ProductListItem.js b/packages/components/src/ProductList/ProductListItem.js index c01a54d6..cdb25fab 100755 --- a/packages/components/src/ProductList/ProductListItem.js +++ b/packages/components/src/ProductList/ProductListItem.js @@ -37,7 +37,7 @@ const ProductListItem = ({ metaQuantity={cartQuantity} onPress={onPress} titleNumberOfLines={0} - descriptionNumberOfLines={3} + descriptionNumberOfLines={5} /> ); }; diff --git a/packages/components/src/ProductList/ProductListSticky.js b/packages/components/src/ProductList/ProductListSticky.js index 4e59bcb9..ff27f670 100755 --- a/packages/components/src/ProductList/ProductListSticky.js +++ b/packages/components/src/ProductList/ProductListSticky.js @@ -39,8 +39,8 @@ const ProductListSticky = ({ const value = item.photo === null && item.hasOwnProperty('description') === false ? 60 : item.photo === null && item?.description?.length <= 40 ? 60 - : item.photo === null && item?.description?.length > 14 ? 110 - : item.photo !== null && item?.description?.length >= 60 ? 120 + : 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 diff --git a/packages/components/src/StickySectionList/StickySectionList.js b/packages/components/src/StickySectionList/StickySectionList.js index 46e3fad3..d59c157b 100755 --- a/packages/components/src/StickySectionList/StickySectionList.js +++ b/packages/components/src/StickySectionList/StickySectionList.js @@ -14,6 +14,7 @@ const AnimatedSectionList = Animated.createAnimatedComponent(NativeSectionList); const StickyList = ({ title, sections, + listHeaderComponent, onItemPress, onContentOffsetYScroll, diff --git a/packages/components/src/StickySectionList/utils.ts b/packages/components/src/StickySectionList/utils.ts index 6eaa2b9f..9e689409 100644 --- a/packages/components/src/StickySectionList/utils.ts +++ b/packages/components/src/StickySectionList/utils.ts @@ -4,22 +4,26 @@ export type SectionListDataProp = Array<{ }>; interface SectionHeader { - type: 'SECTION_HEADER'; + type: "SECTION_HEADER"; } interface Row { - type: 'ROW'; + type: "ROW"; index: number; } interface SectionFooter { - type: 'SECTION_FOOTER'; + type: "SECTION_FOOTER"; } type ListElement = SectionHeader | Row | SectionFooter; export interface Parameters { - getItemHeight: (rowData: any, sectionIndex: number, rowIndex: number) => number; + getItemHeight: ( + rowData: any, + sectionIndex: number, + rowIndex: number + ) => number; getSeparatorHeight?: (sectionIndex: number, rowIndex: number) => number; getSectionHeaderHeight?: (sectionIndex: number) => number; getSectionFooterHeight?: (sectionIndex: number) => number; @@ -27,73 +31,76 @@ export interface Parameters { } export default ({ - getSeparatorHeight = () => 0, - getSectionHeaderHeight = () => 0, - getSectionFooterHeight = () => 0, - listHeaderHeight = 0, - }: Parameters) => + // 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; + let elementPointer: ListElement = { type: "SECTION_HEADER" }; + let offset = + typeof listHeaderHeight === "function" + ? listHeaderHeight() + : listHeaderHeight; while (i < index) { switch (elementPointer.type) { - case 'SECTION_HEADER': { + 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' }; + elementPointer = { type: "SECTION_FOOTER" }; // ...otherwise we make elementPointer point at the first row in this section } else { - elementPointer = { type: 'ROW', index: 0 }; + elementPointer = { type: "ROW", index: 0 }; } break; } - case 'ROW': { + 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 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); + offset += getItemHeight( + sectionData[rowIndex], + sectionIndex, + rowIndex + ); elementPointer.index += 1; if (rowIndex === sectionData.length - 1) { - elementPointer = { type: 'SECTION_FOOTER' }; + elementPointer = { type: "SECTION_FOOTER" }; } else { offset += getSeparatorHeight(sectionIndex, rowIndex); } break; } - case 'SECTION_FOOTER': { + case "SECTION_FOOTER": { offset += getSectionFooterHeight(sectionIndex); sectionIndex += 1; - elementPointer = { type: 'SECTION_HEADER' }; + elementPointer = { type: "SECTION_HEADER" }; break; } } @@ -103,37 +110,37 @@ export default ({ let length; switch (elementPointer.type) { - case 'SECTION_HEADER': + case "SECTION_HEADER": length = getSectionHeaderHeight(sectionIndex); break; - case 'ROW': + 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 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); + length = getItemHeight( + data[sectionIndex].data[rowIndex], + sectionIndex, + rowIndex + ); break; - case 'SECTION_FOOTER': + case "SECTION_FOOTER": length = getSectionFooterHeight(sectionIndex); break; default: - throw new Error('Unknown elementPointer.type'); + 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=="