@wavemaker/app-rn-runtime 12.0.0-next.46502 → 12.0.0-next.47809

package/components/basic/audio/audio.component.js

@@ -0,0 +1,252 @@
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+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); }
+import React from 'react';
+import { Platform, Text, View } from 'react-native';
+import Slider from '@react-native-community/slider';
+import { isString } from 'lodash-es';
+import { Audio } from 'expo-av';
+import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
+import WmAudioProps from './audio.props';
+import { DEFAULT_CLASS } from './audio.styles';
+import WmIcon from '../icon/icon.component';
+import { isWebPreviewMode } from '@wavemaker/app-rn-runtime/core/utils';
+import { createSkeleton } from '../skeleton/skeleton.component';
+export class WmAudioState extends BaseComponentState {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "playing", false);
+    _defineProperty(this, "currentTime", 0);
+    _defineProperty(this, "totalTime", 0);
+  }
+}
+export default class WmAudio extends BaseComponent {
+  constructor(props) {
+    super(props, DEFAULT_CLASS, new WmAudioProps(), new WmAudioState());
+    _defineProperty(this, "loading", false);
+    _defineProperty(this, "sound", null);
+    _defineProperty(this, "timer", void 0);
+    _defineProperty(this, "offsetTime", 0);
+  }
+  onPropertyChange(name, $new, $old) {
+    super.onPropertyChange(name, $new, $old);
+    switch (name) {
+      case 'mp3format':
+        {
+          if (this.initialized) {
+            Promise.resolve().then(() => {
+              var _this$sound;
+              return (_this$sound = this.sound) === null || _this$sound === void 0 ? void 0 : _this$sound.unloadAsync();
+            }).then(() => {
+              this.sound = null;
+              this.onSeekChange(0);
+              if (this.state.playing || this.state.props.autoplay) {
+                this.play();
+              }
+            });
+          }
+        }
+        break;
+      case 'autoplay':
+        if (this.initialized && $new) {
+          this.play();
+        }
+    }
+  }
+  getSource() {
+    const source = this.loadAsset && this.state.props.mp3format && this.loadAsset(this.state.props.mp3format);
+    if (isString(source)) {
+      return {
+        uri: source
+      };
+    }
+    return source;
+  }
+  addPadding(str, maxLen, pad = '0') {
+    if (str.length < maxLen) {
+      return this.addPadding(pad + str, maxLen, pad);
+    }
+    return str;
+  }
+  formatTime(v) {
+    const t = v / 60;
+    const mins = Math.floor(t);
+    const seconds = Math.round((t - mins) * 60);
+    return this.addPadding(mins + '', 2) + ':' + this.addPadding(seconds + '', 2);
+  }
+  setTimer() {
+    this.cancelTimer();
+    this.timer = setInterval(() => {
+      if (this.state.currentTime >= this.state.totalTime) {
+        if (this.state.props.loop) {
+          this.replay();
+        } else {
+          this.stop();
+        }
+        return;
+      }
+      this.setState({
+        currentTime: Math.max(this.offsetTime + this.state.currentTime + 1, 0)
+      });
+      this.offsetTime = 0;
+    }, 1000);
+  }
+  cancelTimer() {
+    clearInterval(this.timer);
+  }
+  stop() {
+    var _this$sound2;
+    this.pause();
+    (_this$sound2 = this.sound) === null || _this$sound2 === void 0 || _this$sound2.unloadAsync();
+    this.sound = null;
+    this.cancelTimer();
+    this.offsetTime = 0;
+    this.updateState({
+      currentTime: 0
+    });
+  }
+  replay() {
+    this.updateState({
+      currentTime: 0
+    }, () => {
+      this.sound.replayAsync();
+    });
+  }
+  play() {
+    if (isWebPreviewMode() || this.loading || this.state.playing && this.sound) {
+      return;
+    }
+    if (this.sound) {
+      this.sound.playAsync();
+      this.setTimer();
+      this.updateState({
+        playing: true
+      });
+    } else {
+      this.loading = true;
+      const source = this.getSource();
+      source && Audio.Sound.createAsync(source, {
+        isMuted: this.state.props.muted
+      }).then(res => {
+        this.sound = res.sound;
+        this.sound.playAsync();
+        this.sound.getStatusAsync().then(status => {
+          this.updateState({
+            currentTime: 0,
+            totalTime: Math.round(status['durationMillis'] / 1000)
+          }, () => this.setTimer());
+        });
+        this.updateState({
+          playing: true
+        });
+      }).catch(() => {}).then(() => {
+        this.loading = false;
+      });
+    }
+  }
+  pause() {
+    var _this$sound3;
+    this.cancelTimer();
+    (_this$sound3 = this.sound) === null || _this$sound3 === void 0 || _this$sound3.pauseAsync().then(() => {
+      this.updateState({
+        playing: false
+      });
+    });
+  }
+  mute() {
+    this.sound.setStatusAsync({
+      isMuted: true
+    }).then(() => {
+      this.updateState({
+        props: {
+          muted: true
+        }
+      });
+    });
+  }
+  unmute() {
+    this.sound.setStatusAsync({
+      isMuted: false
+    }).then(() => {
+      this.updateState({
+        props: {
+          muted: false
+        }
+      });
+    });
+  }
+  onSeekChange(time) {
+    if (time !== this.state.currentTime) {
+      var _this$sound4;
+      this.offsetTime = time - this.state.currentTime;
+      (_this$sound4 = this.sound) === null || _this$sound4 === void 0 || _this$sound4.setPositionAsync(time * 1000);
+    }
+  }
+  componentDidMount() {
+    super.componentDidMount();
+    //without settimeout, app is crashing with errors
+    setTimeout(() => {
+      if (this.state.props.autoplay) {
+        this.play();
+      }
+    }, 1000);
+  }
+  componentWillUnmount() {
+    super.componentWillUnmount();
+    this.stop();
+  }
+  renderTextSkeleton() {
+    return createSkeleton(this.theme, {}, {
+      ...this.styles.text,
+      ...this.styles.textSkeleton.root
+    });
+  }
+  renderWidget(props) {
+    return props.controls ? /*#__PURE__*/React.createElement(View, {
+      style: this.styles.root,
+      onLayout: event => this.handleLayout(event)
+    }, this._background, !this.state.playing ? /*#__PURE__*/React.createElement(WmIcon, {
+      id: this.getTestId('play'),
+      name: props.name + "_play",
+      styles: this.styles.playIcon,
+      iconclass: "wi wi-play-arrow fa-2x",
+      onTap: () => this.play()
+    }) : /*#__PURE__*/React.createElement(WmIcon, {
+      name: props.name + "_pause",
+      id: this.getTestId('pause'),
+      iconclass: "wi wi-pause fa-2x",
+      styles: this.styles.pauseIcon,
+      onTap: () => this.pause()
+    }), this._showSkeleton ? this.renderTextSkeleton() : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+      style: this.styles.text
+    }, `${this.formatTime(this.state.currentTime)} / ${this.formatTime(this.state.totalTime)}`), /*#__PURE__*/React.createElement(Slider, {
+      testID: this.getTestId('slider'),
+      step: 1,
+      style: {
+        flex: 1
+      },
+      value: this.state.currentTime,
+      disabled: isWebPreviewMode(),
+      onValueChange: this.onSeekChange.bind(this),
+      minimumValue: 0,
+      inverted: this.isRTL && (Platform.OS == "android" || Platform.OS == "web"),
+      maximumValue: this.state.totalTime || 1,
+      thumbTintColor: this.styles.slider.thumb.backgroundColor,
+      minimumTrackTintColor: this.styles.slider.minimumTrack.backgroundColor,
+      maximumTrackTintColor: this.styles.slider.maximumTrack.backgroundColor
+    })), !props.muted ? /*#__PURE__*/React.createElement(WmIcon, {
+      name: props.name + "_mute",
+      id: this.getTestId('mute'),
+      iconclass: "wi wi-volume-up fa-2x",
+      styles: this.styles.muteIcon,
+      onTap: () => this.mute()
+    }) : /*#__PURE__*/React.createElement(WmIcon, {
+      name: props.name + "_unmute",
+      id: this.getTestId('unmute'),
+      iconclass: "wi wi-volume-off fa-2x",
+      styles: this.styles.unmuteIcon,
+      onTap: () => this.unmute()
+    })) : null;
+  }
+}
+//# sourceMappingURL=audio.component.js.map

