added "stepperBackground" prop

infexious-dev · Sep 20, 2022 · 9f04b34 · 9f04b34
1 parent 5168d51
commit 9f04b34
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 23 deletions.
diff --git a/lib/Step.js b/lib/Step.js
@@ -36,6 +36,7 @@ var Step = function (_Component) {
     key: 'getStyles',
     value: function getStyles() {
       var _props = this.props,
+          stepperBackground = _props.stepperBackground,
           activeColor = _props.activeColor,
           completeColor = _props.completeColor,
           defaultColor = _props.defaultColor,
@@ -219,6 +220,7 @@ exports.default = Step;
 
 
 Step.defaultProps = {
+  stepperBackground: 'transparent',
   activeColor: '#5096FF',
   completeColor: '#5096FF',
   defaultColor: '#E0E0E0',
@@ -240,6 +242,7 @@ Step.defaultProps = {
 };
 
 Step.propTypes = {
+  stepperBackground: _propTypes.PropTypes.string,
   width: _propTypes.PropTypes.number.isRequired,
   activeColor: _propTypes.PropTypes.string,
   completeColor: _propTypes.PropTypes.string,

diff --git a/lib/Stepper.js b/lib/Stepper.js
@@ -16,19 +16,9 @@ var _Step2 = _interopRequireDefault(_Step);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var styles = {
-  root: {
-    width: '100%',
-    minHeight: 0,
-    padding: 0
-  },
-  stepper: {
-    display: 'flex'
-  }
-};
-
 function Stepper(_ref) {
-  var activeStep = _ref.activeStep,
+  var stepperBackground = _ref.stepperBackground,
+      activeStep = _ref.activeStep,
       steps = _ref.steps,
       disabledSteps = _ref.disabledSteps,
       activeColor = _ref.activeColor,
@@ -61,6 +51,19 @@ function Stepper(_ref) {
       lineMarginOffset = _ref.lineMarginOffset,
       defaultBorderWidth = _ref.defaultBorderWidth;
 
+
+  var styles = {
+    root: {
+      width: '100%',
+      minHeight: 0,
+      padding: 0
+    },
+    stepper: {
+      display: 'flex',
+      background: stepperBackground
+    }
+  };
+
   return _react2.default.createElement(
     'div',
     { style: styles.root, className: 'stepper-root' },
@@ -121,6 +124,7 @@ Stepper.defaultProps = {
 };
 
 Stepper.propTypes = {
+  stepperBackground: _propTypes.PropTypes.string,
   activeStep: _propTypes.PropTypes.number,
   steps: _propTypes.PropTypes.array,
   activeColor: _propTypes.PropTypes.string,

diff --git a/src/Step.js b/src/Step.js
@@ -9,6 +9,7 @@ export default class Step extends Component {
 
   getStyles() {
     const {
+      stepperBackground,
       activeColor, completeColor, defaultColor, circleFontColor,
       activeTitleColor, completeTitleColor, defaultTitleColor,
       size, circleFontSize, titleFontSize,
@@ -149,6 +150,7 @@ export default class Step extends Component {
 }
 
 Step.defaultProps = {
+  stepperBackground: 'transparent',
   activeColor: '#5096FF',
   completeColor: '#5096FF',
   defaultColor: '#E0E0E0',
@@ -170,6 +172,7 @@ Step.defaultProps = {
 };
 
 Step.propTypes = {
+  stepperBackground: PropTypes.string,
   width: PropTypes.number.isRequired,
   activeColor: PropTypes.string,
   completeColor: PropTypes.string,

diff --git a/src/Stepper.js b/src/Stepper.js
@@ -3,18 +3,8 @@ import { PropTypes } from 'prop-types';
 
 import Step from './Step';
 
-const styles = {
-  root: {
-    width: '100%',
-    minHeight: 0,
-    padding: 0,
-  },
-  stepper: {
-    display: 'flex'
-  },
-};
-
 function Stepper({
+  stepperBackground,
   activeStep, steps, disabledSteps,
   activeColor, completeColor, defaultColor, circleFontColor,
   activeTitleColor, completeTitleColor, defaultTitleColor,
@@ -24,6 +14,19 @@ function Stepper({
   defaultBorderColor, completeBorderColor, activeBorderColor, defaultBorderStyle,
   completeBorderStyle, activeBorderStyle, defaultBarColor, completeBarColor, lineMarginOffset, defaultBorderWidth
 }) {
+
+  const styles = {
+    root: {
+      width: '100%',
+      minHeight: 0,
+      padding: 0,
+    },
+    stepper: {
+      display: 'flex',
+      background: stepperBackground
+    },
+  };
+
   return (
     <div style={styles.root} className="stepper-root">
       <div style={styles.stepper} className="stepper">
@@ -82,6 +85,7 @@ Stepper.defaultProps = {
 };
 
 Stepper.propTypes = {
+  stepperBackground: PropTypes.string,
   activeStep: PropTypes.number,
   steps: PropTypes.array,
   activeColor: PropTypes.string,