@wavemaker/app-rn-runtime 11.6.1-rc.5499 → 11.7.0-dev.2

package/components/input/currency/currency.component.js

@@ -0,0 +1,88 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import React from 'react';
+import { View, Text, Platform } from 'react-native';
+import WmCurrencyProps from './currency.props';
+import { CURRENCY_INFO } from '@wavemaker/app-rn-runtime/core/currency-constants';
+import { WMTextInput } from '@wavemaker/app-rn-runtime/core/components/textinput.component';
+import { DEFAULT_CLASS } from './currency.styles';
+import { BaseNumberComponent, BaseNumberState } from '@wavemaker/app-rn-runtime/components/input/basenumber/basenumber.component';
+import { isNull } from "lodash";
+import { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility';
+export class WmCurrencyState extends BaseNumberState {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "currencySymbol", void 0);
+  }
+}
+export default class WmCurrency extends BaseNumberComponent {
+  constructor(props) {
+    super(props, DEFAULT_CLASS, new WmCurrencyProps(), new WmCurrencyState());
+  }
+  onPropertyChange(name, $new, $old) {
+    super.onPropertyChange(name, $new, $old);
+    switch (name) {
+      case 'currency':
+        if ($new) {
+          this.updateState({
+            currencySymbol: CURRENCY_INFO[$new].symbol
+          });
+        }
+        break;
+    }
+  }
+  getStyleClassName() {
+    const classes = [];
+    if (this.state.props.floatinglabel) {
+      classes.push('app-currency-with-label');
+    }
+    classes.push(super.getStyleClassName());
+    return classes.join(' ');
+  }
+  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(View, {
+      style: this.styles.root
+    }, /*#__PURE__*/React.createElement(View, {
+      style: this.styles.labelWrapper
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: this.styles.label
+    }, this.state.currencySymbol)), /*#__PURE__*/React.createElement(View, {
+      style: {
+        flex: 1
+      }
+    }, /*#__PURE__*/React.createElement(WMTextInput, _extends({}, this.getTestPropsForInput(), getAccessibilityProps(AccessibilityWidgetType.CURRENCY, props), {
+      ref: ref => {
+        this.widgetRef = ref;
+        // @ts-ignore
+        if (ref && !isNull(ref.selectionStart) && !isNull(ref.selectionEnd)) {
+          // @ts-ignore
+          ref.selectionStart = ref.selectionEnd = this.cursor;
+        }
+      },
+      keyboardType: "numeric",
+      placeholderTextColor: this.styles.placeholderText.color,
+      style: [this.styles.input, this.styles.text, this.state.isValid ? {} : this.styles.invalid]
+    }, opts, {
+      floatingLabel: props.floatinglabel,
+      floatingLabelStyle: this.styles.floatingLabel,
+      activeFloatingLabelStyle: this.styles.activeFloatingLabel,
+      editable: props.disabled || props.readonly ? false : true,
+      placeholder: props.placeholder,
+      onBlur: this.onBlur.bind(this),
+      onFocus: this.onFocus.bind(this),
+      onKeyPress: this.validateInputEntry.bind(this),
+      onChangeText: text => {
+        this.onChangeText.bind(this)(text, 'currency');
+      },
+      onChange: this.invokeChange.bind(this),
+      allowContentSelection: this.styles.text.userSelect === 'text'
+    }))));
+  }
+}
+//# sourceMappingURL=currency.component.js.map

