cleanup in component mdx for docusaurus

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

View File

@ -23,17 +23,17 @@ import { ButtonGroup } from '@ohif/ui';
<ButtonGroup color="primary" className="m-2">
<Button>One</Button>
<Button>Two</Button>
<Button>Tree</Button>
<Button>Three</Button>
</ButtonGroup>
<ButtonGroup color="primary" variant="contained" className="m-2">
<Button>One</Button>
<Button>Two</Button>
<Button>Tree</Button>
<Button>Three</Button>
</ButtonGroup>
<ButtonGroup color="primary" variant="text" className="m-2">
<Button>One</Button>
<Button>Two</Button>
<Button>Tree</Button>
<Button>Three</Button>
</ButtonGroup>
</div>
```
@ -45,17 +45,17 @@ import { ButtonGroup } from '@ohif/ui';
<ButtonGroup color="default" size="small" className="m-2">
<Button>One</Button>
<Button>Two</Button>
<Button>Tree</Button>
<Button>Three</Button>
</ButtonGroup>
<ButtonGroup color="primary" size="medium" className="m-2">
<Button>One</Button>
<Button>Two</Button>
<Button>Tree</Button>
<Button>Three</Button>
</ButtonGroup>
<ButtonGroup color="secondary" size="large" className="m-2">
<Button>One</Button>
<Button>Two</Button>
<Button>Tree</Button>
<Button>Three</Button>
</ButtonGroup>
</div>
```
@ -67,7 +67,7 @@ import { ButtonGroup } from '@ohif/ui';
<ButtonGroup orientation="vertical" color="primary" className="m-2">
<Button>One</Button>
<Button>Two</Button>
<Button>Tree</Button>
<Button>Three</Button>
</ButtonGroup>
<ButtonGroup
orientation="vertical"
@ -77,7 +77,7 @@ import { ButtonGroup } from '@ohif/ui';
>
<Button>One</Button>
<Button>Two</Button>
<Button>Tree</Button>
<Button>Three</Button>
</ButtonGroup>
<ButtonGroup
orientation="vertical"
@ -87,7 +87,7 @@ import { ButtonGroup } from '@ohif/ui';
>
<Button>One</Button>
<Button>Two</Button>
<Button>Tree</Button>
<Button>Three</Button>
</ButtonGroup>
</div>
```

View File

@ -19,8 +19,7 @@ import { CinePlayer } from '@ohif/ui';
## Basic usage
```jsx live
{
() => {
function() {
return (
<div className="flex flex-col flex-1 p-4 items-center">
<div className="w-56">
@ -34,7 +33,6 @@ import { CinePlayer } from '@ohif/ui';
</div>
</div>
);
};
}
```

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -62,6 +62,8 @@ component across all application.
</Button>
);
};
}
return (
<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">