fix: remove docz + node version fix on docker (#2743)
* fix: docz uses too outdated packages and current documentation hasnt being updated oftenly. removing it * fix: node docker version to prevent node req "^12.13.0 || ^14.15.0 || >=16" issue
This commit is contained in:
ladeirarodolfo
GitHub
parent
383a0ef167
commit
7164d1a654
@ -27,7 +27,7 @@ executors:
|
||||
- image: 'cypress/browsers:node14.15.0-chrome86-ff82'
|
||||
defaults: &defaults
|
||||
docker:
|
||||
- image: cimg/node:14.18
|
||||
- image: cimg/node:14.19
|
||||
environment:
|
||||
TERM: xterm # Enable colors in term
|
||||
QUICK_BUILD: true
|
||||
@ -347,9 +347,8 @@ workflows:
|
||||
store_artifacts: true
|
||||
working_directory: platform/viewer
|
||||
build:
|
||||
git submodule update --init &&
|
||||
npx cross-env QUICK_BUILD=true APP_CONFIG=config/e2e.js
|
||||
yarn run build
|
||||
git submodule update --init && npx cross-env QUICK_BUILD=true
|
||||
APP_CONFIG=config/e2e.js yarn run build
|
||||
start: yarn run test:e2e:serve
|
||||
spec: 'cypress/integration/common/**/*,cypress/integration/pwa/**/*'
|
||||
wait-on: 'http://localhost:3000'
|
||||
@ -376,9 +375,8 @@ workflows:
|
||||
store_artifacts: true
|
||||
working_directory: platform/viewer
|
||||
build:
|
||||
git submodule update --init &&
|
||||
npx cross-env QUICK_BUILD=true APP_CONFIG=config/e2e.js
|
||||
yarn run build:package
|
||||
git submodule update --init && npx cross-env QUICK_BUILD=true
|
||||
APP_CONFIG=config/e2e.js yarn run build:package
|
||||
start: yarn run test:e2e:serve
|
||||
spec: 'cypress/integration/common/**/*,cypress/integration/script-tag/**/*'
|
||||
wait-on: 'http://localhost:3000'
|
||||
@ -410,9 +408,8 @@ workflows:
|
||||
store_artifacts: false
|
||||
working_directory: platform/viewer
|
||||
build:
|
||||
git submodule update --init &&
|
||||
npx cross-env QUICK_BUILD=true APP_CONFIG=config/e2e.js
|
||||
yarn run build
|
||||
git submodule update --init && npx cross-env QUICK_BUILD=true
|
||||
APP_CONFIG=config/e2e.js yarn run build
|
||||
# start server --> verify running --> percy + chrome + cypress
|
||||
command: yarn run test:e2e:dist
|
||||
cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
|
||||
@ -490,9 +487,8 @@ workflows:
|
||||
store_artifacts: false
|
||||
working_directory: platform/viewer
|
||||
build:
|
||||
git submodule update --init &&
|
||||
npx cross-env QUICK_BUILD=true APP_CONFIG=config/e2e.js
|
||||
yarn run build
|
||||
git submodule update --init && npx cross-env QUICK_BUILD=true
|
||||
APP_CONFIG=config/e2e.js yarn run build
|
||||
# start server --> verify running --> percy + chrome + cypress
|
||||
command: yarn run test:e2e:dist
|
||||
cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
|
||||
|
||||
2
.gitignore
vendored
2
.gitignore
vendored
@ -8,7 +8,6 @@ docs/_book
|
||||
src/version.js
|
||||
junit.xml
|
||||
coverage/
|
||||
.docz/
|
||||
*.js.map
|
||||
.yarn
|
||||
platform/docs/.docusaurus
|
||||
@ -38,4 +37,3 @@ screenshots/
|
||||
|
||||
# Locize settings
|
||||
.locize
|
||||
|
||||
|
||||
@ -22,16 +22,6 @@ mv platform/viewer/dist/* .netlify/www/pwa -v
|
||||
# Build && Move script output
|
||||
# yarn run build:package
|
||||
|
||||
# Build && Move Docz Output
|
||||
# Using local yarn install to prevent Gatsby from needing to access
|
||||
# node_modules above the platform/ui folder
|
||||
cd platform/ui
|
||||
yarn install
|
||||
yarn run build
|
||||
cd ../..
|
||||
mkdir -p ./.netlify/www/ui
|
||||
mv platform/ui/.docz/dist/* .netlify/www/ui -v
|
||||
|
||||
# Cache all of the node_module dependencies in
|
||||
# extensions, modules, and platform packages
|
||||
yarn run lerna:cache
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
|
||||
# Stage 1: Build the application
|
||||
# docker build -t ohif/viewer:latest .
|
||||
FROM node:15.13.0-slim as builder
|
||||
FROM node:14-slim as builder
|
||||
|
||||
RUN mkdir /usr/src/app
|
||||
WORKDIR /usr/src/app
|
||||
@ -42,7 +42,7 @@ COPY yarn.lock /usr/src/app/yarn.lock
|
||||
RUN apt-get update && apt-get install -y python make g++
|
||||
# Run the install before copying the rest of the files
|
||||
RUN yarn config set workspaces-experimental true
|
||||
RUN yarn install
|
||||
RUN yarn install --verbose
|
||||
|
||||
ENV PATH /usr/src/app/node_modules/.bin:$PATH
|
||||
ENV QUICK_BUILD true
|
||||
|
||||
@ -1,8 +1,5 @@
|
||||
####
|
||||
##
|
||||
## We need to pin WebPack's version for docz to work. See this issue:
|
||||
## https://github.com/pedronauck/docz/issues/704#issuecomment-480295032
|
||||
##
|
||||
## react-scripts checks that dependency versions match before running
|
||||
## Our top level webpack version causes the preflight check to fail
|
||||
## This prevents that check
|
||||
|
||||
@ -1,75 +0,0 @@
|
||||
/**
|
||||
* Docz Configuration File:
|
||||
* https://www.docz.site/docs/project-configuration
|
||||
*/
|
||||
|
||||
import { css } from "docz-plugin-css";
|
||||
|
||||
export default {
|
||||
dest: "example/build",
|
||||
public: "/public",
|
||||
wrapper: "src/__docs__/wrapper",
|
||||
indexHtml: "src/__docs__/index.html",
|
||||
// Limited support for importing `.styl` files
|
||||
codeSandbox: false,
|
||||
// https://github.com/pedronauck/docz/pull/849/files
|
||||
// Because we re-export using `index.js` files
|
||||
notUseSpecifiers: true,
|
||||
menu: [
|
||||
"Introduction",
|
||||
"Getting Started",
|
||||
{ name: "Elements", menu: ["Form / Select"] },
|
||||
{
|
||||
name: "Components",
|
||||
menu: [
|
||||
"CINE Dialog",
|
||||
"Layout Button",
|
||||
"Measurement Table",
|
||||
"Overlay Trigger",
|
||||
"Quick Switch",
|
||||
"Rounded Button Group",
|
||||
"Select Tree",
|
||||
"Simple Dialog",
|
||||
"Study Browser",
|
||||
"Study List",
|
||||
"Table List",
|
||||
"Toolbar Section",
|
||||
"About Modal",
|
||||
"User Preferences Modal"
|
||||
]
|
||||
},
|
||||
"Styling & Theming",
|
||||
"Translating",
|
||||
"Compatibility"
|
||||
],
|
||||
// Rollup Aliases?
|
||||
// https://github.com/pedronauck/docz/issues/373
|
||||
plugins: [
|
||||
// CSS
|
||||
css(),
|
||||
// Stylus
|
||||
css({
|
||||
preprocessor: "stylus",
|
||||
cssmodules: false
|
||||
})
|
||||
],
|
||||
// `docz` uses file-loader to pull in SVGs. This kills our icons before
|
||||
// They can be picked up by our `babel-plugin-inline-react-svg` dependency
|
||||
// You can see where it's configured here:
|
||||
// https://github.com/pedronauck/docz/blob/f72624d0aa5231dab17e1770e8d36be920f590a2/core/docz-core/src/bundler/loaders.ts#L135-L144
|
||||
// How we delete our rule:
|
||||
// https://github.com/neutrinojs/webpack-chain/issues/48
|
||||
onCreateWebpackChain: config => {
|
||||
config.module.rules.delete("svg");
|
||||
},
|
||||
modifyBabelRc: babelrc => {
|
||||
const newBabelRc = {
|
||||
...babelrc,
|
||||
plugins: [
|
||||
...babelrc.plugins,
|
||||
require.resolve("babel-plugin-inline-react-svg")
|
||||
]
|
||||
};
|
||||
return newBabelRc;
|
||||
}
|
||||
};
|
||||
@ -1,25 +0,0 @@
|
||||
const path = require('path');
|
||||
// ~~ Plugins
|
||||
const PnpWebpackPlugin = require(`pnp-webpack-plugin`); // Required until Webpack@5
|
||||
|
||||
exports.onCreateWebpackConfig = args => {
|
||||
args.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',
|
||||
],
|
||||
// resolve: {
|
||||
// symlinks: true,
|
||||
// },
|
||||
},
|
||||
resolveLoader: {
|
||||
plugins: [PnpWebpackPlugin.moduleLoader(module)],
|
||||
},
|
||||
});
|
||||
};
|
||||
@ -20,9 +20,8 @@
|
||||
"README.md"
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "docz dev",
|
||||
"dev": "echo \"No dev script yet\" && exit 0",
|
||||
"dev:ui": "yarn run dev",
|
||||
"docs": "docz build",
|
||||
"build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
|
||||
"build:package": "yarn run build",
|
||||
"prepublishOnly": "yarn run build",
|
||||
@ -64,10 +63,6 @@
|
||||
"devDependencies": {
|
||||
"@mdx-js/tag": "^0.20.3",
|
||||
"autoprefixer": "^9.6.0",
|
||||
"docz": "1.2.0",
|
||||
"docz-core": "1.2.0",
|
||||
"docz-plugin-css": "0.11.0",
|
||||
"docz-theme-default": "1.2.0",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
"react-powerplug": "1.0.0"
|
||||
}
|
||||
|
||||
@ -1,17 +0,0 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import { Link } from 'docz';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const NameSpace = ({ name }) => (
|
||||
<Fragment>
|
||||
The namespace used on this component was: <pre>{name}</pre> Check the{' '}
|
||||
<Link to="/translating#how-to-translate-components">translation docs</Link>{' '}
|
||||
to see how to override it.
|
||||
</Fragment>
|
||||
);
|
||||
|
||||
NameSpace.propTypes = {
|
||||
name: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default NameSpace;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
@ -1,15 +0,0 @@
|
||||
---
|
||||
name: Compatibility
|
||||
route: /compatibility
|
||||
---
|
||||
|
||||
# Compatibility
|
||||
|
||||
## Browser Support
|
||||
|
||||
`@ohif/ui` relies on
|
||||
[browsers supported by Styled Components](https://www.styled-components.com/docs/faqs#which-browsers-are-supported)
|
||||
or browsers supported by emotion.
|
||||
|
||||
Supported Browsers: IE11, IE 9+ (with Map + Set polyfills), Chrome, Firefox (and
|
||||
derivatives), Edge, and Safari.
|
||||
@ -1,13 +0,0 @@
|
||||
---
|
||||
name: Docs Settings
|
||||
route: /docs-settings
|
||||
---
|
||||
|
||||
import LanguageSwitcher from '../components/languageSwitcher';
|
||||
|
||||
# Components Language
|
||||
|
||||
You can change the language of the components displayed in this documentation by
|
||||
choosing an option in the selector below:
|
||||
|
||||
<LanguageSwitcher />
|
||||
@ -1,76 +0,0 @@
|
||||
---
|
||||
name: Getting Started
|
||||
route: /getting-started
|
||||
---
|
||||
|
||||
# Getting Started
|
||||
|
||||
## Installation
|
||||
|
||||
> This component library is pre- v1.0. All realeases until a v1.0 have the
|
||||
> possibility of introducing breaking changes. Please depend on an "exact"
|
||||
> version in your projects to prevent issues caused by loose versioning.
|
||||
|
||||
Install `@ohif/ui` from npm:
|
||||
|
||||
```shell
|
||||
// with npm
|
||||
npm i @ohif/ui --save-exact
|
||||
|
||||
// with yarn
|
||||
yarn add @ohif/ui --exact
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
There is some setup required for `@ohif/ui`. We are working to eliminate these
|
||||
requirements with the goal of providing ready to use components.
|
||||
|
||||
### External Dependencies
|
||||
|
||||
We have tried to keep the number of external dependencies limited to make setup
|
||||
as easy as possible. You will, however, need to include either the default font
|
||||
or the font you set for your theme:
|
||||
|
||||
```js
|
||||
// Google Fonts, Roboto
|
||||
'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap';
|
||||
```
|
||||
|
||||
`@ohif/ui` also looks for theme CSS variabled defined on `:root`. You can find a
|
||||
list of variables [on the theming page](/styling-and-theming)
|
||||
|
||||
### Import & Use
|
||||
|
||||
You can use components in your React app:
|
||||
|
||||
```js
|
||||
import React, { Component } from 'react';
|
||||
import { LayoutButton } from '@ohif/ui';
|
||||
|
||||
class Example extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
selectedCell: {
|
||||
className: 'hover',
|
||||
col: 1,
|
||||
row: 1,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<LayoutButton
|
||||
selectedCell={this.state.selectedCell}
|
||||
onChange={cell => this.setState({ selectedCell: cell })}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
> NOTE: It is heavily recommended that you use a CSS reset or normalize. As well
|
||||
> as the following style: `* { Box-sizing: Border-box }`
|
||||
@ -1,83 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ lang }}">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="description" content="{{ description }}">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
|
||||
<title>{{ title }}</title>
|
||||
|
||||
<!-- Latest compiled and minified CSS -->
|
||||
<link rel="stylesheet" href="/public/docz.css">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap">
|
||||
|
||||
<style>
|
||||
/* "Tide" theme */
|
||||
/* TODO:
|
||||
- Convert the other themes to CSS Variables
|
||||
- Allow user to set default CSS theme in JS config
|
||||
- Export the themes as identical JS objects
|
||||
- For theme switcher, update root-level CSS properties via JS (https://medium.com/@_bengarrison/accessing-and-modifying-css-variables-with-javascript-2ccb735bbff0)
|
||||
*/
|
||||
:root {
|
||||
/* Interface UI Colors */
|
||||
--default-color: #9CCEF9;
|
||||
--hover-color: #ffffff;
|
||||
--active-color: #20A5D6;
|
||||
--ui-border-color: #44626F;
|
||||
--ui-border-color-dark: #3C5D80;
|
||||
--ui-border-color-active: #00a4d9;
|
||||
--primary-background-color: #000000;
|
||||
--box-background-color: #3E5975;
|
||||
|
||||
--text-primary-color: #ffffff;
|
||||
--text-secondary-color: #91B9CD;
|
||||
--input-background-color: #2c363f;
|
||||
--input-placeholder-color: #d3d3d3;
|
||||
|
||||
--table-hover-color: #2c363f;
|
||||
--table-text-primary-color: #ffffff;
|
||||
--table-text-secondary-color: #91b9cd;
|
||||
|
||||
--large-numbers-color: #6FBDE2;
|
||||
|
||||
--state-error: #FFCCCC;
|
||||
--state-error-border: #FFCCCC;
|
||||
--state-error-text: #FFCCCC;
|
||||
|
||||
/* Common palette */
|
||||
--ui-yellow: #E29E4A;
|
||||
--ui-sky-blue: #6FBDE2;
|
||||
/* State palette */
|
||||
--ui-state-error: #FFCCCC;
|
||||
--ui-state-error-border: #993333;
|
||||
--ui-state-error-text: #661111;
|
||||
--ui-gray-lighter: #436270;
|
||||
--ui-gray-light: #516873;
|
||||
--ui-gray: #263340;
|
||||
--ui-gray-dark: #16202B;
|
||||
--ui-gray-darker: #151A1F;
|
||||
--ui-gray-darkest: #14202A;
|
||||
|
||||
--calendar-day-color: #d3d3d3;
|
||||
--calendar-day-border-color: #d3d3d3;
|
||||
--calendar-day-active-hover-background-color: #516873;
|
||||
--calendar-main-color: #263340;
|
||||
--viewport-border-thickness: 1px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif !important;
|
||||
}
|
||||
</style>
|
||||
{{ head }}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root" />
|
||||
{{ footer }}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,76 +0,0 @@
|
||||
---
|
||||
name: Introduction
|
||||
route: /
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { State } from 'react-powerplug';
|
||||
import { TableList, TableListItem } from './../index.js';
|
||||
|
||||
# Introduction
|
||||
|
||||
**@ohif/ui is a collection of components and utilities** that power OHIF's
|
||||
[zero-footprint DICOM viewer](https://github.com/OHIF/Viewers)
|
||||
([demo][demo-url]). We maintain them as a separate component library to:
|
||||
|
||||
- Decouple presentation from business logic
|
||||
- Test and develop components in isolation
|
||||
- Provide well documented, reusable components
|
||||
- Aid rapid application development for context specific viewers
|
||||
|
||||
## Quick Example
|
||||
|
||||
> This component library is pre- v1.0. All realeases until a v1.0 have the
|
||||
> possibility of introducing breaking changes. Please depend on an "exact"
|
||||
> version in your projects to prevent issues caused by loose versioning.
|
||||
|
||||
```js
|
||||
// Add '@ohif/ui' as a dependency
|
||||
yarn add @ohif/ui
|
||||
|
||||
// Import and use components
|
||||
import { TableList } from '@ohif/ui'
|
||||
```
|
||||
|
||||
<Playground>
|
||||
<State
|
||||
initial={{
|
||||
selectedIndex: null,
|
||||
listItems: [
|
||||
{ label: 'Brain Left' },
|
||||
{ label: 'Brain Right' },
|
||||
{ label: 'Heart Left' },
|
||||
{ label: 'Heart Right' },
|
||||
],
|
||||
}}
|
||||
>
|
||||
{({ state, setState }) => (
|
||||
<TableList headerTitle="Example Table List Header">
|
||||
{state.listItems.map((item, index) => {
|
||||
return (
|
||||
<TableListItem
|
||||
key={`item_${index}`}
|
||||
itemClass={state.selectedIndex === index ? 'selected' : ''}
|
||||
itemIndex={index}
|
||||
onItemClick={() => alert('item clicked')}
|
||||
>
|
||||
<label>{item.label}</label>
|
||||
</TableListItem>
|
||||
);
|
||||
})}
|
||||
</TableList>
|
||||
)}
|
||||
</State>
|
||||
</Playground>
|
||||
|
||||
## FAQ
|
||||
|
||||
...
|
||||
|
||||
<!--
|
||||
Links
|
||||
-->
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
[demo-url]: https://docs.ohif.org/demo/
|
||||
<!-- prettier-ignore-end -->
|
||||
@ -1,56 +0,0 @@
|
||||
---
|
||||
name: Styling & Theming
|
||||
route: /styling-and-theming
|
||||
---
|
||||
|
||||
# Styling & Theming
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* Interface UI Colors */
|
||||
--default-color: #9ccef9;
|
||||
--hover-color: #ffffff;
|
||||
--active-color: #20a5d6;
|
||||
--ui-border-color: #44626f;
|
||||
--ui-border-color-dark: #3c5d80;
|
||||
--ui-border-color-active: #00a4d9;
|
||||
--primary-background-color: #000000;
|
||||
--box-background-color: #3e5975;
|
||||
|
||||
--text-primary-color: #ffffff;
|
||||
--text-secondary-color: #91b9cd;
|
||||
--input-background-color: #2c363f;
|
||||
--input-placeholder-color: #d3d3d3;
|
||||
|
||||
--table-hover-color: #2c363f;
|
||||
--table-text-primary-color: #ffffff;
|
||||
--table-text-secondary-color: #91b9cd;
|
||||
|
||||
--large-numbers-color: #6fbde2;
|
||||
|
||||
--state-error: #ffcccc;
|
||||
--state-error-border: #ffcccc;
|
||||
--state-error-text: #ffcccc;
|
||||
|
||||
/* Common palette */
|
||||
--ui-yellow: #e29e4a;
|
||||
--ui-sky-blue: #6fbde2;
|
||||
|
||||
/* State palette */
|
||||
--ui-state-error: #ffcccc;
|
||||
--ui-state-error-border: #993333;
|
||||
--ui-state-error-text: #661111;
|
||||
--ui-gray-lighter: #436270;
|
||||
--ui-gray-light: #516873;
|
||||
--ui-gray: #263340;
|
||||
--ui-gray-dark: #16202b;
|
||||
--ui-gray-darker: #151a1f;
|
||||
--ui-gray-darkest: #14202a;
|
||||
|
||||
--calendar-day-color: #d3d3d3;
|
||||
--calendar-day-border-color: #d3d3d3;
|
||||
--calendar-day-active-hover-background-color: #516873;
|
||||
--calendar-main-color: #263340;
|
||||
--viewport-border-thickness: 1px;
|
||||
}
|
||||
```
|
||||
@ -1,87 +0,0 @@
|
||||
---
|
||||
name: Translating
|
||||
route: /translating
|
||||
---
|
||||
|
||||
# Translating
|
||||
|
||||
**React Viewerbase** supports internationalization using
|
||||
[i18next](https://www.i18next.com/) through the npm package
|
||||
[@ohif/i18n](https://www.npmjs.com/package/@ohif/i18n), where is the main
|
||||
instance of i18n containing several languages and tools.
|
||||
|
||||
## How to translate components
|
||||
|
||||
All you need is to use the internal custom superset of
|
||||
[withTranslation HOC](https://react.i18next.com/latest/withtranslation-hoc),
|
||||
available at `src/utils/LanguageProvider.js`
|
||||
|
||||
e.g.:
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
import { withTranslation } from '../utils/LanguageProvider.js';
|
||||
|
||||
function MyComponent({ t }) {
|
||||
return <p>{t('my translated text')}</p>;
|
||||
}
|
||||
|
||||
export default withTranslation('MyNameSpace')(MyComponent);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Namespaces
|
||||
|
||||
For further information about namespaces and how they work, please visit
|
||||
[OHIF Namespaces docs](https://docs.ohif.org/viewer/internationalization.html#namespaces).
|
||||
|
||||
### How to get right the Namespace of a `@ohif/ui` component?
|
||||
|
||||
Check the component's page in this site, the Namespace information should be on
|
||||
the bottom line.
|
||||
|
||||
Also, a nameSpace is defined when exporting a component, this information can be
|
||||
found on exports trough the code, in case of missing in docs.
|
||||
|
||||
E.g.
|
||||
|
||||
```
|
||||
export default withTranslation('TheNamespaceYouAreLookingFor')(TheComponentYouWantToUse);
|
||||
```
|
||||
|
||||
### How to use another Namespace inside the current Namespace?
|
||||
|
||||
i18next provides a parsing feature able to get translations strings from any
|
||||
Namespace, like this following example getting data from `InnerSpace` Namespace:
|
||||
|
||||
```
|
||||
$t(InnerSpace:Reset)
|
||||
export default withTranslation('OuterSpace')(TheComponent);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## I18next Provider
|
||||
|
||||
**@ohif/ui** pass down the `t` function trough the custom
|
||||
[withTranslation HOC](https://github.com/OHIF/Viewers/blob/master/platform/ui/src/utils/LanguageProvider.js).
|
||||
|
||||
---
|
||||
|
||||
## Extending and Overriding languages
|
||||
|
||||
[How to Extend languages with @ohif/i18n](https://docs.ohif.org/viewer/internationalization.html#extending-languages-in-ohifi18n)
|
||||
|
||||
## Changing the language
|
||||
|
||||
The language choosing method is the same implemented in
|
||||
[OHIF Viewers](https://docs.ohif.org/viewer/internationalization.html#changing-the-language)
|
||||
|
||||
> You can also change the language of the components displayed in this
|
||||
> documentation by choosing an option in the
|
||||
> [Docs Settings](https://react.ohif.org/docs-settings) section.
|
||||
|
||||
## Debugging translations
|
||||
|
||||
[How to Debug @ohif/i18n](https://docs.ohif.org/viewer/internationalization.html#debugging-translations)
|
||||
@ -1,22 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
import LanguageSwitcher from '../components/languageSwitcher';
|
||||
|
||||
import './wrapper.styl';
|
||||
|
||||
const Wrapper = ({ children }) => (
|
||||
<React.Fragment>
|
||||
<div className="sidebarLanguageSwitcher">
|
||||
<strong>Display components in:</strong>
|
||||
<LanguageSwitcher />
|
||||
</div>
|
||||
{children}
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
Wrapper.propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
};
|
||||
|
||||
export default Wrapper;
|
||||
@ -1,15 +0,0 @@
|
||||
[class*="Sidebar__Menus"]
|
||||
@media (min-width: 1120px)
|
||||
margin-top: 80px
|
||||
|
||||
.sidebarLanguageSwitcher
|
||||
position: fixed
|
||||
top: 155px
|
||||
left 0
|
||||
z-index: 1049
|
||||
padding: 0 24px 20px
|
||||
border-bottom: 1px dotted #CED4DE
|
||||
background: #F5F6F7
|
||||
transition: all 200ms ease
|
||||
@media (max-width: 1119px)
|
||||
left -100%
|
||||
@ -1,42 +0,0 @@
|
||||
---
|
||||
name: Checkbox
|
||||
menu: Elements
|
||||
route: /components/checkbox
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz'
|
||||
import { State } from 'react-powerplug'
|
||||
import { Checkbox } from './../index'
|
||||
import NameSpace from '../../../__docs__/NameSpace'
|
||||
|
||||
# Checkbox
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<State
|
||||
initial={{
|
||||
checked : false,
|
||||
label : 'Sample check'
|
||||
}}
|
||||
>
|
||||
{({ state, setState }) => (
|
||||
<React.Fragment>
|
||||
<div>
|
||||
<pre>{JSON.stringify(state, null, 2)}</pre>
|
||||
</div>
|
||||
<div style={{ maxWidth: '300px', margin: '0 auto' }}>
|
||||
<Checkbox {...state} />
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</State>
|
||||
</Playground>
|
||||
|
||||
## API
|
||||
|
||||
<Props of={Checkbox} />
|
||||
|
||||
## Translation Namespace
|
||||
|
||||
<NameSpace name="Checkbox" />
|
||||
@ -1,57 +0,0 @@
|
||||
---
|
||||
name: CINE Dialog
|
||||
menu: Components
|
||||
route: /components/cine-dialog
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz'
|
||||
import { State } from 'react-powerplug'
|
||||
import { CineDialog } from './../index'
|
||||
import NameSpace from '../../../__docs__/NameSpace'
|
||||
|
||||
# CINE Dialog
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<State
|
||||
initial={{
|
||||
isPlaying: false,
|
||||
cineFrameRate: 24,
|
||||
isLoopEnabled: true,
|
||||
lastChange: '',
|
||||
}}
|
||||
>
|
||||
{({ state, setState }) => (
|
||||
<React.Fragment>
|
||||
<div>
|
||||
<pre>{JSON.stringify(state, null, 2)}</pre>
|
||||
</div>
|
||||
<div style={{ maxWidth: '300px', margin: '0 auto' }}>
|
||||
<CineDialog
|
||||
{...state}
|
||||
onClickSkipToStart={() =>
|
||||
setState({ lastChange: 'Clicked SkipToStart' })
|
||||
}
|
||||
onClickSkipToEnd={() =>
|
||||
setState({ lastChange: 'Clicked SkipToEnd' })
|
||||
}
|
||||
onClickNextButton={() => setState({ lastChange: 'Clicked Next' })}
|
||||
onClickBackButton={() => setState({ lastChange: 'Clicked Back' })}
|
||||
onLoopChanged={value => setState({ isLoopEnabled: value })}
|
||||
onFrameRateChanged={value => setState({ cineFrameRate: value })}
|
||||
onPlayPauseChanged={() => setState({ isPlaying: !state.isPlaying })}
|
||||
/>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</State>
|
||||
</Playground>
|
||||
|
||||
## API
|
||||
|
||||
<Props of={CineDialog} />
|
||||
|
||||
## Translation Namespace
|
||||
|
||||
<NameSpace name="CineDialog" />
|
||||
@ -1,42 +0,0 @@
|
||||
---
|
||||
name: About Modal
|
||||
menu: Components
|
||||
route: /components/about-modal
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz'
|
||||
import { State } from 'react-powerplug'
|
||||
import { AboutContent } from './../index.js'
|
||||
|
||||
# About Modal
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<State initial={{
|
||||
isOpen: false
|
||||
}}>
|
||||
|
||||
{({ state, setState }) => (
|
||||
<React.Fragment>
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
type="button"
|
||||
onClick={ () => setState({ isOpen: true }) }
|
||||
>
|
||||
Open about modal
|
||||
</button>
|
||||
<AboutContent
|
||||
{...state}
|
||||
onCancel={() => setState({ isOpen: false })}
|
||||
/>
|
||||
</React.Fragment>
|
||||
)}
|
||||
|
||||
</State>
|
||||
|
||||
</Playground>
|
||||
|
||||
## API
|
||||
|
||||
<Props of={AboutContent} />
|
||||
@ -1,39 +0,0 @@
|
||||
---
|
||||
name: Viewport Download Form
|
||||
menu: Components
|
||||
route: /components/viewport-download-form
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz'
|
||||
import { State } from 'react-powerplug'
|
||||
import { ViewportDownloadForm } from './../index'
|
||||
import NameSpace from '../../../__docs__/NameSpace'
|
||||
|
||||
# Viewport Download Form
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<State
|
||||
initial={{}}
|
||||
>
|
||||
{({ state, setState }) => (
|
||||
<React.Fragment>
|
||||
<div>
|
||||
<pre>{JSON.stringify(state, null, 2)}</pre>
|
||||
</div>
|
||||
<div style={{ maxWidth: '400px', margin: '0 auto' }}>
|
||||
<ViewportDownloadForm />
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</State>
|
||||
</Playground>
|
||||
|
||||
## API
|
||||
|
||||
<Props of={ViewportDownloadForm} />
|
||||
|
||||
## Translation Namespace
|
||||
|
||||
<NameSpace name="ViewportDownloadForm" />
|
||||
@ -1,10 +0,0 @@
|
||||
.LayoutExample {
|
||||
background-color: var(--primary-background-color);
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.GridLayout td {
|
||||
padding: 5px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
@ -1,49 +0,0 @@
|
||||
---
|
||||
name: Layout Button
|
||||
menu: Components
|
||||
route: /components/layout-button
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz'
|
||||
import { State } from 'react-powerplug'
|
||||
import { LayoutButton } from './../index.js'
|
||||
import './layoutButton.css'
|
||||
import NameSpace from '../../../__docs__/NameSpace'
|
||||
|
||||
# Layout Button
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<State initial={{
|
||||
selectedCell: {
|
||||
className: 'hover',
|
||||
col: 1,
|
||||
row: 1
|
||||
},
|
||||
}}>
|
||||
{({ state, setState }) => (
|
||||
<React.Fragment>
|
||||
{/* STATE */}
|
||||
<div><pre>{JSON.stringify(state, null, 2) }</pre></div>
|
||||
|
||||
{/* COMPONENT */}
|
||||
<div className="LayoutExample">
|
||||
<LayoutButton
|
||||
{...state}
|
||||
onChange={cell => setState({ selectedCell: cell })}
|
||||
/>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</State>
|
||||
|
||||
</Playground>
|
||||
|
||||
## API
|
||||
|
||||
<Props of={LayoutButton} />
|
||||
|
||||
## Translation Namespace
|
||||
|
||||
<NameSpace name="Buttons" />
|
||||
@ -1,49 +0,0 @@
|
||||
---
|
||||
name: Measurement Table
|
||||
menu: Components
|
||||
route: /components/measurement-table
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz'
|
||||
import { State } from 'react-powerplug'
|
||||
import { MeasurementTable } from './../index.js'
|
||||
import NameSpace from '../../../__docs__/NameSpace'
|
||||
//
|
||||
import measurements from './measurements.js'
|
||||
import timepoints from './timepoints.js'
|
||||
import warnings from './warnings.js'
|
||||
|
||||
# Measurement Table
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<State
|
||||
initial={{
|
||||
// Spelling error: overwallWarnings
|
||||
overwallWarnings: warnings,
|
||||
timepoints,
|
||||
measurementCollection: measurements,
|
||||
}}
|
||||
>
|
||||
{({ state, setState }) => (
|
||||
<div style={{ height: '340px' }}>
|
||||
<MeasurementTable
|
||||
{...state}
|
||||
onItemClick={() => alert('onItemClick')}
|
||||
onRelabelClick={() => alert('onRelabelClick')}
|
||||
onDeleteClick={() => alert('onDeleteClick')}
|
||||
onEditDescriptionClick={() => alert('onEditDescriptionClick')}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</State>
|
||||
</Playground>
|
||||
|
||||
## API
|
||||
|
||||
<Props of={MeasurementTable} />
|
||||
|
||||
## Translation Namespace
|
||||
|
||||
<NameSpace name="MeasurementTable" />
|
||||
@ -1,93 +0,0 @@
|
||||
export default [
|
||||
{
|
||||
maxMeasurements: 5,
|
||||
groupName: 'Targets',
|
||||
measurements: [
|
||||
{
|
||||
measurementId: '123',
|
||||
measurementNumber: '123',
|
||||
itemNumber: 1,
|
||||
label: 'Chest Wall Posterior',
|
||||
hasWarnings: true,
|
||||
warningTitle: 'Criteria nonconformities',
|
||||
isSplitLesion: false,
|
||||
warningList: [
|
||||
'All measurements should have a location',
|
||||
'Nodal lesions must be >= 15mm short axis AND >= double the acquisition slice thickness by CT and MR',
|
||||
],
|
||||
data: [
|
||||
{
|
||||
displayText: '25.7 x 12.9',
|
||||
},
|
||||
{
|
||||
displayText: '24.7 x 11.5',
|
||||
},
|
||||
{},
|
||||
],
|
||||
},
|
||||
{
|
||||
measurementId: '124',
|
||||
measurementNumber: '124',
|
||||
itemNumber: 2,
|
||||
label: 'Bone Extremity',
|
||||
data: [
|
||||
{
|
||||
displayText: '24.7 x 11.1',
|
||||
},
|
||||
{
|
||||
displayText: '21.2 x 10.9',
|
||||
},
|
||||
{},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
maxMeasurements: 3,
|
||||
groupName: 'NonTargets',
|
||||
measurements: [
|
||||
{
|
||||
measurementId: '125',
|
||||
measurementNumber: '125',
|
||||
itemNumber: 1,
|
||||
label: 'Chest Wall Single Site',
|
||||
data: [
|
||||
{
|
||||
displayText: 'MD',
|
||||
},
|
||||
{
|
||||
displayText: 'NM',
|
||||
},
|
||||
{},
|
||||
],
|
||||
},
|
||||
{
|
||||
measurementId: '126',
|
||||
measurementNumber: '126',
|
||||
itemNumber: 2,
|
||||
label: 'Extremity Multiple Sites',
|
||||
data: [
|
||||
{
|
||||
displayText: 'CR',
|
||||
},
|
||||
{},
|
||||
{},
|
||||
],
|
||||
},
|
||||
{
|
||||
measurementId: '127',
|
||||
measurementNumber: '127',
|
||||
label: 'Extremity Site',
|
||||
data: [
|
||||
{
|
||||
displayText: 'CR',
|
||||
},
|
||||
{},
|
||||
{
|
||||
displayText: 'NM',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
@ -1,14 +0,0 @@
|
||||
export default [
|
||||
{
|
||||
label: 'Follow-up 2',
|
||||
date: '20-Dec-18',
|
||||
},
|
||||
{
|
||||
label: 'Follow-up 1',
|
||||
date: '15-Jun-18',
|
||||
},
|
||||
{
|
||||
label: 'Baseline',
|
||||
date: '10-Apr-18',
|
||||
},
|
||||
];
|
||||
@ -1,6 +0,0 @@
|
||||
export default {
|
||||
warningList: [
|
||||
'All measurements should have a location',
|
||||
'Nodal lesions must be >= 15mm short axis AND >= double the acquisition slice thickness by CT and MR',
|
||||
],
|
||||
};
|
||||
@ -1,39 +0,0 @@
|
||||
---
|
||||
name: OHIFModal
|
||||
menu: Components
|
||||
route: /components/ohif-modal
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz'
|
||||
import { State } from 'react-powerplug'
|
||||
import { OHIFModal } from './../index'
|
||||
import NameSpace from '../../../__docs__/NameSpace'
|
||||
|
||||
# OHIF Modal
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<State
|
||||
initial={{}}
|
||||
>
|
||||
{({ state, setState }) => (
|
||||
<React.Fragment>
|
||||
<div>
|
||||
<pre>{JSON.stringify(state, null, 2)}</pre>
|
||||
</div>
|
||||
<div style={{ maxWidth: '400px', margin: '0 auto' }}>
|
||||
<OHIFModal />
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</State>
|
||||
</Playground>
|
||||
|
||||
## API
|
||||
|
||||
<Props of={OHIFModal} />
|
||||
|
||||
## Translation Namespace
|
||||
|
||||
<NameSpace name="OHIFModal" />
|
||||
@ -1,84 +0,0 @@
|
||||
---
|
||||
name: Overlay Trigger
|
||||
menu: Components
|
||||
route: /components/overlay-trigger
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz'
|
||||
import { Tooltip } from './../../tooltip'
|
||||
import { OverlayTrigger } from './../index.js'
|
||||
|
||||
# Overlay Trigger
|
||||
|
||||
## Basic usage
|
||||
|
||||
### On Hover
|
||||
|
||||
<Playground>
|
||||
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between'
|
||||
}}>
|
||||
{
|
||||
['right', 'left', 'bottom', 'top'].map((placement) => {
|
||||
return (
|
||||
<React.Fragment key={`example-${placement}`}>
|
||||
<OverlayTrigger
|
||||
key={`example-${placement}`}
|
||||
placement={placement}
|
||||
overlay={
|
||||
<Tooltip
|
||||
placement={placement}
|
||||
className='in'
|
||||
id={`tooltip-${placement}`}
|
||||
>
|
||||
Here I am!
|
||||
</Tooltip>
|
||||
}
|
||||
>
|
||||
<button> Tooltip on {placement}</button>
|
||||
</OverlayTrigger>
|
||||
</React.Fragment>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
|
||||
</Playground>
|
||||
|
||||
### On Click
|
||||
|
||||
<Playground>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
{['right', 'left', 'bottom', 'top'].map(placement => {
|
||||
return (
|
||||
<OverlayTrigger
|
||||
key={`example-${placement}`}
|
||||
placement={placement}
|
||||
trigger="click"
|
||||
overlay={
|
||||
<Tooltip
|
||||
placement={placement}
|
||||
className="in"
|
||||
id={`tooltip-${placement}`}
|
||||
>
|
||||
Here I am!
|
||||
</Tooltip>
|
||||
}
|
||||
>
|
||||
<button> Tooltip on {placement}</button>
|
||||
</OverlayTrigger>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</Playground>
|
||||
|
||||
## API
|
||||
|
||||
<Props of={OverlayTrigger} />
|
||||
@ -1,61 +0,0 @@
|
||||
---
|
||||
name: Quick Switch
|
||||
menu: Components
|
||||
route: /components/quick-switch
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz'
|
||||
import { State } from 'react-powerplug'
|
||||
import { QuickSwitch } from './../index.js'
|
||||
//
|
||||
import studies from './studies.js'
|
||||
|
||||
# Quick Switch
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<State initial={{
|
||||
studyListData: studies,
|
||||
}}>
|
||||
{({ state, setState }) => (
|
||||
<QuickSwitch
|
||||
studyListData={state.studyListData}
|
||||
// If this is always activeStudy's thumbnails,
|
||||
// Why do we need to specify this?
|
||||
seriesData={
|
||||
state.studyListData.find((study) => {
|
||||
return !!study.active;
|
||||
}).thumbnails}
|
||||
onSeriesSelected={(selectedSeries) => {
|
||||
const { studyListData } = state;
|
||||
const selectedId = selectedSeries.displaySetInstanceUID;
|
||||
|
||||
studyListData.forEach(study => {
|
||||
study.thumbnails.forEach(series => {
|
||||
series.active = series.displaySetInstanceUID === selectedId;
|
||||
})
|
||||
});
|
||||
|
||||
setState({ studyListData });
|
||||
}}
|
||||
onStudySelected={(selectedStudy) => {
|
||||
const { studyListData } = state;
|
||||
const selectedId = selectedStudy.StudyInstanceUID;
|
||||
|
||||
studyListData.forEach(study => {
|
||||
study.active = study.StudyInstanceUID === selectedId;
|
||||
});
|
||||
|
||||
setState({ studyListData });
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
</State>
|
||||
|
||||
</Playground>
|
||||
|
||||
## API
|
||||
|
||||
<Props of={QuickSwitch} />
|
||||
@ -1,76 +0,0 @@
|
||||
export default [
|
||||
{
|
||||
StudyInstanceUID: '10001',
|
||||
StudyDescription: 'Anti-PD-1',
|
||||
modalities: 'CT',
|
||||
StudyDate: '18-nov-2018',
|
||||
active: false,
|
||||
thumbnails: [
|
||||
{
|
||||
imageSrc:
|
||||
'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/Anti-PD-1_Lung.jpg',
|
||||
SeriesDescription: 'Anti-PD-1_Lung',
|
||||
SeriesNumber: '2',
|
||||
numImageFrames: 512,
|
||||
displaySetInstanceUID: '10001-1',
|
||||
stackPercentComplete: 30,
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/Anti-PD-1_MELANOMA.jpg',
|
||||
SeriesDescription: 'Anti-PD-1_MELANOMA',
|
||||
SeriesNumber: '2',
|
||||
InstanceNumber: '1',
|
||||
numImageFrames: 256,
|
||||
displaySetInstanceUID: '10001-2',
|
||||
stackPercentComplete: 70,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
StudyInstanceUID: '10002',
|
||||
StudyDescription: 'CPTAC',
|
||||
modalities: 'CT',
|
||||
StudyDate: '16-aug-2017',
|
||||
active: true,
|
||||
thumbnails: [
|
||||
{
|
||||
imageSrc:
|
||||
'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/CPTAC-GBM.jpg',
|
||||
SeriesDescription: 'CPTAC-GBM',
|
||||
active: true,
|
||||
SeriesNumber: '2',
|
||||
numImageFrames: 512,
|
||||
displaySetInstanceUID: '10002-1',
|
||||
stackPercentComplete: 100,
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/CPTAC-CM.jpg',
|
||||
SeriesDescription: 'CPTAC-CM',
|
||||
SeriesNumber: '2',
|
||||
InstanceNumber: '1',
|
||||
displaySetInstanceUID: '10002-2',
|
||||
numImageFrames: 256,
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/CPTAC-HNSCC.jpg',
|
||||
SeriesDescription: 'CPTAC-HNSCC',
|
||||
SeriesNumber: '2',
|
||||
InstanceNumber: '1',
|
||||
displaySetInstanceUID: '10002-3',
|
||||
numImageFrames: 256,
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/CPTAC-LSCC.jpg',
|
||||
SeriesDescription: 'CPTAC-LSCC',
|
||||
SeriesNumber: '2',
|
||||
InstanceNumber: '1',
|
||||
displaySetInstanceUID: '10002-4',
|
||||
numImageFrames: 256,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
@ -1,74 +0,0 @@
|
||||
---
|
||||
name: Radio Button List
|
||||
menu: Elements
|
||||
route: /components/radio-button-list
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz'
|
||||
import { State } from 'react-powerplug'
|
||||
import { RadioButtonList } from './../index'
|
||||
import NameSpace from '../../../__docs__/NameSpace'
|
||||
|
||||
#Radio Button List
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<State
|
||||
initial={{
|
||||
description : [
|
||||
{
|
||||
'label' : 'Button 1',
|
||||
'id' : 'button1',
|
||||
'checked' : false
|
||||
},
|
||||
{
|
||||
'label' : 'Button 2',
|
||||
'id' : 'button2',
|
||||
'checked' : false,
|
||||
},
|
||||
{
|
||||
'label' : 'Button 3',
|
||||
'id' : 'button3',
|
||||
'checked' : true,
|
||||
}
|
||||
]
|
||||
}}
|
||||
>
|
||||
{({ state, setState }) => (
|
||||
<React.Fragment>
|
||||
<div>
|
||||
<pre>{JSON.stringify(state, null, 2)}</pre>
|
||||
</div>
|
||||
<div style={{ maxWidth: '300px', margin: '0 auto' }}>
|
||||
<RadioButtonList description={[
|
||||
{
|
||||
'label' : 'Button 1',
|
||||
'id' : 'button1',
|
||||
'checked' : false
|
||||
},
|
||||
{
|
||||
'label' : 'Button 2',
|
||||
'id' : 'button2',
|
||||
'checked' : false,
|
||||
|
||||
},
|
||||
{
|
||||
'label' : 'Button 3',
|
||||
'id' : 'coolButton3',
|
||||
'checked' : true,
|
||||
}
|
||||
]}/>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</State>
|
||||
</Playground>
|
||||
|
||||
## API
|
||||
|
||||
<Props of={RadioButtonList} />
|
||||
|
||||
## Translation Namespace
|
||||
|
||||
<NameSpace name="RadioButtonList" />
|
||||
@ -1,51 +0,0 @@
|
||||
---
|
||||
name: Rounded Button Group
|
||||
menu: Components
|
||||
route: /components/rounded-button-group
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { State } from 'react-powerplug';
|
||||
import { RoundedButtonGroup } from './../index.js';
|
||||
|
||||
# Rounded Button Group
|
||||
|
||||
A basic styled toggle switch
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<State
|
||||
initial={{
|
||||
value: null,
|
||||
options: [
|
||||
{
|
||||
value: 'studies',
|
||||
icon: 'th',
|
||||
bottomLabel: 'Series',
|
||||
},
|
||||
{
|
||||
value: 'measurements',
|
||||
icon: 'th-list',
|
||||
bottomLabel: 'Measurements',
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
{({ state, setState }) => (
|
||||
<React.Fragment>
|
||||
<div>
|
||||
<pre>value: {JSON.stringify(state.value, null, 2)}</pre>
|
||||
</div>
|
||||
<RoundedButtonGroup
|
||||
{...state}
|
||||
onValueChanged={value => setState({ value })}
|
||||
/>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</State>
|
||||
</Playground>
|
||||
|
||||
## API
|
||||
|
||||
<Props of={RoundedButtonGroup} />
|
||||
@ -1,42 +0,0 @@
|
||||
---
|
||||
name: Select Tree
|
||||
menu: Components
|
||||
route: /components/select-tree
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz'
|
||||
import { State } from 'react-powerplug'
|
||||
import { SelectTree } from './../index.js'
|
||||
|
||||
import selectTreeItems from './selectTreeItems.js'
|
||||
|
||||
# SelectTree
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<State initial={{
|
||||
items: selectTreeItems,
|
||||
}}>
|
||||
{({ state, setState }) => (
|
||||
<React.Fragment>
|
||||
<pre style={{ maxHeight: '135px', overflowX: 'auto' }}>
|
||||
{JSON.stringify(state.items, null, 2)}
|
||||
</pre>
|
||||
|
||||
<SelectTree
|
||||
items={state.items}
|
||||
onSelected={(event, item) => setState({ itemLabelSelected: item.label }) }
|
||||
selectTreeFirstTitle="Select Tree Example Header"
|
||||
autoFocus={false}
|
||||
/>
|
||||
</React.Fragment>
|
||||
)}
|
||||
|
||||
</State>
|
||||
|
||||
</Playground>
|
||||
|
||||
## API
|
||||
|
||||
<Props of={SelectTree} />
|
||||
@ -1,30 +0,0 @@
|
||||
export default [
|
||||
{
|
||||
label: 'A',
|
||||
value: 'A',
|
||||
items: [
|
||||
{
|
||||
label: 'Abdominal Wall',
|
||||
value: 'AbdominalWall',
|
||||
},
|
||||
{
|
||||
label: 'Adrenal Left',
|
||||
value: 'AdrenalLeft',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'B',
|
||||
value: 'B',
|
||||
items: [
|
||||
{
|
||||
label: 'Brain',
|
||||
value: 'Brain',
|
||||
},
|
||||
{
|
||||
label: 'Breast',
|
||||
value: 'Breast',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
@ -1,83 +0,0 @@
|
||||
---
|
||||
name: Simple Dialog
|
||||
menu: Components
|
||||
route: /components/simple-dialog
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz'
|
||||
import { State } from 'react-powerplug'
|
||||
import { SimpleDialog } from './../index.js'
|
||||
|
||||
# Simple Dialog
|
||||
|
||||
Its similar to a modal but we can pass its style as props and manipulate it as
|
||||
we want. Initially used to display tool data changes in our Viewport.
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<State initial={{
|
||||
isDialogOpen: false,
|
||||
inputValue: '',
|
||||
selectValue: '',
|
||||
dialogStyle: {
|
||||
top: '50px',
|
||||
left: '100px',
|
||||
position: 'absolute'
|
||||
}
|
||||
}}>
|
||||
{({ state, setState }) => (
|
||||
<React.Fragment>
|
||||
<div><pre>{JSON.stringify(state, null, 2) }</pre></div>
|
||||
|
||||
{/* Toggle Dialog */}
|
||||
<button onClick={() => setState({ isDialogOpen: !state.isDialogOpen})}>
|
||||
{state.isDialogOpen ? 'Close Dialog' : 'Open Dialog'}
|
||||
</button>
|
||||
|
||||
<SimpleDialog
|
||||
isOpen={state.isDialogOpen}
|
||||
headerTitle='Example Dialog Header'
|
||||
onClose={() => setState({ isDialogOpen: false })}
|
||||
onConfirm={() => setState({
|
||||
isDialogOpen: false,
|
||||
// If you don't want to update external state until complete,
|
||||
// This is where you could grab current field values and update parent
|
||||
// With setState
|
||||
//
|
||||
// inputValue: this.input.value,
|
||||
// selectValue: this.select.value
|
||||
})}
|
||||
componentStyle={state.dialogStyle}
|
||||
onValueChanged={(value) => setState({value}) }
|
||||
>
|
||||
<label htmlFor='input' className='simpleDialogLabelFor'>Input Example</label>
|
||||
<input
|
||||
id='input'
|
||||
type='text'
|
||||
className='simpleDialogInput'
|
||||
autoComplete='off'
|
||||
onChange={(e) => setState({inputValue: e.target.value})}
|
||||
/>
|
||||
<label htmlFor='select' className='simpleDialogLabelFor'>SelectExample</label>
|
||||
<select
|
||||
name='select'
|
||||
id='select'
|
||||
className='simpleDialogSelect'
|
||||
onChange={(e) => setState({selectValue: e.target.value})}
|
||||
>
|
||||
<option value='Option1'>Option1</option>
|
||||
<option value='Option2'>Option2</option>
|
||||
<option value='Option3'>Option3</option>
|
||||
<option value='Option4'>Option4</option>
|
||||
</select>
|
||||
</SimpleDialog>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</State>
|
||||
|
||||
</Playground>
|
||||
|
||||
## API
|
||||
|
||||
<Props of={SimpleDialog} />
|
||||
@ -1,30 +0,0 @@
|
||||
.ExampleDropTarget {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
min-height: 100px;
|
||||
|
||||
border: 2px dashed black;
|
||||
padding: 20px;
|
||||
transition: 0.2s all ease;
|
||||
}
|
||||
|
||||
.ExampleDropTarget h4,
|
||||
.ExampleDropTarger p {
|
||||
text-align: center;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.ExampleDropTarget.can-drop {
|
||||
border: 2px dashed #20a5d6;
|
||||
background-color: #fafafa;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.ExampleDropTarget.hovered {
|
||||
border: 2px dashed #20a5d6;
|
||||
background-color: black;
|
||||
color: #91b9cd;
|
||||
cursor: copy;
|
||||
}
|
||||
@ -1,84 +0,0 @@
|
||||
import React, { Component } from 'react';
|
||||
import { DropTarget } from 'react-dnd';
|
||||
import PropTypes from 'prop-types';
|
||||
import './ExampleDropTarget.css';
|
||||
|
||||
// Drag sources and drop targets only interact
|
||||
// if they have the same string type.
|
||||
const Types = {
|
||||
THUMBNAIL: 'thumbnail',
|
||||
};
|
||||
|
||||
const divTarget = {
|
||||
drop(props, monitor, component) {
|
||||
// Note: For this example we use setState, but in
|
||||
// OHIF we will update the redux store instead
|
||||
const item = monitor.getItem();
|
||||
|
||||
component.setState({
|
||||
item: {
|
||||
id: item.id,
|
||||
SeriesDescription: item.SeriesDescription,
|
||||
},
|
||||
});
|
||||
return { id: 'ExampleDropTarget' };
|
||||
},
|
||||
};
|
||||
|
||||
// TODO: Find out why we can't move this into the Example app instead.
|
||||
// It looks like the context isn't properly shared.
|
||||
class CustomDropTarget extends Component {
|
||||
static className = 'ExampleDropTarget';
|
||||
|
||||
state = {
|
||||
item: null,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
isOver: false,
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
connectDropTarget: PropTypes.func.isRequired,
|
||||
canDrop: PropTypes.bool.isRequired,
|
||||
isOver: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
render() {
|
||||
const { canDrop, isOver, connectDropTarget } = this.props;
|
||||
const isActive = canDrop && isOver;
|
||||
|
||||
let className = ExampleDropTarget.className;
|
||||
|
||||
if (isActive) {
|
||||
className += ' hovered';
|
||||
} else if (canDrop) {
|
||||
className += ' can-drop';
|
||||
}
|
||||
|
||||
return connectDropTarget(
|
||||
<div className={className}>
|
||||
<h4>
|
||||
{isActive
|
||||
? 'Release to drop'
|
||||
: 'Drag / Drop something from the Study Browser here'}
|
||||
</h4>
|
||||
<p className="study-drop-results">
|
||||
{this.state.item && JSON.stringify(this.state.item)}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const collect = (connect, monitor) => ({
|
||||
connectDropTarget: connect.dropTarget(),
|
||||
isOver: monitor.isOver(),
|
||||
canDrop: monitor.canDrop(),
|
||||
});
|
||||
|
||||
const ExampleDropTarget = DropTarget(Types.THUMBNAIL, divTarget, collect)(
|
||||
CustomDropTarget
|
||||
);
|
||||
|
||||
export { ExampleDropTarget };
|
||||
@ -1,75 +0,0 @@
|
||||
export const studies = [
|
||||
{
|
||||
thumbnails: [
|
||||
{
|
||||
imageSrc:
|
||||
'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/Anti-PD-1_Lung.jpg',
|
||||
SeriesDescription: 'Anti-PD-1_Lung',
|
||||
active: true,
|
||||
SeriesNumber: '2',
|
||||
numImageFrames: 512,
|
||||
stackPercentComplete: 30,
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/Anti-PD-1_MELANOMA.jpg',
|
||||
SeriesDescription: 'Anti-PD-1_MELANOMA',
|
||||
SeriesNumber: '2',
|
||||
InstanceNumber: '1',
|
||||
numImageFrames: 256,
|
||||
stackPercentComplete: 70,
|
||||
},
|
||||
{
|
||||
altImageText: 'SR',
|
||||
SeriesDescription: 'Imaging Measurement Report',
|
||||
SeriesNumber: '3',
|
||||
stackPercentComplete: 100,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
thumbnails: [
|
||||
{
|
||||
imageSrc:
|
||||
'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/CPTAC-GBM.jpg',
|
||||
SeriesDescription: 'CPTAC-GBM',
|
||||
active: true,
|
||||
SeriesNumber: '2',
|
||||
numImageFrames: 512,
|
||||
stackPercentComplete: 100,
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/CPTAC-CM.jpg',
|
||||
SeriesDescription: 'CPTAC-CM',
|
||||
SeriesNumber: '2',
|
||||
InstanceNumber: '1',
|
||||
numImageFrames: 256,
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/CPTAC-HNSCC.jpg',
|
||||
SeriesDescription: 'CPTAC-HNSCC',
|
||||
SeriesNumber: '2',
|
||||
InstanceNumber: '1',
|
||||
numImageFrames: 256,
|
||||
},
|
||||
{
|
||||
imageSrc:
|
||||
'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/CPTAC-LSCC.jpg',
|
||||
SeriesDescription: 'CPTAC-LSCC',
|
||||
SeriesNumber: '2',
|
||||
InstanceNumber: '1',
|
||||
numImageFrames: 256,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export function onThumbnailClick() {
|
||||
console.warn('onThumbnailClick');
|
||||
}
|
||||
|
||||
export function onThumbnailDoubleClick() {
|
||||
console.warn('onThumbnailDoubleClick');
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
---
|
||||
name: Study Browser
|
||||
menu: Components
|
||||
route: /components/study-browser
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz'
|
||||
import { State } from 'react-powerplug'
|
||||
import { WrappedStudyBrowser } from './wrappedStudyBrowser.js'
|
||||
import { StudyBrowser } from './../index.js'
|
||||
|
||||
# Study Browser
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<WrappedStudyBrowser />
|
||||
</Playground>
|
||||
|
||||
## API
|
||||
|
||||
<Props of={StudyBrowser} />
|
||||
@ -1,41 +0,0 @@
|
||||
import React, { Component } from 'react';
|
||||
import { DragDropContext } from 'react-dnd';
|
||||
import TouchBackend from 'react-dnd-touch-backend';
|
||||
|
||||
//
|
||||
import {
|
||||
studies,
|
||||
onThumbnailClick,
|
||||
onThumbnailDoubleClick,
|
||||
} from './exampleStudies.js';
|
||||
import ExampleDropTarget from './ExampleDropTarget.js';
|
||||
import { StudyBrowser } from './../index.js';
|
||||
|
||||
class StudyBrowserContainer extends Component {
|
||||
render() {
|
||||
//const viewportData = [null, null, null, null];
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<ExampleDropTarget />
|
||||
<StudyBrowser
|
||||
studies={studies}
|
||||
onThumbnailClick={onThumbnailClick}
|
||||
onThumbnailDoubleClick={onThumbnailDoubleClick}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Note:
|
||||
// Normally, the top level APP component is wrapped with the DragDropContext
|
||||
// We wrap this component to create a simple/local example.
|
||||
const WrappedStudyBrowser = DragDropContext(
|
||||
TouchBackend({ enableMouseEvents: true }),
|
||||
null,
|
||||
true
|
||||
)(StudyBrowserContainer);
|
||||
|
||||
// http://react-dnd.github.io/react-dnd/docs/api/drag-drop-context
|
||||
export { WrappedStudyBrowser };
|
||||
@ -1,72 +0,0 @@
|
||||
import moment from 'moment';
|
||||
|
||||
export default function(searchData) {
|
||||
this.setState({ searchData });
|
||||
|
||||
const filter = (key, searchData, study) => {
|
||||
if (key === 'studyDateFrom' && searchData[key] && study['StudyDate']) {
|
||||
const StudyDate = moment(study['StudyDate'], 'YYYYMMDD');
|
||||
return StudyDate.isBetween(
|
||||
searchData['studyDateFrom'],
|
||||
searchData['studyDateTo'],
|
||||
'days',
|
||||
'[]'
|
||||
);
|
||||
} else if (searchData[key] && !study[key].includes(searchData[key])) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
const { field, order } = searchData.sortData;
|
||||
|
||||
// just a example of local filtering
|
||||
let filteredStudies = this.defaultStudies
|
||||
.filter(function(study) {
|
||||
const all = [
|
||||
'PatientName',
|
||||
'PatientID',
|
||||
'AccessionNumber',
|
||||
'modalities',
|
||||
'StudyDescription',
|
||||
'studyDateFrom',
|
||||
].every(key => {
|
||||
return filter(key, searchData, study);
|
||||
});
|
||||
|
||||
return all;
|
||||
})
|
||||
.sort(function(a, b) {
|
||||
if (order === 'desc') {
|
||||
if (a[field] < b[field]) {
|
||||
return -1;
|
||||
}
|
||||
if (a[field] > b[field]) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
} else {
|
||||
if (a[field] > b[field]) {
|
||||
return -1;
|
||||
}
|
||||
if (a[field] < b[field]) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
|
||||
// User can notice the loading icon
|
||||
return new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
const first = searchData.currentPage * searchData.rowsPerPage;
|
||||
let last =
|
||||
searchData.currentPage * searchData.rowsPerPage +
|
||||
searchData.rowsPerPage;
|
||||
last = last >= filteredStudies.length ? filteredStudies.length : last;
|
||||
this.setState({ studies: filteredStudies.slice(first, last) });
|
||||
resolve();
|
||||
}, 500);
|
||||
});
|
||||
}
|
||||
@ -1,87 +0,0 @@
|
||||
import moment from 'moment';
|
||||
|
||||
const studies = [
|
||||
{
|
||||
StudyInstanceUID: '11111.111111.111111.11111',
|
||||
PatientName: 'John Doe',
|
||||
PatientID: '1',
|
||||
AccessionNumber: '1234567',
|
||||
StudyDate: '19930201',
|
||||
modalities: 'MR',
|
||||
StudyDescription: 'BRAIN',
|
||||
},
|
||||
{
|
||||
StudyInstanceUID: '2222.222222.22222.22222',
|
||||
PatientName: 'José Silva',
|
||||
PatientID: '2',
|
||||
AccessionNumber: '7654321',
|
||||
StudyDate: moment().format('YYYYMMDD'),
|
||||
modalities: 'CT',
|
||||
StudyDescription: 'PET CT STANDARD',
|
||||
},
|
||||
{
|
||||
StudyInstanceUID: '3333.333333.33333.33333',
|
||||
PatientName: 'Antônio Jefferson',
|
||||
PatientID: '3',
|
||||
AccessionNumber: '732311',
|
||||
StudyDate: moment()
|
||||
.subtract(14, 'days')
|
||||
.format('YYYYMMDD'),
|
||||
modalities: 'US',
|
||||
StudyDescription: '0',
|
||||
},
|
||||
{
|
||||
StudyInstanceUID: '444444.44444.44444.4444',
|
||||
PatientName: 'Antonio da Silva',
|
||||
PatientID: '4',
|
||||
AccessionNumber: '732311',
|
||||
StudyDate: moment()
|
||||
.subtract(1, 'months')
|
||||
.format('YYYYMMDD'),
|
||||
modalities: 'US',
|
||||
StudyDescription: '0',
|
||||
},
|
||||
{
|
||||
StudyInstanceUID: '55555.55555.55555.55555',
|
||||
PatientName: 'Bezerra Souza',
|
||||
PatientID: '5',
|
||||
AccessionNumber: '5134543',
|
||||
StudyDate: moment()
|
||||
.subtract(6, 'days')
|
||||
.format('YYYYMMDD'),
|
||||
modalities: 'US',
|
||||
StudyDescription: '0',
|
||||
},
|
||||
{
|
||||
StudyInstanceUID: '66666.66666.66666.6666',
|
||||
PatientName: 'Geraldo Roger',
|
||||
PatientID: '6',
|
||||
AccessionNumber: '5315135',
|
||||
StudyDate: moment()
|
||||
.subtract(7, 'days')
|
||||
.format('YYYYMMDD'),
|
||||
modalities: 'US',
|
||||
StudyDescription: 'US',
|
||||
},
|
||||
{
|
||||
StudyInstanceUID: '77777.77777.77777.77777',
|
||||
PatientName: '',
|
||||
PatientID: '7',
|
||||
AccessionNumber: '5315136',
|
||||
StudyDate: moment()
|
||||
.subtract(5, 'days')
|
||||
.format('YYYYMMDD'),
|
||||
modalities: 'US',
|
||||
StudyDescription: 'US',
|
||||
},
|
||||
].sort(function(a, b) {
|
||||
if (a.PatientName < b.PatientName) {
|
||||
return -1;
|
||||
}
|
||||
if (a.PatientName > b.PatientName) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
|
||||
export default studies;
|
||||
@ -1,53 +0,0 @@
|
||||
---
|
||||
name: Study List
|
||||
menu: Components
|
||||
route: /components/study-list
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz'
|
||||
import { State } from 'react-powerplug'
|
||||
import { StudyList } from './../index.js'
|
||||
// Data
|
||||
import defaultStudies from './studies.js'
|
||||
import onSearch from './onSearch.js'
|
||||
import moment from 'moment'
|
||||
|
||||
# Study List
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<State initial={{
|
||||
searchData: {},
|
||||
studies: defaultStudies.filter(study => {
|
||||
const StudyDate = moment(study['StudyDate'], 'YYYYMMDD');
|
||||
const startDate = moment().subtract(5, 'days');
|
||||
const endDate = moment();
|
||||
|
||||
return StudyDate.isBetween(startDate, endDate, 'days', '[]');
|
||||
}).slice(0, 5)
|
||||
}}>
|
||||
{({ state, setState }) => (
|
||||
<div className="row" style={{ backgroundColor: '#000', height: '600px' }}>
|
||||
<div className="col-xs-12" style={{ padding: 0 }}>
|
||||
<StudyList
|
||||
studies={state.studies}
|
||||
pageOptions={[1, 2, 3, 5, 10, 15, 20, 25, 50, 100]}
|
||||
studyListFunctionsEnabled={true}
|
||||
onImport={(e) => alert('Import study mock ' + e)}
|
||||
onSelectItem={(StudyInstanceUID) => { alert(StudyInstanceUID + ' has selected! Now you can open your study.'); }}
|
||||
rowsPerPage={5}
|
||||
defaultSort={{ field: 'PatientName', order: 'desc', }}
|
||||
studyListDateFilterNumDays={7}
|
||||
onSearch={onSearch.bind({ setState, defaultStudies })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</State>
|
||||
|
||||
</Playground>
|
||||
|
||||
## API
|
||||
|
||||
<Props of={StudyList} />
|
||||
@ -1,27 +0,0 @@
|
||||
---
|
||||
name: Tab Components
|
||||
menu: Components
|
||||
route: /components/tab-components
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz'
|
||||
import { State } from 'react-powerplug'
|
||||
import { TabComponents } from './../index.js'
|
||||
|
||||
// Data
|
||||
import tabs from './tabs.js'
|
||||
|
||||
# Tab Components
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<TabComponents
|
||||
tabs={tabs}
|
||||
customProps={}
|
||||
/>
|
||||
</Playground>
|
||||
|
||||
## API
|
||||
|
||||
<Props of={TabComponents} />
|
||||
@ -1,26 +0,0 @@
|
||||
export default tabs = [
|
||||
{
|
||||
name: 'tabName1',
|
||||
Component: () => {
|
||||
return <div>tab 1 Content</div>;
|
||||
},
|
||||
customProps: {},
|
||||
hidden: false,
|
||||
},
|
||||
{
|
||||
name: 'tabName2',
|
||||
Component: () => {
|
||||
return <div>tab 2 Content</div>;
|
||||
},
|
||||
customProps: {},
|
||||
hidden: false,
|
||||
},
|
||||
{
|
||||
name: 'tabName3',
|
||||
Component: () => {
|
||||
return <div>tab 3 Content</div>;
|
||||
},
|
||||
customProps: {},
|
||||
hidden: true,
|
||||
},
|
||||
];
|
||||
@ -1,48 +0,0 @@
|
||||
---
|
||||
name: Table List
|
||||
menu: Components
|
||||
route: /components/table-list
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz'
|
||||
import { State } from 'react-powerplug'
|
||||
import { TableList, TableListItem } from './../index.js'
|
||||
|
||||
# Table List
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<State initial={{
|
||||
selectedIndex: null,
|
||||
listItems: [
|
||||
{ label: 'Brain Left' },
|
||||
{ label: 'Brain Right' },
|
||||
{ label: 'Heart Left' },
|
||||
{ label: 'Heart Right' }
|
||||
]
|
||||
}}>
|
||||
{({ state, setState }) => (
|
||||
<TableList headerTitle='Example Table List Header'>
|
||||
{state.listItems.map( (item, index) => {
|
||||
return (
|
||||
<TableListItem
|
||||
key={`item_${index}`}
|
||||
itemClass={state.selectedIndex === index ? 'selected' : ''}
|
||||
itemIndex={index}
|
||||
onItemClick={() => alert('item clicked')}
|
||||
>
|
||||
<label>{item.label}</label>
|
||||
</TableListItem>
|
||||
)}
|
||||
)}
|
||||
</TableList>
|
||||
)}
|
||||
|
||||
</State>
|
||||
|
||||
</Playground>
|
||||
|
||||
## API
|
||||
|
||||
<Props of={TableList} />
|
||||
@ -1,41 +0,0 @@
|
||||
export default [
|
||||
{
|
||||
id: 'Pan',
|
||||
label: 'Pan',
|
||||
icon: 'arrows',
|
||||
},
|
||||
{
|
||||
label: 'Zoom',
|
||||
icon: 'search',
|
||||
},
|
||||
{
|
||||
label: 'Bidirectional',
|
||||
icon: 'measure-target',
|
||||
},
|
||||
{
|
||||
label: 'Stack Scroll',
|
||||
icon: 'bars',
|
||||
},
|
||||
{
|
||||
label: 'Reset',
|
||||
icon: 'reset',
|
||||
},
|
||||
{
|
||||
label: 'Manual',
|
||||
icon: 'level',
|
||||
},
|
||||
{
|
||||
label: 'More',
|
||||
icon: 'ellipse-circle',
|
||||
buttons: [
|
||||
{
|
||||
label: 'Reset 2',
|
||||
icon: 'reset',
|
||||
},
|
||||
{
|
||||
label: 'Manual 2',
|
||||
icon: 'adjust',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
@ -1,39 +0,0 @@
|
||||
---
|
||||
name: Toolbar Section
|
||||
menu: Components
|
||||
route: /components/toolbar-section
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { State } from 'react-powerplug';
|
||||
import { ToolbarSection } from './../index.js';
|
||||
import exampleButtons from './exampleButtons.js';
|
||||
import NameSpace from '../../../__docs__/NameSpace';
|
||||
|
||||
# ToolbarSection
|
||||
|
||||
A basic row of buttons for a toolbar. Active command is `WwwcTool`
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<State
|
||||
initial={{
|
||||
buttons: exampleButtons,
|
||||
activeButtons: ['Pan'],
|
||||
setToolActive: () => {
|
||||
alert('pressed');
|
||||
},
|
||||
}}
|
||||
>
|
||||
{({ state, setState }) => <ToolbarSection {...state} />}
|
||||
</State>
|
||||
</Playground>
|
||||
|
||||
## API
|
||||
|
||||
<Props of={ToolbarSection} />
|
||||
|
||||
## Translation Namespace
|
||||
|
||||
<NameSpace name="Buttons" />
|
||||
@ -1,20 +0,0 @@
|
||||
---
|
||||
name: Tooltip
|
||||
menu: Components
|
||||
route: /components/tooltip
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz'
|
||||
import { Tooltip } from './../index.js'
|
||||
|
||||
# Tooltip
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<Tooltip />
|
||||
</Playground>
|
||||
|
||||
## API
|
||||
|
||||
<Props of={Tooltip} />
|
||||
@ -1,84 +0,0 @@
|
||||
---
|
||||
name: Icon
|
||||
menu: Elements
|
||||
route: /elements/icon
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { State } from 'react-powerplug';
|
||||
import { Icon, ICONS } from './../index.js';
|
||||
|
||||
# Icon
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: 'white',
|
||||
}}
|
||||
>
|
||||
{Object.keys(ICONS)
|
||||
.sort()
|
||||
.map((name, i) => {
|
||||
return (
|
||||
<React.Fragment key={i}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flexBasis: '150px',
|
||||
margin: '2px',
|
||||
backgroundColor: 'rgb(11, 95, 255)',
|
||||
borderRadius: '4px',
|
||||
padding: '8px',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Icon name={name} />
|
||||
<div style={{ fontSize: '12px', wordWrap: 'break-word' }}>
|
||||
{name}
|
||||
</div>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Playground>
|
||||
|
||||
The `<Icon />` component inherits the color of its parent, and sizing is based
|
||||
on its parent's `font-size`. Each icon has an `aria-labelledby` to assist screen
|
||||
readers.
|
||||
|
||||
We use `airbnb`'s [`babel-plugin-inline-react-svg`][airbnb] to automate
|
||||
optimizing SVG files with [SVGO][svgo] and to create animatable React SVG
|
||||
components that can be requested asynchronously. You can configure SVGO's
|
||||
plugins [by following the advice laid out here][svgo-configure]
|
||||
|
||||
## API
|
||||
|
||||
<Props of={Icon} />
|
||||
|
||||
The `Icon` component takes a single prop of `name`, which indicates which Icon
|
||||
should be displayed. Again, the icon responds to contextual text/font styles.
|
||||
|
||||
## Attribution
|
||||
|
||||
A large number of these icons are from [Font Awesome 5's free set.][fa-license]
|
||||
Some attribution is likely required, depending on your usage. Sometimes as
|
||||
little as a comment included side-by-side with the accompanying SVG icon.
|
||||
|
||||
<!--
|
||||
Links
|
||||
-->
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
[fa-license]: https://fontawesome.com/license
|
||||
[airbnb]: https://github.com/airbnb/babel-plugin-inline-react-svg
|
||||
[svgo]: https://github.com/svg/svgo/
|
||||
[svgo-configure]: https://github.com/airbnb/babel-plugin-inline-react-svg/issues/9#issuecomment-310178317)
|
||||
<!-- prettier-ignore-end -->
|
||||
@ -1,57 +0,0 @@
|
||||
---
|
||||
name: Svg
|
||||
menu: Elements
|
||||
route: /elements/svg
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { State } from 'react-powerplug';
|
||||
import { Svg, SVGS } from './../index.js';
|
||||
|
||||
# Svg
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: 'white',
|
||||
}}
|
||||
>
|
||||
{Object.keys(SVGS)
|
||||
.sort()
|
||||
.map((name, i) => {
|
||||
return (
|
||||
<React.Fragment key={i}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flexBasis: '25%',
|
||||
minWidth: '100px',
|
||||
margin: '16px',
|
||||
backgroundColor: 'rgb(11, 95, 255)',
|
||||
borderRadius: '8px',
|
||||
padding: '16px',
|
||||
alignItems: 'center',
|
||||
fontSize: '33px',
|
||||
}}
|
||||
>
|
||||
<Svg name={name} />
|
||||
<div style={{ fontSize: '12px', wordWrap: 'break-word' }}>
|
||||
{name}
|
||||
</div>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Playground>
|
||||
|
||||
## API
|
||||
|
||||
<Props of={Svg} />
|
||||
@ -1,42 +0,0 @@
|
||||
---
|
||||
name: Form / Dropdown Menu
|
||||
menu: Elements
|
||||
route: /elements/form-ddMenu
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { State } from 'react-powerplug';
|
||||
import { DropdownMenu } from './../index.js';
|
||||
|
||||
# Select
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<State
|
||||
initial={{
|
||||
title: 'Test Title',
|
||||
align: 'left',
|
||||
list: [
|
||||
{
|
||||
title: 'Edit',
|
||||
icon: {
|
||||
name: 'edit',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Retry',
|
||||
icon: {
|
||||
name: 'reset',
|
||||
},
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
{({ state, setState }) => <DropdownMenu {...state} />}
|
||||
</State>
|
||||
</Playground>
|
||||
|
||||
## API
|
||||
|
||||
<Props of={DropdownMenu} />
|
||||
@ -1,32 +0,0 @@
|
||||
---
|
||||
name: Form / Label
|
||||
menu: Elements
|
||||
route: /elements/form-label
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { State } from 'react-powerplug';
|
||||
import { Label } from './../index.js';
|
||||
|
||||
# Label
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<State
|
||||
initial={{
|
||||
text: 'This is a label',
|
||||
for: '',
|
||||
}}
|
||||
>
|
||||
{({ state, setState }) => (
|
||||
<div className="label-example">
|
||||
<Label {...state} />
|
||||
</div>
|
||||
)}
|
||||
</State>
|
||||
</Playground>
|
||||
|
||||
## API
|
||||
|
||||
<Props of={Label} />
|
||||
@ -1,33 +0,0 @@
|
||||
---
|
||||
name: Form / Range
|
||||
menu: Elements
|
||||
route: /elements/form-range
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { State } from 'react-powerplug';
|
||||
import { Range } from './../index.js';
|
||||
|
||||
# Range
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<State
|
||||
initial={{
|
||||
value: 50,
|
||||
min: 0,
|
||||
max: 100,
|
||||
}}
|
||||
>
|
||||
{({ state, setState }) => (
|
||||
<div className="range-example">
|
||||
<Range {...state} />
|
||||
</div>
|
||||
)}
|
||||
</State>
|
||||
</Playground>
|
||||
|
||||
## API
|
||||
|
||||
<Props of={Range} />
|
||||
@ -1,39 +0,0 @@
|
||||
---
|
||||
name: Form / Select
|
||||
menu: Elements
|
||||
route: /elements/form-select
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { State } from 'react-powerplug';
|
||||
import { Select } from './../index.js';
|
||||
|
||||
# Select
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<State
|
||||
initial={{
|
||||
options: [
|
||||
{
|
||||
key: 'Option1',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
key: 'Option2',
|
||||
value: '2'
|
||||
}
|
||||
],
|
||||
value:'2'
|
||||
}}
|
||||
>
|
||||
|
||||
{({ state, setState }) => <Select {...state} />}
|
||||
|
||||
</State>
|
||||
</Playground>
|
||||
|
||||
## API
|
||||
|
||||
<Props of={Select} />
|
||||
@ -1,29 +0,0 @@
|
||||
---
|
||||
name: Form / Text Area
|
||||
menu: Elements
|
||||
route: /elements/form-textArea
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { State } from 'react-powerplug';
|
||||
import { TextArea } from './../index.js';
|
||||
|
||||
# Text Area
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<State
|
||||
initial={{
|
||||
value: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
|
||||
rows: 10,
|
||||
cols: 50,
|
||||
}}
|
||||
>
|
||||
{({ state, setState }) => <TextArea {...state} />}
|
||||
</State>
|
||||
</Playground>
|
||||
|
||||
## API
|
||||
|
||||
<Props of={TextArea} />
|
||||
@ -1,27 +0,0 @@
|
||||
---
|
||||
name: Form / Text Input
|
||||
menu: Elements
|
||||
route: /elements/form-textInput
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import { State } from 'react-powerplug';
|
||||
import { TextInput } from './../index.js';
|
||||
|
||||
# Text Input
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<State
|
||||
initial={{
|
||||
value: 'test',
|
||||
}}
|
||||
>
|
||||
{({ state, setState }) => <TextInput {...state} />}
|
||||
</State>
|
||||
</Playground>
|
||||
|
||||
## API
|
||||
|
||||
<Props of={TextInput} />
|
||||
@ -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');
|
||||
@ -26,15 +24,14 @@ const PROXY_TARGET = process.env.PROXY_TARGET;
|
||||
const PROXY_DOMAIN = process.env.PROXY_DOMAIN;
|
||||
const ENTRY_TARGET = process.env.ENTRY_TARGET || `${SRC_DIR}/index.js`;
|
||||
|
||||
|
||||
const setHeaders = (res, path) => {
|
||||
res.setHeader('Content-Type', 'text/plain')
|
||||
res.setHeader('Content-Type', 'text/plain');
|
||||
if (path.indexOf('.gz') !== -1) {
|
||||
res.setHeader('Content-Encoding', 'gzip')
|
||||
res.setHeader('Content-Encoding', 'gzip');
|
||||
} else if (path.indexOf('.br') !== -1) {
|
||||
res.setHeader('Content-Encoding', 'br')
|
||||
res.setHeader('Content-Encoding', 'br');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = (env, argv) => {
|
||||
const baseConfig = webpackBase(env, argv, { SRC_DIR, DIST_DIR });
|
||||
@ -147,12 +144,12 @@ module.exports = (env, argv) => {
|
||||
client: {
|
||||
overlay: { errors: true, warnings: false },
|
||||
},
|
||||
'static': [
|
||||
static: [
|
||||
{
|
||||
directory: path.join(require('os').homedir(), 'dicomweb'),
|
||||
staticOptions: {
|
||||
extensions: ['gz', 'br'],
|
||||
index: "index.json.gz",
|
||||
index: 'index.json.gz',
|
||||
redirect: true,
|
||||
setHeaders,
|
||||
},
|
||||
@ -162,7 +159,7 @@ module.exports = (env, argv) => {
|
||||
directory: '../../testdata',
|
||||
staticOptions: {
|
||||
extensions: ['gz', 'br'],
|
||||
index: "index.json.gz",
|
||||
index: 'index.json.gz',
|
||||
redirect: true,
|
||||
setHeaders,
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user