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

cleanup in component mdx for docusaurus

Browse Source
This commit is contained in:
Erik Ziegler 2021-07-14 00:24:05 +02:00
parent 7a79e42929
commit 31e3e03490
22 changed files with 661 additions and 699 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,17 +23,17 @@ import { ButtonGroup } from '@ohif/ui';
<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>Three</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>Three</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>Three</Button>
</ButtonGroup> </ButtonGroup>
</div> </div>
``` ```
@ -45,17 +45,17 @@ import { ButtonGroup } from '@ohif/ui';
<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>Three</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>Three</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>Three</Button>
</ButtonGroup> </ButtonGroup>
</div> </div>
``` ```
@ -67,7 +67,7 @@ import { ButtonGroup } from '@ohif/ui';
<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>Three</Button>
</ButtonGroup> </ButtonGroup>
<ButtonGroup <ButtonGroup
orientation="vertical" orientation="vertical"
@ -77,7 +77,7 @@ import { ButtonGroup } from '@ohif/ui';
> >
<Button>One</Button> <Button>One</Button>
<Button>Two</Button> <Button>Two</Button>
<Button>Tree</Button> <Button>Three</Button>
</ButtonGroup> </ButtonGroup>
<ButtonGroup <ButtonGroup
orientation="vertical" orientation="vertical"
@ -87,7 +87,7 @@ import { ButtonGroup } from '@ohif/ui';
> >
<Button>One</Button> <Button>One</Button>
<Button>Two</Button> <Button>Two</Button>
<Button>Tree</Button> <Button>Three</Button>
</ButtonGroup> </ButtonGroup>
</div> </div>
``` ```

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

@ -19,8 +19,7 @@ import { CinePlayer } from '@ohif/ui';
## Basic usage ## Basic usage
```jsx live ```jsx live
{ function() {
() => {
return ( return (
<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">
@ -34,7 +33,6 @@ import { CinePlayer } from '@ohif/ui';
</div> </div>
</div> </div>
); );
};
} }
``` ```

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

@ -17,8 +17,7 @@ import { ContextMenu } from '@ohif/ui';
``` ```
```jsx live ```jsx live
{ function() {
() => {
const items = [ const items = [
{ {
label: 'Delete measurement', label: 'Delete measurement',
@ -41,7 +40,6 @@ import { ContextMenu } from '@ohif/ui';
<ContextMenu items={items} /> <ContextMenu items={items} />
</div> </div>
); );
};
} }
``` ```

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

@ -19,8 +19,7 @@ import { Dropdown } from '@ohif/ui';
``` ```
```jsx live ```jsx live
{ function() {
() => {
const handleClick = () => { const handleClick = () => {
alert('Clicked'); alert('Clicked');
}; };
@ -60,7 +59,6 @@ import { Dropdown } from '@ohif/ui';
</Dropdown> </Dropdown>
</div> </div>
); );
};
} }
``` ```

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

