diff options
Diffstat (limited to 'src/generic-components/componentManager')
3 files changed, 0 insertions, 445 deletions
diff --git a/src/generic-components/componentManager/ComponentManager.jsx b/src/generic-components/componentManager/ComponentManager.jsx deleted file mode 100644 index 7b94279..0000000 --- a/src/generic-components/componentManager/ComponentManager.jsx +++ /dev/null @@ -1,306 +0,0 @@ -/* - * ============LICENSE_START======================================================= - * org.onap.aai - * ================================================================================ - * Copyright © 2017-2018 AT&T Intellectual Property. All rights reserved. - * Copyright © 2017-2018 Amdocs - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ -import React, {Component} from 'react'; - -import ComponentManagerContainer from - 'generic-components/componentManager/ComponentManagerContainer.jsx'; -import { - MIN_PANEL_WIDTH, - MIN_PANEL_HEIGHT, - MAX_PANEL_WIDTH, - EDIT_ICON, - LAYOUT_STATIC -} from 'generic-components/componentManager/ComponentManagerConstants.js'; - -var widthProvider = require('react-grid-layout').WidthProvider; -var ReactGridLayout = require('react-grid-layout'); -ReactGridLayout = widthProvider(ReactGridLayout); - -export default class ComponentManager extends Component { - constructor(props) { - super(props); - - if (props.layoutType === LAYOUT_STATIC && - Object.keys(props.layoutFormat).length > 0) { - this.state = { - layout: props.layoutFormat.layout, - panels: props.layoutFormat.panels, - containers: props.layoutFormat.containers - }; - } else { - this.state = { - layout: [], - panels: [], - containers: [] - }; - } - this.onLayoutChange = this.onLayoutChange.bind(this); - } - - createContainer( - containerId, xPos, yPos, width, height, staticLayout = false) { - if (staticLayout) { - return { - id: containerId, - properties: { - x: xPos, - y: yPos, - w: width, - h: height, - isDraggable: false, - isResizable: false - } - }; - } else { - return { - id: containerId, - properties: { - x: xPos, - y: yPos, - w: width, - h: height, - minW: MIN_PANEL_WIDTH, - maxW: MAX_PANEL_WIDTH, - minH: MIN_PANEL_HEIGHT - } - }; - } - } - - createPanel(id, title, panelSource, panelProps, actionList) { - return { - id: id, - title: title, - source: panelSource, - props: panelProps, - actions: actionList - }; - } - - addNewComponent(compProps, containingContainerId) { - let containerId = containingContainerId; - let actionsList = []; - - if (typeof containerId === 'undefined' || containerId === null) { - // new component being added isn't associated with a - // container yet, so create one - containerId = 'container:' + (new Date).getTime(); - let updatedContainerProps = []; - this.state.containers.forEach((containerProps) => { - updatedContainerProps.push(containerProps); - }); - updatedContainerProps.push( - this.createContainer(containerId, 0, Infinity, 12, 2)); - this.setState({containers: updatedContainerProps}); - - actionsList = [ - { - type: 'close', id: containerId, callback: () => { - this.removeExistingComponent(containerId); - } - } - ]; - } else { - // we are updating a static container with a new panel, add the edit - // action so it can be updated moving forward - actionsList = [ - { - type: 'custom', - id: containingContainerId, - icon: EDIT_ICON, - callback: () => { - this.props.addPanelCallback(containingContainerId); - } - } - ]; - } - - let updatedPanelProps = []; - this.state.panels.forEach((panelProp) => { - if (panelProp.id !== containingContainerId) { - // add all existing panels except the one with a - // matching id (this is an edit scenario, will replace - // with new panel below - updatedPanelProps.push(panelProp); - } - }); - updatedPanelProps.push( - this.createPanel( - containerId, - compProps.title, - compProps.visualizationSource, - compProps.visualizationProps, - actionsList)); - this.setState({panels: updatedPanelProps}); - } - - removeExistingComponent(id) { - let updatedPanelProps = this.state.panels.filter((panelProp) => { - return id !== panelProp.id; - }); - this.setState({panels: updatedPanelProps}); - - let updatedContainerProps = this.state.containers.filter( - (containerProp) => { - return id !== containerProp.id; - }); - this.setState({containers: updatedContainerProps}); - } - - getLayoutProperties() { - return { - layout: this.state.layout, - containers: this.state.containers, - panels: this.state.panels - }; - } - - setLayoutProperties(layoutProperties) { - this.setState({ - layout: layoutProperties.layout, - containers: layoutProperties.containers, - panels: layoutProperties.panels - }); - } - - fetchMatchingPanel(containerId) { - let actionsList = []; - let matchingPanel = ( - <ComponentManagerContainer - showHeader={this.props.showHeader} - showTitle={this.props.showTitle} - showBorder={this.props.showBorder} - actions={actionsList}> - {'Please select a visualization'} - </ComponentManagerContainer> - ); - this.state.panels.forEach((panel) => { - if (panel.id === containerId) { - let GeneratedComponent = - this.props.componentPropertiesProvider[panel.source].component.class; - let visProps = panel.props; - matchingPanel = ( - <ComponentManagerContainer - showHeader={this.props.showHeader} - showTitle={this.props.showTitle} - showBorder={this.props.showBorder} - title={panel.title} - actions={panel.actions}> - <GeneratedComponent {...visProps}/> - </ComponentManagerContainer> - ); - } - }); - return matchingPanel; - } - - preparedContainers() { - let containersToRender = []; - - this.state.containers.forEach((container) => { - let matchingPanel = this.fetchMatchingPanel(container.id); - - containersToRender.push(<div key={container.id} - data-grid={{...(container.properties)}}> - {matchingPanel} - </div>); - }); - - return containersToRender; - } - - onLayoutChange(layout) { - this.setState({layout: layout}); - this.props.onLayoutChange(layout); - } - - buildStaticContainers(layoutFormat) { - let staticContainers = []; - let nextRowIndex = 0; - - layoutFormat.layout.forEach((row) => { - let nextColIndex = 0; - let currentTallestContainer = 0; - - row.forEach((col) => { - let containerId = 'container:' + nextRowIndex + '-' + nextColIndex; - let xPos = nextColIndex; - let yPos = nextRowIndex; - let width = 12 * col.width; - let height = col.height; - - nextColIndex = nextColIndex + width; - currentTallestContainer = Math.max(currentTallestContainer, col.height); - - staticContainers.push( - this.createContainer( - containerId, - xPos, - yPos, - width, - height, - true - ) - ); - }); - - nextRowIndex = currentTallestContainer; - }); - - return staticContainers; - } - - componentWillReceiveProps(nextProps) { - if (nextProps.layoutFormat !== this.props.layoutFormat) { - // layout format being passed in are the containers, panels and layout - // for the newly view - this.setState({ - layout: nextProps.layoutFormat.layout, - panels: nextProps.layoutFormat.panels, - containers: nextProps.layoutFormat.containers - }); - } - } - - render() { - - return ( - <div className='component-manager'> - <ReactGridLayout - className='content app-components' - {...this.props} - onLayoutChange={this.onLayoutChange} - layout={this.state.layout}> - {this.preparedContainers()} - </ReactGridLayout> - </div> - ); - } -} -ComponentManager.defaultProps = { - cols: 12, - rewHeight: 100, - onLayoutChange: function () { - }, - showHeader: true, - showTitle: true, - showBorder: true -}; diff --git a/src/generic-components/componentManager/ComponentManagerConstants.js b/src/generic-components/componentManager/ComponentManagerConstants.js deleted file mode 100644 index c2f5616..0000000 --- a/src/generic-components/componentManager/ComponentManagerConstants.js +++ /dev/null @@ -1,28 +0,0 @@ -/* - * ============LICENSE_START======================================================= - * org.onap.aai - * ================================================================================ - * Copyright © 2017-2018 AT&T Intellectual Property. All rights reserved. - * Copyright © 2017-2018 Amdocs - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ -export const MIN_PANEL_WIDTH = 1; -export const MIN_PANEL_HEIGHT = 1; -export const MAX_PANEL_WIDTH = 12; - -export const EDIT_ICON = 'fa-pencil'; - -export const LAYOUT_STATIC = 'static'; -export const LAYOUT_DYNAMIC = 'dynamic'; diff --git a/src/generic-components/componentManager/ComponentManagerContainer.jsx b/src/generic-components/componentManager/ComponentManagerContainer.jsx deleted file mode 100644 index cd51d37..0000000 --- a/src/generic-components/componentManager/ComponentManagerContainer.jsx +++ /dev/null @@ -1,111 +0,0 @@ -/* - * ============LICENSE_START======================================================= - * org.onap.aai - * ================================================================================ - * Copyright © 2017-2018 AT&T Intellectual Property. All rights reserved. - * Copyright © 2017-2018 Amdocs - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ -import React, {Component} from 'react'; -import { PropTypes } from 'prop-types'; -import ButtonGroup from 'react-bootstrap/lib/ButtonGroup'; -import Button from 'react-bootstrap/lib/Button'; - -import i18n from 'utils/i18n/i18n'; - -const ICON_CLASS_CLOSE = 'fa fa-times'; - -export default class ComponentManagerContainer extends Component { - - static propType = { - id: PropTypes.string, - title: PropTypes.string, - actions: PropTypes.array, - showHeader: PropTypes.bool, - showTitle: PropTypes.bool, - showBorder: PropTypes.bool, - }; - - static defaultProps = { - id: '', - title: 'Some Title', - actions: [], - showHeader: true, - showTitle: true, - showBorder: true - }; - - constructor(props) { - super(props); - } - - render() { - let { - title, - actions, - children, - showHeader, - showTitle, - showBorder - } = this.props; - let buttons = []; - actions.forEach((action) => { - switch (action.type) { - case 'close': - buttons.push( - <Button - type='submit' - key={action.type} - className='close-button' - onClick={ () => { - action.callback(action.id); - }}> - <i className={ICON_CLASS_CLOSE} aria-hidden='true'></i> - </Button> - ); - break; - case 'custom': - buttons.push( - <Button - type='submit' - key={action.type} - className='custom-button' - onClick={action.callback}> - <i className={'fa ' + action.icon} aria-hidden='true'></i> - </Button> - ); - break; - } - }); - - let containerClass = showBorder - ? 'titled-container titled-container-boarders' - : 'titled-container'; - let headerClass = showHeader ? 'titled-container-header' : 'hidden'; - let titleClass = showTitle ? '' : 'hidden'; - - return ( - <div className={containerClass}> - <ButtonGroup>{buttons}</ButtonGroup> - <div className={headerClass}> - <span className={titleClass}>{i18n(title)}</span> - </div> - <div className='contents'> - {children} - </div> - </div> - ); - } -} |