diff options
Diffstat (limited to 'openecomp-ui/src/nfvo-components/table')
3 files changed, 79 insertions, 0 deletions
diff --git a/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx b/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx new file mode 100644 index 0000000000..06cb98bbe8 --- /dev/null +++ b/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx @@ -0,0 +1,29 @@ +import React from 'react'; +import i18n from 'nfvo-utils/i18n/i18n.js'; +import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx'; +import uuid from 'uuid-js'; + +export default class SelectActionTable extends React.Component { + + render() { + let {columns, onAdd, isReadOnlyMode, children, onAddItem} = this.props; + return ( + <div className={`select-action-table-view ${isReadOnlyMode ? 'disabled' : ''}`}> + <div className='select-action-table-controllers'> + {onAdd && onAddItem && <div data-test-id='select-action-table-add' onClick={onAdd}>{onAddItem}</div>} + <SVGIcon name='trash-o' className='dummy-icon' /> + </div> + <div className='select-action-table'> + <div className='select-action-table-headers'> + {columns.map(column => <div key={uuid.create()} className='select-action-table-header'>{i18n(column)}</div>)} + <SVGIcon name='trash-o' className='dummy-icon' /> + <SVGIcon name='trash-o' className='dummy-icon' /> + </div> + <div className='select-action-table-body'> + {children} + </div> + </div> + </div> + ); + } +} diff --git a/openecomp-ui/src/nfvo-components/table/SelectActionTableCell.jsx b/openecomp-ui/src/nfvo-components/table/SelectActionTableCell.jsx new file mode 100644 index 0000000000..2664c8e944 --- /dev/null +++ b/openecomp-ui/src/nfvo-components/table/SelectActionTableCell.jsx @@ -0,0 +1,20 @@ +import React from 'react'; +import SelectInput from 'nfvo-components/input/SelectInput.jsx'; + +const SelectActionTableCell = ({options, selected, disabled, onChange, clearable = true, placeholder}) => { + return ( + <div className='select-action-table-cell'> + <SelectInput + placeholder={placeholder} + type='select' + value={selected} + data-test-id='select-action-table-dropdown' + disabled={disabled} + onChange={option => onChange(option ? option.value : null)} + clearable={clearable} + options={options} /> + </div> + ); +}; + +export default SelectActionTableCell; diff --git a/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx b/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx new file mode 100644 index 0000000000..17d8a17c09 --- /dev/null +++ b/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx @@ -0,0 +1,30 @@ +import React from 'react'; +import SVGIcon from '../icon/SVGIcon.jsx'; +import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js'; +import Tooltip from 'react-bootstrap/lib/Tooltip.js'; + +function tooltip (msg) { + return ( + <Tooltip className='select-action-table-error-tooltip' id='error-tooltip'>{msg}</Tooltip> + ); +}; + +const IconWithOverlay = ({overlayMsg}) => ( + <OverlayTrigger placement='bottom' overlay={tooltip(overlayMsg)}> + <SVGIcon name='error-circle'/> + </OverlayTrigger> +); + +const SelectActionTableRow = ({children, onDelete, hasError, overlayMsg}) => ( + <div className='select-action-table-row-wrapper'> + <div className={`select-action-table-row ${hasError ? 'has-error' : ''}`}> + {children} + </div> + {onDelete ? <SVGIcon name='trash-o' data-test-id='select-action-table-delete' onClick={onDelete} /> : <SVGIcon name='angle-left' className='dummy-icon' />} + {hasError ? overlayMsg ? <IconWithOverlay overlayMsg={overlayMsg}/> : <SVGIcon name='error-circle'/> + : hasError === undefined ? <SVGIcon name='angle-left' className='dummy-icon'/> : <SVGIcon name='check-circle'/>} + + </div> +); + +export default SelectActionTableRow; |