Skip to content

Commit

Permalink
Merge pull request #69 from JonasGossens/feature/updateSetupWizard
Browse files Browse the repository at this point in the history 
Fixed Bugs in SetupWizard
  • Loading branch information
@michael-braun
michael-braun authored Mar 21, 2018
2 parents 3903357 + 1bffde6 commit c350413
Show file tree
Hide file tree
Showing 8 changed files with 77 additions and 51 deletions.
8 changes: 5 additions & 3 deletions examples/react-chayns-setupwizard/Example.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,9 +67,11 @@ export default class Example extends React.Component {
}

return (
<h1>
Ready
</h1>
<ExampleContainer headline="SetupWizard">
<h1>
Ready
</h1>
</ExampleContainer>
);
}
}
17 changes: 11 additions & 6 deletions examples/react-chayns-setupwizard/setup/Step1.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,16 @@ export default class Step1 extends React.Component {
stepComplete: PropTypes.func
};

nextStep = this.context.nextStep;
stepComplete = this.context.stepComplete;
constructor(props, context) {
super(props, context);
this.next = this.next.bind(this);
}

next = () => {
const { stepComplete, nextStep } = this.context;
stepComplete(true);
nextStep();
}

render() {
return (
Expand All @@ -28,10 +36,7 @@ export default class Step1 extends React.Component {
>
<div
className="button"
onClick={() => {
this.stepComplete(true);
this.nextStep();
}}
onClick={this.next}
>
Next
</div>
Expand Down
25 changes: 14 additions & 11 deletions examples/react-chayns-setupwizard/setup/Step2.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,19 @@ export default class Step2 extends React.Component {
stepComplete: PropTypes.func
};

nextStep = this.context.nextStep;
stepComplete = this.context.stepComplete;
constructor(props, context) {
super(props, context);
this.next = this.next.bind(this);
}

next() {
const { stepComplete, nextStep } = this.context;
stepComplete(true);
nextStep();
}

render() {
const { nextStep } = this.context;
return (
<div className="accordion__content">
<p>
Expand All @@ -26,10 +35,7 @@ export default class Step2 extends React.Component {
type="radio"
className="radio"
id="radio1"
onClick={() => {
this.stepComplete(true);
this.nextStep();
}}
onClick={this.next}
/>
<label htmlFor="radio1">Option 1</label>
</div>
Expand All @@ -39,10 +45,7 @@ export default class Step2 extends React.Component {
type="radio"
className="radio"
id="radio2"
onClick={() => {
this.stepComplete(true);
this.nextStep();
}}
onClick={this.next}
/>
<label htmlFor="radio2">Option 2</label>
</div>
Expand All @@ -55,7 +58,7 @@ export default class Step2 extends React.Component {
>
<div
className="button"
onClick={this.context.nextStep}
onClick={nextStep}
>
Next
</div>
Expand Down
17 changes: 12 additions & 5 deletions examples/react-chayns-setupwizard/setup/Step3.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,18 @@ export default class Step3 extends React.Component {
previousStep: PropTypes.func
};

stepComplete = this.context.stepComplete;
constructor(props, context) {
super(props, context);
this.inputOnKeyUp = this.inputOnKeyUp.bind(this);
}

inputOnKeyUp(response) {
const { stepComplete } = this.context;
stepComplete(response.target.value !== '');
}

render() {
const { nextStep } = this.context;
return (
<div className="accordion__content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
Expand All @@ -26,9 +35,7 @@ export default class Step3 extends React.Component {
id="requiredInput"
required
style={{ marginBottom: '10px' }}
onKeyUp={(response) => {
this.stepComplete(response.target.value !== '');
}}
onKeyUp={this.inputOnKeyUp}
/>
<label>Input</label>
</div>
Expand All @@ -41,7 +48,7 @@ export default class Step3 extends React.Component {
>
<div
className="button"
onClick={this.context.nextStep}
onClick={nextStep}
>
Next
</div>
Expand Down
16 changes: 13 additions & 3 deletions examples/react-chayns-setupwizard/setup/Step4.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,20 @@ import PropTypes from 'prop-types';
export default class Step4 extends React.Component {
static contextTypes = {
nextStep: PropTypes.func,
stepComplete: PropTypes.func,
toStep: PropTypes.func
stepComplete: PropTypes.func
};

constructor(props, context) {
super(props, context);
this.next = this.next.bind(this);
}

next() {
const { stepComplete, nextStep } = this.context;
stepComplete(true);
nextStep();
}

render() {
return (
<div className="accordion__content">
Expand All @@ -26,7 +36,7 @@ export default class Step4 extends React.Component {
>
<div
className="button"
onClick={this.context.nextStep}
onClick={this.next}
>
Finish
</div>
Expand Down
7 changes: 2 additions & 5 deletions migrating.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,9 +117,6 @@ static contextTypes = {
stepComplete: PropTypes.func
};

nextStep = this.context.nextStep;
stepComplete = this.context.stepComplete;

render() {
return (
<div className="accordion__content">
Expand All @@ -128,8 +125,8 @@ render() {
<div
className="button"
onClick={() => {
this.stepComplete(true);
this.nextStep();
this.context.stepComplete(true);
this.context.nextStep();
}}
>
Next
Expand Down
26 changes: 13 additions & 13 deletions src/react-chayns-setupwizard/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ The **Setup Wizard** is usually used for setting up Tapps for the first time. My
For rendering the **Setup Wizard** you have to import *SetupWizard* as well as *SetupWizardItem*.

```jsx
import {SetupWizard, SetupWizardItem} from 'chayns-components/react-chayns-setupwizard';
import {SetupWizardItem, SetupWizard} from 'chayns-components';
import 'chayns-components/lib/react-chayns-setupwizard/index.css';
```

Expand Down Expand Up @@ -54,22 +54,22 @@ The components got the following properties:
**SetupWizard**:


| Property | Description | Type | Default | Required |
|--------------|----------------------------------------------------------------------------|--------|---------|----------|
| ready | callback-function which gets called right after the last step finished | func | | true |
| notComplete | callback-function which gets called after calling nextStep but step is required and not complete | func | | true |
| style | style of the wizard-root-element | object | | false |
| contentStyle | style of the wizard-content-element | object | | false |
| title | title of the wizard | object | | false |
| description | description of the wizard | object | | false |
| Property | Description | Type | Required |
|--------------|----------------------------------------------------------------------------|--------|----------|
| ready | callback-function which gets called right after the last step finished | func | true |
| notComplete | callback-function which gets called after calling nextStep but step is required and not complete | func | true |
| style | style of the wizard-root-element | object | false |
| contentStyle | style of the wizard-content-element | object | false |
| title | title of the wizard | object | false |
| description | description of the wizard | object | false |

**SetupWizardItem**:


| Property | Description | Type | Default | Required |
|------------|----------------------------------------------------------------------------------------------------|--------|---------|----------|
| title | The title which is shown in the menu over the **Setup-Wizard**-Content | string | | true |
| required | Sets the **Setup-Wizard-Item** required or not required | string | | false |
| Property | Description | Type | Required |
|------------|----------------------------------------------------------------------------------------------------|--------|----------|
| title | The title which is shown in the menu over the **Setup-Wizard**-Content | string | true |
| required | Sets the **Setup-Wizard-Item** required or not required | string | false |


## Example ##
Expand Down
12 changes: 7 additions & 5 deletions src/react-chayns-setupwizard/component/SetupWizard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,16 +109,18 @@ export default class SetupWizard extends React.Component {

ready() {
const { ready } = this.props;

if(ready) {
ready();
const { completedSteps, currentStep } = this.state;
if(!(this.props.children[currentStep].props.required === true && completedSteps.indexOf(currentStep) === -1)) {
if(ready) {
ready();
}
} else {
this.notComplete();
}
}


notComplete() {
const { notComplete } = this.props;

if(notComplete) {
notComplete();
}
Expand Down

0 comments on commit c350413

Please sign in to comment.