package/components/basic/audio/audio.component.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Platform","Text","View","Slider","isString","Audio","BaseComponent","BaseComponentState","WmAudioProps","DEFAULT_CLASS","WmIcon","isWebPreviewMode","createSkeleton","WmAudioState","constructor","args","_defineProperty","WmAudio","props","onPropertyChange","name","$new","$old","initialized","Promise","resolve","then","_this$sound","sound","unloadAsync","onSeekChange","state","playing","autoplay","play","getSource","source","loadAsset","mp3format","uri","addPadding","str","maxLen","pad","length","formatTime","v","t","mins","Math","floor","seconds","round","setTimer","cancelTimer","timer","setInterval","currentTime","totalTime","loop","replay","stop","setState","max","offsetTime","clearInterval","_this$sound2","pause","updateState","replayAsync","loading","playAsync","Sound","createAsync","isMuted","muted","res","getStatusAsync","status","catch","_this$sound3","pauseAsync","mute","setStatusAsync","unmute","time","_this$sound4","setPositionAsync","componentDidMount","setTimeout","componentWillUnmount","renderTextSkeleton","theme","styles","text","textSkeleton","root","renderWidget","controls","createElement","style","onLayout","event","handleLayout","_background","id","getTestId","playIcon","iconclass","onTap","pauseIcon","_showSkeleton","Fragment","testID","step","flex","value","disabled","onValueChange","bind","minimumValue","inverted","isRTL","OS","maximumValue","thumbTintColor","slider","thumb","backgroundColor","minimumTrackTintColor","minimumTrack","maximumTrackTintColor","maximumTrack","muteIcon","unmuteIcon"],"sources":["audio.component.tsx"],"sourcesContent":["import React from 'react';\nimport { DimensionValue, Platform, Text, View } from 'react-native';\nimport Slider from '@react-native-community/slider';\nimport { isString } from 'lodash-es';\nimport { Audio } from 'expo-av';\nimport { Sound } from 'expo-av/build/Audio';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\nimport WmAudioProps from './audio.props';\nimport { DEFAULT_CLASS, WmAudioStyles } from './audio.styles';\nimport WmIcon from '../icon/icon.component';\nimport { isWebPreviewMode } from '@wavemaker/app-rn-runtime/core/utils';\nimport { createSkeleton } from '../skeleton/skeleton.component';\nimport { WmSkeletonStyles } from '../skeleton/skeleton.styles';\n\nexport class WmAudioState extends BaseComponentState<WmAudioProps> {\n  playing = false;\n  currentTime = 0;\n  totalTime = 0;\n}\n\nexport default class WmAudio extends BaseComponent<WmAudioProps, WmAudioState, WmAudioStyles> {\n\n  private loading = false;\n  private sound: Sound = null as any;\n  private timer: any;\n  private offsetTime = 0;\n\n  constructor(props: WmAudioProps) {\n    super(props, DEFAULT_CLASS, new WmAudioProps(), new WmAudioState());\n  }\n\n  onPropertyChange(name: string, $new: any, $old: any): void {\n      super.onPropertyChange(name, $new, $old);\n      switch(name) {\n        case 'mp3format': {\n          if (this.initialized) {\n            Promise.resolve()\n              .then(() => this.sound?.unloadAsync())\n              .then(() => {\n                this.sound = null as any;\n                this.onSeekChange(0);\n                if (this.state.playing \n                  || this.state.props.autoplay) {\n                  this.play();\n                }\n              });\n          }\n        }\n        break;\n        case 'autoplay':\n          if (this.initialized && $new) {\n            this.play();\n          }\n      }\n  }\n\n  getSource() {\n    const source = this.loadAsset \n      && this.state.props.mp3format\n      && this.loadAsset(this.state.props.mp3format as string);\n    if (isString(source)) {\n      return {\n        uri: source\n      };\n    }\n    return source;\n  }\n\n  addPadding(str: string, maxLen: number,  pad = '0'): string {\n    if (str.length < maxLen) {\n      return this.addPadding(pad + str, maxLen, pad);\n    }\n    return str;\n  }\n\n  formatTime(v: number) {\n    const t = v/60;\n    const mins =  Math.floor(t);\n    const seconds = Math.round((t - mins) * 60);\n    return this.addPadding(mins+ '', 2) + ':' + this.addPadding(seconds+ '', 2);\n  }\n\n  setTimer() {\n    this.cancelTimer();\n    this.timer = setInterval(() => {\n      if (this.state.currentTime >= this.state.totalTime) {\n        if (this.state.props.loop) {\n          this.replay();\n        } else {\n          this.stop();\n        }\n        return;\n      }\n      this.setState({\n        currentTime:  Math.max(this.offsetTime + this.state.currentTime + 1, 0)\n      } as WmAudioState);\n      this.offsetTime = 0;\n    }, 1000);\n  }\n\n  cancelTimer() {\n    clearInterval(this.timer);\n  }\n\n  stop() {\n    this.pause();\n    this.sound?.unloadAsync();\n    this.sound = null as any;\n    this.cancelTimer();\n    this.offsetTime = 0;\n    this.updateState({\n      currentTime: 0\n    } as WmAudioState);\n  }\n\n  replay() {\n    this.updateState({\n      currentTime: 0\n    } as WmAudioState, () => {\n      this.sound.replayAsync();\n    });\n  }\n\n  play() {\n    if (isWebPreviewMode() \n      || this.loading\n      || (this.state.playing && this.sound)) {\n      return;\n    }\n    if (this.sound) {\n      this.sound.playAsync();\n      this.setTimer();\n      this.updateState({\n        playing: true\n      } as WmAudioState);\n    } else {\n      this.loading = true;\n      const source = this.getSource();\n      source && Audio.Sound.createAsync(source, {\n        isMuted: this.state.props.muted\n      })\n        .then((res) => {\n          this.sound = res.sound;\n          this.sound.playAsync();\n          this.sound.getStatusAsync().then((status: any) => {\n            this.updateState({\n              currentTime: 0,\n              totalTime: Math.round(status['durationMillis']/1000)\n            } as WmAudioState, () => this.setTimer());\n          });\n          this.updateState({\n            playing: true\n          } as WmAudioState);\n        }).catch(() => {}).then(() => {\n          this.loading = false;\n        });\n    }\n  }\n\n  pause() {\n    this.cancelTimer();\n    this.sound?.pauseAsync().then(() => {\n      this.updateState({\n        playing: false\n      } as WmAudioState);\n    })\n  }\n\n  mute() {\n    this.sound.setStatusAsync({\n      isMuted: true\n    }).then(() => {\n      this.updateState({\n        props: {\n          muted: true\n        }\n      } as WmAudioState);\n    });\n  }\n\n  unmute() {\n    this.sound.setStatusAsync({\n      isMuted: false\n    }).then(() => {\n      this.updateState({\n        props: {\n          muted: false\n        }\n      } as WmAudioState);\n    });\n  }\n\n  onSeekChange(time: number) {\n    if (time !== this.state.currentTime) {\n      this.offsetTime = time - this.state.currentTime;\n      this.sound?.setPositionAsync(time * 1000);\n    }\n  }\n\n  componentDidMount(): void {\n    super.componentDidMount();\n    //without settimeout, app is crashing with errors\n    setTimeout(() => {\n      if (this.state.props.autoplay) {\n        this.play();\n      }\n    }, 1000);\n  }\n\n  componentWillUnmount(): void {\n    super.componentWillUnmount();\n    this.stop();\n  }\n\n  public renderTextSkeleton(): React.ReactNode {\n      return (\n        createSkeleton(this.theme, {} as WmSkeletonStyles, {\n          ...this.styles.text,\n          ...this.styles.textSkeleton.root\n        })\n      )\n  } \n  renderWidget(props: WmAudioProps) {\n    return props.controls ? (\n      <View \n        style={this.styles.root}\n        onLayout={(event) => this.handleLayout(event)}\n      >\n        {this._background}\n        {!this.state.playing ? (<WmIcon \n          id={this.getTestId('play')}\n          name={props.name + \"_play\"}\n          styles={this.styles.playIcon}\n          iconclass=\"wi wi-play-arrow fa-2x\"\n          onTap={() => this.play()}></WmIcon>) : (\n        <WmIcon name={props.name + \"_pause\"}\n          id={this.getTestId('pause')}\n          iconclass=\"wi wi-pause fa-2x\"\n          styles={this.styles.pauseIcon}\n          onTap={() => this.pause()}></WmIcon>)}\n        {\n          this._showSkeleton ? this.renderTextSkeleton() : \n          <>\n            <Text style={this.styles.text}>\n            {`${this.formatTime(this.state.currentTime)} / ${this.formatTime(this.state.totalTime)}`}\n            </Text>\n            <Slider\n            testID={this.getTestId('slider')}\n            step={1}\n            style={{flex: 1}}\n            value={this.state.currentTime}\n            disabled={isWebPreviewMode()}\n            onValueChange={this.onSeekChange.bind(this)}\n            minimumValue={0}\n            inverted={this.isRTL && (Platform.OS==\"android\" || Platform.OS==\"web\")}\n            maximumValue={this.state.totalTime || 1}\n            thumbTintColor={this.styles.slider.thumb.backgroundColor as string}\n            minimumTrackTintColor={this.styles.slider.minimumTrack.backgroundColor as string}\n            maximumTrackTintColor={this.styles.slider.maximumTrack.backgroundColor as string}\n            />\n          </>\n        }\n        {!props.muted ? (<WmIcon name={props.name + \"_mute\"}\n          id={this.getTestId('mute')}\n          iconclass=\"wi wi-volume-up fa-2x\"\n          styles={this.styles.muteIcon}\n          onTap={() => this.mute()}></WmIcon>) :\n        (<WmIcon name={props.name + \"_unmute\"}\n          id={this.getTestId('unmute')}\n          iconclass=\"wi wi-volume-off fa-2x\"\n          styles={this.styles.unmuteIcon}\n          onTap={() => this.unmute()}></WmIcon>)}\n      </View>) : null; \n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/components/basic/audio/audio.props.js

@@ -0,0 +1,15 @@
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+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); }
+import { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';
+export default class WmAudioProps extends BaseProps {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "mp3format", '');
+    _defineProperty(this, "controls", false);
+    _defineProperty(this, "autoplay", false);
+    _defineProperty(this, "loop", false);
+    _defineProperty(this, "muted", false);
+  }
+}
+//# sourceMappingURL=audio.props.js.map

