be-components 6.5.2 → 6.5.4
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/lib/commonjs/Guide/index.js +246 -0
- package/lib/commonjs/Guide/index.js.map +1 -0
- package/lib/commonjs/index.js +2 -2
- package/lib/commonjs/index.js.map +1 -1
- package/lib/module/Guide/index.js +239 -0
- package/lib/module/Guide/index.js.map +1 -0
- package/lib/module/index.js +1 -1
- package/lib/module/index.js.map +1 -1
- package/lib/typescript/lib/commonjs/Guide/index.d.ts.map +1 -0
- package/lib/typescript/lib/module/{GuideView → Guide}/index.d.ts +1 -1
- package/lib/typescript/lib/module/Guide/index.d.ts.map +1 -0
- package/lib/typescript/lib/module/index.d.ts +1 -1
- package/lib/typescript/lib/module/index.d.ts.map +1 -1
- package/lib/typescript/src/Guide/index.d.ts.map +1 -0
- package/lib/typescript/src/index.d.ts +1 -1
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/Guide/index.tsx +248 -0
- package/src/index.tsx +1 -1
- package/lib/commonjs/GuideView/index.js +0 -216
- package/lib/commonjs/GuideView/index.js.map +0 -1
- package/lib/module/GuideView/index.js +0 -209
- package/lib/module/GuideView/index.js.map +0 -1
- package/lib/typescript/lib/commonjs/GuideView/index.d.ts.map +0 -1
- package/lib/typescript/lib/module/GuideView/index.d.ts.map +0 -1
- package/lib/typescript/src/GuideView/index.d.ts.map +0 -1
- package/src/GuideView/index.tsx +0 -176
- /package/lib/typescript/lib/commonjs/{GuideView → Guide}/index.d.ts +0 -0
- /package/lib/typescript/src/{GuideView → Guide}/index.d.ts +0 -0
|
@@ -1,209 +0,0 @@
|
|
|
1
|
-
import React, { useRef, useState, useEffect } from "react";
|
|
2
|
-
import { Platform, useWindowDimensions } from "react-native";
|
|
3
|
-
import { Button, Text, View } from "../Components/Themed";
|
|
4
|
-
import { useColors } from "../constants/useColors";
|
|
5
|
-
import { Icons } from "../Components";
|
|
6
|
-
export default function GuideWrapper({
|
|
7
|
-
children,
|
|
8
|
-
guide
|
|
9
|
-
}) {
|
|
10
|
-
const Colors = useColors();
|
|
11
|
-
const wrapper_guid = guide ?? {};
|
|
12
|
-
const {
|
|
13
|
-
tour,
|
|
14
|
-
active,
|
|
15
|
-
onComplete
|
|
16
|
-
} = wrapper_guid;
|
|
17
|
-
const refs = useRef({});
|
|
18
|
-
const [currentStep, setCurrentStep] = useState(0);
|
|
19
|
-
const [layout, setLayout] = useState(null);
|
|
20
|
-
const [container_layout, setContainerLayout] = useState({
|
|
21
|
-
height: 0,
|
|
22
|
-
width: 0,
|
|
23
|
-
x: 0,
|
|
24
|
-
y: 0
|
|
25
|
-
});
|
|
26
|
-
const {
|
|
27
|
-
width
|
|
28
|
-
} = useWindowDimensions();
|
|
29
|
-
//Check if it is negative
|
|
30
|
-
const MIN_WIDTH = 300;
|
|
31
|
-
let right = false;
|
|
32
|
-
if (layout) {
|
|
33
|
-
let right_side = layout.x + MIN_WIDTH;
|
|
34
|
-
if (right_side > container_layout.width) {
|
|
35
|
-
right = true;
|
|
36
|
-
}
|
|
37
|
-
//Check if it goes over the bottom
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
// Recursively attach refs to children with nativeID
|
|
41
|
-
const attachRefs = nodes => {
|
|
42
|
-
return React.Children.map(nodes, child => {
|
|
43
|
-
if (! /*#__PURE__*/React.isValidElement(child)) return child;
|
|
44
|
-
const props = child.props || {};
|
|
45
|
-
const nativeID = props.nativeID;
|
|
46
|
-
const newChildren = props.children ? attachRefs(props.children) : props.children;
|
|
47
|
-
if (nativeID) {
|
|
48
|
-
return /*#__PURE__*/React.cloneElement(child, {
|
|
49
|
-
ref: ref => {
|
|
50
|
-
if (ref) refs.current[nativeID] = ref;
|
|
51
|
-
},
|
|
52
|
-
children: newChildren
|
|
53
|
-
});
|
|
54
|
-
} else if (newChildren !== props.children) {
|
|
55
|
-
return /*#__PURE__*/React.cloneElement(child, {
|
|
56
|
-
children: newChildren
|
|
57
|
-
});
|
|
58
|
-
}
|
|
59
|
-
return child;
|
|
60
|
-
});
|
|
61
|
-
};
|
|
62
|
-
if (!tour || !active) return /*#__PURE__*/React.createElement(React.Fragment, null, children);
|
|
63
|
-
const sortedTour = [...tour].sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
|
|
64
|
-
const step = sortedTour[currentStep];
|
|
65
|
-
if (!step) return /*#__PURE__*/React.createElement(React.Fragment, null, attachRefs(children));
|
|
66
|
-
const ref = refs.current[step.nativeID];
|
|
67
|
-
// Measure the current step element
|
|
68
|
-
useEffect(() => {
|
|
69
|
-
if (!step || !ref) return;
|
|
70
|
-
if (Platform.OS === "web") {
|
|
71
|
-
const rect = ref.getBoundingClientRect();
|
|
72
|
-
setLayout({
|
|
73
|
-
x: rect.left - container_layout.x,
|
|
74
|
-
y: rect.top - container_layout.y,
|
|
75
|
-
width: rect.width,
|
|
76
|
-
height: rect.height
|
|
77
|
-
});
|
|
78
|
-
} else if (ref && typeof ref.measure === "function") {
|
|
79
|
-
ref.measure((width, height, pageX, pageY) => {
|
|
80
|
-
setLayout({
|
|
81
|
-
x: pageX,
|
|
82
|
-
y: pageY,
|
|
83
|
-
width,
|
|
84
|
-
height
|
|
85
|
-
});
|
|
86
|
-
});
|
|
87
|
-
}
|
|
88
|
-
}, [currentStep, step, ref, container_layout.x]);
|
|
89
|
-
const handleNext = () => {
|
|
90
|
-
if (currentStep + 1 < sortedTour.length) {
|
|
91
|
-
setCurrentStep(currentStep + 1);
|
|
92
|
-
} else {
|
|
93
|
-
onComplete?.("complete");
|
|
94
|
-
}
|
|
95
|
-
};
|
|
96
|
-
const handlePrev = () => {
|
|
97
|
-
if (currentStep > 0) setCurrentStep(currentStep - 1);
|
|
98
|
-
};
|
|
99
|
-
if (!layout) return /*#__PURE__*/React.createElement(React.Fragment, null, attachRefs(children));
|
|
100
|
-
const isLastStep = currentStep === sortedTour.length - 1;
|
|
101
|
-
return /*#__PURE__*/React.createElement(View, {
|
|
102
|
-
style: {
|
|
103
|
-
flex: 1
|
|
104
|
-
},
|
|
105
|
-
onLayout: ev => {
|
|
106
|
-
const l = ev.nativeEvent.layout;
|
|
107
|
-
setContainerLayout({
|
|
108
|
-
height: l.height,
|
|
109
|
-
width: l.width,
|
|
110
|
-
x: l.x,
|
|
111
|
-
y: l.y
|
|
112
|
-
});
|
|
113
|
-
}
|
|
114
|
-
}, attachRefs(children), /*#__PURE__*/React.createElement(View, {
|
|
115
|
-
transparent: true,
|
|
116
|
-
style: {
|
|
117
|
-
position: 'absolute',
|
|
118
|
-
zIndex: 9999999,
|
|
119
|
-
borderWidth: 2,
|
|
120
|
-
borderColor: Colors.text.success,
|
|
121
|
-
borderRadius: 4,
|
|
122
|
-
top: layout.y - 5,
|
|
123
|
-
left: layout.x - 5,
|
|
124
|
-
width: layout.width + 5,
|
|
125
|
-
height: layout.height + 10
|
|
126
|
-
}
|
|
127
|
-
}, /*#__PURE__*/React.createElement(View, {
|
|
128
|
-
float: true,
|
|
129
|
-
style: {
|
|
130
|
-
position: 'absolute',
|
|
131
|
-
maxWidth: width - 10,
|
|
132
|
-
minWidth: 300,
|
|
133
|
-
borderColor: Colors.text.success,
|
|
134
|
-
bottom: 0 + layout.height + 15,
|
|
135
|
-
left: right ? undefined : layout.x + 5,
|
|
136
|
-
right: right ? 5 : undefined
|
|
137
|
-
}
|
|
138
|
-
}, step.title ? /*#__PURE__*/React.createElement(View, {
|
|
139
|
-
type: "header",
|
|
140
|
-
style: {
|
|
141
|
-
flexDirection: 'row',
|
|
142
|
-
alignItems: 'center',
|
|
143
|
-
padding: 10,
|
|
144
|
-
borderTopRightRadius: 8,
|
|
145
|
-
borderTopLeftRadius: 8
|
|
146
|
-
}
|
|
147
|
-
}, /*#__PURE__*/React.createElement(Icons.AlertIcon, {
|
|
148
|
-
size: 14,
|
|
149
|
-
color: Colors.text.warning
|
|
150
|
-
}), /*#__PURE__*/React.createElement(View, {
|
|
151
|
-
transparent: true,
|
|
152
|
-
style: {
|
|
153
|
-
flex: 1,
|
|
154
|
-
marginLeft: 10,
|
|
155
|
-
marginRight: 10,
|
|
156
|
-
borderLeftWidth: 1,
|
|
157
|
-
borderColor: Colors.borders.light
|
|
158
|
-
}
|
|
159
|
-
}, /*#__PURE__*/React.createElement(Text, {
|
|
160
|
-
theme: "h1"
|
|
161
|
-
}, step.title)), /*#__PURE__*/React.createElement(Button, {
|
|
162
|
-
style: {
|
|
163
|
-
height: 30,
|
|
164
|
-
width: 30,
|
|
165
|
-
borderRadius: 100,
|
|
166
|
-
padding: 0,
|
|
167
|
-
justifyContent: 'center',
|
|
168
|
-
alignItems: 'center'
|
|
169
|
-
},
|
|
170
|
-
title: "X",
|
|
171
|
-
type: "error",
|
|
172
|
-
onPress: () => onComplete ? onComplete('cancelled') : console.log('')
|
|
173
|
-
})) : /*#__PURE__*/React.createElement(React.Fragment, null), step.body ? /*#__PURE__*/React.createElement(View, {
|
|
174
|
-
type: "body",
|
|
175
|
-
style: {
|
|
176
|
-
padding: 5
|
|
177
|
-
}
|
|
178
|
-
}, /*#__PURE__*/React.createElement(Text, {
|
|
179
|
-
theme: "h2"
|
|
180
|
-
}, step.body)) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(View, {
|
|
181
|
-
type: "footer",
|
|
182
|
-
style: {
|
|
183
|
-
flexDirection: 'row',
|
|
184
|
-
alignItems: 'center',
|
|
185
|
-
padding: 10,
|
|
186
|
-
borderBottomRightRadius: 8,
|
|
187
|
-
borderBottomLeftRadius: 8
|
|
188
|
-
}
|
|
189
|
-
}, currentStep > 0 && /*#__PURE__*/React.createElement(Button, {
|
|
190
|
-
type: "action",
|
|
191
|
-
onPress: handlePrev,
|
|
192
|
-
style: {
|
|
193
|
-
padding: 10,
|
|
194
|
-
flex: 1,
|
|
195
|
-
margin: 2
|
|
196
|
-
},
|
|
197
|
-
title: "BACK"
|
|
198
|
-
}), !step.clickable && /*#__PURE__*/React.createElement(Button, {
|
|
199
|
-
type: "success",
|
|
200
|
-
style: {
|
|
201
|
-
padding: 10,
|
|
202
|
-
flex: 1,
|
|
203
|
-
margin: 2
|
|
204
|
-
},
|
|
205
|
-
onPress: handleNext,
|
|
206
|
-
title: isLastStep ? "Done" : "Next"
|
|
207
|
-
})))));
|
|
208
|
-
}
|
|
209
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","useRef","useState","useEffect","Platform","useWindowDimensions","Button","Text","View","useColors","Icons","GuideWrapper","children","guide","Colors","wrapper_guid","tour","active","onComplete","refs","currentStep","setCurrentStep","layout","setLayout","container_layout","setContainerLayout","height","width","x","y","MIN_WIDTH","right","right_side","attachRefs","nodes","Children","map","child","isValidElement","props","nativeID","newChildren","cloneElement","ref","current","createElement","Fragment","sortedTour","sort","a","b","priority","step","OS","rect","getBoundingClientRect","left","top","measure","pageX","pageY","handleNext","length","handlePrev","isLastStep","style","flex","onLayout","ev","l","nativeEvent","transparent","position","zIndex","borderWidth","borderColor","text","success","borderRadius","float","maxWidth","minWidth","bottom","undefined","title","type","flexDirection","alignItems","padding","borderTopRightRadius","borderTopLeftRadius","AlertIcon","size","color","warning","marginLeft","marginRight","borderLeftWidth","borders","light","theme","justifyContent","onPress","console","log","body","borderBottomRightRadius","borderBottomLeftRadius","margin","clickable"],"sourceRoot":"../../../src","sources":["GuideView/index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../commonjs/GuideView/index.js"],"names":[],"mappings":";;AAYA;;;QA0MC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../module/GuideView/index.js"],"names":[],"mappings":"AAKA;;;;;mGA0MC;kBA/MkD,OAAO"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/GuideView/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAK/C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB,CAAC;AAIF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,iBAAiB,qBAgK1E"}
|
package/src/GuideView/index.tsx
DELETED
|
@@ -1,176 +0,0 @@
|
|
|
1
|
-
import React, { useRef, useState, useEffect } from "react";
|
|
2
|
-
import { Platform, useWindowDimensions } from "react-native";
|
|
3
|
-
import type { GuideWrapProps } from "../types";
|
|
4
|
-
import { Button, Text, View } from "../Components/Themed";
|
|
5
|
-
import { useColors } from "../constants/useColors";
|
|
6
|
-
import { Icons } from "../Components";
|
|
7
|
-
|
|
8
|
-
export type GuideWrapperProps = {
|
|
9
|
-
children: React.ReactNode;
|
|
10
|
-
guide?: GuideWrapProps;
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
type Layout = { x: number; y: number; width: number; height: number };
|
|
14
|
-
|
|
15
|
-
export default function GuideWrapper({ children, guide }: GuideWrapperProps) {
|
|
16
|
-
const Colors = useColors();
|
|
17
|
-
const wrapper_guid = guide ?? {};
|
|
18
|
-
const { tour, active, onComplete } = wrapper_guid;
|
|
19
|
-
const refs = useRef<{ [key: string]: any }>({});
|
|
20
|
-
const [currentStep, setCurrentStep] = useState(0);
|
|
21
|
-
const [layout, setLayout] = useState<Layout | null>(null);
|
|
22
|
-
const [ container_layout, setContainerLayout ] = useState({ height: 0, width:0, x:0, y:0 });
|
|
23
|
-
const { width } = useWindowDimensions();
|
|
24
|
-
//Check if it is negative
|
|
25
|
-
const MIN_WIDTH = 300
|
|
26
|
-
let right = false
|
|
27
|
-
if(layout){
|
|
28
|
-
let right_side = layout.x + MIN_WIDTH
|
|
29
|
-
if(right_side > container_layout.width){ right = true }
|
|
30
|
-
//Check if it goes over the bottom
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
// Recursively attach refs to children with nativeID
|
|
34
|
-
const attachRefs = (nodes: React.ReactNode): React.ReactNode => {
|
|
35
|
-
return React.Children.map(nodes, (child: any) => {
|
|
36
|
-
if (!React.isValidElement(child)) return child;
|
|
37
|
-
|
|
38
|
-
const props = (child.props as any) || {};
|
|
39
|
-
const nativeID = props.nativeID;
|
|
40
|
-
const newChildren = props.children ? attachRefs(props.children) : props.children;
|
|
41
|
-
|
|
42
|
-
if (nativeID) {
|
|
43
|
-
return React.cloneElement(child, {
|
|
44
|
-
ref: (ref: any) => {
|
|
45
|
-
if (ref) refs.current[nativeID] = ref;
|
|
46
|
-
},
|
|
47
|
-
children: newChildren,
|
|
48
|
-
} as any);
|
|
49
|
-
} else if (newChildren !== props.children) {
|
|
50
|
-
return React.cloneElement(child, { children: newChildren } as any);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
return child;
|
|
54
|
-
});
|
|
55
|
-
};
|
|
56
|
-
|
|
57
|
-
if (!tour || !active) return <>{children}</>;
|
|
58
|
-
|
|
59
|
-
const sortedTour = [...tour].sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
|
|
60
|
-
const step = sortedTour[currentStep];
|
|
61
|
-
if (!step) return <>{attachRefs(children)}</>;
|
|
62
|
-
|
|
63
|
-
const ref = refs.current[step.nativeID];
|
|
64
|
-
// Measure the current step element
|
|
65
|
-
useEffect(() => {
|
|
66
|
-
if (!step || !ref) return;
|
|
67
|
-
|
|
68
|
-
if (Platform.OS === "web") {
|
|
69
|
-
const rect = ref.getBoundingClientRect();
|
|
70
|
-
setLayout({
|
|
71
|
-
x: rect.left - container_layout.x,
|
|
72
|
-
y: rect.top - container_layout.y,
|
|
73
|
-
width: rect.width,
|
|
74
|
-
height: rect.height
|
|
75
|
-
});
|
|
76
|
-
} else if (ref && typeof ref.measure === "function") {
|
|
77
|
-
ref.measure(
|
|
78
|
-
(width: number, height: number, pageX: number, pageY: number) => {
|
|
79
|
-
setLayout({ x: pageX, y: pageY, width, height });
|
|
80
|
-
}
|
|
81
|
-
);
|
|
82
|
-
}
|
|
83
|
-
}, [currentStep, step, ref, container_layout.x]);
|
|
84
|
-
|
|
85
|
-
const handleNext = () => {
|
|
86
|
-
if (currentStep + 1 < sortedTour.length) {
|
|
87
|
-
setCurrentStep(currentStep + 1);
|
|
88
|
-
} else {
|
|
89
|
-
onComplete?.("complete");
|
|
90
|
-
}
|
|
91
|
-
};
|
|
92
|
-
|
|
93
|
-
const handlePrev = () => {
|
|
94
|
-
if (currentStep > 0) setCurrentStep(currentStep - 1);
|
|
95
|
-
};
|
|
96
|
-
|
|
97
|
-
if (!layout) return <>{attachRefs(children)}</>;
|
|
98
|
-
const isLastStep = currentStep === sortedTour.length - 1;
|
|
99
|
-
return (
|
|
100
|
-
<View style={{ flex: 1 }} onLayout={(ev) => {
|
|
101
|
-
const l = ev.nativeEvent.layout
|
|
102
|
-
setContainerLayout({ height:l.height, width: l.width, x: l.x, y:l.y })
|
|
103
|
-
}}>
|
|
104
|
-
{/* Attach refs to children */}
|
|
105
|
-
{attachRefs(children)}
|
|
106
|
-
|
|
107
|
-
{/* Highlight border around active element */}
|
|
108
|
-
<View
|
|
109
|
-
transparent
|
|
110
|
-
style={{
|
|
111
|
-
position:'absolute',
|
|
112
|
-
zIndex: 9999999,
|
|
113
|
-
borderWidth:2,
|
|
114
|
-
borderColor:Colors.text.success,
|
|
115
|
-
borderRadius:4,
|
|
116
|
-
top: layout.y - 5,
|
|
117
|
-
left: layout.x - 5,
|
|
118
|
-
width: layout.width + 5,
|
|
119
|
-
height: layout.height + 10,
|
|
120
|
-
}}
|
|
121
|
-
>
|
|
122
|
-
<View
|
|
123
|
-
float
|
|
124
|
-
style={{
|
|
125
|
-
position:'absolute',
|
|
126
|
-
maxWidth: width - 10,
|
|
127
|
-
minWidth:300,
|
|
128
|
-
borderColor:Colors.text.success,
|
|
129
|
-
bottom: 0 + layout.height + 15,
|
|
130
|
-
left: right ? undefined : layout.x + 5,
|
|
131
|
-
right: right ? 5 : undefined
|
|
132
|
-
}}
|
|
133
|
-
>
|
|
134
|
-
{step.title ?
|
|
135
|
-
<View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
|
|
136
|
-
<Icons.AlertIcon size={14} color={Colors.text.warning} />
|
|
137
|
-
<View transparent style={{flex:1, marginLeft:10, marginRight:10, borderLeftWidth:1, borderColor:Colors.borders.light}}>
|
|
138
|
-
<Text theme="h1">{step.title}</Text>
|
|
139
|
-
</View>
|
|
140
|
-
<Button
|
|
141
|
-
style={{ height:30, width:30, borderRadius:100, padding:0, justifyContent:'center', alignItems:'center' }}
|
|
142
|
-
title="X"
|
|
143
|
-
type="error"
|
|
144
|
-
onPress={() => onComplete ? onComplete('cancelled') : console.log('')}
|
|
145
|
-
/>
|
|
146
|
-
</View>
|
|
147
|
-
:<></>}
|
|
148
|
-
{step.body ?
|
|
149
|
-
<View type="body" style={{ padding:5 }}>
|
|
150
|
-
<Text theme="h2">{step.body}</Text>
|
|
151
|
-
</View>
|
|
152
|
-
:<></>}
|
|
153
|
-
<View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
|
|
154
|
-
{currentStep > 0 && (
|
|
155
|
-
<Button
|
|
156
|
-
type='action'
|
|
157
|
-
onPress={handlePrev}
|
|
158
|
-
style={{ padding:10, flex:1, margin:2 }}
|
|
159
|
-
title="BACK"
|
|
160
|
-
/>
|
|
161
|
-
)}
|
|
162
|
-
{!step.clickable && (
|
|
163
|
-
<Button
|
|
164
|
-
type='success'
|
|
165
|
-
style={{ padding:10, flex:1, margin:2 }}
|
|
166
|
-
onPress={handleNext}
|
|
167
|
-
title={isLastStep ? "Done" : "Next"}
|
|
168
|
-
/>
|
|
169
|
-
)}
|
|
170
|
-
</View>
|
|
171
|
-
</View>
|
|
172
|
-
</View>
|
|
173
|
-
</View>
|
|
174
|
-
);
|
|
175
|
-
}
|
|
176
|
-
|
|
File without changes
|
|
File without changes
|