Skip to content

Commit 5e4db95

Browse files
RyanAtPlanGridRyanAtPlanGrid
committed
Started adding redux form and added some styles to make the wizard look a little better.
1 parent 29ac45f commit 5e4db95

File tree

8 files changed

+79
-404
lines changed

8 files changed

+79
-404
lines changed

‎src/modules/wizard/components/ValidatingReduxFormWizardPageContainer.js‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
} from "../wizard.actions";
1313
import { getWizardState, getForm } from "../wizard.selectors";
1414
import { wizardStates } from "../wizard.constants";
15+
import ValidatingWizardPage from "./ValidatingWizardPageContainer";
1516

1617
// Exported for testing
1718
export class ValidatingReduxFormWizardPageContainer extends React.Component {
@@ -22,8 +23,6 @@ export class ValidatingReduxFormWizardPageContainer extends React.Component {
2223
this.tryDestroyForm = this.tryDestroyForm.bind(this);
2324
this.startReduxFormsValidation = this.startReduxFormsValidation.bind(this);
2425
this.transitionStateMachine = this.transitionStateMachine.bind(this);
25-
26-
this.state = { validate: false };
2726
}
2827

2928
componentWillReceiveProps(nextProps) {
@@ -49,7 +48,6 @@ export class ValidatingReduxFormWizardPageContainer extends React.Component {
4948

5049
if (weAreInitializingAndFormInitialChangedAndWeRequireInitialization) {
5150
this.props.initialized();
52-
return;
5351
}
5452
}
5553

@@ -135,15 +133,11 @@ export class ValidatingReduxFormWizardPageContainer extends React.Component {
135133
}
136134

137135
render() {
138-
const pageProps = { ...this.props };
139-
delete pageProps.component;
140-
delete pageProps.formName;
141-
142-
return React.createElement(this.props.component, {
143-
...pageProps,
144-
onInvalidForm: this.onInvalidForm,
145-
validate: this.state.validate
146-
});
136+
return (
137+
<ValidatingWizardPage requiresValidation {...this.props}>
138+
{this.props.children}
139+
</ValidatingWizardPage>
140+
);
147141
}
148142
}
149143

‎src/modules/wizard/components/ValidatingWizardPageContainer.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { Fragment } from "react";
1+
import React from "react";
22
import { connect } from "react-redux";
33
import WizardPage from "./WizardPageContainer";
44
import * as wizardActions from "../wizard.actions";
@@ -27,9 +27,9 @@ class ValidatingWizardPage extends React.Component {
2727

2828
render() {
2929
return (
30-
<Fragment>
31-
<WizardPage requiresValidation>{this.props.children}</WizardPage>
32-
</Fragment>
30+
<WizardPage requiresValidation {...this.props}>
31+
{this.props.children}
32+
</WizardPage>
3333
);
3434
}
3535
}

‎src/modules/wizard/components/Wizard.js‎

Lines changed: 41 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
1-
import React from "react";
1+
import React, { Fragment } from "react";
22
import classNames from "classnames";
3-
import _ from "lodash";
3+
import "./wizard.css";
44

5-
const Step = ({ stepNumber, currentStep }) => {
6-
const isCurrentOrPastStep = stepNumber <= currentStep;
5+
const Step = ({ stepNumber, currentStep, page }) => {
6+
const isCurrentStep = stepNumber === currentStep;
77
return (
8-
<div
9-
className={classNames("fa", {
10-
"fa-circle": isCurrentOrPastStep,
11-
"fa-circle-o": !isCurrentOrPastStep
8+
<span
9+
className={classNames("step", {
10+
active: isCurrentStep
1211
})}
1312
/>
1413
);
@@ -17,7 +16,7 @@ const Step = ({ stepNumber, currentStep }) => {
1716
const NextButton = ({ isLastPage, handleDone, handleNext }) => (
1817
<button
1918
id="wizard-doneNextButton"
20-
className="btn btnDefault"
19+
className="nextBtn"
2120
onClick={e => {
2221
e.target.blur();
2322
return isLastPage ? handleDone() : handleNext();
@@ -32,7 +31,7 @@ const BackButton = ({ currentPage, handleBack }) => (
3231
{!!currentPage && (
3332
<button
3433
id="wizard-backButton"
35-
className="btn btnSecondary"
34+
className="prevBtn"
3635
onClick={e => {
3736
e.target.blur();
3837
handleBack();
@@ -47,40 +46,19 @@ const BackButton = ({ currentPage, handleBack }) => (
4746
const CancelButton = ({ handleCancel }) => (
4847
<button
4948
id="wizard-cancelButton"
50-
className="btn btnSecondary"
49+
className="prevBtn"
5150
onClick={() => handleCancel()}
5251
>
5352
Cancel
5453
</button>
5554
);
5655

57-
const WizardBreadCrub = ({ steps, currentStep }) => (
58-
<div className="stepcntnr">
59-
<div className="stepper">
60-
{_.range(1, 2 * steps.length).map(s => {
61-
if (s % 2 === 0) {
62-
return <div key={`line${s}`} className="line" />;
63-
}
64-
65-
const stepNumber = s === 1 ? s : Math.ceil(s / 2);
66-
return (
67-
<Step
68-
key={stepNumber}
69-
stepNumber={stepNumber}
70-
title={steps[stepNumber - 1].title}
71-
currentStep={currentStep}
72-
/>
73-
);
74-
})}
75-
</div>
76-
<div className="steps">
77-
{steps.map(s => (
78-
<div key={s.title} className="steptext">
79-
{s.title}
80-
</div>
81-
))}
82-
</div>
83-
</div>
56+
const WizardBreadCrub = ({ pages, currentStep }) => (
57+
<ul className="wizard">
58+
{pages.map((page, index) => (
59+
<Step stepNumber={index + 1} currentStep={currentStep} page={page} />
60+
))}
61+
</ul>
8462
);
8563

8664
const Wizard = ({
@@ -92,38 +70,41 @@ const Wizard = ({
9270
handleDone,
9371
isLastPage
9472
}) => (
95-
<div className="mcontentcntnr">
96-
<WizardBreadCrub steps={pages} currentStep={currentPage + 1} />
73+
<div>
74+
<h3>{pages && pages[currentPage] && pages[currentPage].title}</h3>
9775
{currentPage >= 0 &&
9876
React.createElement(pages[currentPage].component, {
9977
...pages[currentPage].props
10078
})}
101-
<div className="action">
102-
{currentPage >= 0 && pages[currentPage].navigationBarComponent ? (
103-
pages[currentPage].navigationBarComponent({
104-
nextButton: (
79+
<WizardBreadCrub pages={pages} currentStep={currentPage + 1} />
80+
<div style={{ overflow: "auto" }}>
81+
<div style={{ float: "right" }}>
82+
{currentPage >= 0 && pages[currentPage].navigationBarComponent ? (
83+
pages[currentPage].navigationBarComponent({
84+
nextButton: (
85+
<NextButton
86+
isLastPage={isLastPage}
87+
handleDone={handleDone}
88+
handleNext={handleNext}
89+
/>
90+
),
91+
backButton: (
92+
<BackButton currentPage={currentPage} handleBack={handleBack} />
93+
),
94+
cancelButton: <CancelButton handleCancel={handleCancel} />
95+
})
96+
) : (
97+
<Fragment>
10598
<NextButton
10699
isLastPage={isLastPage}
107100
handleDone={handleDone}
108101
handleNext={handleNext}
109102
/>
110-
),
111-
backButton: (
112103
<BackButton currentPage={currentPage} handleBack={handleBack} />
113-
),
114-
cancelButton: <CancelButton handleCancel={handleCancel} />
115-
})
116-
) : (
117-
<div>
118-
<NextButton
119-
isLastPage={isLastPage}
120-
handleDone={handleDone}
121-
handleNext={handleNext}
122-
/>
123-
<BackButton currentPage={currentPage} handleBack={handleBack} />
124-
<CancelButton handleCancel={handleCancel} />
125-
</div>
126-
)}
104+
<CancelButton handleCancel={handleCancel} />
105+
</Fragment>
106+
)}
107+
</div>
127108
</div>
128109
</div>
129110
);

‎src/modules/wizard/components/WizardContainer.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, { Component } from "react";
22
import { connect } from "react-redux";
33
import Wizard from "./Wizard";
4-
import "./wizard.css";
54
import { getWizardState, wizardStateChangedTo } from "../wizard.selectors";
65
import {
76
resetWizard,

0 commit comments

Comments
 (0)