@momo-kits/step 0.0.1 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Step.js +11 -6
- package/Step.web.js +9 -5
- package/package.json +1 -1
package/Step.js
CHANGED
|
@@ -103,15 +103,16 @@ export default class Step extends Component {
|
|
|
103
103
|
circle = (value, index) => {
|
|
104
104
|
const {
|
|
105
105
|
currentStep, tintColor, data, lineStyle, isNumber, iconActive,
|
|
106
|
-
iconInActive, lineColorActive, lineColorInActive, bodyStyle, iconStyle
|
|
106
|
+
iconInActive, lineColorActive, lineColorInActive, bodyStyle, iconStyle, checkedPreviousStep, borderColorActive, borderColorInActive,
|
|
107
107
|
} = this.props;
|
|
108
108
|
const { width } = this.state;
|
|
109
109
|
const icon = currentStep >= (index + 1) ? iconActive || IconSource.ic_step_active : iconInActive || IconSource.ic_step_coming;
|
|
110
110
|
const textFontStyle = currentStep >= (index + 1) ? styles.titleActive : styles.titleDefault;
|
|
111
111
|
const itemWidth = (width - CIRCLE_SIZE) / data?.length;
|
|
112
|
-
const lineActive = currentStep >= (index + 1) ? lineColorActive || isNumber ? Colors.pink_09 : Colors.sepia_05 : lineColorInActive || Colors.black_02;
|
|
112
|
+
const lineActive = currentStep >= (index + 1) ? lineColorActive || isNumber ? lineColorActive || Colors.pink_09 : Colors.sepia_05 : lineColorInActive || Colors.black_02;
|
|
113
113
|
const lineWidth = (width - CIRCLE_SIZE) / (data.length - 1);
|
|
114
114
|
const backgroundActive = currentStep >= (index + 1) ? Colors.pink_05_b : Colors.black_09;
|
|
115
|
+
const borderColor = currentStep >= (index + 1) ? borderColorActive || Colors.pink_09 : borderColorInActive || Colors.pink_09;
|
|
115
116
|
let left = 0;
|
|
116
117
|
let textAlignStyle = { textAlign: 'center' };
|
|
117
118
|
/**
|
|
@@ -149,14 +150,14 @@ export default class Step extends Component {
|
|
|
149
150
|
)
|
|
150
151
|
}
|
|
151
152
|
{
|
|
152
|
-
isNumber ? (
|
|
153
|
+
(isNumber && !checkedPreviousStep) || (isNumber && checkedPreviousStep && index >= currentStep -1 ) ? (
|
|
153
154
|
<View style={{
|
|
154
155
|
width: CIRCLE_SIZE,
|
|
155
156
|
height: CIRCLE_SIZE,
|
|
156
157
|
borderRadius: CIRCLE_SIZE / 2,
|
|
157
158
|
backgroundColor: backgroundActive,
|
|
158
|
-
borderColor:
|
|
159
|
-
borderWidth:
|
|
159
|
+
borderColor: borderColor,
|
|
160
|
+
borderWidth: 2,
|
|
160
161
|
alignItems: 'center',
|
|
161
162
|
justifyContent: 'center'
|
|
162
163
|
}}
|
|
@@ -294,10 +295,14 @@ Step.propTypes = {
|
|
|
294
295
|
lineColorActive: PropTypes.string,
|
|
295
296
|
lineColorInActive: PropTypes.string,
|
|
296
297
|
bodyStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
298
|
+
checkedPreviousStep: PropTypes.bool,
|
|
299
|
+
borderColorActive: PropTypes.string,
|
|
300
|
+
borderColorInActive: PropTypes.string,
|
|
297
301
|
};
|
|
298
302
|
|
|
299
303
|
Step.defaultProps = {
|
|
300
304
|
data: [],
|
|
301
305
|
currentStep: 0,
|
|
302
|
-
tintColor: Colors.sepia_05
|
|
306
|
+
tintColor: Colors.sepia_05,
|
|
307
|
+
checkedPreviousStep: false,
|
|
303
308
|
};
|
package/Step.web.js
CHANGED
|
@@ -102,15 +102,16 @@ export default class Step extends Component {
|
|
|
102
102
|
circle = (value, index) => {
|
|
103
103
|
const {
|
|
104
104
|
currentStep, tintColor, data, lineStyle, isNumber, iconActive,
|
|
105
|
-
iconInActive, lineColorActive, lineColorInActive, bodyStyle, iconStyle
|
|
105
|
+
iconInActive, lineColorActive, lineColorInActive, bodyStyle, iconStyle, checkedPreviousStep, borderColorActive, borderColorInActive,
|
|
106
106
|
} = this.props;
|
|
107
107
|
const { width } = this.state;
|
|
108
108
|
const icon = currentStep >= (index + 1) ? iconActive || IconSource.ic_step_active : iconInActive || IconSource.ic_step_coming;
|
|
109
109
|
const textFontStyle = currentStep >= (index + 1) ? styles.titleActive : styles.titleDefault;
|
|
110
110
|
const itemWidth = (width - CIRCLE_SIZE) / data?.length;
|
|
111
|
-
const lineActive = currentStep >= (index + 1) ? lineColorActive || isNumber ? Colors.pink_09 : Colors.sepia_05 : lineColorInActive || Colors.black_02;
|
|
111
|
+
const lineActive = currentStep >= (index + 1) ? lineColorActive || isNumber ? lineColorActive || Colors.pink_09 : Colors.sepia_05 : lineColorInActive || Colors.black_02;
|
|
112
112
|
const lineWidth = (width - CIRCLE_SIZE) / (data.length - 1);
|
|
113
113
|
const backgroundActive = currentStep >= (index + 1) ? Colors.pink_05_b : Colors.black_09;
|
|
114
|
+
const borderColor = currentStep >= (index + 1) ? borderColorActive || Colors.pink_09 : borderColorInActive || Colors.pink_09;
|
|
114
115
|
let left = 0;
|
|
115
116
|
let textAlignStyle = { textAlign: 'center' };
|
|
116
117
|
/**
|
|
@@ -148,14 +149,14 @@ export default class Step extends Component {
|
|
|
148
149
|
)
|
|
149
150
|
}
|
|
150
151
|
{
|
|
151
|
-
isNumber ? (
|
|
152
|
+
(isNumber && !checkedPreviousStep) || (isNumber && checkedPreviousStep && index >= currentStep -1 ) ? (
|
|
152
153
|
<View style={{
|
|
153
154
|
width: CIRCLE_SIZE,
|
|
154
155
|
height: CIRCLE_SIZE,
|
|
155
156
|
borderRadius: CIRCLE_SIZE / 2,
|
|
156
157
|
backgroundColor: backgroundActive,
|
|
157
|
-
borderColor:
|
|
158
|
-
borderWidth:
|
|
158
|
+
borderColor: borderColor,
|
|
159
|
+
borderWidth: 2,
|
|
159
160
|
alignItems: 'center',
|
|
160
161
|
justifyContent: 'center'
|
|
161
162
|
}}
|
|
@@ -293,6 +294,9 @@ Step.propTypes = {
|
|
|
293
294
|
lineColorActive: PropTypes.string,
|
|
294
295
|
lineColorInActive: PropTypes.string,
|
|
295
296
|
bodyStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
297
|
+
checkedPreviousStep: PropTypes.bool,
|
|
298
|
+
borderColorActive: PropTypes.string,
|
|
299
|
+
borderColorInActive: PropTypes.string,
|
|
296
300
|
};
|
|
297
301
|
|
|
298
302
|
Step.defaultProps = {
|