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

package/components/input/switch/switch.component.js

@@ -0,0 +1,94 @@
+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, View } from "react-native";
+import { isEqual, find } from 'lodash';
+import WmSwitchProps from './switch.props';
+import { DEFAULT_CLASS } from './switch.styles';
+import WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';
+import { BaseDatasetComponent, BaseDatasetState } from '../basedataset/basedataset.component';
+import { Tappable } from '@wavemaker/app-rn-runtime/core/tappable.component';
+import { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility';
+import { createSkeleton } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.component';
+export class WmSwitchState extends BaseDatasetState {}
+export default class WmSwitch extends BaseDatasetComponent {
+  constructor(props) {
+    super(props, DEFAULT_CLASS, new WmSwitchProps());
+  }
+  onChange(value) {
+    if (!value) {
+      return;
+    }
+    const oldVal = this.state.props.datavalue;
+    this.validate(value);
+    if (value === oldVal) {
+      return;
+    }
+    if (this.state.props.datafield === 'All Fields') {
+      const selectedItem = find(this.state.dataItems, item => isEqual(item.key, value));
+      value = selectedItem && selectedItem.dataObject;
+    }
+    // @ts-ignore
+    this.updateState({
+      props: {
+        datavalue: value
+      },
+      isDefault: false
+    }, () => {
+      if (!this.props.invokeEvent) {
+        this.invokeEventCallback('onChange', [undefined, this.proxy, value, oldVal]);
+      }
+    });
+  }
+  onTap(event, item) {
+    const value = this.state.props.datafield === 'All Fields' ? this.getItemKey(item.datafield) : item.datafield;
+    this.onChange(value);
+    this.invokeEventCallback('onTap', [event, this.proxy]);
+  }
+  renderChild(item, index) {
+    let btnClass = 'button';
+    const props = this.state.props;
+    if (index === 0) {
+      btnClass = 'firstButton';
+    } else if (index + 1 === this.state.dataItems.length) {
+      btnClass = 'lastButton';
+    }
+    const displayText = item.displayexp || item.displayfield;
+    const isSelected = this.state.props.datafield === 'All Fields' ? isEqual(props.datavalue, item.datafield) : this.state.props.datavalue === item.datafield;
+    return /*#__PURE__*/React.createElement(Tappable, _extends({}, this.getTestPropsForAction('button' + index), {
+      accessibilityProps: {
+        ...getAccessibilityProps(AccessibilityWidgetType.SWITCH, {
+          selected: isSelected,
+          hint: props === null || props === void 0 ? void 0 : props.hint
+        })
+      },
+      onTap: this.state.props.disabled ? undefined : this.onTap.bind(this, null, item),
+      styles: [this.styles.button, this.styles[btnClass], isSelected ? this.styles.selectedButton : null],
+      key: item.key
+    }), this.state.props.iconclass ? /*#__PURE__*/React.createElement(WmIcon, {
+      id: this.getTestId('icon' + index),
+      styles: this.styles.loadingIcon,
+      iconclass: item.icon,
+      caption: displayText
+    }) : /*#__PURE__*/React.createElement(View, null, this._showSkeleton ? createSkeleton(this.theme, {}, {
+      ...this.styles.text,
+      ...this.styles.textSkeleton.root
+    }) : /*#__PURE__*/React.createElement(Text, _extends({}, this.getTestPropsForLabel('label' + index), {
+      style: [isSelected ? this.styles.selectedButtonText : this.styles.text, {
+        color: isSelected ? this.styles.selectedButton.color : this.styles.button.color
+      }]
+    }), displayText)));
+  }
+  renderItems() {
+    const items = this.state.dataItems;
+    if (this._showSkeleton) {
+      return [{}, {}, {}].map((item, index) => this.renderChild(item, index));
+    }
+    return items && items.length ? items.map((item, index) => this.renderChild(item, index)) : null;
+  }
+  renderWidget(props) {
+    return /*#__PURE__*/React.createElement(View, {
+      style: this.styles.root
+    }, this.renderItems());
+  }
+}
+//# sourceMappingURL=switch.component.js.map

package/components/input/switch/switch.props.js

@@ -0,0 +1,13 @@
+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 BaseDatasetProps from '../basedataset/basedataset.props';
+export default class WmSwitchProps extends BaseDatasetProps {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "dataset", 'yes, no, maybe');
+    _defineProperty(this, "dataItems", void 0);
+    _defineProperty(this, "invokeEvent", void 0);
+  }
+}
+//# sourceMappingURL=switch.props.js.map

