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

   1 import React from 'react'
   2 import LeafGroup from './LeafGroup'
   3 import ListStack from './ListStack'
   4 import ExplorerColumn from './ExplorerColumn'
   5 import yang from '../yang/leaf-utils'
   6
   7 export default class extends React.Component {
   8     constructor(props){
   9         super(props);
  10         this.state = {actions: [], properties: null};
  11     }
  12
  13     render() {
  14         try {
  15             const { model, path, isLast, selected, isReadonly, openElement, editElement, columnCloser } = this.props;
  16             const element = model.getElement(path)
  17             const name = element.name;
  18             console.debug(`ContainerColumn: ${name}`);
  19             const data = element.value;
  20             const leaves = [];
  21             const choices = [];
  22             const containers = [];
  23             const lists = [];
  24             const loading = [];
  25             const dataDivided = {
  26                 leaf: leaves,
  27                 leaf_list: leaves,
  28                 container: containers,
  29                 list: lists,
  30                 choice: choices,
  31                 loading: loading
  32             };
  33             const properties = this.state.properties || element.schema.properties;
  34             properties.forEach((property, index) => {
  35                 const list = dataDivided[property.type]
  36                 list && list.push(property)
  37                 !list && console.debug(`ContainerColumn - unhandled property : ${path}/${property.name} - ${property.type}`)
  38             });
  39             choices.forEach(choice => choice.properties.forEach(c => c.properties.forEach(p => leaves.push(p))));
  40             const items = [];
  41             leaves.length && items.push(<LeafGroup key='leaves' model={model} path={path} isReadonly={!isLast} properties={leaves} editElement={editElement} />);
  42             containers.length && items.push(<ListStack key='containers' model={model} path={path} properties={containers} selected={selected} openElement={openElement} />);
  43             lists.length && items.push(<ListStack key='list' model={model} path={path} properties={lists} selected={selected} openElement={openElement} />);
  44             loading.length && items.push(<ListStack key='loading' model={model} path={path} properties={loading} openElement={openElement} />);
  45             const actions = this.state.actions.slice();
  46             !isLast || isReadonly || !leaves.length || leaves.every(p => yang.isKey(p)) || actions.push('update');
  47             function invokeAction(action) {
  48                 editElement(path, action);
  49             }
  50             return (
  51                 <ExplorerColumn title={name || path} isLast={isLast} actions={actions} handler={invokeAction} columnCloser={columnCloser} >
  52                     <div className='container-column' >
  53                         <div>
  54                             {items}
  55                         </div>
  56                     </div>
  57                 </ExplorerColumn>
  58             )
  59         } catch (e) {
  60             console.error("component render", e);
  61         }
  62     }
  63 }