@wavemaker/app-rn-runtime 12.0.0-next.141219 → 12.0.0-next.141221

package/components/basic/anchor/anchor.component.js

@@ -0,0 +1,99 @@
+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); }
+import React from 'react';
+import { Text } from 'react-native';
+import { Badge } from 'react-native-paper';
+import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
+import { Tappable } from '@wavemaker/app-rn-runtime/core/tappable.component';
+import WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';
+import { encodeUrl } from '@wavemaker/app-rn-runtime/core/utils';
+import { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility';
+import { NavigationServiceConsumer } from '@wavemaker/app-rn-runtime/core/navigation.service';
+import WmAnchorProps from './anchor.props';
+import { DEFAULT_CLASS } from './anchor.styles';
+import { Animatedview } from '@wavemaker/app-rn-runtime/components/basic/animatedview.component';
+import { createSkeleton } from '../skeleton/skeleton.component';
+export class WmAnchorState extends BaseComponentState {}
+export default class WmAnchor extends BaseComponent {
+  constructor(props) {
+    super(props, DEFAULT_CLASS, new WmAnchorProps());
+  }
+  onTap(navigationService, e) {
+    const props = this.state.props;
+    if (props.hyperlink) {
+      const link = props.encodeurl ? encodeUrl(props.hyperlink) : props.hyperlink;
+      navigationService.openUrl(link, {
+        target: this.state.props.target
+      });
+    }
+    this.invokeEventCallback('onTap', [e, this.proxy]);
+  }
+  renderSkeleton(props) {
+    return createSkeleton(this.theme, this.styles.skeleton, {
+      ...this.styles.root,
+      width: this.props.skeletonwidth || this.styles.root.width,
+      height: this.props.skeletonheight || this.styles.root.height
+    });
+  }
+  renderBadge() {
+    const {
+      badgevalue
+    } = this.props;
+    if (this._showSkeleton) {
+      return createSkeleton(this.theme, this.styles.badgeSkeleton, {
+        ...this.styles.badge
+        // marginTop: -50
+      });
+    }
+    return badgevalue != undefined ? /*#__PURE__*/React.createElement(Badge, {
+      style: this.styles.badge
+    }, badgevalue) : null;
+  }
+  renderWidget(props) {
+    const {
+      iconclass,
+      iconurl,
+      name,
+      iconheight,
+      iconmargin,
+      iconwidth,
+      badgevalue
+    } = props;
+    if (this.styles.icon && this.styles.icon.text) {
+      this.styles.icon.text.color = this.styles.text.color;
+    }
+    const icon = (iconclass || iconurl) && /*#__PURE__*/React.createElement(WmIcon, {
+      id: this.getTestId('icon'),
+      styles: this.styles.icon,
+      hint: props === null || props === void 0 ? void 0 : props.hint,
+      name: name + '_icon',
+      iconclass: iconclass,
+      iconurl: iconurl,
+      iconheight: iconheight,
+      iconmargin: iconmargin,
+      iconwidth: iconwidth
+    });
+    return /*#__PURE__*/React.createElement(NavigationServiceConsumer, null, navigationService => /*#__PURE__*/React.createElement(Animatedview, {
+      entryanimation: props.animation,
+      delay: props.animationdelay,
+      style: {
+        width: this.styles.root.width,
+        height: this.styles.root.height,
+        justifyContent: 'center'
+      }
+    }, /*#__PURE__*/React.createElement(Tappable, _extends({}, this.getTestPropsForAction(), {
+      target: this,
+      styles: [this.styles.root, this.styles.root.width && this.styles.root.height ? {
+        width: '100%',
+        height: '100%'
+      } : null, {
+        flexDirection: props.iconposition === 'top' ? 'column' : 'row'
+      }],
+      onTap: props.hyperlink || props.onTap ? e => this.onTap(navigationService, e) : undefined
+    }), this._background, props.iconposition === 'top' && icon, props.iconposition === 'left' && icon, props.caption ? /*#__PURE__*/React.createElement(Text, _extends({
+      style: this.styles.text
+    }, this.getTestPropsForLabel('caption'), getAccessibilityProps(AccessibilityWidgetType.ANCHOR, props), {
+      numberOfLines: props.nooflines
+    }), props.caption) : null, props.iconposition === 'right' && icon, this.renderBadge())));
+  }
+}
+//# sourceMappingURL=anchor.component.js.map

package/components/basic/anchor/anchor.props.js

@@ -0,0 +1,32 @@
+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 WmAnchorProps extends BaseProps {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "animation", null);
+    _defineProperty(this, "animationdelay", null);
+    _defineProperty(this, "caption", 'Link');
+    _defineProperty(this, "hyperlink", null);
+    _defineProperty(this, "encodeurl", false);
+    _defineProperty(this, "badgevalue", null);
+    _defineProperty(this, "width", null);
+    _defineProperty(this, "height", null);
+    _defineProperty(this, "iconclass", null);
+    _defineProperty(this, "iconposition", 'left');
+    _defineProperty(this, "target", '_blank');
+    _defineProperty(this, "onTap", void 0);
+    _defineProperty(this, "skeletonwidth", void 0);
+    _defineProperty(this, "skeletonheight", void 0);
+    _defineProperty(this, "iconurl", null);
+    _defineProperty(this, "iconheight", null);
+    _defineProperty(this, "iconwidth", null);
+    _defineProperty(this, "iconmargin", null);
+    _defineProperty(this, "accessibilitylabel", undefined);
+    _defineProperty(this, "hint", undefined);
+    _defineProperty(this, "accessibilityrole", 'link');
+    _defineProperty(this, "nooflines", undefined);
+  }
+}
+//# sourceMappingURL=anchor.props.js.map

