4 * Copyright 2016 RIFT.IO Inc
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
10 * http://www.apache.org/licenses/LICENSE-2.0
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.
21 import _
from 'lodash'
22 import React
from 'react';
23 import PureRenderMixin
from 'react-addons-pure-render-mixin'
24 import messages
from './messages'
25 import serializers
from '../libraries/model/DescriptorModelSerializer'
26 import JSONViewer
from 'widgets/JSONViewer/JSONViewer';
27 import PopupWindow
from './PopupWindow'
28 import CatalogItemDetailsEditor
from './CatalogItemDetailsEditor'
29 import SelectionManager
from '../libraries/SelectionManager'
31 import '../styles/DetailsPanel.scss'
33 const DetailsPanel
= React
.createClass({
34 mixins
: [PureRenderMixin
, SelectionManager
.reactPauseResumeMixin
],
44 componentWillMount() {
48 componentDidUpdate() {
49 SelectionManager
.refreshOutline();
51 componentWillUnmount() {
55 let bodyComponent
= messages
.detailsWelcome();
56 const selected
= this.props
.containers
.filter(d
=> SelectionManager
.isSelected(d
));
57 const selectedContainer
= selected
[0];
58 if (selectedContainer
) {
59 bodyComponent
= <CatalogItemDetailsEditor container
={selectedContainer
} width
={this.props
.layout
.right
} />;
60 const edit
= _
.cloneDeep(selectedContainer
.model
);
61 json
= serializers
.serialize(edit
) || edit
;
63 const jsonViewerTitle
= selectedContainer
? selectedContainer
.model
.name
: 'nothing selected';
64 const hasNoCatalogs
= this.props
.hasNoCatalogs
;
66 <div className
="DetailsPanel" data
-resizable
="left" data
-resizable
-handle
-offset
="0 5" style
={{width
: this.props
.layout
.right
}} onClick
={event
=> event
.preventDefault()}>
67 <div className
="DetailsPanelBody">
68 {hasNoCatalogs
? null : bodyComponent
}
70 <PopupWindow show
={this.props
.showJSONViewer
} title
={jsonViewerTitle
}><JSONViewer json
={json
}/></PopupWindow
>
76 export default DetailsPanel
;