package/components/input/text/text.component.js

@@ -0,0 +1,85 @@
+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 { Platform } from 'react-native';
+import WmTextProps from './text.props';
+import { DEFAULT_CLASS } from './text.styles';
+import { WMTextInput } from '@wavemaker/app-rn-runtime/core/components/textinput.component';
+import { BaseInputComponent, BaseInputState } from "@wavemaker/app-rn-runtime/components/input/baseinput/baseinput.component";
+import { isNull } from 'lodash';
+import { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility';
+import { createSkeleton } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.component';
+export class WmTextState extends BaseInputState {}
+export default class WmText extends BaseInputComponent {
+  constructor(props) {
+    super(props, DEFAULT_CLASS, new WmTextProps(), new WmTextState());
+  }
+  getStyleClassName() {
+    const classes = [];
+    if (this.state.props.floatinglabel) {
+      classes.push('app-text-with-label');
+    }
+    classes.push(super.getStyleClassName());
+    return classes.join(' ');
+  }
+  renderSkeleton(props) {
+    let skeletonWidth, skeletonHeight;
+    if (this.props.skeletonwidth == "0") {
+      skeletonWidth = 0;
+    } else {
+      var _this$styles$root;
+      skeletonWidth = this.props.skeletonwidth || ((_this$styles$root = this.styles.root) === null || _this$styles$root === void 0 ? void 0 : _this$styles$root.width);
+    }
+    if (this.props.skeletonheight == "0") {
+      skeletonHeight = 0;
+    } else {
+      var _this$styles$root2;
+      skeletonHeight = this.props.skeletonheight || ((_this$styles$root2 = this.styles.root) === null || _this$styles$root2 === void 0 ? void 0 : _this$styles$root2.height);
+    }
+    return createSkeleton(this.theme, this.styles.skeleton, {
+      ...this.styles.root,
+      width: skeletonWidth,
+      height: skeletonHeight
+    });
+  }
+  renderWidget(props) {
+    var _this$state$textValue;
+    let opts = {};
+    const valueExpr = Platform.OS === 'web' ? 'value' : 'defaultValue';
+    opts[valueExpr] = ((_this$state$textValue = this.state.textValue) === null || _this$state$textValue === void 0 ? void 0 : _this$state$textValue.toString()) || '';
+    return /*#__PURE__*/React.createElement(WMTextInput, _extends({}, this.getTestPropsForInput(), getAccessibilityProps(AccessibilityWidgetType.TEXT, props), {
+      ref: ref => {
+        this.widgetRef = ref;
+        // @ts-ignore
+        if (ref && !isNull(ref.selectionStart) && !isNull(ref.selectionEnd)) {
+          // @ts-ignore
+          ref.selectionStart = ref.selectionEnd = this.cursor;
+        }
+      }
+    }, opts, {
+      floatingLabel: props.floatinglabel,
+      floatingLabelStyle: this.styles.floatingLabel,
+      activeFloatingLabelStyle: this.styles.activeFloatingLabel,
+      placeholderTextColor: this.styles.placeholderText.color,
+      isInputFocused: this.state.isInputFocused,
+      style: [this.styles.root, this.styles.text, this.state.isValid ? {} : this.styles.invalid, this.state.isInputFocused ? this.styles.focused : {}],
+      keyboardType: this.state.keyboardType,
+      autoComplete: props.autocomplete ? 'username' : 'off',
+      autoFocus: props.autofocus,
+      editable: props.disabled || props.readonly ? false : true,
+      secureTextEntry: props.type === 'password' && !props.maskchar ? true : false,
+      displayformat: props.displayformat,
+      background: this._background,
+      maskchar: props.maskchar,
+      maxLength: props.maxchars,
+      placeholder: props.placeholder,
+      onBlur: this.onBlur.bind(this),
+      onFocus: this.onFocus.bind(this),
+      onKeyPress: this.onKeyPress.bind(this),
+      onChangeText: this.onChangeText.bind(this),
+      onChange: this.invokeChange.bind(this),
+      allowContentSelection: this.styles.text.userSelect === 'text',
+      autoCapitalize: props.autocapitalize
+    }));
+  }
+}
+//# sourceMappingURL=text.component.js.map

package/components/input/text/text.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 BaseInputProps from "@wavemaker/app-rn-runtime/components/input/baseinput/baseinput.props";
+export default class WmTextProps extends BaseInputProps {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "floatinglabel", void 0);
+    _defineProperty(this, "placeholder", 'Enter text');
+    _defineProperty(this, "skeletonheight", null);
+    _defineProperty(this, "skeletonwidth", null);
+    _defineProperty(this, "autocapitalize", 'none');
+  }
+}
+//# sourceMappingURL=text.props.js.map

package/components/input/textarea/textarea.component.js

@@ -0,0 +1,83 @@
+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 { Platform } from 'react-native';
+import WmTextareaProps from './textarea.props';
+import { DEFAULT_CLASS } from './textarea.styles';
+import { BaseInputComponent, BaseInputState } from '@wavemaker/app-rn-runtime/components/input/baseinput/baseinput.component';
+import { WMTextInput } from '@wavemaker/app-rn-runtime/core/components/textinput.component';
+import { isNull } from 'lodash';
+import { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility';
+import { createSkeleton } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.component';
+export class WmTextareaState extends BaseInputState {}
+export default class WmTextarea extends BaseInputComponent {
+  constructor(props) {
+    super(props, DEFAULT_CLASS, new WmTextareaProps(), new WmTextareaState());
+  }
+  getStyleClassName() {
+    const classes = [];
+    if (this.state.props.floatinglabel) {
+      classes.push('app-textarea-with-label');
+    }
+    classes.push(super.getStyleClassName());
+    return classes.join(' ');
+  }
+  renderSkeleton(props) {
+    let skeletonWidth, skeletonHeight;
+    if (this.props.skeletonwidth == "0") {
+      skeletonWidth = 0;
+    } else {
+      var _this$styles$root;
+      skeletonWidth = this.props.skeletonwidth || ((_this$styles$root = this.styles.root) === null || _this$styles$root === void 0 ? void 0 : _this$styles$root.width);
+    }
+    if (this.props.skeletonheight == "0") {
+      skeletonHeight = 0;
+    } else {
+      var _this$styles$root2;
+      skeletonHeight = this.props.skeletonheight || ((_this$styles$root2 = this.styles.root) === null || _this$styles$root2 === void 0 ? void 0 : _this$styles$root2.height);
+    }
+    return createSkeleton(this.theme, this.styles.skeleton, {
+      ...this.styles.root,
+      width: skeletonWidth,
+      height: skeletonHeight
+    });
+  }
+  renderWidget(props) {
+    var _this$state$textValue;
+    let opts = {};
+    const valueExpr = Platform.OS === 'web' ? 'value' : 'defaultValue';
+    opts[valueExpr] = ((_this$state$textValue = this.state.textValue) === null || _this$state$textValue === void 0 ? void 0 : _this$state$textValue.toString()) || '';
+    return /*#__PURE__*/React.createElement(WMTextInput, _extends({}, this.getTestPropsForInput(), getAccessibilityProps(AccessibilityWidgetType.TEXTAREA, props), {
+      ref: ref => {
+        this.widgetRef = ref;
+        // @ts-ignore
+        if (ref && !isNull(ref.selectionStart) && !isNull(ref.selectionEnd)) {
+          // @ts-ignore
+          ref.selectionStart = ref.selectionEnd = this.cursor;
+        }
+      },
+      placeholderTextColor: this.styles.placeholderText.color,
+      isInputFocused: this.state.isInputFocused,
+      style: [this.styles.root, this.styles.text, this.state.isValid ? {} : this.styles.invalid, this.state.isInputFocused ? this.styles.focused : {}],
+      multiline: true,
+      numberOfLines: 4,
+      background: this._background,
+      keyboardType: this.state.keyboardType
+    }, opts, {
+      floatingLabel: props.floatinglabel,
+      floatingLabelStyle: this.styles.floatingLabel,
+      activeFloatingLabelStyle: this.styles.activeFloatingLabel,
+      autoComplete: props.autocomplete ? 'username' : 'off',
+      autoFocus: props.autofocus,
+      editable: props.disabled || props.readonly ? false : true,
+      maxLength: props.maxchars,
+      placeholder: props.placeholder || 'Place your text',
+      onBlur: this.onBlur.bind(this),
+      onFocus: this.onFocus.bind(this),
+      onKeyPress: this.onKeyPress.bind(this),
+      onChangeText: this.onChangeText.bind(this),
+      onChange: this.invokeChange.bind(this),
+      allowContentSelection: this.styles.text.userSelect === 'text'
+    }));
+  }
+}
+//# sourceMappingURL=textarea.component.js.map

package/components/input/textarea/textarea.props.js

@@ -0,0 +1,14 @@
+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 BaseInputProps from '@wavemaker/app-rn-runtime/components/input/baseinput/baseinput.props';
+export default class WmTextareaProps extends BaseInputProps {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "floatinglabel", void 0);
+    _defineProperty(this, "placeholder", 'Place your text');
+    _defineProperty(this, "skeletonheight", null);
+    _defineProperty(this, "skeletonwidth", null);
+  }
+}
+//# sourceMappingURL=textarea.props.js.map

