Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Introduce context provider in view component #6395

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/source/blocks/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,5 +19,6 @@ editcomponent
block-style-wrapper
extensions
ssr
viewcontext
core/index
```
38 changes: 38 additions & 0 deletions docs/source/blocks/viewcontext.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
---
myst:
html_meta:
"description": "Sharing a context between blocks"
"property=og:description": "Sharing a context between blocks"
"property=og:title": "context of view"
"keywords": "Volto, React, blocks, view, context"
---

(viewcontext-label)=

# context of `View`

```{versionadded} Volto 18.0.0-alpha.48
```

Sharing a context between blocks.

Volto provides a context of the `View` component for the case that blocks need to know about each other.

Example: tooltips generated from a glossary show up only on the first occurrence on a page.

Initialize the context for your add-on:

```js
config.views.viewContext["volto-slate-glossary"] = [];
```

Get the context and use it:

```js
import { useViewContext } from '@plone/volto/components/theme/View/View';


let matchedGlossaryTerms = useViewContext("volto-slate-glossary");
```


1 change: 1 addition & 0 deletions packages/volto/news/6394.feature
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Introduce context provider in view component. @ksuess
29 changes: 22 additions & 7 deletions packages/volto/src/components/theme/View/View.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { Redirect } from 'react-router-dom';
import { createPortal } from 'react-dom';
import { injectIntl } from 'react-intl';
import qs from 'query-string';
import { cloneDeep } from 'lodash';

import {
ContentMetadataTags,
Expand All @@ -29,6 +30,8 @@ import {
import config from '@plone/volto/registry';
import SlotRenderer from '../SlotRenderer/SlotRenderer';

const ViewContext = React.createContext();

/**
* View container class.
* @class View
Expand Down Expand Up @@ -247,13 +250,15 @@ class View extends Component {
}
/>
<SlotRenderer name="aboveContent" content={this.props.content} />
<RenderedView
key={this.props.content['@id']}
content={this.props.content}
location={this.props.location}
token={this.props.token}
history={this.props.history}
/>
<ViewContext.Provider value={cloneDeep(config.views.viewContext)}>
<RenderedView
key={this.props.content['@id']}
content={this.props.content}
location={this.props.location}
token={this.props.token}
history={this.props.history}
/>
</ViewContext.Provider>
<SlotRenderer name="belowContent" content={this.props.content} />
{this.props.content.allow_discussion && (
<Comments pathname={this.props.pathname} />
Expand All @@ -268,6 +273,16 @@ class View extends Component {
}
}

export function useViewContext(name) {
const viewContext = React.useContext(ViewContext);

if (!viewContext) {
throw new Error('Using useViewContext hook outside of <View>');
}

return viewContext[name] || {};
}

export default compose(
injectIntl,
connect(
Expand Down
2 changes: 2 additions & 0 deletions packages/volto/src/config/Views.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -138,3 +138,5 @@ export const layoutViewsNamesMapping = {
view: 'Default view',
default: 'Default view',
};

export const viewContext = {};
2 changes: 2 additions & 0 deletions packages/volto/src/config/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
defaultView,
errorViews,
layoutViewsNamesMapping,
viewContext,
} from './Views';
import { nonContentRoutes } from './NonContentRoutes';
import { nonContentRoutesPublic } from './NonContentRoutesPublic';
Expand Down Expand Up @@ -205,6 +206,7 @@ let config = {
defaultView,
errorViews,
layoutViewsNamesMapping,
viewContext,
},
blocks: {
requiredBlocks,
Expand Down
Loading