package/components/input/currency/currency.component.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Text","Platform","WmCurrencyProps","CURRENCY_INFO","WMTextInput","DEFAULT_CLASS","BaseNumberComponent","BaseNumberState","isNull","AccessibilityWidgetType","getAccessibilityProps","WmCurrencyState","constructor","arguments","_defineProperty","WmCurrency","props","onPropertyChange","name","$new","$old","updateState","currencySymbol","symbol","getStyleClassName","classes","state","floatinglabel","push","join","renderWidget","_this$state$textValue","opts","valueExpr","OS","textValue","toString","createElement","style","styles","root","labelWrapper","label","flex","_extends","getTestPropsForInput","CURRENCY","ref","widgetRef","selectionStart","selectionEnd","cursor","keyboardType","placeholderTextColor","placeholderText","color","input","text","isValid","invalid","floatingLabel","floatingLabelStyle","activeFloatingLabelStyle","activeFloatingLabel","editable","disabled","readonly","placeholder","onBlur","bind","onFocus","onKeyPress","validateInputEntry","onChangeText","onChange","invokeChange","allowContentSelection","userSelect"],"sources":["currency.component.tsx"],"sourcesContent":["import React from 'react';\nimport { View, Text, Platform } from 'react-native';\n\nimport WmCurrencyProps from './currency.props';\nimport { CURRENCY_INFO } from '@wavemaker/app-rn-runtime/core/currency-constants';\nimport { WMTextInput } from '@wavemaker/app-rn-runtime/core/components/textinput.component';\nimport { DEFAULT_CLASS, WmCurrencyStyles } from './currency.styles';\nimport {\n  BaseNumberComponent,\n  BaseNumberState\n} from '@wavemaker/app-rn-runtime/components/input/basenumber/basenumber.component';\nimport { isNull } from \"lodash\";\nimport { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility'; \nexport class WmCurrencyState extends BaseNumberState<WmCurrencyProps> {\n  currencySymbol: any;\n}\n\nexport default class WmCurrency extends BaseNumberComponent<WmCurrencyProps, WmCurrencyState, WmCurrencyStyles> {\n\n  constructor(props: WmCurrencyProps) {\n    super(props, DEFAULT_CLASS, new WmCurrencyProps(), new WmCurrencyState());\n  }\n\n  onPropertyChange(name: string, $new: any, $old: any) {\n    super.onPropertyChange(name, $new, $old);\n    switch (name) {\n      case 'currency':\n        if ($new) {\n          this.updateState({\n            currencySymbol: CURRENCY_INFO[$new].symbol,\n          } as WmCurrencyState);\n        }\n        break;\n\n    }\n  }\n\n  public getStyleClassName(): string | undefined {\n    const classes = [];\n    if (this.state.props.floatinglabel) {\n      classes.push('app-currency-with-label'); \n    }\n    classes.push(super.getStyleClassName());\n    return classes.join(' ');\n  }\n\n  renderWidget(props: WmCurrencyProps) {\n    let opts: any = {};\n    const valueExpr = Platform.OS === 'web' ? 'value' : 'defaultValue';\n    opts[valueExpr] = this.state.textValue?.toString() || '';\n    return (<View style={this.styles.root}>\n      <View style={this.styles.labelWrapper}>\n        <Text style={this.styles.label}>{this.state.currencySymbol}</Text>\n      </View>\n      <View style={{flex: 1}}>\n      <WMTextInput\n        {...this.getTestPropsForInput()}\n        {...getAccessibilityProps(AccessibilityWidgetType.CURRENCY, props)}\n        ref={(ref: any) => {\n          this.widgetRef = ref;\n          // @ts-ignore\n          if (ref && !isNull(ref.selectionStart) && !isNull(ref.selectionEnd)) {\n            // @ts-ignore\n            ref.selectionStart = ref.selectionEnd = this.cursor;\n          }\n        }}\n        keyboardType=\"numeric\"\n        placeholderTextColor={this.styles.placeholderText.color as any}\n        style={[this.styles.input, this.styles.text, this.state.isValid ? {} : this.styles.invalid]}\n        {...opts}\n        floatingLabel={props.floatinglabel}\n        floatingLabelStyle={this.styles.floatingLabel}\n        activeFloatingLabelStyle={this.styles.activeFloatingLabel}\n        editable={props.disabled || props.readonly ? false : true}\n        placeholder={props.placeholder}\n        onBlur={this.onBlur.bind(this)}\n        onFocus={this.onFocus.bind(this)}\n        onKeyPress={this.validateInputEntry.bind(this)}\n        onChangeText={(text) => {\n          this.onChangeText.bind(this)(text, 'currency');\n        }}\n        onChange={this.invokeChange.bind(this)}\n        allowContentSelection={this.styles.text.userSelect === 'text'}\n      />\n      </View>\n    </View>);\n  }\n}\n"],"mappings":"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"}

package/components/input/currency/currency.props.js

@@ -0,0 +1,13 @@
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import BaseNumberProps from '@wavemaker/app-rn-runtime/components/input/basenumber/basenumber.props';
+export default class WmCurrencyProps extends BaseNumberProps {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "currency", void 0);
+    _defineProperty(this, "placeholder", '');
+    _defineProperty(this, "floatinglabel", void 0);
+  }
+}
+//# sourceMappingURL=currency.props.js.map

