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

   1 import React from 'react'
   2 import ListStack from './ListStack'
   3 import ListEntryCard from './ListEntryCard'
   4 import ExplorerColumn from './ExplorerColumn'
   5 import changeCase from 'change-case'
   6
   7 export default class extends React.Component {
   8
   9     render() {
  10         try {
  11             const { model, path, isLast, selected, openElement, editElement, columnCloser } = this.props;
  12             const element = model.getElement(path);
  13             const name = element.name;
  14             const shortName = changeCase.titleCase(name).split(' ').pop();
  15             const buttonName = `Add ${shortName}`;
  16             console.debug(`ListColumn: ${name}`);
  17             const list = element.value ? Array.isArray(element.value) ? element.value : [element.value] : null;
  18             const cards = list && list.map((item, index) => {
  19                 const itemInfo = element.getItemInfo(item);
  20                 const isSelected = selected ? selected.every((p,i) => p === itemInfo.path[i]) : false;
  21                 const itemPath = path.slice();
  22                 itemPath.push(itemInfo.path);
  23                 const props = { model, 'path': itemPath, 'openElement': openElement.bind(this, itemPath) };
  24                 return (
  25                     <ListEntryCard key={itemInfo.path}
  26                         model={model}
  27                         path={itemPath}
  28                         name={itemInfo.name}
  29                         isSelected={isSelected}
  30                         openElement={openElement.bind(this, itemPath)}
  31                         deleteElement={(path) => editElement(path, 'delete')} />
  32                 )
  33             })
  34             return (
  35                 <ExplorerColumn title={name || path} isLast={isLast} actions={['create']} handler={() => editElement(path, 'create')} columnCloser={columnCloser} >
  36                     <div className='list-column' >
  37                         {cards}
  38                     </div>
  39                 </ExplorerColumn>
  40             )
  41         } catch (e) {
  42             console.error("component render", e);
  43         }
  44     }
  45 }