From 0a0ff97c97e5de6a2e59d4b46e55944b8f00c8d7 Mon Sep 17 00:00:00 2001 From: Alper Akyol Date: Thu, 14 Feb 2019 16:09:14 +0300 Subject: [PATCH] Added 'circleLineHeight' prop --- README.md | 1 + lib/Step.js | 6 ++++-- lib/Stepper.js | 5 ++++- src/Step.js | 6 ++++-- src/Stepper.js | 5 ++++- 5 files changed, 17 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 67b86c1..41c8585 100644 --- a/README.md +++ b/README.md @@ -39,6 +39,7 @@ See full example [here](https://github.com/mu29/react-stepper/blob/master/exampl |circleFontColor|Circle text color (for index)|#FFF|string| |size|Circle size|32|number| |circleFontSize|Circle text size|16|number| +|circleLineHeight|Circle line height||number| |titleFontSize|Title text size|16|number| |circleTop|Top margin of `Stepper` component|24|number| |titleTop|Space between circle and title|8|number| diff --git a/lib/Step.js b/lib/Step.js index 5bed137..3f4d864 100644 --- a/lib/Step.js +++ b/lib/Step.js @@ -65,7 +65,8 @@ var Step = function (_Component) { completeBorderStyle = _props.completeBorderStyle, activeBorderStyle = _props.activeBorderStyle, lineMarginOffset = _props.lineMarginOffset, - defaultBorderWidth = _props.defaultBorderWidth; + defaultBorderWidth = _props.defaultBorderWidth, + circleLineHeight = _props.circleLineHeight; return { @@ -106,7 +107,7 @@ var Step = function (_Component) { borderStyle: completeBorderStyle }, index: { - lineHeight: size + circleFontSize / 4 + 'px', + lineHeight: (circleLineHeight || size + circleFontSize) + 'px', color: circleFontColor }, title: { @@ -249,6 +250,7 @@ Step.propTypes = { circleFontColor: _propTypes.PropTypes.string, size: _propTypes.PropTypes.number, circleFontSize: _propTypes.PropTypes.number, + circleLineHeight: _propTypes.PropTypes.number, titleFontSize: _propTypes.PropTypes.number, circleTop: _propTypes.PropTypes.number, titleTop: _propTypes.PropTypes.number, diff --git a/lib/Stepper.js b/lib/Stepper.js index 16ac51c..a31c2ff 100644 --- a/lib/Stepper.js +++ b/lib/Stepper.js @@ -61,7 +61,8 @@ function Stepper(_ref) { defaultBarColor = _ref.defaultBarColor, completeBarColor = _ref.completeBarColor, lineMarginOffset = _ref.lineMarginOffset, - defaultBorderWidth = _ref.defaultBorderWidth; + defaultBorderWidth = _ref.defaultBorderWidth, + circleLineHeight = _ref.circleLineHeight; return _react2.default.createElement( 'div', @@ -91,6 +92,7 @@ function Stepper(_ref) { defaultTitleColor: defaultTitleColor, size: size, circleFontSize: circleFontSize, + circleLineHeight: circleLineHeight, titleFontSize: titleFontSize, circleTop: circleTop, titleTop: titleTop, @@ -133,6 +135,7 @@ Stepper.propTypes = { circleFontColor: _propTypes.PropTypes.string, size: _propTypes.PropTypes.number, circleFontSize: _propTypes.PropTypes.number, + circleLineHeight: _propTypes.PropTypes.number, titleFontSize: _propTypes.PropTypes.number, circleTop: _propTypes.PropTypes.number, titleTop: _propTypes.PropTypes.number, diff --git a/src/Step.js b/src/Step.js index ad4856f..613557d 100644 --- a/src/Step.js +++ b/src/Step.js @@ -15,7 +15,8 @@ export default class Step extends Component { circleTop, titleTop, width, completeOpacity, activeOpacity, defaultOpacity, completeTitleOpacity, activeTitleOpacity, defaultTitleOpacity, barStyle, defaultBarColor, completeBarColor, defaultBorderColor, completeBorderColor, activeBorderColor, - defaultBorderStyle,completeBorderStyle, activeBorderStyle, lineMarginOffset, defaultBorderWidth + defaultBorderStyle,completeBorderStyle, activeBorderStyle, lineMarginOffset, defaultBorderWidth, + circleLineHeight } = this.props; return { @@ -56,7 +57,7 @@ export default class Step extends Component { borderStyle: completeBorderStyle, }, index: { - lineHeight: `${size + circleFontSize / 4}px`, + lineHeight: `${circleLineHeight || (size + circleFontSize)}px`, color: circleFontColor }, title: { @@ -180,6 +181,7 @@ Step.propTypes = { circleFontColor: PropTypes.string, size: PropTypes.number, circleFontSize: PropTypes.number, + circleLineHeight: PropTypes.number, titleFontSize: PropTypes.number, circleTop: PropTypes.number, titleTop: PropTypes.number, diff --git a/src/Stepper.js b/src/Stepper.js index 151e487..6df9242 100644 --- a/src/Stepper.js +++ b/src/Stepper.js @@ -24,7 +24,8 @@ function Stepper({ circleTop, titleTop, completeOpacity, activeOpacity, defaultOpacity, completeTitleOpacity, activeTitleOpacity, defaultTitleOpacity, barStyle, defaultBorderColor, completeBorderColor, activeBorderColor, defaultBorderStyle, - completeBorderStyle, activeBorderStyle, defaultBarColor, completeBarColor, lineMarginOffset, defaultBorderWidth + completeBorderStyle, activeBorderStyle, defaultBarColor, completeBarColor, lineMarginOffset, defaultBorderWidth, + circleLineHeight }) { return (
@@ -51,6 +52,7 @@ function Stepper({ defaultTitleColor={defaultTitleColor} size={size} circleFontSize={circleFontSize} + circleLineHeight={circleLineHeight} titleFontSize={titleFontSize} circleTop={circleTop} titleTop={titleTop} @@ -94,6 +96,7 @@ Stepper.propTypes = { circleFontColor: PropTypes.string, size: PropTypes.number, circleFontSize: PropTypes.number, + circleLineHeight: PropTypes.number, titleFontSize: PropTypes.number, circleTop: PropTypes.number, titleTop: PropTypes.number,