package/components/input/toggle/toggle.component.js

@@ -0,0 +1,150 @@
+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 { TouchableOpacity, Animated, Easing, View } from 'react-native';
+import { BackgroundComponent } from '@wavemaker/app-rn-runtime/styles/background.component';
+import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
+import { unStringify, validateField } from '@wavemaker/app-rn-runtime/core/utils';
+import { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility';
+import WmToggleProps from './toggle.props';
+import { DEFAULT_CLASS } from './toggle.styles';
+import { createSkeleton } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.component';
+export class WmToggleState extends BaseComponentState {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "isSwitchOn", false);
+    _defineProperty(this, "isValid", true);
+    _defineProperty(this, "errorType", '');
+    _defineProperty(this, "viewWidth", 0);
+  }
+}
+export default class WmToggle extends BaseComponent {
+  constructor(props) {
+    super(props, DEFAULT_CLASS, new WmToggleProps(), new WmToggleState());
+    _defineProperty(this, "animationValue", new Animated.Value(0));
+    _defineProperty(this, "scaleValue", new Animated.Value(1));
+  }
+  onPropertyChange(name, $new, $old) {
+    switch (name) {
+      case 'datavalue':
+        let value = unStringify($new) === unStringify(this.state.props.checkedvalue, true);
+        this.updateState({
+          isSwitchOn: value
+        });
+        break;
+    }
+  }
+  updateDatavalue(value) {
+    this.updateState({
+      props: {
+        datavalue: value
+      }
+    });
+  }
+  validate(value) {
+    const validationObj = validateField(this.state.props, value);
+    this.updateState({
+      isValid: validationObj.isValid,
+      errorType: validationObj.errorType
+    });
+  }
+  onToggleSwitch(value) {
+    const oldValue = this.state.props.datavalue;
+    this.validate(value);
+    this.updateState({
+      isSwitchOn: value
+    });
+    const dataValue = value === true ? this.state.props.checkedvalue : this.state.props.uncheckedvalue;
+    Animated.sequence([Animated.timing(this.scaleValue, {
+      toValue: 1.6,
+      duration: 300,
+      useNativeDriver: true
+    }), Animated.timing(this.animationValue, {
+      toValue: value ? 1 : 0,
+      duration: 300,
+      easing: Easing.linear,
+      useNativeDriver: true
+    })]).start(() => {
+      Animated.timing(this.scaleValue, {
+        toValue: value ? 1.5 : 1,
+        duration: 0,
+        useNativeDriver: true
+      }).start();
+    });
+    // @ts-ignore
+    this.updateState({
+      props: {
+        datavalue: dataValue
+      }
+    }, () => {
+      if (!this.props.onFieldChange) {
+        this.invokeEventCallback('onChange', [null, this.proxy, dataValue, oldValue]);
+      } else {
+        this.props.onFieldChange && this.props.onFieldChange('datavalue', dataValue, oldValue);
+      }
+      this.invokeEventCallback('onBlur', [null, this.proxy]);
+    });
+  }
+  onLayoutChange(event) {
+    let width = event.nativeEvent.layout.width;
+    this.setState({
+      viewWidth: width
+    });
+  }
+  renderSkeleton(props) {
+    return createSkeleton(this.theme, this.styles.skeleton, {
+      ...this.styles.skeleton.root
+    });
+  }
+  renderWidget(props) {
+    const styles = this.theme.mergeStyle(this.styles, this.theme.getStyle(this.state.isSwitchOn ? 'app-toggle-on' : 'app-toggle-off'));
+    return /*#__PURE__*/React.createElement(TouchableOpacity, _extends({
+      onLayout: e => {
+        this.onLayoutChange(e);
+      }
+    }, getAccessibilityProps(AccessibilityWidgetType.TOGGLE, {
+      ...this.props,
+      selected: this.state.isSwitchOn
+    }), {
+      onPress: () => {
+        if (this.props.disabled || this.props.readonly) {
+          return;
+        }
+        // Added setTimeout to smooth animation
+        setTimeout(() => {
+          this.invokeEventCallback('onFocus', [null, this]);
+          this.invokeEventCallback('onTap', [null, this]);
+        }, 500);
+        this.onToggleSwitch(!this.state.isSwitchOn);
+      }
+    }, this.getTestPropsForAction(), {
+      style: styles.root
+    }), styles.root.animation && styles.root.animation === 'none' ? /*#__PURE__*/React.createElement(View, {
+      style: styles.handle
+    }, /*#__PURE__*/React.createElement(BackgroundComponent, {
+      size: styles.handle.backgroundSize || 'contain',
+      position: styles.handle.backgroundPosition,
+      image: styles.handle.backgroundImage,
+      repeat: styles.handle.backgroundRepeat || 'no-repeat'
+    })) : /*#__PURE__*/React.createElement(Animated.View, {
+      style: [styles.handle, {
+        transform: [{
+          translateX: this.animationValue.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, this.state.viewWidth - (this.styles.handle.width + 18)]
+          })
+        }, {
+          scale: this.scaleValue
+        }]
+      }]
+    }, /*#__PURE__*/React.createElement(BackgroundComponent, {
+      size: styles.handle.backgroundSize || 'contain',
+      position: styles.handle.backgroundPosition,
+      image: styles.handle.backgroundImage,
+      repeat: styles.handle.backgroundRepeat || 'no-repeat'
+    })));
+  }
+}
+//# sourceMappingURL=toggle.component.js.map

