othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixes for jsx live blocks

Browse Source
This commit is contained in:
Erik Ziegler 2021-07-14 00:15:02 +02:00
parent 09469e6ac5
commit 7a79e42929
12 changed files with 657 additions and 719 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

687
platform/docs/docs/component-library/components/Button.mdx
View File

@ -18,318 +18,247 @@ import { Button } from '@ohif/ui';
## Outlined Buttons ## Outlined Buttons
````jsx live ```jsx live
<div className="p-4"> <div className="p-4">
<Button variant="outlined" className="m-1"> <Button variant="outlined" className="m-1">
Default Default
</Button> </Button>
<Button variant="outlined" color="primary" className="m-1"> <Button variant="outlined" color="primary" className="m-1">
Primary Primary
</Button> </Button>
<Button variant="outlined" color="secondary" className="m-1"> <Button variant="outlined" color="secondary" className="m-1">
Secondary Secondary
</Button> </Button>
<Button variant="outlined" color="white" className="m-1"> <Button variant="outlined" color="white" className="m-1">
White White
</Button> </Button>
</div> </div>
``` ```
## Contained Buttons ## Contained Buttons
```jsx live ```jsx live
<div className="p-4"> <div className="p-4">
<Button variant="contained" className="m-1"> <Button variant="contained" className="m-1">
Default Default
</Button> </Button>
<Button variant="contained" color="primary" className="m-1"> <Button variant="contained" color="primary" className="m-1">
Primary Primary
</Button> </Button>
<Button variant="contained" color="secondary" className="m-1"> <Button variant="contained" color="secondary" className="m-1">
Secondary Secondary
</Button> </Button>
<Button variant="contained" color="white" className="m-1"> <Button variant="contained" color="white" className="m-1">
White White
</Button> </Button>
</div> </div>
``` ```
## Text Buttons ## Text Buttons
```jsx live ```jsx live
<div className="p-4"> <div className="p-4">
<Button variant="text" className="m-1"> <Button variant="text" className="m-1">
Default Default
</Button> </Button>
<Button variant="text" color="primary" className="m-1"> <Button variant="text" color="primary" className="m-1">
Primary Primary
</Button> </Button>
<Button variant="text" color="secondary" className="m-1"> <Button variant="text" color="secondary" className="m-1">
Secondary Secondary
</Button> </Button>
<Button variant="text" color="white" className="m-1"> <Button variant="text" color="white" className="m-1">
White White
</Button> </Button>
</div> </div>
``` ```
## Rounded Buttons ## Rounded Buttons
```jsx live ```jsx live
<div className="p-4"> <div className="p-4">
<div className="mb-2"> <div className="mb-2">
<Button variant="contained" rounded="none" className="m-1"> <Button variant="contained" rounded="none" className="m-1">
Non Rounded Non Rounded
</Button> </Button>
<Button variant="contained" rounded="small" className="m-1"> <Button variant="contained" rounded="small" className="m-1">
Small Rounded Small Rounded
</Button> </Button>
<Button variant="contained" rounded="medium" className="m-1"> <Button variant="contained" rounded="medium" className="m-1">
Medium Rounded Medium Rounded
</Button> </Button>
<Button variant="contained" rounded="large" className="m-1"> <Button variant="contained" rounded="large" className="m-1">
Large Rounded Large Rounded
</Button> </Button>
<Button variant="contained" rounded="full" className="m-1"> <Button variant="contained" rounded="full" className="m-1">
Full Rounded Full Rounded
</Button> </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> </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>
``` ```
## Sizes ## Sizes
```jsx live ```jsx live
<div className="p-4"> <div className="p-4">
<div> <div>
<Button variant="contained" size="small" className="m-1"> <Button variant="contained" size="small" className="m-1">
Small Small
</Button> </Button>
<Button variant="contained" size="medium" className="m-1"> <Button variant="contained" size="medium" className="m-1">
Medium Medium
</Button> </Button>
<Button variant="contained" size="large" className="m-1"> <Button variant="contained" size="large" className="m-1">
Large Large
</Button> </Button>
</div> </div>
<div> <div>
<Button <Button variant="contained" size="small" color="primary" className="m-1">
variant="contained" Small
size="small" </Button>
color="primary" <Button variant="contained" size="medium" color="primary" className="m-1">
className="m-1" Medium
> </Button>
Small <Button variant="contained" size="large" color="primary" className="m-1">
</Button> Large
<Button </Button>
variant="contained" </div>
size="medium" <div>
color="primary" <Button variant="contained" size="small" color="secondary" className="m-1">
className="m-1" Small
> </Button>
Medium <Button variant="contained" size="medium" color="secondary" className="m-1">
</Button> Medium
<Button </Button>
variant="contained" <Button variant="contained" size="large" color="secondary" className="m-1">
size="large" Large
color="primary" </Button>
className="m-1" </div>
> <div>
Large <Button variant="contained" size="small" color="white" className="m-1">
</Button> Small
</div> </Button>
<div> <Button variant="contained" size="medium" color="white" className="m-1">
<Button Medium
variant="contained" </Button>
size="small" <Button variant="contained" size="large" color="white" className="m-1">
color="secondary" Large
className="m-1" </Button>
> </div>
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> </div>
``` ```
## Buttons with icons ## Buttons with icons
```jsx live ```jsx live
<div className="p-4 flex"> <div className="p-4 flex">
<Button <Button
variant="contained" variant="contained"
color="primary" color="primary"
className="m-1" className="m-1"
startIcon={<Icon name="settings" />} startIcon={<Icon name="settings" />}
> >
Settings Settings
</Button> </Button>
<Button <Button
variant="contained" variant="contained"
color="primary" color="primary"
className="m-1" className="m-1"
endIcon={<Icon name="settings" />} endIcon={<Icon name="settings" />}
> >
Download Download
</Button> </Button>
<Button <Button
variant="outlined" variant="outlined"
rounded="full" rounded="full"
color="default" color="default"
className="m-1" className="m-1"
endIcon={<Icon name="settings" />} endIcon={<Icon name="settings" />}
> >
Download Download
</Button> </Button>
</div> </div>
``` ```
## Icon Buttons ## Icon Buttons
@ -338,104 +267,104 @@ Icon buttons are generally used in toolbars.
```javascript ```javascript
import { IconButton } from '@ohif/ui'; import { IconButton } from '@ohif/ui';
````
````jsx live
<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>
``` ```
```jsx live ```jsx live
<div className="p-4"> <div className="p-4 flex flex-col items-center">
<div className=""> <div className="">
<IconButton className="m-2"> <IconButton className="m-2">
<Icon name="settings" /> <Icon name="settings" />
</IconButton> </IconButton>
<IconButton className="m-2" variant="outlined"> <IconButton className="m-2" variant="text">
<Icon name="settings" /> <Icon name="settings" />
</IconButton> </IconButton>
<IconButton className="m-2" variant="text"> <IconButton className="m-2" variant="outlined">
<Icon name="settings" /> <Icon name="settings" />
</IconButton> </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> </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>
```
```jsx live
<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>
``` ```
## Properties ## Properties

140
platform/docs/docs/component-library/components/ButtonGroup.mdx
View File

@ -18,91 +18,91 @@ import { ButtonGroup } from '@ohif/ui';
## Basic button group ## Basic button group
````jsx live ```jsx live
<div className="p-4 flex flex-col items-center"> <div className="p-4 flex flex-col items-center">
<ButtonGroup color="primary" className="m-2"> <ButtonGroup color="primary" className="m-2">
<Button>One</Button> <Button>One</Button>
<Button>Two</Button> <Button>Two</Button>
<Button>Tree</Button> <Button>Tree</Button>
</ButtonGroup> </ButtonGroup>
<ButtonGroup color="primary" variant="contained" className="m-2"> <ButtonGroup color="primary" variant="contained" className="m-2">
<Button>One</Button> <Button>One</Button>
<Button>Two</Button> <Button>Two</Button>
<Button>Tree</Button> <Button>Tree</Button>
</ButtonGroup> </ButtonGroup>
<ButtonGroup color="primary" variant="text" className="m-2"> <ButtonGroup color="primary" variant="text" className="m-2">
<Button>One</Button> <Button>One</Button>
<Button>Two</Button> <Button>Two</Button>
<Button>Tree</Button> <Button>Tree</Button>
</ButtonGroup> </ButtonGroup>
</div> </div>
``` ```
## Group sizes and colorss ## Group sizes and colorss
```jsx live ```jsx live
<div className="p-4 flex flex-col items-center"> <div className="p-4 flex flex-col items-center">
<ButtonGroup color="default" size="small" className="m-2"> <ButtonGroup color="default" size="small" className="m-2">
<Button>One</Button> <Button>One</Button>
<Button>Two</Button> <Button>Two</Button>
<Button>Tree</Button> <Button>Tree</Button>
</ButtonGroup> </ButtonGroup>
<ButtonGroup color="primary" size="medium" className="m-2"> <ButtonGroup color="primary" size="medium" className="m-2">
<Button>One</Button> <Button>One</Button>
<Button>Two</Button> <Button>Two</Button>
<Button>Tree</Button> <Button>Tree</Button>
</ButtonGroup> </ButtonGroup>
<ButtonGroup color="secondary" size="large" className="m-2"> <ButtonGroup color="secondary" size="large" className="m-2">
<Button>One</Button> <Button>One</Button>
<Button>Two</Button> <Button>Two</Button>
<Button>Tree</Button> <Button>Tree</Button>
</ButtonGroup> </ButtonGroup>
</div> </div>
``` ```
## Group orientation ## Group orientation
```jsx live ```jsx live
<div className="p-4 flex flex-row justify-center"> <div className="p-4 flex flex-row justify-center">
<ButtonGroup orientation="vertical" color="primary" className="m-2"> <ButtonGroup orientation="vertical" color="primary" className="m-2">
<Button>One</Button> <Button>One</Button>
<Button>Two</Button> <Button>Two</Button>
<Button>Tree</Button> <Button>Tree</Button>
</ButtonGroup> </ButtonGroup>
<ButtonGroup <ButtonGroup
orientation="vertical" orientation="vertical"
color="primary" color="primary"
variant="contained" variant="contained"
className="m-2" className="m-2"
> >
<Button>One</Button> <Button>One</Button>
<Button>Two</Button> <Button>Two</Button>
<Button>Tree</Button> <Button>Tree</Button>
</ButtonGroup> </ButtonGroup>
<ButtonGroup <ButtonGroup
orientation="vertical" orientation="vertical"
color="primary" color="primary"
variant="text" variant="text"
className="m-2" className="m-2"
> >
<Button>One</Button> <Button>One</Button>
<Button>Two</Button> <Button>Two</Button>
<Button>Tree</Button> <Button>Tree</Button>
</ButtonGroup> </ButtonGroup>
</div> </div>
``` ```
## Split Button ## Split Button
```jsx live ```jsx live
<div className="p-4 flex flex-col items-center"> <div className="p-4 flex flex-col items-center">
<ButtonGroup color="primary" className="m-2"> <ButtonGroup color="primary" className="m-2">
<Button>Options</Button> <Button>Options</Button>
<IconButton className="mr-2"> <IconButton className="mr-2">
<Icon name="settings" /> <Icon name="settings" />
</IconButton> </IconButton>
</ButtonGroup> </ButtonGroup>
</div> </div>
``` ```
## Properties ## Properties

