From fa8de191281de161556a4c75bfc72de3c225d5dd Mon Sep 17 00:00:00 2001 From: Sam Holmes Date: Thu, 23 May 2024 17:39:30 -0700 Subject: [PATCH 1/8] Remove style prop from Space component --- .../__snapshots__/BalanceCard.test.tsx.snap | 23 +- .../__snapshots__/Buttons.test.tsx.snap | 276 ++++++++---------- .../CreateWalletSelectFiatScene.test.tsx.snap | 23 +- .../__snapshots__/SettingsScene.test.tsx.snap | 46 ++- src/components/layout/Space.tsx | 7 +- 5 files changed, 163 insertions(+), 212 deletions(-) diff --git a/src/__tests__/components/__snapshots__/BalanceCard.test.tsx.snap b/src/__tests__/components/__snapshots__/BalanceCard.test.tsx.snap index ce52d2d1a86..fcfa58824d3 100644 --- a/src/__tests__/components/__snapshots__/BalanceCard.test.tsx.snap +++ b/src/__tests__/components/__snapshots__/BalanceCard.test.tsx.snap @@ -305,19 +305,16 @@ exports[`BalanceCard should render with loading props 1`] = ` { - const { children, style } = props + const { children } = props const spaceStyle = useSpaceStyle(props) - return {children} + return {children} }) From fceb4159b4cc7e434e4d0d4977181af37668b7ae Mon Sep 17 00:00:00 2001 From: Sam Holmes Date: Thu, 23 May 2024 17:46:10 -0700 Subject: [PATCH 2/8] Add alignment props to SpaceProps These are nearly the same as the boolean values for each of the current space props (`top`, `bottom`, etc), except `alignRight` is the same as `left={true}` because alignment props are negative rather than positive when it comes to handling of space conceptually (pulling vs pushing of space). --- src/hooks/useSpaceStyle.ts | 31 +++++++++++++++++++++++++++---- 1 file changed, 27 insertions(+), 4 deletions(-) diff --git a/src/hooks/useSpaceStyle.ts b/src/hooks/useSpaceStyle.ts index 1302b9d9cf6..47145cebec2 100644 --- a/src/hooks/useSpaceStyle.ts +++ b/src/hooks/useSpaceStyle.ts @@ -4,6 +4,28 @@ import { ViewStyle } from 'react-native' import { useTheme } from '../components/services/ThemeContext' export interface SpaceProps { + // + // Alignment props: + // + + // Single-sided: + /** Align children to the top */ + alignBottom?: boolean + /** Align children to the top */ + alignLeft?: boolean + /** Align children to the right */ + alignRight?: boolean + /** Align children to the top */ + alignTop?: boolean + + // Multiple-sided: + /** Aligns children to the center */ + alignCenter?: boolean + /** Aligns children to the center horizontally */ + alignHorizontal?: boolean + /** Aligns children to the center vertically */ + alignVertical?: boolean + /** * Space props a simple way to give a component space on the sides around * the component. You can provide a number to give a specific rem unit of space @@ -66,11 +88,12 @@ export type SpaceStyle = Pick< export const useSpaceStyle = (props: SpaceProps): SpaceStyle => { const theme = useTheme() const { around, horizontal, vertical, top, bottom, left, right, expand = false, sideways = false } = props + const { alignBottom, alignLeft, alignRight, alignTop, alignCenter, alignHorizontal, alignVertical } = props - const topFill = boolify(top, vertical, around) - const bottomFill = boolify(bottom, vertical, around) - const leftFill = boolify(left, horizontal, around) - const rightFill = boolify(right, horizontal, around) + const topFill = boolify(alignBottom, alignVertical, alignCenter, top, vertical, around) + const bottomFill = boolify(alignTop, alignVertical, alignCenter, bottom, vertical, around) + const leftFill = boolify(alignRight, alignHorizontal, alignCenter, left, horizontal, around) + const rightFill = boolify(alignLeft, alignHorizontal, alignCenter, right, horizontal, around) const topUnits = numberify(top, vertical, around) const bottomUnits = numberify(bottom, vertical, around) From 4c96706d4a1b260f2062937bd814b28a56dc7028 Mon Sep 17 00:00:00 2001 From: Sam Holmes Date: Thu, 23 May 2024 17:51:36 -0700 Subject: [PATCH 3/8] Use alignment props and remove boolean to other props in SpaceProps type --- src/components/scenes/GettingStartedScene.tsx | 2 +- .../scenes/Loans/LoanCreateScene.tsx | 2 +- .../scenes/Loans/LoanDashboardScene.tsx | 6 +-- src/hooks/useSpaceStyle.ts | 44 ++++++++----------- 4 files changed, 23 insertions(+), 31 deletions(-) diff --git a/src/components/scenes/GettingStartedScene.tsx b/src/components/scenes/GettingStartedScene.tsx index 7559c4a8b05..d78e455a20c 100644 --- a/src/components/scenes/GettingStartedScene.tsx +++ b/src/components/scenes/GettingStartedScene.tsx @@ -164,7 +164,7 @@ export const GettingStartedScene = (props: Props) => { return ( - + {lstrings.skip} diff --git a/src/components/scenes/Loans/LoanCreateScene.tsx b/src/components/scenes/Loans/LoanCreateScene.tsx index 8f69a4932a6..372cb9b57b3 100644 --- a/src/components/scenes/Loans/LoanCreateScene.tsx +++ b/src/components/scenes/Loans/LoanCreateScene.tsx @@ -374,7 +374,7 @@ export const LoanCreateScene = (props: Props) => { {isLoading ? ( ) : ( - + )} diff --git a/src/components/scenes/Loans/LoanDashboardScene.tsx b/src/components/scenes/Loans/LoanDashboardScene.tsx index 35a2dce6104..f28f4e1df27 100644 --- a/src/components/scenes/Loans/LoanDashboardScene.tsx +++ b/src/components/scenes/Loans/LoanDashboardScene.tsx @@ -220,17 +220,17 @@ export const LoanDashboardScene = (props: Props) => { {Object.keys(loanAccountsMap).length === 0 ? ( <> {isLoansLoading ? ( - + {lstrings.loan_loading_loans} ) : ( <> - + {lstrings.loan_no_active_loans} - + {renderFooter()} diff --git a/src/hooks/useSpaceStyle.ts b/src/hooks/useSpaceStyle.ts index 47145cebec2..8d50878ad72 100644 --- a/src/hooks/useSpaceStyle.ts +++ b/src/hooks/useSpaceStyle.ts @@ -28,38 +28,30 @@ export interface SpaceProps { /** * Space props a simple way to give a component space on the sides around - * the component. You can provide a number to give a specific rem unit of space - * or a boolean to give the maximum amount of space available relative to its - * parent component. + * the component. You can provide a number to give a specific rem unit of + * space. * * `top`, `left`, `bottom`, and `right` props are specific sides of the * component for which you can assign space. Additionally, `horizontal`, - * `vertical`, and `around` are a combination of two or more sides. Examples: + * `vertical`, and `around` are a combination of two or more sides. + * + * Examples: * * ```tsx * top={1} // 1rem above the component * around={2} // 1rem around all sides * horizontal={0.5} // 0.5rem on the left and right sides * ``` - * - * Because boolean means to "fill up with maximum space", this allows space - * props to be used to center and align a component trivially. Examples: - * - * ```tsx - * around={true} // Center vertically and horizontally - * vertical={true} // Center vertically - * left={true} // Align to the _right_ (because max space is on the left) - * ``` */ // Specific: - top?: boolean | number - right?: boolean | number - bottom?: boolean | number - left?: boolean | number + top?: number + right?: number + bottom?: number + left?: number // Compound: - around?: boolean | number - horizontal?: boolean | number - vertical?: boolean | number + around?: number + horizontal?: number + vertical?: number /* * The `expand` space prop tells a component to expand its size within its @@ -90,10 +82,10 @@ export const useSpaceStyle = (props: SpaceProps): SpaceStyle => { const { around, horizontal, vertical, top, bottom, left, right, expand = false, sideways = false } = props const { alignBottom, alignLeft, alignRight, alignTop, alignCenter, alignHorizontal, alignVertical } = props - const topFill = boolify(alignBottom, alignVertical, alignCenter, top, vertical, around) - const bottomFill = boolify(alignTop, alignVertical, alignCenter, bottom, vertical, around) - const leftFill = boolify(alignRight, alignHorizontal, alignCenter, left, horizontal, around) - const rightFill = boolify(alignLeft, alignHorizontal, alignCenter, right, horizontal, around) + const topFill = boolify(alignBottom, alignVertical, alignCenter) + const bottomFill = boolify(alignTop, alignVertical, alignCenter) + const leftFill = boolify(alignRight, alignHorizontal, alignCenter) + const rightFill = boolify(alignLeft, alignHorizontal, alignCenter) const topUnits = numberify(top, vertical, around) const bottomUnits = numberify(bottom, vertical, around) @@ -135,7 +127,7 @@ export const useSpaceStyle = (props: SpaceProps): SpaceStyle => { return style } -const numberify = (...things: Array): number => { +const numberify = (...things: Array): number => { for (const thing of things) { if (typeof thing === 'number') { return thing @@ -143,7 +135,7 @@ const numberify = (...things: Array): number => { } return 0 } -const boolify = (...things: Array): boolean => { +const boolify = (...things: Array): boolean => { return things.some(thing => { return typeof thing === 'boolean' && thing }) From 3ba9a26bed1080ae3c48a16a3906201383e2e0df Mon Sep 17 00:00:00 2001 From: Sam Holmes Date: Thu, 23 May 2024 17:58:20 -0700 Subject: [PATCH 4/8] Rename rem-based props in SpaceProps type --- .../WalletListModal.test.tsx.snap | 2 +- ...reateWalletSelectCryptoScene.test.tsx.snap | 4 +- src/components/FioAddress/DomainListModal.tsx | 2 +- src/components/cards/LoanSummaryCard.tsx | 2 +- src/components/modals/LoanWelcomeModal.tsx | 2 +- src/components/modals/WalletListModal.tsx | 2 +- .../scenes/ChangeMiningFeeScene.tsx | 2 +- .../scenes/CreateWalletAccountSetupScene.tsx | 4 +- .../scenes/CreateWalletImportScene.tsx | 2 +- .../scenes/CreateWalletSelectCryptoScene.tsx | 4 +- .../scenes/DefaultFiatSettingScene.tsx | 4 +- src/components/scenes/EditTokenScene.tsx | 8 +-- src/components/scenes/GettingStartedScene.tsx | 2 +- .../scenes/Loans/LoanCloseScene.tsx | 2 +- .../scenes/Loans/LoanCreateScene.tsx | 4 +- .../scenes/Loans/LoanDashboardScene.tsx | 8 +-- .../scenes/Loans/LoanDetailsScene.tsx | 14 ++--- .../scenes/Loans/LoanManageScene.tsx | 6 +- src/components/scenes/ManageTokensScene.tsx | 2 +- src/components/themed/FilledTextInput.tsx | 2 +- src/components/themed/SearchFooter.tsx | 2 +- src/components/ui4/ButtonsViewUi4.tsx | 2 +- src/components/ui4/SupportCardUi4.tsx | 2 +- src/hooks/useSpaceStyle.ts | 57 +++++++++---------- src/plugins/gui/RewardsCardPlugin.tsx | 2 +- src/plugins/gui/components/GuiFormField.tsx | 2 +- .../gui/scenes/FiatPluginEnterAmountScene.tsx | 8 +-- .../gui/scenes/RewardsCardDashboardScene.tsx | 4 +- .../gui/scenes/RewardsCardWelcomeScene.tsx | 2 +- 29 files changed, 77 insertions(+), 82 deletions(-) diff --git a/src/__tests__/modals/__snapshots__/WalletListModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/WalletListModal.test.tsx.snap index 1a42bcb7612..d37fda6881d 100644 --- a/src/__tests__/modals/__snapshots__/WalletListModal.test.tsx.snap +++ b/src/__tests__/modals/__snapshots__/WalletListModal.test.tsx.snap @@ -198,7 +198,7 @@ exports[`WalletListModal should render with loading props 1`] = ` } spaceProps={ { - "around": 0.5, + "aroundRem": 0.5, "returnKeyType": "search", } } diff --git a/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap index 8e1fa531d19..5ab71e9a0f1 100644 --- a/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap +++ b/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap @@ -336,8 +336,8 @@ exports[`CreateWalletSelectCrypto should render with loading props 1`] = ` } spaceProps={ { - "horizontal": 1, - "vertical": 0.5, + "horizontalRem": 1, + "verticalRem": 0.5, } } style={ diff --git a/src/components/FioAddress/DomainListModal.tsx b/src/components/FioAddress/DomainListModal.tsx index bf34e6e0dd2..f9d73445637 100644 --- a/src/components/FioAddress/DomainListModal.tsx +++ b/src/components/FioAddress/DomainListModal.tsx @@ -157,7 +157,7 @@ class DomainListModalComponent extends React.Component { return ( bridge.resolve(undefined)} title={lstrings.fio_address_choose_domain_label}> + diff --git a/src/components/modals/LoanWelcomeModal.tsx b/src/components/modals/LoanWelcomeModal.tsx index e73ececb438..499b715ae7a 100644 --- a/src/components/modals/LoanWelcomeModal.tsx +++ b/src/components/modals/LoanWelcomeModal.tsx @@ -23,7 +23,7 @@ export const LoanWelcomeModal = (props: { bridge: AirshipBridge<'ok' | undefined return ( - + {sprintf(lstrings.loan_welcome_6s, config.appName, lstrings.loan_aave_fragment, 'BTC', 'USDC', '10', '120')} diff --git a/src/components/modals/WalletListModal.tsx b/src/components/modals/WalletListModal.tsx index 30ca75591f7..881bf258d3d 100644 --- a/src/components/modals/WalletListModal.tsx +++ b/src/components/modals/WalletListModal.tsx @@ -213,7 +213,7 @@ export function WalletListModal(props: Props) { {headerTitle} {customFormat.map(key => ( { {sprintf(lstrings.create_wallet_account_review_instructions, existingCurrencyCode)} {lstrings.create_wallet_account_requirements_eos} { {lstrings.create_wallet_import_all_instructions} { withTopMargin /> { { return ( - + {lstrings.skip} diff --git a/src/components/scenes/Loans/LoanCloseScene.tsx b/src/components/scenes/Loans/LoanCloseScene.tsx index 93edd85b49b..2cca88d4502 100644 --- a/src/components/scenes/Loans/LoanCloseScene.tsx +++ b/src/components/scenes/Loans/LoanCloseScene.tsx @@ -181,7 +181,7 @@ export const LoanCloseSceneComponent = (props: Props) => { /> )} - + diff --git a/src/components/scenes/Loans/LoanCreateScene.tsx b/src/components/scenes/Loans/LoanCreateScene.tsx index 372cb9b57b3..8ad80811171 100644 --- a/src/components/scenes/Loans/LoanCreateScene.tsx +++ b/src/components/scenes/Loans/LoanCreateScene.tsx @@ -359,7 +359,7 @@ export const LoanCreateScene = (props: Props) => { withTopMargin /> - + {/* Amount to borrow */} { {renderWarning()} {destWallet == null ? null : ( - + { ) : null} {isLoansLoading ? ( - + ) : ( @@ -220,17 +220,17 @@ export const LoanDashboardScene = (props: Props) => { {Object.keys(loanAccountsMap).length === 0 ? ( <> {isLoansLoading ? ( - + {lstrings.loan_loading_loans} ) : ( <> - + {lstrings.loan_no_active_loans} - + {renderFooter()} diff --git a/src/components/scenes/Loans/LoanDetailsScene.tsx b/src/components/scenes/Loans/LoanDetailsScene.tsx index 45848a81e4e..400126d8524 100644 --- a/src/components/scenes/Loans/LoanDetailsScene.tsx +++ b/src/components/scenes/Loans/LoanDetailsScene.tsx @@ -193,7 +193,7 @@ export const LoanDetailsSceneComponent = (props: Props) => { const { title, iconName, handlePress, isDisabled } = actionCardConfigData return ( - + {title} @@ -231,7 +231,7 @@ export const LoanDetailsSceneComponent = (props: Props) => { withTopMargin /> - + {renderProgramStatusCard()} } @@ -241,8 +241,8 @@ export const LoanDetailsSceneComponent = (props: Props) => { ltv={loanToValue} /> - - + + {lstrings.loan_loan_breakdown_title} {debts.map(debt => { @@ -251,7 +251,7 @@ export const LoanDetailsSceneComponent = (props: Props) => { return ( - + @@ -267,8 +267,8 @@ export const LoanDetailsSceneComponent = (props: Props) => { {/* Tappable Action Cards */} - - + + {lstrings.loan_actions_title} {isActionProgramRunning ? ( diff --git a/src/components/scenes/Loans/LoanManageScene.tsx b/src/components/scenes/Loans/LoanManageScene.tsx index 5d1d0371b1c..e0ceb61de22 100644 --- a/src/components/scenes/Loans/LoanManageScene.tsx +++ b/src/components/scenes/Loans/LoanManageScene.tsx @@ -425,7 +425,7 @@ export const LoanManageSceneComponent = (props: Props) => { } > - + { /> {isShowAprChange ? : null} {manageActionData.srcDestCard} - + - + } text={walletName} /> {lstrings.managetokens_top_instructions} ((props, ref) => ( - + )) /** diff --git a/src/components/themed/SearchFooter.tsx b/src/components/themed/SearchFooter.tsx index 992918f790e..fc7e0b6fcd3 100644 --- a/src/components/themed/SearchFooter.tsx +++ b/src/components/themed/SearchFooter.tsx @@ -101,7 +101,7 @@ export const SearchFooter = (props: SearchFooterProps) => { sceneWrapperInfo={sceneWrapperInfo} onLayoutHeight={handleFooterLayoutHeight} > - + + const spacing = const renderButton = (type: ButtonTypeUi4, buttonProps?: ButtonInfo, index: number = 0) => { if (buttonProps == null) return null diff --git a/src/components/ui4/SupportCardUi4.tsx b/src/components/ui4/SupportCardUi4.tsx index 05dd4f255cf..9f5d3a24f44 100644 --- a/src/components/ui4/SupportCardUi4.tsx +++ b/src/components/ui4/SupportCardUi4.tsx @@ -27,7 +27,7 @@ export function SupportCardUi4(props: Props) { return ( - + {title} diff --git a/src/hooks/useSpaceStyle.ts b/src/hooks/useSpaceStyle.ts index 8d50878ad72..dd93afa95e0 100644 --- a/src/hooks/useSpaceStyle.ts +++ b/src/hooks/useSpaceStyle.ts @@ -26,32 +26,27 @@ export interface SpaceProps { /** Aligns children to the center vertically */ alignVertical?: boolean - /** - * Space props a simple way to give a component space on the sides around - * the component. You can provide a number to give a specific rem unit of - * space. - * - * `top`, `left`, `bottom`, and `right` props are specific sides of the - * component for which you can assign space. Additionally, `horizontal`, - * `vertical`, and `around` are a combination of two or more sides. - * - * Examples: - * - * ```tsx - * top={1} // 1rem above the component - * around={2} // 1rem around all sides - * horizontal={0.5} // 0.5rem on the left and right sides - * ``` - */ - // Specific: - top?: number - right?: number - bottom?: number - left?: number - // Compound: - around?: number - horizontal?: number - vertical?: number + // + // Rem props: + // + + // Single-sided: + /** Adds rem to the bottom margin side */ + bottomRem?: number + /** Adds rem to the left margin side */ + leftRem?: number + /** Adds rem to the right margin side */ + rightRem?: number + /** Adds rem to the top margin side */ + topRem?: number + + // Multiple-sided: + /** Adds rem to all margin sides */ + aroundRem?: number + /** Adds rem to left and right margin sides */ + horizontalRem?: number + /** Adds rem to top and bottom margin sides */ + verticalRem?: number /* * The `expand` space prop tells a component to expand its size within its @@ -79,7 +74,7 @@ export type SpaceStyle = Pick< export const useSpaceStyle = (props: SpaceProps): SpaceStyle => { const theme = useTheme() - const { around, horizontal, vertical, top, bottom, left, right, expand = false, sideways = false } = props + const { aroundRem, horizontalRem, verticalRem, topRem, bottomRem, leftRem, rightRem, expand = false, sideways = false } = props const { alignBottom, alignLeft, alignRight, alignTop, alignCenter, alignHorizontal, alignVertical } = props const topFill = boolify(alignBottom, alignVertical, alignCenter) @@ -87,10 +82,10 @@ export const useSpaceStyle = (props: SpaceProps): SpaceStyle => { const leftFill = boolify(alignRight, alignHorizontal, alignCenter) const rightFill = boolify(alignLeft, alignHorizontal, alignCenter) - const topUnits = numberify(top, vertical, around) - const bottomUnits = numberify(bottom, vertical, around) - const leftUnits = numberify(left, horizontal, around) - const rightUnits = numberify(right, horizontal, around) + const topUnits = numberify(topRem, verticalRem, aroundRem) + const bottomUnits = numberify(bottomRem, verticalRem, aroundRem) + const leftUnits = numberify(leftRem, horizontalRem, aroundRem) + const rightUnits = numberify(rightRem, horizontalRem, aroundRem) // Margins: const marginTop = theme.rem(topUnits) diff --git a/src/plugins/gui/RewardsCardPlugin.tsx b/src/plugins/gui/RewardsCardPlugin.tsx index 2ec86a09da3..6c7dbf82568 100644 --- a/src/plugins/gui/RewardsCardPlugin.tsx +++ b/src/plugins/gui/RewardsCardPlugin.tsx @@ -119,7 +119,7 @@ export const makeRewardsCardPlugin: FiatPluginFactory = async params => { title: lstrings.delete_card_confirmation_title, message: lstrings.rewards_card_delete_modal_message, children: ( - + ) diff --git a/src/plugins/gui/components/GuiFormField.tsx b/src/plugins/gui/components/GuiFormField.tsx index ee784c52606..47001a23d12 100644 --- a/src/plugins/gui/components/GuiFormField.tsx +++ b/src/plugins/gui/components/GuiFormField.tsx @@ -59,7 +59,7 @@ export const GuiFormField = React.memo((props: Props) => { onBlur={handleBlur} onChangeText={handleChangeText} onFocus={handleFocus} - around={0.5} + aroundRem={0.5} {...textInputProps} /> diff --git a/src/plugins/gui/scenes/FiatPluginEnterAmountScene.tsx b/src/plugins/gui/scenes/FiatPluginEnterAmountScene.tsx index 53d00a9589b..39596bae3b1 100644 --- a/src/plugins/gui/scenes/FiatPluginEnterAmountScene.tsx +++ b/src/plugins/gui/scenes/FiatPluginEnterAmountScene.tsx @@ -186,7 +186,7 @@ export const FiatPluginEnterAmountScene = React.memo((props: Props) => { showSpinner={spinner2} textsizeRem={1.5} value={value2 ?? '0'} - vertical={0.5} + verticalRem={0.5} /> @@ -205,7 +205,7 @@ export const FiatPluginEnterAmountScene = React.memo((props: Props) => { showSpinner={spinner1} textsizeRem={1.5} value={value1 ?? '0'} - vertical={0.5} + verticalRem={0.5} /> {onMax != null ? ( @@ -237,7 +237,7 @@ export const FiatPluginEnterAmountScene = React.memo((props: Props) => { showSpinner={spinner1} textsizeRem={1.5} value={value1 ?? '0'} - vertical={0.5} + verticalRem={0.5} /> @@ -256,7 +256,7 @@ export const FiatPluginEnterAmountScene = React.memo((props: Props) => { showSpinner={spinner2} textsizeRem={1.5} value={value2 ?? '0'} - vertical={0.5} + verticalRem={0.5} /> {onMax != null ? ( diff --git a/src/plugins/gui/scenes/RewardsCardDashboardScene.tsx b/src/plugins/gui/scenes/RewardsCardDashboardScene.tsx index 6ba28e42898..05a9740340c 100644 --- a/src/plugins/gui/scenes/RewardsCardDashboardScene.tsx +++ b/src/plugins/gui/scenes/RewardsCardDashboardScene.tsx @@ -84,7 +84,7 @@ export const RewardsCardDashboardScene = (props: Props) => { setBottomFloatHeight(event.nativeEvent.layout.height)}> - + @@ -134,7 +134,7 @@ export const RewardsCard = (props: RewardsCardProps) => { )} - + {lstrings.purchase_date_label} diff --git a/src/plugins/gui/scenes/RewardsCardWelcomeScene.tsx b/src/plugins/gui/scenes/RewardsCardWelcomeScene.tsx index cde4519c57b..28725b101de 100644 --- a/src/plugins/gui/scenes/RewardsCardWelcomeScene.tsx +++ b/src/plugins/gui/scenes/RewardsCardWelcomeScene.tsx @@ -31,7 +31,7 @@ export const RewardsCardWelcomeScene = (props: Props) => { - + From d85cedb5bea46321be26f8a97fd38dcf30242178 Mon Sep 17 00:00:00 2001 From: Sam Holmes Date: Thu, 23 May 2024 18:02:36 -0700 Subject: [PATCH 5/8] Rename `sideways` prop to `row` --- .../scenes/Loans/LoanDetailsScene.tsx | 4 +-- src/components/themed/SwapInput.tsx | 2 +- src/hooks/useSpaceStyle.ts | 25 +++++++++++-------- .../gui/scenes/RewardsCardDashboardScene.tsx | 6 ++--- 4 files changed, 20 insertions(+), 17 deletions(-) diff --git a/src/components/scenes/Loans/LoanDetailsScene.tsx b/src/components/scenes/Loans/LoanDetailsScene.tsx index 400126d8524..d2f2dc6c22c 100644 --- a/src/components/scenes/Loans/LoanDetailsScene.tsx +++ b/src/components/scenes/Loans/LoanDetailsScene.tsx @@ -119,7 +119,7 @@ export const LoanDetailsSceneComponent = (props: Props) => { return ( handleProgramStatusCardPress(runningProgramEdge)}> - + {runningProgramMessage} @@ -250,7 +250,7 @@ export const LoanDetailsSceneComponent = (props: Props) => { const aprText = sprintf(lstrings.loan_apr_s, toPercentString(debt.apr)) return ( - + diff --git a/src/components/themed/SwapInput.tsx b/src/components/themed/SwapInput.tsx index 6001e990831..fa92e864cf2 100644 --- a/src/components/themed/SwapInput.tsx +++ b/src/components/themed/SwapInput.tsx @@ -204,7 +204,7 @@ const SwapInputComponent = React.forwardRef((props return (
{heading} - + {walletPlaceholderText} diff --git a/src/hooks/useSpaceStyle.ts b/src/hooks/useSpaceStyle.ts index dd93afa95e0..619f4907ee0 100644 --- a/src/hooks/useSpaceStyle.ts +++ b/src/hooks/useSpaceStyle.ts @@ -55,16 +55,19 @@ export interface SpaceProps { */ expand?: boolean - /* - * The `sideways` prop is an additional, non-space props useful managing the + /** + * Changes the orientation of child component layout from column + * (top-to-bottom) to row (left-to-right). + * + * The `row` prop is an additional, non-space props useful managing the * stacking direction of child components. By default, child components stack - * vertically (column-based), from top to bottom. If `sideways={true}`, then + * vertically (column-based), from top to bottom. If `row={true}`, then * child components stack horizontally (row-based). - * The `sideways` prop does not affect the space properties in anyway (i.e. - * vertical is always vertical regardless of the value set for the `sideways` - * prop). + * + * The `row` prop does not affect the alignment or rem props (i.e. vertical + * is always vertical regardless of the value set for the `row` prop). */ - sideways?: boolean + row?: boolean } export type SpaceStyle = Pick< @@ -74,7 +77,7 @@ export type SpaceStyle = Pick< export const useSpaceStyle = (props: SpaceProps): SpaceStyle => { const theme = useTheme() - const { aroundRem, horizontalRem, verticalRem, topRem, bottomRem, leftRem, rightRem, expand = false, sideways = false } = props + const { aroundRem, horizontalRem, verticalRem, topRem, bottomRem, leftRem, rightRem, expand = false, row = false } = props const { alignBottom, alignLeft, alignRight, alignTop, alignCenter, alignHorizontal, alignVertical } = props const topFill = boolify(alignBottom, alignVertical, alignCenter) @@ -94,13 +97,13 @@ export const useSpaceStyle = (props: SpaceProps): SpaceStyle => { const marginRight = theme.rem(rightUnits) // Direction: - const flexDirection = sideways ? 'row' : 'column' + const flexDirection = row ? 'row' : 'column' // Alignment: const horizontalAlignment = leftFill && rightFill ? 'center' : rightFill ? 'flex-start' : leftFill ? 'flex-end' : undefined const verticalAlignment = topFill && bottomFill ? 'center' : bottomFill ? 'flex-start' : topFill ? 'flex-end' : undefined - const alignItems = sideways ? verticalAlignment : horizontalAlignment - const justifyContent = sideways ? horizontalAlignment ?? (expand ? 'space-between' : undefined) : verticalAlignment + const alignItems = row ? verticalAlignment : horizontalAlignment + const justifyContent = row ? horizontalAlignment ?? (expand ? 'space-between' : undefined) : verticalAlignment // Flex: const flex = expand ? 1 : undefined diff --git a/src/plugins/gui/scenes/RewardsCardDashboardScene.tsx b/src/plugins/gui/scenes/RewardsCardDashboardScene.tsx index 05a9740340c..6008087a278 100644 --- a/src/plugins/gui/scenes/RewardsCardDashboardScene.tsx +++ b/src/plugins/gui/scenes/RewardsCardDashboardScene.tsx @@ -118,7 +118,7 @@ export const RewardsCard = (props: RewardsCardProps) => { > - + {onPress == null ? null : } @@ -134,7 +134,7 @@ export const RewardsCard = (props: RewardsCardProps) => { )} - + {lstrings.purchase_date_label} @@ -150,7 +150,7 @@ export const RewardsCard = (props: RewardsCardProps) => { - + {lstrings.string_expires} From f8729933d857b8effd8e807cd678772aa5e2bbe6 Mon Sep 17 00:00:00 2001 From: Sam Holmes Date: Mon, 27 May 2024 13:59:44 -0700 Subject: [PATCH 6/8] Change `expand` to do `alignSelf` in addition to `flexGrow` --- .../__snapshots__/BalanceCard.test.tsx.snap | 3 +- .../__snapshots__/Buttons.test.tsx.snap | 36 ++++++++++++------- .../FilledTextInput.test.tsx.snap | 3 +- .../__snapshots__/CategoryModal.test.tsx.snap | 6 ++-- .../CountryListModal.test.tsx.snap | 3 +- .../__snapshots__/LogsModal.test.tsx.snap | 3 +- .../TextInputModal.test.tsx.snap | 6 ++-- .../WalletListModal.test.tsx.snap | 3 +- ...reateWalletAccountSetupScene.test.tsx.snap | 3 +- .../CreateWalletImportScene.test.tsx.snap | 3 +- ...reateWalletSelectCryptoScene.test.tsx.snap | 3 +- .../CreateWalletSelectFiatScene.test.tsx.snap | 3 +- .../__snapshots__/SettingsScene.test.tsx.snap | 6 ++-- src/hooks/useSpaceStyle.ts | 24 +++++++------ 14 files changed, 68 insertions(+), 37 deletions(-) diff --git a/src/__tests__/components/__snapshots__/BalanceCard.test.tsx.snap b/src/__tests__/components/__snapshots__/BalanceCard.test.tsx.snap index fcfa58824d3..ea5f2635011 100644 --- a/src/__tests__/components/__snapshots__/BalanceCard.test.tsx.snap +++ b/src/__tests__/components/__snapshots__/BalanceCard.test.tsx.snap @@ -307,8 +307,9 @@ exports[`BalanceCard should render with loading props 1`] = ` style={ { "alignItems": undefined, - "flex": undefined, + "alignSelf": undefined, "flexDirection": "column", + "flexGrow": undefined, "justifyContent": undefined, "marginBottom": 11, "marginLeft": 11, diff --git a/src/__tests__/components/__snapshots__/Buttons.test.tsx.snap b/src/__tests__/components/__snapshots__/Buttons.test.tsx.snap index 4a39df3c78c..72bc219f4b9 100644 --- a/src/__tests__/components/__snapshots__/Buttons.test.tsx.snap +++ b/src/__tests__/components/__snapshots__/Buttons.test.tsx.snap @@ -137,8 +137,9 @@ exports[`Buttons should render in a ButtonsView in a column layout in a flex:1 V style={ { "alignItems": undefined, - "flex": undefined, + "alignSelf": undefined, "flexDirection": "column", + "flexGrow": undefined, "justifyContent": undefined, "marginBottom": 11, "marginLeft": 11, @@ -264,8 +265,9 @@ exports[`Buttons should render in a ButtonsView in a column layout in a flex:1 V style={ { "alignItems": undefined, - "flex": undefined, + "alignSelf": undefined, "flexDirection": "column", + "flexGrow": undefined, "justifyContent": undefined, "marginBottom": 11, "marginLeft": 11, @@ -650,8 +652,9 @@ exports[`Buttons should render in a ButtonsView in a column layout with 1 button style={ { "alignItems": undefined, - "flex": undefined, + "alignSelf": undefined, "flexDirection": "column", + "flexGrow": undefined, "justifyContent": undefined, "marginBottom": 11, "marginLeft": 11, @@ -906,8 +909,9 @@ exports[`Buttons should render in a ButtonsView in a column layout with 2 button style={ { "alignItems": undefined, - "flex": undefined, + "alignSelf": undefined, "flexDirection": "column", + "flexGrow": undefined, "justifyContent": undefined, "marginBottom": 11, "marginLeft": 11, @@ -1162,8 +1166,9 @@ exports[`Buttons should render in a ButtonsView in a column layout with 3 button style={ { "alignItems": undefined, - "flex": undefined, + "alignSelf": undefined, "flexDirection": "column", + "flexGrow": undefined, "justifyContent": undefined, "marginBottom": 11, "marginLeft": 11, @@ -1289,8 +1294,9 @@ exports[`Buttons should render in a ButtonsView in a column layout with 3 button style={ { "alignItems": undefined, - "flex": undefined, + "alignSelf": undefined, "flexDirection": "column", + "flexGrow": undefined, "justifyContent": undefined, "marginBottom": 11, "marginLeft": 11, @@ -1554,8 +1560,9 @@ exports[`Buttons should render in a ButtonsView in a row layout in a flex:1 View style={ { "alignItems": undefined, - "flex": undefined, + "alignSelf": undefined, "flexDirection": "column", + "flexGrow": undefined, "justifyContent": undefined, "marginBottom": 11, "marginLeft": 11, @@ -1679,8 +1686,9 @@ exports[`Buttons should render in a ButtonsView in a row layout in a flex:1 View style={ { "alignItems": undefined, - "flex": undefined, + "alignSelf": undefined, "flexDirection": "column", + "flexGrow": undefined, "justifyContent": undefined, "marginBottom": 11, "marginLeft": 11, @@ -2061,8 +2069,9 @@ exports[`Buttons should render in a ButtonsView in a row layout with 1 buttons 1 style={ { "alignItems": undefined, - "flex": undefined, + "alignSelf": undefined, "flexDirection": "column", + "flexGrow": undefined, "justifyContent": undefined, "marginBottom": 11, "marginLeft": 11, @@ -2314,8 +2323,9 @@ exports[`Buttons should render in a ButtonsView in a row layout with 2 buttons 1 style={ { "alignItems": undefined, - "flex": undefined, + "alignSelf": undefined, "flexDirection": "column", + "flexGrow": undefined, "justifyContent": undefined, "marginBottom": 11, "marginLeft": 11, @@ -2567,8 +2577,9 @@ exports[`Buttons should render in a ButtonsView in a row layout with 3 buttons 1 style={ { "alignItems": undefined, - "flex": undefined, + "alignSelf": undefined, "flexDirection": "column", + "flexGrow": undefined, "justifyContent": undefined, "marginBottom": 11, "marginLeft": 11, @@ -2692,8 +2703,9 @@ exports[`Buttons should render in a ButtonsView in a row layout with 3 buttons 1 style={ { "alignItems": undefined, - "flex": undefined, + "alignSelf": undefined, "flexDirection": "column", + "flexGrow": undefined, "justifyContent": undefined, "marginBottom": 11, "marginLeft": 11, diff --git a/src/__tests__/components/__snapshots__/FilledTextInput.test.tsx.snap b/src/__tests__/components/__snapshots__/FilledTextInput.test.tsx.snap index e1c52b2308b..6c757d1fb27 100644 --- a/src/__tests__/components/__snapshots__/FilledTextInput.test.tsx.snap +++ b/src/__tests__/components/__snapshots__/FilledTextInput.test.tsx.snap @@ -5,8 +5,9 @@ exports[`FilledTextInput should render with some props 1`] = ` style={ { "alignItems": undefined, - "flex": undefined, + "alignSelf": undefined, "flexDirection": "column", + "flexGrow": undefined, "justifyContent": undefined, "marginBottom": 0, "marginLeft": 0, diff --git a/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap index 203af11c4e5..b746979b60f 100644 --- a/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap +++ b/src/__tests__/modals/__snapshots__/CategoryModal.test.tsx.snap @@ -405,8 +405,9 @@ exports[`CategoryModal should render with a subcategory 1`] = ` style={ { "alignItems": undefined, - "flex": undefined, + "alignSelf": undefined, "flexDirection": "column", + "flexGrow": undefined, "justifyContent": undefined, "marginBottom": 11, "marginLeft": 11, @@ -1785,8 +1786,9 @@ exports[`CategoryModal should render with an empty subcategory 1`] = ` style={ { "alignItems": undefined, - "flex": undefined, + "alignSelf": undefined, "flexDirection": "column", + "flexGrow": undefined, "justifyContent": undefined, "marginBottom": 11, "marginLeft": 11, diff --git a/src/__tests__/modals/__snapshots__/CountryListModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/CountryListModal.test.tsx.snap index 7507cb23e73..a9bdcde3444 100644 --- a/src/__tests__/modals/__snapshots__/CountryListModal.test.tsx.snap +++ b/src/__tests__/modals/__snapshots__/CountryListModal.test.tsx.snap @@ -146,8 +146,9 @@ exports[`CountryListModal should render with a country list 1`] = ` style={ { "alignItems": undefined, - "flex": undefined, + "alignSelf": undefined, "flexDirection": "column", + "flexGrow": undefined, "justifyContent": undefined, "marginBottom": 11, "marginLeft": 11, diff --git a/src/__tests__/modals/__snapshots__/LogsModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/LogsModal.test.tsx.snap index 03bb7478d1b..dcf68fd1378 100644 --- a/src/__tests__/modals/__snapshots__/LogsModal.test.tsx.snap +++ b/src/__tests__/modals/__snapshots__/LogsModal.test.tsx.snap @@ -197,8 +197,9 @@ exports[`LogsModal should render with a logs modal 1`] = ` style={ { "alignItems": undefined, - "flex": undefined, + "alignSelf": undefined, "flexDirection": "column", + "flexGrow": undefined, "justifyContent": undefined, "marginBottom": 11, "marginLeft": 11, diff --git a/src/__tests__/modals/__snapshots__/TextInputModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/TextInputModal.test.tsx.snap index 81026b6300e..b5c697ae1d8 100644 --- a/src/__tests__/modals/__snapshots__/TextInputModal.test.tsx.snap +++ b/src/__tests__/modals/__snapshots__/TextInputModal.test.tsx.snap @@ -170,8 +170,9 @@ exports[`TextInputModal should render with a blank input field 1`] = ` style={ { "alignItems": undefined, - "flex": undefined, + "alignSelf": undefined, "flexDirection": "column", + "flexGrow": undefined, "justifyContent": undefined, "marginBottom": 11, "marginLeft": 11, @@ -714,8 +715,9 @@ exports[`TextInputModal should render with a populated input field 1`] = ` style={ { "alignItems": undefined, - "flex": undefined, + "alignSelf": undefined, "flexDirection": "column", + "flexGrow": undefined, "justifyContent": undefined, "marginBottom": 11, "marginLeft": 11, diff --git a/src/__tests__/modals/__snapshots__/WalletListModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/WalletListModal.test.tsx.snap index d37fda6881d..574540db388 100644 --- a/src/__tests__/modals/__snapshots__/WalletListModal.test.tsx.snap +++ b/src/__tests__/modals/__snapshots__/WalletListModal.test.tsx.snap @@ -206,8 +206,9 @@ exports[`WalletListModal should render with loading props 1`] = ` [ { "alignItems": undefined, - "flex": undefined, + "alignSelf": undefined, "flexDirection": "column", + "flexGrow": undefined, "justifyContent": undefined, "marginBottom": 11, "marginLeft": 11, diff --git a/src/__tests__/scenes/__snapshots__/CreateWalletAccountSetupScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/CreateWalletAccountSetupScene.test.tsx.snap index f2218c44521..c22217adb7c 100644 --- a/src/__tests__/scenes/__snapshots__/CreateWalletAccountSetupScene.test.tsx.snap +++ b/src/__tests__/scenes/__snapshots__/CreateWalletAccountSetupScene.test.tsx.snap @@ -358,8 +358,9 @@ exports[`CreateWalletAccountSelect renders 1`] = ` style={ { "alignItems": undefined, - "flex": undefined, + "alignSelf": undefined, "flexDirection": "column", + "flexGrow": undefined, "justifyContent": undefined, "marginBottom": 45, "marginLeft": 22, diff --git a/src/__tests__/scenes/__snapshots__/CreateWalletImportScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/CreateWalletImportScene.test.tsx.snap index 6c97aea4326..609fa521d4e 100644 --- a/src/__tests__/scenes/__snapshots__/CreateWalletImportScene.test.tsx.snap +++ b/src/__tests__/scenes/__snapshots__/CreateWalletImportScene.test.tsx.snap @@ -338,8 +338,9 @@ exports[`CreateWalletImportScene should render with loading props 1`] = ` style={ { "alignItems": undefined, - "flex": undefined, + "alignSelf": undefined, "flexDirection": "column", + "flexGrow": undefined, "justifyContent": undefined, "marginBottom": 11, "marginLeft": 11, diff --git a/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap index 5ab71e9a0f1..86cccdae7b6 100644 --- a/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap +++ b/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap @@ -344,8 +344,9 @@ exports[`CreateWalletSelectCrypto should render with loading props 1`] = ` [ { "alignItems": undefined, - "flex": undefined, + "alignSelf": undefined, "flexDirection": "column", + "flexGrow": undefined, "justifyContent": undefined, "marginBottom": 11, "marginLeft": 22, diff --git a/src/__tests__/scenes/__snapshots__/CreateWalletSelectFiatScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/CreateWalletSelectFiatScene.test.tsx.snap index 562513f7286..0d7f63752c0 100644 --- a/src/__tests__/scenes/__snapshots__/CreateWalletSelectFiatScene.test.tsx.snap +++ b/src/__tests__/scenes/__snapshots__/CreateWalletSelectFiatScene.test.tsx.snap @@ -1268,8 +1268,9 @@ exports[`CreateWalletSelectFiatComponent should render with loading props 1`] = style={ { "alignItems": undefined, - "flex": undefined, + "alignSelf": undefined, "flexDirection": "column", + "flexGrow": undefined, "justifyContent": undefined, "marginBottom": 11, "marginLeft": 11, diff --git a/src/__tests__/scenes/__snapshots__/SettingsScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/SettingsScene.test.tsx.snap index 481279c59ee..d7338ef1fd4 100644 --- a/src/__tests__/scenes/__snapshots__/SettingsScene.test.tsx.snap +++ b/src/__tests__/scenes/__snapshots__/SettingsScene.test.tsx.snap @@ -3659,8 +3659,9 @@ exports[`MyComponent should render Locked SettingsOverview 1`] = ` style={ { "alignItems": undefined, - "flex": undefined, + "alignSelf": undefined, "flexDirection": "column", + "flexGrow": undefined, "justifyContent": undefined, "marginBottom": 11, "marginLeft": 11, @@ -7447,8 +7448,9 @@ exports[`MyComponent should render UnLocked SettingsOverview 1`] = ` style={ { "alignItems": undefined, - "flex": undefined, + "alignSelf": undefined, "flexDirection": "column", + "flexGrow": undefined, "justifyContent": undefined, "marginBottom": 11, "marginLeft": 11, diff --git a/src/hooks/useSpaceStyle.ts b/src/hooks/useSpaceStyle.ts index 619f4907ee0..a208bf43b7c 100644 --- a/src/hooks/useSpaceStyle.ts +++ b/src/hooks/useSpaceStyle.ts @@ -48,10 +48,12 @@ export interface SpaceProps { /** Adds rem to top and bottom margin sides */ verticalRem?: number - /* + /** * The `expand` space prop tells a component to expand its size within its - * parent component. This is sometimes useful when you want to use the space - * props to align the component. + * parent component. + * + * This is particularly useful when you want to use the space props to + * align the component. */ expand?: boolean @@ -106,20 +108,22 @@ export const useSpaceStyle = (props: SpaceProps): SpaceStyle => { const justifyContent = row ? horizontalAlignment ?? (expand ? 'space-between' : undefined) : verticalAlignment // Flex: - const flex = expand ? 1 : undefined + const alignSelf = expand ? 'stretch' : undefined + const flexGrow = expand ? 1 : undefined const style: SpaceStyle = useMemo( () => ({ + alignSelf, + alignItems, + flexGrow, + flexDirection, + justifyContent, marginTop, marginBottom, marginLeft, - marginRight, - flex, - flexDirection, - alignItems, - justifyContent + marginRight }), - [alignItems, flex, flexDirection, justifyContent, marginBottom, marginLeft, marginRight, marginTop] + [alignItems, alignSelf, flexDirection, flexGrow, justifyContent, marginBottom, marginLeft, marginRight, marginTop] ) return style From c607ea41f46bf39be0d0b6fb0b30fff75425e5f1 Mon Sep 17 00:00:00 2001 From: Sam Holmes Date: Thu, 23 May 2024 19:09:03 -0700 Subject: [PATCH 7/8] Factor out margin rem props into useMarginRemStyle hook --- .../FilledTextInput.test.tsx.snap | 5 -- .../__snapshots__/CategoryModal.test.tsx.snap | 10 ---- .../CountryListModal.test.tsx.snap | 5 -- .../__snapshots__/LogsModal.test.tsx.snap | 5 -- .../TextInputModal.test.tsx.snap | 10 ---- .../WalletListModal.test.tsx.snap | 16 ++---- ...reateWalletAccountSetupScene.test.tsx.snap | 5 -- .../CreateWalletImportScene.test.tsx.snap | 5 -- ...reateWalletSelectCryptoScene.test.tsx.snap | 17 ++---- src/components/themed/FilledTextInput.tsx | 12 ++-- src/components/themed/SimpleTextInput.tsx | 22 +++---- src/hooks/useMarginRemStyle.ts | 54 ++++++++++++++++++ src/hooks/useSpaceStyle.ts | 57 ++----------------- 13 files changed, 89 insertions(+), 134 deletions(-) create mode 100644 src/hooks/useMarginRemStyle.ts diff --git a/src/__tests__/components/__snapshots__/FilledTextInput.test.tsx.snap b/src/__tests__/components/__snapshots__/FilledTextInput.test.tsx.snap index 6c757d1fb27..279d190ec3f 100644 --- a/src/__tests__/components/__snapshots__/FilledTextInput.test.tsx.snap +++ b/src/__tests__/components/__snapshots__/FilledTextInput.test.tsx.snap @@ -4,11 +4,6 @@ exports[`FilledTextInput should render with some props 1`] = ` +export type ModalFilledTextInputProps = Omit /** * FilledTextInput with standard `around=0.5` UI4 margins, for use in modals @@ -149,7 +149,7 @@ export const FilledTextInput = React.forwardRef + focus()}> {LeftIcon == null ? null : } diff --git a/src/components/themed/SimpleTextInput.tsx b/src/components/themed/SimpleTextInput.tsx index d1a94039e6b..039494fbc20 100644 --- a/src/components/themed/SimpleTextInput.tsx +++ b/src/components/themed/SimpleTextInput.tsx @@ -14,7 +14,7 @@ import Animated, { } from 'react-native-reanimated' import { useHandler } from '../../hooks/useHandler' -import { SpaceProps, useSpaceStyle } from '../../hooks/useSpaceStyle' +import { MarginRemProps, useMarginRemStyle } from '../../hooks/useMarginRemStyle' import { EdgeTouchableWithoutFeedback } from '../common/EdgeTouchableWithoutFeedback' import { styled, styledWithRef } from '../hoc/styled' import { AnimatedIconComponent, ChevronBackAnimated, CloseIconAnimated } from '../icons/ThemedIcons' @@ -24,7 +24,7 @@ const AnimatedTextInput = Animated.createAnimatedComponent(TextInput) export type SimpleTextInputReturnKeyType = 'done' | 'go' | 'next' | 'search' | 'send' // Defaults to 'done' -export interface SimpleTextInputProps extends SpaceProps { +export interface SimpleTextInputProps extends MarginRemProps { // Contents: value: string placeholder?: string @@ -99,10 +99,12 @@ export const SimpleTextInput = React.forwardRef focus()}> - + {Icon == null ? null : } @@ -198,8 +200,8 @@ export const SimpleTextInput = React.forwardRef focusAnimation: SharedValue scale: SharedValue - spaceProps: SpaceProps -}>(theme => ({ disableAnimation, focusAnimation, scale, spaceProps }) => { + marginRemProps: MarginRemProps +}>(theme => ({ disableAnimation, focusAnimation, scale, marginRemProps }) => { const interpolateInputBackgroundColor = useAnimatedColorInterpolateFn( theme.textInputBackgroundColor, theme.textInputBackgroundColorFocused, @@ -256,10 +258,10 @@ const InputContainerView = styled(Animated.View)<{ theme.textInputBorderColorFocused, theme.textInputBorderColorDisabled ) - const spaceStyle = useSpaceStyle(spaceProps) + const marginRemStyle = useMarginRemStyle(marginRemProps) return [ - spaceStyle, + marginRemStyle, { alignItems: 'center', borderWidth: theme.textInputBorderWidth, diff --git a/src/hooks/useMarginRemStyle.ts b/src/hooks/useMarginRemStyle.ts new file mode 100644 index 00000000000..0e69cb0452b --- /dev/null +++ b/src/hooks/useMarginRemStyle.ts @@ -0,0 +1,54 @@ +import { useMemo } from 'react' +import { ViewStyle } from 'react-native' + +import { useTheme } from '../components/services/ThemeContext' + +export interface MarginRemProps { + // Single-sided: + /** Adds rem to the bottom margin side */ + bottomRem?: number + /** Adds rem to the left margin side */ + leftRem?: number + /** Adds rem to the right margin side */ + rightRem?: number + /** Adds rem to the top margin side */ + topRem?: number + + // Multiple-sided: + /** Adds rem to all margin sides */ + aroundRem?: number + /** Adds rem to left and right margin sides */ + horizontalRem?: number + /** Adds rem to top and bottom margin sides */ + verticalRem?: number +} + +export type MarginRemStyle = Pick + +export const useMarginRemStyle = (props: MarginRemProps): MarginRemStyle => { + const theme = useTheme() + const { aroundRem, horizontalRem, verticalRem, topRem, bottomRem, leftRem, rightRem } = props + + const topUnits = topRem ?? verticalRem ?? aroundRem ?? 0 + const bottomUnits = bottomRem ?? verticalRem ?? aroundRem ?? 0 + const leftUnits = leftRem ?? horizontalRem ?? aroundRem ?? 0 + const rightUnits = rightRem ?? horizontalRem ?? aroundRem ?? 0 + + // Margins: + const marginTop = theme.rem(topUnits) + const marginBottom = theme.rem(bottomUnits) + const marginLeft = theme.rem(leftUnits) + const marginRight = theme.rem(rightUnits) + + const style: MarginRemStyle = useMemo( + () => ({ + marginTop, + marginBottom, + marginLeft, + marginRight + }), + [marginBottom, marginLeft, marginRight, marginTop] + ) + + return style +} diff --git a/src/hooks/useSpaceStyle.ts b/src/hooks/useSpaceStyle.ts index a208bf43b7c..7514a4be1df 100644 --- a/src/hooks/useSpaceStyle.ts +++ b/src/hooks/useSpaceStyle.ts @@ -1,9 +1,9 @@ import { useMemo } from 'react' import { ViewStyle } from 'react-native' -import { useTheme } from '../components/services/ThemeContext' +import { MarginRemProps, MarginRemStyle, useMarginRemStyle } from './useMarginRemStyle' -export interface SpaceProps { +export interface SpaceProps extends MarginRemProps { // // Alignment props: // @@ -26,28 +26,6 @@ export interface SpaceProps { /** Aligns children to the center vertically */ alignVertical?: boolean - // - // Rem props: - // - - // Single-sided: - /** Adds rem to the bottom margin side */ - bottomRem?: number - /** Adds rem to the left margin side */ - leftRem?: number - /** Adds rem to the right margin side */ - rightRem?: number - /** Adds rem to the top margin side */ - topRem?: number - - // Multiple-sided: - /** Adds rem to all margin sides */ - aroundRem?: number - /** Adds rem to left and right margin sides */ - horizontalRem?: number - /** Adds rem to top and bottom margin sides */ - verticalRem?: number - /** * The `expand` space prop tells a component to expand its size within its * parent component. @@ -72,13 +50,9 @@ export interface SpaceProps { row?: boolean } -export type SpaceStyle = Pick< - ViewStyle, - 'marginTop' | 'marginBottom' | 'marginLeft' | 'marginRight' | 'flex' | 'flexDirection' | 'alignItems' | 'justifyContent' -> +export type SpaceStyle = Pick & MarginRemStyle export const useSpaceStyle = (props: SpaceProps): SpaceStyle => { - const theme = useTheme() const { aroundRem, horizontalRem, verticalRem, topRem, bottomRem, leftRem, rightRem, expand = false, row = false } = props const { alignBottom, alignLeft, alignRight, alignTop, alignCenter, alignHorizontal, alignVertical } = props @@ -87,16 +61,8 @@ export const useSpaceStyle = (props: SpaceProps): SpaceStyle => { const leftFill = boolify(alignRight, alignHorizontal, alignCenter) const rightFill = boolify(alignLeft, alignHorizontal, alignCenter) - const topUnits = numberify(topRem, verticalRem, aroundRem) - const bottomUnits = numberify(bottomRem, verticalRem, aroundRem) - const leftUnits = numberify(leftRem, horizontalRem, aroundRem) - const rightUnits = numberify(rightRem, horizontalRem, aroundRem) - // Margins: - const marginTop = theme.rem(topUnits) - const marginBottom = theme.rem(bottomUnits) - const marginLeft = theme.rem(leftUnits) - const marginRight = theme.rem(rightUnits) + const marginRemStyle = useMarginRemStyle({ bottomRem, leftRem, rightRem, topRem, aroundRem, horizontalRem, verticalRem }) // Direction: const flexDirection = row ? 'row' : 'column' @@ -118,25 +84,14 @@ export const useSpaceStyle = (props: SpaceProps): SpaceStyle => { flexGrow, flexDirection, justifyContent, - marginTop, - marginBottom, - marginLeft, - marginRight + ...marginRemStyle }), - [alignItems, alignSelf, flexDirection, flexGrow, justifyContent, marginBottom, marginLeft, marginRight, marginTop] + [alignItems, alignSelf, flexDirection, flexGrow, justifyContent, marginRemStyle] ) return style } -const numberify = (...things: Array): number => { - for (const thing of things) { - if (typeof thing === 'number') { - return thing - } - } - return 0 -} const boolify = (...things: Array): boolean => { return things.some(thing => { return typeof thing === 'boolean' && thing From 0429cbd6a2c5f7826be1b9875995a30bbe48cfaa Mon Sep 17 00:00:00 2001 From: Sam Holmes Date: Thu, 23 May 2024 19:13:11 -0700 Subject: [PATCH 8/8] Inline useSpaceStyle implementation into Space component --- src/components/layout/Space.tsx | 100 ++++++++++++++++++++++++++++---- 1 file changed, 90 insertions(+), 10 deletions(-) diff --git a/src/components/layout/Space.tsx b/src/components/layout/Space.tsx index d285f983e67..61ed27ead9a 100644 --- a/src/components/layout/Space.tsx +++ b/src/components/layout/Space.tsx @@ -1,20 +1,100 @@ import * as React from 'react' -import { View } from 'react-native' +import { useMemo } from 'react' +import { View, ViewStyle } from 'react-native' -import { SpaceProps, useSpaceStyle } from '../../hooks/useSpaceStyle' +import { MarginRemProps, MarginRemStyle, useMarginRemStyle } from '../../hooks/useMarginRemStyle' -interface OwnProps { +export interface SpaceProps extends MarginRemProps { + // Single-sided: + /** Align children to the top */ + alignBottom?: boolean + /** Align children to the top */ + alignLeft?: boolean + /** Align children to the right */ + alignRight?: boolean + /** Align children to the top */ + alignTop?: boolean + + // Multiple-sided: + /** Aligns children to the center */ + alignCenter?: boolean + /** Aligns children to the center horizontally */ + alignHorizontal?: boolean + /** Aligns children to the center vertically */ + alignVertical?: boolean + + // Children: children?: React.ReactNode + + /** + * The `expand` space prop tells a component to expand its size within its + * parent component. + * + * This is particularly useful when you want to use the space props to + * align the component. + */ + expand?: boolean + + /** + * Changes the orientation of child component layout from column + * (top-to-bottom) to row (left-to-right). + * + * The `row` prop is an additional, non-space props useful managing the + * stacking direction of child components. By default, child components stack + * vertically (column-based), from top to bottom. If `row={true}`, then + * child components stack horizontally (row-based). + * + * The `row` prop does not affect the alignment or rem props (i.e. vertical + * is always vertical regardless of the value set for the `row` prop). + */ + row?: boolean } -type Props = OwnProps & SpaceProps -/** - * Numbers are rem units, and boolean means to fill up assigned space; this - * allows for centering and alignment (see useSpaceStyle hook for details). - */ -export const Space = React.memo((props: Props) => { +type SpaceStyle = Pick & MarginRemStyle + +export const Space = React.memo((props: SpaceProps) => { const { children } = props - const spaceStyle = useSpaceStyle(props) + const { aroundRem, horizontalRem, verticalRem, topRem, bottomRem, leftRem, rightRem, expand = false, row = false } = props + const { alignBottom, alignLeft, alignRight, alignTop, alignCenter, alignHorizontal, alignVertical } = props + + const topFill = boolify(alignBottom, alignVertical, alignCenter) + const bottomFill = boolify(alignTop, alignVertical, alignCenter) + const leftFill = boolify(alignRight, alignHorizontal, alignCenter) + const rightFill = boolify(alignLeft, alignHorizontal, alignCenter) + + // Margins: + const marginRemStyle = useMarginRemStyle({ bottomRem, leftRem, rightRem, topRem, aroundRem, horizontalRem, verticalRem }) + + // Direction: + const flexDirection = row ? 'row' : 'column' + + // Alignment: + const horizontalAlignment = leftFill && rightFill ? 'center' : rightFill ? 'flex-start' : leftFill ? 'flex-end' : undefined + const verticalAlignment = topFill && bottomFill ? 'center' : bottomFill ? 'flex-start' : topFill ? 'flex-end' : undefined + const alignItems = row ? verticalAlignment : horizontalAlignment + const justifyContent = row ? horizontalAlignment ?? (expand ? 'space-between' : undefined) : verticalAlignment + + // Flex: + const alignSelf = expand ? 'stretch' : undefined + const flexGrow = expand ? 1 : undefined + + const spaceStyle: SpaceStyle = useMemo( + () => ({ + alignSelf, + alignItems, + flexGrow, + flexDirection, + justifyContent, + ...marginRemStyle + }), + [alignItems, alignSelf, flexDirection, flexGrow, justifyContent, marginRemStyle] + ) return {children} }) + +const boolify = (...things: Array): boolean => { + return things.some(thing => { + return typeof thing === 'boolean' && thing + }) +}