@wavemaker-ai/app-rn-runtime 1.0.0-next.27766

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

@@ -0,0 +1,152 @@
+import BASE_THEME from '@wavemaker-ai/app-rn-runtime/styles/theme';
+import { defineStyles } from '@wavemaker-ai/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,
+      display: 'flex',
+      justifyContent: 'center'
+    },
+    label: {
+      marginVertical: 0.7,
+      color: themeVariables.primaryContrastColor,
+      textAlignVertical: 'center',
+      textAlign: 'center',
+      fontWeight: 'bold',
+      fontFamily: themeVariables.baseFont,
+      fontSize: 16
+    },
+    invalid: {
+      borderBottomColor: themeVariables.inputInvalidBorderColor
+    },
+    focused: {
+      borderColor: themeVariables.inputFocusBorderColor
+    },
+    placeholderText: {
+      color: themeVariables.inputPlaceholderColor
+    },
+    skeleton: {
+      root: {
+        borderRadius: 6,
+        paddingLeft: 16,
+        paddingRight: 16,
+        minHeight: 42,
+        paddingTop: 8,
+        paddingBottom: 8,
+        width: '100%',
+        height: 40
+      }
+    },
+    skeletonLabel: {
+      root: {
+        width: 20,
+        height: 28,
+        borderRadius: 4,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+      }
+    },
+    skeletonTextInputWrapper: {
+      root: {
+        width: 80,
+        height: 16,
+        borderRadius: 4,
+        marginLeft: 16
+      }
+    },
+    skeletonLabelWrapper: {
+      root: {
+        minHeight: 42,
+        width: '100%',
+        borderWidth: 0
+      }
+    },
+    floatingLabel: {},
+    activeFloatingLabel: {},
+    inactiveFloatingLabel: {},
+    inputNoLeftRadius: {
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0,
+      borderLeftWidth: 0
+    }
+  });
+  addStyle(DEFAULT_CLASS, '', defaultStyles);
+
+  // Add horizontal form input styles for horizontal form field layouts - positioned early to avoid overriding more specific styles
+  addStyle('form-currency-input-horizontal', '', {
+    root: {
+      flex: 1,
+      minWidth: 0,
+      // Allow shrinking below intrinsic content size if needed
+      maxWidth: '100%' // Prevent overflow
+    },
+    text: {}
+  });
+  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
+    },
+    inactiveFloatingLabel: {
+      color: themeVariables.floatingLabelColor
+    }
+  });
+});
+//# 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","display","justifyContent","label","marginVertical","color","primaryContrastColor","textAlignVertical","textAlign","fontWeight","fontFamily","baseFont","invalid","borderBottomColor","inputInvalidBorderColor","focused","inputFocusBorderColor","placeholderText","inputPlaceholderColor","skeleton","height","skeletonLabel","alignItems","skeletonTextInputWrapper","marginLeft","skeletonLabelWrapper","floatingLabel","activeFloatingLabel","inactiveFloatingLabel","inputNoLeftRadius","borderLeftWidth","minWidth","maxWidth","OS","borderTopRightRadius","borderBottomRightRadius","inputDisabledBgColor","position","top","left","floatingLabelColor","activeFloatingLabelColor"],"sources":["currency.styles.ts"],"sourcesContent":["import BASE_THEME, { AllStyle } from '@wavemaker-ai/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker-ai/app-rn-runtime/core/base.component';\nimport { Platform } from 'react-native';\nimport { WmSkeletonStyles } from '@wavemaker-ai/app-rn-runtime/components/basic/skeleton/skeleton.styles';\n\nexport type WmCurrencyStyles = BaseStyles & {\n  label: AllStyle;\n  invalid: AllStyle;\n  focused: AllStyle;\n  floatingLabel: AllStyle;\n  activeFloatingLabel: AllStyle;\n  inactiveFloatingLabel: AllStyle;\n  placeholderText: AllStyle;\n  skeleton: WmSkeletonStyles;\n  skeletonLabel: WmSkeletonStyles;\n  skeletonTextInputWrapper:  WmSkeletonStyles;\n  skeletonLabelWrapper:  WmSkeletonStyles;\n  inputNoLeftRadius: 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        display: 'flex',\n        justifyContent: 'center'\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      focused : {\n        borderColor: themeVariables.inputFocusBorderColor,\n      },\n      placeholderText: {\n        color: themeVariables.inputPlaceholderColor\n      },\n      skeleton: {\n        root:{\n          borderRadius: 6,\n          paddingLeft: 16,\n          paddingRight: 16,\n          minHeight: 42,\n          paddingTop: 8,\n          paddingBottom: 8,\n          width: '100%',\n          height: 40\n        },\n      } as any as WmSkeletonStyles,\n      skeletonLabel: {\n        root: {\n          width:20,\n          height:28,\n          borderRadius:4,\n          display:'flex',\n          justifyContent:'center',\n          alignItems:'center'\n        }\n      } as any as WmSkeletonStyles,\n      skeletonTextInputWrapper: {\n        root: {\n          width:80,\n          height:16,\n          borderRadius:4,\n          marginLeft:16\n        }\n      } as any as WmSkeletonStyles,\n      skeletonLabelWrapper: {\n        root: {\n          minHeight:42,\n          width:'100%',\n          borderWidth:0,\n        }\n      } as any as WmSkeletonStyles,\n      floatingLabel: {},\n      activeFloatingLabel: {},\n      inactiveFloatingLabel: {},\n      inputNoLeftRadius: {\n          borderTopLeftRadius: 0,\n          borderBottomLeftRadius: 0,\n          borderLeftWidth:0\n      }\n  });\n\n  addStyle(DEFAULT_CLASS, '', defaultStyles);\n\n  // Add horizontal form input styles for horizontal form field layouts - positioned early to avoid overriding more specific styles\n  addStyle('form-currency-input-horizontal', '', {\n    root: {\n      flex: 1,\n      minWidth: 0, // Allow shrinking below intrinsic content size if needed\n      maxWidth: '100%' // Prevent overflow\n    },\n    text: {}\n  } as BaseStyles);\n\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    inactiveFloatingLabel: {\n      color: themeVariables.floatingLabelColor\n    }\n  });\n});\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,498 @@
+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 { View, Text, Platform, TouchableOpacity } from 'react-native';
+import moment from 'moment';
+import DateTimePicker from '@react-native-community/datetimepicker';
+import { BaseComponent, BaseComponentState } from '@wavemaker-ai/app-rn-runtime/core/base.component';
+import WmIcon from '@wavemaker-ai/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-ai/app-rn-runtime/core/modal.service';
+import { isDateFormatAsPerPattern, validateField, splitBorderColorInPlace } from '@wavemaker-ai/app-rn-runtime/core/utils';
+import { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker-ai/app-rn-runtime/core/accessibility';
+import { FloatingLabel } from '@wavemaker-ai/app-rn-runtime/core/components/floatinglabel.component';
+import AppI18nService from '@wavemaker-ai/app-rn-runtime/runtime/services/app-i18n.service';
+import WmButton from '@wavemaker-ai/app-rn-runtime/components/basic/button/button.component';
+import WmDatePickerModal from './wheelpickermodal/date/date-picker-modal.component';
+import WmTimePickerModal from './wheelpickermodal/time/time-picker-modal.component';
+import { createSkeleton } from '@wavemaker-ai/app-rn-runtime/components/basic/skeleton/skeleton.component';
+export class BaseDatetimeState extends BaseComponentState {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "showDatePicker", false);
+    _defineProperty(this, "showDatePickerModal", false);
+    _defineProperty(this, "showTimePickerModal", 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, defaultClass = DEFAULT_CLASS, defaultProps = new WmDatetimeProps(), defaultState = 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) {
+    var _this$props$locale;
+    if (format === 'timestamp') {
+      return date instanceof Date ? '' + date.getTime() : date;
+    }
+
+    // Convert moment formatting with respect to the current local.
+    moment.locale((_this$props$locale = this.props.locale) !== null && _this$props$locale !== void 0 ? _this$props$locale : 'en');
+    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;
+    }
+  }
+  rtlSanityCheck(text) {
+    return text === null || text === void 0 ? void 0 : text.replace(/[\u200E\u200F\u202B\u202C]/g, '');
+  }
+  momentPattern(pattern) {
+    const removeSpecialMarks = this.rtlSanityCheck(pattern);
+    return removeSpecialMarks === null || removeSpecialMarks === void 0 ? void 0 : removeSpecialMarks.replaceAll('y', 'Y').replaceAll('d', 'D');
+  }
+  onPropertyChange(name, $new, $old) {
+    super.onPropertyChange(name, $new, $old);
+    const props = this.state.props;
+    switch (name) {
+      //@ts-ignore
+      case 'datavalue':
+        this.prevDatavalue = $old;
+        if (props.datavalue === CURRENT_TIME) {
+          this.monitorAndUpdateCurrentTime();
+        }
+      case 'datepattern':
+      case 'outputformat':
+        if (props.datavalue && this.momentPattern(props.outputformat) && this.momentPattern(props.datepattern)) {
+          let datavalue = props.datavalue;
+          if (datavalue === CURRENT_DATE || datavalue === CURRENT_TIME) {
+            datavalue = new Date();
+          }
+          const date = isString(datavalue) ? this.parse(datavalue, this.momentPattern(props.outputformat)) : datavalue;
+          datavalue = this.convertTimezone(datavalue);
+          this.updateState({
+            dateValue: date,
+            displayValue: this.format(datavalue ? datavalue : date, this.momentPattern(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;
+          // * check if supplied mindate is as per datepattern
+          const isMinMatchingPattern = minDateVal ? isDateFormatAsPerPattern(this.momentPattern(props.datepattern), minDateVal) : false;
+          // * min date formatted as per datepattern
+          const minDatePatternFormatted = minDateVal && isMinMatchingPattern ? moment(moment(minDateVal, this.momentPattern(props.datepattern)).format('YYYY-MM-DD')) : null;
+          // * min date formatted as per ISO, if mindate supplied is not as per datepattern
+          const formattedMinDate = minDatePatternFormatted && isMinMatchingPattern ? minDatePatternFormatted.toDate() : moment(minDateVal).toDate();
+          this.updateState({
+            props: {
+              mindate: formattedMinDate
+            }
+          });
+        }
+        break;
+      case 'maxdate':
+        if (isString($new)) {
+          const maxDateVal = $new === CURRENT_DATE || $new === CURRENT_TIME ? new Date() : props.maxdate;
+          // * check if supplied maxdate is as per datepattern
+          const isMaxMatchingPattern = maxDateVal ? isDateFormatAsPerPattern(this.momentPattern(props.datepattern), maxDateVal) : false;
+          // * max date formatted as per datepattern
+          const maxDatePatternFormatted = maxDateVal && isMaxMatchingPattern ? moment(moment(maxDateVal, this.momentPattern(props.datepattern)).format('YYYY-MM-DD')) : null;
+          // * max date formatted as per ISO, if maxdate supplied is not as per datepattern
+          const formattedMaxDate = maxDatePatternFormatted && isMaxMatchingPattern ? maxDatePatternFormatted.toDate() : moment(maxDateVal).toDate();
+          this.updateState({
+            props: {
+              maxdate: formattedMaxDate
+            }
+          });
+        }
+        break;
+      case 'readonly':
+        this.updateState({
+          props: {
+            disabled: $new
+          }
+        });
+        break;
+    }
+  }
+  onDateChange($event, date) {
+    const prevDate = this.format(this.state.dateValue, this.momentPattern(this.state.props.outputformat)) || undefined;
+    this.modes.shift();
+    const newDate = this.format(date, this.momentPattern(this.state.props.outputformat));
+    this.updateState({
+      isFocused: false,
+      showDatePicker: !!this.modes.length,
+      props: {
+        datavalue: newDate,
+        timestamp: this.format(date, 'timestamp')
+      }
+    }, () => {
+      this.validate(date);
+      this.invokeEventCallback('onChange', [null, this, newDate, prevDate]);
+    });
+  }
+  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
+      });
+      if (this.state.props.mode === 'date') {
+        this.updateState({
+          showDatePickerModal: true
+        });
+      }
+      if (this.state.props.mode === 'time') {
+        this.updateState({
+          showTimePickerModal: true
+        });
+      }
+      if (this.state.props.mode === 'datetime') {
+        this.updateState({
+          showDatePickerModal: 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, handleLayout) {
+    return /*#__PURE__*/React.createElement(TouchableOpacity, _extends({}, this.getTestPropsForAction(), {
+      onLayout: handleLayout,
+      importantForAccessibility: "no",
+      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';
+  }
+  renderSkeleton(props) {
+    return this.state.props.floatinglabel || this.state.displayValue || this.state.props.placeholder ? /*#__PURE__*/React.createElement(View, {
+      style: {
+        display: 'flex',
+        ...this.styles.container,
+        ...this.styles.root
+      }
+    }, createSkeleton(this.theme, {}, {
+      ...this.styles.skeleton.root
+    }), createSkeleton(this.theme, {}, {
+      ...this.styles.skeleton.icon
+    })) : null;
+  }
+  renderWidget(props) {
+    var _this$theme$getStyle, _this$theme$getStyle2, _props$floatinglabel, _this$styles$root;
+    const is12HourFormat = (props === null || props === void 0 ? void 0 : props.datepattern) && /hh:mm(:ss|:sss)? a/.test(props.datepattern);
+    const is24Hour = is12HourFormat ? false : props.is24hour;
+    let rootStyles = this.styles.root;
+    let updatedRootStyles = splitBorderColorInPlace(rootStyles);
+    const foundationStyle = this.theme.getStyle('app-input');
+    const classname = this.state.props.classname ? this.state.props.classname.split(" ").pop() : '';
+    const activeFloatingLabelStyleKey = props.mode === 'time' ? 'app-time-with-label' : props.mode === 'date' ? 'app-date-with-label' : 'app-datetime-with-label';
+    const activeFloatingLabelStyle = this.theme.mergeStyle(this.styles.activeFloatingLabel, (_this$theme$getStyle = this.theme.getStyle(activeFloatingLabelStyleKey)) === null || _this$theme$getStyle === void 0 ? void 0 : _this$theme$getStyle.activeFloatingLabel, (_this$theme$getStyle2 = this.theme.getStyle(`${classname}`)) === null || _this$theme$getStyle2 === void 0 ? void 0 : _this$theme$getStyle2.focused);
+    return this.addTouchableOpacity(props, /*#__PURE__*/React.createElement(View, {
+      style: [updatedRootStyles, this.state.isValid ? {} : this.styles.invalid, this.state.isFocused ? this.styles.focused : null, this.state.props.disabled ? this.theme.mergeStyle(this.styles.root, foundationStyle === null || foundationStyle === void 0 ? void 0 : foundationStyle.disabled, this.theme.getStyle(`${classname}`).disabled) : {}],
+      accessible: props.accessible,
+      accessibilityLabel: props.accessibilitylabel || `Select ${props === null || props === void 0 ? void 0 : props.mode}`,
+      accessibilityRole: props.accessibilityrole || 'button',
+      accessibilityHint: props.hint
+    }, this._background, props.floatinglabel ? /*#__PURE__*/React.createElement(FloatingLabel, {
+      moveUp: !!(props.datavalue || this.state.isFocused),
+      label: (_props$floatinglabel = props.floatinglabel) !== null && _props$floatinglabel !== void 0 ? _props$floatinglabel : props.placeholder,
+      variant: props.variant,
+      labelBackground: props.variant === 'outlined' ? (_this$styles$root = this.styles.root) === null || _this$styles$root === void 0 ? void 0 : _this$styles$root.backgroundColor : undefined,
+      style: {
+        ...(this.styles.floatingLabel || []),
+        ...(this.state.isFocused ? activeFloatingLabelStyle || {} : {})
+      }
+    }) : 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'),
+      accessibilitylabel: `clear ${props === null || props === void 0 ? void 0 : props.mode}`,
+      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
+      },
+      hint: props === null || props === void 0 ? void 0 : props.hint,
+      id: this.getTestId('calendericon'),
+      accessible: false
+    }))), this.state.showDatePicker && (Platform.OS === 'web' && this.renderWebWidget(props) || !props.iswheelpicker && Platform.OS === 'android' && this.renderNativeWidget(props) || !props.iswheelpicker && Platform.OS === 'ios' && this.renderNativeIOSWidgetWithModal(props)), Platform.OS !== 'web' && props.iswheelpicker && this.state.showDatePickerModal && /*#__PURE__*/React.createElement(WmDatePickerModal, {
+      isVisible: this.state.showDatePickerModal,
+      onClose: () => this.updateState({
+        showDatePickerModal: false
+      }),
+      minDate: props.mindate,
+      maxDate: props.maxdate,
+      selectedDate: this.state.dateValue,
+      onSelect: date => {
+        this.onDateChange(null, date);
+        this.updateState({
+          isFocused: false,
+          showDatePickerModal: false
+        }, () => {
+          setTimeout(() => {
+            this.onBlur();
+          }, 10);
+
+          // * showing time picker after selecting date in datetime mode
+          if (this.state.props.mode === "datetime") {
+            this.setState({
+              showTimePickerModal: true
+            });
+          }
+        });
+      },
+      onCancel: () => {
+        // this.onDateChange(null as any, this.state.dateValue || undefined);
+        this.updateState({
+          isFocused: false,
+          showDatePickerModal: false
+        }, () => this.onBlur());
+      },
+      dateheadertitle: props.dateheadertitle,
+      dateconfirmationtitle: props.dateconfirmationtitle,
+      datecanceltitle: props.datecanceltitle
+    }), Platform.OS !== 'web' && props.iswheelpicker && this.state.showTimePickerModal && /*#__PURE__*/React.createElement(WmTimePickerModal, {
+      selectedDateTime: this.state.dateValue,
+      is24Hour: is24Hour,
+      isVisible: this.state.showTimePickerModal,
+      onClose: () => this.updateState({
+        isFocused: false,
+        showTimePickerModal: false
+      }),
+      onSelect: time => {
+        this.onDateChange(null, time);
+        this.updateState({
+          isFocused: false,
+          showTimePickerModal: false
+        }, () => {
+          setTimeout(() => {
+            this.onBlur();
+          }, 10);
+        });
+      },
+      onCancel: () => {
+        // this.onDateChange(null as any, this.state.dateValue || undefined);
+        this.updateState({
+          isFocused: false,
+          showTimePickerModal: false
+        }, () => {
+          this.onBlur();
+          this.modes.shift();
+        });
+      },
+      timeheadertitle: props.timeheadertitle,
+      timeconfirmationtitle: props.timeconfirmationtitle,
+      timecanceltitle: props.timecanceltitle
+    })), this.styles.rootWrapper, this.handleLayout);
+  }
+}
+//# sourceMappingURL=base-datetime.component.js.map