skyquake/plugins/composer/src/src/components/DetailsPanelToolbar.jsx

   1
   2 /*
   3  *
   4  *   Copyright 2017 RIFT.IO Inc
   5  *
   6  *   Licensed under the Apache License, Version 2.0 (the "License");
   7  *   you may not use this file except in compliance with the License.
   8  *   You may obtain a copy of the License at
   9  *
  10  *       http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  *   Unless required by applicable law or agreed to in writing, software
  13  *   distributed under the License is distributed on an "AS IS" BASIS,
  14  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15  *   See the License for the specific language governing permissions and
  16  *   limitations under the License.
  17  *
  18  */
  19
  20 import React from 'react'
  21 import Button from './Button'
  22 import DescriptorEditorActions from '../actions/DescriptorEditorActions'
  23
  24 import '../styles/DetailsPanelToolbar.scss'
  25
  26 import imgQuestionMark from '../../../node_modules/open-iconic/svg/question-mark.svg'
  27 import imgExpandAll from '../../../node_modules/open-iconic/svg/caret-right.svg'
  28 import imgCollapseAll from '../../../node_modules/open-iconic/svg/caret-bottom.svg'
  29 import imgCollapseSome from '../../../node_modules/open-iconic/svg/elevator.svg'
  30
  31 export default function (props) {
  32         const { container, showHelp } = props;
  33         function onClickAction(action, event) {
  34                 action({ descriptor: container });
  35         }
  36         return (
  37                 <div className="DetailsPanelToolbar">
  38                         <div className="btn-bar">
  39                                 <div className="btn-group" style={{ display: 'inline-block' }}>
  40                                         <Button type="image" title="Expand all" className="action-onboard-catalog-package"
  41                                                 onClick={onClickAction.bind(null, DescriptorEditorActions.expandAllPanels)} src={imgExpandAll} />
  42                                         <Button type="image" title="Collapse all" className="action-update-catalog-package"
  43                                                 onClick={onClickAction.bind(null, DescriptorEditorActions.collapseAllPanels)} src={imgCollapseAll} />
  44                                         <Button type="image" title="Collapse only data-less panels" className="action-update-catalog-package"
  45                                                 onClick={onClickAction.bind(null, DescriptorEditorActions.showPanelsWithData)} src={imgCollapseSome} />
  46                                 </div>
  47                                 <div className="btn-group" style={{ display: 'inline-block' }}>
  48                                         <Button
  49                                                 type="image"
  50                                                 label={showHelp ? "Hide" : "Show"}
  51                                                 title={showHelp ? "Hide descriptions" : "Show descriptions"}
  52                                                 className="action-onboard-catalog-package"
  53                                                 src={imgQuestionMark}
  54                                                 onClick={onClickAction.bind(null,
  55                                                         showHelp ? DescriptorEditorActions.showHelpForNothing
  56                                                         : DescriptorEditorActions.showHelpForAll)}
  57                                                 />
  58                                 </div>
  59                         </div>
  60                 </div>
  61         );
  62 }
  63