skyquake/plugins/composer/src/src/components/model/PropertyNavigate.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
  23 import Select from 'react-select';
  24 import 'react-select/dist/react-select.css'
  25
  26 import DescriptorEditorActions from '../../actions/DescriptorEditorActions'
  27 import CatalogItemsActions from '../../actions/CatalogItemsActions'
  28 import Property from '../../libraries/model/DescriptorModelMetaProperty'
  29 import SelectionManager from '../../libraries/SelectionManager'
  30
  31 export default function PropertyNavigate(props) {
  32     const { container, idMaker, options, placeholder, style } = props;
  33
  34     function gotoProperty(descriptor, path) {
  35         DescriptorEditorActions.expandPanel({ descriptor, path });
  36         function bringIntoViewAndFocusOnProperty() {
  37             const element = document.getElementById(idMaker(container, path));
  38             if (element) {
  39                 element.scrollIntoView();
  40                 setTimeout(function () {
  41                     element.focus()
  42                 }, 100);
  43             }
  44         }
  45         setTimeout(bringIntoViewAndFocusOnProperty, 100);
  46     }
  47     function onClickSelectItem(item) {
  48         // we don't support traversing into an 'external' model (e.g. vlds)
  49         // if we did then we would need to know when and then invoke something like
  50         // CatalogItemsActions.catalogItemMetaDataChanged(root.model);
  51         // and then after a delay fire the gotoProperty step
  52         gotoProperty(container, item.value);
  53     }
  54     return (
  55         <div style={style} >
  56             <Select
  57                 placeholder={placeholder}
  58                 options={options}
  59                 onChange={onClickSelectItem}
  60                 scrollMenuIntoView={true}
  61             />
  62         </div>
  63     );
  64 }