Support for icons, circle border width and line margin (#20)

* 0 margins for stepper line - testing.. * Margins back for stepper line - testing.. * lineMarginOffset introduced. * lineMarginOffset introduced. * Testing margin.. * lineMarginOffset introduced. * Icon intro.. * Icon intro.. * Icon intro.. * Adding props.. * Adding props..
mu29 · Aug 23, 2018 · 87b8bd3 · 87b8bd3
1 parent a2a4133
commit 87b8bd3
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 25 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,5 @@ node_modules
 example/bundle*
 
 npm-debug.log
+
+.idea
diff --git a/README.md b/README.md
@@ -57,11 +57,14 @@ See full example [here](https://github.com/mu29/react-stepper/blob/master/exampl
 |activeBorderStyle|Style of border surrounding active circle|solid|string|
 |defaultBarColor|Default color of bar separating circles|#E0E0E0|string|
 |completeBarColor|Color of bar connected to a completed step|#E0E0E0|string|
+|lineMarginOffset|Offset for line margin|4|number|
+|defaultBorderWidth|Default Border Width|3|number|
 
 ### Step Objects
 | name     | description    | default    | type   |
 |----------|----------------|------------|--------|
 |title|Displayed text of the step below the number|undefined|string|
+|icon|Displayed icon of the step|undefined|image/object|
 |href|Link to send them to on click|undefined|string|
 |onClick|Event handler for when the step is clicked|undefined|function|
 

diff --git a/lib/Step.js b/lib/Step.js
@@ -63,7 +63,9 @@ var Step = function (_Component) {
           activeBorderColor = _props.activeBorderColor,
           defaultBorderStyle = _props.defaultBorderStyle,
           completeBorderStyle = _props.completeBorderStyle,
-          activeBorderStyle = _props.activeBorderStyle;
+          activeBorderStyle = _props.activeBorderStyle,
+          lineMarginOffset = _props.lineMarginOffset,
+          defaultBorderWidth = _props.defaultBorderWidth;
 
 
       return {
@@ -85,21 +87,21 @@ var Step = function (_Component) {
           color: circleFontColor,
           display: 'block',
           opacity: defaultOpacity,
-          borderWidth: defaultBorderColor ? 3 : 0,
+          borderWidth: defaultBorderColor ? defaultBorderWidth : 0,
           borderColor: defaultBorderColor,
           borderStyle: defaultBorderStyle
         },
         activeCircle: {
           backgroundColor: activeColor,
           opacity: activeOpacity,
-          borderWidth: activeBorderColor ? 3 : 0,
+          borderWidth: activeBorderColor ? defaultBorderWidth : 0,
           borderColor: activeBorderColor,
           borderStyle: activeBorderStyle
         },
         completedCircle: {
           backgroundColor: completeColor,
           opacity: completeOpacity,
-          borderWidth: completeBorderColor ? 3 : 0,
+          borderWidth: completeBorderColor ? defaultBorderWidth : 0,
           borderColor: completeBorderColor,
           borderStyle: completeBorderStyle
         },
@@ -133,7 +135,7 @@ var Step = function (_Component) {
           borderTopColor: defaultBarColor,
           left: 0,
           right: '50%',
-          marginRight: size / 2 + 4,
+          marginRight: size / 2 + lineMarginOffset,
           opacity: defaultOpacity
         },
         rightBar: {
@@ -145,7 +147,7 @@ var Step = function (_Component) {
           borderTopColor: defaultBarColor,
           right: 0,
           left: '50%',
-          marginLeft: size / 2 + 4,
+          marginLeft: size / 2 + lineMarginOffset,
           opacity: defaultOpacity
         },
         completedBar: {
@@ -161,6 +163,7 @@ var Step = function (_Component) {
     value: function render() {
       var _props2 = this.props,
           title = _props2.title,
+          icon = _props2.icon,
           index = _props2.index,
           active = _props2.active,
           completed = _props2.completed,
@@ -176,6 +179,8 @@ var Step = function (_Component) {
       var leftStyle = Object.assign(styles.leftBar, active || completed ? styles.completedBar : {});
       var rightStyle = Object.assign(styles.rightBar, completed ? styles.completedBar : {});
 
+      var stepContent = icon ? _react2.default.createElement('img', { src: icon, alt: index + 1 }) : index + 1;
+
       return _react2.default.createElement(
         'div',
         { style: styles.step },
@@ -185,11 +190,11 @@ var Step = function (_Component) {
           active || completed ? _react2.default.createElement(
             'a',
             { href: href, onClick: onClick, style: styles.index },
-            index + 1
+            stepContent
           ) : _react2.default.createElement(
             'span',
             { style: styles.index },
-            index + 1
+            stepContent
           )
         ),
         active || completed ? _react2.default.createElement(
@@ -228,7 +233,9 @@ Step.defaultProps = {
   titleTop: 8,
   defaultBarColor: '#E0E0E0',
   barStyle: 'solid',
-  borderStyle: 'solid'
+  borderStyle: 'solid',
+  lineMarginOffset: 4,
+  defaultBorderWidth: 3
 };
 
 Step.propTypes = {
@@ -265,5 +272,7 @@ Step.propTypes = {
   activeBorderColor: _propTypes.PropTypes.string,
   defaultBorderStyle: _propTypes.PropTypes.string,
   completeBorderStyle: _propTypes.PropTypes.string,
-  activeBorderStyle: _propTypes.PropTypes.string
+  activeBorderStyle: _propTypes.PropTypes.string,
+  lineMarginOffset: _propTypes.PropTypes.number,
+  defaultBorderWidth: _propTypes.PropTypes.number
 };
diff --git a/lib/Stepper.js b/lib/Stepper.js
@@ -59,7 +59,9 @@ function Stepper(_ref) {
       completeBorderStyle = _ref.completeBorderStyle,
       activeBorderStyle = _ref.activeBorderStyle,
       defaultBarColor = _ref.defaultBarColor,
-      completeBarColor = _ref.completeBarColor;
+      completeBarColor = _ref.completeBarColor,
+      lineMarginOffset = _ref.lineMarginOffset,
+      defaultBorderWidth = _ref.defaultBorderWidth;
 
   return _react2.default.createElement(
     'div',
@@ -72,6 +74,7 @@ function Stepper(_ref) {
           key: index,
           width: 100 / steps.length,
           title: step.title,
+          icon: step.icon,
           href: step.href,
           onClick: step.onClick,
           active: !(disabledSteps || []).includes(index) && index === activeStep,
@@ -102,10 +105,12 @@ function Stepper(_ref) {
           completeBorderColor: completeBorderColor,
           activeBorderColor: activeBorderColor,
           defaultBorderStyle: defaultBorderStyle,
+          defaultBorderWidth: defaultBorderWidth,
           completeBorderStyle: completeBorderStyle,
           activeBorderStyle: activeBorderStyle,
           defaultBarColor: defaultBarColor,
-          completeBarColor: completeBarColor
+          completeBarColor: completeBarColor,
+          lineMarginOffset: lineMarginOffset
         });
       })
     )
@@ -145,7 +150,9 @@ Stepper.propTypes = {
   activeBorderColor: _propTypes.PropTypes.string,
   defaultBorderStyle: _propTypes.PropTypes.string,
   completeBorderStyle: _propTypes.PropTypes.string,
-  activeBorderStyle: _propTypes.PropTypes.string
+  activeBorderStyle: _propTypes.PropTypes.string,
+  lineMarginOffset: _propTypes.PropTypes.number,
+  defaultBorderWidth: _propTypes.PropTypes.number
 };
 
 exports.default = Stepper;
diff --git a/src/Step.js b/src/Step.js
@@ -15,7 +15,7 @@ export default class Step extends Component {
       circleTop, titleTop, width, completeOpacity, activeOpacity, defaultOpacity,
       completeTitleOpacity, activeTitleOpacity, defaultTitleOpacity, barStyle, defaultBarColor,
       completeBarColor, defaultBorderColor, completeBorderColor, activeBorderColor,
-      defaultBorderStyle,completeBorderStyle, activeBorderStyle
+      defaultBorderStyle,completeBorderStyle, activeBorderStyle, lineMarginOffset, defaultBorderWidth
     } = this.props;
 
     return {
@@ -37,21 +37,21 @@ export default class Step extends Component {
         color: circleFontColor,
         display: 'block',
         opacity: defaultOpacity,
-        borderWidth: (defaultBorderColor ? 3 : 0),
+        borderWidth: (defaultBorderColor ? defaultBorderWidth : 0),
         borderColor: defaultBorderColor,
         borderStyle: defaultBorderStyle
       },
       activeCircle: {
         backgroundColor: activeColor,
         opacity: activeOpacity,
-        borderWidth: (activeBorderColor ? 3 : 0),
+        borderWidth: (activeBorderColor ? defaultBorderWidth : 0),
         borderColor: activeBorderColor,
         borderStyle: activeBorderStyle,
       },
       completedCircle: {
         backgroundColor: completeColor,
         opacity: completeOpacity,
-        borderWidth: (completeBorderColor ? 3 : 0),
+        borderWidth: (completeBorderColor ? defaultBorderWidth : 0),
         borderColor: completeBorderColor,
         borderStyle: completeBorderStyle,
       },
@@ -85,7 +85,7 @@ export default class Step extends Component {
         borderTopColor: defaultBarColor,
         left: 0,
         right: '50%',
-        marginRight: size / 2 + 4,
+        marginRight: size / 2 + lineMarginOffset,
         opacity: defaultOpacity,
       },
       rightBar: {
@@ -97,7 +97,7 @@ export default class Step extends Component {
         borderTopColor: defaultBarColor,
         right: 0,
         left: '50%',
-        marginLeft: size / 2 + 4,
+        marginLeft: size / 2 + lineMarginOffset,
         opacity: defaultOpacity,
       },
       completedBar: {
@@ -110,7 +110,7 @@ export default class Step extends Component {
   }
 
   render() {
-    const { title, index, active, completed, first, isLast, href, onClick } = this.props;
+    const { title, icon, index, active, completed, first, isLast, href, onClick } = this.props;
 
     const styles = this.getStyles();
     const circleStyle = Object.assign(
@@ -126,13 +126,15 @@ export default class Step extends Component {
     const leftStyle = Object.assign(styles.leftBar, (active || completed) ? styles.completedBar : {});
     const rightStyle = Object.assign(styles.rightBar, completed ? styles.completedBar : {});
 
+    const stepContent = icon ? <img src={icon} alt={index + 1} /> : index + 1;
+
     return (
       <div style={ styles.step }>
         <div style={ circleStyle }>
         {active || completed ? (
-          <a href={href} onClick={onClick} style={ styles.index }>{ index + 1 }</a>
+          <a href={href} onClick={onClick} style={ styles.index }>{ stepContent }</a>
         ) : (
-          <span style={ styles.index }>{ index + 1 }</span>
+          <span style={ styles.index }>{ stepContent }</span>
         )}
         </div>
         {active || completed ? (
@@ -163,6 +165,8 @@ Step.defaultProps = {
   defaultBarColor: '#E0E0E0',
   barStyle: 'solid',
   borderStyle: 'solid',
+  lineMarginOffset: 4,
+  defaultBorderWidth: 3
 };
 
 Step.propTypes = {
@@ -199,5 +203,7 @@ Step.propTypes = {
   activeBorderColor: PropTypes.string,
   defaultBorderStyle: PropTypes.string,
   completeBorderStyle: PropTypes.string,
-  activeBorderStyle: PropTypes.string
+  activeBorderStyle: PropTypes.string,
+  lineMarginOffset: PropTypes.number,
+  defaultBorderWidth: PropTypes.number
 };
diff --git a/src/Stepper.js b/src/Stepper.js
@@ -24,7 +24,7 @@ function Stepper({
   circleTop, titleTop, completeOpacity, activeOpacity, defaultOpacity,
   completeTitleOpacity, activeTitleOpacity, defaultTitleOpacity, barStyle,
   defaultBorderColor, completeBorderColor, activeBorderColor, defaultBorderStyle,
-  completeBorderStyle, activeBorderStyle, defaultBarColor, completeBarColor
+  completeBorderStyle, activeBorderStyle, defaultBarColor, completeBarColor, lineMarginOffset, defaultBorderWidth
 }) {
   return (
     <div style={ styles.root }>
@@ -34,6 +34,7 @@ function Stepper({
             key={index}
             width={100 / steps.length}
             title={step.title}
+            icon={step.icon}
             href={step.href}
             onClick={step.onClick}
             active={!(disabledSteps || []).includes(index) && index === activeStep}
@@ -64,10 +65,12 @@ function Stepper({
             completeBorderColor={completeBorderColor}
             activeBorderColor={activeBorderColor}
             defaultBorderStyle={defaultBorderStyle}
+            defaultBorderWidth={defaultBorderWidth}
             completeBorderStyle={completeBorderStyle}
             activeBorderStyle={activeBorderStyle}
             defaultBarColor={defaultBarColor}
             completeBarColor={completeBarColor}
+            lineMarginOffset={lineMarginOffset}
           />
         )) }
       </div>
@@ -109,6 +112,8 @@ Stepper.propTypes = {
   defaultBorderStyle: PropTypes.string,
   completeBorderStyle: PropTypes.string,
   activeBorderStyle: PropTypes.string,
+  lineMarginOffset: PropTypes.number,
+  defaultBorderWidth: PropTypes.number
 };
 
 export default Stepper;
diff --git a/yarn.lock b/yarn.lock
@@ -1303,6 +1303,10 @@ js-tokens@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.1.tgz#08e9f132484a2c45a30907e9dc4d5567b7f114d7"
 
+"js-tokens@^3.0.0 || ^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+
 jsbn@~0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
@@ -1372,6 +1376,12 @@ loose-envify@^1.0.0, loose-envify@^1.1.0:
   dependencies:
     js-tokens "^3.0.0"
 
+loose-envify@^1.3.1:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
 memory-fs@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.2.0.tgz#f2bb25368bc121e391c2520de92969caee0a0290"
@@ -1519,7 +1529,7 @@ oauth-sign@~0.8.1:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
 
-object-assign@^4.0.1, object-assign@^4.1.0:
+object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
 
@@ -1638,6 +1648,13 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
+prop-types@^15.5.10:
+  version "15.6.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
+  dependencies:
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
 prr@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/prr/-/prr-0.0.0.tgz#1a84b85908325501411853d0081ee3fa86e2926a"
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,3 +2,5 @@ node_modules
		example/bundle*

		npm-debug.log

		.idea