34
platform/docs/docs/component-library/components/DateRange.mdx
View File

@ -21,24 +21,22 @@ import { DateRange } from '@ohif/ui';
## Date Range ## Date Range
```jsx live ```jsx live
{ function() {
() => { const [dates, setDates] = useState({
const [dates, setDates] = useState({ startDate: null,
startDate: null, endDate: null,
endDate: null, });
}); return (
return ( <div className="p-4 flex flex-col items-center">
<div className="p-4 flex flex-col items-center"> <DateRange
<DateRange startDate={dates.startDate}
startDate={dates.startDate} endDate={dates.endDate}
endDate={dates.endDate} onChange={({ startDate, endDate }) =>
onChange={({ startDate, endDate }) => setDates({ startDate, endDate })
setDates({ startDate, endDate }) }
} />
/> </div>
</div> );
);
};
} }
``` ```

8
platform/docs/docs/component-library/components/ErrorBoundary.mdx
View File

@ -18,10 +18,10 @@ import { ErrorBoundary } from '@ohif/ui';
## Basic usage ## Basic usage
````jsx live ```jsx live
<div className="p-4"> <div className="p-4">
<ErrorBoundary context="Somewhere"> <ErrorBoundary context="Somewhere">
{() => { function() {
throw new Error('Error!'); throw new Error('Error!');
return <p></p>; return <p></p>;
}} }}
@ -32,7 +32,7 @@ import { ErrorBoundary } from '@ohif/ui';
## Custom error fallback ## Custom error fallback
```jsx live ```jsx live
{() => { function() {
const CustomFallback = ({ error, componentStack, resetErrorBoundary }) => { const CustomFallback = ({ error, componentStack, resetErrorBoundary }) => {
return ( return (
<div> <div>
@ -43,7 +43,7 @@ import { ErrorBoundary } from '@ohif/ui';
return ( return (
<div className="p-4"> <div className="p-4">
<ErrorBoundary context="Somewhere" fallbackComponent={CustomFallback}> <ErrorBoundary context="Somewhere" fallbackComponent={CustomFallback}>
{() => { function() {
throw new Error('Error!'); throw new Error('Error!');
return <p></p>; return <p></p>;
}} }}

56
platform/docs/docs/component-library/components/MeasurementTable.mdx
View File

@ -18,39 +18,39 @@ import { MeasurementTable } from '@ohif/ui';
## Basic usage ## Basic usage
````jsx live ```jsx live
{() => { function() {
const [activeMeasurementItem, setActiveMeasurementItem] = useState(null); const [activeMeasurementItem, setActiveMeasurementItem] = useState(null);
const measurementTableData = { const measurementTableData = {
title: 'Measurements', title: 'Measurements',
amount: 10, amount: 10,
data: new Array(10).fill({}).map((el, i) => ({ data: new Array(10).fill({}).map((el, i) => ({
id: i + 1, id: i + 1,
label: 'Label short description', label: 'Label short description',
displayText: ['24.0 x 24.0 mm (S:4, I:22)'], displayText: ['24.0 x 24.0 mm (S:4, I:22)'],
isActive: activeMeasurementItem === i + 1, isActive: activeMeasurementItem === i + 1,
})), })),
onClick: id => setActiveMeasurementItem(s => (s === id ? null : id)), onClick: id => setActiveMeasurementItem(s => (s === id ? null : id)),
onEdit: id => alert(`Edit: ${id}`), onEdit: id => alert(`Edit: ${id}`),
}; };
return ( return (
<div className="p-4 w-80"> <div className="p-4 w-80">
<MeasurementTable {...measurementTableData} /> <MeasurementTable {...measurementTableData} />
</div> </div>
); );
}} }
``` ```
## Empty Data ## Empty Data
```jsx live ```jsx live
{() => { function() {
return ( return (
<div className="p-4 w-80"> <div className="p-4 w-80">
<MeasurementTable title="Measurements" /> <MeasurementTable title="Measurements" />
</div> </div>
); );
}} }
``` ```
## Properties ## Properties

