Socket
Socket
Sign inDemoInstall

react-bootstrap-wizard

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-bootstrap-wizard - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

dist/react-wizard.scss

11

CHANGELOG.md

@@ -0,1 +1,12 @@

## [0.0.5] 2018-08-27
### Bug fixing
- Small changes for this warning: `Can't call setState (or forceUpdate) on an unmounted component.`
- Updated README.md
## Enhancement
- Added support for collecting all states of the steps (Read the README.md for more)
- Added support for scss (it auto-compiles into css)
- Moved the styles from direct import (now you have to import the styles in your project)
- Added new prop inside `steps` for adding an icon to the `stepName`
- Small changes on how the components of the wizard are rendered
## [0.0.4] 2018-02-09

@@ -2,0 +13,0 @@ ### Changes in tab margins

583

dist/index.js

@@ -1,21 +0,21 @@

'use strict';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _reactstrap = require('reactstrap');
var _reactstrap = require("reactstrap");
var _propTypes = require('prop-types');
var _propTypes = require("prop-types");
var _propTypes2 = _interopRequireDefault(_propTypes);
require('./react-wizard.css');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

@@ -30,284 +30,341 @@

var ReactWizard = function (_React$Component) {
_inherits(ReactWizard, _React$Component);
_inherits(ReactWizard, _React$Component);
function ReactWizard(props) {
_classCallCheck(this, ReactWizard);
function ReactWizard(props) {
_classCallCheck(this, ReactWizard);
var _this = _possibleConstructorReturn(this, (ReactWizard.__proto__ || Object.getPrototypeOf(ReactWizard)).call(this, props));
var _this = _possibleConstructorReturn(this, (ReactWizard.__proto__ || Object.getPrototypeOf(ReactWizard)).call(this, props));
var width;
if (_this.props.steps.length === 1) {
width = '100%';
var width;
if (_this.props.steps.length === 1) {
width = "100%";
} else {
if (window.innerWidth < 600) {
if (_this.props.steps.length !== 3) {
width = "50%";
} else {
if (window.innerWidth < 600) {
if (_this.props.steps.length !== 3) {
width = '50%';
} else {
width = 100 / 3 + '%';
}
} else {
if (_this.props.steps.length === 2) {
width = '50%';
} else {
width = 100 / 3 + '%';
}
}
width = 100 / 3 + "%";
}
_this.state = {
currentStep: 0,
color: _this.props.color !== undefined ? _this.props.color : "primary",
nextButton: _this.props.steps.length > 1 ? true : false,
previousButton: false,
finishButton: _this.props.steps.length === 1 ? true : false,
width: width,
movingTabStyle: {
transition: 'transform 0s'
}
};
_this.navigationStepChange = _this.navigationStepChange.bind(_this);
_this.refreshAnimation = _this.refreshAnimation.bind(_this);
_this.previousButtonClick = _this.previousButtonClick.bind(_this);
_this.previousButtonClick = _this.previousButtonClick.bind(_this);
_this.finishButtonClick = _this.finishButtonClick.bind(_this);
return _this;
} else {
if (_this.props.steps.length === 2) {
width = "50%";
} else {
width = 100 / 3 + "%";
}
}
}
_this.state = {
currentStep: 0,
color: _this.props.color !== undefined ? _this.props.color : "primary",
nextButton: _this.props.steps.length > 1 ? true : false,
previousButton: false,
finishButton: _this.props.steps.length === 1 ? true : false,
width: width,
wizardData: _this.props.wizardData !== undefined ? _this.props.wizardData : {},
movingTabStyle: {
transition: "transform 0s"
}
};
_this.navigationStepChange = _this.navigationStepChange.bind(_this);
_this.refreshAnimation = _this.refreshAnimation.bind(_this);
_this.previousButtonClick = _this.previousButtonClick.bind(_this);
_this.previousButtonClick = _this.previousButtonClick.bind(_this);
_this.finishButtonClick = _this.finishButtonClick.bind(_this);
return _this;
}
_createClass(ReactWizard, [{
key: 'componentDidMount',
value: function componentDidMount() {
this.refreshAnimation(0);
window.addEventListener("resize", this.updateWidth.bind(this));
}
}, {
key: 'updateWidth',
value: function updateWidth() {
this.refreshAnimation(this.state.currentStep);
}
}, {
key: 'navigationStepChange',
value: function navigationStepChange(key) {
if (this.props.navSteps) {
var validationState = true;
if (key > this.state.currentStep) {
for (var i = this.state.currentStep; i < key; i++) {
if (this.refs[this.props.steps[i].stepName].isValidated !== undefined && this.refs[this.props.steps[i].stepName].isValidated() === false) {
validationState = false;
break;
}
}
}
if (validationState) {
this.setState({
currentStep: key,
nextButton: this.props.steps.length > key + 1 ? true : false,
previousButton: key > 0 ? true : false,
finishButton: this.props.steps.length === key + 1 ? true : false
});
this.refreshAnimation(key);
}
_createClass(ReactWizard, [{
key: "componentDidMount",
value: function componentDidMount() {
this.refreshAnimation(0);
window.addEventListener("resize", this.updateWidth.bind(this));
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.isCancelled = true;
window.removeEventListener("resize", this.updateWidth);
var id = window.setTimeout(null, 0);
while (id--) {
window.clearTimeout(id);
}
}
}, {
key: "updateWidth",
value: function updateWidth() {
var _this2 = this;
!this.isCancelled && setTimeout(function () {
return _this2.refreshAnimation(_this2.state.currentStep);
}, 200);
}
}, {
key: "navigationStepChange",
value: function navigationStepChange(key) {
if (this.props.navSteps) {
var validationState = true;
if (this.props.validate && key > this.state.currentStep) {
for (var i = this.state.currentStep; i < key; i++) {
if (this.refs[this.props.steps[i].stepName].isValidated !== undefined && this.refs[this.props.steps[i].stepName].isValidated() === false) {
validationState = false;
break;
}
}
}
}, {
key: 'nextButtonClick',
value: function nextButtonClick() {
if (this.props.validate && (this.refs[this.props.steps[this.state.currentStep].stepName].isValidated !== undefined && this.refs[this.props.steps[this.state.currentStep].stepName].isValidated() || this.refs[this.props.steps[this.state.currentStep].stepName].isValidated === undefined) || this.props.validate === undefined) {
var key = this.state.currentStep + 1;
this.setState({
currentStep: key,
nextButton: this.props.steps.length > key + 1 ? true : false,
previousButton: key > 0 ? true : false,
finishButton: this.props.steps.length === key + 1 ? true : false
});
this.refreshAnimation(key);
}
if (validationState) {
this.setState({
wizardData: _extends({}, this.state.wizardData, this.refs[this.props.steps[this.state.currentStep].stepName].state),
currentStep: key,
nextButton: this.props.steps.length > key + 1 ? true : false,
previousButton: key > 0 ? true : false,
finishButton: this.props.steps.length === key + 1 ? true : false
});
this.refreshAnimation(key);
}
}, {
key: 'previousButtonClick',
value: function previousButtonClick() {
var key = this.state.currentStep - 1;
if (key >= 0) {
this.setState({
currentStep: key,
nextButton: this.props.steps.length > key + 1 ? true : false,
previousButton: key > 0 ? true : false,
finishButton: this.props.steps.length === key + 1 ? true : false
});
this.refreshAnimation(key);
}
}
}, {
key: 'finishButtonClick',
value: function finishButtonClick() {
if (this.props.validate && (this.refs[this.props.steps[this.state.currentStep].stepName].isValidated !== undefined && this.refs[this.props.steps[this.state.currentStep].stepName].isValidated() || this.refs[this.props.steps[this.state.currentStep].stepName].isValidated === undefined) && this.props.finishButtonClick !== undefined) {
this.props.finishButtonClick();
}
}
}, {
key: 'refreshAnimation',
value: function refreshAnimation(index) {
var total = this.props.steps.length;
var li_width = 100 / total;
var total_steps = this.props.steps.length;
var move_distance = this.refs.wizard.children[0].offsetWidth / total_steps;
var index_temp = index;
var vertical_level = 0;
}
}
}, {
key: "nextButtonClick",
value: function nextButtonClick() {
if (this.props.validate && (this.refs[this.props.steps[this.state.currentStep].stepName].isValidated !== undefined && this.refs[this.props.steps[this.state.currentStep].stepName].isValidated() || this.refs[this.props.steps[this.state.currentStep].stepName].isValidated === undefined) || this.props.validate === undefined || !this.props.validate) {
var key = this.state.currentStep + 1;
this.setState({
wizardData: _extends({}, this.state.wizardData, this.refs[this.props.steps[this.state.currentStep].stepName].state),
currentStep: key,
nextButton: this.props.steps.length > key + 1 ? true : false,
previousButton: key > 0 ? true : false,
finishButton: this.props.steps.length === key + 1 ? true : false
});
this.refreshAnimation(key);
}
}
}, {
key: "previousButtonClick",
value: function previousButtonClick() {
var key = this.state.currentStep - 1;
if (key >= 0) {
this.setState({
wizardData: _extends({}, this.state.wizardData, this.refs[this.props.steps[this.state.currentStep].stepName].state),
currentStep: key,
nextButton: this.props.steps.length > key + 1 ? true : false,
previousButton: key > 0 ? true : false,
finishButton: this.props.steps.length === key + 1 ? true : false
});
this.refreshAnimation(key);
}
}
}, {
key: "finishButtonClick",
value: function finishButtonClick() {
var _this3 = this;
var mobile_device = window.innerWidth < 600 && total > 3;
if (this.props.validate && (this.refs[this.props.steps[this.state.currentStep].stepName].isValidated !== undefined && this.refs[this.props.steps[this.state.currentStep].stepName].isValidated() || this.refs[this.props.steps[this.state.currentStep].stepName].isValidated === undefined) && this.props.finishButtonClick !== undefined) {
this.setState({
wizardData: _extends({}, this.state.wizardData, this.refs[this.props.steps[this.state.currentStep].stepName].state)
}, function () {
_this3.props.finishButtonClick(_this3.state.wizardData);
});
}
}
}, {
key: "refreshAnimation",
value: function refreshAnimation(index) {
var total = this.props.steps.length;
var li_width = 100 / total;
if (mobile_device) {
move_distance = this.refs.wizard.children[0].offsetWidth / 2;
index_temp = index % 2;
li_width = 50;
}
var total_steps = this.props.steps !== undefined ? this.props.steps.length : 0;
var move_distance = this.refs.wizard !== undefined ? this.refs.navStepsLi.children[0].clientWidth / total_steps : 0;
var index_temp = index;
var vertical_level = 0;
this.setState({ width: li_width + '%' });
var mobile_device = window.innerWidth < 600 && total > 3;
var step_width = move_distance;
move_distance = move_distance * index_temp;
if (mobile_device) {
move_distance = this.refs.navStepsLi.children[0].clientWidth / 2;
index_temp = index % 2;
li_width = 50;
}
var current = index + 1;
this.setState({ width: li_width + "%" });
// if(current === 1 || (mobile_device === true && (index % 2 === 0) )){
// move_distance -= 8;
// } else if(current === total_steps || (mobile_device === true && (index % 2 === 1))){
// move_distance += 8;
// }
var step_width = move_distance;
if (mobile_device) {
vertical_level = parseInt(index / 2);
vertical_level = vertical_level * 38;
}
var movingTabStyle = {
width: step_width,
transform: 'translate3d(' + move_distance + 'px, ' + vertical_level + 'px, 0)',
transition: 'all 0.5s cubic-bezier(0.29, 1.42, 0.79, 1)'
};
this.setState({ movingTabStyle: movingTabStyle });
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
move_distance = move_distance * index_temp;
return _react2.default.createElement(
'div',
{ className: 'wizard-container', ref: 'wizard' },
_react2.default.createElement(
_reactstrap.Card,
{ className: 'card card-wizard active', 'data-color': 'primary' },
this.props.title !== undefined || this.props.subtitle !== undefined ? _react2.default.createElement(
_reactstrap.CardHeader,
{ className: this.props.headerTextCenter !== undefined ? "text-center" : "", 'data-background-color': this.state.color },
this.props.title !== undefined ? _react2.default.createElement(
_reactstrap.CardTitle,
{ tag: 'h3' },
this.props.title
) : null,
this.props.subtitle !== undefined ? _react2.default.createElement(
_reactstrap.CardSubtitle,
null,
this.props.subtitle
) : null,
_react2.default.createElement(
'div',
{ className: 'wizard-navigation' },
_react2.default.createElement(
_reactstrap.Nav,
{ pills: true },
this.props.steps.map(function (prop, key) {
return _react2.default.createElement(
_reactstrap.NavItem,
{ key: key, style: { width: _this2.state.width } },
_react2.default.createElement(
_reactstrap.NavLink,
{
className: key === _this2.state.currentStep ? "active" : "",
onClick: function onClick() {
return _this2.navigationStepChange(key);
}
},
prop.stepName
)
);
})
),
_react2.default.createElement(
'div',
{ className: 'moving-tab', style: this.state.movingTabStyle },
this.props.steps[this.state.currentStep].stepName
)
)
) : null,
if (mobile_device) {
vertical_level = parseInt(index / 2);
vertical_level = vertical_level * 38;
}
var movingTabStyle = {
width: step_width,
transform: "translate3d(" + move_distance + "px, " + vertical_level + "px, 0)",
transition: "all 0.5s cubic-bezier(0.29, 1.42, 0.79, 1)"
};
this.setState({ movingTabStyle: movingTabStyle });
}
}, {
key: "render",
value: function render() {
var _this4 = this;
return _react2.default.createElement(
"div",
{ className: "wizard-container", ref: "wizard" },
_react2.default.createElement(
_reactstrap.Card,
{ className: "card card-wizard active", "data-color": this.state.color },
this.props.title !== undefined || this.props.description !== undefined ? _react2.default.createElement(
_reactstrap.CardHeader,
{
className: this.props.headerTextCenter !== undefined ? "text-center" : "",
"data-background-color": this.state.color
},
this.props.title !== undefined ? _react2.default.createElement(
_reactstrap.CardTitle,
{ tag: "h3" },
this.props.title
) : null,
this.props.description !== undefined ? _react2.default.createElement(
"h3",
{ className: "description" },
this.props.description
) : null,
_react2.default.createElement(
"div",
{ className: "wizard-navigation", ref: "navStepsLi" },
_react2.default.createElement(
_reactstrap.Nav,
{ pills: true },
this.props.steps.map(function (prop, key) {
return _react2.default.createElement(
_reactstrap.NavItem,
{ key: key, style: { width: _this4.state.width } },
_react2.default.createElement(
_reactstrap.CardBody,
null,
_react2.default.createElement(
_reactstrap.TabContent,
{ activeTab: this.state.currentStep },
this.props.steps.map(function (prop, key) {
return _react2.default.createElement(
_reactstrap.TabPane,
{ tabId: key, key: key, className: _this2.state.currentStep === key ? "fade show" : "fade" },
typeof prop.component === 'function' ? _react2.default.createElement(prop.component, { ref: prop.stepName }) : _react2.default.createElement(
'div',
{ ref: prop.stepName },
prop.component
)
);
})
)
),
_react2.default.createElement(
_reactstrap.CardFooter,
null,
_react2.default.createElement(
'div',
{ style: { float: "right" } },
this.state.nextButton ? _react2.default.createElement(
_reactstrap.Button,
{ className: "btn-next" + (this.props.nextButtonClasses !== undefined ? " " + this.props.nextButtonClasses : ""), onClick: function onClick() {
return _this2.nextButtonClick();
} },
this.props.nextButtonText !== undefined ? this.props.nextButtonText : "Next"
) : null,
this.state.finishButton ? _react2.default.createElement(
_reactstrap.Button,
{ className: "btn-finish" + (this.finishButtonClasses !== undefined ? " " + this.props.finishButtonClasses : ""), onClick: function onClick() {
return _this2.finishButtonClick();
} },
this.props.finishButtonText !== undefined ? this.props.finishButtonText : "Finish"
) : null
),
_react2.default.createElement(
'div',
{ style: { float: "left" } },
this.state.previousButton ? _react2.default.createElement(
_reactstrap.Button,
{ className: "btn-previous" + (this.props.previousButtonClasses !== undefined ? " " + this.props.previousButtonClasses : ""), onClick: function onClick() {
return _this2.previousButtonClick();
} },
this.props.previousButtonText !== undefined ? this.props.previousButtonText : "Previous"
) : null
),
_react2.default.createElement('div', { className: 'clearfix' })
_reactstrap.NavLink,
{
className: key === _this4.state.currentStep ? "active" : "",
onClick: function onClick() {
return _this4.navigationStepChange(key);
}
},
prop.stepIcon !== undefined && prop.stepIcon !== "" ? _react2.default.createElement("i", { className: prop.stepIcon }) : null,
prop.stepName
)
)
);
}
}]);
);
})
),
_react2.default.createElement(
"div",
{ className: "moving-tab", style: this.state.movingTabStyle },
this.props.steps[this.state.currentStep].stepIcon !== undefined && this.props.steps[this.state.currentStep].stepIcon !== "" ? _react2.default.createElement("i", { className: this.props.steps[this.state.currentStep].stepIcon }) : null,
this.props.steps[this.state.currentStep].stepName
)
)
) : null,
_react2.default.createElement(
_reactstrap.CardBody,
null,
_react2.default.createElement(
_reactstrap.TabContent,
{ activeTab: this.state.currentStep },
this.props.steps.map(function (prop, key) {
return _react2.default.createElement(
_reactstrap.TabPane,
{
tabId: key,
key: key,
className: _this4.state.currentStep === key ? "fade show active" : "fade"
},
typeof prop.component === "function" ? _react2.default.createElement(prop.component, {
ref: prop.stepName,
wizardData: _this4.state.wizardData
}) : _react2.default.createElement(
"div",
{ ref: prop.stepName },
prop.component
)
);
})
)
),
_react2.default.createElement(
_reactstrap.CardFooter,
null,
_react2.default.createElement(
"div",
{ style: { float: "right" } },
this.state.nextButton ? _react2.default.createElement(
_reactstrap.Button,
{
className: "btn-next" + (this.props.nextButtonClasses !== undefined ? " " + this.props.nextButtonClasses : ""),
onClick: function onClick() {
return _this4.nextButtonClick();
}
},
this.props.nextButtonText !== undefined ? this.props.nextButtonText : "Next"
) : null,
this.state.finishButton ? _react2.default.createElement(
_reactstrap.Button,
{
className: "btn-finish d-inline-block" + (this.props.finishButtonClasses !== undefined ? " " + this.props.finishButtonClasses : ""),
onClick: function onClick() {
return _this4.finishButtonClick();
}
},
this.props.finishButtonText !== undefined ? this.props.finishButtonText : "Finish"
) : null
),
_react2.default.createElement(
"div",
{ style: { float: "left" } },
this.state.previousButton ? _react2.default.createElement(
_reactstrap.Button,
{
className: "btn-previous" + (this.props.previousButtonClasses !== undefined ? " " + this.props.previousButtonClasses : ""),
onClick: function onClick() {
return _this4.previousButtonClick();
}
},
this.props.previousButtonText !== undefined ? this.props.previousButtonText : "Previous"
) : null
),
_react2.default.createElement("div", { className: "clearfix" })
)
)
);
}
}]);
return ReactWizard;
return ReactWizard;
}(_react2.default.Component);
ReactWizard.defaultProps = {
validate: false,
previousButtonTex: "Previous",
finishButtonText: "Finish",
nextButtonText: "Next"
};
ReactWizard.propTypes = {
color: _propTypes2.default.oneOf(['primary', 'green', 'orange', 'red', 'blue']),
previousButtonClasses: _propTypes2.default.string,
finishButtonClasses: _propTypes2.default.string,
nextButtonClasses: _propTypes2.default.string,
headerTextCenter: _propTypes2.default.bool,
steps: _propTypes2.default.arrayOf(_propTypes2.default.object),
navSteps: _propTypes2.default.bool,
validate: _propTypes2.default.bool
color: _propTypes2.default.oneOf(["primary", "green", "orange", "red", "blue"]),
previousButtonClasses: _propTypes2.default.string,
finishButtonClasses: _propTypes2.default.string,
nextButtonClasses: _propTypes2.default.string,
headerTextCenter: _propTypes2.default.bool,
navSteps: _propTypes2.default.bool,
validate: _propTypes2.default.bool,
finishButtonClick: _propTypes2.default.func,
previousButtonTex: _propTypes2.default.node,
finishButtonText: _propTypes2.default.node,
nextButtonText: _propTypes2.default.node,
title: _propTypes2.default.node,
description: _propTypes2.default.node,
steps: _propTypes2.default.arrayOf(_propTypes2.default.shape({
stepName: _propTypes2.default.string.isRequired,
stepIcon: _propTypes2.default.string,
component: _propTypes2.default.func.isRequired
})).isRequired
};
exports.default = ReactWizard;

553

index.js

@@ -1,231 +0,376 @@

import React from 'react';
import React from "react";
import {
Card, CardHeader, CardTitle, CardSubtitle, CardBody, CardFooter, Nav, NavItem, NavLink, TabContent, TabPane, Button
} from 'reactstrap';
import PropTypes from 'prop-types';
import './react-wizard.css';
Card,
CardHeader,
CardTitle,
CardBody,
CardFooter,
Nav,
NavItem,
NavLink,
TabContent,
TabPane,
Button
} from "reactstrap";
import PropTypes from "prop-types";
class ReactWizard extends React.Component{
constructor(props){
super(props);
var width;
if(this.props.steps.length === 1){
width = '100%';
class ReactWizard extends React.Component {
constructor(props) {
super(props);
var width;
if (this.props.steps.length === 1) {
width = "100%";
} else {
if (window.innerWidth < 600) {
if (this.props.steps.length !== 3) {
width = "50%";
} else {
if(window.innerWidth < 600){
if(this.props.steps.length !== 3){
width = '50%';
} else {
width = 100/3 + '%';
}
} else {
if(this.props.steps.length === 2){
width = '50%';
} else {
width = 100/3 + '%';
}
}
width = 100 / 3 + "%";
}
this.state = {
currentStep: 0,
color: this.props.color !== undefined ? this.props.color:"primary",
nextButton: (this.props.steps.length > 1 ? true:false),
previousButton: false,
finishButton: (this.props.steps.length === 1 ? true:false),
width: width,
movingTabStyle: {
transition: 'transform 0s'
}
};
this.navigationStepChange = this.navigationStepChange.bind(this);
this.refreshAnimation = this.refreshAnimation.bind(this);
this.previousButtonClick = this.previousButtonClick.bind(this);
this.previousButtonClick = this.previousButtonClick.bind(this);
this.finishButtonClick = this.finishButtonClick.bind(this);
} else {
if (this.props.steps.length === 2) {
width = "50%";
} else {
width = 100 / 3 + "%";
}
}
}
componentDidMount(){
this.refreshAnimation(0);
window.addEventListener("resize", this.updateWidth.bind(this));
this.state = {
currentStep: 0,
color: this.props.color !== undefined ? this.props.color : "primary",
nextButton: this.props.steps.length > 1 ? true : false,
previousButton: false,
finishButton: this.props.steps.length === 1 ? true : false,
width: width,
wizardData:
this.props.wizardData !== undefined ? this.props.wizardData : {},
movingTabStyle: {
transition: "transform 0s"
}
};
this.navigationStepChange = this.navigationStepChange.bind(this);
this.refreshAnimation = this.refreshAnimation.bind(this);
this.previousButtonClick = this.previousButtonClick.bind(this);
this.previousButtonClick = this.previousButtonClick.bind(this);
this.finishButtonClick = this.finishButtonClick.bind(this);
}
componentDidMount() {
this.refreshAnimation(0);
window.addEventListener("resize", this.updateWidth.bind(this));
}
componentWillUnmount(){
this.isCancelled = true;
window.removeEventListener("resize", this.updateWidth);
var id = window.setTimeout(null, 0);
while (id--) {
window.clearTimeout(id);
}
updateWidth(){
this.refreshAnimation(this.state.currentStep);
}
navigationStepChange(key){
if(this.props.navSteps){
var validationState = true;
if(key > this.state.currentStep){
for(var i = this.state.currentStep ; i < key ; i++){
if( this.refs[this.props.steps[i].stepName].isValidated !== undefined &&
this.refs[this.props.steps[i].stepName].isValidated() === false){
validationState = false;
break;
}
}
}
if(validationState){
this.setState({
currentStep: key,
nextButton: (this.props.steps.length > key + 1 ? true:false),
previousButton: (key > 0 ? true:false),
finishButton: (this.props.steps.length === key + 1 ? true:false)
});
this.refreshAnimation(key);
}
}
updateWidth() {
!this.isCancelled && setTimeout(() => this.refreshAnimation(this.state.currentStep),200);
}
navigationStepChange(key) {
if (this.props.navSteps) {
var validationState = true;
if (this.props.validate && key > this.state.currentStep) {
for (var i = this.state.currentStep; i < key; i++) {
if (
this.refs[this.props.steps[i].stepName].isValidated !== undefined &&
this.refs[this.props.steps[i].stepName].isValidated() === false
) {
validationState = false;
break;
}
}
}
if (validationState) {
this.setState({
wizardData: {
...this.state.wizardData,
...this.refs[this.props.steps[this.state.currentStep].stepName]
.state
},
currentStep: key,
nextButton: this.props.steps.length > key + 1 ? true : false,
previousButton: key > 0 ? true : false,
finishButton: this.props.steps.length === key + 1 ? true : false
});
this.refreshAnimation(key);
}
}
nextButtonClick(){
if(
(this.props.validate &&
((this.refs[this.props.steps[this.state.currentStep].stepName].isValidated !== undefined &&
this.refs[this.props.steps[this.state.currentStep].stepName].isValidated()) ||
this.refs[this.props.steps[this.state.currentStep].stepName].isValidated === undefined)) || this.props.validate === undefined){
var key = this.state.currentStep + 1;
this.setState({
currentStep: key,
nextButton: (this.props.steps.length > key + 1 ? true:false),
previousButton: (key > 0 ? true:false),
finishButton: (this.props.steps.length === key + 1 ? true:false)
});
this.refreshAnimation(key);
}
}
nextButtonClick() {
if (
(this.props.validate &&
((this.refs[this.props.steps[this.state.currentStep].stepName]
.isValidated !== undefined &&
this.refs[
this.props.steps[this.state.currentStep].stepName
].isValidated()) ||
this.refs[this.props.steps[this.state.currentStep].stepName]
.isValidated === undefined)) ||
this.props.validate === undefined || !this.props.validate
) {
var key = this.state.currentStep + 1;
this.setState({
wizardData: {
...this.state.wizardData,
...this.refs[this.props.steps[this.state.currentStep].stepName].state
},
currentStep: key,
nextButton: this.props.steps.length > key + 1 ? true : false,
previousButton: key > 0 ? true : false,
finishButton: this.props.steps.length === key + 1 ? true : false
});
this.refreshAnimation(key);
}
previousButtonClick(){
var key = this.state.currentStep - 1;
if( key >= 0 ){
this.setState({
currentStep: key,
nextButton: (this.props.steps.length > key + 1 ? true:false),
previousButton: (key > 0 ? true:false),
finishButton: (this.props.steps.length === key + 1 ? true:false)
});
this.refreshAnimation(key);
}
}
previousButtonClick() {
var key = this.state.currentStep - 1;
if (key >= 0) {
this.setState({
wizardData: {
...this.state.wizardData,
...this.refs[this.props.steps[this.state.currentStep].stepName].state
},
currentStep: key,
nextButton: this.props.steps.length > key + 1 ? true : false,
previousButton: key > 0 ? true : false,
finishButton: this.props.steps.length === key + 1 ? true : false
});
this.refreshAnimation(key);
}
finishButtonClick(){
if(
this.props.validate &&
((this.refs[this.props.steps[this.state.currentStep].stepName].isValidated !== undefined &&
this.refs[this.props.steps[this.state.currentStep].stepName].isValidated()) ||
this.refs[this.props.steps[this.state.currentStep].stepName].isValidated === undefined) &&
this.props.finishButtonClick !== undefined){
this.props.finishButtonClick();
}
finishButtonClick() {
if (
this.props.validate &&
((this.refs[this.props.steps[this.state.currentStep].stepName]
.isValidated !== undefined &&
this.refs[
this.props.steps[this.state.currentStep].stepName
].isValidated()) ||
this.refs[this.props.steps[this.state.currentStep].stepName]
.isValidated === undefined) &&
this.props.finishButtonClick !== undefined
) {
this.setState(
{
wizardData: {
...this.state.wizardData,
...this.refs[this.props.steps[this.state.currentStep].stepName]
.state
}
},
() => {
this.props.finishButtonClick(this.state.wizardData);
}
);
}
refreshAnimation(index){
var total = this.props.steps.length;
var li_width = 100/total;
var total_steps = this.props.steps.length;
var move_distance = this.refs.wizard.children[0].offsetWidth / total_steps;
var index_temp = index;
var vertical_level = 0;
}
refreshAnimation(index) {
var total = this.props.steps.length;
var li_width = 100 / total;
var mobile_device = window.innerWidth < 600 && total > 3;
var total_steps =
this.props.steps !== undefined ? this.props.steps.length : 0;
var move_distance =
this.refs.wizard !== undefined
? this.refs.navStepsLi.children[0].clientWidth / total_steps
: 0;
var index_temp = index;
var vertical_level = 0;
if(mobile_device){
move_distance = this.refs.wizard.children[0].offsetWidth / 2;
index_temp = index % 2;
li_width = 50;
}
var mobile_device = window.innerWidth < 600 && total > 3;
this.setState({width: li_width + '%'})
if (mobile_device) {
move_distance = this.refs.navStepsLi.children[0].clientWidth / 2;
index_temp = index % 2;
li_width = 50;
}
var step_width = move_distance;
move_distance = move_distance * index_temp;
this.setState({ width: li_width + "%" });
var current = index + 1;
var step_width = move_distance;
// if(current === 1 || (mobile_device === true && (index % 2 === 0) )){
// move_distance -= 8;
// } else if(current === total_steps || (mobile_device === true && (index % 2 === 1))){
// move_distance += 8;
// }
move_distance = move_distance * index_temp;
if(mobile_device){
vertical_level = parseInt(index / 2);
vertical_level = vertical_level * 38;
}
var movingTabStyle = {
width: step_width,
transform: 'translate3d(' + move_distance + 'px, ' + vertical_level + 'px, 0)',
transition: 'all 0.5s cubic-bezier(0.29, 1.42, 0.79, 1)'
}
this.setState({movingTabStyle: movingTabStyle})
if (mobile_device) {
vertical_level = parseInt(index / 2);
vertical_level = vertical_level * 38;
}
render(){
return(
<div className="wizard-container" ref="wizard">
<Card className="card card-wizard active" data-color="primary">
{(this.props.title !== undefined || this.props.subtitle !== undefined) ? (<CardHeader className={this.props.headerTextCenter !== undefined ? "text-center":""} data-background-color={this.state.color}>
{this.props.title !== undefined ? (<CardTitle tag="h3">{this.props.title}</CardTitle>):null}
{this.props.subtitle !== undefined ? (<CardSubtitle>{this.props.subtitle}</CardSubtitle>):null}
<div className="wizard-navigation">
<Nav pills>
{
this.props.steps.map((prop,key) => {
return (
<NavItem key={key} style={{width: this.state.width}}>
<NavLink
className={key === this.state.currentStep ? "active":""}
onClick={() => this.navigationStepChange(key)}
>
{prop.stepName}
</NavLink>
</NavItem>
)
})
}
</Nav>
<div className="moving-tab" style={this.state.movingTabStyle}>{this.props.steps[this.state.currentStep].stepName}</div>
</div></CardHeader>):null}
<CardBody>
<TabContent activeTab={this.state.currentStep}>
{
this.props.steps.map((prop,key) => {
return (
<TabPane tabId={key} key={key} className={this.state.currentStep === key ? "fade show":"fade"}>
{
typeof prop.component === 'function' ? (
<prop.component ref={prop.stepName}/>
):(
<div ref={prop.stepName}>
{prop.component}
</div>
)
}
</TabPane>
);
})
}
</TabContent>
</CardBody>
<CardFooter>
<div style={{float: "right"}}>
{this.state.nextButton ? (<Button className={"btn-next" + (this.props.nextButtonClasses !== undefined ? (" "+this.props.nextButtonClasses):"")} onClick={() => this.nextButtonClick()}>{this.props.nextButtonText !== undefined ? this.props.nextButtonText:"Next"}</Button>):null}
{this.state.finishButton ? (<Button className={"btn-finish" + (this.finishButtonClasses !== undefined ? (" "+this.props.finishButtonClasses):"")} onClick={() => this.finishButtonClick()}>{this.props.finishButtonText !== undefined ? this.props.finishButtonText:"Finish"}</Button>):null}
</div>
<div style={{float: "left"}}>
{this.state.previousButton ? (<Button className={"btn-previous" + (this.props.previousButtonClasses !== undefined ? (" "+this.props.previousButtonClasses):"")} onClick={() => this.previousButtonClick()}>{this.props.previousButtonText !== undefined ? this.props.previousButtonText:"Previous"}</Button>):null}
</div>
<div className="clearfix">
</div>
</CardFooter>
</Card>
var movingTabStyle = {
width: step_width,
transform:
"translate3d(" + move_distance + "px, " + vertical_level + "px, 0)",
transition: "all 0.5s cubic-bezier(0.29, 1.42, 0.79, 1)"
};
this.setState({ movingTabStyle: movingTabStyle });
}
render() {
return (
<div className="wizard-container" ref="wizard">
<Card className="card card-wizard active" data-color={this.state.color}>
{this.props.title !== undefined ||
this.props.description !== undefined ? (
<CardHeader
className={
this.props.headerTextCenter !== undefined ? "text-center" : ""
}
data-background-color={this.state.color}
>
{this.props.title !== undefined ? (
<CardTitle tag="h3">{this.props.title}</CardTitle>
) : null}
{this.props.description !== undefined ? (
<h3 className="description">{this.props.description}</h3>
) : null}
<div className="wizard-navigation" ref="navStepsLi">
<Nav pills>
{this.props.steps.map((prop, key) => {
return (
<NavItem key={key} style={{ width: this.state.width }}>
<NavLink
className={
key === this.state.currentStep ? "active" : ""
}
onClick={() => this.navigationStepChange(key)}
>
{
prop.stepIcon !== undefined && prop.stepIcon !== "" ? (
<i className={prop.stepIcon}/>
):null
}
{prop.stepName}
</NavLink>
</NavItem>
);
})}
</Nav>
<div className="moving-tab" style={this.state.movingTabStyle}>
{
this.props.steps[this.state.currentStep].stepIcon !== undefined &&
this.props.steps[this.state.currentStep].stepIcon !== "" ? (
<i className={this.props.steps[this.state.currentStep].stepIcon}/>
):null
}
{this.props.steps[this.state.currentStep].stepName}
</div>
</div>
</CardHeader>
) : null}
<CardBody>
<TabContent activeTab={this.state.currentStep}>
{this.props.steps.map((prop, key) => {
return (
<TabPane
tabId={key}
key={key}
className={
this.state.currentStep === key
? "fade show active"
: "fade"
}
>
{typeof prop.component === "function" ? (
<prop.component
ref={prop.stepName}
wizardData={this.state.wizardData}
/>
) : (
<div ref={prop.stepName}>{prop.component}</div>
)}
</TabPane>
);
})}
</TabContent>
</CardBody>
<CardFooter>
<div style={{ float: "right" }}>
{this.state.nextButton ? (
<Button
className={
"btn-next" +
(this.props.nextButtonClasses !== undefined
? " " + this.props.nextButtonClasses
: "")
}
onClick={() => this.nextButtonClick()}
>
{this.props.nextButtonText !== undefined
? this.props.nextButtonText
: "Next"}
</Button>
) : null}
{this.state.finishButton ? (
<Button
className={
"btn-finish d-inline-block" +
(this.props.finishButtonClasses !== undefined
? " " + this.props.finishButtonClasses
: "")
}
onClick={() => this.finishButtonClick()}
>
{this.props.finishButtonText !== undefined
? this.props.finishButtonText
: "Finish"}
</Button>
) : null}
</div>
);
}
<div style={{ float: "left" }}>
{this.state.previousButton ? (
<Button
className={
"btn-previous" +
(this.props.previousButtonClasses !== undefined
? " " + this.props.previousButtonClasses
: "")
}
onClick={() => this.previousButtonClick()}
>
{this.props.previousButtonText !== undefined
? this.props.previousButtonText
: "Previous"}
</Button>
) : null}
</div>
<div className="clearfix" />
</CardFooter>
</Card>
</div>
);
}
}
ReactWizard.propTypes = {
color: PropTypes.oneOf(['primary', 'green', 'orange', 'red', 'blue']),
previousButtonClasses: PropTypes.string,
finishButtonClasses: PropTypes.string,
nextButtonClasses: PropTypes.string,
headerTextCenter: PropTypes.bool,
steps: PropTypes.arrayOf(PropTypes.object),
navSteps: PropTypes.bool,
validate: PropTypes.bool
ReactWizard.defaultProps = {
validate: false,
previousButtonTex: "Previous",
finishButtonText: "Finish",
nextButtonText: "Next"
}
ReactWizard.propTypes = {
color: PropTypes.oneOf(["primary", "green", "orange", "red", "blue"]),
previousButtonClasses: PropTypes.string,
finishButtonClasses: PropTypes.string,
nextButtonClasses: PropTypes.string,
headerTextCenter: PropTypes.bool,
navSteps: PropTypes.bool,
validate: PropTypes.bool,
finishButtonClick: PropTypes.func,
previousButtonTex: PropTypes.node,
finishButtonText: PropTypes.node,
nextButtonText: PropTypes.node,
title: PropTypes.node,
description: PropTypes.node,
steps: PropTypes.arrayOf(
PropTypes.shape({
stepName: PropTypes.string.isRequired,
stepIcon: PropTypes.string,
component: PropTypes.func.isRequired
})
).isRequired,
};
export default ReactWizard;

15

package.json
{
"name": "react-bootstrap-wizard",
"version": "0.0.4",
"version": "0.0.5",
"description": "A react component package that allows you to split a complicated flow or a complicated form in multiple steps.",
"main": "dist/index.js",
"files": {
"license": "./LICENSE.md"
},
"scripts": {
"build": "mkdir -p dist && babel index.js -o dist/index.js"
"build-css": "node-sass-chokidar ./dist/react-wizard.scss -o dist/",
"build": "mkdir -p dist && babel index.js -o dist/index.js && npm run build-css"
},

@@ -24,2 +22,3 @@ "babel": {

"devDependencies": {
"node-sass-chokidar": "1.3.3",
"babel-cli": "6.18.0",

@@ -31,4 +30,4 @@ "babel-preset-env": "1.6.1",

"peerDependencies": {
"react": "16.1.0",
"reactstrap": "5.0.0-alpha.4"
"react": "16.x.x",
"reactstrap": "6.x.x"
},

@@ -55,3 +54,3 @@ "keywords": [

"author": "Creative Tim <hello@creative-tim.com> (https://www.creative-tim.com/)",
"license": "SEE LICENSE IN license",
"license": "MIT",
"bugs": {

@@ -58,0 +57,0 @@ "url": "https://github.com/creativetimofficial/react-wizard/issues"

190

README.md

@@ -25,3 +25,34 @@ # React Wizard

## Properties
```
ReactWizard.defaultProps = {
validate: false,
previousButtonTex: "Previous",
finishButtonText: "Finish",
nextButtonText: "Next"
}
ReactWizard.propTypes = {
color: PropTypes.oneOf(["primary", "green", "orange", "red", "blue"]),
previousButtonClasses: PropTypes.string,
finishButtonClasses: PropTypes.string,
nextButtonClasses: PropTypes.string,
headerTextCenter: PropTypes.bool,
navSteps: PropTypes.bool,
validate: PropTypes.bool,
finishButtonClick: PropTypes.func,
previousButtonTex: PropTypes.node,
finishButtonText: PropTypes.node,
nextButtonText: PropTypes.node,
title: PropTypes.node,
description: PropTypes.node,
steps: PropTypes.arrayOf(
PropTypes.shape({
stepName: PropTypes.string.isRequired,
stepIcon: PropTypes.string,
component: PropTypes.func.isRequired
})
).isRequired,
};
```
### *color*

@@ -61,6 +92,13 @@ This prop is used to create the background color of the header and can be one of (***default is the first option***):

### *title*
Use this prop to add a nice title to your wizard.
### *description*
Use this prop to add a nice description / subtitle to your wizard.
### *steps*
This is an array of objects. This objects have two properties:
1. *stepName* -> used for the name that will appear in the nav (**these have to be unique**)
2. *component* -> this is what will be rendered for each *stepName* (**has to be class/function**)
2. *stepIcon* -> used to add an icon alongside the name (**these has to be a string**)
3. *component* -> this is what will be rendered for each *stepName* (**has to be class/function**)

@@ -74,71 +112,109 @@ ### *validate*

### finishButtonClick
This function is called when the user presses the finish button.
See the bellow example to see how to use it.
```
function finishButtonClick(allStepStates)
```
## Example code
```
import React from 'react';
import ReactDOM from 'react-dom';
import ReactWizard from 'react-bootstrap-wizard';
import {
Container, Row, Col
} from 'reactstrap';
import React from "react";
import ReactDOM from "react-dom";
import ReactWizard from "react-bootstrap-wizard";
import { Container, Row, Col } from "reactstrap";
import 'bootstrap/dist/css/bootstrap.css';
import "bootstrap/dist/css/bootstrap.css";
class FirstStep extends React.Component{
render(){
return (
<div>Hey from First</div>
)
}
class FirstStep extends React.Component {
constructor(props) {
super(props);
this.state = {
firstStep: "first step here"
};
}
render() {
return <div>Hey from First</div>;
}
}
class SecondStep extends React.Component{
isValidated(){
// do some validations
// decide if you will
// return true;
// or you will
return false;
}
render(){
return (
<div>Hey from Second</div>
)
}
class SecondStep extends React.Component {
constructor(props) {
super(props);
this.state = {
secondStep: "second step here"
};
}
isValidated() {
// do some validations
// decide if you will
return true;
// or you will
// return false;
}
render() {
return <div>Hey from Second</div>;
}
}
class ThirdStep extends React.Component{
render(){
return (
<div>Hey from Third</div>
)
}
class ThirdStep extends React.Component {
constructor(props) {
super(props);
this.state = {
thirdStep: "third step here"
};
}
render() {
return <div>Hey from Third</div>;
}
}
var steps = [
// this step hasn't got a isValidated() function, so it will be considered to be true
{ stepName: 'First', component: FirstStep },
// this step will be validated to false
{ stepName: 'Second', component: SecondStep },
// this step will never be reachable because of the seconds isValidated() steps function that will always return false
{ stepName: 'Third', component: ThirdStep }
// this step hasn't got a isValidated() function, so it will be considered to be true
{ stepName: "First", component: FirstStep },
// this step will be validated to false
{ stepName: "Second", component: SecondStep },
// this step will never be reachable because of the seconds isValidated() steps function that will always return false
{ stepName: "Third", component: ThirdStep }
];
ReactDOM.render((
<Container fluid style={{marginTop: "15px"}}>
class WizardExample extends React.Component {
finishButtonClick(allStates) {
console.log(allStates);
}
render() {
return (
<Container fluid style={{ marginTop: "15px" }}>
<Row>
<Col xs={12} md={6} className="mr-auto ml-auto">
<ReactWizard
steps={steps}
navSteps
title="react-wizard"
subtitle="This will help you split a complicated flow or a complicated form in multiple steps."
headerTextCenter
validate
color="primary"
/>
</Col>
<Col xs={12} md={6} className="mr-auto ml-auto">
<ReactWizard
steps={steps}
navSteps
title="react-wizard"
description="This will help you split a complicated flow or a complicated form in multiple steps."
headerTextCenter
validate
color="primary"
finishButtonClick={this.finishButtonClick}
/>
</Col>
</Row>
</Container>
), document.getElementById('root'));
</Container>
);
}
}
ReactDOM.render(<WizardExample />, document.getElementById("root"));
```
## Styles
Be sure to include the styles in your project.
You can either include the css:
```
import "react-bootstrap-wizard/dist/react-wizard.css"
```
Or the scss
```
import "react-bootstrap-wizard/dist/react-wizard.scss"
```
## Dependencies

@@ -149,4 +225,4 @@

```
npm install --save reactstrap@5.0.0-alpha.4
npm install --save bootstrap@4.0.0-beta.2
npm install --save reactstrap
npm install --save bootstrap
```

@@ -158,3 +234,3 @@

[LICENSE]: ./LICENSE.md
[version-badge]: https://img.shields.io/badge/version-0.0.4-blue.svg
[version-badge]: https://img.shields.io/badge/version-0.0.5-blue.svg
[license-badge]: https://img.shields.io/badge/license-MIT-blue.svg
dist/react-wizard.css

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc