chore: update references to ohif-core and react-viewerbase
This commit is contained in:
dannyrb committed
1 parent
2b1f2104cd
commit
20d6680e06
14 files changed
+45
-57
No files matched your search
@@ -49,8 +49,8 @@ yarn add @ohif/ui --exact
|
||||
## Usage
|
||||
|
||||
```jsx
|
||||
import React, { Component } from "react";
|
||||
import { LayoutButton } from "@ohif/ui";
|
||||
import React, { Component } from 'react';
|
||||
import { LayoutButton } from '@ohif/ui';
|
||||
|
||||
class Example extends Component {
|
||||
constructor(props) {
|
||||
@@ -58,10 +58,10 @@ class Example extends Component {
|
||||
|
||||
this.state = {
|
||||
selectedCell: {
|
||||
className: "hover",
|
||||
className: 'hover',
|
||||
col: 1,
|
||||
row: 1
|
||||
}
|
||||
row: 1,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@@ -117,10 +117,9 @@ Links:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
[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/react-viewerbase
|
||||
[npm-downloads-image]: https://img.shields.io/npm/dm/react-viewerbase.svg?style=flat-square
|
||||
[npm-version-image]: https://img.shields.io/npm/v/react-viewerbase.svg?style=flat-square
|
||||
[npm-url]: https://npmjs.org/package/@ohif/ui
|
||||
[npm-downloads-image]: https://img.shields.io/npm/dm/@ohif/ui.svg?style=flat-square
|
||||
[npm-version-image]: https://img.shields.io/npm/v/@ohif/ui.svg?style=flat-square
|
||||
[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square
|
||||
[license-url]: LICENSE
|
||||
<!-- prettier-ignore-end -->
|
||||
@@ -7,7 +7,7 @@ route: /compatibility
|
||||
|
||||
## 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)
|
||||
or browsers supported by emotion.
|
||||
|
||||
|
||||
@@ -11,20 +11,20 @@ route: /getting-started
|
||||
> possibility of introducing breaking changes. Please depend on an "exact"
|
||||
> version in your projects to prevent issues caused by loose versioning.
|
||||
|
||||
Install `react-viewerbase` from npm:
|
||||
Install `@ohif/ui` from npm:
|
||||
|
||||
```shell
|
||||
// with npm
|
||||
npm i react-viewerbase --save-exact
|
||||
npm i @ohif/ui --save-exact
|
||||
|
||||
// with yarn
|
||||
yarn add react-viewerbase --exact
|
||||
yarn add @ohif/ui --exact
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
There is some setup required for `react-viewerbase`. We are working to eliminate
|
||||
these requirements with the goal of providing ready to use components.
|
||||
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
|
||||
|
||||
@@ -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';
|
||||
```
|
||||
|
||||
React Viewerbase also looks for theme CSS variabled defined on `:root`. You can
|
||||
find a list of variables [on the theming page](/styling-and-theming)
|
||||
`@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
|
||||
|
||||
@@ -46,7 +46,7 @@ You can use components in your React app:
|
||||
|
||||
```js
|
||||
import React, { Component } from 'react';
|
||||
import { LayoutButton } from 'react-viewerbase';
|
||||
import { LayoutButton } from '@ohif/ui';
|
||||
|
||||
class Example extends Component {
|
||||
constructor(props) {
|
||||
|
||||
@@ -3,14 +3,14 @@ name: Introduction
|
||||
route: /
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz'
|
||||
import { State } from 'react-powerplug'
|
||||
import { TableList, TableListItem } from './../index.js'
|
||||
import { Playground, Props } from 'docz';
|
||||
import { State } from 'react-powerplug';
|
||||
import { TableList, TableListItem } from './../index.js';
|
||||
|
||||
# Introduction
|
||||
|
||||
**React Viewerbase is a collection of components and utilities** that power
|
||||
OHIF's [zero-footprint DICOM viewer](https://github.com/OHIF/Viewers)
|
||||
**@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
|
||||
@@ -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.
|
||||
|
||||
```js
|
||||
// Add 'react-viewerbase' as a dependency
|
||||
yarn add react-viewerbase
|
||||
// Add '@ohif/ui' as a dependency
|
||||
yarn add @ohif/ui
|
||||
|
||||
// Import and use components
|
||||
import { TableList } from 'react-viewerbase'
|
||||
import { TableList } from '@ohif/ui'
|
||||
```
|
||||
|
||||
<Playground>
|
||||
@@ -56,7 +56,7 @@ import { TableList } from 'react-viewerbase'
|
||||
>
|
||||
<label>{item.label}</label>
|
||||
</TableListItem>
|
||||
)
|
||||
);
|
||||
})}
|
||||
</TableList>
|
||||
)}
|
||||
|
||||
@@ -36,9 +36,9 @@ export default withTranslation('MyNameSpace')(MyComponent);
|
||||
For further information about namespaces and how they work, please visit
|
||||
[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.
|
||||
|
||||
Also, a nameSpace is defined when exporting a component, this information can be
|
||||
@@ -50,10 +50,10 @@ E.g.
|
||||
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
|
||||
NameSpace, like this following example getting data from `InnerSpace` NameSpace:
|
||||
Namespace, like this following example getting data from `InnerSpace` Namespace:
|
||||
|
||||
```
|
||||
$t(InnerSpace:Reset)
|
||||
@@ -64,8 +64,8 @@ export default withTranslation('OuterSpace')(TheComponent);
|
||||
|
||||
## I18next Provider
|
||||
|
||||
**React Viewerbase** pass down the `t` function trough the custom
|
||||
[withTranslation HOC](https://github.com/OHIF/react-viewerbase/blob/master/src/utils/LanguageProvider.js).
|
||||
**@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).
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -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() {
|
||||
const { t } = this.props;
|
||||
return (
|
||||
|
||||
Reference in new issue
Block a user