Skip to content

Commit

Permalink
Merge pull request #59 from makeen-project/feature_ALS-1591_web-respo…
Browse files Browse the repository at this point in the history 
…nsive_main

[Makeen] [Feature ALS-1591] web responsive
  • Loading branch information
@dochiana
dochiana authored Oct 13, 2023
2 parents e53fee2 + 8abe7a1 commit 7f8c347
Show file tree
Hide file tree
Showing 10 changed files with 199 additions and 173 deletions.
41 changes: 38 additions & 3 deletions src/atomicui/molecules/MapButtons/MapButtons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
import { IconClose, IconFilterFunnel, IconGeofencePlusSolid, IconMapSolid, IconRadar, IconSearch } from "@demo/assets";
import { NotFoundCard } from "@demo/atomicui/molecules";
import { appConfig } from "@demo/core/constants";
import BottomSheetHeights from "@demo/core/constants/bottomSheetHeights";
import { useAmplifyAuth, useAmplifyMap, useAwsGeofence, useUnauthSimulation } from "@demo/hooks";
import useBottomSheet from "@demo/hooks/useBottomSheet";
import useDeviceMediaQuery from "@demo/hooks/useDeviceMediaQuery";
Expand All @@ -33,7 +34,9 @@ import {
} from "@demo/types";
import { EventTypeEnum, MenuItemEnum, OpenDataMapEnum, ResponsiveUIEnum, TriggeredByEnum } from "@demo/types/Enums";
import { record } from "@demo/utils/analyticsUtils";
import { isAndroid, isIOS } from "react-device-detect";
import { useTranslation } from "react-i18next";
import { RefHandles } from "react-spring-bottom-sheet/dist/types";
import { Tooltip } from "react-tooltip";
import "./styles.scss";

Expand Down Expand Up @@ -85,6 +88,7 @@ export interface MapButtonsProps {
isUnauthTrackerBoxOpen: boolean;
onSetShowUnauthGeofenceBox: (b: boolean) => void;
onSetShowUnauthTrackerBox: (b: boolean) => void;
bottomSheetRef?: React.MutableRefObject<RefHandles | null>;
}

