Merge pull request #2 from maduraPradeep/master

cleanup

.gitignore

@@ -5,3 +5,4 @@
 /node_modules
 /umd
 npm-debug.log*
+.vscode/*

README.md

@@ -14,4 +14,7 @@ Original project is based on reactstrap. This is the react bootstrap version wit
 
 ## notes
 
-react-bootstrap does not include in the final package. Need to install it separately when using
+react-bootstrap does not include in the final package. Need to install it separately when using
+
+## updates
+* Removed wizard data since it is erroneous if click on previous button and had to set state. Use state in the root component and pass properties as required to the steps with stepProps (manage state in the root component)

demo/src/index.js

@@ -1,21 +1,29 @@
-import React, { useImperativeHandle } from 'react'
+import React, { useImperativeHandle, useState } from 'react'
 import { render } from 'react-dom'
 
 import ReactWizard from '../../src';
 import './fonts/fontawesome/all.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
 
-const Comp1 = (props, ref) => {
-  console.debug("props:",props);
+const Comp1 = ({setState,count}, ref) => {
+
   useImperativeHandle(ref, () => ({
     isValidated() {
 
 
       return true;
+    },
+    async onClickNext() {
+
     }
   }
   ))
-  return <div ref={ref}>Component 1</div>
+
+  return <div ref={ref}>Component 1<br/>
+
+  Count: {count}
+  <button onClick={() => setState({count:count+1})}>Update count</button>
+  </div>
 }
 const Comp2 = ({ }, ref) => {
   return <div ref={ref}>Component 2</div>
@@ -24,18 +32,24 @@ const Comp3 = ({ }, ref) => {
   return <div ref={ref}>Component 3</div>
 }
 
+
+const Demo = () => {
+const [state,setState]=useState({count:0});
+
 const steps = [
   {
     stepName: "Select Files",
-    stepIcon: "fas fa-home",
+    // stepIcon: "fas fa-home",
     component: Comp1,
     stepProps: {
-      formData:{test:"test"}
+      formData: { test: "test" },
+      count:state.count,
+      setState
     }
   },
   {
     stepName: "Select Jobs",
-    stepIcon: "fas fa-surprise",
+    // stepIcon: "fas fa-surprise",
     component: Comp2,
     // stepProps: {
     //     updateFormData,
@@ -48,7 +62,7 @@ const steps = [
   },
   {
     stepName: "Map Headers",
-    stepIcon: "fas fa-swimmer",
+    // stepIcon: "fas fa-swimmer",
     component: Comp3,
     // stepProps: {
     //     updateFormData,
@@ -60,7 +74,7 @@ const steps = [
   },
   {
     stepName: "Map Headers",
-    stepIcon: "fas fa-swimmer",
+    // stepIcon: "fas fa-swimmer",
     component: Comp1,
     // stepProps: {
     //     updateFormData,
@@ -72,21 +86,21 @@ const steps = [
   },
 
 ];
-const Demo = () => {
 
   return <div className="container">
 
     <ReactWizard
-    color="success"
+      color="primary"
       steps={steps}
       navSteps={false}
       validate
       title="Upload Data"
       headerTextCenter
+
       // finishButtonClasses="btn-wd btn-info"
       // nextButtonClasses="btn-wd btn-info"
       // previousButtonClasses="btn-wd"
-  
+
       finishButtonClick={(data) => {
         // setAlertData({ show: true, type: "success", title: "Success", body: 'The calculation job will run in the background, It may take a few minutes to complete this process, once complete upon approval of the admins this data will be merged into the existing customer data.', action: () => props.history.push("/") });
       }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactbootstrap-wizard-rb",
-  "version": "1.0.0",
+  "version": "1.0.10",
   "description": "reactbootstrap-wizard React component",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -11,7 +11,7 @@
     "umd"
   ],
   "scripts": {
-    "build": "nwb build-react-component",
+    "build": "nwb build-react-component --copy-files",
     "clean": "nwb clean-module && nwb clean-demo",
     "prepublishOnly": "npm run build",
     "start": "nwb serve-react-demo",
@@ -21,14 +21,14 @@
   },
   "dependencies": {},
   "peerDependencies": {
-    "react": "16.x",
-    "classnames": "2.x.x"
+    "react": "16.x||17.x",
+    "classnames": "2.x.x",
+    "react-bootstrap": "^1.x"
   },
   "devDependencies": {
     "bootstrap": "^4.3.1",
     "nwb": "0.23.x",
-    "react": "^16.8.6",
-    "react-bootstrap": "^1.0.0-beta.10",
+    "react": "^16.8.6", 
     "react-dom": "^16.8.6"
   },
   "author": "",

src/index.css

@@ -1,8 +1,40 @@
+.wizard-container .step-container {
+  font-size: 1rem;
+}
+.wizard-container .progress-container .progress {
+  height: 1px;
+  background-color: rgba(112, 112, 112, 0.66);
+  margin-top: 4px;
+}
+
+.wizard-container .step-container .step-progress .nav-link {
+  /* border-radius: 50% !important; */
+  color: #fff;
+  border: 1px solid;
+  width: 2.25rem;
+  height: 2.25rem;
+  padding: 0;
+}
+.wizard-container .step-container .step-progress .nav-link.active {
+  border: none;
+}
+.wizard-container .step-container .step-progress .nav-link span {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+.wizard-container .step-container .step-progress .step-name {
+  padding-left: 0.875rem;
+}
+
+
+/* 
 .wizard-container .progress-wrapper {
   top: 45%;
   position: absolute;
   width: 75%;
-  left:10%;
+  left: 15%;
 }
 .wizard-container .progress-wrapper .progress {
   height: 5px;
@@ -11,15 +43,24 @@
 .wizard-container .nav-item a {
   display: inline-block;
   background-color: #e9ecef;
-  color:black;
+  color: black;
 }
 
 .wizard-container .nav-item a.checked,
 .wizard-container .nav-item a.active {
   /* background-color: #007bff; */
-  color: #fff;
+  /* color: #fff;
 }
 
 .wizard-container .nav {
   position: relative;
 }
+
+.wizard-container .nav-item .rounded {
+  border-radius: 5rem !important;
+}
+
+.wizard-container .nav-item .step-name::after {
+  color: red;
+  content: ">";
+} */