diff options
Diffstat (limited to 'openecomp-ui/src/nfvo-components/listEditor')
4 files changed, 209 insertions, 130 deletions
diff --git a/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx b/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx index 60c559a3d1..359af9d3b8 100644 --- a/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx +++ b/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx @@ -19,50 +19,78 @@ import classnames from 'classnames'; import i18n from 'nfvo-utils/i18n/i18n.js'; import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; import store from 'sdc-app/AppStore.js'; -import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; +import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js'; class ListEditorItem extends React.Component { - static propTypes = { - onSelect: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]), - onDelete: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]), - onEdit: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]), - children: PropTypes.node, - isReadOnlyMode: PropTypes.bool - }; + static propTypes = { + onSelect: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]), + onDelete: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]), + onEdit: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]), + children: PropTypes.node, + isReadOnlyMode: PropTypes.bool + }; - render() { - let {onDelete, onSelect, onEdit, children, isReadOnlyMode} = this.props; - let isAbilityToDelete = isReadOnlyMode === undefined ? true : !isReadOnlyMode; - return ( - <div className={classnames('list-editor-item-view', {'selectable': Boolean(onSelect)})} data-test-id='list-editor-item'> - <div className='list-editor-item-view-content' onClick={onSelect}> - {children} - </div> - {(onEdit || onDelete) && <div className='list-editor-item-view-controller'> - {onEdit && <SVGIcon name='sliders' onClick={() => this.onClickedItem(onEdit)}/>} - {onDelete && isAbilityToDelete && <SVGIcon name='trashO' data-test-id='delete-list-item' onClick={() => this.onClickedItem(onDelete)}/>} - </div>} - </div> - ); - } + render() { + let { + onDelete, + onSelect, + onEdit, + children, + isReadOnlyMode + } = this.props; + let isAbilityToDelete = + isReadOnlyMode === undefined ? true : !isReadOnlyMode; + return ( + <div + className={classnames('list-editor-item-view', { + selectable: Boolean(onSelect) + })} + data-test-id="list-editor-item"> + <div + className="list-editor-item-view-content" + onClick={onSelect}> + {children} + </div> + {(onEdit || onDelete) && ( + <div className="list-editor-item-view-controller"> + {onEdit && ( + <SVGIcon + name="sliders" + onClick={() => this.onClickedItem(onEdit)} + /> + )} + {onDelete && + isAbilityToDelete && ( + <SVGIcon + name="trashO" + data-test-id="delete-list-item" + onClick={() => this.onClickedItem(onDelete)} + /> + )} + </div> + )} + </div> + ); + } - onClickedItem(callBackFunc) { - if(typeof callBackFunc === 'function') { - let {isCheckedOut} = this.props; - if (isCheckedOut === false) { - store.dispatch({ - type: modalActionTypes.GLOBAL_MODAL_WARNING, - data: { - title: i18n('Error'), - msg: i18n('This item is checkedin/submitted, Click Check Out to continue') - } - }); - } - else { - callBackFunc(); - } - } - } + onClickedItem(callBackFunc) { + if (typeof callBackFunc === 'function') { + let { isCheckedOut } = this.props; + if (isCheckedOut === false) { + store.dispatch({ + type: modalActionTypes.GLOBAL_MODAL_WARNING, + data: { + title: i18n('Error'), + msg: i18n( + 'This item is checkedin/submitted, Click Check Out to continue' + ) + } + }); + } else { + callBackFunc(); + } + } + } } export default ListEditorItem; diff --git a/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemViewField.jsx b/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemViewField.jsx index 839f9a504a..509ea176a5 100644 --- a/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemViewField.jsx +++ b/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemViewField.jsx @@ -15,10 +15,8 @@ */ import React from 'react'; -export const ListEditorItemViewField = ({children}) => ( - <div className='list-editor-item-view-field'> - {children} - </div> +export const ListEditorItemViewField = ({ children }) => ( + <div className="list-editor-item-view-field">{children}</div> ); export default ListEditorItemViewField; diff --git a/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx b/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx index 16823b7dc5..f71372ce1a 100644 --- a/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx +++ b/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx @@ -19,69 +19,107 @@ import Button from 'sdc-ui/lib/react/Button.js'; import classnames from 'classnames'; import ExpandableInput from 'nfvo-components/input/ExpandableInput.jsx'; -const ListEditorHeader = ({onAdd, isReadOnlyMode, title, plusButtonTitle}) => { - return ( - <div className='list-editor-view-header'> - {title && <div className='list-editor-view-title'>{title}</div>} - <div> - { onAdd && - <Button data-test-id='add-button' iconName='plusThin' btnType='link' onClick={onAdd} disabled={isReadOnlyMode === true}>{plusButtonTitle}</Button> - } - </div> - </div> - ); +const ListEditorHeader = ({ + onAdd, + isReadOnlyMode, + title, + plusButtonTitle +}) => { + return ( + <div className="list-editor-view-header"> + {title && <div className="list-editor-view-title">{title}</div>} + <div> + {onAdd && ( + <Button + data-test-id="add-button" + iconName="plusThin" + btnType="link" + onClick={onAdd} + disabled={isReadOnlyMode === true}> + {plusButtonTitle} + </Button> + )} + </div> + </div> + ); }; -const ListEditorScroller = ({children, twoColumns}) => { - return ( - <div className='list-editor-view-list-scroller'> - <div className={classnames('list-editor-view-list', {'two-columns': twoColumns})}> - {children} - </div> - </div> - ); +const ListEditorScroller = ({ children, twoColumns }) => { + return ( + <div className="list-editor-view-list-scroller"> + <div + className={classnames('list-editor-view-list', { + 'two-columns': twoColumns + })}> + {children} + </div> + </div> + ); }; -const FilterWrapper = ({onFilter, filterValue}) => { - return ( - <div className='expandble-search-wrapper'> - <ExpandableInput - onChange={onFilter} - iconType='search' - value={filterValue}/> - </div> - ); +const FilterWrapper = ({ onFilter, filterValue }) => { + return ( + <div className="expandble-search-wrapper"> + <ExpandableInput + onChange={onFilter} + iconType="search" + value={filterValue} + /> + </div> + ); }; class ListEditorView extends React.Component { + static defaultProps = { + className: '', + twoColumns: false + }; - static defaultProps = { - className: '', - twoColumns: false - }; - - static propTypes = { - title: PropTypes.string, - plusButtonTitle: PropTypes.string, - children: PropTypes.node, - filterValue: PropTypes.string, - onFilter: PropTypes.func, - className: PropTypes.string, - isReadOnlyMode: PropTypes.bool, - placeholder: PropTypes.string, - twoColumns: PropTypes.bool - }; - - render() { - let {title, plusButtonTitle, onAdd, children, onFilter, className, isReadOnlyMode, twoColumns, filterValue} = this.props; - return ( - <div className={classnames('list-editor-view', className)}> - <ListEditorHeader onAdd={onAdd} isReadOnlyMode={isReadOnlyMode} plusButtonTitle={plusButtonTitle} title={title}/> - {onFilter && (children.length || filterValue) && <FilterWrapper onFilter={onFilter} filterValue={filterValue}/>} - <ListEditorScroller children={children} twoColumns={twoColumns}/> - </div> - ); - } + static propTypes = { + title: PropTypes.string, + plusButtonTitle: PropTypes.string, + children: PropTypes.node, + filterValue: PropTypes.string, + onFilter: PropTypes.func, + className: PropTypes.string, + isReadOnlyMode: PropTypes.bool, + placeholder: PropTypes.string, + twoColumns: PropTypes.bool + }; + render() { + let { + title, + plusButtonTitle, + onAdd, + children, + onFilter, + className, + isReadOnlyMode, + twoColumns, + filterValue + } = this.props; + return ( + <div className={classnames('list-editor-view', className)}> + <ListEditorHeader + onAdd={onAdd} + isReadOnlyMode={isReadOnlyMode} + plusButtonTitle={plusButtonTitle} + title={title} + /> + {onFilter && + (children.length || filterValue) && ( + <FilterWrapper + onFilter={onFilter} + filterValue={filterValue} + /> + )} + <ListEditorScroller + children={children} + twoColumns={twoColumns} + /> + </div> + ); + } } export default ListEditorView; diff --git a/openecomp-ui/src/nfvo-components/listEditor/listEditor.stories.js b/openecomp-ui/src/nfvo-components/listEditor/listEditor.stories.js index 81125c84ba..67258c956d 100644 --- a/openecomp-ui/src/nfvo-components/listEditor/listEditor.stories.js +++ b/openecomp-ui/src/nfvo-components/listEditor/listEditor.stories.js @@ -1,27 +1,25 @@ import React from 'react'; -import {storiesOf, action} from '@kadira/storybook'; +import { storiesOf, action } from '@kadira/storybook'; import ListEditorView from './ListEditorView.jsx'; import ListEditorItemView from './ListEditorItemView.jsx'; import ListEditorItemField from './ListEditorItemViewField.jsx'; -import {text, number} from '@kadira/storybook-addon-knobs'; -import {withKnobs} from '@kadira/storybook-addon-knobs'; +import { text, number } from '@kadira/storybook-addon-knobs'; +import { withKnobs } from '@kadira/storybook-addon-knobs'; -function makeChildren({onEdit = false, onDelete = false} = {}) { - return ( - [...Array(number('Items', 2)).keys()].map(index => ( - <ListEditorItemView - key={index} - onEdit={onEdit ? onEdit : undefined} - onDelete={onDelete ? onDelete : undefined}> - <ListEditorItemField> - <div>{text('field 1', 'Lorum Ipsum')}</div> - </ListEditorItemField> - <ListEditorItemField> - <div>{text('field 2', 'Lorum Ipsum')}</div> - </ListEditorItemField> - </ListEditorItemView>) - ) - ); +function makeChildren({ onEdit = false, onDelete = false } = {}) { + return [...Array(number('Items', 2)).keys()].map(index => ( + <ListEditorItemView + key={index} + onEdit={onEdit ? onEdit : undefined} + onDelete={onDelete ? onDelete : undefined}> + <ListEditorItemField> + <div>{text('field 1', 'Lorum Ipsum')}</div> + </ListEditorItemField> + <ListEditorItemField> + <div>{text('field 2', 'Lorum Ipsum')}</div> + </ListEditorItemField> + </ListEditorItemView> + )); } const stories = storiesOf('ListEditor', module); @@ -29,32 +27,49 @@ stories.addDecorator(withKnobs); stories .add('regular', () => ( - <ListEditorView title='List Editor'> - {makeChildren()} - </ListEditorView> + <ListEditorView title="List Editor">{makeChildren()}</ListEditorView> )) .add('two columns', () => ( - <ListEditorView title='List Editor' twoColumns> + <ListEditorView title="List Editor" twoColumns> {makeChildren()} </ListEditorView> )) .add('with add', () => ( - <ListEditorView title='List Editor' onAdd={action('onAdd')} plusButtonTitle='Add' twoColumns> - {makeChildren()} + <ListEditorView + title="List Editor" + onAdd={action('onAdd')} + plusButtonTitle="Add" + twoColumns> + {makeChildren()} </ListEditorView> )) .add('with delete', () => ( - <ListEditorView title='List Editor' onAdd={action('onAdd')} plusButtonTitle='Add' twoColumns> - {makeChildren({onDelete: action('onDelete')})} + <ListEditorView + title="List Editor" + onAdd={action('onAdd')} + plusButtonTitle="Add" + twoColumns> + {makeChildren({ onDelete: action('onDelete') })} </ListEditorView> )) .add('with edit', () => ( - <ListEditorView title='List Editor' onAdd={action('onAdd')} plusButtonTitle='Add' twoColumns> - {makeChildren({onEdit: action('onEdit')})} + <ListEditorView + title="List Editor" + onAdd={action('onAdd')} + plusButtonTitle="Add" + twoColumns> + {makeChildren({ onEdit: action('onEdit') })} </ListEditorView> )) .add('with edit and delete', () => ( - <ListEditorView title='List Editor' onAdd={action('onAdd')} plusButtonTitle='Add' twoColumns> - {makeChildren({onDelete: action('onDelete'), onEdit: action('onEdit')})} + <ListEditorView + title="List Editor" + onAdd={action('onAdd')} + plusButtonTitle="Add" + twoColumns> + {makeChildren({ + onDelete: action('onDelete'), + onEdit: action('onEdit') + })} </ListEditorView> )); |