Skip to content

Commit

Permalink
Merge branch 'main' into IOAPPX-281-add-hstack-vstack
Browse files Browse the repository at this point in the history
  • Loading branch information
@dmnplb
dmnplb authored Apr 8, 2024
2 parents b8aadee + 95be291 commit 627b44b
Show file tree
Hide file tree
Showing 2 changed files with 104 additions and 34 deletions.
35 changes: 11 additions & 24 deletions example/src/pages/TabNavigation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,18 @@
/* eslint-disable arrow-body-style */
import * as React from "react";

import { StyleSheet, View } from "react-native";
import {
ContentWrapper,
TabNavigation,
TabItem,
IOColors,
BodyMonospace,
H3,
ContentWrapper,
H2,
H3,
HSpacer,
IOColors,
TabItem,
TabNavigation,
VSpacer
} from "@pagopa/io-app-design-system";
import { StyleSheet, View } from "react-native";
import { ComponentViewerBox } from "../components/ComponentViewerBox";
import { NoMarginScreen } from "../components/Screen";

Expand All @@ -27,7 +27,7 @@ export const TabNavigationScreen = () => {
<VSpacer size={24} />
<H3>Light</H3>
<VSpacer size={16} />
<View style={[styles.default, { borderRadius: 16, padding: 16 }]}>
<View>
<ComponentViewerBox name="Light">
<View style={{ flexDirection: "row" }}>
<TabItem
Expand All @@ -40,7 +40,6 @@ export const TabNavigationScreen = () => {
label="Label tab"
accessibilityLabel="Label tab"
icon={"starEmpty"}
iconSelected={"starFilled"}
onPress={handlePress}
/>
</View>
Expand All @@ -59,7 +58,6 @@ export const TabNavigationScreen = () => {
label="Label tab"
accessibilityLabel="Label tab"
icon={"starEmpty"}
iconSelected={"starFilled"}
selected={true}
onPress={handlePress}
/>
Expand All @@ -80,7 +78,6 @@ export const TabNavigationScreen = () => {
accessibilityLabel="Label tab"
disabled
icon={"starEmpty"}
iconSelected={"starFilled"}
onPress={handlePress}
/>
</View>
Expand All @@ -103,7 +100,6 @@ export const TabNavigationScreen = () => {
label="Label tab"
accessibilityLabel="Label tab"
icon={"starEmpty"}
iconSelected={"starFilled"}
color="dark"
onPress={handlePress}
/>
Expand All @@ -124,7 +120,6 @@ export const TabNavigationScreen = () => {
label="Label tab"
accessibilityLabel="Label tab"
icon={"starEmpty"}
iconSelected={"starFilled"}
color="dark"
selected={true}
onPress={handlePress}
Expand All @@ -145,7 +140,6 @@ export const TabNavigationScreen = () => {
label="Label tab"
accessibilityLabel="Label tab"
icon={"starEmpty"}
iconSelected={"starFilled"}
color="dark"
disabled={true}
onPress={handlePress}
Expand All @@ -161,7 +155,7 @@ export const TabNavigationScreen = () => {
<H3>Light</H3>
<VSpacer size={16} />
</ContentWrapper>
<View style={[styles.default, { paddingVertical: 24 }]}>
<View>
<TabNavigation>
<TabItem label="Label tab" accessibilityLabel="Label tab" />
<TabItem label="Label tab" accessibilityLabel="Label tab" />
Expand Down Expand Up @@ -212,7 +206,7 @@ export const TabNavigationScreen = () => {
</View>

<ContentWrapper>
<VSpacer size={24} />
<VSpacer size={32} />
<H3>Dark</H3>
<VSpacer size={16} />
</ContentWrapper>
Expand All @@ -238,31 +232,26 @@ export const TabNavigationScreen = () => {
label="Label tab"
accessibilityLabel="Label tab"
icon="starEmpty"
iconSelected="starFilled"
/>
<TabItem
label="Label tab"
accessibilityLabel="Label tab"
icon="starEmpty"
iconSelected="starFilled"
/>
<TabItem
label="Label tab"
accessibilityLabel="Label tab"
icon="starEmpty"
iconSelected="starFilled"
/>
<TabItem
label="Label tab"
accessibilityLabel="Label tab"
icon="starEmpty"
iconSelected="starFilled"
/>
<TabItem
label="Label tab"
accessibilityLabel="Label tab"
icon="starEmpty"
iconSelected="starFilled"
/>
</TabNavigation>
</View>
Expand All @@ -273,7 +262,7 @@ export const TabNavigationScreen = () => {
<VSpacer size={16} />
</ContentWrapper>

<View style={[styles.default, { paddingVertical: 24 }]}>
<View>
<ContentWrapper>
<BodyMonospace>{`center (default)`}</BodyMonospace>
</ContentWrapper>
Expand Down Expand Up @@ -328,14 +317,12 @@ export const TabNavigationScreen = () => {
<TabItem label="Label" accessibilityLabel="Label" />
</TabNavigation>
</View>
<VSpacer size={40} />
</NoMarginScreen>
);
};

const styles = StyleSheet.create({
default: {
backgroundColor: IOColors["blueIO-100"]
},
dark: {
backgroundColor: IOColors["blueIO-850"]
}
Expand Down
103 changes: 93 additions & 10 deletions src/components/tabs/TabItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from "react";
import React, { useMemo } from "react";
import { GestureResponderEvent, Pressable, StyleSheet } from "react-native";
import Animated, {
Extrapolate,
Expand All @@ -9,7 +9,13 @@ import Animated, {
useSharedValue,
withSpring
} from "react-native-reanimated";
import { IOColors, IOScaleValues, IOSpringValues, hexToRgba } from "../../core";
import {
IOColors,
IOScaleValues,
IOSpringValues,
hexToRgba,
useIOExperimentalDesign
} from "../../core";
import { useSpringPressProgressValue } from "../../utils/hooks/useSpringPressProgressValue";
import { WithTestID } from "../../utils/types";
import { IOIcons, Icon } from "../icons";
Expand All @@ -35,6 +41,11 @@ export type TabItem = WithTestID<{
}>;

type ColorStates = {
border: {
default: string;
selected: string;
disabled: string;
};
background: {
default: string;
selected: string;
Expand All @@ -49,18 +60,68 @@ type ColorStates = {

const mapColorStates: Record<NonNullable<TabItem["color"]>, ColorStates> = {
light: {
border: {
default: IOColors["grey-300"],
selected: IOColors["blueIO-500"],
disabled: IOColors["grey-300"]
},
background: {
default: "#ffffff00",
selected: IOColors["grey-50"],
pressed: IOColors["grey-50"]
default: IOColors.white,
selected: IOColors["blueIO-50"],
pressed: IOColors.white
},
foreground: {
default: "black",
selected: "blueIO-500",
disabled: "grey-700"
}
},
dark: {
border: {
default: hexToRgba(IOColors.white, 0),
selected: IOColors.white,
disabled: hexToRgba(IOColors.white, 0.5)
},
background: {
default: hexToRgba(IOColors.white, 0),
selected: IOColors.white,
pressed: IOColors.white
},
foreground: {
default: "white",
selected: "black",
disabled: "white"
}
}
};

const mapLegacyColorStates: Record<
NonNullable<TabItem["color"]>,
ColorStates
> = {
light: {
border: {
default: IOColors["grey-300"],
selected: IOColors.blue,
disabled: hexToRgba(IOColors.white)
},
background: {
default: IOColors.white,
selected: hexToRgba(IOColors.blue, 0.1),
pressed: IOColors.white
},
foreground: {
default: "black",
selected: "blue",
disabled: "grey-700"
}
},
dark: {
border: {
default: hexToRgba(IOColors.white, 0),
selected: IOColors.white,
disabled: hexToRgba(IOColors.white, 0.5)
},
background: {
default: "#ffffff00",
selected: IOColors.white,
Expand Down Expand Up @@ -93,12 +154,26 @@ const TabItem = ({
onPressOut
} = useSpringPressProgressValue(IOSpringValues.selection);

const colors = mapColorStates[color];
const { isExperimental } = useIOExperimentalDesign();
const colors = useMemo(
() =>
isExperimental ? mapColorStates[color] : mapLegacyColorStates[color],
[isExperimental, color]
);

const foregroundColor = useMemo(
() =>
colors.foreground[
selected ? "selected" : disabled ? "disabled" : "default"
],
[colors.foreground, selected, disabled]
);

const foregroundColor =
colors.foreground[
selected ? "selected" : disabled ? "disabled" : "default"
];
const borderColor = useMemo(
() =>
colors.border[selected ? "selected" : disabled ? "disabled" : "default"],
[colors.border, selected, disabled]
);

const opaquePressedBackgroundColor = hexToRgba(
colors.background.pressed,
Expand Down Expand Up @@ -130,6 +205,12 @@ const TabItem = ({
[opaquePressedBackgroundColor, colors.background.selected]
);

const selectedBorderColor = interpolateColor(
progressSelected.value,
[0, 1],
[colors.border.default, colors.border.selected]
);

// Scale down button slightly when pressed
const scale = interpolate(
progressPressed.value,
Expand All @@ -142,6 +223,7 @@ const TabItem = ({
backgroundColor: selected
? selectedBackgroundColor
: pressedBackgroundColor,
borderColor: selected ? selectedBorderColor : borderColor,
transform: [{ scale }]
};
}, [progressPressed, progressSelected, selected]);
Expand Down Expand Up @@ -186,6 +268,7 @@ const styles = StyleSheet.create({
alignItems: "center",
paddingHorizontal: 16,
paddingVertical: 8,
borderWidth: 1,
borderRadius: 64,
borderCurve: "continuous",
justifyContent: "center",
Expand Down

0 comments on commit 627b44b

Please sign in to comment.