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.
@@ -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"}
@@ -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
-