wip on switching from docz to docusaurus
This commit is contained in:
Erik Ziegler
parent
69e36106e3
commit
09469e6ac5
@ -9,6 +9,8 @@ const loadShadersRule = require('./rules/loadShaders.js');
|
||||
const loadWebWorkersRule = require('./rules/loadWebWorkers.js');
|
||||
const transpileJavaScriptRule = require('./rules/transpileJavaScript.js');
|
||||
// ~~ PLUGINS
|
||||
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
|
||||
.BundleAnalyzerPlugin;
|
||||
const TerserJSPlugin = require('terser-webpack-plugin');
|
||||
// ~~ ENV VARS
|
||||
const NODE_ENV = process.env.NODE_ENV;
|
||||
@ -112,6 +114,8 @@ module.exports = (env, argv, { SRC_DIR, DIST_DIR }) => {
|
||||
process.env.REACT_APP_I18N_DEBUG || ''
|
||||
),
|
||||
}),
|
||||
// Uncomment to generate bundle analyzer
|
||||
// new BundleAnalyzerPlugin(),
|
||||
],
|
||||
// Fix: https://github.com/webpack-contrib/css-loader/issues/447#issuecomment-285598881
|
||||
// For issue in cornerstone-wado-image-loader
|
||||
|
||||
@ -39,6 +39,7 @@
|
||||
"docs:preview": "lerna run docs:preview --stream",
|
||||
"docs:publish": "chmod +x ./build-and-publish-docs.sh && ./build-and-publish-docs.sh",
|
||||
"release": "yarn run lerna:version && yarn run lerna:publish",
|
||||
"lerna:clean": "lerna clean",
|
||||
"lerna:cache": "./netlify-lerna-cache.sh",
|
||||
"lerna:restore": "./netlify-lerna-restore.sh",
|
||||
"lerna:version": "npx lerna version prerelease --force-publish",
|
||||
@ -49,13 +50,15 @@
|
||||
"@babel/runtime": "7.7.6",
|
||||
"core-js": "^3.2.1",
|
||||
"cornerstone-core": "2.3.0",
|
||||
"react": "17.0.2",
|
||||
"react-dom": "17.0.2",
|
||||
"shader-loader": "^1.3.1",
|
||||
"webpack": "^5.43.0",
|
||||
"worker-loader": "^3.0.8",
|
||||
"wslink": "^0.1.8"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "17.0.2",
|
||||
"react-dom": "17.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.5.0",
|
||||
"@babel/plugin-proposal-class-properties": "^7.5.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
const merge = require('webpack-merge');
|
||||
const path = require('path');
|
||||
const webpackCommon = require('./../../../.webpack/webpack.commonjs.js');
|
||||
const webpackCommon = require('./../../../.webpack/webpack.base.js');
|
||||
const pkg = require('./../package.json');
|
||||
|
||||
const ROOT_DIR = path.join(__dirname, './..');
|
||||
|
||||
@ -4,7 +4,6 @@ menu: General
|
||||
route: components/aboutModal
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { AboutModal } from '@ohif/ui';
|
||||
|
||||
# AboutModal
|
||||
@ -19,12 +18,10 @@ import { AboutModal } from '@ohif/ui';
|
||||
|
||||
## Usage
|
||||
|
||||
<Playground>
|
||||
<div className="p-4">
|
||||
<AboutModal />
|
||||
</div>
|
||||
</Playground>
|
||||
```jsx live
|
||||
<div className="p-4">
|
||||
<AboutModal />
|
||||
</div>
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={AboutModal} />
|
||||
@ -4,8 +4,7 @@ menu: General
|
||||
route: components/button
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { Button, IconButton, Icon } from '../';
|
||||
import { Button, IconButton, Icon } from '@ohif/ui';
|
||||
|
||||
# Button
|
||||
|
||||
@ -19,7 +18,7 @@ import { Button } from '@ohif/ui';
|
||||
|
||||
## Outlined Buttons
|
||||
|
||||
<Playground>
|
||||
````jsx live
|
||||
<div className="p-4">
|
||||
<Button variant="outlined" className="m-1">
|
||||
Default
|
||||
@ -34,11 +33,11 @@ import { Button } from '@ohif/ui';
|
||||
White
|
||||
</Button>
|
||||
</div>
|
||||
</Playground>
|
||||
```
|
||||
|
||||
## Contained Buttons
|
||||
|
||||
<Playground>
|
||||
```jsx live
|
||||
<div className="p-4">
|
||||
<Button variant="contained" className="m-1">
|
||||
Default
|
||||
@ -53,11 +52,11 @@ import { Button } from '@ohif/ui';
|
||||
White
|
||||
</Button>
|
||||
</div>
|
||||
</Playground>
|
||||
```
|
||||
|
||||
## Text Buttons
|
||||
|
||||
<Playground>
|
||||
```jsx live
|
||||
<div className="p-4">
|
||||
<Button variant="text" className="m-1">
|
||||
Default
|
||||
@ -72,11 +71,11 @@ import { Button } from '@ohif/ui';
|
||||
White
|
||||
</Button>
|
||||
</div>
|
||||
</Playground>
|
||||
```
|
||||
|
||||
## Rounded Buttons
|
||||
|
||||
<Playground>
|
||||
```jsx live
|
||||
<div className="p-4">
|
||||
<div className="mb-2">
|
||||
<Button variant="contained" rounded="none" className="m-1">
|
||||
@ -202,11 +201,11 @@ import { Button } from '@ohif/ui';
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Playground>
|
||||
```
|
||||
|
||||
## Sizes
|
||||
|
||||
<Playground>
|
||||
```jsx live
|
||||
<div className="p-4">
|
||||
<div>
|
||||
<Button variant="contained" size="small" className="m-1">
|
||||
@ -299,11 +298,11 @@ import { Button } from '@ohif/ui';
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</Playground>
|
||||
```
|
||||
|
||||
## Buttons with icons
|
||||
|
||||
<Playground>
|
||||
```jsx live
|
||||
<div className="p-4 flex">
|
||||
<Button
|
||||
variant="contained"
|
||||
@ -331,7 +330,7 @@ import { Button } from '@ohif/ui';
|
||||
Download
|
||||
</Button>
|
||||
</div>
|
||||
</Playground>
|
||||
```
|
||||
|
||||
## Icon Buttons
|
||||
|
||||
@ -339,9 +338,9 @@ Icon buttons are generally used in toolbars.
|
||||
|
||||
```javascript
|
||||
import { IconButton } from '@ohif/ui';
|
||||
```
|
||||
````
|
||||
|
||||
<Playground>
|
||||
````jsx live
|
||||
<div className="p-4 flex flex-col items-center">
|
||||
<div className="">
|
||||
<IconButton className="m-2">
|
||||
@ -388,9 +387,9 @@ import { IconButton } from '@ohif/ui';
|
||||
</IconButton>
|
||||
</div>
|
||||
</div>
|
||||
</Playground>
|
||||
```
|
||||
|
||||
<Playground>
|
||||
```jsx live
|
||||
<div className="p-4">
|
||||
<div className="">
|
||||
<IconButton className="m-2">
|
||||
@ -437,8 +436,9 @@ import { IconButton } from '@ohif/ui';
|
||||
</IconButton>
|
||||
</div>
|
||||
</div>
|
||||
</Playground>
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={Button} />
|
||||
````
|
||||
@ -4,8 +4,7 @@ menu: General
|
||||
route: components/buttonGroup
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { ButtonGroup, Button, IconButton, Icon } from '../';
|
||||
import { ButtonGroup, Button, IconButton, Icon } from '@ohif/ui';
|
||||
|
||||
# ButtonGroup
|
||||
|
||||
@ -19,7 +18,7 @@ import { ButtonGroup } from '@ohif/ui';
|
||||
|
||||
## Basic button group
|
||||
|
||||
<Playground>
|
||||
````jsx live
|
||||
<div className="p-4 flex flex-col items-center">
|
||||
<ButtonGroup color="primary" className="m-2">
|
||||
<Button>One</Button>
|
||||
@ -37,11 +36,11 @@ import { ButtonGroup } from '@ohif/ui';
|
||||
<Button>Tree</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
</Playground>
|
||||
```
|
||||
|
||||
## Group sizes and colorss
|
||||
|
||||
<Playground>
|
||||
```jsx live
|
||||
<div className="p-4 flex flex-col items-center">
|
||||
<ButtonGroup color="default" size="small" className="m-2">
|
||||
<Button>One</Button>
|
||||
@ -59,11 +58,11 @@ import { ButtonGroup } from '@ohif/ui';
|
||||
<Button>Tree</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
</Playground>
|
||||
```
|
||||
|
||||
## Group orientation
|
||||
|
||||
<Playground>
|
||||
```jsx live
|
||||
<div className="p-4 flex flex-row justify-center">
|
||||
<ButtonGroup orientation="vertical" color="primary" className="m-2">
|
||||
<Button>One</Button>
|
||||
@ -91,11 +90,11 @@ import { ButtonGroup } from '@ohif/ui';
|
||||
<Button>Tree</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
</Playground>
|
||||
```
|
||||
|
||||
## Split Button
|
||||
|
||||
<Playground>
|
||||
```jsx live
|
||||
<div className="p-4 flex flex-col items-center">
|
||||
<ButtonGroup color="primary" className="m-2">
|
||||
<Button>Options</Button>
|
||||
@ -104,8 +103,9 @@ import { ButtonGroup } from '@ohif/ui';
|
||||
</IconButton>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
</Playground>
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={ButtonGroup} />
|
||||
````
|
||||
@ -5,7 +5,7 @@ route: components/CinePlayer
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Playground, Props } from 'docz';
|
||||
|
||||
import { CinePlayer } from '@ohif/ui';
|
||||
|
||||
# Input Text
|
||||
@ -18,8 +18,9 @@ import { CinePlayer } from '@ohif/ui';
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
```jsx live
|
||||
{
|
||||
() => {
|
||||
return (
|
||||
<div className="flex flex-col flex-1 p-4 items-center">
|
||||
<div className="w-56">
|
||||
@ -32,11 +33,12 @@ import { CinePlayer } from '@ohif/ui';
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}}
|
||||
|
||||
</Playground>
|
||||
);
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={CinePlayer} />
|
||||
```
|
||||
@ -4,8 +4,7 @@ menu: General
|
||||
route: components/contextMenu
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { ContextMenu } from '../';
|
||||
import { ContextMenu } from '@ohif/ui';
|
||||
|
||||
# Context Menu
|
||||
|
||||
@ -17,8 +16,9 @@ import { ContextMenu } from '../';
|
||||
import { ContextMenu } from '@ohif/ui';
|
||||
```
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
```jsx live
|
||||
{
|
||||
() => {
|
||||
const items = [
|
||||
{
|
||||
label: 'Delete measurement',
|
||||
@ -41,9 +41,11 @@ import { ContextMenu } from '@ohif/ui';
|
||||
<ContextMenu items={items} />
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={ContextMenu} />
|
||||
```
|
||||
@ -5,8 +5,8 @@ route: components/date-range
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Playground, Props } from 'docz';
|
||||
import { DateRange } from '../';
|
||||
|
||||
import { DateRange } from '@ohif/ui';
|
||||
|
||||
# Date Range
|
||||
|
||||
@ -20,8 +20,9 @@ import { DateRange } from '@ohif/ui';
|
||||
|
||||
## Date Range
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
```jsx live
|
||||
{
|
||||
() => {
|
||||
const [dates, setDates] = useState({
|
||||
startDate: null,
|
||||
endDate: null,
|
||||
@ -37,9 +38,11 @@ import { DateRange } from '@ohif/ui';
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={DateRange} />
|
||||
```
|
||||
70
platform/docs/docs/component-library/components/Dropdown.mdx
Normal file
70
platform/docs/docs/component-library/components/Dropdown.mdx
Normal file
@ -0,0 +1,70 @@
|
||||
---
|
||||
name: Dropdown
|
||||
menu: General
|
||||
route: components/dropdown
|
||||
---
|
||||
|
||||
import { Dropdown, IconButton, Icon } from '@ohif/ui';
|
||||
|
||||
# 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';
|
||||
```
|
||||
|
||||
```jsx live
|
||||
{
|
||||
() => {
|
||||
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>
|
||||
);
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={Dropdown} />
|
||||
```
|
||||
@ -4,8 +4,7 @@ menu: Data Display
|
||||
route: components/empty-studies
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { EmptyStudies } from '../';
|
||||
import { EmptyStudies } from '@ohif/ui';
|
||||
|
||||
# Empty Studies
|
||||
|
||||
@ -19,12 +18,13 @@ import { EmptyStudies } from '@ohif/ui';
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<div className="p-4">
|
||||
<EmptyStudies />
|
||||
</div>
|
||||
</Playground>
|
||||
```jsx live
|
||||
<div className="p-4">
|
||||
<EmptyStudies />
|
||||
</div>
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={EmptyStudies} />
|
||||
```
|
||||
@ -4,8 +4,7 @@ menu: Data Display
|
||||
route: components/errorBoundary
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { ErrorBoundary } from '../';
|
||||
import { ErrorBoundary } from '@ohif/ui';
|
||||
|
||||
# Error Boundary
|
||||
|
||||
@ -19,7 +18,7 @@ import { ErrorBoundary } from '@ohif/ui';
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
````jsx live
|
||||
<div className="p-4">
|
||||
<ErrorBoundary context="Somewhere">
|
||||
{() => {
|
||||
@ -28,11 +27,11 @@ import { ErrorBoundary } from '@ohif/ui';
|
||||
}}
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
</Playground>
|
||||
```
|
||||
|
||||
## Custom error fallback
|
||||
|
||||
<Playground>
|
||||
```jsx live
|
||||
{() => {
|
||||
const CustomFallback = ({ error, componentStack, resetErrorBoundary }) => {
|
||||
return (
|
||||
@ -52,8 +51,9 @@ import { ErrorBoundary } from '@ohif/ui';
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={ErrorBoundary} />
|
||||
````
|
||||
@ -0,0 +1,90 @@
|
||||
---
|
||||
name: Expandable Toolbar Button
|
||||
menu: General
|
||||
route: components/expandableToolbarButton
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
import { ExpandableToolbarButton, ListMenu } from '@ohif/ui';
|
||||
|
||||
# Toolbar Button
|
||||
|
||||
Expandable Toolbar Buttons are used to populate the Toolbar.
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { ExpandableToolbarButton, ListMenu } from '@ohif/ui';
|
||||
```
|
||||
|
||||
```jsx live
|
||||
{
|
||||
() => {
|
||||
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>
|
||||
);
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={ExpandableToolbarButton} />
|
||||
```
|
||||
@ -4,8 +4,7 @@ menu: Form
|
||||
route: components/input
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { Input } from '../';
|
||||
import { Input } from '@ohif/ui';
|
||||
|
||||
# Input
|
||||
|
||||
@ -17,8 +16,9 @@ import { Input } from '@ohif/ui';
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
```jsx live
|
||||
{
|
||||
() => {
|
||||
const [inputValue, setInputValue] = React.useState('');
|
||||
return (
|
||||
<div className="p-4">
|
||||
@ -31,9 +31,11 @@ import { Input } from '@ohif/ui';
|
||||
<Input placeholder="Without label" />
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={Input} />
|
||||
```
|
||||
@ -5,8 +5,8 @@ route: components/InputDateRange
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Playground, Props } from 'docz';
|
||||
import { InputDateRange } from '../';
|
||||
|
||||
import { InputDateRange } from '@ohif/ui';
|
||||
|
||||
# Input Date Range
|
||||
|
||||
@ -18,8 +18,9 @@ import { InputDateRange } from '@ohif/ui';
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
```jsx live
|
||||
{
|
||||
() => {
|
||||
const [dates, setDates] = useState({
|
||||
startDate: null,
|
||||
endDate: null,
|
||||
@ -30,14 +31,16 @@ import { InputDateRange } from '@ohif/ui';
|
||||
<InputDateRange
|
||||
label="Dates"
|
||||
value={dates}
|
||||
onChange={(dates) => setDates(dates)}
|
||||
onChange={dates => setDates(dates)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={InputDateRange} />
|
||||
```
|
||||
@ -5,8 +5,8 @@ route: components/InputGroup
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Playground, Props } from 'docz';
|
||||
import { InputGroup } from '../';
|
||||
|
||||
import { InputGroup } from '@ohif/ui';
|
||||
|
||||
# Input Group
|
||||
|
||||
@ -18,8 +18,9 @@ import { InputGroup } from '@ohif/ui';
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
```jsx live
|
||||
{
|
||||
() => {
|
||||
const [filterValues, setFilterValues] = useState({
|
||||
patient: '',
|
||||
studyDate: {
|
||||
@ -82,9 +83,11 @@ import { InputGroup } from '@ohif/ui';
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={InputGroup} />
|
||||
```
|
||||
@ -5,8 +5,8 @@ route: components/InputMultiSelect
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Playground, Props } from 'docz';
|
||||
import { InputMultiSelect } from '../';
|
||||
|
||||
import { InputMultiSelect } from '@ohif/ui';
|
||||
|
||||
# Input Multi Select
|
||||
|
||||
@ -18,8 +18,9 @@ import { InputMultiSelect } from '@ohif/ui';
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
```jsx live
|
||||
{
|
||||
() => {
|
||||
const [values, setValues] = useState([]);
|
||||
return (
|
||||
<div className="flex flex-col flex-1 p-4 items-center">
|
||||
@ -33,16 +34,18 @@ import { InputMultiSelect } from '@ohif/ui';
|
||||
{ value: 'SR', label: 'SR' },
|
||||
]}
|
||||
value={values}
|
||||
onChange={(values) => {
|
||||
onChange={values => {
|
||||
setValues(values);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={InputMultiSelect} />
|
||||
```
|
||||
@ -5,8 +5,8 @@ route: components/InputText
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Playground, Props } from 'docz';
|
||||
import { InputText } from '../';
|
||||
|
||||
import { InputText } from '@ohif/ui';
|
||||
|
||||
# Input Text
|
||||
|
||||
@ -18,24 +18,28 @@ import { InputText } from '@ohif/ui';
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
```jsx live
|
||||
{
|
||||
() => {
|
||||
const [text, setText] = useState('');
|
||||
return (
|
||||
<div className="flex flex-col flex-1 p-4 items-center">
|
||||
<div className="w-56">
|
||||
<InputText
|
||||
label='Name'
|
||||
label="Name"
|
||||
value={text}
|
||||
onChange={value => {setText(value)}}
|
||||
onChange={value => {
|
||||
setText(value);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}}
|
||||
|
||||
</Playground>
|
||||
);
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={InputText} />
|
||||
```
|
||||
@ -4,8 +4,7 @@ menu: Form
|
||||
route: components/label
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { Label } from '../';
|
||||
import { Label } from '@ohif/ui';
|
||||
|
||||
# Label
|
||||
|
||||
@ -17,16 +16,19 @@ import { Label } from '@ohif/ui';
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
```jsx live
|
||||
{
|
||||
() => {
|
||||
return (
|
||||
<div className="p-4">
|
||||
<Label text="Label" />
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={Label} />
|
||||
```
|
||||
84
platform/docs/docs/component-library/components/ListMenu.mdx
Normal file
84
platform/docs/docs/component-library/components/ListMenu.mdx
Normal file
@ -0,0 +1,84 @@
|
||||
---
|
||||
name: List Menu
|
||||
menu: General
|
||||
route: components/listMenu
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
import { ListMenu, ToolbarButton } from '@ohif/ui';
|
||||
|
||||
# List Menu
|
||||
|
||||
List Menus are used to populate expandable Toolbar.
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { ListMenu, ToolbarButton } from '@ohif/ui';
|
||||
```
|
||||
|
||||
```jsx live
|
||||
{
|
||||
() => {
|
||||
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>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={ListMenu} />
|
||||
```
|
||||
@ -5,8 +5,8 @@ route: components/measurementTable
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Playground, Props } from 'docz';
|
||||
import { MeasurementTable } from '../';
|
||||
|
||||
import { MeasurementTable } from '@ohif/ui';
|
||||
|
||||
# Measurement Table
|
||||
|
||||
@ -18,7 +18,7 @@ import { MeasurementTable } from '@ohif/ui';
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
````jsx live
|
||||
{() => {
|
||||
const [activeMeasurementItem, setActiveMeasurementItem] = useState(null);
|
||||
const measurementTableData = {
|
||||
@ -30,8 +30,8 @@ import { MeasurementTable } from '@ohif/ui';
|
||||
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}`),
|
||||
onClick: id => setActiveMeasurementItem(s => (s === id ? null : id)),
|
||||
onEdit: id => alert(`Edit: ${id}`),
|
||||
};
|
||||
return (
|
||||
<div className="p-4 w-80">
|
||||
@ -39,11 +39,11 @@ import { MeasurementTable } from '@ohif/ui';
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
```
|
||||
|
||||
## Empty Data
|
||||
|
||||
<Playground>
|
||||
```jsx live
|
||||
{() => {
|
||||
return (
|
||||
<div className="p-4 w-80">
|
||||
@ -51,8 +51,9 @@ import { MeasurementTable } from '@ohif/ui';
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={MeasurementTable} />
|
||||
````
|
||||
30
platform/docs/docs/component-library/components/NavBar.mdx
Normal file
30
platform/docs/docs/component-library/components/NavBar.mdx
Normal file
@ -0,0 +1,30 @@
|
||||
---
|
||||
name: NavBar
|
||||
menu: Navigation
|
||||
route: components/navBar
|
||||
---
|
||||
|
||||
import { NavBar, Typography } from '@ohif/ui';
|
||||
|
||||
# NavBar
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { NavBar } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
```jsx live
|
||||
<NavBar className="justify-center">
|
||||
<Typography variant="h3" className="m-2">
|
||||
Header content
|
||||
</Typography>
|
||||
</NavBar>
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={NavBar} />
|
||||
```
|
||||
@ -4,8 +4,7 @@ menu: Feedback
|
||||
route: components/notification
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { Notification } from '../';
|
||||
import { Notification } from '@ohif/ui';
|
||||
|
||||
# Notification
|
||||
|
||||
@ -20,8 +19,9 @@ import { Notification } from '@ohif/ui';
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
```jsx live
|
||||
{
|
||||
() => {
|
||||
return (
|
||||
<div className="p-4 w-full lg:w-2/3">
|
||||
<Notification
|
||||
@ -50,9 +50,11 @@ import { Notification } from '@ohif/ui';
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={Notification} />
|
||||
```
|
||||
@ -4,8 +4,7 @@ menu: Data Display
|
||||
route: components/segmentationTable
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { SegmentationTable } from '../';
|
||||
import { SegmentationTable } from '@ohif/ui';
|
||||
|
||||
# Segmentation Table
|
||||
|
||||
@ -17,8 +16,9 @@ import { SegmentationTable } from '@ohif/ui';
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
```jsx live
|
||||
{
|
||||
() => {
|
||||
const tableData = {
|
||||
title: 'Segments',
|
||||
amount: 12,
|
||||
@ -29,9 +29,11 @@ import { SegmentationTable } from '@ohif/ui';
|
||||
<SegmentationTable {...tableData} />
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={SegmentationTable} />
|
||||
```
|
||||
@ -4,8 +4,7 @@ menu: Form
|
||||
route: components/select
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { Select } from '../';
|
||||
import { Select } from '@ohif/ui';
|
||||
|
||||
# Select
|
||||
|
||||
@ -17,7 +16,7 @@ import { Select } from '@ohif/ui';
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
````jsx live
|
||||
<div className="flex flex-col flex-1 p-4 items-center">
|
||||
<div className="w-56">
|
||||
<Select
|
||||
@ -30,11 +29,11 @@ import { Select } from '@ohif/ui';
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Playground>
|
||||
```
|
||||
|
||||
## Disabled
|
||||
|
||||
<Playground>
|
||||
```jsx live
|
||||
<div className="flex flex-col flex-1 p-4 items-center">
|
||||
<div className="w-56">
|
||||
<Select
|
||||
@ -48,11 +47,11 @@ import { Select } from '@ohif/ui';
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Playground>
|
||||
```
|
||||
|
||||
## No Options
|
||||
|
||||
<Playground>
|
||||
```jsx live
|
||||
<div className="flex flex-col flex-1 p-4 items-center">
|
||||
<div className="w-56">
|
||||
<Select
|
||||
@ -63,8 +62,9 @@ import { Select } from '@ohif/ui';
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Playground>
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={Select} />
|
||||
````
|
||||
@ -4,8 +4,7 @@ menu: General
|
||||
route: components/sidePanel
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { SidePanel } from '../';
|
||||
import { SidePanel } from '@ohif/ui';
|
||||
|
||||
# SidePanel
|
||||
|
||||
@ -17,7 +16,7 @@ import { SidePanel } from '@ohif/ui';
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
````jsx live
|
||||
<div
|
||||
className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
|
||||
style={{ height: '500px' }}
|
||||
@ -36,12 +35,12 @@ import { SidePanel } from '@ohif/ui';
|
||||
CONTENT
|
||||
</div>
|
||||
</div>
|
||||
</Playground>
|
||||
```
|
||||
|
||||
|
||||
## Multiple panels
|
||||
|
||||
<Playground>
|
||||
```jsx live
|
||||
<div
|
||||
className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
|
||||
style={{ height: '500px' }}
|
||||
@ -67,9 +66,10 @@ import { SidePanel } from '@ohif/ui';
|
||||
CONTENT
|
||||
</div>
|
||||
</div>
|
||||
</Playground>
|
||||
```
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={SidePanel} />
|
||||
````
|
||||
@ -5,7 +5,7 @@ route: components/splitButton
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Playground, Props } from 'docz';
|
||||
|
||||
import { SplitButton, WindowLevelMenuItem } from '@ohif/ui';
|
||||
|
||||
# Split Button
|
||||
@ -18,8 +18,9 @@ Split Buttons are used to populate the Toolbar.
|
||||
import { SplitButton, WindowLevelMenuItem } from '@ohif/ui';
|
||||
```
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
```jsx live
|
||||
{
|
||||
() => {
|
||||
const mockedProps = {
|
||||
bState: {
|
||||
primaryToolId: 'WWWC',
|
||||
@ -79,9 +80,11 @@ import { SplitButton, WindowLevelMenuItem } from '@ohif/ui';
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={SplitButton} />
|
||||
```
|
||||
@ -4,8 +4,7 @@ menu: General
|
||||
route: components/studyBrowser
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { StudyBrowser } from '../';
|
||||
import { StudyBrowser } from '@ohif/ui';
|
||||
|
||||
# StudyBrowser
|
||||
|
||||
@ -17,8 +16,9 @@ import { StudyBrowser } from '@ohif/ui';
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
```jsx live
|
||||
{
|
||||
() => {
|
||||
const studyWithSR = {
|
||||
studyInstanceUid: '1',
|
||||
date: '07-Sept-2010',
|
||||
@ -93,15 +93,21 @@ import { StudyBrowser } from '@ohif/ui';
|
||||
},
|
||||
];
|
||||
return (
|
||||
<div className="flex flex-1" style={{height: '400px'}}>
|
||||
<div className="flex flex-1" style={{ height: '400px' }}>
|
||||
<div className="overflow-hidden w-64">
|
||||
<StudyBrowser tabs={tabs} activeTabName='primary' expandedStudyInstanceUIDs={[]} />
|
||||
<StudyBrowser
|
||||
tabs={tabs}
|
||||
activeTabName="primary"
|
||||
expandedStudyInstanceUIDs={[]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={StudyBrowser} />
|
||||
```
|
||||
@ -5,8 +5,8 @@ route: components/studyItem
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Playground, Props } from 'docz';
|
||||
import { StudyItem } from '../';
|
||||
|
||||
import { StudyItem } from '@ohif/ui';
|
||||
|
||||
# StudyItem
|
||||
|
||||
@ -20,8 +20,9 @@ import { StudyItem } from '@ohif/ui';
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
```jsx live
|
||||
{
|
||||
() => {
|
||||
const [studyActive, setStudyActive] = useState(null);
|
||||
return (
|
||||
<div className="flex flex-1 items-center justify-center p-4">
|
||||
@ -38,9 +39,11 @@ import { StudyItem } from '@ohif/ui';
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={StudyItem} />
|
||||
```
|
||||
@ -5,9 +5,9 @@ route: components/studyListFilter
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Playground, Props } from 'docz';
|
||||
import { StudyListFilter, Modal } from '../';
|
||||
import { ModalProvider } from '../../contextProviders';
|
||||
|
||||
import { StudyListFilter, Modal } from '@ohif/ui';
|
||||
import { ModalProvider } from '@ohif/ui';
|
||||
|
||||
# Study List Filter
|
||||
|
||||
@ -19,8 +19,9 @@ import { StudyListFilter, ModalProvider, Modal } from '@ohif/ui';
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
```jsx live
|
||||
{
|
||||
() => {
|
||||
const defaultFilterValues = {
|
||||
patientName: '',
|
||||
mrn: '',
|
||||
@ -113,9 +114,11 @@ import { StudyListFilter, ModalProvider, Modal } from '@ohif/ui';
|
||||
/>
|
||||
</ModalProvider>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={StudyListFilter} />
|
||||
```
|
||||
@ -5,8 +5,8 @@ route: components/studyListPagination
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Playground, Props } from 'docz';
|
||||
import { StudyListPagination } from '../';
|
||||
|
||||
import { StudyListPagination } from '@ohif/ui';
|
||||
|
||||
# StudyListPagination
|
||||
|
||||
@ -18,14 +18,15 @@ import { StudyListPagination } from '@ohif/ui';
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
```jsx live
|
||||
{
|
||||
() => {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [perPage, setPerPage] = useState(25);
|
||||
const onChangePage = (page) => {
|
||||
const onChangePage = page => {
|
||||
setCurrentPage(page);
|
||||
};
|
||||
const onChangePerPage = (perPage) => {
|
||||
const onChangePerPage = perPage => {
|
||||
setPerPage(perPage);
|
||||
setCurrentPage(1);
|
||||
};
|
||||
@ -37,9 +38,11 @@ import { StudyListPagination } from '@ohif/ui';
|
||||
perPage={perPage}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={StudyListPagination} />
|
||||
```
|
||||
@ -5,8 +5,8 @@ route: components/studyListTable
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Playground, Props } from 'docz';
|
||||
import { StudyListTable } from '../';
|
||||
|
||||
import { StudyListTable } from '@ohif/ui';
|
||||
|
||||
# StudyListTable
|
||||
|
||||
@ -20,13 +20,14 @@ import { StudyListTable } from '@ohif/ui';
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
```jsx live
|
||||
{
|
||||
() => {
|
||||
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);
|
||||
const isExpanded = expandedRows.some(k => k === rowKey);
|
||||
return {
|
||||
row: [
|
||||
{ key: 'Cell 01', content: 'Cell 01', gridCol: 2 },
|
||||
@ -40,8 +41,8 @@ import { StudyListTable } from '@ohif/ui';
|
||||
</td>
|
||||
),
|
||||
onClickRow: () =>
|
||||
setExpandedRows((rows) =>
|
||||
isExpanded ? rows.filter((n) => rowKey !== n) : [...rows, rowKey]
|
||||
setExpandedRows(rows =>
|
||||
isExpanded ? rows.filter(n => rowKey !== n) : [...rows, rowKey]
|
||||
),
|
||||
isExpanded,
|
||||
};
|
||||
@ -54,9 +55,11 @@ import { StudyListTable } from '@ohif/ui';
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={StudyListTable} />
|
||||
```
|
||||
@ -4,8 +4,7 @@ menu: Data Display
|
||||
route: components/table
|
||||
---
|
||||
|
||||
import { Playground, Props, Link } from 'docz';
|
||||
import { Table, TableHead, TableBody, TableRow, TableCell } from '../';
|
||||
import { Table, TableHead, TableBody, TableRow, TableCell } from '@ohif/ui';
|
||||
|
||||
# Table
|
||||
|
||||
@ -24,30 +23,30 @@ import { Table, TableBody, TableCell, TableHead, TableRow } from '@ohif/ui';
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<div className="p-4">
|
||||
<Table>
|
||||
<TableHead>
|
||||
```jsx live
|
||||
<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>Item 01</TableCell>
|
||||
<TableCell>Item 02</TableCell>
|
||||
<TableCell>Item 03</TableCell>
|
||||
<TableCell>Item 04</TableCell>
|
||||
<TableCell>Content 01</TableCell>
|
||||
<TableCell>Content 02</TableCell>
|
||||
<TableCell>Content 03</TableCell>
|
||||
<TableCell>Content 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>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Table width
|
||||
|
||||
@ -76,3 +75,4 @@ passing a `className` or `style`.
|
||||
### TableCell Props
|
||||
|
||||
<Props of={TableCell} />
|
||||
```
|
||||
@ -4,7 +4,7 @@ menu: General
|
||||
route: components/thumbnail
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
|
||||
import { Thumbnail } from '../';
|
||||
|
||||
# Thumbnail
|
||||
@ -20,7 +20,7 @@ import { Thumbnail } from '@ohif/ui';
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
```jsx live
|
||||
<div className="flex flex-1 items-center justify-center p-4">
|
||||
<div className="w-56">
|
||||
<Thumbnail
|
||||
@ -33,7 +33,7 @@ import { Thumbnail } from '@ohif/ui';
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Playground>
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
@ -4,7 +4,7 @@ menu: General
|
||||
route: components/ThumbnailNoImage
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
|
||||
import { ThumbnailNoImage } from '../';
|
||||
|
||||
# ThumbnailNoImage
|
||||
@ -19,7 +19,7 @@ import { Thumbnail } from '@ohif/ui';
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
```jsx live
|
||||
<div className="flex flex-1 items-center justify-center p-4">
|
||||
<div className="w-64">
|
||||
<ThumbnailNoImage
|
||||
@ -30,7 +30,7 @@ import { Thumbnail } from '@ohif/ui';
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Playground>
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
@ -4,7 +4,7 @@ menu: General
|
||||
route: components/ThumbnailTracked
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
|
||||
import { ThumbnailTracked } from '../';
|
||||
|
||||
# ThumbnailTracked
|
||||
@ -17,7 +17,7 @@ import { ThumbnailTracked } from '@ohif/ui';
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
```jsx live
|
||||
<div className="flex flex-1 items-center justify-center p-4">
|
||||
<div className="w-64">
|
||||
<ThumbnailTracked
|
||||
@ -32,7 +32,7 @@ import { ThumbnailTracked } from '@ohif/ui';
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Playground>
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
@ -0,0 +1,46 @@
|
||||
---
|
||||
name: Toolbar Button
|
||||
menu: General
|
||||
route: components/toolbarButton
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
import { ToolbarButton } from '@ohif/ui';
|
||||
|
||||
# Toolbar Button
|
||||
|
||||
Toolbar Buttons are used to populate the Toolbar.
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { ToolbarButton } from '@ohif/ui';
|
||||
```
|
||||
|
||||
```jsx live
|
||||
function ToolbarButtonExample(props) {
|
||||
// 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: true,
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="py-10 flex justify-center">
|
||||
<ToolbarButton {...tool} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={ToolbarButton} />
|
||||
```
|
||||
40
platform/docs/docs/component-library/components/Tooltip.mdx
Normal file
40
platform/docs/docs/component-library/components/Tooltip.mdx
Normal file
@ -0,0 +1,40 @@
|
||||
---
|
||||
name: Tooltip
|
||||
menu: Data Display
|
||||
route: components/tooltip
|
||||
---
|
||||
|
||||
import { Tooltip, Typography } from '@ohif/ui';
|
||||
|
||||
# Tooltip
|
||||
|
||||
Tooltips display informative content when users hover over, focus on, or tap an
|
||||
element.
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { Tooltip } from '@ohif/ui';
|
||||
```
|
||||
|
||||
```jsx live
|
||||
function TooltipExample(props) {
|
||||
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>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={Tooltip} />
|
||||
```
|
||||
@ -4,8 +4,7 @@ menu: Data Display
|
||||
route: components/tooltipClipboard
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { TooltipClipboard } from '../';
|
||||
import { TooltipClipboard } from '@ohif/ui';
|
||||
|
||||
# Tooltip Clipboard
|
||||
|
||||
@ -14,16 +13,13 @@ element.
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
```jsx live
|
||||
import { TooltipClipboard } from '@ohif/ui';
|
||||
```
|
||||
|
||||
<Playground>
|
||||
<div className="p-4">
|
||||
<TooltipClipboard>Text to be copied</TooltipClipboard>
|
||||
</div>
|
||||
); }}
|
||||
</Playground>
|
||||
<div className="p-4">
|
||||
<TooltipClipboard>Text to be copied</TooltipClipboard>
|
||||
</div>;
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
@ -4,8 +4,7 @@ menu: General
|
||||
route: components/typography
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { Typography } from '../';
|
||||
import { Typography } from '@ohif/ui';
|
||||
|
||||
# Typography
|
||||
|
||||
@ -20,7 +19,7 @@ import { Typography } from '@ohif/ui';
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
````jsx live
|
||||
<div className="p-4">
|
||||
<Typography variant="h1">
|
||||
h1. The five boxing wizards jump quickly.
|
||||
@ -47,7 +46,7 @@ import { Typography } from '@ohif/ui';
|
||||
body. The five boxing wizards jump quickly.
|
||||
</Typography>
|
||||
</div>
|
||||
</Playground>
|
||||
```
|
||||
|
||||
## Changing the HTML element
|
||||
|
||||
@ -56,14 +55,15 @@ 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>
|
||||
```jsx live
|
||||
<div className="p-4">
|
||||
<Typography variant="h1" component="h2">
|
||||
This is a h2 using the h1 styles.
|
||||
</Typography>
|
||||
</div>
|
||||
</Playground>
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={Typography} />
|
||||
````
|
||||
55
platform/docs/docs/component-library/components/Viewport.mdx
Normal file
55
platform/docs/docs/component-library/components/Viewport.mdx
Normal file
@ -0,0 +1,55 @@
|
||||
---
|
||||
name: Viewport
|
||||
menu: Data Display
|
||||
route: components/viewport
|
||||
---
|
||||
|
||||
import { Viewport } from '@ohif/ui';
|
||||
|
||||
# Viewport
|
||||
|
||||
Viewport component to be used in the ViewportGrid.
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { Viewport } from '@ohif/ui';
|
||||
```
|
||||
|
||||
## Basic usage
|
||||
|
||||
```jsx live
|
||||
<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>
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={Viewport} />
|
||||
```
|
||||
@ -4,8 +4,7 @@ menu: Data Display
|
||||
route: components/viewportActionBar
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { ViewportActionBar } from '../';
|
||||
import { ViewportActionBar } from '@ohif/ui';
|
||||
|
||||
# Viewport Action Bar
|
||||
|
||||
@ -19,8 +18,7 @@ import { ViewportActionBar } from '@ohif/ui';
|
||||
|
||||
## Basic usage
|
||||
|
||||
<>
|
||||
<Playground>
|
||||
````jsx live
|
||||
<div className="p-4 h-64">
|
||||
<ViewportActionBar
|
||||
onSeriesChange={direction => alert(`Series ${direction}`)}
|
||||
@ -46,8 +44,9 @@ import { ViewportActionBar } from '@ohif/ui';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Playground>
|
||||
<Playground>
|
||||
```
|
||||
|
||||
```jsx live
|
||||
<div className="p-4 h-64">
|
||||
<ViewportActionBar
|
||||
onSeriesChange={direction => alert(`Series ${direction}`)}
|
||||
@ -73,8 +72,9 @@ import { ViewportActionBar } from '@ohif/ui';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Playground>
|
||||
<Playground>
|
||||
```
|
||||
|
||||
```jsx live
|
||||
<div className="p-4 h-64">
|
||||
<ViewportActionBar
|
||||
onSeriesChange={direction => alert(`Series ${direction}`)}
|
||||
@ -100,8 +100,8 @@ import { ViewportActionBar } from '@ohif/ui';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Playground>
|
||||
<Playground>
|
||||
```
|
||||
```jsx live
|
||||
<div className="p-4 h-64">
|
||||
<ViewportActionBar
|
||||
onSeriesChange={direction => alert(`Series ${direction}`)}
|
||||
@ -127,9 +127,10 @@ import { ViewportActionBar } from '@ohif/ui';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Playground>
|
||||
```
|
||||
</>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={ViewportActionBar} />
|
||||
````
|
||||
@ -4,9 +4,7 @@ menu: General
|
||||
route: components/viewportGrid
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { DragAndDropProvider } from '../../contextProviders';
|
||||
import { ViewportGrid } from '../../components';
|
||||
import { DragAndDropProvider, ViewportGrid } from '@ohif/ui';
|
||||
|
||||
# ViewportGrid
|
||||
|
||||
@ -20,8 +18,8 @@ import { ViewportGrid } from '@ohif/ui';
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<DragAndDropProvider>
|
||||
```jsx live
|
||||
<DragAndDropProvider>
|
||||
<div className="p-4 h-56">
|
||||
<ViewportGrid numRows={1} numCols={2}>
|
||||
<div className="flex items-center justify-center h-full text-white">
|
||||
@ -32,9 +30,10 @@ import { ViewportGrid } from '@ohif/ui';
|
||||
</div>
|
||||
</ViewportGrid>
|
||||
</div>
|
||||
</DragAndDropProvider>
|
||||
</Playground>
|
||||
</DragAndDropProvider>
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={ViewportGrid} />
|
||||
```
|
||||
@ -4,9 +4,8 @@ menu: General
|
||||
route: components/viewport-pane
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { ViewportGrid, ViewportPane } from '../../components';
|
||||
import { DragAndDropProvider } from '../../contextProviders';
|
||||
|
||||
import { ViewportGrid, ViewportPane, DragAndDropProvider } from '@ohif/ui';
|
||||
|
||||
# ViewportPane
|
||||
|
||||
@ -20,7 +19,7 @@ import { ViewportPane } from '@ohif/ui';
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
```jsx live
|
||||
<div className="p-4 h-56">
|
||||
<DragAndDropProvider>
|
||||
<ViewportGrid numRows={1} numCols={2}>
|
||||
@ -29,7 +28,7 @@ import { ViewportPane } from '@ohif/ui';
|
||||
</ViewportGrid>
|
||||
</DragAndDropProvider>
|
||||
</div>
|
||||
</Playground>
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
@ -5,7 +5,7 @@ route: components/windowLevelMenuItem
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Playground, Props } from 'docz';
|
||||
|
||||
import { ListMenu, WindowLevelMenuItem } from '@ohif/ui';
|
||||
|
||||
# Window Level Menu Item
|
||||
@ -18,16 +18,19 @@ Window Level Menu Item are used as renderer of the ListMenu.
|
||||
import { WindowLevelMenuItem, ListMenu } from '@ohif/ui';
|
||||
```
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
```jsx live
|
||||
{
|
||||
() => {
|
||||
return (
|
||||
<div className="py-10 flex justify-center">
|
||||
<ListMenu renderer={WindowLevelMenuItem} items={[]} />
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={WindowLevelMenuItem} />
|
||||
```
|
||||
@ -4,9 +4,7 @@ menu: General
|
||||
route: components/icon
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { Icon } from '../';
|
||||
import { ICONS } from './getIcon';
|
||||
import { Icon, ICONS } from '@ohif/ui';
|
||||
|
||||
# Icon
|
||||
|
||||
@ -18,11 +16,11 @@ import { Icon } from '@ohif/ui';
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<div className="p-4">
|
||||
<Icon name="series-active" className="text-primary-light m-4" />
|
||||
</div>
|
||||
</Playground>
|
||||
```jsx live
|
||||
<div className="p-4">
|
||||
<Icon name="series-active" className="text-primary-light m-4" />
|
||||
</div>
|
||||
```
|
||||
|
||||
## All Icons
|
||||
|
||||
@ -49,3 +47,7 @@ import { Icon } from '@ohif/ui';
|
||||
|
||||
The `Icon` component takes a single prop of `name`, which indicates which Icon
|
||||
should be displayed. The icon inherit the component text/font styles.
|
||||
|
||||
```
|
||||
|
||||
```
|
||||
@ -3,9 +3,7 @@ name: ModalProvider
|
||||
route: customHooks/modalProvider
|
||||
---
|
||||
|
||||
import { Props } from 'docz';
|
||||
import { ModalProvider } from '../contextProviders';
|
||||
import ModalComponent from './ModalComponent.jsx';
|
||||
import { ModalComponent, ModalProvider } from '@ohif/ui';
|
||||
|
||||
# Modal Context Provider
|
||||
|
||||
@ -3,14 +3,17 @@ name: ViewportDialogProvider
|
||||
route: customHooks/viewportDialogProvider
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
|
||||
<!-- This is a workaround to import things from ohif/core as docz does not allow us to access window element and @ohif/core does use it once we import to instanciate cornerstone -->
|
||||
import UIViewportDialogService from './../../../core/src/services/UIViewportDialogService';
|
||||
import ServicesManager from './../../../core/src/services/ServicesManager';
|
||||
<!-- import UIViewportDialogService from './../../../core/src/services/UIViewportDialogService';
|
||||
import ServicesManager from './../../../core/src/services/ServicesManager'; !-->
|
||||
|
||||
import { Dialog, Button, Notification } from '../components';
|
||||
import { ViewportDialogProvider, useViewportDialog } from '../contextProviders';
|
||||
import {
|
||||
Dialog,
|
||||
Button,
|
||||
Notification,
|
||||
ViewportDialogProvider,
|
||||
useViewportDialog,
|
||||
} from '@ohif/ui';
|
||||
|
||||
# Viewport Dialog Provider
|
||||
|
||||
@ -19,7 +22,7 @@ component across all application.
|
||||
|
||||
## Sample
|
||||
|
||||
<Playground>
|
||||
````jsx live
|
||||
{() => {
|
||||
const ViewportNotification = ({ hide }) => {
|
||||
return (
|
||||
@ -80,11 +83,11 @@ component across all application.
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
```
|
||||
|
||||
## Example using UIViewportDialogService
|
||||
|
||||
<Playground>
|
||||
```jsx live
|
||||
{() => {
|
||||
const ViewportNotification = ({ hide }) => {
|
||||
return (
|
||||
@ -172,8 +175,9 @@ component across all application.
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
```
|
||||
|
||||
## Properties:
|
||||
|
||||
<Props of={ViewportDialogProvider} />
|
||||
````
|
||||
@ -0,0 +1,178 @@
|
||||
---
|
||||
name: ViewportDialogProvider
|
||||
route: customHooks/viewportDialogProvider
|
||||
---
|
||||
|
||||
|
||||
|
||||
<!-- This is a workaround to import things from ohif/core as docz does not allow us to access window element and @ohif/core does use it once we import to instanciate cornerstone -->
|
||||
import UIViewportDialogService from './../../../core/src/services/UIViewportDialogService';
|
||||
import ServicesManager from './../../../core/src/services/ServicesManager';
|
||||
|
||||
import { Dialog, Button, Notification, ViewportDialogProvider, useViewportDialog } from '@ohif/ui';
|
||||
|
||||
# Viewport Dialog Provider
|
||||
|
||||
This is a context provider that allow the application to share the modal
|
||||
component across all application.
|
||||
|
||||
## Sample
|
||||
|
||||
```jsx live
|
||||
{() => {
|
||||
const ViewportNotification = ({ hide }) => {
|
||||
return (
|
||||
<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 => {
|
||||
if (typeof window !== 'undefined') {
|
||||
window.alert(value);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
const ViewportActionButtons = () => {
|
||||
const [dialogState, dialogApi] = useViewportDialog();
|
||||
return (
|
||||
<Button onClick={() => dialogApi.show({ content: ViewportNotification })}>
|
||||
Open Dialog
|
||||
</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">
|
||||
<ViewportDialogProvider dialog={Dialog}>
|
||||
<div className="flex flex-1 flex-col items-center justify-center h-full">
|
||||
<ViewportActionButtons />
|
||||
<span>CONTENT 1</span>
|
||||
</div>
|
||||
</ViewportDialogProvider>
|
||||
</div>
|
||||
<div className="flex flex-1 items-center justify-center h-full w-full bg-black text-white border border-primary-main">
|
||||
<ViewportDialogProvider dialog={Dialog}>
|
||||
<div className="flex flex-1 flex-col items-center justify-center h-full">
|
||||
<ViewportActionButtons />
|
||||
<span>CONTENT 1</span>
|
||||
</div>
|
||||
</ViewportDialogProvider>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
```
|
||||
|
||||
## Example using UIViewportDialogService
|
||||
|
||||
```jsx live
|
||||
{() => {
|
||||
const ViewportNotification = ({ hide }) => {
|
||||
return (
|
||||
<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 => {
|
||||
if (typeof window !== 'undefined') {
|
||||
window.alert(value);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
// Creating servicesManager and register services should be in the root of your app
|
||||
const servicesManager = new ServicesManager();
|
||||
servicesManager.registerServices([UIViewportDialogService]);
|
||||
// Get service instance
|
||||
const _UIViewportDialogService =
|
||||
servicesManager.services.UIViewportDialogService;
|
||||
console.log(_UIViewportDialogService);
|
||||
return (
|
||||
<div className="w-full flex flex-col p-4" style={{height: '400px'}}>
|
||||
<div className="flex flex-2">
|
||||
<Button
|
||||
className="mr-4 mb-4"
|
||||
onClick={() =>
|
||||
_UIViewportDialogService.show({
|
||||
content: ViewportNotification,
|
||||
viewportIndex: 0,
|
||||
})
|
||||
}
|
||||
>
|
||||
Open dialog on 0
|
||||
</Button>
|
||||
<Button
|
||||
className="mr-4 mb-4"
|
||||
onClick={() =>
|
||||
_UIViewportDialogService.show({
|
||||
content: ViewportNotification,
|
||||
viewportIndex: 1,
|
||||
})
|
||||
}
|
||||
>
|
||||
Open dialog on 1
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex flex-1 w-full flex-row">
|
||||
<ViewportDialogProvider
|
||||
dialog={Dialog}
|
||||
service={_UIViewportDialogService}
|
||||
viewportIndex={0}
|
||||
>
|
||||
<div className="flex flex-1 items-center justify-center h-full bg-black text-white border border-primary-main">
|
||||
CONTENT 0
|
||||
</div>
|
||||
</ViewportDialogProvider>
|
||||
<ViewportDialogProvider
|
||||
dialog={Dialog}
|
||||
service={_UIViewportDialogService}
|
||||
viewportIndex={1}
|
||||
>
|
||||
<div className="flex flex-1 items-center justify-center h-full bg-black text-white border border-primary-main">
|
||||
CONTENT 1
|
||||
</div>
|
||||
</ViewportDialogProvider>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
```
|
||||
|
||||
## Properties:
|
||||
|
||||
<Props of={ViewportDialogProvider} />
|
||||
@ -3,8 +3,7 @@ name: Colors
|
||||
route: system/colors
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import BackgroundColor from './BackgroundColor';
|
||||
import BackgroundColor from '@ohif/ui';
|
||||
|
||||
# Color System
|
||||
|
||||
@ -29,7 +28,7 @@ details about color classes.
|
||||
|
||||
## Text
|
||||
|
||||
<Playground>
|
||||
````jsx live
|
||||
<div className="p-8">
|
||||
<p className="text-common-bright">text-common-bright</p>
|
||||
<p className="text-common-light">text-common-light</p>
|
||||
@ -37,7 +36,7 @@ details about color classes.
|
||||
<p className="text-common-dark">text-common-dark</p>
|
||||
<p className="text-common-active">text-common-active</p>
|
||||
</div>
|
||||
</Playground>
|
||||
```
|
||||
|
||||
## Background
|
||||
|
||||
@ -80,4 +79,4 @@ common: {
|
||||
dark: '#726f7e',
|
||||
active: '#2c3074',
|
||||
},
|
||||
```
|
||||
````
|
||||
@ -3,8 +3,7 @@ name: Getting Started
|
||||
route: /
|
||||
---
|
||||
|
||||
import { Playground } from 'docz';
|
||||
import { Button } from '../components';
|
||||
import { Button } from '@ohif/ui';
|
||||
|
||||
# Getting Started
|
||||
|
||||
@ -33,11 +32,11 @@ yarn add @ohif/ui --exact
|
||||
import { Button } from '@ohif/ui';
|
||||
```
|
||||
|
||||
<Playground className="p-8" style={{ padding: 8 }}>
|
||||
<div className="p-8">
|
||||
<Button onClick={() => alert('Hello!')}>Click here!</Button>
|
||||
</div>
|
||||
</Playground>
|
||||
```jsx live
|
||||
<div className="p-8">
|
||||
<Button onClick={() => alert('Hello!')}>Click here!</Button>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
@ -5,7 +5,6 @@ route: examples/studyList
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Playground } from 'docz';
|
||||
import {
|
||||
Icon,
|
||||
StudyListExpandedRow,
|
||||
@ -17,7 +16,7 @@ import {
|
||||
StudyListTable,
|
||||
StudyListPagination,
|
||||
StudyListFilter
|
||||
} from '../../components';
|
||||
} from '@ohif/ui';
|
||||
import utils from '../../utils';
|
||||
|
||||
|
||||
@ -29,7 +28,7 @@ import moment from 'moment';
|
||||
This example shows you how you can build a Study List page using the available
|
||||
components.
|
||||
|
||||
<Playground>
|
||||
```jsx live
|
||||
{() => {
|
||||
const defaultFilterValues = {
|
||||
patientName: '',
|
||||
@ -344,4 +343,4 @@ components.
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
```
|
||||
@ -5,7 +5,7 @@ route: examples/viewer
|
||||
---
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Playground, Props } from 'docz';
|
||||
|
||||
import {
|
||||
NavBar,
|
||||
SidePanel,
|
||||
@ -23,15 +23,15 @@ import {
|
||||
ViewportPane,
|
||||
StudySummary,
|
||||
MeasurementTable,
|
||||
} from '../../components';
|
||||
import Header from './components/Header';
|
||||
import { DragAndDropProvider } from '../../contextProviders';
|
||||
Header,
|
||||
DragAndDropProvider,
|
||||
} from '@ohif/ui';
|
||||
|
||||
import { tabs } from './studyBrowserMockData';
|
||||
|
||||
# Viewer
|
||||
|
||||
<Playground>
|
||||
```jsx live
|
||||
{() => {
|
||||
const [activeMeasurementItem, setActiveMeasurementItem] = useState(null);
|
||||
const descriptionData = {
|
||||
@ -175,4 +175,4 @@ import { tabs } from './studyBrowserMockData';
|
||||
</DragAndDropProvider>
|
||||
);
|
||||
}}
|
||||
</Playground>
|
||||
```
|
||||
@ -72,6 +72,7 @@ const isI18nStaging = process.env.I18N_STAGING === 'true';
|
||||
// },
|
||||
themes: ['@docusaurus/theme-live-codeblock'],
|
||||
plugins: [
|
||||
path.resolve(__dirname, './pluginOHIFWebpackConfig.js'),
|
||||
'plugin-image-zoom', // 3rd party plugin for image click to pop
|
||||
[
|
||||
'@docusaurus/plugin-client-redirects',
|
||||
@ -80,10 +81,13 @@ const isI18nStaging = process.env.I18N_STAGING === 'true';
|
||||
redirects: [
|
||||
{
|
||||
// we need this for https://cloud.google.com/healthcare/docs/how-tos/dicom-viewers
|
||||
to: "/deployment/recipes/google-cloud-healthcare",
|
||||
from: ['/connecting-to-image-archives/google-cloud-healthcare', '/connecting-to-image-archives/google-cloud-healthcare.html']
|
||||
}
|
||||
]
|
||||
to: '/deployment/recipes/google-cloud-healthcare',
|
||||
from: [
|
||||
'/connecting-to-image-archives/google-cloud-healthcare',
|
||||
'/connecting-to-image-archives/google-cloud-healthcare.html',
|
||||
],
|
||||
},
|
||||
],
|
||||
// createRedirects: function(path) {
|
||||
// // redirect to /docs from /docs/introduction,
|
||||
// // as introduction has been made the home doc
|
||||
@ -275,8 +279,18 @@ const isI18nStaging = process.env.I18N_STAGING === 'true';
|
||||
srcDark: 'img/ohif-logo.svg',
|
||||
},
|
||||
items: [
|
||||
{ to: 'https://ohif.org/get-started', label: 'Get Started', target: '_self', position: 'left' },
|
||||
{ to: 'https://ohif.org/examples', label: 'Examples', target: '_self', position: 'left' },
|
||||
{
|
||||
to: 'https://ohif.org/get-started',
|
||||
label: 'Get Started',
|
||||
target: '_self',
|
||||
position: 'left',
|
||||
},
|
||||
{
|
||||
to: 'https://ohif.org/examples',
|
||||
label: 'Examples',
|
||||
target: '_self',
|
||||
position: 'left',
|
||||
},
|
||||
{
|
||||
position: 'left',
|
||||
to: '/',
|
||||
@ -284,8 +298,18 @@ const isI18nStaging = process.env.I18N_STAGING === 'true';
|
||||
docId: 'Introduction',
|
||||
label: 'Docs',
|
||||
},
|
||||
{ to: 'https://ohif.org/community', label: 'Community', target: '_self', position: 'left' },
|
||||
{ to: 'next/help', activeBaseRegex: '(^/help$)|(/next/help)', label: 'Help', position: 'right' },
|
||||
{
|
||||
to: 'https://ohif.org/community',
|
||||
label: 'Community',
|
||||
target: '_self',
|
||||
position: 'left',
|
||||
},
|
||||
{
|
||||
to: 'next/help',
|
||||
activeBaseRegex: '(^/help$)|(/next/help)',
|
||||
label: 'Help',
|
||||
position: 'right',
|
||||
},
|
||||
// { to: 'https://react.ohif.org/', label: 'UI Component Library', position: 'left' },
|
||||
// {to: 'showcase', label: 'Showcase', position: 'left'},
|
||||
// right
|
||||
@ -299,7 +323,8 @@ const isI18nStaging = process.env.I18N_STAGING === 'true';
|
||||
position: 'right',
|
||||
dropdownItemsAfter: [
|
||||
{
|
||||
to: 'next/viewer/internationalization#contributing-with-new-languages',
|
||||
to:
|
||||
'next/viewer/internationalization#contributing-with-new-languages',
|
||||
label: 'Help Us Translate',
|
||||
},
|
||||
],
|
||||
@ -308,12 +333,11 @@ const isI18nStaging = process.env.I18N_STAGING === 'true';
|
||||
to: 'https://github.com/OHIF/Viewers',
|
||||
position: 'right',
|
||||
className: 'header-github-link',
|
||||
'aria-label': 'GitHub Repository'
|
||||
'aria-label': 'GitHub Repository',
|
||||
},
|
||||
],
|
||||
},
|
||||
footer: {
|
||||
|
||||
style: 'dark',
|
||||
links: [
|
||||
{
|
||||
|
||||
@ -25,6 +25,7 @@
|
||||
"write-heading-ids": "docusaurus write-heading-ids"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ohif/ui": "^2.0.0",
|
||||
"@docusaurus/core": "2.0.0-beta.3",
|
||||
"@docusaurus/plugin-client-redirects": "2.0.0-beta.3",
|
||||
"@docusaurus/plugin-ideal-image": "2.0.0-beta.3",
|
||||
|
||||
25
platform/docs/pluginOHIFWebpackConfig.js
Normal file
25
platform/docs/pluginOHIFWebpackConfig.js
Normal file
@ -0,0 +1,25 @@
|
||||
module.exports = function(context, options) {
|
||||
return {
|
||||
name: 'plugin-ohif-webpack-config',
|
||||
configureWebpack(config, isServer, utils) {
|
||||
return {
|
||||
resolve: {
|
||||
fallback: {
|
||||
fs: false,
|
||||
path: false,
|
||||
},
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.m?jsx?$/,
|
||||
resolve: {
|
||||
fullySpecified: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
};
|
||||
18
platform/docs/src/theme/ReactLiveScope/index.js
Normal file
18
platform/docs/src/theme/ReactLiveScope/index.js
Normal file
@ -0,0 +1,18 @@
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import * as ui from '@ohif/ui';
|
||||
|
||||
// Add react-live imports you need here
|
||||
const ReactLiveScope = {
|
||||
React,
|
||||
...React,
|
||||
...ui,
|
||||
};
|
||||
|
||||
export default ReactLiveScope;
|
||||
1
platform/ui/.gitignore
vendored
1
platform/ui/.gitignore
vendored
@ -1,2 +1 @@
|
||||
.docz
|
||||
node_modules
|
||||
|
||||
8
platform/ui/.webpack/webpack.dev.js
Normal file
8
platform/ui/.webpack/webpack.dev.js
Normal file
@ -0,0 +1,8 @@
|
||||
const path = require('path');
|
||||
const webpackCommon = require('./../../../.webpack/webpack.commonjs.js');
|
||||
const SRC_DIR = path.join(__dirname, '../src');
|
||||
const DIST_DIR = path.join(__dirname, '../dist');
|
||||
|
||||
module.exports = (env, argv) => {
|
||||
return webpackCommon(env, argv, { SRC_DIR, DIST_DIR });
|
||||
};
|
||||
@ -1,6 +1,6 @@
|
||||
const merge = require('webpack-merge');
|
||||
const { merge } = require('webpack-merge');
|
||||
const path = require('path');
|
||||
const webpackCommon = require('./../../../.webpack/webpack.commonjs.js');
|
||||
const webpackCommon = require('./../../../.webpack/webpack.base.js');
|
||||
const pkg = require('./../package.json');
|
||||
|
||||
const ROOT_DIR = path.join(__dirname, './..');
|
||||
@ -33,5 +33,23 @@ module.exports = (env, argv) => {
|
||||
libraryTarget: 'umd',
|
||||
filename: pkg.main,
|
||||
},
|
||||
externals: {
|
||||
'@ohif/core': {
|
||||
commonjs: '@ohif/core',
|
||||
commonjs2: '@ohif/core',
|
||||
amd: '@ohif/core',
|
||||
root: '@ohif/core',
|
||||
},
|
||||
react: 'React',
|
||||
'react-dom': 'ReactDOM',
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: ['style-loader', 'css-loader', 'postcss-loader'],
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
@ -1,19 +1 @@
|
||||
# @ohif/ui
|
||||
|
||||
React component library powered by `docz`
|
||||
|
||||
## Commands
|
||||
|
||||
```sh
|
||||
# Install
|
||||
yarn # npm i
|
||||
|
||||
# Develop
|
||||
yarn dev # npm run dev
|
||||
|
||||
# Build
|
||||
yarn build # npm run build
|
||||
|
||||
# Serve (the "build" output)
|
||||
yarn serve # npm run serve
|
||||
```
|
||||
|
||||
@ -1,18 +0,0 @@
|
||||
export default {
|
||||
title: '@ohif/ui',
|
||||
menu: [
|
||||
'Getting Started',
|
||||
// COMPONENTS ARE DEFINED JUST TO CUSTOMIZE THEIR SORTING
|
||||
'General',
|
||||
'Data Display',
|
||||
'Feedback',
|
||||
'Form',
|
||||
'Navigation',
|
||||
// 'Other',
|
||||
],
|
||||
ignore: ['README.md', 'CHANGELOG.md'],
|
||||
base: '/',
|
||||
src: './src',
|
||||
files: '**/*.{md,markdown,mdx}',
|
||||
propsParser: false,
|
||||
};
|
||||
@ -1,8 +0,0 @@
|
||||
module.exports = {
|
||||
plugins: [
|
||||
'gatsby-theme-docz',
|
||||
'gatsby-plugin-react-svg',
|
||||
'gatsby-plugin-sass',
|
||||
`gatsby-plugin-postcss`,
|
||||
],
|
||||
};
|
||||
@ -1,43 +0,0 @@
|
||||
const path = require('path');
|
||||
// ~~ Plugins
|
||||
const PnpWebpackPlugin = require(`pnp-webpack-plugin`); // Required until Webpack@5
|
||||
|
||||
exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
|
||||
if (stage === 'build-html' || stage === 'develop-html') {
|
||||
actions.setWebpackConfig({
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\@ohif\/core/,
|
||||
use: loaders.null(),
|
||||
},
|
||||
{
|
||||
test: /core/,
|
||||
use: loaders.null(),
|
||||
},
|
||||
{
|
||||
test: /cornerstone\-math/,
|
||||
use: loaders.null(),
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
actions.setWebpackConfig({
|
||||
node: { fs: 'empty' },
|
||||
resolve: {
|
||||
plugins: [PnpWebpackPlugin],
|
||||
// Note the '..' in the path because docz gatsby project lives in the '.docz' directory
|
||||
modules: [
|
||||
// platform/ui
|
||||
path.resolve(__dirname, '../node_modules'),
|
||||
// .docz
|
||||
'node_modules',
|
||||
],
|
||||
},
|
||||
resolveLoader: {
|
||||
plugins: [PnpWebpackPlugin.moduleLoader(module)],
|
||||
},
|
||||
});
|
||||
};
|
||||
@ -1,40 +0,0 @@
|
||||
# Netlify Config
|
||||
#
|
||||
# TOML Reference:
|
||||
# https://www.netlify.com/docs/netlify-toml-reference/
|
||||
#
|
||||
# We use Netlify for deploy previews and for publishing docs (gh-pages branch).
|
||||
# https://viewer.ohif.org is created using a different process that is
|
||||
# managed by CircleCI and deployed to our Google Hosting
|
||||
#
|
||||
|
||||
[build]
|
||||
base = ""
|
||||
publish = ".docz/dist"
|
||||
ignore = "git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF . ../i18n/"
|
||||
|
||||
# NODE_VERSION in root `.nvmrc` takes priority
|
||||
# YARN_FLAGS: https://www.netlify.com/docs/build-gotchas/#yarn
|
||||
[build.environment]
|
||||
# If 'production', `yarn install` does not install devDependencies
|
||||
NODE_ENV = "development"
|
||||
NODE_VERSION = "12.13.0"
|
||||
YARN_VERSION = "1.22.0"
|
||||
RUBY_VERSION = "2.6.2"
|
||||
YARN_FLAGS = "--no-ignore-optional --pure-lockfile"
|
||||
NETLIFY_USE_YARN = "true"
|
||||
|
||||
[[headers]]
|
||||
# Define which paths this specific [[headers]] block will cover.
|
||||
for = "/*"
|
||||
|
||||
[headers.values]
|
||||
X-Frame-Options = "DENY"
|
||||
X-XSS-Protection = "1; mode=block"
|
||||
|
||||
# Multi-key header rules are expressed with multi-line strings.
|
||||
cache-control = '''
|
||||
max-age=0,
|
||||
no-cache,
|
||||
no-store,
|
||||
must-revalidate'''
|
||||
@ -4,6 +4,8 @@
|
||||
"description": "A set of React components for Medical Imaging Viewers",
|
||||
"author": "OHIF Contributors",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.umd.js",
|
||||
"module": "src/index.js",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
@ -17,44 +19,34 @@
|
||||
"README.md"
|
||||
],
|
||||
"scripts": {
|
||||
"start": "yarn run dev",
|
||||
"build": "docz build",
|
||||
"build:ui:ci": "docz build",
|
||||
"dev": "docz dev",
|
||||
"serve": "docz serve",
|
||||
"docs:preview": "yarn run dev"
|
||||
"start": "yarn run build --watch",
|
||||
"build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
|
||||
"build:package": "yarn run build"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@ohif/core": "ˆ2.9.6"
|
||||
"@ohif/core": "ˆ2.9.6",
|
||||
"react": "17.0.2",
|
||||
"react-dom": "17.0.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"browser-detect": "^0.2.28",
|
||||
"classnames": "2.2.6",
|
||||
"lodash.debounce": "4.0.8",
|
||||
"moment": "2.24.0",
|
||||
"react": "17.0.2",
|
||||
"react-dates": "^21.8.0",
|
||||
"react-dnd": "14.0.2",
|
||||
"react-dnd-html5-backend": "14.0.0",
|
||||
"react-dom": "17.0.2",
|
||||
"react-draggable": "4.4.3",
|
||||
"react-error-boundary": "^3.1.3",
|
||||
"react-modal": "3.11.2",
|
||||
"react-outside-click-handler": "^1.3.0",
|
||||
"react-select": "3.0.8",
|
||||
"react-with-direction": "^1.3.1",
|
||||
"theme-ui": "0.2.x"
|
||||
"react-with-direction": "^1.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "9.7.4",
|
||||
"docz": "2.3.2-alpha.0",
|
||||
"gatsby": "^2.25.0",
|
||||
"gatsby-plugin-postcss": "^3.7.0",
|
||||
"gatsby-plugin-react-svg": "3.0.0",
|
||||
"gatsby-plugin-sass": "2.3.12",
|
||||
"gatsby-theme-docz": "2.3.1",
|
||||
"node-sass": "^4.14.1",
|
||||
"pnp-webpack-plugin": "^1.6.4",
|
||||
"postcss": "^8.3.5",
|
||||
"postcss-loader": "^6.1.1",
|
||||
"prop-types": "15.7.2",
|
||||
"tailwindcss": "1.6.2"
|
||||
}
|
||||
|
||||
@ -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,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,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,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,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} />
|
||||
@ -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,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:
|
||||
|
||||
@ -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,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,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,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} />
|
||||
@ -7,8 +7,8 @@ import React, {
|
||||
} from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import SnackbarContainer from '../components/Snackbar/SnackbarContainer';
|
||||
import SnackbarTypes from '../components/Snackbar/SnackbarTypes';
|
||||
import SnackbarContainer from '../components/Snackbar/SnackbarContainer';
|
||||
|
||||
const SnackbarContext = createContext(null);
|
||||
|
||||
|
||||
@ -1,69 +0,0 @@
|
||||
/** @jsx jsx */
|
||||
import { jsx, Box, Flex, useColorMode } from 'theme-ui';
|
||||
import { useConfig, useCurrentDoc } from 'docz';
|
||||
|
||||
import * as styles from 'gatsby-theme-docz/src/components/Header/styles';
|
||||
import {
|
||||
Edit,
|
||||
Menu,
|
||||
Sun,
|
||||
Github,
|
||||
} from 'gatsby-theme-docz/src/components/Icons';
|
||||
import { Logo } from 'gatsby-theme-docz/src/components/Logo';
|
||||
|
||||
export const Header = props => {
|
||||
const { onOpen } = props;
|
||||
const {
|
||||
repository,
|
||||
themeConfig: { showDarkModeSwitch, showMarkdownEditButton },
|
||||
} = useConfig();
|
||||
const { edit = true, ...doc } = useCurrentDoc();
|
||||
const [colorMode, setColorMode] = useColorMode();
|
||||
|
||||
const toggleColorMode = () => {
|
||||
setColorMode(colorMode === 'light' ? 'dark' : 'light');
|
||||
};
|
||||
|
||||
return (
|
||||
<div sx={styles.wrapper} data-testid="header">
|
||||
<div sx={styles.innerContainer}>
|
||||
<div className="flex">
|
||||
<button className="mr-4" sx={styles.menuButton} onClick={onOpen}>
|
||||
<Menu size={25} />
|
||||
</button>
|
||||
<Logo />
|
||||
</div>
|
||||
<Flex>
|
||||
{repository && (
|
||||
<Box sx={{ mr: 2 }}>
|
||||
<a
|
||||
href={repository}
|
||||
sx={styles.headerButton}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Github size={15} />
|
||||
</a>
|
||||
</Box>
|
||||
)}
|
||||
{showDarkModeSwitch && (
|
||||
<button sx={styles.headerButton} onClick={toggleColorMode}>
|
||||
<Sun size={15} />
|
||||
</button>
|
||||
)}
|
||||
</Flex>
|
||||
{showMarkdownEditButton && edit && doc.link && (
|
||||
<a
|
||||
sx={styles.editButton}
|
||||
href={doc.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Edit width={14} />
|
||||
<Box sx={{ pl: 2 }}>Edit page</Box>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,52 +0,0 @@
|
||||
/** @jsx jsx */
|
||||
import { useRef, useState } from 'react';
|
||||
import { jsx, Layout as BaseLayout, Main } from 'theme-ui';
|
||||
import classnames from 'classnames';
|
||||
|
||||
import { Header } from '../Header';
|
||||
import { Sidebar } from '../Sidebar';
|
||||
import * as styles from 'gatsby-theme-docz/src/components/Layout/styles';
|
||||
|
||||
const getSidebarStatus = () =>
|
||||
typeof window !== 'undefined' && window.location.pathname === '/';
|
||||
|
||||
export const Layout = ({ children }) => {
|
||||
const [sidebarOpen, setSidebarOpen] = useState(getSidebarStatus());
|
||||
const nav = useRef();
|
||||
|
||||
const handleSidebarToggle = () => {
|
||||
setSidebarOpen(s => !s);
|
||||
};
|
||||
|
||||
return (
|
||||
<BaseLayout sx={{ '& > div': { flex: '1 1 auto' } }} data-testid="layout">
|
||||
<Main
|
||||
id="main-layout"
|
||||
sx={styles.main}
|
||||
className={classnames({
|
||||
'overflow-hidden h-screen lg:overflow-auto': sidebarOpen,
|
||||
})}
|
||||
>
|
||||
<Header onOpen={handleSidebarToggle} />
|
||||
<div className={classnames('flex', {})}>
|
||||
<Sidebar
|
||||
ref={nav}
|
||||
sidebarOpen={sidebarOpen}
|
||||
onFocus={() => setSidebarOpen(true)}
|
||||
onBlur={() => setSidebarOpen(false)}
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
/>
|
||||
<div
|
||||
id="main-container"
|
||||
className={classnames('py-10 w-full', {
|
||||
'px-4 lg:px-20': sidebarOpen,
|
||||
'px-4 lg:px-8': !sidebarOpen,
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</Main>
|
||||
</BaseLayout>
|
||||
);
|
||||
};
|
||||
@ -1,56 +0,0 @@
|
||||
/** @jsx jsx */
|
||||
import { jsx } from 'theme-ui';
|
||||
import React from 'react';
|
||||
import { useCurrentDoc } from 'docz';
|
||||
|
||||
import * as styles from 'gatsby-theme-docz/src/components/NavGroup/styles';
|
||||
import { NavLink } from 'gatsby-theme-docz/src/components/NavLink';
|
||||
import { ChevronDown } from 'gatsby-theme-docz/src/components/Icons';
|
||||
|
||||
export const NavGroup = ({ item, sidebarRef }) => {
|
||||
const currentDoc = useCurrentDoc();
|
||||
const currentDocRef = React.useRef();
|
||||
const { name, menu } = item;
|
||||
const [subheadingsVisible, setShowsubheadings] = React.useState(
|
||||
currentDoc.menu === name
|
||||
);
|
||||
const toggleSubheadings = () => setShowsubheadings(!subheadingsVisible);
|
||||
React.useEffect(() => {
|
||||
if (sidebarRef.current && currentDocRef.current) {
|
||||
sidebarRef.current.scrollTo(0, currentDocRef.current.offsetTop);
|
||||
}
|
||||
}, [sidebarRef]);
|
||||
return (
|
||||
<div sx={styles.wrapper} data-testid="nav-group">
|
||||
<div
|
||||
sx={styles.title}
|
||||
onClick={toggleSubheadings}
|
||||
role="button"
|
||||
onKeyDown={toggleSubheadings}
|
||||
tabIndex="0"
|
||||
>
|
||||
{item.name}
|
||||
<ChevronDown sx={styles.chevron({ active: subheadingsVisible })} />
|
||||
</div>
|
||||
<div sx={styles.sublinkWrapper} data-testid="nav-group-links">
|
||||
{menu &&
|
||||
subheadingsVisible &&
|
||||
menu.map(menu => {
|
||||
if (currentDoc.route === menu.route) {
|
||||
return (
|
||||
<NavLink key={menu.id} item={menu} ref={currentDocRef}>
|
||||
{menu.name}
|
||||
</NavLink>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<NavLink key={menu.id} item={menu}>
|
||||
{menu.name}
|
||||
</NavLink>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,141 +0,0 @@
|
||||
/** @jsx jsx */
|
||||
/** @jsxFrag React.Fragment */
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import classnames from 'classnames';
|
||||
|
||||
import { jsx } from 'theme-ui';
|
||||
import { useMenus, useCurrentDoc } from 'docz';
|
||||
|
||||
import { NavSearch } from 'gatsby-theme-docz/src/components/NavSearch';
|
||||
import { NavLink } from 'gatsby-theme-docz/src/components/NavLink';
|
||||
import { NavGroup } from 'gatsby-theme-docz/src/components/NavGroup';
|
||||
|
||||
export const Sidebar = React.forwardRef((props, ref) => {
|
||||
const [query, setQuery] = useState('');
|
||||
const menus = useMenus({ query });
|
||||
const currentDoc = useCurrentDoc();
|
||||
const currentDocRef = useRef();
|
||||
const handleChange = ev => {
|
||||
setQuery(ev.target.value);
|
||||
};
|
||||
useEffect(() => {
|
||||
if (ref.current && currentDocRef.current) {
|
||||
ref.current.scrollTo(0, currentDocRef.current.offsetTop);
|
||||
}
|
||||
}, [ref]);
|
||||
|
||||
const customMenus = {
|
||||
Components: [],
|
||||
'Custom Hooks': [],
|
||||
System: [],
|
||||
Examples: [],
|
||||
};
|
||||
|
||||
const MENU_CATEGORIES = {
|
||||
Components: [
|
||||
'General',
|
||||
'Form',
|
||||
'Navigation',
|
||||
'Feedback',
|
||||
'Data Display',
|
||||
'Other',
|
||||
],
|
||||
'Custom Hooks': ['ModalProvider', 'ViewportDialogProvider'],
|
||||
Examples: ['Views'],
|
||||
System: ['Colors'],
|
||||
};
|
||||
|
||||
const renderMenuCategories = () => {
|
||||
return Object.keys(customMenus).map(menuName => {
|
||||
return (
|
||||
<div key={menuName}>
|
||||
<h2 className="pl-2 border-l-8 -ml-4 border-secondary-active">
|
||||
{menuName}
|
||||
</h2>
|
||||
{customMenus[menuName].map(item => item)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
const getMenuCategory = menuName => {
|
||||
return Object.keys(MENU_CATEGORIES).find(category => {
|
||||
if (MENU_CATEGORIES[category].includes(menuName)) {
|
||||
return category;
|
||||
}
|
||||
return null;
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{props.sidebarOpen && (
|
||||
<>
|
||||
<div className="block lg:hidden">
|
||||
<div
|
||||
role="button"
|
||||
onClick={() => props.onClick()}
|
||||
onKeyDown={() => props.onClick()}
|
||||
className="fixed left-0 w-full h-full bg-black opacity-80"
|
||||
style={{ top: 81, zIndex: 99999 }}
|
||||
tabIndex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
ref={ref}
|
||||
data-testid="sidebar"
|
||||
className={classnames(
|
||||
'p-8 flex-col bg-white top-0 overflow-auto border-r border-gray-400 hidden fixed left-0 bottom-0 lg:block lg:sticky lg:h-screen lg:top-0'
|
||||
)}
|
||||
style={{
|
||||
display: props.sidebarOpen ? 'block' : 'none',
|
||||
zIndex: 99999,
|
||||
minWidth: 250,
|
||||
}}
|
||||
>
|
||||
<NavSearch
|
||||
placeholder="Type to search..."
|
||||
value={query}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
{menus &&
|
||||
menus.map(menu => {
|
||||
const isGroup = !!menu.menu;
|
||||
const Component = isGroup ? NavGroup : NavLink;
|
||||
const menuCategory = getMenuCategory(menu.name) || null;
|
||||
|
||||
if (menuCategory) {
|
||||
customMenus[menuCategory].push(
|
||||
<Component key={menu.id} item={menu} sidebarRef={ref}>
|
||||
{!isGroup && menu.name}
|
||||
</Component>
|
||||
);
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!menu.route) {
|
||||
return (
|
||||
<NavGroup key={menu.id} item={menu} sidebarRef={ref} />
|
||||
);
|
||||
}
|
||||
|
||||
if (menu.route === currentDoc.route) {
|
||||
return (
|
||||
<NavLink key={menu.id} item={menu} ref={currentDocRef}>
|
||||
{menu.name}
|
||||
</NavLink>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<NavLink key={menu.id} item={menu}>
|
||||
{menu.name}
|
||||
</NavLink>
|
||||
);
|
||||
})}
|
||||
{renderMenuCategories()}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
});
|
||||
@ -1,24 +0,0 @@
|
||||
/**
|
||||
OVERRIDE DOCZ THEME
|
||||
*/
|
||||
|
||||
[data-testid='live-preview'] {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
#main-layout {
|
||||
@apply font-sans;
|
||||
}
|
||||
|
||||
#main-container > h2 {
|
||||
@apply font-bold my-8 text-2xl;
|
||||
}
|
||||
|
||||
#main-container > ul li a,
|
||||
#main-container > a {
|
||||
@apply underline text-blue-500;
|
||||
}
|
||||
|
||||
code {
|
||||
@apply bg-gray-200 text-lg text-black px-2 py-1 rounded;
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import './tailwind.css';
|
||||
import './theme.css';
|
||||
|
||||
const Wrapper = ({ children }) => <>{children}</>;
|
||||
|
||||
Wrapper.propTypes = {
|
||||
children: PropTypes.node,
|
||||
};
|
||||
|
||||
export default Wrapper;
|
||||
@ -1,5 +1,5 @@
|
||||
/** UTILS */
|
||||
import utils from './src/utils';
|
||||
import utils from './utils';
|
||||
export { utils };
|
||||
|
||||
/** CONTEXT/HOOKS */
|
||||
@ -28,7 +28,7 @@ export {
|
||||
UserAuthenticationContext,
|
||||
UserAuthenticationProvider,
|
||||
useUserAuthentication,
|
||||
} from './src/contextProviders';
|
||||
} from './contextProviders';
|
||||
|
||||
/** COMPONENTS */
|
||||
export {
|
||||
@ -96,7 +96,7 @@ export {
|
||||
ViewportGrid,
|
||||
ViewportPane,
|
||||
WindowLevelMenuItem,
|
||||
} from './src/components';
|
||||
} from './components';
|
||||
|
||||
/** VIEWS */
|
||||
export { StudyList, Viewer } from './src/views';
|
||||
export { StudyList, Viewer } from './views';
|
||||
@ -284,10 +284,10 @@ const StudyList = () => {
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center pt-48">
|
||||
<EmptyStudies />
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col items-center justify-center pt-48">
|
||||
<EmptyStudies />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -2,7 +2,7 @@ module.exports = {
|
||||
prefix: '',
|
||||
important: false,
|
||||
separator: ':',
|
||||
//purge: ['./src/**/*.jsx'],
|
||||
purge: ['./src/**/*.jsx'],
|
||||
theme: {
|
||||
screens: {
|
||||
sm: '640px',
|
||||
|
||||
@ -5,8 +5,6 @@ const { merge } = require('webpack-merge');
|
||||
const webpack = require('webpack');
|
||||
const webpackBase = require('./../../../.webpack/webpack.base.js');
|
||||
// ~~ Plugins
|
||||
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
|
||||
.BundleAnalyzerPlugin;
|
||||
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||
const ExtractCssChunksPlugin = require('extract-css-chunks-webpack-plugin');
|
||||
@ -27,8 +25,6 @@ const PROXY_DOMAIN = process.env.PROXY_DOMAIN;
|
||||
const ENTRY_TARGET = process.env.ENTRY_TARGET || `${SRC_DIR}/index.js`;
|
||||
const Dotenv = require('dotenv-webpack');
|
||||
|
||||
console.warn(path.resolve(__dirname, '../node_modules'));
|
||||
|
||||
module.exports = (env, argv) => {
|
||||
const baseConfig = webpackBase(env, argv, { SRC_DIR, DIST_DIR });
|
||||
const isProdBuild = process.env.NODE_ENV === 'production';
|
||||
@ -57,8 +53,6 @@ module.exports = (env, argv) => {
|
||||
},
|
||||
plugins: [
|
||||
new Dotenv(),
|
||||
// Uncomment to generate bundle analyzer
|
||||
// new BundleAnalyzerPlugin(),
|
||||
// Clean output.path
|
||||
new CleanWebpackPlugin(),
|
||||
// Copy "Public" Folder to Dist
|
||||
|
||||
@ -38,11 +38,11 @@
|
||||
"README.md"
|
||||
],
|
||||
"peerDependencies": {
|
||||
"cornerstone-core": "^2.3.0",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2"
|
||||
"cornerstone-core": "^2.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"@babel/runtime": "7.7.6",
|
||||
"@ohif/core": "^2.5.1",
|
||||
"@ohif/extension-cornerstone": "^2.4.0",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user