@pagopa/io-app-design-system 1.1.3 → 1.2.0

package/src/components/tabs/TabItem.tsx

@@ -0,0 +1,183 @@
+import React from "react";
+import { GestureResponderEvent, Pressable, StyleSheet } from "react-native";
+import Animated, {
+  Extrapolate,
+  interpolate,
+  interpolateColor,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withSpring
+} from "react-native-reanimated";
+import { WithTestID } from "../../utils/types";
+import { IOIcons, Icon } from "../icons";
+import { HSpacer } from "../spacer";
+import { LabelHeader } from "../typography/LabelHeader";
+import { IOSpringValues, IOColors, hexToRgba, IOScaleValues } from "../../core";
+import { useSpringPressProgressValue } from "../../utils/hooks/useSpringPressProgressValue";
+
+type ColorMode = "light" | "dark";
+
+export type TabItem = WithTestID<{
+  label: string;
+  color?: ColorMode;
+  selected?: boolean;
+  fullWidth?: boolean;
+  // Icons
+  icon?: IOIcons;
+  iconSelected?: IOIcons;
+  // Accessibility
+  accessibilityLabel: string;
+  accessibilityHint?: string;
+  // Events
+  onPress?: (event: GestureResponderEvent) => void;
+}>;
+
+type ColorStates = {
+  background: {
+    default: string;
+    selected: string;
+    pressed: string;
+  };
+  foreground: {
+    default: IOColors;
+    selected: IOColors;
+  };
+};
+
+const mapColorStates: Record<NonNullable<TabItem["color"]>, ColorStates> = {
+  light: {
+    background: {
+      default: "#ffffff00",
+      selected: IOColors["grey-50"],
+      pressed: IOColors["grey-50"]
+    },
+    foreground: {
+      default: "grey-650",
+      selected: "black"
+    }
+  },
+  dark: {
+    background: {
+      default: "#ffffff00",
+      selected: IOColors.white,
+      pressed: IOColors.white
+    },
+    foreground: {
+      default: "white",
+      selected: "grey-850"
+    }
+  }
+};
+
+const TabItem = ({
+  label,
+  color = "light",
+  selected = false,
+  fullWidth = false,
+  accessibilityLabel,
+  accessibilityHint,
+  testID,
+  onPress,
+  icon,
+  iconSelected
+}: TabItem) => {
+  const {
+    progress: progressPressed,
+    onPressIn,
+    onPressOut
+  } = useSpringPressProgressValue(IOSpringValues.selection);
+
+  const colors = mapColorStates[color];
+  const foregroundColor = colors.foreground[selected ? "selected" : "default"];
+
+  const opaquePressedBackgroundColor = hexToRgba(
+    colors.background.pressed,
+    0.1
+  );
+
+  const isSelected: Animated.SharedValue<number> = useSharedValue(0);
+  const progressSelected = useDerivedValue(() =>
+    withSpring(isSelected.value, IOSpringValues.selection)
+  );
+
+  React.useEffect(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isSelected.value = selected ? 1 : 0;
+  }, [isSelected, selected]);
+
+  // Interpolate animation values from `pressed` values
+  const animatedStyle = useAnimatedStyle(() => {
+    // Link color states to the pressed states
+    const pressedBackgroundColor = interpolateColor(
+      progressPressed.value,
+      [0, 1],
+      [colors.background.default, opaquePressedBackgroundColor]
+    );
+
+    const selectedBackgroundColor = interpolateColor(
+      progressSelected.value,
+      [0, 1],
+      [opaquePressedBackgroundColor, colors.background.selected]
+    );
+
+    // Scale down button slightly when pressed
+    const scale = interpolate(
+      progressPressed.value,
+      [0, 1],
+      [1, IOScaleValues?.basicButton?.pressedState],
+      Extrapolate.CLAMP
+    );
+
+    return {
+      backgroundColor: selected
+        ? selectedBackgroundColor
+        : pressedBackgroundColor,
+      transform: [{ scale }]
+    };
+  }, [progressPressed, progressSelected, selected]);
+
+  const activeIcon = selected ? iconSelected ?? icon : icon;
+
+  return (
+    <Pressable
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      accessibilityRole={"button"}
+      testID={testID}
+      onPress={onPress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      accessible={true}
+    >
+      <Animated.View
+        style={[styles.container, animatedStyle, fullWidth && styles.fullWidth]}
+      >
+        {activeIcon && (
+          <>
+            <Icon name={activeIcon} color={foregroundColor} size={16} />
+            <HSpacer size={4} />
+          </>
+        )}
+        <LabelHeader color={foregroundColor}>{label}</LabelHeader>
+      </Animated.View>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 65,
+    justifyContent: "center",
+    alignSelf: "flex-start"
+  },
+  fullWidth: {
+    alignSelf: "auto"
+  }
+});
+
+export { TabItem };

package/src/components/tabs/TabNavigation.tsx

