From 6c2c0a3d9796de61fec2a51480ee4c25c4db0a4b Mon Sep 17 00:00:00 2001 From: Cristiano Tofani Date: Fri, 1 Sep 2023 11:49:32 +0200 Subject: [PATCH] [IOPLT-112] Adds the FooterWithButtons component (#53) ## Short description This PR creates a new version of the footer with buttons with the new version of buttons from DS library ## How to test Check the specific page in the Example app to see how it changes. --------- Co-authored-by: Damiano Plebani --- example/src/navigation/navigator.tsx | 10 ++ example/src/navigation/params.ts | 1 + example/src/navigation/routes.ts | 4 + example/src/pages/FooterWithButton.tsx | 47 +++++++ src/components/index.tsx | 1 + src/components/layout/BlockButtons.tsx | 142 ++++++++++++++++++++ src/components/layout/FooterWithButtons.tsx | 37 +++++ src/components/layout/index.tsx | 1 + 8 files changed, 243 insertions(+) create mode 100644 example/src/pages/FooterWithButton.tsx create mode 100644 src/components/layout/BlockButtons.tsx create mode 100644 src/components/layout/FooterWithButtons.tsx diff --git a/example/src/navigation/navigator.tsx b/example/src/navigation/navigator.tsx index 2a6501f0..79022466 100644 --- a/example/src/navigation/navigator.tsx +++ b/example/src/navigation/navigator.tsx @@ -18,6 +18,7 @@ import { Search } from "../pages/Search"; import { TabNavigationScreen } from "../pages/TabNavigation"; import { Sandbox } from "../pages/Sandbox"; import { TextInputs } from "../pages/TextInputs"; +import { FooterWithButton } from "../pages/FooterWithButton"; import { AppParamsList } from "./params"; import APP_ROUTES from "./routes"; @@ -167,6 +168,15 @@ const AppNavigator = () => ( }} /> + + ( + + + + +

Footer with button

+ + + + +); diff --git a/src/components/index.tsx b/src/components/index.tsx index 90b4fd69..111c9cc6 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -18,3 +18,4 @@ export * from "./tag"; export * from "./tabs"; export * from "./typography"; export * from "./textInput"; +export * from "./layout"; diff --git a/src/components/layout/BlockButtons.tsx b/src/components/layout/BlockButtons.tsx new file mode 100644 index 00000000..fdb80e2e --- /dev/null +++ b/src/components/layout/BlockButtons.tsx @@ -0,0 +1,142 @@ +import * as React from "react"; +import { View, StyleSheet } from "react-native"; +import { HSpacer } from "../spacer/Spacer"; +import { ButtonOutline, ButtonSolid, ButtonSolidProps } from "../buttons"; +import { IOStyles } from "../../core"; + +const styles = StyleSheet.create({ + button: { + alignContent: "center", + justifyContent: "center", + flex: 1 + }, + buttonTwoThirds: { + alignContent: "center", + flex: 2 + } +}); + +type CommonProps = Readonly<{ + primary: BlockButtonProps; + accessible?: boolean; +}>; + +export type BlockButtonProps = { + type: "Solid" | "Outline"; + buttonProps: ButtonSolidProps; +}; + +/** + * | single button | + */ +export interface SingleButton extends CommonProps { + type: "SingleButton"; +} + +/** + * | left | right | + */ +export interface TwoButtonsInlineHalf extends CommonProps { + type: "TwoButtonsInlineHalf"; + secondary: BlockButtonProps; +} + +/** + * | left | right | + */ +interface TwoButtonsInlineThird extends CommonProps { + type: "TwoButtonsInlineThird"; + secondary: BlockButtonProps; +} + +/** + * | left | right | + */ +interface TwoButtonsInlineThirdInverted extends CommonProps { + type: "TwoButtonsInlineThirdInverted"; + secondary: BlockButtonProps; +} + +/** + * | left | mid | right | + */ +interface ThreeButtonsInLine extends CommonProps { + type: "ThreeButtonsInLine"; + secondary: BlockButtonProps; + third: BlockButtonProps; +} + +type Props = + | SingleButton + | TwoButtonsInlineHalf + | TwoButtonsInlineThird + | TwoButtonsInlineThirdInverted + | ThreeButtonsInLine; + +export type BlockButtonsProps = Props; + +/** + * Implements a component that show buttons on a line on 1, 2 or 3 buttons + */ +export const BlockButtons = (props: Props) => { + const renderRightButton = () => { + if (props.type === "SingleButton") { + return null; + } + + const secondaryButtonStyle = + props.type === "TwoButtonsInlineThird" + ? styles.buttonTwoThirds + : styles.button; + + return ( + + + {renderButton(props.secondary, secondaryButtonStyle)} + + ); + }; + + const renderMidButton = () => { + if (props.type !== "ThreeButtonsInLine") { + return null; + } + + return ( + + + {renderButton(props.third, styles.button)} + + ); + }; + + const renderLeftButton = () => { + const primaryButtonStyle = + props.type === "TwoButtonsInlineThirdInverted" + ? styles.buttonTwoThirds + : styles.button; + + return renderButton(props.primary, primaryButtonStyle); + }; + + const renderButton = ( + props: BlockButtonProps, + style: React.ComponentProps["style"] + ) => ( + + {props.type === "Solid" ? ( + + ) : ( + + )} + + ); + + return ( + + {renderLeftButton()} + {renderMidButton()} + {renderRightButton()} + + ); +}; diff --git a/src/components/layout/FooterWithButtons.tsx b/src/components/layout/FooterWithButtons.tsx new file mode 100644 index 00000000..4a8eb62e --- /dev/null +++ b/src/components/layout/FooterWithButtons.tsx @@ -0,0 +1,37 @@ +import * as React from "react"; + +import { StyleSheet, View } from "react-native"; +import { IOStyles } from "../../core"; +import { BlockButtons, BlockButtonsProps } from "./BlockButtons"; + +// TODO: Refactor with an unique component like `FooterTopShadow` after bonus vacanze +const styles = StyleSheet.create({ + container: { + overflow: "hidden", + width: "100%", + // This Magic number is an heritage of the app code-base, this component should be removed in favor of `GradientBottomAction` + marginTop: -50, + paddingTop: 50, + position: "absolute", + bottom: 0 + } +}); + +/** + * Implements a component that show buttons as sticky footer + * It can include 1, 2 or 3 buttons. If they are 2, they can have the inlineHalf or the inlineOneThird style + */ +export const FooterWithButtons = (props: BlockButtonsProps) => ( + + + + + +); + +export default FooterWithButtons; diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx index 46f0662a..22243493 100644 --- a/src/components/layout/index.tsx +++ b/src/components/layout/index.tsx @@ -2,3 +2,4 @@ export * from "./GradientScrollView"; export * from "./GradientBottomActions"; export * from "./HeaderFirstLevel"; export * from "./HeaderSecondLevel"; +export * from "./FooterWithButtons";