50
platform/docs/docs/component-library/components/Select.mdx
View File

@ -16,37 +16,37 @@ import { Select } from '@ohif/ui';
## Basic usage ## Basic usage
````jsx live ```jsx live
<div className="flex flex-col flex-1 p-4 items-center"> <div className="flex flex-col flex-1 p-4 items-center">
<div className="w-56"> <div className="w-56">
<Select <Select
options={[ options={[
{ value: 'ONE', label: 'ONE' }, { value: 'ONE', label: 'ONE' },
{ value: 'TWO', label: 'TWO' }, { value: 'TWO', label: 'TWO' },
{ value: 'THREE', label: 'THREE' }, { value: 'THREE', label: 'THREE' },
{ value: 'FOUR', label: 'FOUR' }, { value: 'FOUR', label: 'FOUR' },
]} ]}
/> />
</div>
</div> </div>
</div>
``` ```
## Disabled ## Disabled
```jsx live ```jsx live
<div className="flex flex-col flex-1 p-4 items-center"> <div className="flex flex-col flex-1 p-4 items-center">
<div className="w-56"> <div className="w-56">
<Select <Select
isDisabled isDisabled
options={[ options={[
{ value: 'ONE', label: 'ONE' }, { value: 'ONE', label: 'ONE' },
{ value: 'TWO', label: 'TWO' }, { value: 'TWO', label: 'TWO' },
{ value: 'THREE', label: 'THREE' }, { value: 'THREE', label: 'THREE' },
{ value: 'FOUR', label: 'FOUR' }, { value: 'FOUR', label: 'FOUR' },
]} ]}
/> />
</div>
</div> </div>
</div>
``` ```
## No Options ## No Options
@ -55,7 +55,7 @@ import { Select } from '@ohif/ui';
<div className="flex flex-col flex-1 p-4 items-center"> <div className="flex flex-col flex-1 p-4 items-center">
<div className="w-56"> <div className="w-56">
<Select <Select
noOptionsMessage={() => { noOptionsMessage=function() {
'No Options'; 'No Options';
}} }}
options={[]} options={[]}

94
platform/docs/docs/component-library/components/SidePanel.mdx
View File

@ -16,59 +16,69 @@ import { SidePanel } from '@ohif/ui';
## Basic usage ## Basic usage
````jsx live ```jsx live
<div <div
className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full" className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
style={{ height: '500px' }} style={{ height: '500px' }}
> >
<SidePanel <SidePanel
side="left" side="left"
childComponents={{ childComponents={{
iconName: "group-layers", iconName: 'group-layers',
iconLabel: "Studies", iconLabel: 'Studies',
name: "studies", name: 'studies',
label: "Studies", label: 'Studies',
content: <div className="flex justify-center text-white p-2">panel content</div>, 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 className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white">
CONTENT
</div> </div>
</div>
``` ```
## Multiple panels ## Multiple panels
```jsx live ```jsx live
<div <div
className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full" className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
style={{ height: '500px' }} style={{ height: '500px' }}
> >
<SidePanel <SidePanel
side="left" side="left"
childComponents={[{ childComponents={[
iconName: "group-layers", {
iconLabel: "Studies", iconName: 'group-layers',
name: "studies", iconLabel: 'Studies',
label: "Studies", name: 'studies',
content: <div className="flex justify-center text-white p-2">studies panel content</div>, label: 'Studies',
content: (
<div className="flex justify-center text-white p-2">
studies panel content
</div>
),
}, },
{ {
iconName: "list-bullets", iconName: 'list-bullets',
iconLabel: "Measure", iconLabel: 'Measure',
name: "measurements", name: 'measurements',
label: "Measurements", label: 'Measurements',
content: <div className="flex justify-center text-white p-2">measure panel content</div>, content: (
}]} <div className="flex justify-center text-white p-2">
/> measure panel content
<div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white"> </div>
CONTENT ),
</div> },
]}
/>
<div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white">
CONTENT
</div> </div>
</div>
``` ```
## Properties ## Properties
<Props of={SidePanel} /> <Props of={SidePanel} />

15
platform/docs/docs/component-library/components/ToolbarButton.mdx
View File

@ -4,7 +4,7 @@ menu: General
route: components/toolbarButton route: components/toolbarButton
--- ---
import { useState } from 'react'; import { useState, useCallback } from 'react';
import { ToolbarButton } from '@ohif/ui'; import { ToolbarButton } from '@ohif/ui';
@ -19,17 +19,18 @@ import { ToolbarButton } from '@ohif/ui';
``` ```
```jsx live ```jsx live
function ToolbarButtonExample(props) { function() {
// const [isActive, setIsActive] = useState(false); const [isActive, setIsActive] = useState(false);
const tool = { const tool = {
id: 'Zoom', id: 'Zoom',
label: 'Zoom', label: 'Zoom',
icon: 'tool-zoom', icon: 'tool-zoom',
type: null, type: null,
commandName: 'setToolActive', /*commandName: 'setToolActive',
commandOptions: { toolName: 'Zoom' }, commandOptions: { toolName: 'Zoom' },*/
//onClick: () => setIsActive(true), onInteraction: () => setIsActive(!isActive),
isActive: true, isActive,
}; };
return ( return (

64
platform/docs/docs/component-library/components/Typography.mdx
View File

@ -19,33 +19,33 @@ import { Typography } from '@ohif/ui';
## Basic usage ## Basic usage
````jsx live ```jsx live
<div className="p-4"> <div className="p-4">
<Typography variant="h1"> <Typography variant="h1">
h1. The five boxing wizards jump quickly. h1. The five boxing wizards jump quickly.
</Typography> </Typography>
<Typography variant="h2"> <Typography variant="h2">
h2. The five boxing wizards jump quickly. h2. The five boxing wizards jump quickly.
</Typography> </Typography>
<Typography variant="h3"> <Typography variant="h3">
h3. The five boxing wizards jump quickly. h3. The five boxing wizards jump quickly.
</Typography> </Typography>
<Typography variant="h4"> <Typography variant="h4">
h4. The five boxing wizards jump quickly. h4. The five boxing wizards jump quickly.
</Typography> </Typography>
<Typography variant="h5"> <Typography variant="h5">
h5. The five boxing wizards jump quickly. h5. The five boxing wizards jump quickly.
</Typography> </Typography>
<Typography variant="h6"> <Typography variant="h6">
h6. The five boxing wizards jump quickly. h6. The five boxing wizards jump quickly.
</Typography> </Typography>
<Typography variant="subtitle"> <Typography variant="subtitle">
subtitle. The five boxing wizards jump quickly. subtitle. The five boxing wizards jump quickly.
</Typography> </Typography>
<Typography variant="body"> <Typography variant="body">
body. The five boxing wizards jump quickly. body. The five boxing wizards jump quickly.
</Typography> </Typography>
</div> </div>
``` ```
## Changing the HTML element ## Changing the HTML element
@ -56,11 +56,11 @@ a semantic element. The style of a Typography is independent of the semantic
element. element.
```jsx live ```jsx live
<div className="p-4"> <div className="p-4">
<Typography variant="h1" component="h2"> <Typography variant="h1" component="h2">
This is a h2 using the h1 styles. This is a h2 using the h1 styles.
</Typography> </Typography>
</div> </div>
``` ```
## Properties ## Properties

204
platform/docs/docs/component-library/components/ViewportActionBar.mdx
View File

@ -18,117 +18,117 @@ import { ViewportActionBar } from '@ohif/ui';
## Basic usage ## Basic usage
````jsx live ```jsx live
<div className="p-4 h-64"> <div className="p-4 h-64">
<ViewportActionBar <ViewportActionBar
onSeriesChange={direction => alert(`Series ${direction}`)} onSeriesChange={direction => alert(`Series ${direction}`)}
studyData={{ studyData={{
label: 'A', label: 'A',
isTracked: true, isTracked: true,
isLocked: false, isLocked: false,
isRehydratable: false, isRehydratable: false,
studyDate: '07-Sep-2010', studyDate: '07-Sep-2010',
currentSeries: 1, currentSeries: 1,
seriesDescription: seriesDescription:
'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ', 'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
modality: 'CT', modality: 'CT',
patientInformation: { patientInformation: {
patientName: 'Smith, Jane', patientName: 'Smith, Jane',
patientSex: 'F', patientSex: 'F',
patientAge: '59', patientAge: '59',
MRN: '10000001', MRN: '10000001',
thickness: '2.0mm', thickness: '2.0mm',
spacing: '1.25mm', spacing: '1.25mm',
scanner: 'Aquilion', scanner: 'Aquilion',
}, },
}} }}
/> />
</div> </div>
``` ```
```jsx live ```jsx live
<div className="p-4 h-64"> <div className="p-4 h-64">
<ViewportActionBar <ViewportActionBar
onSeriesChange={direction => alert(`Series ${direction}`)} onSeriesChange={direction => alert(`Series ${direction}`)}
studyData={{ studyData={{
label: 'A', label: 'A',
isTracked: false, isTracked: false,
isLocked: false, isLocked: false,
isRehydratable: true, isRehydratable: true,
studyDate: '07-Sep-2010', studyDate: '07-Sep-2010',
currentSeries: 1, currentSeries: 1,
seriesDescription: seriesDescription:
'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ', 'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
modality: 'CT', modality: 'CT',
patientInformation: { patientInformation: {
patientName: 'Smith, Jane', patientName: 'Smith, Jane',
patientSex: 'F', patientSex: 'F',
patientAge: '59', patientAge: '59',
MRN: '10000001', MRN: '10000001',
thickness: '2.0mm', thickness: '2.0mm',
spacing: '1.25mm', spacing: '1.25mm',
scanner: 'Aquilion', scanner: 'Aquilion',
}, },
}} }}
/> />
</div> </div>
``` ```
```jsx live ```jsx live
<div className="p-4 h-64"> <div className="p-4 h-64">
<ViewportActionBar <ViewportActionBar
onSeriesChange={direction => alert(`Series ${direction}`)} onSeriesChange={direction => alert(`Series ${direction}`)}
studyData={{ studyData={{
label: 'A', label: 'A',
isTracked: false, isTracked: false,
isLocked: false, isLocked: false,
isRehydratable: false, isRehydratable: false,
studyDate: '07-Sep-2010', studyDate: '07-Sep-2010',
currentSeries: 1, currentSeries: 1,
seriesDescription: seriesDescription:
'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ', 'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
modality: 'SR', modality: 'SR',
patientInformation: { patientInformation: {
patientName: 'Smith, Jane', patientName: 'Smith, Jane',
patientSex: 'F', patientSex: 'F',
patientAge: '59', patientAge: '59',
MRN: '10000001', MRN: '10000001',
thickness: '2.0mm', thickness: '2.0mm',
spacing: '1.25mm', spacing: '1.25mm',
scanner: 'Aquilion', scanner: 'Aquilion',
}, },
}} }}
/> />
</div> </div>
``` ```
```jsx live ```jsx live
<div className="p-4 h-64"> <div className="p-4 h-64">
<ViewportActionBar <ViewportActionBar
onSeriesChange={direction => alert(`Series ${direction}`)} onSeriesChange={direction => alert(`Series ${direction}`)}
studyData={{ studyData={{
label: 'A', label: 'A',
isTracked: false, isTracked: false,
isLocked: false, isLocked: false,
isRehydratable: true, isRehydratable: true,
studyDate: '07-Sep-2010', studyDate: '07-Sep-2010',
currentSeries: 1, currentSeries: 1,
seriesDescription: seriesDescription:
'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ', 'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
modality: 'SR', modality: 'SR',
patientInformation: { patientInformation: {
patientName: 'Smith, Jane', patientName: 'Smith, Jane',
patientSex: 'F', patientSex: 'F',
patientAge: '59', patientAge: '59',
MRN: '10000001', MRN: '10000001',
thickness: '2.0mm', thickness: '2.0mm',
spacing: '1.25mm', spacing: '1.25mm',
scanner: 'Aquilion', scanner: 'Aquilion',
}, },
}} }}
/> />
</div> </div>
``` ```
</>
## Properties ## Properties

6
platform/docs/docs/component-library/context-providers/ViewportDialogProvider.mdx
View File

@ -22,8 +22,8 @@ component across all application.
## Sample ## Sample
````jsx live ```jsx live
{() => { function() {
const ViewportNotification = ({ hide }) => { const ViewportNotification = ({ hide }) => {
return ( return (
<Notification <Notification
@ -88,7 +88,7 @@ component across all application.
## Example using UIViewportDialogService ## Example using UIViewportDialogService
```jsx live ```jsx live
{() => { function() {
const ViewportNotification = ({ hide }) => { const ViewportNotification = ({ hide }) => {
return ( return (
<Notification <Notification

18
platform/docs/docs/component-library/pages/Colors.mdx
View File

@ -28,14 +28,14 @@ details about color classes.
## Text ## Text
````jsx live ```jsx live
<div className="p-8"> <div className="p-8">
<p className="text-common-bright">text-common-bright</p> <p className="text-common-bright">text-common-bright</p>
<p className="text-common-light">text-common-light</p> <p className="text-common-light">text-common-light</p>
<p className="text-common-main">text-common-main</p> <p className="text-common-main">text-common-main</p>
<p className="text-common-dark">text-common-dark</p> <p className="text-common-dark">text-common-dark</p>
<p className="text-common-active">text-common-active</p> <p className="text-common-active">text-common-active</p>
</div> </div>
``` ```
## Background ## Background
@ -79,4 +79,4 @@ common: {
dark: '#726f7e', dark: '#726f7e',
active: '#2c3074', active: '#2c3074',
}, },
```` ```