Skip to content

Commit

Permalink
[IOAPPX-440] Slightly refactor Stack component (#362)
Browse files Browse the repository at this point in the history
## Short description
This PR slightly refactor `Stack` component to avoid code repetition.
The only difference between `VStack` and `HStack` is the value of the
`flex-direction` property.

## List of changes proposed in this pull request
- Slightly optimize code of the `VStack` and `HStack` components

## How to test
N/A
  • Loading branch information
dmnplb authored Nov 26, 2024
1 parent 54b6e32 commit e8dc903
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 22 deletions.
3 changes: 1 addition & 2 deletions example/src/components/SpacerViewerBox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import {
HSpacer,
IOColors,
IOSpacer,
SpacerOrientation,
VSpacer,
useIOTheme
} from "@pagopa/io-app-design-system";
Expand All @@ -11,7 +10,7 @@ import { Text, View } from "react-native";

type SpacerViewerBoxProps = {
size: IOSpacer;
orientation?: SpacerOrientation;
orientation?: "vertical" | "horizontal";
};

const SpacerLabel = ({ value }: { value: IOSpacer }) => {
Expand Down
6 changes: 2 additions & 4 deletions src/components/spacer/Spacer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,8 @@ import React from "react";
import { View } from "react-native";
import { hexToRgba, IOColors, IOSpacer } from "../../core";

export type SpacerOrientation = "vertical" | "horizontal";

type BaseSpacerProps = {
orientation: SpacerOrientation;
orientation: "vertical" | "horizontal";
size: IOSpacer;
};

Expand All @@ -21,7 +19,7 @@ const debugBg = hexToRgba(IOColors.red, 0.2);

/**
Native `Spacer` component
@param {SpacerOrientation} orientation
@param {string} orientation
@param {IOSpacer} size
*/
const Spacer = ({ orientation, size }: BaseSpacerProps) => {
Expand Down
40 changes: 24 additions & 16 deletions src/components/stack/Stack.tsx
Original file line number Diff line number Diff line change
@@ -1,27 +1,36 @@
import React, { ReactNode } from "react";
import React, { PropsWithChildren } from "react";
import { View, ViewStyle } from "react-native";
import { IOSpacer } from "../../core";

type AllowedStyleProps = Pick<
ViewStyle,
"alignItems" | "flexShrink" | "flexGrow" | "flex" | "flexWrap"
"alignItems" | "flexShrink" | "flexGrow" | "flex" | "flexWrap" | "width"
>;

type Stack = {
type Stack = PropsWithChildren<{
space?: IOSpacer;
children: ReactNode;
style?: AllowedStyleProps;
}>;

type BaseStack = Stack & {
orientation: "vertical" | "horizontal";
};

/**
Horizontal Stack component
@param {IOSpacer} space
*/
export const HStack = ({ space, children, style }: Stack) => (

const Stack = ({
space,
style,
orientation = "vertical",
children
}: BaseStack) => (
<View
style={{
display: "flex",
flexDirection: "row",
flexDirection: orientation === "horizontal" ? "row" : "column",
gap: space,
...style
}}
Expand All @@ -30,20 +39,19 @@ export const HStack = ({ space, children, style }: Stack) => (
</View>
);

export const HStack = ({ children, ...props }: Stack) => (
<Stack orientation="horizontal" {...props}>
{children}
</Stack>
);

/**
Vertical Stack component
@param {IOSpacer} space
*/

export const VStack = ({ space, children, style }: Stack) => (
<View
style={{
display: "flex",
flexDirection: "column",
gap: space,
...style
}}
>
export const VStack = ({ children, ...props }: Stack) => (
<Stack orientation="vertical" {...props}>
{children}
</View>
</Stack>
);

0 comments on commit e8dc903

Please sign in to comment.