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 f91b642adc..49283784f9 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,6 +1,9 @@ import React from "react"; import "antd/dist/antd.css"; -import {PageHeader, Typography, Card, Steps, Button, message} from "antd"; +import {PageHeader, Typography, Card, Steps, Button, message, Row, Col} from "antd"; +import Step1 from "./Step1" +import Step2 from "./Step2" +import Step3 from "./Step3" const Paragraph = Typography; @@ -23,13 +26,13 @@ const Step = Steps.Step; const steps = [{ title: 'First', - content: 'First-content', + content: Step1 }, { title: 'Second', - content: 'Second-content', + content: Step2, }, { title: 'Last', - content: 'Last-content', + content: Step3, }]; @@ -54,7 +57,8 @@ class AddNewApp extends React.Component { render() { - const { current } = this.state; + const {current} = this.state; + const Content = steps[current].content; return (
- -
- - {steps.map(item => )} - -
{steps[current].content}
-
- { - current < steps.length - 1 - && - } - { - current === steps.length - 1 - && - } - { - current > 0 - && ( - - ) - } -
-
-
+ + + +
+ + {steps.map(item => )} + + +
+ { + current < steps.length - 1 + && + } + { + current === steps.length - 1 + && + } + { + current > 0 + && ( + + ) + } +
+
+
+ +
+
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/Step1.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/Step1.js new file mode 100644 index 0000000000..24d7194431 --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/Step1.js @@ -0,0 +1,153 @@ +import React from "react"; +import {Form, Input, Button, Select, Divider, Tag, Tooltip, Icon, Checkbox, Row, Col} from "antd"; +import styles from './Style.less'; + +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 Step1 extends React.Component { + render() { + console.log("hhhoohh"); + return ( +
+
+ + + + + + + + + + + +