61 lines
3.2 KiB
Markdown
61 lines
3.2 KiB
Markdown
|
---
|
||
|
|
sidebar_position: 5
|
||
|
|
sidebar_label: UI
|
||
|
|
summary: Migration guide for OHIF 3.11's UI changes, including the transition from `ViewportActionCornersService` to `ToolbarService` and the introduction of `useToolbar` hook.
|
||
|
|
---
|
||
|
|
|
||
|
|
|
||
|
|
## New useIconPresentation hook
|
||
|
|
|
||
|
|
This section details the introduction of the `IconPresentationProvider` and `useIconPresentation` hook, offering an optional way to manage icon size and container styling within the UI.
|
||
|
|
|
||
|
|
### Key Changes:
|
||
|
|
|
||
|
|
* **New Context and Hook:** Introduction of `IconPresentationProvider` and `useIconPresentation` to provide a standardized way to control the size and potentially the container component/props for icons and related interactive elements (like `ToolButton`).
|
||
|
|
|
||
|
|
### Migration Steps:
|
||
|
|
|
||
|
|
Using the `IconPresentationProvider` is **entirely optional**. If you do not wrap your components with this provider, components like `ToolButton` will continue to use their explicit `size` prop and default styling.
|
||
|
|
|
||
|
|
However, if you wish to centrally manage the presentation of icons within a specific part of your application's component tree, follow these steps:
|
||
|
|
|
||
|
|
1. **Identify the component subtree:** Determine which section of your UI you want to apply consistent icon styling to.
|
||
|
|
|
||
|
|
2. **Wrap with `IconPresentationProvider`:** Wrap the root of that component subtree with the `IconPresentationProvider`. Pass the desired `size` prop. You can also optionally provide a custom `IconContainer` component and `containerProps` if you want to change the wrapper around the icon itself (e.g., switching from a `Button` to a `ToolButton` or applying specific styling).
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import { IconPresentationProvider, ToolButton } from '@ohif/ui-next';
|
||
|
|
|
||
|
|
function MyComponentTree() {
|
||
|
|
return (
|
||
|
|
// Icons and ToolButtons within this provider will inherit 'large' size
|
||
|
|
<IconPresentationProvider size="large">
|
||
|
|
{/* Any components inside that consume the context */}
|
||
|
|
<ToolButton id="myTool" icon="Circle" tooltip="Draw Circle" />
|
||
|
|
{/* ... other components ... */}
|
||
|
|
</IconPresentationProvider>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
3. **Consume the context in components (if building custom components):** If you are building a custom component that renders an icon and want it to respect the provider's settings, use the `useIconPresentation` hook within that component. This hook provides the configured size, a calculated CSS class name (`className`), the specified `IconContainer` component, and its `containerProps`.
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import React from 'react';
|
||
|
|
import { useIconPresentation, Icons } from '@ohif/ui-next';
|
||
|
|
|
||
|
|
function MyCustomIconButton({ iconName, ...rest }) {
|
||
|
|
// This hook reads the nearest IconPresentationProvider context
|
||
|
|
const { className, IconContainer, containerProps } = useIconPresentation();
|
||
|
|
|
||
|
|
// Use the provided IconContainer and its props
|
||
|
|
return (
|
||
|
|
<IconContainer {...rest} {...containerProps}>
|
||
|
|
{/* Use the calculated className for the icon */}
|
||
|
|
<Icons.ByName name={iconName} className={className} />
|
||
|
|
</IconContainer>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
```
|
||
|
|
*Note: Built-in components like `ToolButton` in `@ohif/ui-next` have been updated internally to consume this context automatically if a provider is available.*
|