package/components/input/currency/currency.props.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BaseNumberProps","WmCurrencyProps","constructor","arguments","_defineProperty"],"sources":["currency.props.ts"],"sourcesContent":["import BaseNumberProps from '@wavemaker/app-rn-runtime/components/input/basenumber/basenumber.props';\n\nexport default class WmCurrencyProps extends BaseNumberProps {\n  currency: any;\n  placeholder: string = '';\n  floatinglabel?: string;\n}\n"],"mappings":";;;AAAA,OAAOA,eAAe,MAAM,wEAAwE;AAEpG,eAAe,MAAMC,eAAe,SAASD,eAAe,CAAC;EAAAE,YAAA;IAAA,SAAAC,SAAA;IAAAC,eAAA;IAAAA,eAAA,sBAErC,EAAE;IAAAA,eAAA;EAAA;AAE1B"}

package/components/input/currency/currency.styles.js

@@ -0,0 +1,90 @@
+import BASE_THEME from '@wavemaker/app-rn-runtime/styles/theme';
+import { defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';
+import { Platform } from 'react-native';
+export const DEFAULT_CLASS = 'app-currency';
+BASE_THEME.registerStyle((themeVariables, addStyle) => {
+  const defaultStyles = defineStyles({
+    root: {
+      minHeight: 42,
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: themeVariables.inputBorderColor,
+      backgroundColor: themeVariables.inputBackgroundColor,
+      borderRadius: 6,
+      flexDirection: 'row'
+    },
+    text: {
+      fontSize: 16
+    },
+    input: {
+      minHeight: 42,
+      paddingTop: 8,
+      paddingBottom: 8,
+      paddingLeft: 16,
+      paddingRight: 16,
+      flex: 1,
+      borderWidth: 1,
+      borderColor: themeVariables.transparent,
+      borderStyle: 'solid'
+    },
+    labelWrapper: {
+      minHeight: 42,
+      backgroundColor: themeVariables.primaryColor,
+      borderTopLeftRadius: 6,
+      borderBottomLeftRadius: 6,
+      width: 48,
+      paddingTop: 8,
+      paddingBottom: 8,
+      paddingLeft: 16,
+      paddingRight: 16
+    },
+    label: {
+      marginVertical: 0.7,
+      color: themeVariables.primaryContrastColor,
+      textAlignVertical: 'center',
+      textAlign: 'center',
+      fontWeight: 'bold',
+      fontFamily: themeVariables.baseFont,
+      fontSize: 16
+    },
+    invalid: {
+      borderBottomColor: themeVariables.inputInvalidBorderColor
+    },
+    placeholderText: {
+      color: themeVariables.inputPlaceholderColor
+    },
+    floatingLabel: {},
+    activeFloatingLabel: {}
+  });
+  addStyle(DEFAULT_CLASS, '', defaultStyles);
+  addStyle(DEFAULT_CLASS + '-rtl', '', Platform.OS == "web" ? {
+    labelWrapper: {
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0,
+      borderTopRightRadius: 6,
+      borderBottomRightRadius: 6
+    }
+  } : {});
+  addStyle(DEFAULT_CLASS + '-disabled', '', {
+    root: {
+      backgroundColor: themeVariables.inputDisabledBgColor
+    }
+  });
+  addStyle(DEFAULT_CLASS + '-with-label', '', {
+    root: {
+      minHeight: 48
+    },
+    floatingLabel: {
+      position: 'absolute',
+      top: 12,
+      left: 16,
+      fontSize: 14,
+      textAlign: 'left',
+      color: themeVariables.floatingLabelColor
+    },
+    activeFloatingLabel: {
+      color: themeVariables.activeFloatingLabelColor
+    }
+  });
+});
+//# sourceMappingURL=currency.styles.js.map

package/components/input/currency/currency.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BASE_THEME","defineStyles","Platform","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","minHeight","borderWidth","borderStyle","borderColor","inputBorderColor","backgroundColor","inputBackgroundColor","borderRadius","flexDirection","text","fontSize","input","paddingTop","paddingBottom","paddingLeft","paddingRight","flex","transparent","labelWrapper","primaryColor","borderTopLeftRadius","borderBottomLeftRadius","width","label","marginVertical","color","primaryContrastColor","textAlignVertical","textAlign","fontWeight","fontFamily","baseFont","invalid","borderBottomColor","inputInvalidBorderColor","placeholderText","inputPlaceholderColor","floatingLabel","activeFloatingLabel","OS","borderTopRightRadius","borderBottomRightRadius","inputDisabledBgColor","position","top","left","floatingLabelColor","activeFloatingLabelColor"],"sources":["currency.styles.ts"],"sourcesContent":["import BASE_THEME, { AllStyle } from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { Platform } from 'react-native';\n\nexport type WmCurrencyStyles = BaseStyles & {\n  label: AllStyle;\n  invalid: AllStyle;\n  floatingLabel: AllStyle;\n  activeFloatingLabel: AllStyle;\n  placeholderText: AllStyle;\n};\n\nexport const DEFAULT_CLASS = 'app-currency';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n  const defaultStyles: WmCurrencyStyles = defineStyles({\n      root: {\n        minHeight: 42,\n        borderWidth: 1,\n        borderStyle: 'solid',\n        borderColor: themeVariables.inputBorderColor,\n        backgroundColor: themeVariables.inputBackgroundColor,\n        borderRadius: 6,\n        flexDirection: 'row'\n      },\n      text: {\n        fontSize: 16\n      },\n      input : {\n        minHeight: 42,\n        paddingTop: 8,\n        paddingBottom: 8,\n        paddingLeft: 16,\n        paddingRight: 16,\n        flex: 1,\n        borderWidth: 1,\n        borderColor: themeVariables.transparent,\n        borderStyle: 'solid'\n      },\n      labelWrapper: {\n        minHeight: 42,\n        backgroundColor: themeVariables.primaryColor,\n        borderTopLeftRadius: 6,\n        borderBottomLeftRadius: 6,\n        width: 48,\n        paddingTop: 8,\n        paddingBottom: 8,\n        paddingLeft: 16,\n        paddingRight: 16\n      },\n      label: {\n        marginVertical: 0.7,\n        color: themeVariables.primaryContrastColor,\n        textAlignVertical: 'center',\n        textAlign: 'center',\n        fontWeight: 'bold',\n        fontFamily: themeVariables.baseFont,\n        fontSize: 16\n      },\n      invalid: {\n        borderBottomColor: themeVariables.inputInvalidBorderColor\n      },\n      placeholderText: {\n        color: themeVariables.inputPlaceholderColor\n      },\n      floatingLabel: {},\n      activeFloatingLabel: {}\n  });\n\n  addStyle(DEFAULT_CLASS, '', defaultStyles);\n  addStyle(DEFAULT_CLASS + '-rtl', '', Platform.OS==\"web\"?{\n    labelWrapper:{\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n      borderTopRightRadius: 6,\n      borderBottomRightRadius: 6,\n    }\n  }:{});\n  addStyle(DEFAULT_CLASS + '-disabled', '', {\n      root : {\n        backgroundColor: themeVariables.inputDisabledBgColor\n      }\n  });\n  addStyle(DEFAULT_CLASS + '-with-label', '', {\n    root: {\n      minHeight: 48\n    },\n    floatingLabel: {\n      position: 'absolute',\n      top: 12,\n      left: 16,\n      fontSize: 14,\n      textAlign: 'left',\n      color: themeVariables.floatingLabelColor\n    },\n    activeFloatingLabel: {\n      color: themeVariables.activeFloatingLabelColor\n    }\n  });\n});"],"mappings":"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"}

