@hero-design/rn 8.3.0 → 8.3.2

package/src/components/Carousel/index.tsx

@@ -1,9 +1,17 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, {
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useRef,
+  useEffect,
+  useState,
+} from 'react';
 import {
   Animated,
   FlatList,
   StyleProp,
   useWindowDimensions,
+  View,
   ViewProps,
   ViewStyle,
 } from 'react-native';
@@ -11,11 +19,10 @@ import {
 import { CarouselData } from './types';
 import CarouselPaginator from './CarouselPaginator';
 import {
-  StyledCarousel,
+  StyledBackDrop,
   StyledCarouselFooterWrapper,
   StyledCarouselView,
 } from './StyledCarousel';
-import Button from '../Button';
 import CarouselItem from './CarouselItem';
 
 interface CarouselProps extends ViewProps {
@@ -27,101 +34,86 @@ interface CarouselProps extends ViewProps {
    * Testing id of the component.
    */
   testID?: string;
-
-  /**
-   * Callback to be called when the user slides to the next slide.
-   */
-  onSlideChange?: (currentSlide?: CarouselData) => void;
-
   /**
-   * Callback to be called when the user skips the intro carousel.
+   * onItemIndexChange event handler receiving index of selected Item.
    */
-  onSkipPress?: (currentSlide?: CarouselData) => void;
-
-  /**
-   * Callback to be called when the user finishes the intro carousel.
-   */
-  onFinishPress?: (currentSlide?: CarouselData) => void;
-
+  onItemIndexChange?: Dispatch<SetStateAction<number>>;
   /**
    * Carousel data.
    */
   items: CarouselData[];
-
   /**
-   * Finish button label.
+   * Render action elements function.
    */
-  finishButtonLabel?: string;
-
+  renderActions?: (pageIndex: number) => JSX.Element;
   /**
-   * Skip button label.
+   * Current selected item index.
    */
-  skipButtonLabel?: string;
+  selectedItemIndex?: number;
+}
 
-  /**
-   * Footer height.
-   */
-  footerHeight?: number;
+export function useStateFromProp<T>(
+  initialValue: T
+): [T, Dispatch<SetStateAction<T>>] {
+  const [value, setValue] = useState(initialValue);
 
-  /**
-   * Min content height.
-   */
-  minContentHeight?: number;
+  useEffect(() => setValue(initialValue), [initialValue]);
+
+  return [value, setValue];
 }
 
 const Carousel = ({
   items,
-  onFinishPress,
-  onSkipPress,
-  onSlideChange,
-  finishButtonLabel = `Let's go!`,
-  skipButtonLabel = 'Skip',
-  footerHeight = 70,
-  minContentHeight = 250,
+  onItemIndexChange,
+  renderActions,
+  selectedItemIndex = 0,
+  style,
   ...nativeProps
 }: CarouselProps) => {
-  const carouselRef = useRef(null);
-  const [currentSlideIndex, setCurrentSlideIndex] = useState(0);
-  const { width } = useWindowDimensions();
+  const carouselRef = useRef<FlatList>(null);
 
-  const scrollX = useRef(new Animated.Value(0)).current;
+  const [currentSlideIndex, setCurrentSlideIndex] =
+    useStateFromProp(selectedItemIndex);
 
-  const visibleSlideChanged = useCallback(
-    ({ viewableItems }) => {
-      if (!viewableItems || (viewableItems && !viewableItems.length)) return;
-      const currentIndex = viewableItems[0].index;
-      setCurrentSlideIndex(viewableItems[0].index);
-      const currentSlide = items[currentIndex];
-      if (onSlideChange) {
-        onSlideChange(currentSlide);
+  const internalOnItemIndexChange = useCallback(
+    (index: number) => {
+      setCurrentSlideIndex(index);
+      if (onItemIndexChange) {
+        onItemIndexChange(index);
       }
     },
-    [items, onSlideChange]
+    [setCurrentSlideIndex, onItemIndexChange]
   );
+  const { width } = useWindowDimensions();
 
-  const skipCarousel = useCallback(() => {
-    const currentSlide = items[currentSlideIndex];
-    if (onSkipPress) {
-      onSkipPress(currentSlide);
-    }
-  }, [currentSlideIndex, onSkipPress, items]);
-
-  const finishCarousel = useCallback(() => {
-    const currentSlide = items[currentSlideIndex];
-    if (onFinishPress) {
-      onFinishPress(currentSlide);
-    }
-  }, [onFinishPress, items, currentSlideIndex]);
+  const scrollX = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    // must use setTimeout since when layout is mounted, the pagination dots are not set correct scrollX
+    const handle = setTimeout(() => {
+      scrollX.setValue(currentSlideIndex * width);
+      carouselRef.current?.scrollToOffset({
+        offset: currentSlideIndex * width,
+        animated: true,
+      });
+    }, 100);
+    return () => {
+      clearTimeout(handle);
+    };
+  }, [currentSlideIndex, carouselRef]);
+
+  const visibleSlideChanged = useCallback(({ viewableItems }) => {
+    if (!viewableItems || (viewableItems && !viewableItems.length)) return;
+    const { index } = viewableItems[0];
+    internalOnItemIndexChange(index);
+  }, []);
 
   const viewConfig = useRef({ viewAreaCoveragePercentThreshold: 50 }).current;
 
-  const isLastSlide = currentSlideIndex === items.length - 1;
-
   return (
-    <StyledCarousel
-      themeSlideBackground={items[currentSlideIndex].background}
-      {...nativeProps}
-    >
+    <View style={style} {...nativeProps}>
+      <StyledBackDrop
+        themeSlideBackground={items[currentSlideIndex].background}
+      />
       <StyledCarouselView>
         <FlatList
           horizontal
@@ -148,28 +140,17 @@ const Carousel = ({
                 heading={heading}
                 body={body}
                 content={content}
-                minHeight={minContentHeight}
                 width={width}
               />
             );
           }}
         />
-        <StyledCarouselFooterWrapper
-          paddingHorizontal="large"
-          flexDirection="row"
-          justifyContent="space-between"
-          style={{ height: footerHeight }}
-        >
-          <Button
-            variant={isLastSlide ? 'filled' : 'text'}
-            intent="primary"
-            onPress={isLastSlide ? finishCarousel : skipCarousel}
-            text={isLastSlide ? finishButtonLabel : skipButtonLabel}
-          />
+        <StyledCarouselFooterWrapper>
+          {renderActions && renderActions(currentSlideIndex)}
           <CarouselPaginator numberOfSlides={items.length} scrollX={scrollX} />
         </StyledCarouselFooterWrapper>
       </StyledCarouselView>
-    </StyledCarousel>
+    </View>
   );
 };
 

package/src/components/TextInput/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, forwardRef } from 'react';
 import { StyleSheet, TextInput as RNTextInput } from 'react-native';
 import type {
   TextInputProps as NativeTextInputProps,
@@ -141,225 +141,227 @@ export const getVariant = ({
 // https://github.com/callstack/react-native-paper/pull/3331
 const EMPTY_PLACEHOLDER_VALUE = ' ';
 
-const TextInput = (
-  {
-    label,
-    prefix,
-    suffix,
-    style,
-    textStyle,
-    testID,
-    accessibilityLabelledBy,
-    error,
-    required,
-    editable = true,
-    disabled = false,
-    loading = false,
-    maxLength,
-    helpText,
-    value,
-    defaultValue,
-    renderInputValue,
-    ...nativeProps
-  }: TextInputProps,
-  ref?: React.Ref<TextInputHandles>
-) => {
-  const displayText = (value !== undefined ? value : defaultValue) ?? '';
-  const isEmptyValue = displayText.length === 0;
-  const actualSuffix = loading ? 'loading' : suffix;
+const TextInput = forwardRef<TextInputHandles, TextInputProps>(
+  (
+    {
+      label,
+      prefix,
+      suffix,
+      style,
+      textStyle,
+      testID,
+      accessibilityLabelledBy,
+      error,
+      required,
+      editable = true,
+      disabled = false,
+      loading = false,
+      maxLength,
+      helpText,
+      value,
+      defaultValue,
+      renderInputValue,
+      ...nativeProps
+    }: TextInputProps,
+    ref?: React.Ref<TextInputHandles>
+  ) => {
+    const displayText = (value !== undefined ? value : defaultValue) ?? '';
+    const isEmptyValue = displayText.length === 0;
+    const actualSuffix = loading ? 'loading' : suffix;
 
-  const [isFocused, setIsFocused] = React.useState(false);
+    const [isFocused, setIsFocused] = React.useState(false);
 
-  const variant = getVariant({
-    disabled,
-    error,
-    editable,
-    loading,
-    isFocused,
-    isEmptyValue,
-  });
+    const variant = getVariant({
+      disabled,
+      error,
+      editable,
+      loading,
+      isFocused,
+      isEmptyValue,
+    });
 
-  const shouldShowMaxLength = maxLength !== undefined;
+    const shouldShowMaxLength = maxLength !== undefined;
 
-  const theme = useTheme();
+    const theme = useTheme();
 
-  const innerTextInput = React.useRef<RNTextInput | undefined | null>();
-  React.useImperativeHandle(
-    ref,
-    () => ({
-      // we don't expose this method, it's for testing https://medium.com/developer-rants/how-to-test-useref-without-mocking-useref-699165f4994e
-      getNativeTextInputRef: () => innerTextInput.current,
-      focus: () => {
-        innerTextInput.current?.focus();
-      },
-      clear: () => innerTextInput.current?.clear(),
-      setNativeProps: (args: NativeTextInputProps) =>
-        innerTextInput.current?.setNativeProps(args),
-      isFocused: () => innerTextInput.current?.isFocused() || false,
-      blur: () => innerTextInput.current?.blur(),
-    }),
-    [innerTextInput]
-  );
+    const innerTextInput = React.useRef<RNTextInput | undefined | null>();
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        // we don't expose this method, it's for testing https://medium.com/developer-rants/how-to-test-useref-without-mocking-useref-699165f4994e
+        getNativeTextInputRef: () => innerTextInput.current,
+        focus: () => {
+          innerTextInput.current?.focus();
+        },
+        clear: () => innerTextInput.current?.clear(),
+        setNativeProps: (args: NativeTextInputProps) =>
+          innerTextInput.current?.setNativeProps(args),
+        isFocused: () => innerTextInput.current?.isFocused() || false,
+        blur: () => innerTextInput.current?.blur(),
+      }),
+      [innerTextInput]
+    );
 
-  const { borderStyle, textStyleWithoutBorderStyle } = useMemo(() => {
-    if (!textStyle) {
-      return {};
-    }
+    const { borderStyle, textStyleWithoutBorderStyle } = useMemo(() => {
+      if (!textStyle) {
+        return {};
+      }
 
-    const flattenTextStyle = StyleSheet.flatten(textStyle);
-    const borderKeys = Object.keys(flattenTextStyle).filter((key) => {
-      return key.startsWith('border');
-    }) as Array<keyof TextStyle>;
-    return {
-      borderStyle: pick(borderKeys, flattenTextStyle),
-      textStyleWithoutBorderStyle: omit(borderKeys, flattenTextStyle),
-    };
-  }, [textStyle]);
+      const flattenTextStyle = StyleSheet.flatten(textStyle);
+      const borderKeys = Object.keys(flattenTextStyle).filter((key) => {
+        return key.startsWith('border');
+      }) as Array<keyof TextStyle>;
+      return {
+        borderStyle: pick(borderKeys, flattenTextStyle),
+        textStyleWithoutBorderStyle: omit(borderKeys, flattenTextStyle),
+      };
+    }, [textStyle]);
 
-  const nativeInputProps: NativeTextInputProps = {
-    style: StyleSheet.flatten([
-      { color: theme.__hd__.textInput.colors.text },
-      textStyleWithoutBorderStyle,
-    ]),
-    testID: 'text-input',
-    accessibilityState: {
-      disabled: variant === 'disabled' || variant === 'readonly',
-    },
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    accessibilityLabelledBy,
-    ...nativeProps,
-    onFocus: (event) => {
-      setIsFocused(true);
-      nativeProps.onFocus?.(event);
-    },
-    onBlur: (event) => {
-      setIsFocused(false);
-      nativeProps.onBlur?.(event);
-    },
-    editable,
-    maxLength,
-    value,
-    onChangeText: (text) => {
-      nativeProps.onChangeText?.(text);
-    },
-    defaultValue,
-    placeholder:
-      isFocused || label === undefined
-        ? nativeProps.placeholder
-        : EMPTY_PLACEHOLDER_VALUE,
-  };
+    const nativeInputProps: NativeTextInputProps = {
+      style: StyleSheet.flatten([
+        { color: theme.__hd__.textInput.colors.text },
+        textStyleWithoutBorderStyle,
+      ]),
+      testID: 'text-input',
+      accessibilityState: {
+        disabled: variant === 'disabled' || variant === 'readonly',
+      },
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      accessibilityLabelledBy,
+      ...nativeProps,
+      onFocus: (event) => {
+        setIsFocused(true);
+        nativeProps.onFocus?.(event);
+      },
+      onBlur: (event) => {
+        setIsFocused(false);
+        nativeProps.onBlur?.(event);
+      },
+      editable,
+      maxLength,
+      value,
+      onChangeText: (text) => {
+        nativeProps.onChangeText?.(text);
+      },
+      defaultValue,
+      placeholder:
+        isFocused || label === undefined
+          ? nativeProps.placeholder
+          : EMPTY_PLACEHOLDER_VALUE,
+    };
 
-  return (
-    <StyledContainer
-      style={style}
-      pointerEvents={
-        variant === 'disabled' || variant === 'readonly' ? 'none' : 'auto'
-      }
-      testID={testID}
-    >
-      <StyledTextInputContainer>
-        <StyledBorderBackDrop
-          themeFocused={isFocused}
-          themeVariant={variant}
-          style={borderStyle}
-        />
-        {(isFocused || (label && !isEmptyValue)) && (
-          <StyledLabelContainer pointerEvents="none">
-            {required && (
-              <StyledAsteriskLabel themeVariant={variant} fontSize="small">
-                *
-              </StyledAsteriskLabel>
-            )}
-            {!!label && (
-              <StyledLabel
-                nativeID={accessibilityLabelledBy}
-                testID="input-label"
-                fontSize="small"
-                themeVariant={variant}
-              >
-                {label}
-              </StyledLabel>
-            )}
-          </StyledLabelContainer>
-        )}
-        {typeof prefix === 'string' ? (
-          <Icon
-            intent={variant === 'disabled' ? 'disabled-text' : 'text'}
-            testID="input-prefix"
-            icon={prefix}
-            size="xsmall"
+    return (
+      <StyledContainer
+        style={style}
+        pointerEvents={
+          variant === 'disabled' || variant === 'readonly' ? 'none' : 'auto'
+        }
+        testID={testID}
+      >
+        <StyledTextInputContainer>
+          <StyledBorderBackDrop
+            themeFocused={isFocused}
+            themeVariant={variant}
+            style={borderStyle}
           />
-        ) : (
-          prefix
-        )}
-        <StyledTextInputAndLabelContainer>
-          {!isFocused && isEmptyValue && (
-            <StyledLabelContainerInsideTextInput pointerEvents="none">
+          {(isFocused || (label && !isEmptyValue)) && (
+            <StyledLabelContainer pointerEvents="none">
               {required && (
-                <StyledAsteriskLabelInsideTextInput themeVariant={variant}>
+                <StyledAsteriskLabel themeVariant={variant} fontSize="small">
                   *
-                </StyledAsteriskLabelInsideTextInput>
+                </StyledAsteriskLabel>
               )}
               {!!label && (
-                <StyledLabelInsideTextInput
+                <StyledLabel
                   nativeID={accessibilityLabelledBy}
                   testID="input-label"
-                  fontSize="medium"
+                  fontSize="small"
                   themeVariant={variant}
                 >
                   {label}
-                </StyledLabelInsideTextInput>
+                </StyledLabel>
               )}
-            </StyledLabelContainerInsideTextInput>
+            </StyledLabelContainer>
           )}
-          {renderInputValue ? (
-            renderInputValue(nativeInputProps)
-          ) : (
-            <StyledTextInput
-              {...nativeInputProps}
-              ref={(reference) => {
-                innerTextInput.current = reference;
-              }}
+          {typeof prefix === 'string' ? (
+            <Icon
+              intent={variant === 'disabled' ? 'disabled-text' : 'text'}
+              testID="input-prefix"
+              icon={prefix}
+              size="xsmall"
             />
+          ) : (
+            prefix
           )}
-        </StyledTextInputAndLabelContainer>
-        {typeof actualSuffix === 'string' ? (
-          <Icon
-            intent={variant === 'disabled' ? 'disabled-text' : 'text'}
-            testID="input-suffix"
-            icon={actualSuffix}
-            spin={actualSuffix === 'loading'}
-            size="xsmall"
-          />
-        ) : (
-          suffix
-        )}
-      </StyledTextInputContainer>
-      <StyledErrorAndHelpTextContainer>
-        <StyledErrorAndMaxLengthContainer>
-          {!!error && (
-            <StyledErrorContainer>
-              <Icon
-                testID="input-error-icon"
-                icon="circle-info"
-                size="xsmall"
-                intent="danger"
+          <StyledTextInputAndLabelContainer>
+            {!isFocused && isEmptyValue && (
+              <StyledLabelContainerInsideTextInput pointerEvents="none">
+                {required && (
+                  <StyledAsteriskLabelInsideTextInput themeVariant={variant}>
+                    *
+                  </StyledAsteriskLabelInsideTextInput>
+                )}
+                {!!label && (
+                  <StyledLabelInsideTextInput
+                    nativeID={accessibilityLabelledBy}
+                    testID="input-label"
+                    fontSize="medium"
+                    themeVariant={variant}
+                  >
+                    {label}
+                  </StyledLabelInsideTextInput>
+                )}
+              </StyledLabelContainerInsideTextInput>
+            )}
+            {renderInputValue ? (
+              renderInputValue(nativeInputProps)
+            ) : (
+              <StyledTextInput
+                {...nativeInputProps}
+                ref={(reference) => {
+                  innerTextInput.current = reference;
+                }}
               />
-
-              <StyledError testID="input-error-message">{error}</StyledError>
-            </StyledErrorContainer>
-          )}
-          {shouldShowMaxLength && (
-            <StyledMaxLengthMessage themeVariant={variant} fontSize="small">
-              {displayText.length}/{maxLength}
-            </StyledMaxLengthMessage>
+            )}
+          </StyledTextInputAndLabelContainer>
+          {typeof actualSuffix === 'string' ? (
+            <Icon
+              intent={variant === 'disabled' ? 'disabled-text' : 'text'}
+              testID="input-suffix"
+              icon={actualSuffix}
+              spin={actualSuffix === 'loading'}
+              size="xsmall"
+            />
+          ) : (
+            suffix
           )}
-        </StyledErrorAndMaxLengthContainer>
-        {!!helpText && <StyledHelperText>{helpText}</StyledHelperText>}
-      </StyledErrorAndHelpTextContainer>
-    </StyledContainer>
-  );
-};
+        </StyledTextInputContainer>
+        <StyledErrorAndHelpTextContainer>
+          <StyledErrorAndMaxLengthContainer>
+            {!!error && (
+              <StyledErrorContainer>
+                <Icon
+                  testID="input-error-icon"
+                  icon="circle-info"
+                  size="xsmall"
+                  intent="danger"
+                />
+
+                <StyledError testID="input-error-message">{error}</StyledError>
+              </StyledErrorContainer>
+            )}
+            {shouldShowMaxLength && (
+              <StyledMaxLengthMessage themeVariant={variant} fontSize="small">
+                {displayText.length}/{maxLength}
+              </StyledMaxLengthMessage>
+            )}
+          </StyledErrorAndMaxLengthContainer>
+          {!!helpText && <StyledHelperText>{helpText}</StyledHelperText>}
+        </StyledErrorAndHelpTextContainer>
+      </StyledContainer>
+    );
+  }
+);
 
-export default React.forwardRef<TextInputHandles, TextInputProps>(TextInput);
+export default TextInput;

package/src/components/Typography/Text/StyledText.tsx

@@ -15,6 +15,7 @@ const StyledText = styled(Text)<{
     | 'xlarge'
     | 'xxxlarge'
     | 'xxxxxlarge'
+    | '6xlarge'
     | '7xlarge';
   themeFontWeight: 'light' | 'regular' | 'semi-bold';
   themeIntent:

package/src/components/Typography/Text/index.tsx

@@ -22,6 +22,7 @@ export interface TextProps extends NativeTextProps {
     | 'xlarge'
     | 'xxxlarge'
     | 'xxxxxlarge'
+    | '6xlarge'
     | '7xlarge';
   /**
    * Font weight of the text.