const MapButtons: React.FC<MapButtonsProps> = ({
Expand Down Expand Up @@ -122,7 +126,8 @@ const MapButtons: React.FC<MapButtonsProps> = ({
isUnauthGeofenceBoxOpen,
isUnauthTrackerBoxOpen,
onSetShowUnauthGeofenceBox,
onSetShowUnauthTrackerBox
onSetShowUnauthTrackerBox,
bottomSheetRef
}) => {
const [tempFilters, setTempFilters] = useState(selectedFilters);
const [isLoadingImg, setIsLoadingImg] = useState(true);
Expand All @@ -134,9 +139,9 @@ const MapButtons: React.FC<MapButtonsProps> = ({
const { mapProvider: currentMapProvider, mapStyle: currentMapStyle } = useAmplifyMap();
const { isAddingGeofence, setIsAddingGeofence } = useAwsGeofence();
const isAuthenticated = !!credentials?.authenticated;
const { isTablet, isMobile, isDesktop } = useDeviceMediaQuery();
const { isTablet, isMobile, isDesktop, isDesktopBrowser } = useDeviceMediaQuery();
const { t, i18n } = useTranslation();
const { bottomSheetCurrentHeight = 0, ui } = useBottomSheet();
const { bottomSheetCurrentHeight = 0, ui, setBottomSheetHeight, setBottomSheetMinHeight } = useBottomSheet();
const langDir = i18n.dir();
const isLtr = langDir === "ltr";
const settingsTablet = isTablet && !!onlyMapStyles && isSettingsModal;
Expand Down Expand Up @@ -465,8 +470,34 @@ const MapButtons: React.FC<MapButtonsProps> = ({
value={searchValue}
onChange={e => setSearchValue(e.target.value)}
onClick={() => {
console.log("clicked");
isHandDevice && setSearchWidth(searchDesktopWidth);
!!showFilter && setShowFilter(false);

if ((isAndroid || isIOS) && !isDesktopBrowser) {
if (bottomSheetCurrentHeight < document.documentElement.clientHeight * 0.4) {
bottomSheetRef?.current?.snapTo(window.innerHeight);
setTimeout(() => {
setBottomSheetHeight(window.innerHeight);
setBottomSheetMinHeight(BottomSheetHeights.explore.min);
}, 200);
}
}
}}
onBlur={() => {
isHandDevice && searchValue && setSearchWidth(searchDesktopWidth);

if ((isAndroid || isIOS) && !isDesktopBrowser) {
setTimeout(() => {
setBottomSheetMinHeight(window.innerHeight - 10);
setBottomSheetHeight(window.innerHeight);
}, 200);

setTimeout(() => {
setBottomSheetMinHeight(BottomSheetHeights.explore.min);
setBottomSheetHeight(window.innerHeight);
}, 500);
}
}}
crossOrigin={undefined}
width={searchWidth}
Expand Down Expand Up @@ -658,6 +689,10 @@ const MapButtons: React.FC<MapButtonsProps> = ({
clearFilters,
applyMobileFilters,
setSearchValue,
isDesktopBrowser,
bottomSheetRef,
setBottomSheetHeight,
setBottomSheetMinHeight,
discardChanges,
currentMapProvider,
handleMapProviderChange,
Expand Down
2 changes: 1 addition & 1 deletion src/atomicui/molecules/NonStartUnauthSimulation/NonStartUnauthSimulation.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const mockProps: NonStartUnauthSimulationProps = {
handleCta: jest.fn(),
handleEnableLive: jest.fn(),
from: MenuItemEnum.GEOFENCE,
startRef: {} as React.RefObject<HTMLDivElement>
startRef: { current: document.createElement("div") } as React.RefObject<HTMLDivElement>
};

describe("<NonStartUnauthSimulation />", () => {
Expand Down
53 changes: 28 additions & 25 deletions src/atomicui/molecules/Popup/Popup.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. */
/* SPDX-License-Identifier: MIT-0 */

import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";

import { Button, Flex, Placeholder, Text, View } from "@aws-amplify/ui-react";
import { IconCar, IconClose, IconCopyPages, IconDirections, IconInfo } from "@demo/assets";
Expand Down Expand Up @@ -32,7 +32,7 @@ interface Props {
setInfo: (info?: SuggestionType) => void;
}
const Popup: React.FC<Props> = ({ active, info, select, onClosePopUp, setInfo }) => {
const { setPOICard, setBottomSheetMinHeight, setBottomSheetHeight, setUI, bottomSheetHeight } = useBottomSheet();
const { setPOICard, setBottomSheetMinHeight, setBottomSheetHeight, setUI, bottomSheetHeight, ui } = useBottomSheet();
const [routeData, setRouteData] = useState<CalculateRouteResponse>();
const {
currentLocationData,
Expand Down Expand Up @@ -309,41 +309,44 @@ const Popup: React.FC<Props> = ({ active, info, select, onClosePopUp, setInfo })
);

useEffect(() => {
if (!!info.Place?.Label && !isDesktop) {
setUI(ResponsiveUIEnum.poi_card);
if (!isDesktop) {
const ch = POICardRef?.current?.clientHeight || 230;
ui !== ResponsiveUIEnum.poi_card && setUI(ResponsiveUIEnum.poi_card);
setPOICard(<POIBody />);
if (bottomSheetHeight !== (POICardRef?.current?.clientHeight || 230) + 70) {
setBottomSheetMinHeight((POICardRef?.current?.clientHeight || 230) + 60);
setBottomSheetHeight((POICardRef?.current?.clientHeight || 230) + 70);
}
setBottomSheetMinHeight(ch + 60);
setBottomSheetHeight(ch + 70);
}
}, [
POIBody,
latitude,
longitude,
info,
isDesktop,
setBottomSheetHeight,
setBottomSheetMinHeight,
setPOICard,
setUI,
bottomSheetHeight
bottomSheetHeight,
ui
]);

return (
<PopupGl
data-testid="popup-container"
className="popup-container"
closeButton={false}
anchor={isDesktop ? "left" : "bottom"}
offset={active ? 27 : 22}
style={{ maxWidth: isDesktop ? "28.62rem" : "20rem", width: "100%" }}
longitude={longitude as number}
latitude={latitude as number}
>
{isDesktop && <POIBody />}
</PopupGl>
);
if (isDesktop) {
return (
<PopupGl
data-testid="popup-container"
className="popup-container"
closeButton={false}
anchor={isDesktop ? "left" : "bottom"}
offset={active ? 27 : 22}
style={{ maxWidth: isDesktop ? "28.62rem" : "20rem", width: "100%" }}
longitude={longitude as number}
latitude={latitude as number}
>
<POIBody />
</PopupGl>
);
} else {
return null;
}
};

export default Popup;
export default memo(Popup);
5 changes: 3 additions & 2 deletions src/atomicui/organisms/ResponsiveBottomSheet/ResponsiveBottomSheet.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const { DEMO } = appConfig.default.ROUTES;
interface IProps {
mapRef: MapRef | null;
SearchBoxEl: (ref?: React.MutableRefObject<RefHandles | null>) => JSX.Element;
MapButtons: JSX.Element;
MapButtons: (ref?: React.MutableRefObject<RefHandles | null>) => JSX.Element;
RouteBox: (ref?: React.MutableRefObject<RefHandles | null>) => JSX.Element;
onCloseSidebar: () => void;
onOpenConnectAwsAccountModal: () => void;
Expand Down Expand Up @@ -333,6 +333,7 @@ const ResponsiveBottomSheet: FC<IProps> = ({
setBottomSheetHeight(window.innerHeight);
} else {
setExpandRouteOptionsMobile(false);
setTimeout(() => setBottomSheetMinHeight(BottomSheetHeights.routes.min), 200);
}
} else {
setUI(ResponsiveUIEnum.explore);
Expand Down Expand Up @@ -430,7 +431,7 @@ const ResponsiveBottomSheet: FC<IProps> = ({
(ui?: ResponsiveUIEnum) => {
switch (ui) {
case ResponsiveUIEnum.map_styles:
return MapButtons;
return MapButtons(bottomSheetRef);
case ResponsiveUIEnum.routes:
case ResponsiveUIEnum.direction_to_routes:
return RouteBox(bottomSheetRef);
Expand Down
63 changes: 30 additions & 33 deletions src/atomicui/organisms/RouteBox/RouteBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,17 +170,15 @@ const RouteBox: React.FC<RouteBoxProps> = ({
return () => {
document.removeEventListener("touchmove", handleClickOutside);
};
}, [ui, setBottomSheetHeight, setBottomSheetMinHeight]);
}, [ui]);

useEffect(() => {
if (!isDesktop) {
if (!isInputFocused) {
if (expandRouteOptionsMobile) {
setBottomSheetMinHeight((expandRouteRef?.current?.clientHeight || 230) + 90);
setBottomSheetHeight((expandRouteRef?.current?.clientHeight || 230) + 100);
} else {
setTimeout(() => setBottomSheetMinHeight(BottomSheetHeights.routes.min), 200);
}
if (!isDesktop && !isInputFocused) {
if (expandRouteOptionsMobile) {
setBottomSheetMinHeight((expandRouteRef?.current?.clientHeight || 230) + 90);
setBottomSheetHeight((expandRouteRef?.current?.clientHeight || 230) + 100);
} else {
setTimeout(() => setBottomSheetMinHeight(BottomSheetHeights.routes.min), 200);
}
}
}, [
Expand Down Expand Up @@ -454,22 +452,6 @@ const RouteBox: React.FC<RouteBoxProps> = ({
};
}, [handleClick]);

// useEffect(() => {
// if (fromInputRef.current) {
// fromInputRef.current.onfocus = () => {
// window.scrollTo(0, 0);
// document.body.scrollTop = 0;
// };
// }

// if (toInputRef.current) {
// toInputRef.current.onfocus = () => {
// window.scrollTo(0, 0);
// document.body.scrollTop = 0;
// };
// }
// });

const onFocus = useCallback(
(type: InputType) => {
if (type === InputType.FROM) {
Expand All @@ -481,8 +463,11 @@ const RouteBox: React.FC<RouteBoxProps> = ({
}

if ((isAndroid || isIOS) && !isDesktopBrowser) {
if (bottomSheetCurrentHeight < window.innerHeight * 0.4) {
bottomSheetRef?.current?.snapTo(window.innerHeight);
if (bottomSheetCurrentHeight < window.innerHeight * 0.9) {
setBottomSheetHeight(window.innerHeight);
setTimeout(() => {
bottomSheetRef?.current?.snapTo(window.innerHeight);
}, 0);
}
} else {
if (bottomSheetCurrentHeight < window.innerHeight * 0.4) {
Expand Down Expand Up @@ -534,12 +519,26 @@ const RouteBox: React.FC<RouteBoxProps> = ({
(value.from.length || fromInputRef.current?.value === t("route_box__my_location.text")) &&
(value.to.length || toInputRef.current?.value === t("route_box__my_location.text"))
) {
setBottomSheetMinHeight(window.innerHeight * 0.42 - 10);
setBottomSheetHeight(window.innerHeight * 0.42);
setBottomSheetMinHeight(window.innerHeight * 0.4 - 10);
setBottomSheetHeight(window.innerHeight * 0.4);
} else {
if (bottomSheetCurrentHeight < window.innerHeight * 0.9) {
setBottomSheetMinHeight(window.innerHeight - 10);
setBottomSheetHeight(window.innerHeight);
}
}
}, 200);
}
}, [isDesktop, isDesktopBrowser, setBottomSheetHeight, setBottomSheetMinHeight, t, value]);
}, [
bottomSheetCurrentHeight,
isDesktop,
isDesktopBrowser,
setBottomSheetHeight,
setBottomSheetMinHeight,
t,
value.from.length,
value.to.length
]);

const onClickRouteOptions = useCallback(() => setExpandRouteOptions(!expandRouteOptions), [expandRouteOptions]);

Expand Down Expand Up @@ -981,9 +980,7 @@ const RouteBox: React.FC<RouteBoxProps> = ({
ref={fromInputRef}
data-testid="from-input"
placeholder={t("route_box__from.text") as string}
onFocus={() => {
onFocus(InputType.FROM);
}}
onFocus={() => onFocus(InputType.FROM)}
onBlur={handleBlur}
value={value.from}
onChange={e => onChangeValue(e, InputType.FROM)}
Expand Down
Loading

0 comments on commit 7f8c347

Please sign in to comment.