package/components/input/epoch/base-datetime.component.js

@@ -0,0 +1,353 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import React from 'react';
+import { View, Text, Platform, TouchableOpacity } from 'react-native';
+import moment from 'moment';
+import DateTimePicker from '@react-native-community/datetimepicker';
+import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
+import WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';
+import WmDatetimeProps from './datetime/datetime.props';
+import { DEFAULT_CLASS } from './datetime/datetime.styles';
+import WebDatePicker from './date-picker.component';
+import { isNumber, isString } from 'lodash-es';
+import { ModalConsumer } from '@wavemaker/app-rn-runtime/core/modal.service';
+import { validateField } from '@wavemaker/app-rn-runtime/core/utils';
+import { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility';
+import { FloatingLabel } from '@wavemaker/app-rn-runtime/core/components/floatinglabel.component';
+import AppI18nService from '@wavemaker/app-rn-runtime/runtime/services/app-i18n.service';
+import WmButton from '@wavemaker/app-rn-runtime/components/basic/button/button.component';
+export class BaseDatetimeState extends BaseComponentState {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "showDatePicker", false);
+    _defineProperty(this, "dateValue", null);
+    _defineProperty(this, "displayValue", null);
+    _defineProperty(this, "isFocused", false);
+    _defineProperty(this, "timerId", null);
+    _defineProperty(this, "isValid", true);
+    _defineProperty(this, "errorType", '');
+  }
+}
+const CURRENT_DATE = 'CURRENT_DATE';
+const CURRENT_TIME = 'CURRENT_TIME';
+export default class BaseDatetime extends BaseComponent {
+  constructor(props) {
+    let defaultClass = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_CLASS;
+    let defaultProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : new WmDatetimeProps();
+    let defaultState = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : new BaseDatetimeState();
+    super(props, defaultClass, defaultProps, defaultState);
+    _defineProperty(this, "clearBtnClicked", false);
+    _defineProperty(this, "modes", []);
+    _defineProperty(this, "nativeModalOptions", {});
+    _defineProperty(this, "prevDatavalue", void 0);
+  }
+  format(date, format) {
+    if (format === 'timestamp') {
+      return date instanceof Date ? '' + date.getTime() : date;
+    }
+    return date && moment(date).format(format);
+  }
+  parse(date, format) {
+    if (format === 'timestamp') {
+      if (isString(date)) {
+        return new Date(parseInt(date));
+      }
+      if (isNumber(date)) {
+        return new Date(date);
+      }
+    }
+    return date && moment(date, format).toDate();
+  }
+  monitorAndUpdateCurrentTime() {
+    this.stopCurrentTimeMonitor();
+    const timerId = setInterval(() => {
+      this.updateState({
+        props: {
+          readonly: true,
+          datavalue: Date.now()
+        },
+        timerId: timerId
+      });
+    }, 1000);
+  }
+  stopCurrentTimeMonitor() {
+    if (this.state.timerId) {
+      clearInterval(this.state.timerId);
+    }
+  }
+  convertTimezone(date) {
+    const timezone = AppI18nService.getTimezone();
+    if (timezone) {
+      const parsedDateString = new Date(date).toLocaleString(this.props.locale ? this.props.locale : 'en-us', {
+        timeZone: timezone
+      });
+      return moment(parsedDateString, 'M/D/YYYY, h:mm:ss A');
+    } else {
+      return null;
+    }
+  }
+  onPropertyChange(name, $new, $old) {
+    super.onPropertyChange(name, $new, $old);
+    const props = this.state.props;
+    switch (name) {
+      //@ts-ignore
+      case 'datavalue':
+        this.invokeEventCallback('onChange', [null, this, $new, $old]);
+        this.prevDatavalue = $old;
+        if (props.datavalue === CURRENT_TIME) {
+          this.monitorAndUpdateCurrentTime();
+        }
+      case 'datepattern':
+      case 'outputformat':
+        if (props.datavalue && props.outputformat && props.datepattern) {
+          let datavalue = props.datavalue;
+          if (datavalue === CURRENT_DATE || datavalue === CURRENT_TIME) {
+            datavalue = new Date();
+          }
+          const date = isString(datavalue) ? this.parse(datavalue, props.outputformat) : datavalue;
+          datavalue = this.convertTimezone(datavalue);
+          this.updateState({
+            dateValue: date,
+            displayValue: this.format(datavalue ? datavalue : date, props.datepattern)
+          });
+        } else {
+          this.updateState({
+            dateValue: null,
+            displayValue: null
+          });
+        }
+        this.props.onFieldChange && this.props.onFieldChange('datavalue', props.datavalue, this.prevDatavalue);
+        break;
+      case 'mindate':
+        if (isString($new)) {
+          const minDateVal = $new === CURRENT_DATE || $new === CURRENT_TIME ? new Date() : props.mindate;
+          this.updateState({
+            props: {
+              mindate: moment(minDateVal, props.datepattern).toDate()
+            }
+          });
+        }
+        break;
+      case 'maxdate':
+        if (isString($new)) {
+          const maxDateVal = $new === CURRENT_DATE || $new === CURRENT_TIME ? new Date() : props.maxdate;
+          this.updateState({
+            props: {
+              maxdate: moment(maxDateVal, props.datepattern).toDate()
+            }
+          });
+        }
+        break;
+      case 'readonly':
+        this.updateState({
+          props: {
+            disabled: $new
+          }
+        });
+        break;
+    }
+  }
+  onDateChange($event, date) {
+    this.validate(date);
+    this.modes.shift();
+    this.updateState({
+      isFocused: false,
+      showDatePicker: !!this.modes.length,
+      props: {
+        datavalue: this.format(date, this.state.props.outputformat),
+        timestamp: this.format(date, 'timestamp')
+      }
+    });
+  }
+  onBlur() {
+    if (Platform.OS === 'web') {
+      this.validate(this.state.props.datavalue);
+      setTimeout(() => this.props.triggerValidation && this.props.triggerValidation());
+    }
+    this.invokeEventCallback('onBlur', [null, this]);
+  }
+  onFocus() {
+    if (!this.state.props.readonly) {
+      if (Platform.OS !== 'web' && this.state.props.mode === 'datetime') {
+        this.modes = ['date', 'time'];
+      } else {
+        this.modes = [this.state.props.mode];
+      }
+      this.updateState({
+        showDatePicker: true,
+        isFocused: true
+      });
+      this.invokeEventCallback('onFocus', [null, this]);
+    }
+  }
+  validate(value) {
+    const validationObj = validateField(this.state.props, value);
+    this.setState({
+      isValid: validationObj.isValid,
+      errorType: validationObj.errorType
+    });
+  }
+  componentWillUnmount() {
+    super.componentWillUnmount();
+    this.stopCurrentTimeMonitor();
+  }
+  renderWebWidget(props) {
+    return /*#__PURE__*/React.createElement(WebDatePicker, {
+      mode: this.state.props.mode,
+      locale: props.locale,
+      value: this.state.dateValue || new Date(),
+      onDateChange: date => this.onDateChange(null, date),
+      onDismiss: () => this.updateState({
+        isFocused: false,
+        showDatePicker: false
+      }, () => this.onBlur()),
+      minimumDate: props.mindate,
+      maximumDate: props.maxdate
+    });
+  }
+  renderNativeWidget(props, onDismiss) {
+    return /*#__PURE__*/React.createElement(DateTimePicker, _extends({
+      mode: this.modes[0]
+    }, getAccessibilityProps(AccessibilityWidgetType.DATE, {
+      ...this.state.props
+    }), {
+      value: this.state.dateValue || new Date(),
+      is24Hour: true,
+      display: "default",
+      onChange: (event, date) => {
+        if (date && this.state.props.mode === 'datetime' && this.modes[0] === 'time') {
+          const dateSelected = this.state.dateValue;
+          date = moment(date).set('month', dateSelected.getMonth()).set('year', dateSelected.getFullYear()).set('date', dateSelected.getDate()).toDate();
+        }
+        this.onDateChange(event, date || this.state.dateValue);
+        if (this.modes.length <= 1) {
+          this.onBlur();
+          onDismiss && onDismiss();
+        }
+      },
+      minimumDate: props.mindate,
+      maximumDate: props.maxdate
+    }));
+  }
+  renderNativeIOSWidget(props, onDismiss) {
+    let date_change = undefined;
+    return /*#__PURE__*/React.createElement(View, {
+      style: this.styles.dialog
+    }, /*#__PURE__*/React.createElement(DateTimePicker, {
+      mode: this.modes[0],
+      value: this.state.dateValue || new Date(),
+      is24Hour: true,
+      display: "spinner",
+      onChange: (event, date) => {
+        if (date && this.state.props.mode === 'datetime' && this.modes[0] === 'time') {
+          const dateSelected = this.state.dateValue;
+          date = moment(date).set('month', dateSelected.getMonth()).set('year', dateSelected.getFullYear()).set('date', dateSelected.getDate()).toDate();
+        }
+        date_change = date;
+      },
+      minimumDate: props.mindate,
+      maximumDate: props.maxdate
+    }), /*#__PURE__*/React.createElement(View, {
+      style: this.styles.actionWrapper
+    }, /*#__PURE__*/React.createElement(WmButton, {
+      styles: this.styles.selectBtn,
+      caption: "Select",
+      onTap: () => {
+        this.onDateChange(null, date_change || this.state.dateValue || new Date());
+        if (this.modes.length <= 1) {
+          this.onBlur();
+          onDismiss && onDismiss();
+        }
+      }
+    }), /*#__PURE__*/React.createElement(WmButton, {
+      styles: this.styles.cancelBtn,
+      caption: "Cancel",
+      onTap: () => {
+        this.modes.shift();
+        this.onDateChange(null, this.state.dateValue || undefined);
+        this.onBlur();
+        onDismiss && onDismiss();
+      }
+    })));
+  }
+  renderNativeIOSWidgetWithModal(props) {
+    return /*#__PURE__*/React.createElement(ModalConsumer, null, modalService => {
+      this.nativeModalOptions.content = /*#__PURE__*/React.createElement(React.Fragment, null, this.renderNativeIOSWidget(props, () => modalService.hideModal(this.nativeModalOptions)));
+      this.nativeModalOptions.centered = true;
+      this.nativeModalOptions.onClose = () => {
+        this.onBlur();
+      };
+      modalService.showModal(this.nativeModalOptions);
+      return null;
+    });
+  }
+  renderNativeWidgetWithModal(props) {
+    return /*#__PURE__*/React.createElement(ModalConsumer, null, modalService => {
+      this.nativeModalOptions.content = /*#__PURE__*/React.createElement(React.Fragment, null, this.renderNativeWidget(props, () => modalService.hideModal(this.nativeModalOptions)));
+      this.nativeModalOptions.centered = true;
+      this.nativeModalOptions.onClose = () => {
+        this.onBlur();
+      };
+      modalService.showModal(this.nativeModalOptions);
+      return null;
+    });
+  }
+  addTouchableOpacity(props, children, styles) {
+    return /*#__PURE__*/React.createElement(TouchableOpacity, _extends({}, this.getTestPropsForAction(), {
+      style: styles,
+      onPress: () => {
+        if (!props.readonly) {
+          this.onFocus();
+        }
+        this.invokeEventCallback('onTap', [null, this]);
+      }
+    }), children);
+  }
+  getIcon() {
+    if (this.state.props.mode === 'time') {
+      return 'wm-sl-l sl-time';
+    }
+    return 'wm-sl-l sl-calendar';
+  }
+  renderWidget(props) {
+    return this.addTouchableOpacity(props, /*#__PURE__*/React.createElement(View, {
+      style: [this.styles.root, this.state.isValid ? {} : this.styles.invalid, this.state.isFocused ? this.styles.focused : null]
+    }, this._background, props.floatinglabel ? /*#__PURE__*/React.createElement(FloatingLabel, {
+      moveUp: !!(props.datavalue || this.state.isFocused),
+      label: props.floatinglabel ?? props.placeholder,
+      style: {
+        ...(this.styles.floatingLabel || []),
+        ...(this.state.isFocused ? this.styles.activeFloatingLabel || {} : {})
+      }
+    }) : null, /*#__PURE__*/React.createElement(View, {
+      style: this.styles.container
+    }, this.addTouchableOpacity(props, /*#__PURE__*/React.createElement(Text, _extends({
+      style: [this.styles.text, this.state.displayValue ? {} : this.styles.placeholderText]
+    }, this.getTestPropsForLabel()), this.state.displayValue || (props.floatinglabel ? '' : this.state.props.placeholder)), [{
+      flex: 1
+    }, this.isRTL ? {
+      flexDirection: 'row',
+      textAlign: 'right'
+    } : {}]), !props.readonly && props.datavalue && /*#__PURE__*/React.createElement(WmIcon, {
+      iconclass: "wi wi-clear",
+      styles: {
+        color: this.styles.text.color,
+        ...this.styles.clearIcon
+      },
+      id: this.getTestId('clearicon'),
+      onTap: () => {
+        this.onDateChange(null, null);
+        this.clearBtnClicked = true;
+      }
+    }) || null, this.addTouchableOpacity(props, /*#__PURE__*/React.createElement(WmIcon, {
+      iconclass: this.getIcon(),
+      styles: {
+        color: this.styles.text.color,
+        ...this.styles.calendarIcon
+      }
+    }))), this.state.showDatePicker && (Platform.OS === 'web' && this.renderWebWidget(props) || Platform.OS === 'android' && this.renderNativeWidget(props) || Platform.OS === 'ios' && this.renderNativeIOSWidgetWithModal(props))));
+  }
+}
+//# sourceMappingURL=base-datetime.component.js.map