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

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

@ -18,7 +18,7 @@ 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
@ -95,20 +95,10 @@ import { Button } from '@ohif/ui';
</Button> </Button>
</div> </div>
<div className="mb-2"> <div className="mb-2">
<Button <Button variant="contained" rounded="none" color="primary" className="m-1">
variant="contained"
rounded="none"
color="primary"
className="m-1"
>
Non Rounded Non Rounded
</Button> </Button>
<Button <Button variant="contained" rounded="small" color="primary" className="m-1">
variant="contained"
rounded="small"
color="primary"
className="m-1"
>
Small Rounded Small Rounded
</Button> </Button>
<Button <Button
@ -119,20 +109,10 @@ import { Button } from '@ohif/ui';
> >
Medium Rounded Medium Rounded
</Button> </Button>
<Button <Button variant="contained" rounded="large" color="primary" className="m-1">
variant="contained"
rounded="large"
color="primary"
className="m-1"
>
Large Rounded Large Rounded
</Button> </Button>
<Button <Button variant="contained" rounded="full" color="primary" className="m-1">
variant="contained"
rounded="full"
color="primary"
className="m-1"
>
Full Rounded Full Rounded
</Button> </Button>
</div> </div>
@ -185,12 +165,7 @@ import { Button } from '@ohif/ui';
<Button variant="contained" rounded="small" color="white" className="m-1"> <Button variant="contained" rounded="small" color="white" className="m-1">
Small Rounded Small Rounded
</Button> </Button>
<Button <Button variant="contained" rounded="medium" color="white" className="m-1">
variant="contained"
rounded="medium"
color="white"
className="m-1"
>
Medium Rounded Medium Rounded
</Button> </Button>
<Button variant="contained" rounded="large" color="white" className="m-1"> <Button variant="contained" rounded="large" color="white" className="m-1">
@ -219,84 +194,38 @@ import { Button } from '@ohif/ui';
</Button> </Button>
</div> </div>
<div> <div>
<Button <Button variant="contained" size="small" color="primary" className="m-1">
variant="contained"
size="small"
color="primary"
className="m-1"
>
Small Small
</Button> </Button>
<Button <Button variant="contained" size="medium" color="primary" className="m-1">
variant="contained"
size="medium"
color="primary"
className="m-1"
>
Medium Medium
</Button> </Button>
<Button <Button variant="contained" size="large" color="primary" className="m-1">
variant="contained"
size="large"
color="primary"
className="m-1"
>
Large Large
</Button> </Button>
</div> </div>
<div> <div>
<Button <Button variant="contained" size="small" color="secondary" className="m-1">
variant="contained"
size="small"
color="secondary"
className="m-1"
>
Small Small
</Button> </Button>
<Button <Button variant="contained" size="medium" color="secondary" className="m-1">
variant="contained"
size="medium"
color="secondary"
className="m-1"
>
Medium Medium
</Button> </Button>
<Button <Button variant="contained" size="large" color="secondary" className="m-1">
variant="contained"
size="large"
color="secondary"
className="m-1"
>
Large Large
</Button> </Button>
</div> </div>
<div> <div>
<Button <Button variant="contained" size="small" color="white" className="m-1">
variant="contained"
size="small"
color="white"
className="m-1"
>
Small Small
</Button> </Button>
<Button <Button variant="contained" size="medium" color="white" className="m-1">
variant="contained"
size="medium"
color="white"
className="m-1"
>
Medium Medium
</Button> </Button>
<Button <Button variant="contained" size="large" color="white" className="m-1">
variant="contained"
size="large"
color="white"
className="m-1"
>
Large Large
</Button> </Button>
</div> </div>
</div> </div>
``` ```
@ -338,9 +267,9 @@ Icon buttons are generally used in toolbars.
```javascript ```javascript
import { IconButton } from '@ohif/ui'; import { IconButton } from '@ohif/ui';
```` ```
````jsx live ```jsx live
<div className="p-4 flex flex-col items-center"> <div className="p-4 flex flex-col items-center">
<div className=""> <div className="">
<IconButton className="m-2"> <IconButton className="m-2">

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

@ -18,7 +18,7 @@ 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>

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

@ -21,8 +21,7 @@ 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,
@ -38,7 +37,6 @@ import { DateRange } from '@ohif/ui';
/> />
</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>;
}} }}

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

@ -18,8 +18,8 @@ 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',
@ -38,19 +38,19 @@ import { MeasurementTable } from '@ohif/ui';
<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

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

@ -16,7 +16,7 @@ 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
@ -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={[]}

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

@ -16,7 +16,7 @@ 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' }}
@ -24,11 +24,13 @@ import { SidePanel } from '@ohif/ui';
<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"> <div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white">
@ -37,7 +39,6 @@ import { SidePanel } from '@ohif/ui';
</div> </div>
``` ```
## Multiple panels ## Multiple panels
```jsx live ```jsx live
@ -47,20 +48,30 @@ import { SidePanel } from '@ohif/ui';
> >
<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>
),
},
]}
/> />
<div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white"> <div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white">
CONTENT CONTENT
@ -68,7 +79,6 @@ import { SidePanel } from '@ohif/ui';
</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 (

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

@ -19,7 +19,7 @@ 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.

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

@ -18,7 +18,7 @@ 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}`)}
@ -101,6 +101,7 @@ import { ViewportActionBar } from '@ohif/ui';
/> />
</div> </div>
``` ```
```jsx live ```jsx live
<div className="p-4 h-64"> <div className="p-4 h-64">
<ViewportActionBar <ViewportActionBar
@ -128,7 +129,6 @@ import { ViewportActionBar } from '@ohif/ui';
/> />
</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

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

@ -28,7 +28,7 @@ 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>
@ -79,4 +79,4 @@ common: {
dark: '#726f7e', dark: '#726f7e',
active: '#2c3074', active: '#2c3074',
}, },
```` ```