skyquake/plugins/composer/src/src/components/model/PropertyCrumb.jsx

   1 /*
   2  *
   3  *   Copyright 2016-2017 RIFT.IO Inc
   4  *
   5  *   Licensed under the Apache License, Version 2.0 (the "License");
   6  *   you may not use this file except in compliance with the License.
   7  *   You may obtain a copy of the License at
   8  *
   9  *       http://www.apache.org/licenses/LICENSE-2.0
  10  *
  11  *   Unless required by applicable law or agreed to in writing, software
  12  *   distributed under the License is distributed on an "AS IS" BASIS,
  13  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14  *   See the License for the specific language governing permissions and
  15  *   limitations under the License.
  16  *
  17  */
  18
  19 import React from 'react'
  20 import _keys from 'lodash/keys'
  21 import _isObject from 'lodash/isObject'
  22 import DescriptorEditorActions from '../../actions/DescriptorEditorActions'
  23 import SelectionManager from '../../libraries/SelectionManager'
  24
  25 import '../../styles/EditDescriptorModelProperties.scss'
  26
  27 function makeId(container, path) {
  28     let idParts = [path];
  29     idParts.push(container.uid);
  30     while (container.parent) {
  31         container = container.parent;
  32         idParts.push(container.uid);
  33     }
  34     return idParts.reverse().join(':');
  35 }
  36
  37 export default function PropertyCrumb(props) {
  38     const { container, errors } = props;
  39     const errorPaths = _keys(errors).reduce((a, k) => {
  40         function pieceOfPath(obj, key) {
  41             if (_isObject(obj[key])) {
  42                 const node = obj[key];
  43                 return _keys(node).reduce((a,k) => {
  44                     const paths = pieceOfPath(node, k).map(e => key + '.' + e)
  45                     return a.concat(paths);
  46                 }, []);
  47             } else {
  48                 return obj[key] ? [key] : [];
  49             }
  50         }
  51         const paths = pieceOfPath(errors, k);
  52         return a.concat(paths);
  53     }, []);
  54
  55     function onClickSelectItem(path, event) {
  56         event.preventDefault();
  57         // DescriptorEditorActions.setFocus({descriptor: container, path})
  58         const element = document.getElementById(makeId(container, path));
  59         element && element.scrollIntoView() && setTimeout(() => element.focus(), 1);
  60
  61         // const root = node.getRoot();
  62         // if (SelectionManager.select(node)) {
  63         //     DescriptorEditorActions.catalogItemMetaDataChanged(root.model);
  64         // }
  65     }
  66     const crumbs = errorPaths.map((path, i) =>
  67         <span key={path}>
  68             <a href="#select-item" onClick={onClickSelectItem.bind(null, path)}>{path}</a>
  69         </span>
  70     );
  71     return (
  72         <div style={{ margin: '3px 6px' }} >
  73             <h3>{crumbs}</h3>
  74         </div>
  75     );
  76 }