@wavemaker/app-rn-runtime 11.11.2-rc.6152 → 11.11.3-rc.212
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/components/basic/bottomsheet/bottomsheet.component.js +315 -0
- package/components/basic/bottomsheet/bottomsheet.component.js.map +1 -0
- package/components/basic/bottomsheet/bottomsheet.props.js +16 -0
- package/components/basic/bottomsheet/bottomsheet.props.js.map +1 -0
- package/components/basic/bottomsheet/bottomsheet.styles.js +79 -0
- package/components/basic/bottomsheet/bottomsheet.styles.js.map +1 -0
- package/components/basic/progress-bar/progress-bar.component.js +36 -1
- package/components/basic/progress-bar/progress-bar.component.js.map +1 -1
- package/components/basic/progress-bar/progress-bar.props.js +3 -0
- package/components/basic/progress-bar/progress-bar.props.js.map +1 -1
- package/components/basic/progress-bar/progress-bar.styles.js +18 -2
- package/components/basic/progress-bar/progress-bar.styles.js.map +1 -1
- package/components/basic/tooltip/tooltip.component.js +2 -2
- package/components/basic/tooltip/tooltip.component.js.map +1 -1
- package/components/container/wizard/wizard.component.js +7 -7
- package/components/container/wizard/wizard.component.js.map +1 -1
- package/components/container/wizard/wizard.styles.js +12 -0
- package/components/container/wizard/wizard.styles.js.map +1 -1
- package/components/data/list/list.component.js +15 -12
- package/components/data/list/list.component.js.map +1 -1
- package/components/input/slider/slider.component.js +1 -3
- package/components/input/slider/slider.component.js.map +1 -1
- package/core/accessibility.js +2 -0
- package/core/accessibility.js.map +1 -1
- package/npm-shrinkwrap.json +223 -119
- package/package-lock.json +223 -119
- package/package.json +2 -2
- package/styles/theme.variables.js +3 -0
- package/styles/theme.variables.js.map +1 -1
@@ -0,0 +1,315 @@
|
|
1
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
2
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
3
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
4
|
+
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
5
|
+
import React, { createRef } from 'react';
|
6
|
+
import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
|
7
|
+
import { View, Animated, PanResponder, Dimensions, TouchableWithoutFeedback, Platform, ScrollView, StatusBar, BackHandler } from 'react-native';
|
8
|
+
import WmBottomsheetProps from './bottomsheet.props';
|
9
|
+
import { DEFAULT_CLASS } from './bottomsheet.styles';
|
10
|
+
import { createSkeleton } from '../skeleton/skeleton.component';
|
11
|
+
import { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility';
|
12
|
+
const {
|
13
|
+
height: SCREEN_HEIGHT
|
14
|
+
} = Dimensions.get('screen');
|
15
|
+
export class WmBottomsheetState extends BaseComponentState {
|
16
|
+
constructor(...args) {
|
17
|
+
super(...args);
|
18
|
+
_defineProperty(this, "translateY", new Animated.Value(SCREEN_HEIGHT));
|
19
|
+
_defineProperty(this, "backdropOpacity", new Animated.Value(0));
|
20
|
+
_defineProperty(this, "sheetHeight", new Animated.Value(0));
|
21
|
+
_defineProperty(this, "lastGestureDy", 0);
|
22
|
+
_defineProperty(this, "scrollViewRef", /*#__PURE__*/createRef());
|
23
|
+
_defineProperty(this, "isScrolling", false);
|
24
|
+
_defineProperty(this, "scrollOffset", 0);
|
25
|
+
_defineProperty(this, "isExpanded", false);
|
26
|
+
}
|
27
|
+
}
|
28
|
+
export default class WmBottomsheet extends BaseComponent {
|
29
|
+
calculateSheetHeight(sheetheightratio) {
|
30
|
+
// Allow full range from 0.2 to 1.0 (100% of screen height)
|
31
|
+
this.maxHeightRatio = Math.min(sheetheightratio >= this.defaultHeight ? sheetheightratio : this.defaultHeight, this.maxHeight);
|
32
|
+
let calculatedHeight = SCREEN_HEIGHT * this.maxHeightRatio;
|
33
|
+
if (Platform.OS === 'ios') {
|
34
|
+
// Subtract top inset bar height for ios only if sheetheightratio is 0.9
|
35
|
+
if (this.maxHeightRatio >= 0.9) {
|
36
|
+
calculatedHeight -= this.defaultTopInset;
|
37
|
+
}
|
38
|
+
} else if (Platform.OS === 'android') {
|
39
|
+
// Subtract status bar height for Android only if sheetheightratio is 0.9
|
40
|
+
if (this.maxHeightRatio >= 0.9) {
|
41
|
+
calculatedHeight -= this.statusBarHeight;
|
42
|
+
}
|
43
|
+
}
|
44
|
+
return calculatedHeight;
|
45
|
+
}
|
46
|
+
constructor(props) {
|
47
|
+
super(props, DEFAULT_CLASS, new WmBottomsheetProps(), new WmBottomsheetState());
|
48
|
+
_defineProperty(this, "calculatedHeight", void 0);
|
49
|
+
_defineProperty(this, "expandedHeight", void 0);
|
50
|
+
_defineProperty(this, "defaultHeight", 0.2);
|
51
|
+
_defineProperty(this, "expandedDefaultHeight", 0.5);
|
52
|
+
_defineProperty(this, "maxHeight", 1.0);
|
53
|
+
// Allow full screen height
|
54
|
+
_defineProperty(this, "isBottomsheetVisible", false);
|
55
|
+
_defineProperty(this, "animationDuration", 400);
|
56
|
+
_defineProperty(this, "statusBarHeight", StatusBar.currentHeight || 0);
|
57
|
+
_defineProperty(this, "defaultTopInset", 44);
|
58
|
+
_defineProperty(this, "maxHeightRatio", 0);
|
59
|
+
_defineProperty(this, "handleBackPress", () => {
|
60
|
+
if (this.isBottomsheetVisible) {
|
61
|
+
this.closeSheet();
|
62
|
+
return true; // Prevent default back action
|
63
|
+
}
|
64
|
+
return false;
|
65
|
+
});
|
66
|
+
_defineProperty(this, "handleSwipeGesture", gestureState => {
|
67
|
+
this.updateState({
|
68
|
+
lastGestureDy: 0
|
69
|
+
});
|
70
|
+
if (gestureState.dy > 0) {
|
71
|
+
if (this.state.isExpanded) {
|
72
|
+
// Expand the bottom sheet threshold is 25% of the fully expanded height
|
73
|
+
// If the user swipe distance is below the threshold, revert to the original sheet height
|
74
|
+
if (gestureState.dy < this.expandedHeight / 4) {
|
75
|
+
Animated.parallel([Animated.timing(this.state.translateY, {
|
76
|
+
toValue: 0,
|
77
|
+
// Keep sheet open
|
78
|
+
duration: this.animationDuration,
|
79
|
+
useNativeDriver: false
|
80
|
+
}), Animated.timing(this.state.sheetHeight, {
|
81
|
+
toValue: this.calculatedHeight,
|
82
|
+
// Back to original height
|
83
|
+
duration: this.animationDuration,
|
84
|
+
useNativeDriver: false
|
85
|
+
})]).start();
|
86
|
+
this.updateState({
|
87
|
+
isExpanded: false
|
88
|
+
});
|
89
|
+
} else if (gestureState.dy > this.expandedHeight / 4 || gestureState.vy > 0.5) {
|
90
|
+
this.closeSheet();
|
91
|
+
}
|
92
|
+
} else {
|
93
|
+
if (gestureState.dy > 100 || gestureState.vy > 0.5) {
|
94
|
+
this.closeSheet();
|
95
|
+
} else {
|
96
|
+
this.openSheet();
|
97
|
+
}
|
98
|
+
}
|
99
|
+
}
|
100
|
+
});
|
101
|
+
// panResponder for bottom sheet scroll view
|
102
|
+
_defineProperty(this, "panResponder", PanResponder.create({
|
103
|
+
onStartShouldSetPanResponder: (_, gestureState) => {
|
104
|
+
// Only handle the gesture if we're at the top and swiping down
|
105
|
+
return gestureState.dy > 0 && this.state.scrollOffset <= 0;
|
106
|
+
},
|
107
|
+
onMoveShouldSetPanResponder: (_, gestureState) => {
|
108
|
+
// Only handle the gesture if we're at the top and swiping down
|
109
|
+
return gestureState.dy > 0 && this.state.scrollOffset <= 0;
|
110
|
+
},
|
111
|
+
onPanResponderMove: (_, gestureState) => {
|
112
|
+
if (gestureState.dy > 0) {
|
113
|
+
const newTranslateY = Math.max(0, this.state.lastGestureDy + gestureState.dy);
|
114
|
+
this.state.translateY.setValue(newTranslateY);
|
115
|
+
}
|
116
|
+
},
|
117
|
+
onPanResponderRelease: (_, gestureState) => {
|
118
|
+
this.handleSwipeGesture(gestureState);
|
119
|
+
},
|
120
|
+
onPanResponderTerminate: () => {
|
121
|
+
this.openSheet();
|
122
|
+
}
|
123
|
+
}));
|
124
|
+
//pan repsoneder for bottom sheet dragable container
|
125
|
+
_defineProperty(this, "dragHandlePanResponder", PanResponder.create({
|
126
|
+
onStartShouldSetPanResponder: () => true,
|
127
|
+
onMoveShouldSetPanResponder: () => true,
|
128
|
+
onPanResponderMove: (_, gestureState) => {
|
129
|
+
if (gestureState.dy > 0) {
|
130
|
+
// Handle downward drag
|
131
|
+
const newTranslateY = Math.max(0, this.state.lastGestureDy + gestureState.dy);
|
132
|
+
this.state.translateY.setValue(newTranslateY);
|
133
|
+
} else if (gestureState.dy < 0 && this.props.bottompopup && this.props.sheetheightratio !== 1) {
|
134
|
+
// Handle upward drag - expand to full height
|
135
|
+
// Allow expansion to full screen height
|
136
|
+
const targetHeight = Math.min(this.expandedHeight, SCREEN_HEIGHT);
|
137
|
+
Animated.timing(this.state.sheetHeight, {
|
138
|
+
toValue: targetHeight,
|
139
|
+
duration: this.animationDuration,
|
140
|
+
useNativeDriver: false
|
141
|
+
}).start();
|
142
|
+
this.updateState({
|
143
|
+
isExpanded: true
|
144
|
+
});
|
145
|
+
}
|
146
|
+
},
|
147
|
+
onPanResponderRelease: (_, gestureState) => {
|
148
|
+
this.handleSwipeGesture(gestureState);
|
149
|
+
}
|
150
|
+
}));
|
151
|
+
_defineProperty(this, "handleScroll", event => {
|
152
|
+
const offsetY = event.nativeEvent.contentOffset.y;
|
153
|
+
this.updateState({
|
154
|
+
isScrolling: offsetY > 0,
|
155
|
+
scrollOffset: offsetY
|
156
|
+
});
|
157
|
+
});
|
158
|
+
_defineProperty(this, "openSheet", () => {
|
159
|
+
this.updateState({
|
160
|
+
lastGestureDy: 0
|
161
|
+
});
|
162
|
+
Animated.parallel([Animated.timing(this.state.translateY, {
|
163
|
+
toValue: 0,
|
164
|
+
duration: this.animationDuration,
|
165
|
+
useNativeDriver: false
|
166
|
+
}), Animated.timing(this.state.backdropOpacity, {
|
167
|
+
toValue: 1,
|
168
|
+
duration: this.animationDuration,
|
169
|
+
useNativeDriver: false
|
170
|
+
})]).start();
|
171
|
+
});
|
172
|
+
_defineProperty(this, "handleClose", () => {
|
173
|
+
var _this$props$onClose, _this$props;
|
174
|
+
this.isBottomsheetVisible = false;
|
175
|
+
(_this$props$onClose = (_this$props = this.props).onClose) === null || _this$props$onClose === void 0 || _this$props$onClose.call(_this$props);
|
176
|
+
});
|
177
|
+
_defineProperty(this, "closeSheet", () => {
|
178
|
+
Animated.parallel([Animated.timing(this.state.translateY, {
|
179
|
+
toValue: SCREEN_HEIGHT,
|
180
|
+
duration: this.animationDuration,
|
181
|
+
useNativeDriver: false
|
182
|
+
}), Animated.timing(this.state.backdropOpacity, {
|
183
|
+
toValue: 0,
|
184
|
+
duration: this.animationDuration,
|
185
|
+
useNativeDriver: false
|
186
|
+
})]).start(() => {
|
187
|
+
requestAnimationFrame(() => {
|
188
|
+
this.state.sheetHeight.setValue(this.calculatedHeight);
|
189
|
+
this.updateState({
|
190
|
+
isExpanded: false
|
191
|
+
});
|
192
|
+
this.handleClose();
|
193
|
+
});
|
194
|
+
});
|
195
|
+
});
|
196
|
+
_defineProperty(this, "closeSheetImmediate", () => {
|
197
|
+
this.state.translateY.setValue(SCREEN_HEIGHT);
|
198
|
+
this.state.backdropOpacity.setValue(0);
|
199
|
+
this.updateState({
|
200
|
+
lastGestureDy: 0,
|
201
|
+
isExpanded: false
|
202
|
+
});
|
203
|
+
requestAnimationFrame(() => {
|
204
|
+
this.state.sheetHeight.setValue(this.calculatedHeight);
|
205
|
+
this.handleClose();
|
206
|
+
});
|
207
|
+
});
|
208
|
+
this.calculatedHeight = this.calculateSheetHeight(props.sheetheightratio);
|
209
|
+
|
210
|
+
// Allow expanded height to be full screen
|
211
|
+
const expandedRatio = props.expandedheightratio || this.expandedDefaultHeight;
|
212
|
+
this.expandedHeight = SCREEN_HEIGHT * Math.max(this.expandedDefaultHeight, Math.min(expandedRatio, this.maxHeight));
|
213
|
+
if (Platform.OS === 'android') {
|
214
|
+
// Subtract top inset bar height for ios only if sheetheightratio is 0.9
|
215
|
+
if (expandedRatio >= 0.9) {
|
216
|
+
this.expandedHeight -= this.statusBarHeight;
|
217
|
+
}
|
218
|
+
}
|
219
|
+
if (Platform.OS === 'ios') {
|
220
|
+
// Subtract status bar height for Android only if sheetheightratio is 0.9
|
221
|
+
if (expandedRatio >= 0.9) {
|
222
|
+
this.expandedHeight -= this.defaultTopInset;
|
223
|
+
}
|
224
|
+
}
|
225
|
+
this.state.sheetHeight.setValue(this.calculatedHeight);
|
226
|
+
this.isBottomsheetVisible = this.props.visible || false;
|
227
|
+
if (this.isBottomsheetVisible) {
|
228
|
+
this.openSheet();
|
229
|
+
} else {
|
230
|
+
this.closeSheetImmediate();
|
231
|
+
}
|
232
|
+
}
|
233
|
+
componentDidMount() {
|
234
|
+
super.componentDidMount();
|
235
|
+
if (Platform.OS === 'android') {
|
236
|
+
BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
|
237
|
+
}
|
238
|
+
}
|
239
|
+
componentWillUnmount() {
|
240
|
+
super.componentWillUnmount();
|
241
|
+
if (Platform.OS === 'android') {
|
242
|
+
BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);
|
243
|
+
}
|
244
|
+
}
|
245
|
+
componentDidUpdate(prevProps) {
|
246
|
+
if (prevProps.sheetheightratio !== this.props.sheetheightratio) {
|
247
|
+
this.calculatedHeight = this.calculateSheetHeight(this.props.sheetheightratio);
|
248
|
+
this.state.sheetHeight.setValue(this.calculatedHeight);
|
249
|
+
}
|
250
|
+
}
|
251
|
+
onPropertyChange(name, $new, $old) {
|
252
|
+
super.onPropertyChange(name, $new, $old);
|
253
|
+
switch (name) {
|
254
|
+
case "visible":
|
255
|
+
if ($new) {
|
256
|
+
this.isBottomsheetVisible = $new || false;
|
257
|
+
if (this.isBottomsheetVisible) {
|
258
|
+
this.openSheet && this.openSheet();
|
259
|
+
}
|
260
|
+
} else {
|
261
|
+
this.closeSheetImmediate && this.closeSheetImmediate();
|
262
|
+
}
|
263
|
+
break;
|
264
|
+
}
|
265
|
+
}
|
266
|
+
renderSkeleton(props) {
|
267
|
+
return createSkeleton(this.theme, this.styles.skeleton, {
|
268
|
+
...this.styles.root,
|
269
|
+
width: this.styles.root.width,
|
270
|
+
height: this.styles.root.height
|
271
|
+
});
|
272
|
+
}
|
273
|
+
renderWidget(props) {
|
274
|
+
if (!this.isBottomsheetVisible || !props.visible) return null;
|
275
|
+
return /*#__PURE__*/React.createElement(View, _extends({
|
276
|
+
style: this.styles.root,
|
277
|
+
testID: this.getTestId('wm-bottom-sheet')
|
278
|
+
}, getAccessibilityProps(AccessibilityWidgetType.BOTTOMSHEET, props)), this._background, /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
|
279
|
+
onPress: this.closeSheet
|
280
|
+
}, /*#__PURE__*/React.createElement(Animated.View, {
|
281
|
+
style: [this.styles.backdrop, {
|
282
|
+
opacity: this.state.backdropOpacity
|
283
|
+
}],
|
284
|
+
testID: this.getTestId('wm-bottom-sheet-backdrop')
|
285
|
+
})), /*#__PURE__*/React.createElement(Animated.View, _extends({
|
286
|
+
style: [this.styles.container, {
|
287
|
+
height: this.state.sheetHeight,
|
288
|
+
transform: [{
|
289
|
+
translateY: this.state.translateY
|
290
|
+
}]
|
291
|
+
}]
|
292
|
+
}, this.panResponder.panHandlers), /*#__PURE__*/React.createElement(View, _extends({
|
293
|
+
style: this.styles.dragHandleContainer
|
294
|
+
}, this.dragHandlePanResponder.panHandlers), /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
|
295
|
+
onPress: this.closeSheet
|
296
|
+
}, /*#__PURE__*/React.createElement(View, {
|
297
|
+
style: this.styles.dragIconHandle,
|
298
|
+
testID: this.getTestId('wm-bottomsheet-drag-handle')
|
299
|
+
}))), /*#__PURE__*/React.createElement(ScrollView, {
|
300
|
+
ref: this.state.scrollViewRef,
|
301
|
+
style: this.styles.sheetContentContainer,
|
302
|
+
contentContainerStyle: this.styles.sheetScrollContent,
|
303
|
+
alwaysBounceVertical: false,
|
304
|
+
alwaysBounceHorizontal: false,
|
305
|
+
bounces: false,
|
306
|
+
showsVerticalScrollIndicator: false,
|
307
|
+
scrollEventThrottle: 16,
|
308
|
+
onScroll: this.handleScroll,
|
309
|
+
nestedScrollEnabled: true,
|
310
|
+
scrollEnabled: true,
|
311
|
+
testID: this.getTestId('wm-bottomsheet-scroll-view')
|
312
|
+
}, props.children)));
|
313
|
+
}
|
314
|
+
}
|
315
|
+
//# sourceMappingURL=bottomsheet.component.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["React","createRef","BaseComponent","BaseComponentState","View","Animated","PanResponder","Dimensions","TouchableWithoutFeedback","Platform","ScrollView","StatusBar","BackHandler","WmBottomsheetProps","DEFAULT_CLASS","createSkeleton","AccessibilityWidgetType","getAccessibilityProps","height","SCREEN_HEIGHT","get","WmBottomsheetState","constructor","args","_defineProperty","Value","WmBottomsheet","calculateSheetHeight","sheetheightratio","maxHeightRatio","Math","min","defaultHeight","maxHeight","calculatedHeight","OS","defaultTopInset","statusBarHeight","props","currentHeight","isBottomsheetVisible","closeSheet","gestureState","updateState","lastGestureDy","dy","state","isExpanded","expandedHeight","parallel","timing","translateY","toValue","duration","animationDuration","useNativeDriver","sheetHeight","start","vy","openSheet","create","onStartShouldSetPanResponder","_","scrollOffset","onMoveShouldSetPanResponder","onPanResponderMove","newTranslateY","max","setValue","onPanResponderRelease","handleSwipeGesture","onPanResponderTerminate","bottompopup","targetHeight","event","offsetY","nativeEvent","contentOffset","y","isScrolling","backdropOpacity","_this$props$onClose","_this$props","onClose","call","requestAnimationFrame","handleClose","expandedRatio","expandedheightratio","expandedDefaultHeight","visible","closeSheetImmediate","componentDidMount","addEventListener","handleBackPress","componentWillUnmount","removeEventListener","componentDidUpdate","prevProps","onPropertyChange","name","$new","$old","renderSkeleton","theme","styles","skeleton","root","width","renderWidget","createElement","_extends","style","testID","getTestId","BOTTOMSHEET","_background","onPress","backdrop","opacity","container","transform","panResponder","panHandlers","dragHandleContainer","dragHandlePanResponder","dragIconHandle","ref","scrollViewRef","sheetContentContainer","contentContainerStyle","sheetScrollContent","alwaysBounceVertical","alwaysBounceHorizontal","bounces","showsVerticalScrollIndicator","scrollEventThrottle","onScroll","handleScroll","nestedScrollEnabled","scrollEnabled","children"],"sources":["bottomsheet.component.tsx"],"sourcesContent":["import React, { createRef } from 'react';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { View, Animated, PanResponder, Dimensions, TouchableWithoutFeedback, Platform, ScrollView, PanResponderGestureState, StatusBar, BackHandler, DimensionValue } from 'react-native';\nimport WmBottomsheetProps from './bottomsheet.props';\nimport { DEFAULT_CLASS, WmBottomsheetStyles } from './bottomsheet.styles';\nimport { createSkeleton } from '../skeleton/skeleton.component';\nimport { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility';\n\n\nconst { height: SCREEN_HEIGHT } = Dimensions.get('screen');\nexport class WmBottomsheetState extends BaseComponentState<WmBottomsheetProps> {\n translateY = new Animated.Value(SCREEN_HEIGHT);\n backdropOpacity = new Animated.Value(0);\n sheetHeight = new Animated.Value(0);\n lastGestureDy = 0;\n scrollViewRef = createRef<ScrollView>();\n isScrolling = false;\n scrollOffset = 0;\n isExpanded = false;\n}\n\nexport default class WmBottomsheet extends BaseComponent<WmBottomsheetProps, WmBottomsheetState, WmBottomsheetStyles> {\n private calculatedHeight: number;\n private expandedHeight: number;\n private defaultHeight: number = 0.2;\n private expandedDefaultHeight: number = 0.5;\n private maxHeight: number = 1.0; // Allow full screen height\n private isBottomsheetVisible: boolean = false;\n private animationDuration: number = 400\n private statusBarHeight: number = StatusBar.currentHeight || 0;\n private defaultTopInset: number = 44;\n private maxHeightRatio: number = 0;\n\n private calculateSheetHeight(sheetheightratio: number): number {\n // Allow full range from 0.2 to 1.0 (100% of screen height)\n this.maxHeightRatio = Math.min(\n sheetheightratio >= this.defaultHeight ? sheetheightratio : this.defaultHeight,\n this.maxHeight\n );\n\n let calculatedHeight = SCREEN_HEIGHT * this.maxHeightRatio;\n\n if (Platform.OS === 'ios') {\n // Subtract top inset bar height for ios only if sheetheightratio is 0.9\n if (this.maxHeightRatio >= 0.9) {\n calculatedHeight -= this.defaultTopInset;\n }\n }\n else if (Platform.OS === 'android') {\n // Subtract status bar height for Android only if sheetheightratio is 0.9\n if (this.maxHeightRatio >= 0.9) {\n calculatedHeight -= this.statusBarHeight;\n }\n\n }\n return calculatedHeight;\n }\n\n constructor(props: WmBottomsheetProps) {\n super(props, DEFAULT_CLASS, new WmBottomsheetProps(), new WmBottomsheetState());\n this.calculatedHeight = this.calculateSheetHeight(props.sheetheightratio);\n\n // Allow expanded height to be full screen\n const expandedRatio = props.expandedheightratio || this.expandedDefaultHeight;\n\n\n this.expandedHeight = SCREEN_HEIGHT * Math.max(\n this.expandedDefaultHeight,\n Math.min(expandedRatio, this.maxHeight)\n );\n\n if (Platform.OS === 'android') {\n // Subtract top inset bar height for ios only if sheetheightratio is 0.9\n if (expandedRatio >= 0.9) {\n this.expandedHeight -= this.statusBarHeight;\n }\n\n }\n if (Platform.OS === 'ios') {\n // Subtract status bar height for Android only if sheetheightratio is 0.9\n if (expandedRatio >= 0.9) {\n this.expandedHeight -= this.defaultTopInset;\n }\n }\n this.state.sheetHeight.setValue(this.calculatedHeight);\n\n this.isBottomsheetVisible = this.props.visible || false;\n if (this.isBottomsheetVisible) {\n this.openSheet();\n } else {\n this.closeSheetImmediate();\n }\n }\n\n componentDidMount() {\n super.componentDidMount();\n if (Platform.OS === 'android') {\n BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);\n }\n }\n\n componentWillUnmount() {\n super.componentWillUnmount();\n if (Platform.OS === 'android') {\n BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);\n }\n }\n\n private handleBackPress = () => {\n if (this.isBottomsheetVisible) {\n this.closeSheet();\n return true; // Prevent default back action\n }\n return false;\n };\n\n componentDidUpdate(prevProps: WmBottomsheetProps) {\n if (prevProps.sheetheightratio !== this.props.sheetheightratio) {\n this.calculatedHeight = this.calculateSheetHeight(this.props.sheetheightratio);\n this.state.sheetHeight.setValue(this.calculatedHeight);\n }\n }\n\n handleSwipeGesture = (gestureState: PanResponderGestureState) => {\n this.updateState({\n lastGestureDy: 0\n } as WmBottomsheetState);\n if (gestureState.dy > 0) {\n if (this.state.isExpanded) {\n // Expand the bottom sheet threshold is 25% of the fully expanded height\n // If the user swipe distance is below the threshold, revert to the original sheet height\n if (gestureState.dy < this.expandedHeight / 4) {\n Animated.parallel([\n Animated.timing(this.state.translateY, {\n toValue: 0, // Keep sheet open\n duration: this.animationDuration,\n useNativeDriver: false,\n }),\n Animated.timing(this.state.sheetHeight, {\n toValue: this.calculatedHeight, // Back to original height\n duration: this.animationDuration,\n useNativeDriver: false,\n })\n ]).start();\n this.updateState({\n isExpanded: false\n } as WmBottomsheetState);\n }\n else if (gestureState.dy > this.expandedHeight / 4 || gestureState.vy > 0.5) {\n this.closeSheet();\n }\n }\n else {\n if (gestureState.dy > 100 || gestureState.vy > 0.5) {\n this.closeSheet();\n } else {\n this.openSheet();\n }\n }\n }\n }\n // panResponder for bottom sheet scroll view\n panResponder = PanResponder.create({\n onStartShouldSetPanResponder: (_, gestureState) => {\n // Only handle the gesture if we're at the top and swiping down\n return gestureState.dy > 0 && this.state.scrollOffset <= 0;\n },\n\n onMoveShouldSetPanResponder: (_, gestureState) => {\n // Only handle the gesture if we're at the top and swiping down\n return gestureState.dy > 0 && this.state.scrollOffset <= 0;\n },\n\n onPanResponderMove: (_, gestureState) => {\n if (gestureState.dy > 0) {\n const newTranslateY = Math.max(0, this.state.lastGestureDy + gestureState.dy);\n this.state.translateY.setValue(newTranslateY);\n\n }\n },\n\n onPanResponderRelease: (_, gestureState) => {\n this.handleSwipeGesture(gestureState)\n },\n\n onPanResponderTerminate: () => {\n this.openSheet();\n },\n });\n\n //pan repsoneder for bottom sheet dragable container\n dragHandlePanResponder = PanResponder.create({\n onStartShouldSetPanResponder: () => true,\n onMoveShouldSetPanResponder: () => true,\n onPanResponderMove: (_, gestureState) => {\n\n if (gestureState.dy > 0) { // Handle downward drag\n const newTranslateY = Math.max(0, this.state.lastGestureDy + gestureState.dy);\n this.state.translateY.setValue(newTranslateY);\n } else if (gestureState.dy < 0 && this.props.bottompopup && this.props.sheetheightratio !== 1) {\n // Handle upward drag - expand to full height\n // Allow expansion to full screen height\n const targetHeight = Math.min(this.expandedHeight, SCREEN_HEIGHT);\n Animated.timing(this.state.sheetHeight, {\n toValue: targetHeight,\n duration: this.animationDuration,\n useNativeDriver: false,\n }).start();\n this.updateState({\n isExpanded: true\n } as WmBottomsheetState);\n }\n },\n onPanResponderRelease: (_, gestureState) => {\n this.handleSwipeGesture(gestureState)\n },\n });\n\n handleScroll = (event: any) => {\n const offsetY = event.nativeEvent.contentOffset.y;\n this.updateState({\n isScrolling: offsetY > 0,\n scrollOffset: offsetY\n } as WmBottomsheetState);\n };\n\n openSheet = () => {\n this.updateState({\n lastGestureDy: 0,\n } as WmBottomsheetState);\n\n Animated.parallel([\n Animated.timing(this.state.translateY, {\n toValue: 0,\n duration: this.animationDuration,\n useNativeDriver: false,\n }),\n Animated.timing(this.state.backdropOpacity, {\n toValue: 1,\n duration: this.animationDuration,\n useNativeDriver: false,\n }),\n ]).start();\n };\n\n private handleClose = () => {\n this.isBottomsheetVisible = false;\n this.props.onClose?.();\n };\n\n closeSheet = () => {\n Animated.parallel([\n Animated.timing(this.state.translateY, {\n toValue: SCREEN_HEIGHT,\n duration: this.animationDuration,\n useNativeDriver: false,\n }),\n Animated.timing(this.state.backdropOpacity, {\n toValue: 0,\n duration: this.animationDuration,\n useNativeDriver: false,\n }),\n ]).start(() => {\n requestAnimationFrame(() => {\n this.state.sheetHeight.setValue(this.calculatedHeight);\n this.updateState({\n isExpanded: false\n } as WmBottomsheetState);\n this.handleClose();\n });\n });\n };\n\n closeSheetImmediate = () => {\n this.state.translateY.setValue(SCREEN_HEIGHT);\n this.state.backdropOpacity.setValue(0);\n this.updateState({\n lastGestureDy: 0,\n isExpanded: false\n } as WmBottomsheetState);\n requestAnimationFrame(() => {\n this.state.sheetHeight.setValue(this.calculatedHeight);\n this.handleClose();\n });\n };\n\n public onPropertyChange(name: string, $new: any, $old: any): void {\n super.onPropertyChange(name, $new, $old);\n switch (name) {\n case \"visible\":\n if ($new) {\n this.isBottomsheetVisible = $new || false;\n if (this.isBottomsheetVisible) {\n this.openSheet && this.openSheet();\n }\n } else {\n this.closeSheetImmediate && this.closeSheetImmediate();\n }\n break;\n }\n }\n\n public renderSkeleton(props: WmBottomsheetProps) {\n return createSkeleton(this.theme, this.styles.skeleton, {\n ...this.styles.root,\n width: this.styles.root.width as DimensionValue,\n height: this.styles.root.height as DimensionValue\n });\n }\n\n renderWidget(props: WmBottomsheetProps) {\n if (!this.isBottomsheetVisible || !props.visible) return null;\n\n return (\n\n <View style={this.styles.root} testID={this.getTestId('wm-bottom-sheet')} {...getAccessibilityProps(AccessibilityWidgetType.BOTTOMSHEET, props)}>\n {this._background}\n <TouchableWithoutFeedback onPress={this.closeSheet}>\n <Animated.View style={[this.styles.backdrop, { opacity: this.state.backdropOpacity }]} testID={this.getTestId('wm-bottom-sheet-backdrop')} />\n </TouchableWithoutFeedback>\n\n <Animated.View\n style={[\n this.styles.container,\n {\n height: this.state.sheetHeight,\n transform: [{ translateY: this.state.translateY }],\n },\n ]}\n {...this.panResponder.panHandlers}\n\n\n >\n <View style={this.styles.dragHandleContainer} {...this.dragHandlePanResponder.panHandlers}>\n <TouchableWithoutFeedback onPress={this.closeSheet}>\n <View style={this.styles.dragIconHandle} testID={this.getTestId('wm-bottomsheet-drag-handle')} />\n </TouchableWithoutFeedback>\n </View>\n\n <ScrollView\n ref={this.state.scrollViewRef}\n style={this.styles.sheetContentContainer}\n contentContainerStyle={this.styles.sheetScrollContent}\n alwaysBounceVertical={false}\n alwaysBounceHorizontal={false}\n bounces={false}\n showsVerticalScrollIndicator={false}\n scrollEventThrottle={16}\n onScroll={this.handleScroll}\n nestedScrollEnabled={true}\n scrollEnabled={true}\n testID={this.getTestId('wm-bottomsheet-scroll-view')}\n\n\n >\n {props.children}\n </ScrollView>\n </Animated.View>\n </View>\n\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
2
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
3
|
+
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
4
|
+
import { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';
|
5
|
+
export default class WmBottomsheetProps extends BaseProps {
|
6
|
+
constructor(...args) {
|
7
|
+
super(...args);
|
8
|
+
_defineProperty(this, "visible", false);
|
9
|
+
_defineProperty(this, "sheetheightratio", 0.3);
|
10
|
+
_defineProperty(this, "children", null);
|
11
|
+
_defineProperty(this, "bottompopup", false);
|
12
|
+
_defineProperty(this, "expandedheightratio", 0.5);
|
13
|
+
_defineProperty(this, "onClose", null);
|
14
|
+
}
|
15
|
+
}
|
16
|
+
//# sourceMappingURL=bottomsheet.props.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["BaseProps","WmBottomsheetProps","constructor","args","_defineProperty"],"sources":["bottomsheet.props.ts"],"sourcesContent":["import { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';\n\nexport default class WmBottomsheetProps extends BaseProps {\n visible: boolean = false;\n sheetheightratio:number = 0.3;\n children? = null as any;\n bottompopup?:boolean = false;\n expandedheightratio?:number = 0.5; \n onClose?: Function = null as any;\n\n}"],"mappings":";;;AAAA,SAASA,SAAS,QAAQ,+CAA+C;AAEzE,eAAe,MAAMC,kBAAkB,SAASD,SAAS,CAAC;EAAAE,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,kBACnC,KAAK;IAAAA,eAAA,2BACE,GAAG;IAAAA,eAAA,mBACjB,IAAI;IAAAA,eAAA,sBACO,KAAK;IAAAA,eAAA,8BACE,GAAG;IAAAA,eAAA,kBACZ,IAAI;EAAA;AAE7B","ignoreList":[]}
|
@@ -0,0 +1,79 @@
|
|
1
|
+
import BASE_THEME from '@wavemaker/app-rn-runtime/styles/theme';
|
2
|
+
import { defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';
|
3
|
+
import ThemeVariables from '@wavemaker/app-rn-runtime/styles/theme.variables';
|
4
|
+
export const DEFAULT_CLASS = 'app-bottomsheet';
|
5
|
+
BASE_THEME.registerStyle((themeVariables, addStyle) => {
|
6
|
+
const defaultStyles = defineStyles({
|
7
|
+
root: {
|
8
|
+
position: 'absolute',
|
9
|
+
top: 0,
|
10
|
+
left: 0,
|
11
|
+
right: 0,
|
12
|
+
bottom: 0,
|
13
|
+
zIndex: 9999,
|
14
|
+
elevation: 9999,
|
15
|
+
width: '100%',
|
16
|
+
height: '100%',
|
17
|
+
justifyContent: 'flex-end' // This pushes content to bottom
|
18
|
+
},
|
19
|
+
text: {},
|
20
|
+
backdrop: {
|
21
|
+
position: 'absolute',
|
22
|
+
top: 0,
|
23
|
+
left: 0,
|
24
|
+
right: 0,
|
25
|
+
bottom: 0,
|
26
|
+
width: '100%',
|
27
|
+
height: '100%',
|
28
|
+
backgroundColor: ThemeVariables.INSTANCE.bottomSheetBgColor
|
29
|
+
},
|
30
|
+
container: {
|
31
|
+
backgroundColor: '#fff',
|
32
|
+
borderTopLeftRadius: 28,
|
33
|
+
borderTopRightRadius: 28,
|
34
|
+
shadowColor: '#000',
|
35
|
+
shadowOffset: {
|
36
|
+
width: 0,
|
37
|
+
height: -2
|
38
|
+
},
|
39
|
+
shadowOpacity: 0.05,
|
40
|
+
shadowRadius: 3,
|
41
|
+
elevation: 5,
|
42
|
+
borderTopWidth: 0.5,
|
43
|
+
borderColor: ThemeVariables.INSTANCE.bottomSheetBgColor,
|
44
|
+
width: '100%',
|
45
|
+
maxHeight: '100%',
|
46
|
+
// Allow full screen height
|
47
|
+
minHeight: 100 // Minimum height to prevent too small sheets
|
48
|
+
},
|
49
|
+
dragHandleContainer: {
|
50
|
+
paddingVertical: 16,
|
51
|
+
alignItems: 'center',
|
52
|
+
borderBottomWidth: 1,
|
53
|
+
borderBottomColor: ThemeVariables.INSTANCE.bottomSheetBgColor,
|
54
|
+
backgroundColor: '#fff',
|
55
|
+
borderTopLeftRadius: 28,
|
56
|
+
borderTopRightRadius: 28
|
57
|
+
},
|
58
|
+
dragIconHandle: {
|
59
|
+
width: 36,
|
60
|
+
height: 4,
|
61
|
+
backgroundColor: ThemeVariables.INSTANCE.bottomSheetDragIconcolor,
|
62
|
+
borderRadius: 2
|
63
|
+
},
|
64
|
+
sheetContentContainer: {
|
65
|
+
flex: 1,
|
66
|
+
maxHeight: '100%' // Ensure it doesn't exceed container
|
67
|
+
},
|
68
|
+
sheetScrollContent: {
|
69
|
+
paddingHorizontal: 20,
|
70
|
+
paddingBottom: 20,
|
71
|
+
flexGrow: 1
|
72
|
+
},
|
73
|
+
skeleton: {
|
74
|
+
root: {}
|
75
|
+
}
|
76
|
+
});
|
77
|
+
addStyle(DEFAULT_CLASS, '', defaultStyles);
|
78
|
+
});
|
79
|
+
//# sourceMappingURL=bottomsheet.styles.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["BASE_THEME","defineStyles","ThemeVariables","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","position","top","left","right","bottom","zIndex","elevation","width","height","justifyContent","text","backdrop","backgroundColor","INSTANCE","bottomSheetBgColor","container","borderTopLeftRadius","borderTopRightRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","borderTopWidth","borderColor","maxHeight","minHeight","dragHandleContainer","paddingVertical","alignItems","borderBottomWidth","borderBottomColor","dragIconHandle","bottomSheetDragIconcolor","borderRadius","sheetContentContainer","flex","sheetScrollContent","paddingHorizontal","paddingBottom","flexGrow","skeleton"],"sources":["bottomsheet.styles.ts"],"sourcesContent":["import BASE_THEME from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { TextStyle, ViewStyle } from 'react-native';\nimport { WmSkeletonStyles } from '../skeleton/skeleton.styles';\nimport ThemeVariables from '@wavemaker/app-rn-runtime/styles/theme.variables';\nexport type WmBottomsheetStyles = BaseStyles & {\n root: ViewStyle;\n backdrop: ViewStyle;\n container: ViewStyle;\n dragHandleContainer: ViewStyle;\n dragIconHandle: ViewStyle;\n sheetContentContainer: ViewStyle;\n sheetScrollContent: ViewStyle;\n skeleton: WmSkeletonStyles\n};\n\nexport const DEFAULT_CLASS = 'app-bottomsheet';\n\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n const defaultStyles = defineStyles<WmBottomsheetStyles>({\n root: {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n zIndex: 9999,\n elevation: 9999,\n width: '100%',\n height: '100%',\n justifyContent: 'flex-end', // This pushes content to bottom\n },\n text: {},\n backdrop: {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n width: '100%',\n height: '100%',\n backgroundColor: ThemeVariables.INSTANCE.bottomSheetBgColor\n },\n container: {\n backgroundColor: '#fff',\n borderTopLeftRadius: 28,\n borderTopRightRadius: 28,\n shadowColor: '#000',\n shadowOffset: { width: 0, height: -2 },\n shadowOpacity: 0.05,\n shadowRadius: 3,\n elevation: 5,\n borderTopWidth: 0.5,\n borderColor: ThemeVariables.INSTANCE.bottomSheetBgColor,\n width: '100%',\n maxHeight: '100%', // Allow full screen height\n minHeight: 100, // Minimum height to prevent too small sheets\n },\n dragHandleContainer: {\n paddingVertical: 16,\n alignItems: 'center',\n borderBottomWidth: 1,\n borderBottomColor: ThemeVariables.INSTANCE.bottomSheetBgColor,\n backgroundColor: '#fff',\n borderTopLeftRadius: 28,\n borderTopRightRadius: 28,\n },\n dragIconHandle: {\n width: 36,\n height: 4,\n backgroundColor: ThemeVariables.INSTANCE.bottomSheetDragIconcolor,\n borderRadius: 2,\n },\n sheetContentContainer: {\n flex: 1,\n maxHeight: '100%', // Ensure it doesn't exceed container\n },\n sheetScrollContent: {\n paddingHorizontal: 20,\n paddingBottom: 20,\n flexGrow: 1,\n },\n skeleton: {\n root: {\n \n }\n } as WmSkeletonStyles\n });\n\n addStyle(DEFAULT_CLASS, '', defaultStyles);\n});"],"mappings":"AAAA,OAAOA,UAAU,MAAM,wCAAwC;AAC/D,SAAqBC,YAAY,QAAQ,+CAA+C;AAGxF,OAAOC,cAAc,MAAM,kDAAkD;AAY7E,OAAO,MAAMC,aAAa,GAAG,iBAAiB;AAE9CH,UAAU,CAACI,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACnD,MAAMC,aAAa,GAAGN,YAAY,CAAsB;IACpDO,IAAI,EAAE;MACFC,QAAQ,EAAE,UAAU;MACpBC,GAAG,EAAE,CAAC;MACNC,IAAI,EAAE,CAAC;MACPC,KAAK,EAAE,CAAC;MACRC,MAAM,EAAE,CAAC;MACTC,MAAM,EAAE,IAAI;MACZC,SAAS,EAAE,IAAI;MACfC,KAAK,EAAE,MAAM;MACbC,MAAM,EAAE,MAAM;MACdC,cAAc,EAAE,UAAU,CAAE;IAChC,CAAC;IACDC,IAAI,EAAE,CAAC,CAAC;IACRC,QAAQ,EAAE;MACNX,QAAQ,EAAE,UAAU;MACpBC,GAAG,EAAE,CAAC;MACNC,IAAI,EAAE,CAAC;MACPC,KAAK,EAAE,CAAC;MACRC,MAAM,EAAE,CAAC;MACTG,KAAK,EAAE,MAAM;MACbC,MAAM,EAAE,MAAM;MACdI,eAAe,EAAEnB,cAAc,CAACoB,QAAQ,CAACC;IAC7C,CAAC;IACDC,SAAS,EAAE;MACPH,eAAe,EAAE,MAAM;MACvBI,mBAAmB,EAAE,EAAE;MACvBC,oBAAoB,EAAE,EAAE;MACxBC,WAAW,EAAE,MAAM;MACnBC,YAAY,EAAE;QAAEZ,KAAK,EAAE,CAAC;QAAEC,MAAM,EAAE,CAAC;MAAE,CAAC;MACtCY,aAAa,EAAE,IAAI;MACnBC,YAAY,EAAE,CAAC;MACff,SAAS,EAAE,CAAC;MACZgB,cAAc,EAAE,GAAG;MACnBC,WAAW,EAAE9B,cAAc,CAACoB,QAAQ,CAACC,kBAAkB;MACvDP,KAAK,EAAE,MAAM;MACbiB,SAAS,EAAE,MAAM;MAAE;MACnBC,SAAS,EAAE,GAAG,CAAE;IACpB,CAAC;IACDC,mBAAmB,EAAE;MACjBC,eAAe,EAAE,EAAE;MACnBC,UAAU,EAAE,QAAQ;MACpBC,iBAAiB,EAAE,CAAC;MACpBC,iBAAiB,EAAErC,cAAc,CAACoB,QAAQ,CAACC,kBAAkB;MAC7DF,eAAe,EAAE,MAAM;MACvBI,mBAAmB,EAAE,EAAE;MACvBC,oBAAoB,EAAE;IAC1B,CAAC;IACDc,cAAc,EAAE;MACZxB,KAAK,EAAE,EAAE;MACTC,MAAM,EAAE,CAAC;MACTI,eAAe,EAAEnB,cAAc,CAACoB,QAAQ,CAACmB,wBAAwB;MACjEC,YAAY,EAAE;IAClB,CAAC;IACDC,qBAAqB,EAAE;MACnBC,IAAI,EAAE,CAAC;MACPX,SAAS,EAAE,MAAM,CAAE;IACvB,CAAC;IACDY,kBAAkB,EAAE;MAChBC,iBAAiB,EAAE,EAAE;MACrBC,aAAa,EAAE,EAAE;MACjBC,QAAQ,EAAE;IACd,CAAC;IACDC,QAAQ,EAAE;MACVzC,IAAI,EAAE,CAEN;IACF;EACF,CAAC,CAAC;EAEFF,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;AAC9C,CAAC,CAAC","ignoreList":[]}
|
@@ -1,4 +1,7 @@
|
|
1
1
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
2
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
3
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
4
|
+
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
2
5
|
import React from 'react';
|
3
6
|
import { View } from 'react-native';
|
4
7
|
import { ProgressBar } from 'react-native-paper';
|
@@ -9,10 +12,22 @@ import { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-r
|
|
9
12
|
import WmProgressBarProps from './progress-bar.props';
|
10
13
|
import { DEFAULT_CLASS } from './progress-bar.styles';
|
11
14
|
import { parseProgressBarLinearGradient } from '@wavemaker/app-rn-runtime/core/utils';
|
15
|
+
import WmTooltip from '../tooltip/tooltip.component';
|
12
16
|
export class WmProgressBarState extends BaseComponentState {}
|
13
17
|
export default class WmProgressBar extends BaseComponent {
|
14
18
|
constructor(props) {
|
15
19
|
super(props, DEFAULT_CLASS, new WmProgressBarProps());
|
20
|
+
_defineProperty(this, "onTooltiptext", (minValue, maxValue, percentage) => {
|
21
|
+
if (this.props.showtooltip && this.props.onTooltiptext) {
|
22
|
+
const result = this.invokeEventCallback('onTooltiptext', [undefined, this.proxy, minValue, maxValue, percentage]);
|
23
|
+
if (result) {
|
24
|
+
return result;
|
25
|
+
}
|
26
|
+
}
|
27
|
+
|
28
|
+
// Default fallback to percentage display
|
29
|
+
return `${percentage}%`;
|
30
|
+
});
|
16
31
|
}
|
17
32
|
renderWidget(props) {
|
18
33
|
var _styles$root, _styles$progressBar;
|
@@ -27,6 +42,9 @@ export default class WmProgressBar extends BaseComponent {
|
|
27
42
|
} = parseProgressBarLinearGradient(styles === null || styles === void 0 || (_styles$root = styles.root) === null || _styles$root === void 0 || (_styles$root = _styles$root.progressBar) === null || _styles$root === void 0 ? void 0 : _styles$root.backgroundColor);
|
28
43
|
const gradientColors = [color1, color2];
|
29
44
|
const valuePercent = `${Math.round(value * 100)}%`;
|
45
|
+
const percentage = Math.round(value * 100);
|
46
|
+
const progressValue = Math.min(Math.max(value, 0), 1); // Ensure value is between 0 and 1
|
47
|
+
const progressWidth = progressValue * 100;
|
30
48
|
return /*#__PURE__*/React.createElement(View, {
|
31
49
|
style: styles.root,
|
32
50
|
onLayout: event => this.handleLayout(event)
|
@@ -55,7 +73,24 @@ export default class WmProgressBar extends BaseComponent {
|
|
55
73
|
position: 'absolute',
|
56
74
|
borderRadius: (styles === null || styles === void 0 || (_styles$progressBar = styles.progressBar) === null || _styles$progressBar === void 0 ? void 0 : _styles$progressBar.borderRadius) || 0
|
57
75
|
}]
|
58
|
-
}) : /*#__PURE__*/React.createElement(React.Fragment, null)
|
76
|
+
}) : /*#__PURE__*/React.createElement(React.Fragment, null), props.showtooltip ? /*#__PURE__*/React.createElement(View, {
|
77
|
+
style: {
|
78
|
+
position: 'absolute',
|
79
|
+
left: `${progressWidth}%`,
|
80
|
+
bottom: 0,
|
81
|
+
height: '100%',
|
82
|
+
justifyContent: 'center',
|
83
|
+
alignItems: 'center',
|
84
|
+
zIndex: 10
|
85
|
+
}
|
86
|
+
}, /*#__PURE__*/React.createElement(WmTooltip, {
|
87
|
+
showTooltip: props.showtooltip,
|
88
|
+
text: this.onTooltiptext(props.minvalue, props.maxvalue, percentage),
|
89
|
+
direction: props.tooltipposition,
|
90
|
+
tooltipStyle: styles.tooltip,
|
91
|
+
tooltipLabelStyle: styles.tooltipLabel,
|
92
|
+
tooltipTriangleStyle: styles.tooltipTriangle
|
93
|
+
})) : /*#__PURE__*/React.createElement(React.Fragment, null)));
|
59
94
|
}
|
60
95
|
}
|
61
96
|
//# sourceMappingURL=progress-bar.component.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["React","View","ProgressBar","LinearGradient","ExpoLinearGradient","Tappable","BaseComponent","BaseComponentState","AccessibilityWidgetType","getAccessibilityProps","WmProgressBarProps","DEFAULT_CLASS","parseProgressBarLinearGradient","WmProgressBarState","WmProgressBar","constructor","props","renderWidget","_styles$root","_styles$progressBar","value","datavalue","minvalue","maxvalue","styles","theme","mergeStyle","getStyle","type","hasLinearGradient","color1","color2","start","end","root","progressBar","backgroundColor","gradientColors","valuePercent","Math","round","createElement","style","onLayout","event","handleLayout","_background","target","width","height","disableTouchEffect","state","disabletoucheffect","_extends","getTestPropsForAction","PROGRESSBAR","animatedValue","color","
|
1
|
+
{"version":3,"names":["React","View","ProgressBar","LinearGradient","ExpoLinearGradient","Tappable","BaseComponent","BaseComponentState","AccessibilityWidgetType","getAccessibilityProps","WmProgressBarProps","DEFAULT_CLASS","parseProgressBarLinearGradient","WmTooltip","WmProgressBarState","WmProgressBar","constructor","props","_defineProperty","minValue","maxValue","percentage","showtooltip","onTooltiptext","result","invokeEventCallback","undefined","proxy","renderWidget","_styles$root","_styles$progressBar","value","datavalue","minvalue","maxvalue","styles","theme","mergeStyle","getStyle","type","hasLinearGradient","color1","color2","start","end","root","progressBar","backgroundColor","gradientColors","valuePercent","Math","round","progressValue","min","max","progressWidth","createElement","style","onLayout","event","handleLayout","_background","target","width","height","disableTouchEffect","state","disabletoucheffect","_extends","getTestPropsForAction","PROGRESSBAR","animatedValue","color","colors","position","borderRadius","Fragment","left","bottom","justifyContent","alignItems","zIndex","showTooltip","text","direction","tooltipposition","tooltipStyle","tooltip","tooltipLabelStyle","tooltipLabel","tooltipTriangleStyle","tooltipTriangle"],"sources":["progress-bar.component.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { ProgressBar } from 'react-native-paper';\nimport { LinearGradient as ExpoLinearGradient } from 'expo-linear-gradient';\nimport { Tappable } from '@wavemaker/app-rn-runtime/core/tappable.component';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility';\n\nimport WmProgressBarProps from './progress-bar.props';\nimport { DEFAULT_CLASS, WmProgressBarStyles } from './progress-bar.styles';\nimport { parseProgressBarLinearGradient } from '@wavemaker/app-rn-runtime/core/utils';\nimport WmTooltip from '../tooltip/tooltip.component';\n\nexport class WmProgressBarState extends BaseComponentState<WmProgressBarProps> {}\n\nexport default class WmProgressBar extends BaseComponent<WmProgressBarProps, WmProgressBarState, WmProgressBarStyles> {\n\n constructor(props: WmProgressBarProps) {\n super(props, DEFAULT_CLASS, new WmProgressBarProps());\n }\n\n onTooltiptext = (minValue: number, maxValue: number, percentage: number) => {\n if (this.props.showtooltip && this.props.onTooltiptext) {\n const result = this.invokeEventCallback('onTooltiptext', [\n undefined,\n this.proxy,\n minValue,\n maxValue,\n percentage\n ]);\n\n if (result) {\n return result;\n }\n }\n\n // Default fallback to percentage display\n return `${percentage}%`;\n }\n\n renderWidget(props: WmProgressBarProps) {\n let value = (props.datavalue - props.minvalue) / (props.maxvalue - props.minvalue);\n const styles = this.theme.mergeStyle(this.theme.getStyle(`app-${props.type}-progress-bar`), this.styles);\n const {hasLinearGradient, color1, color2, start, end} = parseProgressBarLinearGradient(styles?.root?.progressBar?.backgroundColor as string);\n const gradientColors: [string, string, ...string[]] = [color1, color2];\n const valuePercent = `${Math.round(value * 100)}%`;\n const percentage = Math.round(value * 100);\n const progressValue = Math.min(Math.max(value, 0), 1); // Ensure value is between 0 and 1\n const progressWidth = progressValue * 100;\n\n return (\n <View \n style={styles.root}\n onLayout={(event) => this.handleLayout(event)}\n >\n {this._background}\n <Tappable target={this} styles={{root:{width: '100%', height: '100%'}}} disableTouchEffect={this.state.props.disabletoucheffect}>\n <ProgressBar\n {...this.getTestPropsForAction('progressbar')}\n {...getAccessibilityProps(AccessibilityWidgetType.PROGRESSBAR, props)}\n animatedValue={value}\n color={styles.progressValue.color}\n style={[styles.progressBar, {height: styles.root.height || styles.progressBar.height}]}\n />\n \n {/* Linear Gradient for filled portion */}\n {hasLinearGradient ? (\n <ExpoLinearGradient\n colors={gradientColors}\n start={start}\n end={end}\n style={[\n {\n width: valuePercent as any,\n height: styles.root.height || styles.progressBar.height,\n position: 'absolute',\n borderRadius: styles?.progressBar?.borderRadius || 0,\n },\n ]}\n />\n ) : (\n <></>\n )}\n \n {/* Tooltip positioned at progress value */}\n {props.showtooltip ?\n (\n <View\n style={{\n position: 'absolute',\n left: `${progressWidth}%`,\n bottom: 0,\n height: '100%',\n justifyContent: 'center',\n alignItems: 'center',\n zIndex: 10,\n }}\n >\n <WmTooltip\n showTooltip={props.showtooltip}\n text={this.onTooltiptext(props.minvalue, props.maxvalue, percentage)}\n direction={props.tooltipposition}\n tooltipStyle={styles.tooltip}\n tooltipLabelStyle={styles.tooltipLabel}\n tooltipTriangleStyle={styles.tooltipTriangle}\n />\n </View>\n ) : <></>}\n </Tappable>\n </View>); \n }\n}"],"mappings":"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","ignoreList":[]}
|
@@ -11,6 +11,9 @@ export default class WmProgressBarProps extends BaseProps {
|
|
11
11
|
_defineProperty(this, "maxvalue", 100);
|
12
12
|
_defineProperty(this, "accessibilitylabel", undefined);
|
13
13
|
_defineProperty(this, "accessibilityrole", 'progressbar');
|
14
|
+
_defineProperty(this, "showtooltip", false);
|
15
|
+
_defineProperty(this, "tooltipposition", 'up');
|
16
|
+
_defineProperty(this, "onTooltiptext", null);
|
14
17
|
}
|
15
18
|
}
|
16
19
|
//# sourceMappingURL=progress-bar.props.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["BaseProps","WmProgressBarProps","constructor","args","_defineProperty","undefined"],"sources":["progress-bar.props.ts"],"sourcesContent":["import { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { AccessibilityRole } from 'react-native';\nexport default class WmProgressBarProps extends BaseProps {\n type: 'default' | 'success' | 'info' | 'warning' | 'error' = 'default';\n datavalue: number = 30;\n minvalue: number = 0;\n maxvalue: number = 100;\n accessibilitylabel?: string = undefined;\n accessibilityrole?: AccessibilityRole = 'progressbar';\n}"],"mappings":";;;AAAA,SAASA,SAAS,QAAQ,+CAA+C;AAEzE,eAAe,MAAMC,kBAAkB,SAASD,SAAS,CAAC;EAAAE,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,eACK,SAAS;IAAAA,eAAA,oBAClD,EAAE;IAAAA,eAAA,mBACH,CAAC;IAAAA,eAAA,mBACD,GAAG;IAAAA,eAAA,6BACQC,SAAS;IAAAD,eAAA,4BACC,aAAa;EAAA;
|
1
|
+
{"version":3,"names":["BaseProps","WmProgressBarProps","constructor","args","_defineProperty","undefined"],"sources":["progress-bar.props.ts"],"sourcesContent":["import { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { AccessibilityRole } from 'react-native';\nexport default class WmProgressBarProps extends BaseProps {\n type: 'default' | 'success' | 'info' | 'warning' | 'error' = 'default';\n datavalue: number = 30;\n minvalue: number = 0;\n maxvalue: number = 100;\n accessibilitylabel?: string = undefined;\n accessibilityrole?: AccessibilityRole = 'progressbar';\n showtooltip?: boolean = false;\n tooltipposition?: 'up' | 'down' | 'left' | 'right' = 'up';\n onTooltiptext?: Function | null = null;\n}"],"mappings":";;;AAAA,SAASA,SAAS,QAAQ,+CAA+C;AAEzE,eAAe,MAAMC,kBAAkB,SAASD,SAAS,CAAC;EAAAE,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,eACK,SAAS;IAAAA,eAAA,oBAClD,EAAE;IAAAA,eAAA,mBACH,CAAC;IAAAA,eAAA,mBACD,GAAG;IAAAA,eAAA,6BACQC,SAAS;IAAAD,eAAA,4BACC,aAAa;IAAAA,eAAA,sBAC7B,KAAK;IAAAA,eAAA,0BACwB,IAAI;IAAAA,eAAA,wBACvB,IAAI;EAAA;AACxC","ignoreList":[]}
|