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

   1 /*
   2  *
   3  *   Copyright 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 import React from 'react';
  19 import changeCase from 'change-case'
  20 import Button from '../Button'
  21 import { TextIcon } from 'react-open-iconic-svg';
  22 import { CaretRightIcon } from 'react-open-iconic-svg';
  23 import { CaretBottomIcon } from 'react-open-iconic-svg';
  24 import PanelHeader from './PanelHeader'
  25
  26
  27 import '../../styles/EditDescriptorModelProperties.scss'
  28
  29 export default function PropertyPanel(props) {
  30         const {
  31                 title, children, info, action, helpText,
  32                 readOnly, showOpened, onChangeOpenState } = props;
  33         const isExpandCollapseButtonNeeded = !!onChangeOpenState;
  34         const isOpened = isExpandCollapseButtonNeeded ? showOpened : true;
  35
  36         const val = (isOpened && children && (Array.isArray(children) ? children.length : true)) ?
  37                 <val className="property-value">
  38                         {children}
  39                 </val>
  40                 : null;
  41         return (
  42                 <div className={'property'}>
  43                         <PanelHeader name={title} info={info} helpText={helpText}
  44                                 showOpened={showOpened} onChangeOpenState={onChangeOpenState}
  45                                 action={readOnly ? null : action} />
  46                         {val}
  47                 </div>
  48         );
  49 }