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

   1 import React from 'react'
   2 import ListCard from './ListCard'
   3 import ContainerCard from './ContainerCard'
   4 import ChoiceCard from './ChoiceCard'
   5 import LoadingCard from './LoadingCard'
   6
   7 const cardComponent = {
   8     list: ListCard,
   9     container: ContainerCard,
  10     choice: ChoiceCard,
  11     loading: LoadingCard
  12 }
  13 export default class extends React.Component {
  14
  15     render() {
  16         try {
  17             const { model, path, properties, selected, openElement } = this.props;
  18             const element = model.getElement(path);
  19             const container = element.value;
  20             console.debug(`PropertiesStack: ${properties.length}`);
  21             const cards = properties.map((property, index) => {
  22                 const isSelected = selected ? selected === property.name : false;
  23                 const itemPath = path.slice();
  24                 itemPath.push(property.name);
  25                 const props = { model, 'path': itemPath, isSelected, 'openElement': openElement.bind(this, itemPath) };
  26                 return (
  27                     <div key={property.name}>
  28                         {React.createElement(cardComponent[property.type], props)}
  29                     </div>
  30                 )
  31             })
  32             return (
  33                 <div>
  34                     {cards}
  35                 </div>
  36             )
  37         } catch (e) {
  38             console.error("component render", e);
  39         }
  40     }
  41 }