package/components/input/toggle/toggle.props.js

@@ -0,0 +1,22 @@
+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 WmToggleProps extends BaseProps {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "checkedvalue", true);
+    _defineProperty(this, "uncheckedvalue", false);
+    _defineProperty(this, "datavalue", void 0);
+    _defineProperty(this, "readonly", false);
+    _defineProperty(this, "onFieldChange", void 0);
+    _defineProperty(this, "accessibilitylabel", undefined);
+    _defineProperty(this, "hint", undefined);
+    _defineProperty(this, "accessibilityrole", "togglebutton");
+    _defineProperty(this, "accessibilitylabelledby", undefined);
+    _defineProperty(this, "invokeEvent", void 0);
+    _defineProperty(this, "skeletonheight", null);
+    _defineProperty(this, "skeletonwidth", null);
+  }
+}
+//# sourceMappingURL=toggle.props.js.map

package/components/navigation/appnavbar/appnavbar.component.js

@@ -0,0 +1,74 @@
+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 { Text, View, BackHandler } from 'react-native';
+import { Badge } from 'react-native-paper';
+import { isAndroid, isWebPreviewMode } from '@wavemaker/app-rn-runtime/core/utils';
+import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
+import WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';
+import WmPicture from '@wavemaker/app-rn-runtime/components/basic/picture/picture.component';
+import WmAppNavbarProps from './appnavbar.props';
+import { DEFAULT_CLASS } from './appnavbar.styles';
+export class WmAppNavbarState extends BaseComponentState {}
+export default class WmAppNavbar extends BaseComponent {
+  constructor(props) {
+    super(props, DEFAULT_CLASS, new WmAppNavbarProps());
+    _defineProperty(this, "onDrawerBtnPress", void 0);
+    _defineProperty(this, "onBackBtnPress", void 0);
+    _defineProperty(this, "onSearchBtnPress", void 0);
+    this.onDrawerBtnPress = (() => this.invokeEventCallback('onDrawerbuttonpress', [null, this])).bind(this);
+    this.onBackBtnPress = (() => this.invokeEventCallback('onBackbtnclick', [null, this])).bind(this);
+    this.onSearchBtnPress = (() => this.invokeEventCallback('onSearchbuttonpress', [null, this])).bind(this);
+    if (isAndroid() && !isWebPreviewMode()) {
+      const subscription = BackHandler.addEventListener('hardwareBackPress', () => {
+        this.onBackBtnPress();
+        return true;
+      });
+      this.cleanup.push(() => subscription.remove());
+    }
+  }
+  renderWidget(props) {
+    //@ts-ignore
+    const badge = props.badgevalue != undefined ? /*#__PURE__*/React.createElement(Badge, _extends({
+      style: this.styles.badge
+    }, this.getTestProps('badge')), props.badgevalue) : null;
+    return /*#__PURE__*/React.createElement(View, {
+      style: this.styles.root
+    }, this._background, /*#__PURE__*/React.createElement(View, {
+      style: this.styles.leftSection
+    }, props.showDrawerButton && /*#__PURE__*/React.createElement(WmIcon, {
+      id: this.getTestId('leftnavbtn'),
+      hint: 'menu',
+      styles: this.theme.mergeStyle({}, this.styles.action, this.styles.leftnavIcon),
+      iconclass: props.leftnavpaneliconclass,
+      onTap: this.onDrawerBtnPress
+    }), props.backbutton && /*#__PURE__*/React.createElement(WmIcon, {
+      id: this.getTestId('backbtn'),
+      hint: 'back',
+      styles: this.theme.mergeStyle({}, this.styles.action, this.styles.backIcon),
+      iconclass: props.backbuttoniconclass,
+      caption: props.backbuttonlabel,
+      onTap: this.onBackBtnPress
+    })), /*#__PURE__*/React.createElement(View, {
+      style: this.styles.middleSection
+    }, props.imgsrc && /*#__PURE__*/React.createElement(WmPicture, {
+      id: this.getTestId('picture'),
+      styles: this.styles.image,
+      picturesource: props.imgsrc
+    }), /*#__PURE__*/React.createElement(Text, _extends({
+      style: this.styles.content
+    }, this.getTestPropsForLabel('title'), {
+      accessibilityRole: "header"
+    }), props.title), badge), /*#__PURE__*/React.createElement(View, {
+      style: this.styles.rightSection
+    }, props.searchbutton && /*#__PURE__*/React.createElement(WmIcon, {
+      id: this.getTestId('searchbtn'),
+      styles: this.theme.mergeStyle({}, this.styles.action, this.styles.leftnavIcon),
+      iconclass: props.searchbuttoniconclass,
+      onTap: this.onSearchBtnPress
+    }), props.children));
+  }
+}
+//# sourceMappingURL=appnavbar.component.js.map

