skyquake/plugins/admin/src/components/LeafGroup.jsx

   1 import React from 'react'
   2 import ColumnCard from './ColumnCard'
   3 import yang from '../yang/leaf-utils.js'
   4
   5 export default class extends React.Component {
   6
   7     render() {
   8         try {
   9             const { model, path, isReadonly, properties, editElement } = this.props;
  10             const element = model.getElement(path);
  11             console.debug(`LeafGroup: ${element.name}`);
  12             const container = element.value;
  13             const leaves = properties.reduce((leaves, property, index) => {
  14                 const itemPath = path.slice();
  15                 itemPath.push(property.name);
  16                 const props = { model, 'path': itemPath };
  17                 let value = (container && container[property.name]);
  18                 let valueIsSet = yang.isValueSet(property, value);
  19                 if (!valueIsSet) {
  20                     value = yang.getDefaultValue(property);
  21                     valueIsSet = yang.isValueSet(property, value);
  22                 }
  23                 if (valueIsSet) {
  24                     value = yang.getDisplayValue(property, value);
  25                 }
  26                 valueIsSet && leaves.push(
  27                     <div key={property.name} className='leaf-group-leaf' style={{ maxWidth: '400px' }} >
  28                         <div style={{ fontSize: 'small', color: 'gray' }} >{`${property.name}`}</div>
  29                         <div style={{paddingLeft: '4px'}} >{value}</div>
  30                     </div>
  31                 );
  32                 return leaves;
  33             }, [])
  34             return (
  35                 <ColumnCard path={path}>
  36                     <div className='leaf-group'>
  37                         {leaves}
  38                     </div>
  39                 </ColumnCard>
  40             )
  41         } catch (e) {
  42             console.error("component render", e);
  43         }
  44     }
  45 }