@@ -0,0 +1,114 @@
+import React from "react";
+import { FlexStyle, LayoutChangeEvent, StyleSheet, View } from "react-native";
+import { ScrollView } from "react-native-gesture-handler";
+import { TabItem } from "./TabItem";
+
+export type TabNavigationItem = Omit<
+  TabItem,
+  "onPress" | "color" | "selected" | "accessibilityLabel" | "accessibilityHint"
+>;
+
+type TabNavigationChildren =
+  | React.ReactElement<TabItem>
+  | Array<React.ReactElement<TabItem>>;
+
+type TabAlignment = "start" | "center" | "end" | "stretch";
+
+type TabNavigation = {
+  // Configuration
+  color?: TabItem["color"];
+  selectedIndex?: number;
+  tabAlignment?: TabAlignment;
+  // Events
+  onItemPress?: (index: number) => void;
+  // Tabs
+  children: TabNavigationChildren;
+};
+
+const itemsJustify: Record<TabAlignment, FlexStyle["justifyContent"]> = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "space-between"
+};
+
+const TabNavigation = ({
+  color = "light",
+  selectedIndex: forceSelectedIndex,
+  tabAlignment = "center",
+  onItemPress,
+  children
+}: TabNavigation) => {
+  const [itemMinWidth, setItemMinWidth] = React.useState<number>(0);
+  const [selectedIndex, setSelectedIndex] = React.useState(
+    forceSelectedIndex ?? 0
+  );
+
+  const handleItemPress = (index: number) => {
+    setSelectedIndex(forceSelectedIndex ?? index);
+    onItemPress?.(index);
+  };
+
+  const handleItemOnLayout = (event: LayoutChangeEvent) => {
+    const { width } = event.nativeEvent.layout;
+    setItemMinWidth(current => Math.max(current, width));
+  };
+
+  const stretchItems = tabAlignment === "stretch";
+
+  const wrapChild = (child: React.ReactElement<TabItem>, index: number = 0) => (
+    <View
+      key={index}
+      style={[
+        styles.item,
+        {
+          marginEnd: index === React.Children.count(children) - 1 ? 0 : 8
+        },
+        stretchItems && {
+          minWidth: itemMinWidth
+        }
+      ]}
+      onLayout={handleItemOnLayout}
+    >
+      {React.cloneElement<TabItem>(child, {
+        onPress: event => {
+          child.props.onPress?.(event);
+          handleItemPress(index);
+        },
+        selected: selectedIndex === index,
+        color
+      })}
+    </View>
+  );
+
+  return (
+    <ScrollView
+      horizontal={true}
+      centerContent={true}
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={[
+        styles.container,
+        {
+          justifyContent: itemsJustify[tabAlignment]
+        }
+      ]}
+    >
+      {Array.isArray(children) ? children.map(wrapChild) : wrapChild(children)}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    paddingHorizontal: 24
+  },
+  item: {
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: 100,
+    alignItems: "center"
+  }
+});
+
+export { TabNavigation };

package/src/components/tabs/index.tsx

@@ -0,0 +1,2 @@
+export { TabItem } from "./TabItem";
+export { TabNavigation } from "./TabNavigation";

package/src/components/typography/LabelHeader.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
+import { IOTheme, IOThemeLight } from "../../core";
+import { useTypographyFactory } from "./Factory";
+import { ExternalTypographyProps, TypographyProps } from "./common";
+
+type AllowedColors =
+  | IOTheme["textBody-default"]
+  | "grey-650"
+  | "grey-850"
+  | "white"
+  | "black";
+type AllowedWeight = Extract<IOFontWeight, "Regular">;
+
+type OwnProps = ExternalTypographyProps<
+  TypographyProps<AllowedWeight, AllowedColors>
+>;
+
+/* Common typographic styles */
+export const labelHeaderFontSize = 14;
+export const labelHeaderLineHeight = 18;
+export const labelHeaderDefaultColor: AllowedColors =
+  IOThemeLight["textBody-default"];
+/* New typographic styles */
+const labelHeaderFontName: IOFontFamily = "ReadexPro";
+const labelHeaderDefaultWeight: AllowedWeight = "Regular";
+
+/**
+ * Typography component to render `LabelHeader` text with font size {@link fontSize} and fontFamily {@link fontName}.
+ * default values(if not defined) are weight: `Regular`, color: `bluegreyDark`
+ * @param props
+ * @constructor
+ */
+export const LabelHeader: React.FunctionComponent<OwnProps> = props =>
+  useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight: labelHeaderDefaultWeight,
+    defaultColor: labelHeaderDefaultColor,
+    font: labelHeaderFontName,
+    fontStyle: {
+      fontSize: labelHeaderFontSize,
+      lineHeight: labelHeaderLineHeight
+    }
+  });

package/src/utils/hooks/useSpringPressProgressValue.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+import Animated, {
+  useDerivedValue,
+  useSharedValue,
+  withSpring
+} from "react-native-reanimated";
+import { IOSpringValues } from "../../core";
+
+export const useSpringPressProgressValue = (
+  springValue = IOSpringValues.button
+) => {
+  const isPressed: Animated.SharedValue<number> = useSharedValue(0);
+
+  const progress = useDerivedValue(() =>
+    withSpring(isPressed.value, springValue)
+  );
+
+  const onPressIn = React.useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 1;
+  }, [isPressed]);
+  const onPressOut = React.useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 0;
+  }, [isPressed]);
+
+  return { onPressIn, onPressOut, progress };
+};