Merge pull request #1027 from menakaj/application-mgt
Stepper component created and added to application creation modal.merge-requests/7/head
sinthuja
7 years ago
committed by
GitHub
commit
24aef45d2a
@ -0,0 +1,72 @@
|
|||||||
|
/*
|
||||||
|
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||||
|
*
|
||||||
|
* WSO2 Inc. licenses this file to you 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 PropTypes from 'prop-types';
|
||||||
|
import React, {Component} from 'react';
|
||||||
|
import './stepper.css';
|
||||||
|
import {FormattedMessage} from "react-intl";
|
||||||
|
|
||||||
|
class Step extends Component {
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {index, text, active, passed, finalStep, optional} = this.props;
|
||||||
|
|
||||||
|
let activeStep = active ? "stepper-active-index" : "stepper-inactive-index";
|
||||||
|
let activeStepText = active ? " stepper-active-step-text" : "";
|
||||||
|
let stepPassed = index === passed || index < passed ? " stepper-passed-index" : "";
|
||||||
|
let stepPassedText = index === passed || index < passed ? " stepper-passed-step-text" : "";
|
||||||
|
|
||||||
|
let indexClassNames = "step-index " + activeStep + stepPassed;
|
||||||
|
let indexTextClassNames = "step-text " + activeStepText + stepPassedText;
|
||||||
|
|
||||||
|
let stepIndexContent = index === passed || index < passed ? <i className="fw fw-check"></i> : index;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="step col-3">
|
||||||
|
<div className="step-content">
|
||||||
|
<div className={indexClassNames}>
|
||||||
|
<span>
|
||||||
|
{stepIndexContent}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className={indexTextClassNames}>
|
||||||
|
<div>
|
||||||
|
{text}
|
||||||
|
</div>
|
||||||
|
{optional ?
|
||||||
|
<div className="stepper-optional-text">
|
||||||
|
(<FormattedMessage id="Optional" defaultMessage="Optional"/>)
|
||||||
|
</div> : <div/>}
|
||||||
|
</div>
|
||||||
|
{!finalStep ? <i className="stepper-next-arrow fw fw-right-arrow"></i> : <i/>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Step.propTypes = {
|
||||||
|
index: PropTypes.number,
|
||||||
|
text: PropTypes.node,
|
||||||
|
active: PropTypes.bool,
|
||||||
|
passed: PropTypes.number,
|
||||||
|
finalStep: PropTypes.bool,
|
||||||
|
optional: PropTypes.bool
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Step;
|
||||||
@ -0,0 +1,52 @@
|
|||||||
|
/*
|
||||||
|
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||||
|
*
|
||||||
|
* WSO2 Inc. licenses this file to you 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 PropTypes from 'prop-types';
|
||||||
|
import React, {Component} from 'react';
|
||||||
|
import './stepper.css';
|
||||||
|
import Step from "./Step";
|
||||||
|
|
||||||
|
class Stepper extends Component {
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {stepContent, activeStep, previousStep} = this.props;
|
||||||
|
return (
|
||||||
|
<div className="stepper-header row">
|
||||||
|
{stepContent.map(content => {
|
||||||
|
return (
|
||||||
|
<Step
|
||||||
|
passed={previousStep}
|
||||||
|
text={content.text}
|
||||||
|
index={content.index}
|
||||||
|
optional={content.optional}
|
||||||
|
active={activeStep === content.index}
|
||||||
|
finalStep={content.index === stepContent.length}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Stepper.propTypes = {
|
||||||
|
stepContent: PropTypes.array,
|
||||||
|
activeStep: PropTypes.number
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Stepper;
|
||||||
@ -0,0 +1,95 @@
|
|||||||
|
/*
|
||||||
|
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||||
|
*
|
||||||
|
* WSO2 Inc. licenses this file to you 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.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.stepper-header {
|
||||||
|
width: 100%;
|
||||||
|
padding: 24px;
|
||||||
|
height: 72px;
|
||||||
|
color: rgba(0, 0, 0, 0.38);
|
||||||
|
box-shadow: 1px 0px 1px 0 rgba(0, 0, 0, 0.2), 0 0px 20px 0 rgba(0, 0, 0, 0.19);
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step {
|
||||||
|
display: table-cell;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-content {
|
||||||
|
display: flex;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.step-index {
|
||||||
|
padding-top: 3px;
|
||||||
|
height: 24px;
|
||||||
|
width: 24px;
|
||||||
|
font-size: 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
text-align: center;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stepper-inactive-index {
|
||||||
|
background-color: rgba(0, 0, 0, 0.38);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stepper-active-index {
|
||||||
|
background-color: #0a6eff;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stepper-passed-index {
|
||||||
|
background-color: #0a6eff;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-text {
|
||||||
|
/*padding-top: 3px;*/
|
||||||
|
font-family: Roboto-Regular;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inactive-text {
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stepper-active-step-text {
|
||||||
|
font-family: Roboto-Medium;
|
||||||
|
font-size: 14px;
|
||||||
|
color: rgba(0, 0, 0, 0.87);
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stepper-passed-step-text {
|
||||||
|
font-family: Roboto-Medium;
|
||||||
|
color: rgba(0, 0, 0, 0.87);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stepper-next-arrow {
|
||||||
|
padding-top: 3px;
|
||||||
|
margin-left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stepper-optional-text {
|
||||||
|
font-family: Roboto-Regular;
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(0, 0, 0, 0.39)
|
||||||
|
}
|
||||||
Loading…
Reference in new issue