diff options
Diffstat (limited to 'sdc-workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/DataRow.jsx')
-rw-r--r-- | sdc-workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/DataRow.jsx | 87 |
1 files changed, 87 insertions, 0 deletions
diff --git a/sdc-workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/DataRow.jsx b/sdc-workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/DataRow.jsx new file mode 100644 index 00000000..70103f87 --- /dev/null +++ b/sdc-workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/DataRow.jsx @@ -0,0 +1,87 @@ +/* +* Copyright © 2018 European Support Limited +* +* 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. +*/ + +import React from 'react'; +import PropTypes from 'prop-types'; + +import { Input, Checkbox, SVGIcon } from 'onap-ui-react'; + +const DataRow = ({ + data: { name, type, mandatory }, + types, + nameErrorMessage, + dataTestId, + handleNameChange, + handleNameBlur, + handleTypeChange, + handleMandatoryChange, + handleRemoveClick +}) => ( + <div className="input-output__tr"> + <div className="input-output__td"> + <Input + errorMessage={nameErrorMessage} + data-test-id={`${dataTestId}-name`} + onChange={handleNameChange} + onBlur={handleNameBlur} + type="text" + value={name} + /> + </div> + <div className="input-output__td"> + <select + className="input-output-select" + value={type} + data-test-id={`${dataTestId}-select`} + onChange={handleTypeChange}> + {types.map((type, i) => ( + <option key={`type.${i}`} value={type.toUpperCase()}> + {type} + </option> + ))} + </select> + </div> + <div className="input-output__td input-output__td--unflex"> + <Checkbox + value="myVal" + data-test-id={`${dataTestId}-mandatory`} + onChange={handleMandatoryChange} + checked={mandatory} + /> + </div> + <div className="input-output__td input-output__td--unflex input-output__td--icon"> + <SVGIcon + name="trashO" + data-test-id={`${dataTestId}-delete`} + onClick={handleRemoveClick} + /> + </div> + </div> +); + +DataRow.propTypes = { + data: PropTypes.object, + types: PropTypes.array, + nameErrorMessage: PropTypes.string, + dataTestId: PropTypes.string, + handleNameChange: PropTypes.func, + handleNameBlur: PropTypes.func, + handleTypeChange: PropTypes.func, + handleMandatoryChange: PropTypes.func, + handleRemoveClick: PropTypes.func +}; + +export default DataRow; |