diff --git a/package-lock.json b/package-lock.json index f6bcbf134f3..0748e976882 100644 --- a/package-lock.json +++ b/package-lock.json @@ -75,6 +75,7 @@ "react-dropzone": "^14.2.1", "react-helmet-async": "^2.0.3", "react-hook-form": "^7.45.2", + "react-intersection-observer": "^9.8.2", "react-intl": "^6.6.1", "react-modal": "^3.15.1", "react-popper": "^2.3.0", @@ -45430,6 +45431,20 @@ "react": "^16.8.0 || ^17 || ^18" } }, + "node_modules/react-intersection-observer": { + "version": "9.8.2", + "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.8.2.tgz", + "integrity": "sha512-901naEiiZmse3p+AmtbQ3NL9xx+gQ8TXLiGDc+8GiE3JKJkNV3vP737aGuWTAXBA+1QqxPrDDE+fIEgYpGDlrQ==", + "peerDependencies": { + "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, "node_modules/react-intl": { "version": "6.6.1", "license": "BSD-3-Clause", diff --git a/package.json b/package.json index 074b1f54739..f5e5ec1b1ef 100644 --- a/package.json +++ b/package.json @@ -205,6 +205,7 @@ "react-dropzone": "^14.2.1", "react-helmet-async": "^2.0.3", "react-hook-form": "^7.45.2", + "react-intersection-observer": "^9.8.2", "react-intl": "^6.6.1", "react-modal": "^3.15.1", "react-popper": "^2.3.0", diff --git a/src/components/common/Extensions/UserHubButton/UserHubButton.tsx b/src/components/common/Extensions/UserHubButton/UserHubButton.tsx index 708183aacd4..8dfc7bcdee1 100644 --- a/src/components/common/Extensions/UserHubButton/UserHubButton.tsx +++ b/src/components/common/Extensions/UserHubButton/UserHubButton.tsx @@ -122,7 +122,7 @@ const UserHubButton: FC = () => { splitWalletAddress(walletAddress ?? ADDRESS_ZERO); return ( -
+
{fileSize} - + ); diff --git a/src/components/v5/common/ObjectiveBox/ObjectiveBox.tsx b/src/components/v5/common/ObjectiveBox/ObjectiveBox.tsx index 13af4e79676..6f74a8ff27f 100644 --- a/src/components/v5/common/ObjectiveBox/ObjectiveBox.tsx +++ b/src/components/v5/common/ObjectiveBox/ObjectiveBox.tsx @@ -37,7 +37,10 @@ const ObjectiveBox: FC = ({ objective }) => { ) : formatMessage(MSG.noObjectiveBoxDescription)}

