@utilitywarehouse/hearth-react-native 0.16.2 → 0.18.0

package/src/components/List/ListAction/ListAction.tsx

@@ -1,8 +1,10 @@
 import { createPressable } from '@gluestack-ui/pressable';
 import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { Pressable, ViewStyle } from 'react-native';
+import { useId, useLayoutEffect } from 'react';
+import { Pressable, View, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { useListContext, useListFirstItemContext } from '../List.context';
+import { Skeleton } from '../../Skeleton';
+import { useListContext } from '../List.context';
 import type ListActionProps from './ListAction.props';
 import ListActionContent from './ListActionContent';
 import ListActionText from './ListActionText';
@@ -13,11 +15,12 @@ const ListActionRoot = ({
   heading,
   disabled,
   variant = 'subtle',
+  loading,
   ...props
 }: ListActionProps & { states?: { active?: boolean; disabled?: boolean } }) => {
   const { onPress } = props;
   const listContext = useListContext();
-  const isFirstContext = useListFirstItemContext();
+  const { registerItem, firstItemId } = listContext;
 
   const { active } = props.states || { active: false };
 
@@ -33,6 +36,17 @@ const ListActionRoot = ({
 
   const isDisabled = disabled || listContext?.disabled || false;
   const listItemVariant = getListContainer() || variant;
+  const actionId = useId();
+
+  useLayoutEffect(() => {
+    if (!registerItem) {
+      return;
+    }
+
+    return registerItem(actionId);
+  }, [actionId, registerItem]);
+
+  const isFirstChild = firstItemId === actionId;
 
   const testID = props.testID || 'list-action';
 
@@ -41,7 +55,7 @@ const ListActionRoot = ({
     disabled: isDisabled,
     active,
     showDisabled: !listContext?.disabled && disabled,
-    isFirstChild: isFirstContext,
+    isFirstChild,
     container: listContext?.container,
   });
 
@@ -52,12 +66,21 @@ const ListActionRoot = ({
       style={[styles.container, props.style as ViewStyle]}
       disabled={isDisabled || !onPress}
     >
-      <ListActionContent>
-        <ListActionText>{heading}</ListActionText>
-      </ListActionContent>
-      <ListActionTrailingContent style={styles.centeredTrailingIcon}>
-        <ListActionTrailingIcon as={ChevronRightSmallIcon} />
-      </ListActionTrailingContent>
+      {loading ? (
+        <View style={styles.loadingWrap}>
+          <Skeleton style={{ flex: 1, maxWidth: 166 }} width="auto" height={24} borderRadius="sm" />
+          <Skeleton width={24} height={24} borderRadius="sm" />
+        </View>
+      ) : (
+        <>
+          <ListActionContent>
+            <ListActionText>{heading}</ListActionText>
+          </ListActionContent>
+          <ListActionTrailingContent style={styles.centeredTrailingIcon}>
+            <ListActionTrailingIcon as={ChevronRightSmallIcon} />
+          </ListActionTrailingContent>
+        </>
+      )}
     </Pressable>
   );
 };
@@ -129,6 +152,13 @@ const styles = StyleSheet.create(theme => ({
   centeredTrailingIcon: {
     justifyContent: 'center',
   },
+  loadingWrap: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '100%',
+    gap: theme.space['200'],
+  },
 }));
 
 export default ListAction;

package/src/components/List/ListItem/ListItem.figma.tsx

@@ -1,40 +1,56 @@
 import figma from '@figma/code-connect';
-import ListItem from './ListItem';
-
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
+import { ListItem } from '../';
 
 figma.connect(ListItem, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2421%3A1628', {
   props: {
-    // These props were automatically mapped based on your linked code:
     loading: figma.enum('State', {
       Loading: true,
     }),
     disabled: figma.enum('State', {
       Disabled: true,
     }),
-    'aria-disabled': figma.enum('State', {
-      Disabled: true,
+    leadingContent: figma.boolean('Leading content?', {
+      true: figma.nestedProps('Leading content', {
+        variant: figma.enum('Variant', {
+          Icon: figma.instance('Icon-24'),
+          'Icon Container': figma.children('Icon Container'),
+          Avatar: figma.children('Avatar'),
+          Indicator: figma.children('Indicator'),
+        }),
+      }),
+    }),
+    trailingContent: figma.boolean('Trailing Content?', {
+      true: figma.nestedProps('Trailing content', {
+        variant: figma.enum('Variant', {
+          Icon: figma.instance('Icon-20'),
+          Link: figma.children('Link'),
+          Button: figma.children('Button'),
+          Switch: figma.children('Switch'),
+          Transaction: figma.children('Transaction'),
+        }),
+      }),
+    }),
+    heading: figma.string('List heading'),
+    helperText: figma.boolean('Helper text?', {
+      true: figma.string('Helper text'),
+    }),
+    badge: figma.boolean('Badge?', {
+      true: figma.children('Badge'),
+    }),
+    numericValue: figma.boolean('Numerical value?', {
+      true: figma.string('Numerical value'),
     }),
-    // No matching props could be found for these Figma properties:
-    // "listHeading": figma.string('List heading'),
-    // "helperText": figma.boolean('Helper text?'),
-    // "helperText": figma.string('Helper text'),
-    // "customContent": figma.instance('Custom content'),
-    // "badge": figma.boolean('Badge?'),
-    // "leadingContent": figma.boolean('Leading content?'),
-    // "trailingContent": figma.boolean('Trailing Content?'),
-    // "numericalValue": figma.boolean('Numerical value?'),
-    // "numericalValue": figma.string('Numerical value'),
-    // "variant": figma.enum('Variant', {
-    //   "Default": "default",
-    //   "Custom": "custom"
-    // }),
-    // "paddingNone": figma.boolean('Padding None?')
   },
-  example: props => <ListItem loading={props.loading} disabled={props.disabled} />,
+  example: props => (
+    <ListItem
+      heading={props.heading}
+      helperText={props.helperText}
+      badge={props.badge}
+      numericValue={props.numericValue}
+      loading={props.loading}
+      disabled={props.disabled}
+      leadingContent={props.leadingContent?.variant}
+      trailingContent={props.trailingContent?.variant}
+    />
+  ),
 });

package/src/components/List/ListItem/ListItemHelperText.tsx

@@ -1,9 +1,9 @@
 import { StyleSheet } from 'react-native-unistyles';
 import { BodyText, BodyTextProps } from '../../BodyText';
 
-const ListItemHelperText = ({ children, ...props }: BodyTextProps) => {
+const ListItemHelperText = ({ children, style, ...props }: BodyTextProps) => {
   return (
-    <BodyText size="md" {...props} style={[styles.text, props.style]}>
+    <BodyText size="md" style={[styles.text, style]} {...props}>
       {children}
     </BodyText>
   );

package/src/components/List/ListItem/ListItemRoot.tsx

@@ -1,10 +1,10 @@
 import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { useMemo } from 'react';
+import { useId, useLayoutEffect, useMemo } from 'react';
 import { Pressable, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { DetailText } from '../../DetailText';
 import { Skeleton } from '../../Skeleton';
-import { useListContext, useListFirstItemContext } from '../List.context';
+import { useListContext } from '../List.context';
 import { IListItemContext, ListItemContext } from './ListItem.context';
 import type ListItemProps from './ListItem.props';
 import ListItemContent from './ListItemContent';
@@ -33,8 +33,19 @@ const ListItemRoot = ({
 }: ListItemProps & { states?: { active?: boolean; disabled?: boolean } }) => {
   const { onPress } = props;
   const listContext = useListContext();
-  const isFirstContext = useListFirstItemContext();
+  const { registerItem, firstItemId } = listContext;
   const { active } = states || { active: false };
+  const itemId = useId();
+
+  useLayoutEffect(() => {
+    if (!registerItem) {
+      return;
+    }
+
+    return registerItem(itemId);
+  }, [itemId, registerItem]);
+
+  const isFirstChild = firstItemId === itemId;
 
   const getListContainer = (): ListItemProps['variant'] => {
     if (listContext?.container?.includes('subtle')) {
@@ -60,7 +71,7 @@ const ListItemRoot = ({
     active,
     disabled: isDisabled || isLoading,
     showDisabled: !listContext.disabled && disabled,
-    isFirstChild: isFirstContext,
+    isFirstChild,
     container: listContext?.container,
   });
 

package/src/utils/isThemedImageProps.ts

@@ -1,5 +1,5 @@
 import { ImageProps } from 'react-native';
-import { ThemedImageProps } from 'src/components';
+import { ThemedImageProps } from '../components';
 
 const isThemedImageProps = (props: ThemedImageProps | ImageProps): props is ThemedImageProps => {
   return 'light' in props && 'dark' in props;

package/src/components/InlineLink/InlineLink.figma.tsx

@@ -1,33 +0,0 @@
-import React from "react"
-import InlineLink from "./InlineLink"
-import figma from "@figma/code-connect"
-
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
-
-figma.connect(
-  InlineLink,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7051%3A25641",
-  {
-    props: {
-      // These props were automatically mapped based on your linked code:
-      inverted: figma.boolean("Inverted?"),
-      disabled: figma.enum("State", {
-        Active: true,
-      }),
-      // No matching props could be found for these Figma properties:
-      // "iconLeft": figma.boolean('Icon left?'),
-      // "iconRight": figma.boolean('Icon right?'),
-      // "iconRight": figma.instance('Icon Right'),
-      // "iconLeft": figma.instance('Icon Left'),
-      // "text": figma.string('Text')
-    },
-    example: (props) => (
-      <InlineLink inverted={props.inverted} disabled={props.disabled} />
-    ),
-  },
-)