ProxyPropertyGroupWidget

Source

index.js
import React from 'react';
import PropTypes from 'prop-types';
import equals from 'mout/src/array/equals';

import style from 'PVWStyle/ReactWidgets/ProxyPropertyGroup.mcss';

import factory from '../../Properties/PropertyFactory';
import {
isGroupWidget,
proxyToProps,
} from '../../../Common/Misc/ConvertProxyProperty';

function extractProperties(nestedPropsInput, flatPropsOutput) {
nestedPropsInput.forEach((p) => {
if (isGroupWidget(p.ui.propType)) {
extractProperties(p.children, flatPropsOutput);
} else {
flatPropsOutput[p.data.id] = p.data.value;
}
});
}

export default class ProxyPropertyGroup extends React.Component {
constructor(props) {
super(props);
this.state = {
collapsed: props.collapsed,
changeSet: {},
properties: proxyToProps(props.proxy),
};

// Callback binding
this.toggleCollapsedMode = this.toggleCollapsedMode.bind(this);
this.valueChange = this.valueChange.bind(this);
}

componentWillReceiveProps(nextProps) {
const previous = this.props.proxy;
const next = nextProps.proxy;

if (!equals(previous, next)) {
this.setState({
properties: proxyToProps(next),
changeSet: {},
});
}
}

toggleCollapsedMode() {
const collapsed = !this.state.collapsed;
if (this.props.onCollapseChange) {
this.props.onCollapseChange(this.props.proxy.name, collapsed);
}
this.setState({ collapsed });
}

valueChange(change) {
if (change.collapseType) {
this.props.onCollapseChange(change.id, change.value, change.collapseType);
return;
}
const changeSet = this.state.changeSet;
changeSet[change.id] =
change.size === 1 && Array.isArray(change.value)
? change.value[0]
: change.value;
this.setState({ changeSet });
if (this.props.onChange) {
this.props.onChange(changeSet);
}
}

render() {
const properties = {};
const ctx = {
advanced: this.props.advanced,
filter: this.props.filter,
properties,
};
const changeSetCount = Object.keys(this.state.changeSet).length;

extractProperties(this.state.properties, properties);

return (
<div className={style.container}>
<div className={style.toolbar} onClick={this.toggleCollapsedMode}>
<i
className={
this.state.collapsed ? style.collapedIcon : style.expandedIcon
}
/>
<span className={style.title}>{this.props.proxy.name}</span>
<span className={changeSetCount ? style.tag : style.emptyTag}>
<i className={style.tagBackground} />
<strong className={style.tagCount}>{changeSetCount}</strong>
</span>
</div>
<div className={this.state.collapsed ? style.hidden : style.content}>
{this.state.properties.map((p) => factory(p, ctx, this.valueChange))}
</div>
</div>
);
}
}

ProxyPropertyGroup.propTypes = {
advanced: PropTypes.bool,
collapsed: PropTypes.bool,
filter: PropTypes.string,
onChange: PropTypes.func,
onCollapseChange: PropTypes.func,
proxy: PropTypes.object,
};

ProxyPropertyGroup.defaultProps = {
advanced: false,
collapsed: false,

filter: undefined,
onChange: undefined,
onCollapseChange: undefined,
proxy: undefined,
};