package/components/basic/animatedview.component.js

@@ -0,0 +1,222 @@
+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 from 'react';
+import * as Animatable from 'react-native-animatable';
+import { initializeRegistryWithDefinitions } from 'react-native-animatable';
+import { View } from 'react-native';
+export default class AnimatedviewProps {
+  constructor() {
+    _defineProperty(this, "entryanimation", null);
+    _defineProperty(this, "children", void 0);
+    _defineProperty(this, "duration", null);
+    _defineProperty(this, "delay", null);
+    _defineProperty(this, "iterationCount", void 0);
+    _defineProperty(this, "style", void 0);
+    _defineProperty(this, "exitanimation", null);
+    _defineProperty(this, "accessibilityProps", void 0);
+  }
+}
+const AnimationMap = {
+  bounce: 'bounce',
+  flash: 'flash',
+  pulse: 'pulse',
+  rotate: 'rotate',
+  rubberBand: 'rubberBand',
+  shake: 'shake',
+  swing: 'swing',
+  tada: 'tada',
+  wobble: 'wobble',
+  bounceIn: 'bounceOut',
+  bounceInDown: 'bounceOutUp',
+  bounceInLeft: 'bounceOutRight',
+  bounceInRight: 'bounceOutLeft',
+  bounceInUp: 'bounceOutDown',
+  fadeIn: 'fadeOut',
+  fadeInDown: 'fadeOutUp',
+  fadeInDownBig: 'fadeOutUpBig',
+  fadeInLeft: 'fadeOutRight',
+  fadeInLeftBig: 'fadeOutRightBig',
+  fadeInRight: 'fadeOutLeft',
+  fadeInRightBig: 'fadeOutLeftBig',
+  fadeInUp: 'fadeOutDown',
+  fadeInUpBig: 'fadeOutDownBig',
+  flipInX: 'flipOutX',
+  flipInY: 'flipOutY',
+  lightSpeedIn: 'lightSpeedOut',
+  slideInDown: 'slideOutUp',
+  slideInLeft: 'slideOutRight',
+  slideInRight: 'slideOutLeft',
+  slideInUp: 'slideOutDown',
+  zoomIn: 'zoomOut',
+  zoomInDown: 'zoomOutUp',
+  zoomInLeft: 'zoomOutRight',
+  zoomInRight: 'zoomOutLeft',
+  zoomInUp: 'zoomOutDown'
+};
+const CustomAnimationMap = {
+  flipInY: {
+    0: {
+      transform: [{
+        rotateY: "0deg"
+      }]
+    },
+    1: {
+      transform: [{
+        rotateY: "360deg"
+      }]
+    }
+  },
+  flipInX: {
+    0: {
+      transform: [{
+        rotateX: "0deg"
+      }]
+    },
+    1: {
+      transform: [{
+        rotateX: "360deg"
+      }]
+    }
+  },
+  flipOutY: {
+    0: {
+      transform: [{
+        rotateY: "3600deg"
+      }]
+    },
+    1: {
+      transform: [{
+        rotateY: "0deg"
+      }]
+    }
+  },
+  flipOutX: {
+    0: {
+      transform: [{
+        rotateX: "360deg"
+      }]
+    },
+    1: {
+      transform: [{
+        rotateX: "0deg"
+      }]
+    }
+  },
+  slideInDown: {
+    from: {
+      translateY: -20
+    },
+    to: {
+      translateY: 0
+    }
+  },
+  slideInUp: {
+    from: {
+      translateY: 20
+    },
+    to: {
+      translateY: 0
+    }
+  },
+  slideOutUp: {
+    from: {
+      translateY: 0
+    },
+    to: {
+      translateY: -20
+    }
+  },
+  slideOutDown: {
+    from: {
+      translateY: 0
+    },
+    to: {
+      translateY: 20
+    }
+  },
+  fadeInDown: {
+    from: {
+      opacity: 0,
+      translateY: -20
+    },
+    to: {
+      opacity: 1,
+      translateY: 0
+    }
+  },
+  fadeInUp: {
+    from: {
+      opacity: 0,
+      translateY: 20
+    },
+    to: {
+      opacity: 1,
+      translateY: 0
+    }
+  },
+  fadeOutDown: {
+    from: {
+      opacity: 1,
+      translateY: 0
+    },
+    to: {
+      opacity: 0,
+      translateY: 20
+    }
+  },
+  fadeOutUp: {
+    from: {
+      opacity: 1,
+      translateY: 0
+    },
+    to: {
+      opacity: 0,
+      translateY: -20
+    }
+  }
+};
+export class Animatedview extends React.Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "view", null);
+    // @ts-ignore
+    _defineProperty(this, "handleViewRef", ref => this.view = ref);
+    initializeRegistryWithDefinitions(CustomAnimationMap);
+  }
+  triggerEntry() {
+    return this.view.animate(this.props.entryanimation, this.props.duration).then(endState => endState.finished);
+  }
+  triggerExit() {
+    if (!this.view) {
+      return;
+    }
+    if (this.props.exitanimation) {
+      return this.view.animate(this.props.exitanimation, this.props.duration, 1).then(endState => endState.finished);
+    } else {
+      return this.view.animate(AnimationMap[this.props.entryanimation || ''], this.props.duration, 1).then(endState => endState.finished);
+    }
+  }
+  render() {
+    return this.props.entryanimation ? /*#__PURE__*/React.createElement(Animatable.View, _extends({
+      animation: this.props.entryanimation,
+      duration: this.props.duration,
+      delay: this.props.delay,
+      useNativeDriver: true,
+      style: this.props.style,
+      iterationCount: this.props.iterationCount,
+      ref: this.handleViewRef
+    }, this.props.accessibilityProps, {
+      testID: "animatableView"
+    }), this.props.children) : /*#__PURE__*/React.createElement(View, _extends({
+      style: this.props.style
+    }, this.props.accessibilityProps, {
+      testID: "non_animatableView"
+    }), this.props.children);
+  }
+}
+_defineProperty(Animatedview, "defaultProps", {
+  duration: 200
+});
+//# sourceMappingURL=animatedview.component.js.map

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

@@ -0,0 +1,251 @@
+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
+    }, 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.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