- + ); }; diff --git a/src/components/v5/frame/ColonyHome/partials/Objective/Objective.tsx b/src/components/v5/frame/ColonyHome/partials/Objective/Objective.tsx index d6ba027e90f..4e50b06d3cd 100644 --- a/src/components/v5/frame/ColonyHome/partials/Objective/Objective.tsx +++ b/src/components/v5/frame/ColonyHome/partials/Objective/Objective.tsx @@ -53,8 +53,7 @@ const Objective = () => {

diff --git a/src/components/v5/shared/MenuWithSections/MenuWithSections.tsx b/src/components/v5/shared/MenuWithSections/MenuWithSections.tsx index a7bd8f7fc98..ca37ba391f0 100644 --- a/src/components/v5/shared/MenuWithSections/MenuWithSections.tsx +++ b/src/components/v5/shared/MenuWithSections/MenuWithSections.tsx @@ -7,11 +7,7 @@ import { type MenuWithSectionsProps } from './types.ts'; const displayName = 'v5.shared.MenuWithSections'; -const MenuWithSections: React.FC = ({ - sections, - footer, - footerClassName, -}) => +const MenuWithSections: React.FC = ({ sections }) => sections.length ? ( {sections.map(({ key, content, className }) => ( @@ -19,17 +15,12 @@ const MenuWithSections: React.FC = ({ key={key} className={clsx( className, - 'border-b border-gray-200 px-[1.125rem] py-3 last:border-b-0', + 'border-b border-gray-200 p-[1.125rem] last:border-b-0', )} > {content} ))} - {footer && ( -
- {footer} -
- )} ) : null; diff --git a/src/components/v5/shared/MenuWithSections/types.ts b/src/components/v5/shared/MenuWithSections/types.ts index 56fd884cfb3..2510ee94c81 100644 --- a/src/components/v5/shared/MenuWithSections/types.ts +++ b/src/components/v5/shared/MenuWithSections/types.ts @@ -6,6 +6,4 @@ export interface MenuWithSectionsItem { export interface MenuWithSectionsProps { sections: MenuWithSectionsItem[]; - footer?: React.ReactNode; - footerClassName?: string; } diff --git a/src/components/v5/shared/MenuWithStatusText/MenuWithStatusText.tsx b/src/components/v5/shared/MenuWithStatusText/MenuWithStatusText.tsx index 89c72aa293b..a0edbc30b75 100644 --- a/src/components/v5/shared/MenuWithStatusText/MenuWithStatusText.tsx +++ b/src/components/v5/shared/MenuWithStatusText/MenuWithStatusText.tsx @@ -10,8 +10,6 @@ const displayName = 'v5.shared.MenuWithStatusText'; const MenuWithStatusText: React.FC = ({ statusTextSectionProps, sections, - footer, - footerClassName, }) => { const { content, ...restStatusTextSectionProps } = statusTextSectionProps; @@ -29,13 +27,7 @@ const MenuWithStatusText: React.FC = ({ ...sections, ]; - return ( - - ); + return ; }; MenuWithStatusText.displayName = displayName; diff --git a/src/components/v5/shared/ProgressBar/ProgressBar.tsx b/src/components/v5/shared/ProgressBar/ProgressBar.tsx index 16015d393c9..6f6f605f334 100644 --- a/src/components/v5/shared/ProgressBar/ProgressBar.tsx +++ b/src/components/v5/shared/ProgressBar/ProgressBar.tsx @@ -5,19 +5,20 @@ import { type ProgressBarProps } from './types.ts'; const ProgressBar: FC = ({ progress, + progressLabel, isTall, - additionalText, threshold = null, max = 100, barClassName, className, + labelClassName, }) => { if (progress > max || progress < 0) { throw new Error(`Progress bar value must be between between 0 and ${max}`); } return ( -
+
= ({ /> )}
- - {progress} + + {progressLabel || progress} - {additionalText && ( - - {additionalText} - - )}
); }; diff --git a/src/components/v5/shared/ProgressBar/types.ts b/src/components/v5/shared/ProgressBar/types.ts index bd2108b0fd3..79a30d40266 100644 --- a/src/components/v5/shared/ProgressBar/types.ts +++ b/src/components/v5/shared/ProgressBar/types.ts @@ -1,9 +1,10 @@ export interface ProgressBarProps { progress: number; + progressLabel?: string; isTall?: boolean; - additionalText?: React.ReactNode; threshold?: number; max?: number; barClassName?: string; className?: string; + labelClassName?: string; } diff --git a/src/components/v5/shared/StatusText/StatusText.tsx b/src/components/v5/shared/StatusText/StatusText.tsx index 4b3c949eca5..fed9beda42a 100644 --- a/src/components/v5/shared/StatusText/StatusText.tsx +++ b/src/components/v5/shared/StatusText/StatusText.tsx @@ -30,7 +30,7 @@ const StatusText: FC> = ({ return (
> = ({ className={clsx(iconClassName, 'flex-shrink-0')} /> )} -

{children}

+ {children && typeof children === 'string' && ( +

{children}

+ )} + {children && typeof children !== 'string' && ( +
{children}
+ )}
); }; diff --git a/src/components/v5/shared/Stepper/Stepper.tsx b/src/components/v5/shared/Stepper/Stepper.tsx index 686885f8dbd..e3a93088e19 100644 --- a/src/components/v5/shared/Stepper/Stepper.tsx +++ b/src/components/v5/shared/Stepper/Stepper.tsx @@ -2,6 +2,7 @@ import { CaretLeft, CaretRight } from '@phosphor-icons/react'; import clsx from 'clsx'; import { motion } from 'framer-motion'; import React, { useEffect, useState } from 'react'; +import { InView } from 'react-intersection-observer'; import { accordionAnimation } from '~constants/accordionAnimation.ts'; import { useMobile } from '~hooks/index.ts'; @@ -19,6 +20,7 @@ function Stepper({ items, }: StepperProps): JSX.Element | null { const activeItemIndex = items.findIndex(({ key }) => key === activeStepKey); + const [hiddenItem, setHiddenItem] = useState(undefined); const [openItemIndex, setOpenItemIndex] = useState(activeItemIndex); const isMobile = useMobile(); const withArrowsOnMobile = @@ -66,6 +68,27 @@ function Stepper({ setOpenItemIndex(activeItemIndex); }, [activeItemIndex]); + const handleChange = (name: TKey, inView: boolean) => { + if (!inView) { + setHiddenItem(name); + } else { + setHiddenItem(undefined); + } + }; + + useEffect(() => { + if (hiddenItem && listRef.current && isMobile && isScrollableList) { + const index = items.findIndex(({ key }) => key === hiddenItem); + if (index > -1) { + listRef.current.scrollBy({ + left: 70 * index, + behavior: 'smooth', + }); + } + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [openItemIndex, isMobile]); + return items.length ? ( <>
@@ -143,7 +166,11 @@ function Stepper({ }, )} > -
+ handleChange(key, inView)} + className="flex flex-col items-start gap-[.375rem] sm:flex-row sm:items-center" + > ({ } onClick={() => { setOpenItemIndex(index); + setHiddenItem(undefined); if (index > activeItemIndex) { setActiveStepKey(key); @@ -166,7 +194,7 @@ function Stepper({ {...restHeading} /> {decor || null} -
+ {!isMobile && !itemDisabled && (
= ({ tooltipProps, ...rest }) => { + const [buttonWidth, setButtonWidth] = useState(0); const Icon = icon || ICON_NAME_MAP[stage]; const isMobile = useMobile(); + const buttonRef = useRef(null); + + useEffect(() => { + if (buttonRef.current) { + setButtonWidth(buttonRef.current.offsetWidth); + } + }, []); const content = (