package/components/navigation/appnavbar/appnavbar.props.js

@@ -0,0 +1,21 @@
+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 WmAppNavbarProps extends BaseProps {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "children", void 0);
+    _defineProperty(this, "title", '');
+    _defineProperty(this, "backbutton", true);
+    _defineProperty(this, "backbuttonlabel", '');
+    _defineProperty(this, "showDrawerButton", false);
+    _defineProperty(this, "leftnavpaneliconclass", 'wm-sl-l sl-hamburger-menu');
+    _defineProperty(this, "backbuttoniconclass", 'wi wi-back');
+    _defineProperty(this, "imgsrc", null);
+    _defineProperty(this, "searchbutton", false);
+    _defineProperty(this, "searchbuttoniconclass", 'wm-sl-l sl-search');
+    _defineProperty(this, "badgevalue", void 0);
+  }
+}
+//# sourceMappingURL=appnavbar.props.js.map

package/components/navigation/basenav/basenav.component.js

@@ -0,0 +1,72 @@
+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 { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
+import { DEFAULT_CLASS } from './basenav.styles';
+import { isArray } from 'lodash-es';
+export class BaseNavState extends BaseComponentState {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "dataItems", []);
+  }
+}
+export class BaseNavComponent extends BaseComponent {
+  constructor(props, defaultClass = DEFAULT_CLASS, defaultProps, defaultState) {
+    super(props, defaultClass, defaultProps, defaultState);
+    this.defaultClass = defaultClass;
+  }
+  getValue(item, val) {
+    if (typeof val === 'string') {
+      return item[val];
+    } else if (typeof val === 'function') {
+      return val(item);
+    }
+    return null;
+  }
+  setDataItems(dataset = this.state.props.dataset) {
+    const name = this.props.name;
+    let dataItems = [];
+    if (typeof dataset === 'string') {
+      dataItems = dataset.split(',').map((s, i) => {
+        return {
+          key: `${name}_item${i}`,
+          label: s,
+          data: s
+        };
+      });
+    } else if (dataset) {
+      if (!isArray(dataset)) {
+        dataset = [dataset];
+      }
+      dataItems = dataset.map((d, i) => {
+        return {
+          key: `${name}_item${i}`,
+          label: this.getValue(d, this.state.props.itemlabel),
+          icon: this.getValue(d, this.state.props.itemicon),
+          link: this.getValue(d, this.state.props.itemlink),
+          badge: this.getValue(d, this.state.props.itembadge),
+          isactive: this.getValue(d, this.state.props.isactive),
+          data: d,
+          childnavigation: this.state.props.itemchildren ? d[this.state.props.itemchildren] : null
+        };
+      });
+    }
+    this.updateState({
+      dataItems: dataItems
+    });
+  }
+  onPropertyChange(name, $new, $old) {
+    switch (name) {
+      case 'dataset':
+        this.setDataItems($new);
+        break;
+      case 'itemlabel':
+      case 'itemicon':
+      case 'itemlink':
+      case 'itemchildren':
+        this.setDataItems();
+        break;
+    }
+  }
+}
+//# sourceMappingURL=basenav.component.js.map