wip on switching from docz to docusaurus
This commit is contained in:
Erik Ziegler committed
1 parent
69e36106e3
commit
09469e6ac5
97 files changed
+1505
-7132
No files matched your search
@@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
import { Typography, Icon } from '../../components';
|
||||
import { Typography, Icon } from '../';
|
||||
import PropTypes from 'prop-types';
|
||||
import detect from 'browser-detect';
|
||||
|
||||
const Link = ({ href, children, showIcon = false }) => {
|
||||
@@ -41,7 +42,7 @@ const Row = ({ title, value, link }) => {
|
||||
);
|
||||
};
|
||||
|
||||
const AboutModal = () => {
|
||||
const AboutModal = ({buildNumber, versionNumber}) => {
|
||||
const { os, version, name } = detect();
|
||||
const browser = `${name[0].toUpperCase()}${name.substr(1)} ${version}`;
|
||||
|
||||
@@ -89,8 +90,8 @@ const AboutModal = () => {
|
||||
value="https://github.com/OHIF/Viewers/commits/master"
|
||||
link="https://github.com/OHIF/Viewers/commits/master"
|
||||
/>
|
||||
<Row title="Version Number" value={process.env.VERSION_NUMBER} />
|
||||
<Row title="Build number" value={process.env.BUILD_NUM} />
|
||||
<Row title="Version number" value={versionNumber} />
|
||||
<Row title="Build number" value={buildNumber} />
|
||||
<Row title="Browser" value={browser} />
|
||||
<Row title="OS" value={os} />
|
||||
</div>
|
||||
@@ -98,4 +99,9 @@ const AboutModal = () => {
|
||||
);
|
||||
};
|
||||
|
||||
AboutModal.propTypes = {
|
||||
buildNumber: PropTypes.string,
|
||||
versionNumber: PropTypes.string,
|
||||
}
|
||||
|
||||
export default AboutModal;
|
||||
@@ -1,30 +0,0 @@
|
||||
---
|
||||
name: AboutModal
|
||||
menu: General
|
||||
route: components/aboutModal
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { AboutModal } from '@ohif/ui';
|
||||
|
||||
# AboutModal
|
||||
|
||||
AboutModal are used to show application version information.
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { AboutModal } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
<Playground>
|
||||
<div className="p-4">
|
||||
<AboutModal />
|
||||
</div>
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={AboutModal} />
|
||||
@@ -1,444 +0,0 @@
|
||||
---
|
||||
name: Button
|
||||
menu: General
|
||||
route: components/button
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { Button, IconButton, Icon } from '../';
|
||||
|
||||
# Button
|
||||
|
||||
Buttons are used to execute actions when users interacts with them.
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { Button } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Outlined Buttons
|
||||
|
||||
<Playground>
|
||||
<div className="p-4">
|
||||
<Button variant="outlined" className="m-1">
|
||||
Default
|
||||
</Button>
|
||||
<Button variant="outlined" color="primary" className="m-1">
|
||||
Primary
|
||||
</Button>
|
||||
<Button variant="outlined" color="secondary" className="m-1">
|
||||
Secondary
|
||||
</Button>
|
||||
<Button variant="outlined" color="white" className="m-1">
|
||||
White
|
||||
</Button>
|
||||
</div>
|
||||
</Playground>
|
||||
|
||||
## Contained Buttons
|
||||
|
||||
<Playground>
|
||||
<div className="p-4">
|
||||
<Button variant="contained" className="m-1">
|
||||
Default
|
||||
</Button>
|
||||
<Button variant="contained" color="primary" className="m-1">
|
||||
Primary
|
||||
</Button>
|
||||
<Button variant="contained" color="secondary" className="m-1">
|
||||
Secondary
|
||||
</Button>
|
||||
<Button variant="contained" color="white" className="m-1">
|
||||
White
|
||||
</Button>
|
||||
</div>
|
||||
</Playground>
|
||||
|
||||
## Text Buttons
|
||||
|
||||
<Playground>
|
||||
<div className="p-4">
|
||||
<Button variant="text" className="m-1">
|
||||
Default
|
||||
</Button>
|
||||
<Button variant="text" color="primary" className="m-1">
|
||||
Primary
|
||||
</Button>
|
||||
<Button variant="text" color="secondary" className="m-1">
|
||||
Secondary
|
||||
</Button>
|
||||
<Button variant="text" color="white" className="m-1">
|
||||
White
|
||||
</Button>
|
||||
</div>
|
||||
</Playground>
|
||||
|
||||
## Rounded Buttons
|
||||
|
||||
<Playground>
|
||||
<div className="p-4">
|
||||
<div className="mb-2">
|
||||
<Button variant="contained" rounded="none" className="m-1">
|
||||
Non Rounded
|
||||
</Button>
|
||||
<Button variant="contained" rounded="small" className="m-1">
|
||||
Small Rounded
|
||||
</Button>
|
||||
<Button variant="contained" rounded="medium" className="m-1">
|
||||
Medium Rounded
|
||||
</Button>
|
||||
<Button variant="contained" rounded="large" className="m-1">
|
||||
Large Rounded
|
||||
</Button>
|
||||
<Button variant="contained" rounded="full" className="m-1">
|
||||
Full Rounded
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mb-2">
|
||||
<Button
|
||||
variant="contained"
|
||||
rounded="none"
|
||||
color="primary"
|
||||
className="m-1"
|
||||
>
|
||||
Non Rounded
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
rounded="small"
|
||||
color="primary"
|
||||
className="m-1"
|
||||
>
|
||||
Small Rounded
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
rounded="medium"
|
||||
color="primary"
|
||||
className="m-1"
|
||||
>
|
||||
Medium Rounded
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
rounded="large"
|
||||
color="primary"
|
||||
className="m-1"
|
||||
>
|
||||
Large Rounded
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
rounded="full"
|
||||
color="primary"
|
||||
className="m-1"
|
||||
>
|
||||
Full Rounded
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mb-2">
|
||||
<Button
|
||||
variant="contained"
|
||||
rounded="none"
|
||||
color="secondary"
|
||||
className="m-1"
|
||||
>
|
||||
Non Rounded
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
rounded="small"
|
||||
color="secondary"
|
||||
className="m-1"
|
||||
>
|
||||
Small Rounded
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
rounded="medium"
|
||||
color="secondary"
|
||||
className="m-1"
|
||||
>
|
||||
Medium Rounded
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
rounded="large"
|
||||
color="secondary"
|
||||
className="m-1"
|
||||
>
|
||||
Large Rounded
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
rounded="full"
|
||||
color="secondary"
|
||||
className="m-1"
|
||||
>
|
||||
Full Rounded
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mb-2">
|
||||
<Button variant="contained" rounded="none" color="white" className="m-1">
|
||||
Non Rounded
|
||||
</Button>
|
||||
<Button variant="contained" rounded="small" color="white" className="m-1">
|
||||
Small Rounded
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
rounded="medium"
|
||||
color="white"
|
||||
className="m-1"
|
||||
>
|
||||
Medium Rounded
|
||||
</Button>
|
||||
<Button variant="contained" rounded="large" color="white" className="m-1">
|
||||
Large Rounded
|
||||
</Button>
|
||||
<Button variant="contained" rounded="full" color="white" className="m-1">
|
||||
Full Rounded
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Playground>
|
||||
|
||||
## Sizes
|
||||
|
||||
<Playground>
|
||||
<div className="p-4">
|
||||
<div>
|
||||
<Button variant="contained" size="small" className="m-1">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="contained" size="medium" className="m-1">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="contained" size="large" className="m-1">
|
||||
Large
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="small"
|
||||
color="primary"
|
||||
className="m-1"
|
||||
>
|
||||
Small
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="medium"
|
||||
color="primary"
|
||||
className="m-1"
|
||||
>
|
||||
Medium
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="large"
|
||||
color="primary"
|
||||
className="m-1"
|
||||
>
|
||||
Large
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="small"
|
||||
color="secondary"
|
||||
className="m-1"
|
||||
>
|
||||
Small
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="medium"
|
||||
color="secondary"
|
||||
className="m-1"
|
||||
>
|
||||
Medium
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="large"
|
||||
color="secondary"
|
||||
className="m-1"
|
||||
>
|
||||
Large
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="small"
|
||||
color="white"
|
||||
className="m-1"
|
||||
>
|
||||
Small
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="medium"
|
||||
color="white"
|
||||
className="m-1"
|
||||
>
|
||||
Medium
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="large"
|
||||
color="white"
|
||||
className="m-1"
|
||||
>
|
||||
Large
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</Playground>
|
||||
|
||||
## Buttons with icons
|
||||
|
||||
<Playground>
|
||||
<div className="p-4 flex">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className="m-1"
|
||||
startIcon={<Icon name="settings" />}
|
||||
>
|
||||
Settings
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className="m-1"
|
||||
endIcon={<Icon name="settings" />}
|
||||
>
|
||||
Download
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
rounded="full"
|
||||
color="default"
|
||||
className="m-1"
|
||||
endIcon={<Icon name="settings" />}
|
||||
>
|
||||
Download
|
||||
</Button>
|
||||
</div>
|
||||
</Playground>
|
||||
|
||||
## Icon Buttons
|
||||
|
||||
Icon buttons are generally used in toolbars.
|
||||
|
||||
```javascript
|
||||
import { IconButton } from '@ohif/ui';
|
||||
```
|
||||
|
||||
<Playground>
|
||||
<div className="p-4 flex flex-col items-center">
|
||||
<div className="">
|
||||
<IconButton className="m-2">
|
||||
<Icon name="settings" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" variant="text">
|
||||
<Icon name="settings" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" variant="outlined">
|
||||
<Icon name="settings" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div>
|
||||
<IconButton className="m-2" color="primary">
|
||||
<Icon name="launch-arrow" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" color="primary" variant="text">
|
||||
<Icon name="launch-arrow" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" color="primary" variant="outlined">
|
||||
<Icon name="launch-arrow" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div>
|
||||
<IconButton className="m-2" color="secondary">
|
||||
<Icon name="cancel" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" color="secondary" variant="text">
|
||||
<Icon name="cancel" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" color="secondary" variant="outlined">
|
||||
<Icon name="cancel" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div>
|
||||
<IconButton className="m-2" color="white">
|
||||
<Icon name="settings" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" variant="text" color="white">
|
||||
<Icon name="launch-arrow" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" variant="outlined" color="white">
|
||||
<Icon name="cancel" />
|
||||
</IconButton>
|
||||
</div>
|
||||
</div>
|
||||
</Playground>
|
||||
|
||||
<Playground>
|
||||
<div className="p-4">
|
||||
<div className="">
|
||||
<IconButton className="m-2">
|
||||
<Icon name="settings" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" variant="outlined">
|
||||
<Icon name="settings" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" variant="text">
|
||||
<Icon name="settings" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div>
|
||||
<IconButton className="m-2" color="primary">
|
||||
<Icon name="launch-arrow" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" color="primary" variant="text">
|
||||
<Icon name="launch-arrow" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" color="primary" variant="outlined">
|
||||
<Icon name="launch-arrow" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div>
|
||||
<IconButton className="m-2" color="secondary">
|
||||
<Icon name="cancel" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" color="secondary" variant="text">
|
||||
<Icon name="cancel" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" color="secondary" variant="outlined">
|
||||
<Icon name="cancel" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div>
|
||||
<IconButton className="m-2" color="white">
|
||||
<Icon name="settings" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" variant="text" color="white">
|
||||
<Icon name="launch-arrow" />
|
||||
</IconButton>
|
||||
<IconButton className="m-2" variant="outlined" color="white">
|
||||
<Icon name="cancel" />
|
||||
</IconButton>
|
||||
</div>
|
||||
</div>
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={Button} />
|
||||
@@ -1,111 +0,0 @@
|
||||
---
|
||||
name: ButtonGroup
|
||||
menu: General
|
||||
route: components/buttonGroup
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { ButtonGroup, Button, IconButton, Icon } from '../';
|
||||
|
||||
# ButtonGroup
|
||||
|
||||
Group Button display buttons together sharing its configurations
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { ButtonGroup } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Basic button group
|
||||
|
||||
<Playground>
|
||||
<div className="p-4 flex flex-col items-center">
|
||||
<ButtonGroup color="primary" className="m-2">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Tree</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup color="primary" variant="contained" className="m-2">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Tree</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup color="primary" variant="text" className="m-2">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Tree</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
</Playground>
|
||||
|
||||
## Group sizes and colorss
|
||||
|
||||
<Playground>
|
||||
<div className="p-4 flex flex-col items-center">
|
||||
<ButtonGroup color="default" size="small" className="m-2">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Tree</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup color="primary" size="medium" className="m-2">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Tree</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup color="secondary" size="large" className="m-2">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Tree</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
</Playground>
|
||||
|
||||
## Group orientation
|
||||
|
||||
<Playground>
|
||||
<div className="p-4 flex flex-row justify-center">
|
||||
<ButtonGroup orientation="vertical" color="primary" className="m-2">
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Tree</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup
|
||||
orientation="vertical"
|
||||
color="primary"
|
||||
variant="contained"
|
||||
className="m-2"
|
||||
>
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Tree</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup
|
||||
orientation="vertical"
|
||||
color="primary"
|
||||
variant="text"
|
||||
className="m-2"
|
||||
>
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Tree</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
</Playground>
|
||||
|
||||
## Split Button
|
||||
|
||||
<Playground>
|
||||
<div className="p-4 flex flex-col items-center">
|
||||
<ButtonGroup color="primary" className="m-2">
|
||||
<Button>Options</Button>
|
||||
<IconButton className="mr-2">
|
||||
<Icon name="settings" />
|
||||
</IconButton>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={ButtonGroup} />
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import debounce from 'lodash.debounce';
|
||||
import { IconButton, Icon } from '@ohif/ui';
|
||||
import { IconButton, Icon } from '../';
|
||||
|
||||
import './CinePlayerCustomInputRange.css';
|
||||
|
||||
|
||||
@@ -1,42 +0,0 @@
|
||||
---
|
||||
name: CinePlayer
|
||||
menu: General
|
||||
route: components/CinePlayer
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Playground, Props } from 'docz';
|
||||
import { CinePlayer } from '@ohif/ui';
|
||||
|
||||
# Input Text
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { CinePlayer } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
return (
|
||||
<div className="flex flex-col flex-1 p-4 items-center">
|
||||
<div className="w-56">
|
||||
<CinePlayer
|
||||
cineMinFrameRate={1}
|
||||
cineMaxFrameRate={90}
|
||||
cineStepFrameRate={1}
|
||||
cineFrameRate={24}
|
||||
isPlaying={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}}
|
||||
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={CinePlayer} />
|
||||
@@ -1,49 +0,0 @@
|
||||
---
|
||||
name: Context Menu
|
||||
menu: General
|
||||
route: components/contextMenu
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { ContextMenu } from '../';
|
||||
|
||||
# Context Menu
|
||||
|
||||
...
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { ContextMenu } from '@ohif/ui';
|
||||
```
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
const items = [
|
||||
{
|
||||
label: 'Delete measurement',
|
||||
actionType: 'Delete',
|
||||
action: () => alert('Delete'),
|
||||
},
|
||||
{
|
||||
label: 'Relabel',
|
||||
actionType: 'setLabel',
|
||||
action: () => alert('Relabel'),
|
||||
},
|
||||
{
|
||||
label: 'Add Description',
|
||||
actionType: 'setDescription',
|
||||
action: () => alert('Add Description'),
|
||||
},
|
||||
];
|
||||
return (
|
||||
<div className="p-4">
|
||||
<ContextMenu items={items} />
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={ContextMenu} />
|
||||
@@ -1,45 +0,0 @@
|
||||
---
|
||||
name: Date Range
|
||||
menu: Form
|
||||
route: components/date-range
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Playground, Props } from 'docz';
|
||||
import { DateRange } from '../';
|
||||
|
||||
# Date Range
|
||||
|
||||
Date Range is used to select a range of dates.
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { DateRange } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Date Range
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
const [dates, setDates] = useState({
|
||||
startDate: null,
|
||||
endDate: null,
|
||||
});
|
||||
return (
|
||||
<div className="p-4 flex flex-col items-center">
|
||||
<DateRange
|
||||
startDate={dates.startDate}
|
||||
endDate={dates.endDate}
|
||||
onChange={({ startDate, endDate }) =>
|
||||
setDates({ startDate, endDate })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={DateRange} />
|
||||
@@ -1,68 +0,0 @@
|
||||
---
|
||||
name: Dropdown
|
||||
menu: General
|
||||
route: components/dropdown
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { Dropdown, IconButton, Icon } from '../';
|
||||
|
||||
# Dropdown
|
||||
|
||||
This component is used when there are more than a few options to choose from. By
|
||||
hovering or clicking on the trigger, a dropdown menu will appear, which allows
|
||||
you to choose an option and execute the relevant action.
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { Dropdown } from '@ohif/ui';
|
||||
```
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
const handleClick = () => {
|
||||
alert("Clicked");
|
||||
}
|
||||
return (
|
||||
<div className="py-4">
|
||||
<Dropdown
|
||||
showDropdownIcon={false}
|
||||
list={[
|
||||
{
|
||||
title: 'Option 1',
|
||||
icon: 'info',
|
||||
onClick: handleClick,
|
||||
},
|
||||
{
|
||||
title: 'Option 2',
|
||||
icon: 'settings',
|
||||
onClick: handleClick,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<IconButton
|
||||
variant="text"
|
||||
color="inherit"
|
||||
size="initial"
|
||||
className="text-primary-active"
|
||||
>
|
||||
<Icon name="settings" />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
variant="text"
|
||||
color="inherit"
|
||||
size="initial"
|
||||
className="text-primary-active"
|
||||
>
|
||||
<Icon name="chevron-down" />
|
||||
</IconButton>
|
||||
</Dropdown>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={Dropdown} />
|
||||
@@ -1,30 +0,0 @@
|
||||
---
|
||||
name: Empty Studies
|
||||
menu: Data Display
|
||||
route: components/empty-studies
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { EmptyStudies } from '../';
|
||||
|
||||
# Empty Studies
|
||||
|
||||
This component can be used to display a message when there are no studies.
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { EmptyStudies } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<div className="p-4">
|
||||
<EmptyStudies />
|
||||
</div>
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={EmptyStudies} />
|
||||
@@ -1,59 +0,0 @@
|
||||
---
|
||||
name: Error Boundary
|
||||
menu: Data Display
|
||||
route: components/errorBoundary
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { ErrorBoundary } from '../';
|
||||
|
||||
# Error Boundary
|
||||
|
||||
This component can be used to display a message or handle unhandled errors.
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { ErrorBoundary } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<div className="p-4">
|
||||
<ErrorBoundary context="Somewhere">
|
||||
{() => {
|
||||
throw new Error('Error!');
|
||||
return <p></p>;
|
||||
}}
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
</Playground>
|
||||
|
||||
## Custom error fallback
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
const CustomFallback = ({ error, componentStack, resetErrorBoundary }) => {
|
||||
return (
|
||||
<div>
|
||||
<p>This is a custom fallback!</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<div className="p-4">
|
||||
<ErrorBoundary context="Somewhere" fallbackComponent={CustomFallback}>
|
||||
{() => {
|
||||
throw new Error('Error!');
|
||||
return <p></p>;
|
||||
}}
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={ErrorBoundary} />
|
||||
@@ -1,58 +0,0 @@
|
||||
---
|
||||
name: Expandable Toolbar Button
|
||||
menu: General
|
||||
route: components/expandableToolbarButton
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Playground, Props } from 'docz';
|
||||
import { ExpandableToolbarButton, ListMenu } from '../';
|
||||
|
||||
# Toolbar Button
|
||||
|
||||
Expandable Toolbar Buttons are used to populate the Toolbar.
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { ExpandableToolbarButton, ListMenu } from '@ohif/ui';
|
||||
```
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
const props = {
|
||||
content: ListMenu,
|
||||
contentProps: {
|
||||
options: [
|
||||
{ value: 'windowLevelPreset1', title: 'Soft tissue', subtitle: '400 / 40' },
|
||||
{ value: 'windowLevelPreset2', title: 'Lung', subtitle: '1500 / -600' },
|
||||
{ value: 'windowLevelPreset3', title: 'Liver', subtitle: '150 / 90' },
|
||||
{ value: 'windowLevelPreset4', title: 'Bone', subtitle: '80 / 40' },
|
||||
{ value: 'windowLevelPreset5', title: 'Brain', subtitle: '2500 / 480' },
|
||||
],
|
||||
renderer: ({ title, subtitle, isActive, index }) => (
|
||||
<>
|
||||
<div>
|
||||
<span className={classnames(isActive ? "text-black" : "text-white", "mr-2 text-base")}>
|
||||
{title}
|
||||
</span>
|
||||
<span className={classnames(isActive ? "text-black" : "text-aqua-pale", "font-thin text-sm")}>
|
||||
{subtitle}
|
||||
</span>
|
||||
</div>
|
||||
<span className={classnames(isActive ? "text-black" : "text-primary-active", "text-sm")}>{index + 1}</span>
|
||||
</>
|
||||
)
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div className="py-10 flex justify-center">
|
||||
<ExpandableToolbarButton {...props} />
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={ExpandableToolbarButton} />
|
||||
@@ -2,7 +2,7 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import classNames from 'classnames';
|
||||
import { NavBar, Svg, Icon, IconButton, Dropdown } from '@ohif/ui';
|
||||
import { NavBar, Svg, Icon, IconButton, Dropdown } from '../';
|
||||
|
||||
function Header({ children, menuOptions, isReturnEnabled, onClickReturnButton, isSticky, WhiteLabeling }) {
|
||||
const { t } = useTranslation('Header');
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import { HotkeyField, Typography } from '@ohif/ui';
|
||||
import { HotkeyField, Typography } from '../';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
|
||||
|
||||
@@ -1,51 +0,0 @@
|
||||
---
|
||||
name: Icon
|
||||
menu: General
|
||||
route: components/icon
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { Icon } from '../';
|
||||
import { ICONS } from './getIcon';
|
||||
|
||||
# Icon
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { Icon } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<div className="p-4">
|
||||
<Icon name="series-active" className="text-primary-light m-4" />
|
||||
</div>
|
||||
</Playground>
|
||||
|
||||
## All Icons
|
||||
|
||||
<div className="p-4 flex flex-wrap items-center bg-black py-8">
|
||||
{Object.keys(ICONS)
|
||||
.sort()
|
||||
.map((name, i) => {
|
||||
return (
|
||||
<React.Fragment key={i}>
|
||||
<div className="flex flex-col items-center w-48 py-4">
|
||||
<div className="flex items-center justify-center rounded border border-primary-light p-4 m-2 w-20 h-20">
|
||||
<Icon name={name} className="text-primary-light w-6" />
|
||||
</div>
|
||||
<div className="break-normal text-white">{name}</div>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={Icon} />
|
||||
|
||||
The `Icon` component takes a single prop of `name`, which indicates which Icon
|
||||
should be displayed. The icon inherit the component text/font styles.
|
||||
@@ -1,39 +0,0 @@
|
||||
---
|
||||
name: Input
|
||||
menu: Form
|
||||
route: components/input
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { Input } from '../';
|
||||
|
||||
# Input
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { Input } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
const [inputValue, setInputValue] = React.useState('');
|
||||
return (
|
||||
<div className="p-4">
|
||||
<Input
|
||||
transparent
|
||||
containerClassName="mb-3"
|
||||
label="Label"
|
||||
placeholder="With Label"
|
||||
/>
|
||||
<Input placeholder="Without label" />
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={Input} />
|
||||
@@ -1,43 +0,0 @@
|
||||
---
|
||||
name: InputDateRange
|
||||
menu: Form
|
||||
route: components/InputDateRange
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Playground, Props } from 'docz';
|
||||
import { InputDateRange } from '../';
|
||||
|
||||
# Input Date Range
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { InputDateRange } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
const [dates, setDates] = useState({
|
||||
startDate: null,
|
||||
endDate: null,
|
||||
});
|
||||
return (
|
||||
<div className="p-4 flex flex-col items-center">
|
||||
<div className="w-56">
|
||||
<InputDateRange
|
||||
label="Dates"
|
||||
value={dates}
|
||||
onChange={(dates) => setDates(dates)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={InputDateRange} />
|
||||
@@ -1,90 +0,0 @@
|
||||
---
|
||||
name: InputGroup
|
||||
menu: Form
|
||||
route: components/InputGroup
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Playground, Props } from 'docz';
|
||||
import { InputGroup } from '../';
|
||||
|
||||
# Input Group
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { InputGroup } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
const [filterValues, setFilterValues] = useState({
|
||||
patient: '',
|
||||
studyDate: {
|
||||
startDate: null,
|
||||
endDate: null,
|
||||
},
|
||||
modality: [],
|
||||
});
|
||||
const [filterSorting, setFilterSorting] = useState({
|
||||
sortBy: '',
|
||||
sortDirection: 'none',
|
||||
});
|
||||
const filtersMeta = [
|
||||
{
|
||||
name: 'patient',
|
||||
displayName: 'Patient Name',
|
||||
inputType: 'Text',
|
||||
isSortable: true,
|
||||
gridCol: 6,
|
||||
},
|
||||
{
|
||||
name: 'studyDate',
|
||||
displayName: 'Study date',
|
||||
inputType: 'DateRange',
|
||||
isSortable: true,
|
||||
gridCol: 6,
|
||||
},
|
||||
{
|
||||
name: 'modality',
|
||||
displayName: 'Modality',
|
||||
inputType: 'MultiSelect',
|
||||
inputProps: {
|
||||
options: [
|
||||
{ value: 'SEG', label: 'SEG' },
|
||||
{ value: 'CT', label: 'CT' },
|
||||
{ value: 'MR', label: 'MR' },
|
||||
{ value: 'SR', label: 'SR' },
|
||||
],
|
||||
},
|
||||
isSortable: true,
|
||||
gridCol: 6,
|
||||
},
|
||||
{
|
||||
name: 'numberOfInstance',
|
||||
displayName: 'Number of Instances',
|
||||
inputType: 'None',
|
||||
isSortable: true,
|
||||
gridCol: 6,
|
||||
},
|
||||
];
|
||||
return (
|
||||
<div className="py-4">
|
||||
<InputGroup
|
||||
inputMeta={filtersMeta}
|
||||
values={filterValues}
|
||||
onValuesChange={setFilterValues}
|
||||
sorting={filterSorting}
|
||||
onSortingChange={setFilterSorting}
|
||||
isSortingEnable={true}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={InputGroup} />
|
||||
@@ -1,48 +0,0 @@
|
||||
---
|
||||
name: InputMultiSelect
|
||||
menu: Form
|
||||
route: components/InputMultiSelect
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Playground, Props } from 'docz';
|
||||
import { InputMultiSelect } from '../';
|
||||
|
||||
# Input Multi Select
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { InputMultiSelect } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
const [values, setValues] = useState([]);
|
||||
return (
|
||||
<div className="flex flex-col flex-1 p-4 items-center">
|
||||
<div className="w-56">
|
||||
<InputMultiSelect
|
||||
label="Modality"
|
||||
options={[
|
||||
{ value: 'SEG', label: 'SEG' },
|
||||
{ value: 'CT', label: 'CT' },
|
||||
{ value: 'MR', label: 'MR' },
|
||||
{ value: 'SR', label: 'SR' },
|
||||
]}
|
||||
value={values}
|
||||
onChange={(values) => {
|
||||
setValues(values);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={InputMultiSelect} />
|
||||
@@ -1,41 +0,0 @@
|
||||
---
|
||||
name: InputText
|
||||
menu: Form
|
||||
route: components/InputText
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Playground, Props } from 'docz';
|
||||
import { InputText } from '../';
|
||||
|
||||
# Input Text
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { InputText } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
const [text, setText] = useState('');
|
||||
return (
|
||||
<div className="flex flex-col flex-1 p-4 items-center">
|
||||
<div className="w-56">
|
||||
<InputText
|
||||
label='Name'
|
||||
value={text}
|
||||
onChange={value => {setText(value)}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}}
|
||||
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={InputText} />
|
||||
@@ -1,32 +0,0 @@
|
||||
---
|
||||
name: Label
|
||||
menu: Form
|
||||
route: components/label
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { Label } from '../';
|
||||
|
||||
# Label
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { Label } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
return (
|
||||
<div className="p-4">
|
||||
<Label text="Label" />
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={Label} />
|
||||
@@ -1,52 +0,0 @@
|
||||
---
|
||||
name: List Menu
|
||||
menu: General
|
||||
route: components/listMenu
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Playground, Props } from 'docz';
|
||||
import { ListMenu, ToolbarButton } from '../';
|
||||
|
||||
# List Menu
|
||||
|
||||
List Menus are used to populate expandable Toolbar.
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { ListMenu, ToolbarButton } from '@ohif/ui';
|
||||
```
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
return (
|
||||
<ToolbarButton items={[
|
||||
{ value: 'windowLevelPreset1', title: 'Soft tissue', subtitle: '400 / 40' },
|
||||
{ value: 'windowLevelPreset2', title: 'Lung', subtitle: '1500 / -600' },
|
||||
{ value: 'windowLevelPreset3', title: 'Liver', subtitle: '150 / 90' },
|
||||
{ value: 'windowLevelPreset4', title: 'Bone', subtitle: '80 / 40' },
|
||||
{ value: 'windowLevelPreset5', title: 'Brain', subtitle: '2500 / 480' },
|
||||
]}
|
||||
renderer={
|
||||
({ title, subtitle, isActive, index }) => (
|
||||
<>
|
||||
<div>
|
||||
<span className={classnames(isActive ? "text-black" : "text-white", "mr-2 text-base")}>
|
||||
{title}
|
||||
</span>
|
||||
<span className={classnames(isActive ? "text-black" : "text-aqua-pale", "font-thin text-sm")}>
|
||||
{subtitle}
|
||||
</span>
|
||||
</div>
|
||||
<span className={classnames(isActive ? "text-black" : "text-primary-active", "text-sm")}>{index + 1}</span>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={ListMenu} />
|
||||
@@ -1,58 +0,0 @@
|
||||
---
|
||||
name: Measurement Table
|
||||
menu: Data Display
|
||||
route: components/measurementTable
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Playground, Props } from 'docz';
|
||||
import { MeasurementTable } from '../';
|
||||
|
||||
# Measurement Table
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { MeasurementTable } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
const [activeMeasurementItem, setActiveMeasurementItem] = useState(null);
|
||||
const measurementTableData = {
|
||||
title: 'Measurements',
|
||||
amount: 10,
|
||||
data: new Array(10).fill({}).map((el, i) => ({
|
||||
id: i + 1,
|
||||
label: 'Label short description',
|
||||
displayText: ['24.0 x 24.0 mm (S:4, I:22)'],
|
||||
isActive: activeMeasurementItem === i + 1,
|
||||
})),
|
||||
onClick: (id) => setActiveMeasurementItem((s) => (s === id ? null : id)),
|
||||
onEdit: (id) => alert(`Edit: ${id}`),
|
||||
};
|
||||
return (
|
||||
<div className="p-4 w-80">
|
||||
<MeasurementTable {...measurementTableData} />
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
|
||||
## Empty Data
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
return (
|
||||
<div className="p-4 w-80">
|
||||
<MeasurementTable title="Measurements" />
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={MeasurementTable} />
|
||||
@@ -4,8 +4,8 @@ import ReactModal from 'react-modal';
|
||||
|
||||
import './Modal.css';
|
||||
|
||||
import { Typography, Icon } from '../../components';
|
||||
import { useModal } from '../../contextProviders';
|
||||
import { Typography, Icon } from '../';
|
||||
import { useModal } from '../../contextProviders'
|
||||
|
||||
if (typeof document !== 'undefined') {
|
||||
ReactModal.setAppElement(document.getElementById('root'));
|
||||
|
||||
@@ -1,30 +0,0 @@
|
||||
---
|
||||
name: NavBar
|
||||
menu: Navigation
|
||||
route: components/navBar
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { NavBar, Typography } from '../';
|
||||
|
||||
# NavBar
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { NavBar } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<NavBar className="justify-center">
|
||||
<Typography variant="h3" className="m-2">
|
||||
Header content
|
||||
</Typography>
|
||||
</NavBar>
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={NavBar} />
|
||||
@@ -1,58 +0,0 @@
|
||||
---
|
||||
name: Notification
|
||||
menu: Feedback
|
||||
route: components/notification
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { Notification } from '../';
|
||||
|
||||
# Notification
|
||||
|
||||
A notification displays a short message in a way that attracts the user's
|
||||
attention without interrupting the user's task.
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { Notification } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
return (
|
||||
<div className="p-4 w-full lg:w-2/3">
|
||||
<Notification
|
||||
message="Track all measurement for this series?"
|
||||
type="info"
|
||||
actions={[
|
||||
{
|
||||
type: 'cancel',
|
||||
text: 'No',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
type: 'secondary',
|
||||
text: 'No, do not ask again',
|
||||
value: -1,
|
||||
},
|
||||
{
|
||||
type: 'primary',
|
||||
text: 'Yes',
|
||||
value: 1,
|
||||
},
|
||||
]}
|
||||
onSubmit={value => {
|
||||
window.alert(value);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={Notification} />
|
||||
@@ -1,37 +0,0 @@
|
||||
---
|
||||
name: Segmentation Table
|
||||
menu: Data Display
|
||||
route: components/segmentationTable
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { SegmentationTable } from '../';
|
||||
|
||||
# Segmentation Table
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { SegmentationTable } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
const tableData = {
|
||||
title: 'Segments',
|
||||
amount: 12,
|
||||
data: new Array(12).fill(''),
|
||||
};
|
||||
return (
|
||||
<div className="p-4 w-80">
|
||||
<SegmentationTable {...tableData} />
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={SegmentationTable} />
|
||||
@@ -1,70 +0,0 @@
|
||||
---
|
||||
name: Select
|
||||
menu: Form
|
||||
route: components/select
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { Select } from '../';
|
||||
|
||||
# Select
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { Select } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<div className="flex flex-col flex-1 p-4 items-center">
|
||||
<div className="w-56">
|
||||
<Select
|
||||
options={[
|
||||
{ value: 'ONE', label: 'ONE' },
|
||||
{ value: 'TWO', label: 'TWO' },
|
||||
{ value: 'THREE', label: 'THREE' },
|
||||
{ value: 'FOUR', label: 'FOUR' },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Playground>
|
||||
|
||||
## Disabled
|
||||
|
||||
<Playground>
|
||||
<div className="flex flex-col flex-1 p-4 items-center">
|
||||
<div className="w-56">
|
||||
<Select
|
||||
isDisabled
|
||||
options={[
|
||||
{ value: 'ONE', label: 'ONE' },
|
||||
{ value: 'TWO', label: 'TWO' },
|
||||
{ value: 'THREE', label: 'THREE' },
|
||||
{ value: 'FOUR', label: 'FOUR' },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Playground>
|
||||
|
||||
## No Options
|
||||
|
||||
<Playground>
|
||||
<div className="flex flex-col flex-1 p-4 items-center">
|
||||
<div className="w-56">
|
||||
<Select
|
||||
noOptionsMessage={() => {
|
||||
'No Options';
|
||||
}}
|
||||
options={[]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={Select} />
|
||||
@@ -1,75 +0,0 @@
|
||||
---
|
||||
name: SidePanel
|
||||
menu: General
|
||||
route: components/sidePanel
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { SidePanel } from '../';
|
||||
|
||||
# SidePanel
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { SidePanel } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<div
|
||||
className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
|
||||
style={{ height: '500px' }}
|
||||
>
|
||||
<SidePanel
|
||||
side="left"
|
||||
childComponents={{
|
||||
iconName: "group-layers",
|
||||
iconLabel: "Studies",
|
||||
name: "studies",
|
||||
label: "Studies",
|
||||
content: <div className="flex justify-center text-white p-2">panel content</div>,
|
||||
}}
|
||||
/>
|
||||
<div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white">
|
||||
CONTENT
|
||||
</div>
|
||||
</div>
|
||||
</Playground>
|
||||
|
||||
|
||||
## Multiple panels
|
||||
|
||||
<Playground>
|
||||
<div
|
||||
className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
|
||||
style={{ height: '500px' }}
|
||||
>
|
||||
<SidePanel
|
||||
side="left"
|
||||
childComponents={[{
|
||||
iconName: "group-layers",
|
||||
iconLabel: "Studies",
|
||||
name: "studies",
|
||||
label: "Studies",
|
||||
content: <div className="flex justify-center text-white p-2">studies panel content</div>,
|
||||
},
|
||||
{
|
||||
iconName: "list-bullets",
|
||||
iconLabel: "Measure",
|
||||
name: "measurements",
|
||||
label: "Measurements",
|
||||
content: <div className="flex justify-center text-white p-2">measure panel content</div>,
|
||||
}]}
|
||||
/>
|
||||
<div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white">
|
||||
CONTENT
|
||||
</div>
|
||||
</div>
|
||||
</Playground>
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={SidePanel} />
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import SnackbarItem from './SnackbarItem';
|
||||
import { useSnackbar } from '../../contextProviders';
|
||||
import SnackbarItem from './SnackbarItem'
|
||||
import { useSnackbar } from '../../contextProviders/SnackbarProvider';
|
||||
|
||||
import './Snackbar.css';
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ import classNames from 'classnames';
|
||||
import OutsideClickHandler from 'react-outside-click-handler';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { Icon, Tooltip, ListMenu } from '@ohif/ui';
|
||||
import { Icon, Tooltip, ListMenu } from '../';
|
||||
|
||||
const baseClasses = {
|
||||
Button:
|
||||
|
||||
@@ -1,87 +0,0 @@
|
||||
---
|
||||
name: Split Button
|
||||
menu: General
|
||||
route: components/splitButton
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Playground, Props } from 'docz';
|
||||
import { SplitButton, WindowLevelMenuItem } from '@ohif/ui';
|
||||
|
||||
# Split Button
|
||||
|
||||
Split Buttons are used to populate the Toolbar.
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { SplitButton, WindowLevelMenuItem } from '@ohif/ui';
|
||||
```
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
const mockedProps = {
|
||||
bState: {
|
||||
primaryToolId: 'WWWC',
|
||||
toggles: {},
|
||||
},
|
||||
primary: {
|
||||
tooltip: 'W/L',
|
||||
type: 'tool',
|
||||
icon: 'tool-window-level',
|
||||
onClick: args => console.debug('Primary click!', args),
|
||||
},
|
||||
secondary: {
|
||||
icon: 'chevron-down',
|
||||
label: '',
|
||||
isActive: true,
|
||||
tooltip: 'More Measure Tools',
|
||||
},
|
||||
items: [
|
||||
{
|
||||
id: '1',
|
||||
icon: 'tool-layout',
|
||||
label: 'Layout',
|
||||
onClick: args => console.debug('Item click!', args),
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
icon: 'tool-window-level',
|
||||
label: 'W/L',
|
||||
onClick: args => console.debug('Item click!', args),
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
icon: 'tool-length',
|
||||
label: 'Length',
|
||||
onClick: args => console.debug('Item click!', args),
|
||||
},
|
||||
],
|
||||
onClick: args => console.debug('Any click!', args),
|
||||
};
|
||||
return (
|
||||
<div className="mb-2">
|
||||
<div className="flex flex-row w-full justify-center items-center bg-secondary-dark">
|
||||
<SplitButton {...mockedProps} isRadio />
|
||||
<SplitButton
|
||||
{...mockedProps}
|
||||
isAction
|
||||
renderer={WindowLevelMenuItem}
|
||||
items={[
|
||||
{ id: '1', value: 1, title: 'Soft tissue', subtitle: '400 / 40' },
|
||||
{ id: '2', value: 2, title: 'Lung', subtitle: '1500 / -600' },
|
||||
{ id: '3', value: 3, title: 'Liver', subtitle: '150 / 90' },
|
||||
{ id: '4', value: 4, title: 'Bone', subtitle: '80 / 40' },
|
||||
{ id: '5', value: 5, title: 'Brain', subtitle: '2500 / 480' },
|
||||
]}
|
||||
/>
|
||||
<SplitButton {...mockedProps} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={SplitButton} />
|
||||
@@ -1,107 +0,0 @@
|
||||
---
|
||||
name: StudyBrowser
|
||||
menu: General
|
||||
route: components/studyBrowser
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { StudyBrowser } from '../';
|
||||
|
||||
# StudyBrowser
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { StudyBrowser } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
const studyWithSR = {
|
||||
studyInstanceUid: '1',
|
||||
date: '07-Sept-2010',
|
||||
description: 'CHEST/ABD/PELVIS W/CONTRAST',
|
||||
numInstances: 902,
|
||||
modalities: 'CT,SR',
|
||||
displaySets: [
|
||||
{
|
||||
displaySetInstanceUID: 'f69f6asdasd48c-223e-db7f-c4af-b8906641a66e',
|
||||
description: 'Multiple line image series description lorem sit',
|
||||
seriesNumber: 1,
|
||||
numInstances: 68,
|
||||
componentType: 'thumbnailTracked',
|
||||
viewportIdentificator: 'A',
|
||||
isTracked: true,
|
||||
},
|
||||
{
|
||||
displaySetInstanceUID: 'f69f648c-223e-db7f-c4asdasdaf-b8906641a66e',
|
||||
description: 'Multiple line image series description lorem sit',
|
||||
seriesNumber: 1,
|
||||
numInstances: 68,
|
||||
componentType: 'thumbnailTracked',
|
||||
viewportIdentificator: 'B',
|
||||
},
|
||||
{
|
||||
displaySetInstanceUID: 'f69f648c-223e-dasdasdb7f-c4af-b8906641a66e',
|
||||
description: 'Multiple line image series description lorem sit',
|
||||
seriesNumber: 1,
|
||||
numInstances: 68,
|
||||
componentType: 'thumbnailTracked',
|
||||
},
|
||||
{
|
||||
displaySetInstanceUID: 'f69f648c-223e-db7f-c4afas-b8906asd641a66e',
|
||||
description: 'Multiple line description lorem ipsum dolor sit amet',
|
||||
modality: 'SR',
|
||||
componentType: 'thumbnailNoImage',
|
||||
seriesDate: '07-Sept-2010',
|
||||
},
|
||||
],
|
||||
};
|
||||
const studySimple = {
|
||||
studyInstanceUid: '2',
|
||||
date: '07-Sept-2010',
|
||||
description: 'CHEST/ABD/PELVIS W/CONTRAST',
|
||||
numInstances: 902,
|
||||
modalities: 'CT',
|
||||
displaySets: [
|
||||
{
|
||||
displaySetInstanceUID: 'f69f648c-223e-db7f-c4af-b8906641a66e',
|
||||
description: 'Multiple line image series description lorem sit',
|
||||
seriesNumber: 1,
|
||||
numInstances: 68,
|
||||
componentType: 'thumbnailTracked',
|
||||
},
|
||||
],
|
||||
};
|
||||
const tabs = [
|
||||
{
|
||||
name: 'primary',
|
||||
label: 'Primary',
|
||||
studies: [studySimple],
|
||||
},
|
||||
{
|
||||
name: 'recent',
|
||||
label: 'Recent',
|
||||
studies: [studyWithSR, studySimple],
|
||||
},
|
||||
{
|
||||
name: 'all',
|
||||
label: 'All',
|
||||
studies: [studySimple, studyWithSR],
|
||||
},
|
||||
];
|
||||
return (
|
||||
<div className="flex flex-1" style={{height: '400px'}}>
|
||||
<div className="overflow-hidden w-64">
|
||||
<StudyBrowser tabs={tabs} activeTabName='primary' expandedStudyInstanceUIDs={[]} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={StudyBrowser} />
|
||||
@@ -1,46 +0,0 @@
|
||||
---
|
||||
name: StudyItem
|
||||
menu: General
|
||||
route: components/studyItem
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Playground, Props } from 'docz';
|
||||
import { StudyItem } from '../';
|
||||
|
||||
# StudyItem
|
||||
|
||||
Used to expose study information as a card
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { StudyItem } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
const [studyActive, setStudyActive] = useState(null);
|
||||
return (
|
||||
<div className="flex flex-1 items-center justify-center p-4">
|
||||
<div className="w-56">
|
||||
<StudyItem
|
||||
studyInstanceUid="1"
|
||||
date="07-Sept-2010"
|
||||
description="CHEST/ABD/PELVIS W/CONTRAST"
|
||||
numInstances={902}
|
||||
modalities="CT,SR"
|
||||
isActive={studyActive}
|
||||
onClick={() => setStudyActive(studyActive === '1' ? null : '1')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={StudyItem} />
|
||||
@@ -2,7 +2,7 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { Button, Icon, Typography, InputGroup } from '../../components';
|
||||
import { Button, Icon, Typography, InputGroup } from '../';
|
||||
|
||||
const StudyListFilter = ({
|
||||
filtersMeta,
|
||||
|
||||
@@ -1,121 +0,0 @@
|
||||
---
|
||||
name: Study List Filter
|
||||
menu: Data Display
|
||||
route: components/studyListFilter
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Playground, Props } from 'docz';
|
||||
import { StudyListFilter, Modal } from '../';
|
||||
import { ModalProvider } from '../../contextProviders';
|
||||
|
||||
# Study List Filter
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { StudyListFilter, ModalProvider, Modal } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
const defaultFilterValues = {
|
||||
patientName: '',
|
||||
mrn: '',
|
||||
studyDate: {
|
||||
startDate: null,
|
||||
endDate: null,
|
||||
},
|
||||
description: '',
|
||||
modality: undefined,
|
||||
accession: '',
|
||||
sortBy: '',
|
||||
sortDirection: 'none',
|
||||
page: 0,
|
||||
resultsPerPage: 25,
|
||||
};
|
||||
const [filterValues, setFilterValues] = useState(defaultFilterValues);
|
||||
const filtersMeta = [
|
||||
{
|
||||
name: 'patientName',
|
||||
displayName: 'Patient Name',
|
||||
inputType: 'Text',
|
||||
isSortable: true,
|
||||
gridCol: 4,
|
||||
},
|
||||
{
|
||||
name: 'mrn',
|
||||
displayName: 'MRN',
|
||||
inputType: 'Text',
|
||||
isSortable: true,
|
||||
gridCol: 2,
|
||||
},
|
||||
{
|
||||
name: 'studyDate',
|
||||
displayName: 'Study date',
|
||||
inputType: 'DateRange',
|
||||
isSortable: true,
|
||||
gridCol: 5,
|
||||
},
|
||||
{
|
||||
name: 'description',
|
||||
displayName: 'Description',
|
||||
inputType: 'Text',
|
||||
isSortable: true,
|
||||
gridCol: 4,
|
||||
},
|
||||
{
|
||||
name: 'modality',
|
||||
displayName: 'Modality',
|
||||
inputType: 'MultiSelect',
|
||||
inputProps: {
|
||||
options: [
|
||||
{ value: 'SEG', label: 'SEG' },
|
||||
{ value: 'CT', label: 'CT' },
|
||||
{ value: 'MR', label: 'MR' },
|
||||
{ value: 'SR', label: 'SR' },
|
||||
],
|
||||
},
|
||||
isSortable: true,
|
||||
gridCol: 3,
|
||||
},
|
||||
{
|
||||
name: 'accession',
|
||||
displayName: 'Accession',
|
||||
inputType: 'Text',
|
||||
isSortable: true,
|
||||
gridCol: 4,
|
||||
},
|
||||
{
|
||||
name: 'instances',
|
||||
displayName: 'Instances',
|
||||
inputType: 'None',
|
||||
isSortable: true,
|
||||
gridCol: 2,
|
||||
},
|
||||
];
|
||||
const isFiltering = (filterValues, defaultFilterValues) => {
|
||||
return Object.keys(defaultFilterValues).some(name => {
|
||||
return filterValues[name] !== defaultFilterValues[name];
|
||||
});
|
||||
};
|
||||
return (
|
||||
<ModalProvider modal={Modal}>
|
||||
<StudyListFilter
|
||||
numOfStudies={100}
|
||||
filtersMeta={filtersMeta}
|
||||
filterValues={filterValues}
|
||||
onChange={setFilterValues}
|
||||
clearFilters={() => setFilterValues(defaultFilterValues)}
|
||||
isFiltering={isFiltering(filterValues, defaultFilterValues)}
|
||||
/>
|
||||
</ModalProvider>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={StudyListFilter} />
|
||||
@@ -1,45 +0,0 @@
|
||||
---
|
||||
name: Study List Pagination
|
||||
menu: Navigation
|
||||
route: components/studyListPagination
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Playground, Props } from 'docz';
|
||||
import { StudyListPagination } from '../';
|
||||
|
||||
# StudyListPagination
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { StudyListPagination } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [perPage, setPerPage] = useState(25);
|
||||
const onChangePage = (page) => {
|
||||
setCurrentPage(page);
|
||||
};
|
||||
const onChangePerPage = (perPage) => {
|
||||
setPerPage(perPage);
|
||||
setCurrentPage(1);
|
||||
};
|
||||
return (
|
||||
<StudyListPagination
|
||||
onChangePage={onChangePage}
|
||||
onChangePerPage={onChangePerPage}
|
||||
currentPage={currentPage}
|
||||
perPage={perPage}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={StudyListPagination} />
|
||||
@@ -1,62 +0,0 @@
|
||||
---
|
||||
name: Study List Table
|
||||
menu: Data Display
|
||||
route: components/studyListTable
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Playground, Props } from 'docz';
|
||||
import { StudyListTable } from '../';
|
||||
|
||||
# StudyListTable
|
||||
|
||||
This component is used to display a studies list.
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { StudyListTable } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
const studies = new Array(10).fill('');
|
||||
const [expandedRows, setExpandedRows] = useState([]);
|
||||
const tableDataSource = studies.map((study, key) => {
|
||||
const rowKey = key + 1;
|
||||
const isExpanded = expandedRows.some((k) => k === rowKey);
|
||||
return {
|
||||
row: [
|
||||
{ key: 'Cell 01', content: 'Cell 01', gridCol: 2 },
|
||||
{ key: 'Cell 02', content: 'Cell 02', gridCol: 4 },
|
||||
{ key: 'Cell 03', content: 'Cell 03', gridCol: 4 },
|
||||
{ key: 'Cell 04', content: 'Cell 04', gridCol: 4 },
|
||||
],
|
||||
expandedContent: (
|
||||
<td className="w-full p-8">
|
||||
Custom expanded content for row {rowKey}
|
||||
</td>
|
||||
),
|
||||
onClickRow: () =>
|
||||
setExpandedRows((rows) =>
|
||||
isExpanded ? rows.filter((n) => rowKey !== n) : [...rows, rowKey]
|
||||
),
|
||||
isExpanded,
|
||||
};
|
||||
});
|
||||
return (
|
||||
<div className="py-4">
|
||||
<StudyListTable
|
||||
tableDataSource={tableDataSource}
|
||||
numOfStudies={studies.length}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={StudyListTable} />
|
||||
@@ -1,78 +0,0 @@
|
||||
---
|
||||
name: Table
|
||||
menu: Data Display
|
||||
route: components/table
|
||||
---
|
||||
|
||||
import { Playground, Props, Link } from 'docz';
|
||||
import { Table, TableHead, TableBody, TableRow, TableCell } from '../';
|
||||
|
||||
# Table
|
||||
|
||||
Tables display sets of data.
|
||||
|
||||
_The Table component and its components in the tree are built using divs._
|
||||
|
||||
## Import
|
||||
|
||||
Check the given example below to see how to import each component to create a
|
||||
table.
|
||||
|
||||
```javascript
|
||||
import { Table, TableBody, TableCell, TableHead, TableRow } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<div className="p-4">
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Item 01</TableCell>
|
||||
<TableCell>Item 02</TableCell>
|
||||
<TableCell>Item 03</TableCell>
|
||||
<TableCell>Item 04</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{new Array(25).fill('').map((row) => (
|
||||
<TableRow>
|
||||
<TableCell>Content 01</TableCell>
|
||||
<TableCell>Content 02</TableCell>
|
||||
<TableCell>Content 03</TableCell>
|
||||
<TableCell>Content 04</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</Playground>
|
||||
|
||||
## Table width
|
||||
|
||||
Table has full width by default. If you want to change its width, you will have
|
||||
to set the `fullWidth` prop to `false` and then define your own table width by
|
||||
passing a `className` or `style`.
|
||||
|
||||
## Properties
|
||||
|
||||
### Table Props
|
||||
|
||||
<Props of={Table} />
|
||||
|
||||
### TableHead Props
|
||||
|
||||
<Props of={TableHead} />
|
||||
|
||||
### TableBody Props
|
||||
|
||||
<Props of={TableBody} />
|
||||
|
||||
### TableRow Props
|
||||
|
||||
<Props of={TableRow} />
|
||||
|
||||
### TableCell Props
|
||||
|
||||
<Props of={TableCell} />
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import '../../gatsby-theme-docz/tailwind.css';
|
||||
import '../../tailwind.css';
|
||||
import '../../assets/styles/styles.css';
|
||||
|
||||
const ThemeWrapper = ({ children }) => (
|
||||
|
||||
@@ -1,40 +0,0 @@
|
||||
---
|
||||
name: Thumbnail
|
||||
menu: General
|
||||
route: components/thumbnail
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { Thumbnail } from '../';
|
||||
|
||||
# Thumbnail
|
||||
|
||||
Used to expose a display set showing some information about the group of images
|
||||
and a thumbnail
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { Thumbnail } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<div className="flex flex-1 items-center justify-center p-4">
|
||||
<div className="w-56">
|
||||
<Thumbnail
|
||||
imageAltText="DisplaySet thumbnail image"
|
||||
description="Multiple line image series description lorem sit"
|
||||
seriesNumber={4}
|
||||
numInstances={902}
|
||||
onClick={() => alert('Thumbnail was clicked!')}
|
||||
isActive={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={Thumbnail} />
|
||||
@@ -1,37 +0,0 @@
|
||||
---
|
||||
name: ThumbnailNoImage
|
||||
menu: General
|
||||
route: components/ThumbnailNoImage
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { ThumbnailNoImage } from '../';
|
||||
|
||||
# ThumbnailNoImage
|
||||
|
||||
Used to expose
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { Thumbnail } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<div className="flex flex-1 items-center justify-center p-4">
|
||||
<div className="w-64">
|
||||
<ThumbnailNoImage
|
||||
modality={'SR'}
|
||||
seriesDate="13-Mar-1999"
|
||||
description="Multiple line image series description lorem sit"
|
||||
onClick={() => alert('ThumbnailNoImage was clicked!')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={ThumbnailNoImage} />
|
||||
@@ -1,39 +0,0 @@
|
||||
---
|
||||
name: ThumbnailTracked
|
||||
menu: General
|
||||
route: components/ThumbnailTracked
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { ThumbnailTracked } from '../';
|
||||
|
||||
# ThumbnailTracked
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { ThumbnailTracked } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<div className="flex flex-1 items-center justify-center p-4">
|
||||
<div className="w-64">
|
||||
<ThumbnailTracked
|
||||
imageAltText="DisplaySet thumbnail image"
|
||||
description="Multiple line image series description lorem sit"
|
||||
seriesNumber={4}
|
||||
numInstances={902}
|
||||
onClick={() => alert('Thumbnail was clicked!')}
|
||||
viewportIdentificator={["A"]}
|
||||
isTracked={true}
|
||||
isActive={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={ThumbnailTracked} />
|
||||
@@ -1,44 +0,0 @@
|
||||
---
|
||||
name: Toolbar Button
|
||||
menu: General
|
||||
route: components/toolbarButton
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Playground, Props } from 'docz';
|
||||
import { ToolbarButton } from '../';
|
||||
|
||||
# Toolbar Button
|
||||
|
||||
Toolbar Buttons are used to populate the Toolbar.
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { ToolbarButton } from '@ohif/ui';
|
||||
```
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
const [isActive, setIsActive] = useState(false);
|
||||
const tool = {
|
||||
id: 'Zoom',
|
||||
label: 'Zoom',
|
||||
icon: 'tool-zoom',
|
||||
type: null,
|
||||
commandName: 'setToolActive',
|
||||
commandOptions: { toolName: 'Zoom' },
|
||||
onClick: () => setIsActive(true),
|
||||
isActive,
|
||||
};
|
||||
return (
|
||||
<div className="py-10 flex justify-center">
|
||||
<ToolbarButton {...tool} />
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={ToolbarButton} />
|
||||
@@ -1,40 +0,0 @@
|
||||
---
|
||||
name: Tooltip
|
||||
menu: Data Display
|
||||
route: components/tooltip
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { Tooltip, Typography } from '../';
|
||||
|
||||
# Tooltip
|
||||
|
||||
Tooltips display informative content when users hover over, focus on, or tap an
|
||||
element.
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { Tooltip } from '@ohif/ui';
|
||||
```
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
const tooltips = ['bottom', 'bottom-left', 'bottom-right', 'left', 'right'];
|
||||
return (
|
||||
<div className="py-10 flex flex-col items-center justify-center">
|
||||
{tooltips.map((tooltip) => (
|
||||
<div className="mb-16">
|
||||
<Tooltip content="Tooltip content" position={tooltip}>
|
||||
<Typography>Tooltip {tooltip}</Typography>
|
||||
</Tooltip>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={Tooltip} />
|
||||
@@ -1,30 +0,0 @@
|
||||
---
|
||||
name: TooltipClipboard
|
||||
menu: Data Display
|
||||
route: components/tooltipClipboard
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { TooltipClipboard } from '../';
|
||||
|
||||
# Tooltip Clipboard
|
||||
|
||||
Tooltips display informative content when users hover over, focus on, or tap an
|
||||
element.
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { TooltipClipboard } from '@ohif/ui';
|
||||
```
|
||||
|
||||
<Playground>
|
||||
<div className="p-4">
|
||||
<TooltipClipboard>Text to be copied</TooltipClipboard>
|
||||
</div>
|
||||
); }}
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={TooltipClipboard} />
|
||||
@@ -1,69 +0,0 @@
|
||||
---
|
||||
name: Typography
|
||||
menu: General
|
||||
route: components/typography
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { Typography } from '../';
|
||||
|
||||
# Typography
|
||||
|
||||
Use typography to display text using the available props for customizing your
|
||||
content.
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { Typography } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<div className="p-4">
|
||||
<Typography variant="h1">
|
||||
h1. The five boxing wizards jump quickly.
|
||||
</Typography>
|
||||
<Typography variant="h2">
|
||||
h2. The five boxing wizards jump quickly.
|
||||
</Typography>
|
||||
<Typography variant="h3">
|
||||
h3. The five boxing wizards jump quickly.
|
||||
</Typography>
|
||||
<Typography variant="h4">
|
||||
h4. The five boxing wizards jump quickly.
|
||||
</Typography>
|
||||
<Typography variant="h5">
|
||||
h5. The five boxing wizards jump quickly.
|
||||
</Typography>
|
||||
<Typography variant="h6">
|
||||
h6. The five boxing wizards jump quickly.
|
||||
</Typography>
|
||||
<Typography variant="subtitle">
|
||||
subtitle. The five boxing wizards jump quickly.
|
||||
</Typography>
|
||||
<Typography variant="body">
|
||||
body. The five boxing wizards jump quickly.
|
||||
</Typography>
|
||||
</div>
|
||||
</Playground>
|
||||
|
||||
## Changing the HTML element
|
||||
|
||||
There are different semantic elements to be used in the Typography component.
|
||||
You can use the prop `component` to associate the component to be rendered with
|
||||
a semantic element. The style of a Typography is independent of the semantic
|
||||
element.
|
||||
|
||||
<Playground>
|
||||
<div className="p-4">
|
||||
<Typography variant="h1" component="h2">
|
||||
This is a h2 using the h1 styles.
|
||||
</Typography>
|
||||
</div>
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={Typography} />
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Select, Typography, Button, HotkeysPreferences } from '@ohif/ui';
|
||||
import { Select, Typography, Button, HotkeysPreferences } from '../';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const UserPreferences = ({ availableLanguages, defaultLanguage, currentLanguage, disabled, hotkeyDefinitions, hotkeyDefaults, onCancel, onSubmit, onReset }) => {
|
||||
|
||||
@@ -1,55 +0,0 @@
|
||||
---
|
||||
name: Viewport
|
||||
menu: Data Display
|
||||
route: components/viewport
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { Viewport } from '../';
|
||||
|
||||
# Viewport
|
||||
|
||||
Viewport component to be used in the ViewportGrid.
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { Viewport } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<div className="p-4 h-screen">
|
||||
<Viewport
|
||||
viewportIndex={0}
|
||||
onSeriesChange={(direction) => alert(`Series ${direction}`)}
|
||||
studyData={{
|
||||
label: 'A',
|
||||
isTracked: true,
|
||||
isLocked: false,
|
||||
isRehydratable: false,
|
||||
studyDate: '07-Sep-2011',
|
||||
currentSeries: 1,
|
||||
seriesDescription:
|
||||
'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
|
||||
modality: 'CT',
|
||||
patientInformation: {
|
||||
patientName: 'Smith, Jane',
|
||||
patientSex: 'F',
|
||||
patientAge: '59',
|
||||
MRN: '10000001',
|
||||
thickness: '5.0mm',
|
||||
spacing: '1.25mm',
|
||||
scanner: 'Aquilion',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div className="flex justify-center items-center h-full">CONTENT</div>
|
||||
</Viewport>
|
||||
</div>
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={Viewport} />
|
||||
@@ -1,135 +0,0 @@
|
||||
---
|
||||
name: Viewport Action Bar
|
||||
menu: Data Display
|
||||
route: components/viewportActionBar
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { ViewportActionBar } from '../';
|
||||
|
||||
# Viewport Action Bar
|
||||
|
||||
Used to display an Action Bar in the viewer.
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { ViewportActionBar } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
<>
|
||||
<Playground>
|
||||
<div className="p-4 h-64">
|
||||
<ViewportActionBar
|
||||
onSeriesChange={direction => alert(`Series ${direction}`)}
|
||||
studyData={{
|
||||
label: 'A',
|
||||
isTracked: true,
|
||||
isLocked: false,
|
||||
isRehydratable: false,
|
||||
studyDate: '07-Sep-2010',
|
||||
currentSeries: 1,
|
||||
seriesDescription:
|
||||
'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
|
||||
modality: 'CT',
|
||||
patientInformation: {
|
||||
patientName: 'Smith, Jane',
|
||||
patientSex: 'F',
|
||||
patientAge: '59',
|
||||
MRN: '10000001',
|
||||
thickness: '2.0mm',
|
||||
spacing: '1.25mm',
|
||||
scanner: 'Aquilion',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Playground>
|
||||
<Playground>
|
||||
<div className="p-4 h-64">
|
||||
<ViewportActionBar
|
||||
onSeriesChange={direction => alert(`Series ${direction}`)}
|
||||
studyData={{
|
||||
label: 'A',
|
||||
isTracked: false,
|
||||
isLocked: false,
|
||||
isRehydratable: true,
|
||||
studyDate: '07-Sep-2010',
|
||||
currentSeries: 1,
|
||||
seriesDescription:
|
||||
'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
|
||||
modality: 'CT',
|
||||
patientInformation: {
|
||||
patientName: 'Smith, Jane',
|
||||
patientSex: 'F',
|
||||
patientAge: '59',
|
||||
MRN: '10000001',
|
||||
thickness: '2.0mm',
|
||||
spacing: '1.25mm',
|
||||
scanner: 'Aquilion',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Playground>
|
||||
<Playground>
|
||||
<div className="p-4 h-64">
|
||||
<ViewportActionBar
|
||||
onSeriesChange={direction => alert(`Series ${direction}`)}
|
||||
studyData={{
|
||||
label: 'A',
|
||||
isTracked: false,
|
||||
isLocked: false,
|
||||
isRehydratable: false,
|
||||
studyDate: '07-Sep-2010',
|
||||
currentSeries: 1,
|
||||
seriesDescription:
|
||||
'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
|
||||
modality: 'SR',
|
||||
patientInformation: {
|
||||
patientName: 'Smith, Jane',
|
||||
patientSex: 'F',
|
||||
patientAge: '59',
|
||||
MRN: '10000001',
|
||||
thickness: '2.0mm',
|
||||
spacing: '1.25mm',
|
||||
scanner: 'Aquilion',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Playground>
|
||||
<Playground>
|
||||
<div className="p-4 h-64">
|
||||
<ViewportActionBar
|
||||
onSeriesChange={direction => alert(`Series ${direction}`)}
|
||||
studyData={{
|
||||
label: 'A',
|
||||
isTracked: false,
|
||||
isLocked: false,
|
||||
isRehydratable: true,
|
||||
studyDate: '07-Sep-2010',
|
||||
currentSeries: 1,
|
||||
seriesDescription:
|
||||
'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
|
||||
modality: 'SR',
|
||||
patientInformation: {
|
||||
patientName: 'Smith, Jane',
|
||||
patientSex: 'F',
|
||||
patientAge: '59',
|
||||
MRN: '10000001',
|
||||
thickness: '2.0mm',
|
||||
spacing: '1.25mm',
|
||||
scanner: 'Aquilion',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Playground>
|
||||
</>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={ViewportActionBar} />
|
||||
@@ -1,40 +0,0 @@
|
||||
---
|
||||
name: ViewportGrid
|
||||
menu: General
|
||||
route: components/viewportGrid
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { DragAndDropProvider } from '../../contextProviders';
|
||||
import { ViewportGrid } from '../../components';
|
||||
|
||||
# ViewportGrid
|
||||
|
||||
Used to display viewports in the viewer page.
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { ViewportGrid } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<DragAndDropProvider>
|
||||
<div className="p-4 h-56">
|
||||
<ViewportGrid numRows={1} numCols={2}>
|
||||
<div className="flex items-center justify-center h-full text-white">
|
||||
Viewport1
|
||||
</div>
|
||||
<div className="flex items-center justify-center h-full text-white">
|
||||
Viewport2
|
||||
</div>
|
||||
</ViewportGrid>
|
||||
</div>
|
||||
</DragAndDropProvider>
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={ViewportGrid} />
|
||||
@@ -1,36 +0,0 @@
|
||||
---
|
||||
name: ViewportPane
|
||||
menu: General
|
||||
route: components/viewport-pane
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { ViewportGrid, ViewportPane } from '../../components';
|
||||
import { DragAndDropProvider } from '../../contextProviders';
|
||||
|
||||
# ViewportPane
|
||||
|
||||
Used to display viewports in the viewer page.
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { ViewportPane } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<div className="p-4 h-56">
|
||||
<DragAndDropProvider>
|
||||
<ViewportGrid numRows={1} numCols={2}>
|
||||
<ViewportPane onDrop={() => {}} isActive={true}><h3>Hello</h3></ViewportPane>
|
||||
<ViewportPane onDrop={() => {}} isActive={false}><h3>World</h3></ViewportPane>
|
||||
</ViewportGrid>
|
||||
</DragAndDropProvider>
|
||||
</div>
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={ViewportPane} />
|
||||
@@ -1,33 +0,0 @@
|
||||
---
|
||||
name: Window Level Menu Item
|
||||
menu: General
|
||||
route: components/windowLevelMenuItem
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Playground, Props } from 'docz';
|
||||
import { ListMenu, WindowLevelMenuItem } from '@ohif/ui';
|
||||
|
||||
# Window Level Menu Item
|
||||
|
||||
Window Level Menu Item are used as renderer of the ListMenu.
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { WindowLevelMenuItem, ListMenu } from '@ohif/ui';
|
||||
```
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
return (
|
||||
<div className="py-10 flex justify-center">
|
||||
<ListMenu renderer={WindowLevelMenuItem} items={[]} />
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={WindowLevelMenuItem} />
|
||||
Reference in new issue
Block a user