Skip to content

Commit

Permalink
Temporary fixes for AppUI deprecations
Browse files Browse the repository at this point in the history
  • Loading branch information
tcobbs-bentley committed Jul 16, 2024
1 parent f79c069 commit a5e7792
Show file tree
Hide file tree
Showing 15 changed files with 75 additions and 15 deletions.
2 changes: 2 additions & 0 deletions src/mobile-ui-react/ActionSheetButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import { NavigationButton } from "./NavigationPanel";
* Properties for {@link ActionSheetButton}
* @public
*/
// @todo AppUI deprecation
// eslint-disable-next-line deprecation/deprecation
export interface ActionSheetButtonProps extends ActionSheetProps, CommonProps {
/** The icon to show on the {@link ActionSheetButton}, default is three vertical dots. */
iconSpec?: IconSpec;
Expand Down
4 changes: 4 additions & 0 deletions src/mobile-ui-react/BottomPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,8 @@ export function useBottomPanelTop() {
* Properties for the {@link BottomPanel} component.
* @public
*/
// @todo AppUI deprecation
// eslint-disable-next-line deprecation/deprecation
export interface BottomPanelProps extends CommonProps {
children?: React.ReactNode;
/** Displayed when true. */
Expand Down Expand Up @@ -293,6 +295,8 @@ export function ResizableBottomPanel(props: ResizableBottomPanelProps) {
}
setTimeout(() => {
setFlickingDown(false);
// @todo AppUI deprecation
// eslint-disable-next-line deprecation/deprecation
}, 50 + (typeof autoCloseResult === "number" ? autoCloseResult : getCssVariableAsNumber("--mui-bottom-panel-animation-duration") * 1000));
return result;
});
Expand Down
2 changes: 2 additions & 0 deletions src/mobile-ui-react/CenterDiv.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import "./CenterDiv.scss";
* Properties for {@link CenterDiv} component
* @public
*/
// @todo AppUI deprecation
// eslint-disable-next-line deprecation/deprecation
interface CenterDivProps extends CommonProps, React.DOMAttributes<HTMLDivElement> {
/** Set to true to have the {@link CenterDiv} fill 100% of its parent. Default: no */
fill?: boolean;
Expand Down
4 changes: 4 additions & 0 deletions src/mobile-ui-react/CountNotification.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@ export interface CountNotificationMoreProps {
* Properties for {@link CountNotification} component
* @public
*/
// @todo AppUI deprecation
// eslint-disable-next-line deprecation/deprecation
export interface CountNotificationProps extends CommonProps {
/** Count to display */
count: number;
Expand All @@ -65,6 +67,8 @@ export interface CountNotificationProps extends CommonProps {
* Properties for {@link CloseableCountNotification} component
* @public
*/
// @todo AppUI deprecation
// eslint-disable-next-line deprecation/deprecation
export interface CloseableCountNotificationProps extends CommonProps {
/** Count to display */
count: number;
Expand Down
4 changes: 4 additions & 0 deletions src/mobile-ui-react/HorizontalPicker.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import "./HorizontalPicker.scss";
* Properties for {@link HorizontalPicker} component
* @public
*/
// @todo AppUI deprecation
// eslint-disable-next-line deprecation/deprecation
export interface HorizontalPickerProps extends CommonProps {
/** The items in the picker. */
items: React.ReactNode[];
Expand All @@ -21,6 +23,8 @@ export interface HorizontalPickerProps extends CommonProps {
onItemSelected: (item: number) => void;
}

// @todo AppUI deprecation
// eslint-disable-next-line deprecation/deprecation
interface HorizontalPickerItemProps extends CommonProps {
itemNode: React.ReactNode;
onClick: () => void;
Expand Down
33 changes: 24 additions & 9 deletions src/mobile-ui-react/MobileUi.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,26 @@
*--------------------------------------------------------------------------------------------*/
import * as React from "react";
import { BackendError, Localization } from "@itwin/core-common";
import { getCssVariable, getCssVariableAsNumber } from "@itwin/core-react";
import { ColorTheme, SessionStateActionId, SyncUiEventDispatcher, SyncUiEventId, SYSTEM_PREFERRED_COLOR_THEME, UiFramework, UiSyncEventArgs } from "@itwin/appui-react";
import {
ColorTheme,
SessionStateActionId,
SyncUiEventDispatcher,
SyncUiEventId,
SYSTEM_PREFERRED_COLOR_THEME,
UiFramework,
UiSyncEventArgs,
} from "@itwin/appui-react";
import { EmphasizeElements, IModelApp, IModelConnection, ScreenViewport, SelectionSet, Tool, Viewport } from "@itwin/core-frontend";
import { BeEvent, BeUiEvent, BriefcaseStatus, Id64Set, Listener } from "@itwin/core-bentley";
import { getAllViewports, getEmphasizeElements, Messenger, MobileCore, UIError } from "@itwin/mobile-sdk-core";
import {
getAllViewports,
getCssVariable,
getCssVariableAsNumber,
getEmphasizeElements,
Messenger,
MobileCore,
UIError,
} from "@itwin/mobile-sdk-core";

import "./MobileUi.scss";

Expand Down Expand Up @@ -82,6 +97,8 @@ export class MobileUi {
const isDark = MobileUi.activeColorSchemeIsDark;
if (UiFramework.initialized) {
const newTheme = isDark ? ColorTheme.Dark : ColorTheme.Light;
// @todo AppUI deprecation
// eslint-disable-next-line deprecation/deprecation
UiFramework.setColorTheme(newTheme);
// The imodeljs UI framework relies on the "data-theme" attribute. Since the only two ColorTheme
// values are Light and Dark, the below handles those and Automatic.
Expand Down Expand Up @@ -341,16 +358,12 @@ function stringSetHas(set: Set<string>, values: ReadonlyArray<string>) {
* A custom React hook function for UiSyncEvents.
* @param handler - The callback function.
* @param eventIds - The optional event ids to handle.
*
* __NOTE__: This function should probably be deprecated, but right now there is no obvious way to
* replace it. Consequently, the following is for information only:
* NOT@deprecated in 0.22.5. UiSyncEventArgs were deprecated in appui-react 4.13.x.
*/
// @todo FIX Remove deprecated usage once appui-react provides a reasonable solution.
// @todo AppUI deprecation
// eslint-disable-next-line deprecation/deprecation
export function useSyncUiEvent(handler: (args: UiSyncEventArgs) => void, ...eventIds: ReadonlyArray<string>) {
React.useEffect(() => {
// @todo FIX Remove deprecated usage once appui-react provides a reasonable solution.
// @todo AppUI deprecation
// eslint-disable-next-line deprecation/deprecation
return SyncUiEventDispatcher.onSyncUiEvent.addListener((args: UiSyncEventArgs) => {
if (eventIds.length === 0 || stringSetHas(args.eventIds, eventIds)) {
Expand Down Expand Up @@ -547,6 +560,8 @@ export function useIsolatedCount(): number {
export function useIModel(handler: (iModel: IModelConnection | undefined) => void) {
useSyncUiEvent(React.useCallback(() => {
handler(UiFramework.getIModelConnection());
// @todo AppUI deprecation
// eslint-disable-next-line deprecation/deprecation
}, [handler]), SessionStateActionId.SetIModelConnection);
}

Expand Down
2 changes: 2 additions & 0 deletions src/mobile-ui-react/ModalEntryFormDialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@ export interface ModalEntryFormValue {
* Properties for the {@link ModalDialog} component.
* @public
*/
// @todo AppUI deprecation
// eslint-disable-next-line deprecation/deprecation
export interface ModalDialogProps extends CommonProps {
/** Content. */
children: React.ReactNode;
Expand Down
4 changes: 4 additions & 0 deletions src/mobile-ui-react/NavigationPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ import {
* Properties for the {@link NavigationPanel} component.
* @public
*/
// @todo AppUI deprecation
// eslint-disable-next-line deprecation/deprecation
export interface NavigationPanelProps extends ClassNameProps {
/** The left side components. */
left?: React.ReactNode;
Expand All @@ -44,6 +46,8 @@ export function NavigationPanel(props: NavigationPanelProps) {
* Properties for the {@link NavigationButton} component.
* @public
*/
// @todo AppUI deprecation
// eslint-disable-next-line deprecation/deprecation
export interface NavigationButtonProps extends CommonProps {
/** The icon. */
iconSpec: IconSpec;
Expand Down
4 changes: 3 additions & 1 deletion src/mobile-ui-react/PanViewport.ts
Original file line number Diff line number Diff line change
Expand Up @@ -70,9 +70,11 @@ export class PanTracker {
return this._vpParentDivId;
}

// @todo FIX Remove deprecated usage once appui-react provides a reasonable solution.
// @todo AppUI deprecation
// eslint-disable-next-line deprecation/deprecation
private _onSyncUi = (args: UiSyncEventArgs) => {
// @todo AppUI deprecation
// eslint-disable-next-line deprecation/deprecation
if (args.eventIds.has(SessionStateActionId.SetIModelConnection) && this._vpParentDivId) {
let panTracker = PanTracker.getWithKey(this._vpParentDivId);
const nextX = panTracker.nextX;
Expand Down
2 changes: 2 additions & 0 deletions src/mobile-ui-react/PanelHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ function PanelHeaderDraggableDiv(props: PanelHeaderDraggableDivProps) {
* Properties for the {@link PanelHeaderButton} component.
* @public
*/
// @todo AppUI deprecation
// eslint-disable-next-line deprecation/deprecation
export interface PanelHeaderButtonProps extends CommonProps {
/** The button's text label. */
label: string;
Expand Down
12 changes: 10 additions & 2 deletions src/mobile-ui-react/ResizablePanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,17 @@
import * as React from "react";
import classnames from "classnames";
import { Point2d, XAndY } from "@itwin/core-geometry";
import { CommonProps, getCssVariableAsNumber } from "@itwin/core-react";
import { ReloadedEvent } from "@itwin/mobile-sdk-core";
import { CommonProps } from "@itwin/core-react";
import { getCssVariableAsNumber, ReloadedEvent } from "@itwin/mobile-sdk-core";
import { ReactUseState, useIsMountedRef, useWindowEvent } from "./MobileUi";
import "./ResizablePanel.scss";

/**
* Properties for {@link ResizablePanel} component
* @public
*/
// @todo AppUI deprecation
// eslint-disable-next-line deprecation/deprecation
export interface ResizablePanelProps extends CommonProps {
/** The children */
children?: React.ReactNode;
Expand Down Expand Up @@ -354,6 +356,8 @@ export function DraggableComponent(props: DraggableComponentProps) {
</TouchDragHandle>;
}

// @todo AppUI deprecation
// eslint-disable-next-line deprecation/deprecation
interface VerticalScrollProps extends CommonProps {
children?: React.ReactNode;
}
Expand All @@ -364,6 +368,8 @@ export function VerticalScroll(props: VerticalScrollProps) {
return <div {...otherProps} className={classnames("mui-vertical-scroll", className)}>{children}</div>;
}

// @todo AppUI deprecation
// eslint-disable-next-line deprecation/deprecation
interface TouchCaptorProps extends CommonProps {
isTouchStarted: boolean;
onTouchStart?: (e: TouchEvent) => void;
Expand Down Expand Up @@ -464,6 +470,8 @@ interface TouchDragHandleState {
isPointerDown: boolean;
}

// @todo AppUI deprecation
// eslint-disable-next-line deprecation/deprecation
interface TouchDragHandleProps extends CommonProps {
/** Last pointer position of draggable tab. */
lastPosition?: XAndY;
Expand Down
5 changes: 4 additions & 1 deletion src/mobile-ui-react/ScrollableWithFades.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@
import * as React from "react";
import classnames from "classnames";
import { ColorDef } from "@itwin/core-common";
import { ClassNameProps, getCssVariable } from "@itwin/core-react";
import { ClassNameProps } from "@itwin/core-react";
import { useScroll, useWindowEvent } from "./MobileUi";
import { getCssVariable } from "@itwin/mobile-sdk-core";

import "./ScrollableWithFades.scss";

Expand All @@ -16,6 +17,8 @@ import "./ScrollableWithFades.scss";
* Properties for the {@link HorizontalScrollableWithFades} component.
* @public
*/
// @todo AppUI deprecation
// eslint-disable-next-line deprecation/deprecation
export interface ScrollableWithFadesProps extends ClassNameProps {
backgroundColor?: ColorDef;
/** The views to go into the scrollable element */
Expand Down
6 changes: 5 additions & 1 deletion src/mobile-ui-react/Suggestion.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,12 @@
import * as React from "react";
import classnames from "classnames";
import { BeUiEvent } from "@itwin/core-bentley";
import { getCssVariableAsNumber, useOnOutsideClick } from "@itwin/core-react";
import { useOnOutsideClick } from "@itwin/core-react";
import { ToolAssistanceInstructions } from "@itwin/core-frontend";
import { IconImage } from "./IconImage";
import { useBeUiEvent } from "./MobileUi";
import { getCssVariableAsNumber } from "@itwin/mobile-sdk-core";

import "./Suggestion.scss";

/**
Expand Down Expand Up @@ -37,6 +39,8 @@ export function SuggestionContainer(props: React.HTMLAttributes<HTMLDivElement>)
* @public
*/
export function Suggestion(props: SuggestionProps) {
// @todo AppUI deprecation
// eslint-disable-next-line deprecation/deprecation
const ref = useOnOutsideClick<HTMLDivElement>(() => props.onOutsideClick?.());
// To ensure the icon is properly centered when the label not displayed, calculate the icon's margin so that its height and width match the pill height.
const pillHeight = React.useRef(getCssVariableAsNumber("--mui-pill-height"));
Expand Down
2 changes: 1 addition & 1 deletion src/mobile-ui-react/TabBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*--------------------------------------------------------------------------------------------*/
import * as React from "react";
import classnames from "classnames";
import { getCssVariable, getCssVariableAsNumber } from "@itwin/core-react";
import { getCssVariable, getCssVariableAsNumber } from "@itwin/mobile-sdk-core";
import { ColorDef } from "@itwin/core-common";
import { BottomPanelProps } from "./BottomPanel";
import { HorizontalScrollableWithFades } from "./ScrollableWithFades";
Expand Down
4 changes: 4 additions & 0 deletions src/mobile-ui-react/TileGrid.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ export interface GridTileSize {
* Properties for {@link TileGrid} component.
* @public
*/
// @todo AppUI deprecation
// eslint-disable-next-line deprecation/deprecation
export interface TileGridProps extends CommonProps {
/** [[GridTile]] children of this node */
children?: Array<React.ReactElement<GridTileProps>>;
Expand Down Expand Up @@ -53,6 +55,8 @@ export interface GridTileInjectedProps {
* Properties for {@link GridTile} component.
* @public
*/
// @todo AppUI deprecation
// eslint-disable-next-line deprecation/deprecation
export interface GridTileProps extends CommonProps {
/** onClick handler for this GridTile. */
onClick?: (e: React.MouseEvent) => void;
Expand Down

0 comments on commit a5e7792

Please sign in to comment.