Merge branch 'ONE-3093_credential_attributes_layout' into 'main'

ONE-3093: credential attributes layout See merge request procivis/one/one-react-native-components!128
procivis · Aug 15, 2024 · dfb9dca · dfb9dca
2 parents 6216503 + 5a0a1aa
commit dfb9dca
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 29 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@procivis/one-react-native-components",
-  "version": "0.1.26",
+  "version": "0.1.27",
   "description": "Common Procivis ONE UI components for react-native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -10,11 +10,6 @@
   "files": [
     "src",
     "lib",
-    "android",
-    "ios",
-    "!lib/typescript/example",
-    "!android/build",
-    "!ios/build",
     "!**/__tests__",
     "!**/__fixtures__",
     "!**/__mocks__"

diff --git a/src/credential/card/credential-details-card.tsx b/src/credential/card/credential-details-card.tsx
@@ -39,7 +39,6 @@ const CredentialDetailsCard: FC<CredentialDetailsCardProps> = ({
   const [previewAttributesHeight, setPreviewAttributesHeight] = useState<number>();
   const [fullAttributesHeight, setFullAttributesHeight] = useState<number>();
   const [buttonViewHeight, setButtonViewHeight] = useState<number>();
-  const [footerViewHeight, setFooterViewHeight] = useState<number>();
 
   const [allAttributesRendered, setAllAttributesRendered] = useState<boolean>(
     (attributes && attributes.length <= PREVIEW_ATTRIBUTES_COUNT) || !showAllButtonLabel,
@@ -58,12 +57,6 @@ const CredentialDetailsCard: FC<CredentialDetailsCardProps> = ({
     }
   }, [extraAttributes, allAttributesRendered]);
 
-  useEffect(() => {
-    if (!footer) {
-      setFooterViewHeight(0);
-    }
-  }, [footer]);
-
   useEffect(() => {
     if (extraAttributes.length === 0) {
       const viewStyle = StyleSheet.flatten([
@@ -76,15 +69,15 @@ const CredentialDetailsCard: FC<CredentialDetailsCardProps> = ({
   }, [extraAttributes, footer]);
 
   useEffect(() => {
-    if (previewAttributesHeight === undefined || buttonViewHeight === undefined || footerViewHeight === undefined) {
+    if (previewAttributesHeight === undefined || buttonViewHeight === undefined) {
       return;
     }
     if (allAttributesRendered && fullAttributesHeight === undefined) {
       return;
     }
 
     const additionalAttributesHeight = fullAttributesHeight ?? 0;
-    const additionalHeight = allAttributesRendered ? additionalAttributesHeight + footerViewHeight : buttonViewHeight;
+    const additionalHeight = allAttributesRendered ? additionalAttributesHeight : buttonViewHeight;
     const newHeight = expanded ? previewAttributesHeight + additionalHeight : 0;
 
     if (currentHeight.value === undefined || !animate) {
@@ -110,7 +103,6 @@ const CredentialDetailsCard: FC<CredentialDetailsCardProps> = ({
     fullAttributesHeight,
     previewAttributes.length,
     previewAttributesHeight,
-    footerViewHeight,
   ]);
 
   const credentialAttributesStyle = useAnimatedStyle(() => {
@@ -139,10 +131,6 @@ const CredentialDetailsCard: FC<CredentialDetailsCardProps> = ({
     setButtonViewHeight(event.nativeEvent.layout.height);
   }, []);
 
-  const onFooterViewLayout = useCallback((event: LayoutChangeEvent) => {
-    setFooterViewHeight(event.nativeEvent.layout.height + styles.footer.marginTop);
-  }, []);
-
   const footerView: ReactElement | undefined = useMemo(() => {
     if (!footer) {
       return undefined;
@@ -212,12 +200,7 @@ const CredentialDetailsCard: FC<CredentialDetailsCardProps> = ({
             </View>
           </Animated.View>
         )}
-        {(footerView && (
-          <View onLayout={onFooterViewLayout} style={styles.footer}>
-            {footerView}
-          </View>
-        )) ??
-          null}
+        {footerView ? <View style={styles.footer}>{footerView}</View> : null}
       </View>
     </View>
   );
@@ -236,10 +219,9 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
   },
   attributesWrapper: {
-    flex: 1,
-    flexGrow: 1,
-    overflow: 'visible',
     paddingTop: 7,
+    position: 'absolute',
+    width: '100%',
   },
   card: {
     borderRadius: 0,