Skip to content

Instantly share code, notes, and snippets.

@tarang9211
Created December 7, 2018 10:04
Show Gist options
  • Save tarang9211/70eb6db2e1deae645f71716f7c8eef45 to your computer and use it in GitHub Desktop.
Save tarang9211/70eb6db2e1deae645f71716f7c8eef45 to your computer and use it in GitHub Desktop.
import React, { Component } from 'react';
import styles from './step-list.module.scss';
class StepList extends Component {
steps = [
{ key: 0, title: 'Overview' },
{ key: 1, title: 'Dates' },
{ key: 2, title: 'Add Seminars' },
{ key: 3, title: 'Upload an image' },
{ key: 4, title: 'Preview' }
];
constructor(props) {
super(props);
this.state = {
stepState: this.getStepState(this.props.currentCount)
};
}
componentWillReceiveProps = nextProps => {
if (nextProps.currentCount !== this.props.currentCount) {
this.setState(() => ({
stepState: this.getStepState(nextProps.currentCount)
}));
}
};
getStepState = currentStep => {
const styles = [];
const totalLength = this.steps.length;
for (let i = 0; i < totalLength; i++) {
if (i === currentStep) styles.push('step-current');
if (i < currentStep) styles.push('step-complete');
if (i > currentStep) styles.push('step-incomplete');
}
return {
currentStep,
styles
};
};
getClassName = currentStep => {
return `steps-${this.state.stepState.styles[currentStep]}`;
};
render() {
return (
<ul className={styles.steps}>
{this.steps.map(({ key, title }, index) => {
return (
<li key={key} className={this.getClassName(index)}>
{title}
</li>
);
})}
</ul>
);
}
}
export default StepList;
@gaearon
Copy link

gaearon commented Dec 7, 2018

import React, { Component } from 'react';
import styles from './step-list.module.scss';

class StepList extends Component {
  steps = [
    { key: 0, title: 'Overview' },
    { key: 1, title: 'Dates' },
    { key: 2, title: 'Add Seminars' },
    { key: 3, title: 'Upload an image' },
    { key: 4, title: 'Preview' }
  ];

  getStepState = currentStep => {
    const styles = [];
    const totalLength = this.steps.length;
    for (let i = 0; i < totalLength; i++) {
      if (i === currentStep) styles.push('step-current');
      if (i < currentStep) styles.push('step-complete');
      if (i > currentStep) styles.push('step-incomplete');
    }
    return {
      currentStep,
      styles
    };
  };

  getClassName = currentStep => {
    const stepState = this.getStepState(currentStep);
    return `steps-${stepState.styles[currentStep]}`;
  };

  render() {
    return (
      <ul className={styles.steps}>
        {this.steps.map(({ key, title }, index) => {
          return (
            <li key={key} className={this.getClassName(index)}>
              {title}
            </li>
          );
        })}
      </ul>
    );
  }
}

export default StepList;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment