CollapsiblePropertyGroup

Source

index.js

import React from 'react';
import PropTypes from 'prop-types';

import style from 'PVWStyle/ReactProperties/CollapsiblePropertyGroup.mcss';
import factory from '../PropertyFactory';

export default function render(props) {
  const isCollapsed = !props.prop.data.value[0];
  const id = props.prop.data.id;

  return (
    <div
      className={props.show(props.viewData) ? style.container : style.hidden}
    >
      <div
        className={style.toolbar}
        onClick={() =>
          props.onChange({
            collapseType: 'ProxyEditorPropertyWidget',
            id,
            value: !isCollapsed,
          })
        }
      >
        <i className={isCollapsed ? style.collapsedIcon : style.expandedIcon} />
        <span className={style.title}>{props.prop.ui.label}</span>
      </div>
      <div className={isCollapsed ? style.hidden : style.content}>
        {props.prop.children.map((p) =>
          factory(p, props.viewData, props.onChange)
        )}
      </div>
    </div>
  );
}

render.propTypes = {
  show: PropTypes.func.isRequired,
  prop: PropTypes.object.isRequired,
  viewData: PropTypes.object.isRequired,
  onChange: PropTypes.func.isRequired,
};