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 _cloneDeep
from 'lodash/cloneDeep'
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() {
54 router
: React
.PropTypes
.object
,
55 userProfile
: React
.PropTypes
.object
59 let bodyComponent
= messages
.detailsWelcome();
60 const selected
= this.props
.containers
.filter(d
=> SelectionManager
.isSelected(d
));
61 const selectedContainer
= selected
[0];
62 if (selectedContainer
) {
63 bodyComponent
= <CatalogItemDetailsEditor container
={selectedContainer
} width
={this.props
.layout
.right
} />;
64 const edit
= _cloneDeep(selectedContainer
.model
);
65 json
= serializers
.serialize(edit
) || edit
;
67 const jsonViewerTitle
= selectedContainer
? selectedContainer
.model
.name
: 'nothing selected';
68 const hasNoCatalogs
= this.props
.hasNoCatalogs
;
70 <div className
="DetailsPanel" data
-resizable
="left" data
-resizable
-handle
-offset
="0 5" style
={{width
: this.props
.layout
.right
}} onClick
={event
=> event
.preventDefault()}>
71 <div className
="DetailsPanelBody">
72 {hasNoCatalogs
? null : bodyComponent
}
74 <PopupWindow show
={this.props
.showJSONViewer
} title
={jsonViewerTitle
}><JSONViewer json
={json
}/></PopupWindow
>
80 export default DetailsPanel
;