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

Dont import directly from entries #2051

Merged
merged 4 commits into from
Aug 29, 2023
Merged
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
2 changes: 2 additions & 0 deletions docs/React4xp.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,6 @@ Hydration is needed for react components with client side interaction. You need
If we want to make more complex components/containers for react we can create classes that extends the React.Component class. This will open of for the possibility to use [state](https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class) and [lifecycles](https://reactjs.org/docs/react-component.html#the-component-lifecycle). Ref. [Header.jsx](/src/main/resources/react4xp/_entries/Header.jsx)

## Entries
It is important that any file in `react4xp/_entries` is not imported into any other file. An entry is a bridge between XP and React, not a reusable React component. They should only be used through the various render methods in `lib-react4xp` in our controllers.

After you've run `enonic project build` or `enonic project deploy` at least once, you'll have a file in your build folder with a list of all react4xp components available. `/build/resources/main/assets/react4xp/entries.json`
2 changes: 1 addition & 1 deletion src/main/resources/admin/tools/bestbet/bestbet.ts
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ function renderPart(req: XP.Request): XP.Response {
]

const bestBetComponent = r4XpRender(
'bestbet/Bestbet',
'Bestbet',
{
logoUrl: assetUrl({
path: 'SSB_logo_black.svg',
Expand Down
4 changes: 0 additions & 4 deletions src/main/resources/main.es6
Original file line number Diff line number Diff line change
Expand Up @@ -95,10 +95,6 @@ try {
feature: 'datefns-publication-archive',
enabled: false,
},
{
feature: 'csr-on-table-accordion',
enabled: false,
},
],
},
])
Expand Down
65 changes: 1 addition & 64 deletions src/main/resources/react4xp/_entries/Accordion.jsx
Original file line number Diff line number Diff line change
@@ -1,67 +1,4 @@
import React from 'react'
import { Accordion as AccordionComponent, NestedAccordion } from '@statisticsnorway/ssb-component-library'

import PropTypes from 'prop-types'

class Accordion extends React.Component {
renderNestedAccordions(items) {
return items.map((item, i) => (
<NestedAccordion key={i} header={item.title}>
{item.body && <div dangerouslySetInnerHTML={this.createMarkup(item.body)} />}
</NestedAccordion>
))
}

createMarkup(html) {
return {
__html: html.replace(/&nbsp;/g, ' '),
}
}

render() {
const location = window.location
const anchor = location && location.hash !== '' ? location.hash.substr(1) : undefined

const { accordions } = this.props

return (
<section className='xp-part part-accordion container'>
<div className='row'>
{accordions.map((accordion, index) => (
<React.Fragment key={index}>
<AccordionComponent
className='col-12'
id={accordion.id}
header={accordion.open}
subHeader={accordion.subHeader}
openByDefault={anchor && accordion.id && accordion.id === anchor}
>
{accordion.body && <div dangerouslySetInnerHTML={this.createMarkup(accordion.body)} />}
{this.renderNestedAccordions(accordion.items)}
</AccordionComponent>
</React.Fragment>
))}
</div>
</section>
)
}
}

Accordion.propTypes = {
accordions: PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.string,
open: PropTypes.string.isRequired,
subHeader: PropTypes.string,
body: PropTypes.string,
items: PropTypes.arrayOf(
PropTypes.shape({
title: PropTypes.string,
body: PropTypes.string,
})
),
})
),
}
import Accordion from '../accordion/Accordion'

export default (props) => <Accordion {...props} />
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Accordion, Button } from '@statisticsnorway/ssb-component-library'
import { ChevronDown, ChevronUp } from 'react-feather'

import PropTypes from 'prop-types'
import Table from './Table'
import Table from '../table/Table'
import { addGtagForEvent } from '/react4xp/ReactGA'

function AttachmentTableFigures(props) {
Expand Down
4 changes: 4 additions & 0 deletions src/main/resources/react4xp/_entries/Bestbet.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import React from 'react'
import Bestbet from '../bestbet/Bestbet'

export default (props) => <Bestbet {...props} />
Loading