package/components/basic/bottomsheet/bottomsheet.component.js

@@ -0,0 +1,363 @@
+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); }
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+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); }
+import React, { createRef } from 'react';
+import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
+import { View, Animated, PanResponder, Dimensions, TouchableWithoutFeedback, Platform, ScrollView, StatusBar, BackHandler, Keyboard } from 'react-native';
+import WmBottomsheetProps from './bottomsheet.props';
+import { DEFAULT_CLASS } from './bottomsheet.styles';
+import { createSkeleton } from '../skeleton/skeleton.component';
+import { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility';
+import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
+const {
+  height: SCREEN_HEIGHT
+} = Dimensions.get('screen');
+export class WmBottomsheetState extends BaseComponentState {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "translateY", new Animated.Value(SCREEN_HEIGHT));
+    _defineProperty(this, "backdropOpacity", new Animated.Value(0));
+    _defineProperty(this, "sheetHeight", new Animated.Value(0));
+    _defineProperty(this, "lastGestureDy", 0);
+    _defineProperty(this, "scrollViewRef", /*#__PURE__*/createRef());
+    _defineProperty(this, "isScrolling", false);
+    _defineProperty(this, "scrollOffset", 0);
+    _defineProperty(this, "isExpanded", false);
+    _defineProperty(this, "isBottomsheetVisible", false);
+    _defineProperty(this, "keyboardHeight", 0);
+  }
+}
+export default class WmBottomsheet extends BaseComponent {
+  calculateSheetHeight(bottomsheetheightratio) {
+    // Use default height if ratio not provided, but ensure it's not below minimum
+    const effectiveRatio = bottomsheetheightratio || this.defaultHeight;
+    this.maxHeightRatio = Math.max(this.minimumHeight, Math.min(effectiveRatio, this.maxHeight));
+    const screenHeight = Dimensions.get('screen').height;
+    const windowHeight = Dimensions.get('window').height;
+    let calculatedHeight = screenHeight * this.maxHeightRatio;
+    if (Platform.OS === 'ios') {
+      // Subtract top inset bar height for ios only if bottomsheetheightratio is 0.9
+      if (this.maxHeightRatio >= 0.9) {
+        calculatedHeight -= this.defaultTopInset;
+      }
+    } else if (Platform.OS === 'android') {
+      // Subtract status bar height for Android only if bottomsheetheightratio is 0.9
+      if (this.maxHeightRatio >= 0.9) {
+        calculatedHeight -= this.statusBarHeight;
+      }
+    }
+    return calculatedHeight;
+  }
+  open() {
+    if (!this.state.isBottomsheetVisible) this.updateState({
+      isBottomsheetVisible: true
+    });
+    this.openSheet();
+  }
+  close() {
+    if (this.state.isBottomsheetVisible) {
+      this.closeSheet();
+    }
+  }
+  constructor(props) {
+    super(props, DEFAULT_CLASS, new WmBottomsheetProps(), new WmBottomsheetState());
+    _defineProperty(this, "calculatedHeight", void 0);
+    _defineProperty(this, "expandedHeight", void 0);
+    _defineProperty(this, "defaultHeight", 0.5);
+    _defineProperty(this, "expandedDefaultHeight", 0.8);
+    _defineProperty(this, "minimumHeight", 0.2);
+    _defineProperty(this, "minimumExpandedHeight", 0.5);
+    _defineProperty(this, "maxHeight", 1.0);
+    // Allow full screen height
+    _defineProperty(this, "animationDuration", 400);
+    _defineProperty(this, "statusBarHeight", StatusBar.currentHeight || 0);
+    _defineProperty(this, "defaultTopInset", 44);
+    _defineProperty(this, "maxHeightRatio", 0);
+    _defineProperty(this, "keyboardDidShowListener", void 0);
+    _defineProperty(this, "keyboardDidHideListener", void 0);
+    _defineProperty(this, "handleBackPress", () => {
+      if (this.state.isBottomsheetVisible) {
+        this.closeSheet();
+        return true; // Prevent default back action
+      }
+      return false;
+    });
+    _defineProperty(this, "onKeyboardShow", event => {
+      var _event$endCoordinates;
+      let keyboardHeight = ((_event$endCoordinates = event.endCoordinates) === null || _event$endCoordinates === void 0 ? void 0 : _event$endCoordinates.height) || 0;
+      this.updateState({
+        keyboardHeight: keyboardHeight
+      });
+    });
+    _defineProperty(this, "onKeyboardHide", () => {
+      this.updateState({
+        keyboardHeight: 0
+      });
+    });
+    _defineProperty(this, "handleSwipeGesture", gestureState => {
+      this.updateState({
+        lastGestureDy: 0
+      });
+      if (gestureState.dy > 0) {
+        if (this.state.isExpanded) {
+          // Expand the bottom sheet threshold is  25% of the fully expanded height
+          // If the user swipe distance is below the threshold, revert to the original sheet height
+          if (gestureState.dy < this.expandedHeight / 4) {
+            Animated.parallel([Animated.timing(this.state.translateY, {
+              toValue: 0,
+              // Keep sheet open
+              duration: this.animationDuration,
+              useNativeDriver: false
+            }), Animated.timing(this.state.sheetHeight, {
+              toValue: this.calculatedHeight,
+              // Back to original height
+              duration: this.animationDuration,
+              useNativeDriver: false
+            })]).start();
+            this.updateState({
+              isExpanded: false
+            });
+          } else if (gestureState.dy > this.expandedHeight / 4 || gestureState.vy > 0.5) {
+            this.closeSheet();
+          }
+        } else {
+          if (gestureState.dy > 100 || gestureState.vy > 0.5) {
+            this.closeSheet();
+          } else {
+            this.openSheet();
+          }
+        }
+      }
+    });
+    // panResponder for bottom sheet scroll view
+    _defineProperty(this, "panResponder", PanResponder.create({
+      onStartShouldSetPanResponder: (_, gestureState) => {
+        // Only handle the gesture if we're at the top and swiping down
+        return gestureState.dy > 0 && this.state.scrollOffset <= 0;
+      },
+      onMoveShouldSetPanResponder: (_, gestureState) => {
+        // Only handle the gesture if we're at the top and swiping down
+        return gestureState.dy > 0 && this.state.scrollOffset <= 0;
+      },
+      onPanResponderMove: (_, gestureState) => {
+        if (gestureState.dy > 0) {
+          const newTranslateY = Math.max(0, this.state.lastGestureDy + gestureState.dy);
+          this.state.translateY.setValue(newTranslateY);
+        }
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        this.handleSwipeGesture(gestureState);
+      },
+      onPanResponderTerminate: () => {
+        this.openSheet();
+      }
+    }));
+    //pan repsoneder for bottom sheet dragable container
+    _defineProperty(this, "dragHandlePanResponder", PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderMove: (_, gestureState) => {
+        if (gestureState.dy > 0) {
+          // Handle downward drag
+          const newTranslateY = Math.max(0, this.state.lastGestureDy + gestureState.dy);
+          this.state.translateY.setValue(newTranslateY);
+        } else if (gestureState.dy < 0 && this.props.expand && this.props.bottomsheetheightratio !== 1) {
+          // Handle upward drag - expand to full height
+          // Allow expansion to full screen height
+          const targetHeight = Math.min(this.expandedHeight, SCREEN_HEIGHT);
+          Animated.timing(this.state.sheetHeight, {
+            toValue: targetHeight,
+            duration: this.animationDuration,
+            useNativeDriver: false
+          }).start();
+          this.updateState({
+            isExpanded: true
+          });
+        }
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        this.handleSwipeGesture(gestureState);
+      }
+    }));
+    _defineProperty(this, "handleScroll", event => {
+      if (this.state.keyboardHeight > 0) return null;
+      const offsetY = event.nativeEvent.contentOffset.y;
+      this.updateState({
+        isScrolling: offsetY > 0,
+        scrollOffset: offsetY
+      });
+    });
+    _defineProperty(this, "openSheet", () => {
+      this.updateState({
+        lastGestureDy: 0
+      });
+      Animated.parallel([Animated.timing(this.state.translateY, {
+        toValue: 0,
+        duration: this.animationDuration,
+        useNativeDriver: false
+      }), Animated.timing(this.state.backdropOpacity, {
+        toValue: 1,
+        duration: this.animationDuration,
+        useNativeDriver: false
+      })]).start(() => {
+        this.invokeEventCallback('onOpened', [null, this]);
+      });
+    });
+    _defineProperty(this, "handleClose", () => {
+      this.updateState({
+        isBottomsheetVisible: false
+      });
+      this.invokeEventCallback('onClose', [null, this]);
+    });
+    _defineProperty(this, "closeSheet", () => {
+      Animated.parallel([Animated.timing(this.state.translateY, {
+        toValue: SCREEN_HEIGHT,
+        duration: this.animationDuration,
+        useNativeDriver: false
+      }), Animated.timing(this.state.backdropOpacity, {
+        toValue: 0,
+        duration: this.animationDuration,
+        useNativeDriver: false
+      })]).start(() => {
+        requestAnimationFrame(() => {
+          this.state.sheetHeight.setValue(this.calculatedHeight);
+          this.updateState({
+            isExpanded: false
+          });
+          this.handleClose();
+        });
+      });
+    });
+    _defineProperty(this, "closeSheetImmediate", () => {
+      this.state.translateY.setValue(SCREEN_HEIGHT);
+      this.state.backdropOpacity.setValue(0);
+      this.updateState({
+        lastGestureDy: 0,
+        isExpanded: false,
+        isBottomsheetVisible: false
+      });
+      requestAnimationFrame(() => {
+        this.state.sheetHeight.setValue(this.calculatedHeight);
+      });
+    });
+    this.calculatedHeight = this.calculateSheetHeight(props.bottomsheetheightratio);
+
+    // Use bottomsheetexpandedheightratio if provided, otherwise use expandedDefaultHeight
+    const expandedRatio = props.bottomsheetexpandedheightratio || this.expandedDefaultHeight;
+    const effectiveExpandedRatio = Math.max(this.minimumExpandedHeight, Math.min(expandedRatio, this.maxHeight));
+    this.expandedHeight = SCREEN_HEIGHT * effectiveExpandedRatio;
+    if (Platform.OS === 'android') {
+      if (effectiveExpandedRatio >= 0.9) {
+        this.expandedHeight -= this.statusBarHeight;
+      }
+    }
+    if (Platform.OS === 'ios') {
+      if (effectiveExpandedRatio >= 0.9) {
+        this.expandedHeight -= this.defaultTopInset;
+      }
+    }
+    this.state.sheetHeight.setValue(this.calculatedHeight);
+    this.updateState({
+      isBottomsheetVisible: this.props.showonrender || false
+    });
+    if (this.state.isBottomsheetVisible) {
+      this.openSheet();
+    } else {
+      this.closeSheetImmediate();
+    }
+  }
+  componentDidMount() {
+    super.componentDidMount();
+    if (Platform.OS === 'android') {
+      BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
+    }
+    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this.onKeyboardShow);
+    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.onKeyboardHide);
+  }
+  componentWillUnmount() {
+    super.componentWillUnmount();
+    if (Platform.OS === 'android') {
+      BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);
+    }
+    this.keyboardDidShowListener.remove();
+    this.keyboardDidHideListener.remove();
+  }
+  componentDidUpdate(prevProps) {
+    if (prevProps.bottomsheetheightratio !== this.props.bottomsheetheightratio) {
+      this.calculatedHeight = this.calculateSheetHeight(this.props.bottomsheetheightratio);
+      this.state.sheetHeight.setValue(this.calculatedHeight);
+    }
+  }
+  onPropertyChange(name, $new, $old) {
+    super.onPropertyChange(name, $new, $old);
+    switch (name) {
+      case "showonrender":
+        if ($new) {
+          this.updateState({
+            isBottomsheetVisible: $new || false
+          });
+          if (this.state.isBottomsheetVisible) {
+            this.openSheet && this.openSheet();
+          }
+        } else {
+          this.closeSheetImmediate && this.closeSheetImmediate();
+        }
+        break;
+    }
+  }
+  renderSkeleton(props) {
+    return createSkeleton(this.theme, this.styles.skeleton, {
+      ...this.styles.root,
+      width: this.styles.root.width,
+      height: this.styles.root.height
+    });
+  }
+  renderWidget(props) {
+    if (!this.state.isBottomsheetVisible) return null;
+    return /*#__PURE__*/React.createElement(SafeAreaInsetsContext.Consumer, null, (insets = {
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0
+    }) => {
+      return /*#__PURE__*/React.createElement(View, _extends({
+        style: this.styles.root
+      }, this.getTestProps('keyboardview')), this._background, /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
+        onPress: this.closeSheet
+      }, /*#__PURE__*/React.createElement(Animated.View, _extends({
+        style: [this.styles.backdrop, {
+          opacity: this.state.backdropOpacity
+        }]
+      }, this.getTestProps('backdrop'), getAccessibilityProps(AccessibilityWidgetType.BOTTOMSHEET, props)))), /*#__PURE__*/React.createElement(Animated.View, _extends({
+        style: [this.styles.container, {
+          height: this.state.sheetHeight,
+          transform: [{
+            translateY: this.state.translateY
+          }]
+        }]
+      }, this.panResponder.panHandlers), /*#__PURE__*/React.createElement(View, _extends({
+        style: this.styles.dragHandleContainer
+      }, this.dragHandlePanResponder.panHandlers), /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
+        onPress: this.closeSheet
+      }, /*#__PURE__*/React.createElement(View, _extends({
+        style: this.styles.dragIconHandle
+      }, this.getTestProps('draghandle'))))), /*#__PURE__*/React.createElement(ScrollView, _extends({
+        ref: this.state.scrollViewRef,
+        style: this.styles.sheetContentContainer,
+        contentContainerStyle: [this.styles.sheetScrollContent, {
+          paddingBottom: this.state.keyboardHeight
+        }],
+        alwaysBounceVertical: false,
+        alwaysBounceHorizontal: false,
+        bounces: false,
+        showsVerticalScrollIndicator: false,
+        scrollEventThrottle: 16,
+        onScroll: this.handleScroll,
+        nestedScrollEnabled: true,
+        scrollEnabled: true
+      }, this.getTestProps('scorllview')), props.children)));
+    });
+  }
+}
+//# sourceMappingURL=bottomsheet.component.js.map