Commit 30ef9627 authored by Caner Candan's avatar Caner Candan

feat(assembler): now children appear on the canvas

parent 95ebaf2a
Pipeline #18763563 skipped with stages
......@@ -4,7 +4,7 @@ import buildDebug from 'debug'
import { withStyles } from 'material-ui/styles'
import withWidth from 'material-ui/utils/withWidth'
import { OccurrencesQuery } from '../graphql'
import { OccurrencesQuery, SessionQuery } from '../graphql'
import LoadingComponent from './loading.component'
import OcccurrenceComponent from './occurrence.component'
......@@ -16,6 +16,7 @@ const debug = buildDebug('react-packages:packages:rct-assembler-component:canvas
}))
@withWidth()
@OccurrencesQuery
@SessionQuery
export default class CanvasComponent extends Component {
static propTypes = {
// eslint-disable-next-line react/forbid-prop-types, react/no-unused-prop-types
......@@ -35,17 +36,24 @@ export default class CanvasComponent extends Component {
render() {
debug('render()')
const { loading, occurrences, sessionId } = this.props
const { loading, occurrences, sessionId, session } = this.props
if (loading) {
return <LoadingComponent />
}
debug(occurrences)
return (
<div id="canvas" style={{ height: '100%' }}>
{ occurrences.map(({ children, ...occurrenceProps }) => (
<OcccurrenceComponent key={occurrenceProps.id} sessionId={sessionId} {...occurrenceProps}>
{ children }
</OcccurrenceComponent>
)) }
{ occurrences
.filter(({ parent }) => !parent)
.map(({ ...occurrenceProps }) => (
<OcccurrenceComponent
key={occurrenceProps.id}
sessionId={sessionId}
sessionObj={session}
{...occurrenceProps}
/>
))
}
</div>
)
}
......
......@@ -7,7 +7,6 @@ import withWidth from 'material-ui/utils/withWidth'
import Tooltip from 'material-ui/Tooltip'
import Typography from 'material-ui/Typography'
import { SessionQuery } from '../graphql'
import { components } from '../assets'
import ErrorBoundary from './error-boundary'
......@@ -31,7 +30,6 @@ const debug = buildDebug('react-packages:packages:rct-assembler-component:occurr
// TBD
}))
@withWidth()
@SessionQuery
export default class OccurrenceComponent extends Component {
static propTypes = {
// eslint-disable-next-line react/forbid-prop-types, react/no-unused-prop-types
......@@ -41,11 +39,9 @@ export default class OccurrenceComponent extends Component {
sessionId: PropTypes.string.isRequired,
id: PropTypes.string.isRequired,
component: PropTypes.string.isRequired,
// eslint-disable-next-line react/forbid-prop-types
children: PropTypes.any.isRequired,
isChecked: PropTypes.bool.isRequired,
// eslint-disable-next-line react/forbid-prop-types
session: PropTypes.object.isRequired,
sessionObj: PropTypes.object.isRequired,
// eslint-disable-next-line react/forbid-prop-types
props: PropTypes.any.isRequired,
// TBD
......@@ -54,9 +50,25 @@ export default class OccurrenceComponent extends Component {
// TBD
}
static convertProp({
type, oneOf, value,
convertProp({
type, oneOf, value, children,
}) {
debug('convertProp')
const {
classes, width, sessionObj, sessionId,
} = this.props
if ((type === 'node' || type === 'any') && children && children.length) {
return children.map(({ ...occurrenceProps }) => (
React.createElement(OccurrenceComponent, {
key: occurrenceProps.id,
sessionObj,
sessionId,
classes,
width,
...occurrenceProps,
})
))
}
if (type === 'bool') {
return value === 'true'
}
......@@ -68,30 +80,27 @@ export default class OccurrenceComponent extends Component {
if (type === 'string' || type === 'enum' || (type === 'union' && !!~oneOf.indexOf('string'))) {
return String(value.slice(1, -1))
}
if (type === 'node') {
return null
}
return null
}
render() {
debug('render()')
const {
classes, width, id, component, children,
isChecked, sessionId, session, props,
classes, width, id, component,
isChecked, sessionId, sessionObj, props,
} = this.props
debug(children)
debug(component)
// build props object to pass to component
const propsObj = props
// select only props that contains a non-empty value
.filter(({ value }) => !!value.length)
// reduce to create the props object
.reduce((obj, {
name, type, oneOf, value,
name, type, oneOf, value, children,
}) => ({
...obj,
[name]: OccurrenceComponent.convertProp({
name, type, oneOf, value,
[name]: this.convertProp({
name, type, oneOf, value, children,
}),
}), {})
debug(propsObj)
......@@ -101,19 +110,10 @@ export default class OccurrenceComponent extends Component {
<Typography>Component does not exist!</Typography>
)
}
/*
const childrenInstances = children.map(({ children: childChildren, ...childProps }) => (
React.createElement(OccurrenceComponent, {
...childProps,
key: childProps.uuid,
classes,
width,
sessionId,
}, childChildren)
))
*/
const { component: componentClass } = components[component]
if (session.focusedOccurrence && session.focusedOccurrence.id === id) {
debug(sessionObj)
debug(id)
if (sessionObj.focusedOccurrence && sessionObj.focusedOccurrence.id === id) {
return (
<ErrorBoundary>
<Tooltip title={`${component} - ${id}`}>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment