chore: update references to ohif-core and react-viewerbase
This commit is contained in:
parent
2b1f2104cd
commit
20d6680e06
@ -273,7 +273,6 @@ MIT © [OHIF](https://github.com/OHIF)
|
|||||||
[netlify-image]: https://api.netlify.com/api/v1/badges/a5d369ab-18a6-41c3-bcde-83805205ac7f/deploy-status
|
[netlify-image]: https://api.netlify.com/api/v1/badges/a5d369ab-18a6-41c3-bcde-83805205ac7f/deploy-status
|
||||||
[netlify-url]: https://app.netlify.com/sites/ohif/deploys
|
[netlify-url]: https://app.netlify.com/sites/ohif/deploys
|
||||||
[all-contributors-image]: https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square
|
[all-contributors-image]: https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square
|
||||||
[contributing-url]: https://github.com/OHIF/Viewers/blob/master/CONTRIBUTING.md
|
|
||||||
[circleci-image]: https://circleci.com/gh/OHIF/Viewers.svg?style=svg
|
[circleci-image]: https://circleci.com/gh/OHIF/Viewers.svg?style=svg
|
||||||
[circleci-url]: https://circleci.com/gh/OHIF/Viewers
|
[circleci-url]: https://circleci.com/gh/OHIF/Viewers
|
||||||
[codecov-image]: https://codecov.io/gh/OHIF/Viewers/branch/master/graph/badge.svg
|
[codecov-image]: https://codecov.io/gh/OHIF/Viewers/branch/master/graph/badge.svg
|
||||||
|
|||||||
@ -4,7 +4,7 @@ Themeing is currently accomplished with color variables that are defined within
|
|||||||
the [`:root`](https://css-tricks.com/almanac/selectors/r/root/) selector
|
the [`:root`](https://css-tricks.com/almanac/selectors/r/root/) selector
|
||||||
(allowing them to cascade across all elements). This repository's components,
|
(allowing them to cascade across all elements). This repository's components,
|
||||||
and the ones we consume from our
|
and the ones we consume from our
|
||||||
[React Viewerbase component library](https://react.ohif.org/styling-and-theming)
|
[`@ohif/ui` component library](https://react.ohif.org/styling-and-theming)
|
||||||
utilize them. We are interested in pursuing more robust themeing options, and
|
utilize them. We are interested in pursuing more robust themeing options, and
|
||||||
open to pull requests and discussion issues.
|
open to pull requests and discussion issues.
|
||||||
|
|
||||||
@ -80,12 +80,12 @@ function RadicalImagingLogo() {
|
|||||||
href: 'http://radicalimaging.com',
|
href: 'http://radicalimaging.com',
|
||||||
},
|
},
|
||||||
React.createElement('h5', {}, 'RADICAL IMAGING')
|
React.createElement('h5', {}, 'RADICAL IMAGING')
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
props.whiteLabelling = {
|
props.whiteLabelling = {
|
||||||
logoComponent: RadicalImagingLogo(),
|
logoComponent: RadicalImagingLogo(),
|
||||||
}
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
|
|||||||
@ -145,8 +145,8 @@ becomes a new namespace automatically.
|
|||||||
- CineDialog: Translations for the toll tips inside the Cine Player Dialog
|
- CineDialog: Translations for the toll tips inside the Cine Player Dialog
|
||||||
- Common: all common jargons that can be reused like `t('$t(common:image)')`
|
- Common: all common jargons that can be reused like `t('$t(common:image)')`
|
||||||
- Header: translations related to OHIF's Header Top Bar
|
- Header: translations related to OHIF's Header Top Bar
|
||||||
- MeasurementTable - Translations for the react-viewerbase Measurement Table
|
- MeasurementTable - Translations for the `@ohif/ui` Measurement Table
|
||||||
- UserPreferencesModal - Translations for the react-viewerbase Preferences Modal
|
- UserPreferencesModal - Translations for the `@ohif/ui` Preferences Modal
|
||||||
|
|
||||||
### How to use another NameSpace inside the current NameSpace?
|
### How to use another NameSpace inside the current NameSpace?
|
||||||
|
|
||||||
|
|||||||
@ -3,8 +3,6 @@
|
|||||||
// - Include SVG Source/Inline?
|
// - Include SVG Source/Inline?
|
||||||
// - By URL, or own component?
|
// - By URL, or own component?
|
||||||
|
|
||||||
// TODO: `ohif-core` toolbar builder?
|
|
||||||
|
|
||||||
// What KINDS of toolbar buttons do we have...
|
// What KINDS of toolbar buttons do we have...
|
||||||
// - One's that dispatch commands
|
// - One's that dispatch commands
|
||||||
// - One's that set tool's active
|
// - One's that set tool's active
|
||||||
|
|||||||
@ -35,7 +35,7 @@ can be used with Vue, React, Vanilla JS, or any number of other frameworks.
|
|||||||
|
|
||||||
The documentation for this library is sparse. The best way to get started is to
|
The documentation for this library is sparse. The best way to get started is to
|
||||||
look at its
|
look at its
|
||||||
[top level exports](https://github.com/OHIF/ohif-core/blob/master/src/index.js),
|
[top level exports](https://github.com/OHIF/Viewers/blob/master/platform/core/src/index.js),
|
||||||
and explore the source code of features that interest you. If you want to see
|
and explore the source code of features that interest you. If you want to see
|
||||||
how we use this library, you can check out [our viewer
|
how we use this library, you can check out [our viewer
|
||||||
implementation][react-viewer].
|
implementation][react-viewer].
|
||||||
@ -57,12 +57,12 @@ yarn add @ohif/core --exact
|
|||||||
### Usage
|
### Usage
|
||||||
|
|
||||||
Usage is dependent on the feature(s) you want to leverage. The bulk of
|
Usage is dependent on the feature(s) you want to leverage. The bulk of
|
||||||
`ohif-core`'s features are "pure" and can be imported and used in place.
|
`@ohif/core`'s features are "pure" and can be imported and used in place.
|
||||||
|
|
||||||
_Example: retrieving study metadata from a server_
|
_Example: retrieving study metadata from a server_
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { studies } from "@ohif/core";
|
import { studies } from '@ohif/core';
|
||||||
|
|
||||||
const studiesMetadata = await studies.retrieveStudiesMetadata(
|
const studiesMetadata = await studies.retrieveStudiesMetadata(
|
||||||
server, // Object
|
server, // Object
|
||||||
@ -125,11 +125,10 @@ Links:
|
|||||||
|
|
||||||
<!-- prettier-ignore-start -->
|
<!-- prettier-ignore-start -->
|
||||||
<!-- ROW -->
|
<!-- ROW -->
|
||||||
[npm-url]: https://npmjs.org/package/ohif-core
|
[npm-url]: https://npmjs.org/package/@ohif/core
|
||||||
[npm-downloads-image]: https://img.shields.io/npm/dm/ohif-core.svg?style=flat-square
|
[npm-downloads-image]: https://img.shields.io/npm/dm/@ohif/core.svg?style=flat-square
|
||||||
[npm-version-image]: https://img.shields.io/npm/v/ohif-core.svg?style=flat-square
|
[npm-version-image]: https://img.shields.io/npm/v/@ohif/core.svg?style=flat-square
|
||||||
[all-contributors-image]: https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square
|
[all-contributors-image]: https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square
|
||||||
[contributing-url]: https://github.com/OHIF/ohif-core/blob/master/CONTRIBUTING.md
|
|
||||||
[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square
|
[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square
|
||||||
[license-url]: LICENSE
|
[license-url]: LICENSE
|
||||||
<!-- Misc. -->
|
<!-- Misc. -->
|
||||||
|
|||||||
@ -49,8 +49,8 @@ yarn add @ohif/ui --exact
|
|||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
import React, { Component } from "react";
|
import React, { Component } from 'react';
|
||||||
import { LayoutButton } from "@ohif/ui";
|
import { LayoutButton } from '@ohif/ui';
|
||||||
|
|
||||||
class Example extends Component {
|
class Example extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
@ -58,10 +58,10 @@ class Example extends Component {
|
|||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
selectedCell: {
|
selectedCell: {
|
||||||
className: "hover",
|
className: 'hover',
|
||||||
col: 1,
|
col: 1,
|
||||||
row: 1
|
row: 1,
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -117,10 +117,9 @@ Links:
|
|||||||
|
|
||||||
<!-- prettier-ignore-start -->
|
<!-- prettier-ignore-start -->
|
||||||
[all-contributors-image]: https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square
|
[all-contributors-image]: https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square
|
||||||
[contributing-url]: https://github.com/OHIF/react-viewerbase/blob/master/CONTRIBUTING.md
|
[npm-url]: https://npmjs.org/package/@ohif/ui
|
||||||
[npm-url]: https://npmjs.org/package/react-viewerbase
|
[npm-downloads-image]: https://img.shields.io/npm/dm/@ohif/ui.svg?style=flat-square
|
||||||
[npm-downloads-image]: https://img.shields.io/npm/dm/react-viewerbase.svg?style=flat-square
|
[npm-version-image]: https://img.shields.io/npm/v/@ohif/ui.svg?style=flat-square
|
||||||
[npm-version-image]: https://img.shields.io/npm/v/react-viewerbase.svg?style=flat-square
|
|
||||||
[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square
|
[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square
|
||||||
[license-url]: LICENSE
|
[license-url]: LICENSE
|
||||||
<!-- prettier-ignore-end -->
|
<!-- prettier-ignore-end -->
|
||||||
|
|||||||
@ -7,7 +7,7 @@ route: /compatibility
|
|||||||
|
|
||||||
## Browser Support
|
## Browser Support
|
||||||
|
|
||||||
React Viewerbase relies on
|
`@ohif/ui` relies on
|
||||||
[browsers supported by Styled Components](https://www.styled-components.com/docs/faqs#which-browsers-are-supported)
|
[browsers supported by Styled Components](https://www.styled-components.com/docs/faqs#which-browsers-are-supported)
|
||||||
or browsers supported by emotion.
|
or browsers supported by emotion.
|
||||||
|
|
||||||
|
|||||||
@ -11,20 +11,20 @@ route: /getting-started
|
|||||||
> possibility of introducing breaking changes. Please depend on an "exact"
|
> possibility of introducing breaking changes. Please depend on an "exact"
|
||||||
> version in your projects to prevent issues caused by loose versioning.
|
> version in your projects to prevent issues caused by loose versioning.
|
||||||
|
|
||||||
Install `react-viewerbase` from npm:
|
Install `@ohif/ui` from npm:
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
// with npm
|
// with npm
|
||||||
npm i react-viewerbase --save-exact
|
npm i @ohif/ui --save-exact
|
||||||
|
|
||||||
// with yarn
|
// with yarn
|
||||||
yarn add react-viewerbase --exact
|
yarn add @ohif/ui --exact
|
||||||
```
|
```
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
There is some setup required for `react-viewerbase`. We are working to eliminate
|
There is some setup required for `@ohif/ui`. We are working to eliminate these
|
||||||
these requirements with the goal of providing ready to use components.
|
requirements with the goal of providing ready to use components.
|
||||||
|
|
||||||
### External Dependencies
|
### External Dependencies
|
||||||
|
|
||||||
@ -37,8 +37,8 @@ or the font you set for your theme:
|
|||||||
'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700|Sanchez&display=swap';
|
'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700|Sanchez&display=swap';
|
||||||
```
|
```
|
||||||
|
|
||||||
React Viewerbase also looks for theme CSS variabled defined on `:root`. You can
|
`@ohif/ui` also looks for theme CSS variabled defined on `:root`. You can find a
|
||||||
find a list of variables [on the theming page](/styling-and-theming)
|
list of variables [on the theming page](/styling-and-theming)
|
||||||
|
|
||||||
### Import & Use
|
### Import & Use
|
||||||
|
|
||||||
@ -46,7 +46,7 @@ You can use components in your React app:
|
|||||||
|
|
||||||
```js
|
```js
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import { LayoutButton } from 'react-viewerbase';
|
import { LayoutButton } from '@ohif/ui';
|
||||||
|
|
||||||
class Example extends Component {
|
class Example extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
|
|||||||
@ -3,14 +3,14 @@ name: Introduction
|
|||||||
route: /
|
route: /
|
||||||
---
|
---
|
||||||
|
|
||||||
import { Playground, Props } from 'docz'
|
import { Playground, Props } from 'docz';
|
||||||
import { State } from 'react-powerplug'
|
import { State } from 'react-powerplug';
|
||||||
import { TableList, TableListItem } from './../index.js'
|
import { TableList, TableListItem } from './../index.js';
|
||||||
|
|
||||||
# Introduction
|
# Introduction
|
||||||
|
|
||||||
**React Viewerbase is a collection of components and utilities** that power
|
**@ohif/ui is a collection of components and utilities** that power OHIF's
|
||||||
OHIF's [zero-footprint DICOM viewer](https://github.com/OHIF/Viewers)
|
[zero-footprint DICOM viewer](https://github.com/OHIF/Viewers)
|
||||||
([demo][demo-url]). We maintain them as a separate component library to:
|
([demo][demo-url]). We maintain them as a separate component library to:
|
||||||
|
|
||||||
- Decouple presentation from business logic
|
- Decouple presentation from business logic
|
||||||
@ -25,11 +25,11 @@ OHIF's [zero-footprint DICOM viewer](https://github.com/OHIF/Viewers)
|
|||||||
> version in your projects to prevent issues caused by loose versioning.
|
> version in your projects to prevent issues caused by loose versioning.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
// Add 'react-viewerbase' as a dependency
|
// Add '@ohif/ui' as a dependency
|
||||||
yarn add react-viewerbase
|
yarn add @ohif/ui
|
||||||
|
|
||||||
// Import and use components
|
// Import and use components
|
||||||
import { TableList } from 'react-viewerbase'
|
import { TableList } from '@ohif/ui'
|
||||||
```
|
```
|
||||||
|
|
||||||
<Playground>
|
<Playground>
|
||||||
@ -56,7 +56,7 @@ import { TableList } from 'react-viewerbase'
|
|||||||
>
|
>
|
||||||
<label>{item.label}</label>
|
<label>{item.label}</label>
|
||||||
</TableListItem>
|
</TableListItem>
|
||||||
)
|
);
|
||||||
})}
|
})}
|
||||||
</TableList>
|
</TableList>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@ -36,9 +36,9 @@ export default withTranslation('MyNameSpace')(MyComponent);
|
|||||||
For further information about namespaces and how they work, please visit
|
For further information about namespaces and how they work, please visit
|
||||||
[OHIF Namespaces docs](https://docs.ohif.org/essentials/translating.html#namespaces).
|
[OHIF Namespaces docs](https://docs.ohif.org/essentials/translating.html#namespaces).
|
||||||
|
|
||||||
### How to get right the Name Space of a react-viewerbase component?
|
### 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
|
Check the component's page in this site, the Namespace information should be on
|
||||||
the bottom line.
|
the bottom line.
|
||||||
|
|
||||||
Also, a nameSpace is defined when exporting a component, this information can be
|
Also, a nameSpace is defined when exporting a component, this information can be
|
||||||
@ -50,10 +50,10 @@ E.g.
|
|||||||
export default withTranslation('TheNamespaceYouAreLookingFor')(TheComponentYouWantToUse);
|
export default withTranslation('TheNamespaceYouAreLookingFor')(TheComponentYouWantToUse);
|
||||||
```
|
```
|
||||||
|
|
||||||
### How to use another NameSpace inside the current NameSpace?
|
### How to use another Namespace inside the current Namespace?
|
||||||
|
|
||||||
i18next provides a parsing feature able to get translations strings from any
|
i18next provides a parsing feature able to get translations strings from any
|
||||||
NameSpace, like this following example getting data from `InnerSpace` NameSpace:
|
Namespace, like this following example getting data from `InnerSpace` Namespace:
|
||||||
|
|
||||||
```
|
```
|
||||||
$t(InnerSpace:Reset)
|
$t(InnerSpace:Reset)
|
||||||
@ -64,8 +64,8 @@ export default withTranslation('OuterSpace')(TheComponent);
|
|||||||
|
|
||||||
## I18next Provider
|
## I18next Provider
|
||||||
|
|
||||||
**React Viewerbase** pass down the `t` function trough the custom
|
**@ohif/ui** pass down the `t` function trough the custom
|
||||||
[withTranslation HOC](https://github.com/OHIF/react-viewerbase/blob/master/src/utils/LanguageProvider.js).
|
[withTranslation HOC](https://github.com/OHIF/Viewers/blob/master/platform/ui/src/utils/LanguageProvider.js).
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
@ -121,11 +121,6 @@ class CineDialog extends PureComponent {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// TODO:
|
|
||||||
// - Add next / previous display set buttons which just call
|
|
||||||
// onClickNextDisplaySet and onClickPreviousDisplaySet which are passed in as props.
|
|
||||||
// See https://github.com/OHIF/Viewers/blob/master/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.html#L38
|
|
||||||
// - Add 'isEnabled' prop: https://github.com/OHIF/Viewers/blob/master/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.js#L301
|
|
||||||
render() {
|
render() {
|
||||||
const { t } = this.props;
|
const { t } = this.props;
|
||||||
return (
|
return (
|
||||||
|
|||||||
@ -188,7 +188,6 @@ Links:
|
|||||||
[docker-pulls-img]: https://img.shields.io/docker/pulls/ohif/viewer.svg?style=flat-square
|
[docker-pulls-img]: https://img.shields.io/docker/pulls/ohif/viewer.svg?style=flat-square
|
||||||
[docker-image-url]: https://hub.docker.com/r/ohif/viewer
|
[docker-image-url]: https://hub.docker.com/r/ohif/viewer
|
||||||
[all-contributors-image]: https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square
|
[all-contributors-image]: https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square
|
||||||
[contributing-url]: https://github.com/OHIF/Viewers/blob/react/CONTRIBUTING.md
|
|
||||||
[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square
|
[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square
|
||||||
[license-url]: LICENSE
|
[license-url]: LICENSE
|
||||||
<!-- DOCS -->
|
<!-- DOCS -->
|
||||||
|
|||||||
@ -13,7 +13,6 @@ window.config = {
|
|||||||
imageRendering: 'wadors',
|
imageRendering: 'wadors',
|
||||||
thumbnailRendering: 'wadors',
|
thumbnailRendering: 'wadors',
|
||||||
// REQUIRED TAG:
|
// REQUIRED TAG:
|
||||||
// https://github.com/OHIF/ohif-core/blob/59e1e04b92be24aee5d4402445cb3dcedb746995/src/studies/retrieveStudyMetadata.js#L54
|
|
||||||
// TODO: Remove tag after https://github.com/OHIF/ohif-core/pull/19 is merged and we bump version
|
// TODO: Remove tag after https://github.com/OHIF/ohif-core/pull/19 is merged and we bump version
|
||||||
requestOptions: {
|
requestOptions: {
|
||||||
// undefined to use JWT + Bearer auth
|
// undefined to use JWT + Bearer auth
|
||||||
@ -39,4 +38,4 @@ window.config = {
|
|||||||
post_logout_redirect_uri: '/logout-redirect.html',
|
post_logout_redirect_uri: '/logout-redirect.html',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
}
|
};
|
||||||
|
|||||||
@ -11,7 +11,7 @@ import { reducer as oidcReducer } from 'redux-oidc';
|
|||||||
import { redux } from '@ohif/core';
|
import { redux } from '@ohif/core';
|
||||||
import thunkMiddleware from 'redux-thunk';
|
import thunkMiddleware from 'redux-thunk';
|
||||||
|
|
||||||
// Combine our ohif-core, ui, and oidc reducers
|
// Combine our @ohif/core, ui, and oidc reducers
|
||||||
// Set init data, using values found in localStorage
|
// Set init data, using values found in localStorage
|
||||||
const { reducers, localStorage } = redux;
|
const { reducers, localStorage } = redux;
|
||||||
const middleware = [thunkMiddleware];
|
const middleware = [thunkMiddleware];
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user