diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js index 49283784f9..dd5c5343f4 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js @@ -1,12 +1,30 @@ import React from "react"; import "antd/dist/antd.css"; -import {PageHeader, Typography, Card, Steps, Button, message, Row, Col} from "antd"; +import { + PageHeader, + Typography, + Card, + Steps, + Button, + message, + Row, + Col, + Tag, + Tooltip, + Input, + Icon, + Select, + Checkbox, + Form, + Upload +} from "antd"; import Step1 from "./Step1" import Step2 from "./Step2" import Step3 from "./Step3" +import styles from "./Style.less" const Paragraph = Typography; - +const Dragger = Upload.Dragger; const routes = [ { path: 'index', @@ -36,6 +54,94 @@ const steps = [{ }]; +const {Option} = Select; +const {TextArea} = Input; +const InputGroup = Input.Group; + +const formItemLayout = { + labelCol: { + span: 8, + }, + wrapperCol: { + span: 16, + }, +}; + +class EditableTagGroup extends React.Component { + state = { + tags: [], + inputVisible: false, + inputValue: '', + }; + + handleClose = (removedTag) => { + const tags = this.state.tags.filter(tag => tag !== removedTag); + console.log(tags); + this.setState({tags}); + } + + showInput = () => { + this.setState({inputVisible: true}, () => this.input.focus()); + } + + handleInputChange = (e) => { + this.setState({inputValue: e.target.value}); + } + + handleInputConfirm = () => { + const {inputValue} = this.state; + let {tags} = this.state; + if (inputValue && tags.indexOf(inputValue) === -1) { + tags = [...tags, inputValue]; + } + console.log(tags); + this.setState({ + tags, + inputVisible: false, + inputValue: '', + }); + } + + saveInputRef = input => this.input = input + + render() { + const {tags, inputVisible, inputValue} = this.state; + return ( +
+ {tags.map((tag, index) => { + const isLongTag = tag.length > 20; + const tagElem = ( + this.handleClose(tag)}> + {isLongTag ? `${tag.slice(0, 20)}...` : tag} + + ); + return isLongTag ? {tagElem} : tagElem; + })} + {inputVisible && ( + + )} + {!inputVisible && ( + + New Tag + + )} +
+ ); + } +} + class AddNewApp extends React.Component { constructor(props) { @@ -75,33 +181,67 @@ class AddNewApp extends React.Component {
- + -
- - {steps.map(item => )} - - -
- { - current < steps.length - 1 - && - } - { - current === steps.length - 1 - && - } - { - current > 0 - && ( - - ) - } -
-
+ + +
+
+ + + + + + + + + + + +