@ -19,8 +19,7 @@ import { ExpandableToolbarButton, ListMenu } from '@ohif/ui';
``` ```
```jsx live ```jsx live
{ function() {
() => {
const props = { const props = {
content: ListMenu, content: ListMenu,
contentProps: { contentProps: {
@ -80,7 +79,6 @@ import { ExpandableToolbarButton, ListMenu } from '@ohif/ui';
<ExpandableToolbarButton {...props} /> <ExpandableToolbarButton {...props} />
</div> </div>
); );
};
} }
``` ```

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

@ -17,8 +17,7 @@ import { Input } from '@ohif/ui';
## Basic usage ## Basic usage
```jsx live ```jsx live
{ function() {
() => {
const [inputValue, setInputValue] = React.useState(''); const [inputValue, setInputValue] = React.useState('');
return ( return (
<div className="p-4"> <div className="p-4">
@ -31,7 +30,6 @@ import { Input } from '@ohif/ui';
<Input placeholder="Without label" /> <Input placeholder="Without label" />
</div> </div>
); );
};
} }
``` ```

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

@ -19,8 +19,7 @@ import { InputDateRange } from '@ohif/ui';
## Basic usage ## Basic usage
```jsx live ```jsx live
{ function() {
() => {
const [dates, setDates] = useState({ const [dates, setDates] = useState({
startDate: null, startDate: null,
endDate: null, endDate: null,
@ -36,7 +35,6 @@ import { InputDateRange } from '@ohif/ui';
</div> </div>
</div> </div>
); );
};
} }
``` ```

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

@ -19,8 +19,7 @@ import { InputGroup } from '@ohif/ui';
## Basic usage ## Basic usage
```jsx live ```jsx live
{ function() {
() => {
const [filterValues, setFilterValues] = useState({ const [filterValues, setFilterValues] = useState({
patient: '', patient: '',
studyDate: { studyDate: {
@ -83,7 +82,6 @@ import { InputGroup } from '@ohif/ui';
/> />
</div> </div>
); );
};
} }
``` ```

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

@ -19,8 +19,7 @@ import { InputMultiSelect } from '@ohif/ui';
## Basic usage ## Basic usage
```jsx live ```jsx live
{ function() {
() => {
const [values, setValues] = useState([]); const [values, setValues] = useState([]);
return ( return (
<div className="flex flex-col flex-1 p-4 items-center"> <div className="flex flex-col flex-1 p-4 items-center">
@ -41,7 +40,6 @@ import { InputMultiSelect } from '@ohif/ui';
</div> </div>
</div> </div>
); );
};
} }
``` ```

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

@ -19,8 +19,7 @@ import { InputText } from '@ohif/ui';
## Basic usage ## Basic usage
```jsx live ```jsx live
{ function() {
() => {
const [text, setText] = useState(''); const [text, setText] = useState('');
return ( return (
<div className="flex flex-col flex-1 p-4 items-center"> <div className="flex flex-col flex-1 p-4 items-center">
@ -35,7 +34,6 @@ import { InputText } from '@ohif/ui';
</div> </div>
</div> </div>
); );
};
} }
``` ```

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

@ -17,14 +17,12 @@ import { Label } from '@ohif/ui';
## Basic usage ## Basic usage
```jsx live ```jsx live
{ function() {
() => {
return ( return (
<div className="p-4"> <div className="p-4">
<Label text="Label" /> <Label text="Label" />
</div> </div>
); );
};
} }
``` ```

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

@ -19,8 +19,7 @@ import { ListMenu, ToolbarButton } from '@ohif/ui';
``` ```
```jsx live ```jsx live
{ function() {
() => {
return ( return (
<ToolbarButton <ToolbarButton
items={[ items={[
@ -74,7 +73,6 @@ import { ListMenu, ToolbarButton } from '@ohif/ui';
)} )}
/> />
); );
};
} }
``` ```

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

@ -20,8 +20,7 @@ import { Notification } from '@ohif/ui';
## Basic usage ## Basic usage
```jsx live ```jsx live
{ function() {
() => {
return ( return (
<div className="p-4 w-full lg:w-2/3"> <div className="p-4 w-full lg:w-2/3">
<Notification <Notification
@ -50,7 +49,6 @@ import { Notification } from '@ohif/ui';
/> />
</div> </div>
); );
};
} }
``` ```

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

@ -17,8 +17,7 @@ import { SegmentationTable } from '@ohif/ui';
## Basic usage ## Basic usage
```jsx live ```jsx live
{ function() {
() => {
const tableData = { const tableData = {
title: 'Segments', title: 'Segments',
amount: 12, amount: 12,
@ -29,7 +28,6 @@ import { SegmentationTable } from '@ohif/ui';
<SegmentationTable {...tableData} /> <SegmentationTable {...tableData} />
</div> </div>
); );
};
} }
``` ```

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

@ -19,8 +19,7 @@ import { SplitButton, WindowLevelMenuItem } from '@ohif/ui';
``` ```
```jsx live ```jsx live
{ function() {
() => {
const mockedProps = { const mockedProps = {
bState: { bState: {
primaryToolId: 'WWWC', primaryToolId: 'WWWC',
@ -80,7 +79,6 @@ import { SplitButton, WindowLevelMenuItem } from '@ohif/ui';
</div> </div>
</div> </div>
); );
};
} }
``` ```

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

@ -17,8 +17,7 @@ import { StudyBrowser } from '@ohif/ui';
## Basic usage ## Basic usage
```jsx live ```jsx live
{ function() {
() => {
const studyWithSR = { const studyWithSR = {
studyInstanceUid: '1', studyInstanceUid: '1',
date: '07-Sept-2010', date: '07-Sept-2010',
@ -103,7 +102,6 @@ import { StudyBrowser } from '@ohif/ui';
</div> </div>
</div> </div>
); );
};
} }
``` ```

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

@ -21,8 +21,7 @@ import { StudyItem } from '@ohif/ui';
## Basic usage ## Basic usage
```jsx live ```jsx live
{ function() {
() => {
const [studyActive, setStudyActive] = useState(null); const [studyActive, setStudyActive] = useState(null);
return ( return (
<div className="flex flex-1 items-center justify-center p-4"> <div className="flex flex-1 items-center justify-center p-4">
@ -39,7 +38,6 @@ import { StudyItem } from '@ohif/ui';
</div> </div>
</div> </div>
); );
};
} }
``` ```

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

@ -20,8 +20,7 @@ import { StudyListFilter, ModalProvider, Modal } from '@ohif/ui';
## Basic usage ## Basic usage
```jsx live ```jsx live
{ function() {
() => {
const defaultFilterValues = { const defaultFilterValues = {
patientName: '', patientName: '',
mrn: '', mrn: '',
@ -114,7 +113,6 @@ import { StudyListFilter, ModalProvider, Modal } from '@ohif/ui';
/> />
</ModalProvider> </ModalProvider>
); );
};
} }
``` ```

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

@ -19,8 +19,7 @@ import { StudyListPagination } from '@ohif/ui';
## Basic usage ## Basic usage
```jsx live ```jsx live
{ function() {
() => {
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const [perPage, setPerPage] = useState(25); const [perPage, setPerPage] = useState(25);
const onChangePage = page => { const onChangePage = page => {
@ -38,7 +37,6 @@ import { StudyListPagination } from '@ohif/ui';
perPage={perPage} perPage={perPage}
/> />
); );
};
} }
``` ```

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

@ -21,8 +21,7 @@ import { StudyListTable } from '@ohif/ui';
## Basic usage ## Basic usage
```jsx live ```jsx live
{ function() {
() => {
const studies = new Array(10).fill(''); const studies = new Array(10).fill('');
const [expandedRows, setExpandedRows] = useState([]); const [expandedRows, setExpandedRows] = useState([]);
const tableDataSource = studies.map((study, key) => { const tableDataSource = studies.map((study, key) => {
@ -55,7 +54,6 @@ import { StudyListTable } from '@ohif/ui';
/> />
</div> </div>
); );
};
} }
``` ```

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

@ -19,14 +19,12 @@ import { WindowLevelMenuItem, ListMenu } from '@ohif/ui';
``` ```
```jsx live ```jsx live
{ function() {
() => {
return ( return (
<div className="py-10 flex justify-center"> <div className="py-10 flex justify-center">
<ListMenu renderer={WindowLevelMenuItem} items={[]} /> <ListMenu renderer={WindowLevelMenuItem} items={[]} />
</div> </div>
); );
};
} }
``` ```

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

@ -62,6 +62,8 @@ component across all application.
</Button> </Button>
); );
}; };
}
return ( return (
<div className="w-full flex flex-row p-4" style={{height: '400px'}}> <div className="w-full flex flex-row p-4" style={{height: '400px'}}>
<div className="flex flex-1 items-center justify-center h-full w-full bg-black text-white border border-primary-main"> <div className="flex flex-1 items-center justify-center h-full w-full bg-black text-white border border-primary-main">