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

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

@@ -0,0 +1,473 @@
+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/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 { isDateFormatAsPerPattern, 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';
+import WmDatePickerModal from './wheelpickermodal/date/date-picker-modal.component';
+import WmTimePickerModal from './wheelpickermodal/time/time-picker-modal.component';
+import { createSkeleton } from '@wavemaker/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) {
+    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;
+    }
+  }
+  momentPattern(pattern) {
+    return pattern === null || pattern === void 0 ? void 0 : pattern.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.validate(date);
+    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.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) {
+    var _children$props;
+    const hint = children === null || children === void 0 || (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.hint;
+    const accessibilityProps = hint ? {
+      accessible: true,
+      accessibilityHint: hint
+    } : {};
+    return /*#__PURE__*/React.createElement(TouchableOpacity, _extends({}, this.getTestPropsForAction(), accessibilityProps, {
+      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 _props$floatinglabel;
+    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;
+    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.floatinglabel) !== null && _props$floatinglabel !== void 0 ? _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'),
+      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')
+    }))), 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
+        }, () => {
+          this.onBlur();
+
+          // * 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
+        }, () => this.onBlur());
+      },
+      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
+    })));
+  }
+}
+//# sourceMappingURL=base-datetime.component.js.map

package/components/input/epoch/date-picker.component.js

@@ -0,0 +1,136 @@
+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 } from 'react-native';
+import { DatePickerModalContent, TimePickerModal } from 'react-native-paper-dates';
+import { ModalConsumer } from '@wavemaker/app-rn-runtime/core/modal.service';
+import ThemeVariables from '@wavemaker/app-rn-runtime/styles/theme.variables';
+export class DatePickerProps {
+  constructor() {
+    _defineProperty(this, "mode", 'datetime');
+    _defineProperty(this, "value", new Date());
+    _defineProperty(this, "minimumDate", null);
+    _defineProperty(this, "maximumDate", null);
+    _defineProperty(this, "onDateChange", null);
+    _defineProperty(this, "onDismiss", null);
+    _defineProperty(this, "locale", '');
+  }
+}
+export class DatePickerState {
+  constructor() {
+    _defineProperty(this, "value", null);
+    _defineProperty(this, "modalOptions", {});
+    _defineProperty(this, "showDatePicker", false);
+    _defineProperty(this, "showTimePicker", false);
+  }
+}
+const styles = {
+  root: {},
+  text: {},
+  modal: {},
+  content: {
+    backgroundColor: ThemeVariables.INSTANCE.datepickerBgColor
+  }
+};
+export default class DatePickerComponnent extends React.Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "timemodal", null);
+    this.state = {
+      showDatePicker: this.props.mode !== 'time',
+      showTimePicker: this.props.mode === 'time',
+      value: props.value,
+      modalOptions: {}
+    };
+  }
+  prepareModalOptions(content) {
+    const o = this.state.modalOptions;
+    o.content = content;
+    o.modalStyle = styles.modal;
+    o.centered = true;
+    return o;
+  }
+  onDateChange(date, modalService) {
+    const old = this.state.value;
+    if (old && date) {
+      date.setHours(old.getHours());
+      date.setMinutes(old.getMinutes());
+    }
+    if (this.props.mode === 'date') {
+      this.setState({
+        value: date,
+        showDatePicker: false,
+        showTimePicker: false
+      }, () => {
+        this.props.onDateChange && this.props.onDateChange(this.state.value);
+        this.close(modalService);
+      });
+    } else if (date) {
+      this.setState({
+        value: date,
+        showDatePicker: false,
+        showTimePicker: true
+      }, () => {
+        modalService.refresh();
+      });
+    }
+  }
+  onTimeChange(hours, minutes, modalService) {
+    const date = this.state.value || new Date();
+    date.setHours(hours);
+    date.setMinutes(minutes);
+    this.setState({
+      value: date,
+      showDatePicker: false,
+      showTimePicker: false
+    }, () => {
+      this.props.onDateChange && this.props.onDateChange(this.state.value);
+      this.timemodal = null;
+      this.close(modalService);
+    });
+  }
+  prepareTimeModal(modalService) {
+    if (!this.timemodal) {
+      var _this$props$value, _this$props$value2;
+      this.timemodal = /*#__PURE__*/React.createElement(View, {
+        style: {
+          height: 600,
+          marginTop: 600
+        }
+      }, /*#__PURE__*/React.createElement(TimePickerModal, {
+        hours: ((_this$props$value = this.props.value) === null || _this$props$value === void 0 ? void 0 : _this$props$value.getHours()) || 0,
+        minutes: ((_this$props$value2 = this.props.value) === null || _this$props$value2 === void 0 ? void 0 : _this$props$value2.getMinutes()) || 0,
+        visible: true,
+        onDismiss: () => this.close(modalService),
+        onConfirm: params => {
+          this.onTimeChange(params.hours, params.minutes, modalService);
+        }
+      }));
+    }
+    return this.timemodal;
+  }
+  close(modalService) {
+    modalService.hideModal(this.state.modalOptions);
+    this.props.onDismiss && this.props.onDismiss();
+  }
+  render() {
+    return this.state.showDatePicker || this.state.showTimePicker ? /*#__PURE__*/React.createElement(ModalConsumer, null, modalService => {
+      modalService.showModal(this.prepareModalOptions(/*#__PURE__*/React.createElement(View, {
+        style: this.state.showDatePicker ? styles.content : {}
+      }, this.state.showDatePicker && /*#__PURE__*/React.createElement(DatePickerModalContent, {
+        mode: "single",
+        date: this.props.value,
+        onDismiss: () => this.close(modalService),
+        onConfirm: params => this.onDateChange(params.date, modalService),
+        validRange: {
+          startDate: this.props.minimumDate,
+          endDate: this.props.maximumDate
+        },
+        locale: this.props.locale
+      }), this.state.showTimePicker && this.prepareTimeModal(modalService))));
+      return null;
+    }) : null;
+  }
+}
+//# sourceMappingURL=date-picker.component.js.map

package/components/input/epoch/date-picker.component.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","DatePickerModalContent","TimePickerModal","ModalConsumer","ThemeVariables","DatePickerProps","constructor","_defineProperty","Date","DatePickerState","styles","root","text","modal","content","backgroundColor","INSTANCE","datepickerBgColor","DatePickerComponnent","Component","props","state","showDatePicker","mode","showTimePicker","value","modalOptions","prepareModalOptions","o","modalStyle","centered","onDateChange","date","modalService","old","setHours","getHours","setMinutes","getMinutes","setState","close","refresh","onTimeChange","hours","minutes","timemodal","prepareTimeModal","_this$props$value","_this$props$value2","createElement","style","height","marginTop","visible","onDismiss","onConfirm","params","hideModal","render","showModal","validRange","startDate","minimumDate","endDate","maximumDate","locale"],"sources":["date-picker.component.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { View } from 'react-native';\nimport { DatePickerModalContent, TimePickerModal } from 'react-native-paper-dates';\nimport { BaseStyles } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { AllStyle } from '@wavemaker/app-rn-runtime/styles/theme';\nimport { ModalConsumer, ModalService, ModalOptions } from '@wavemaker/app-rn-runtime/core/modal.service';\nimport ThemeVariables from '@wavemaker/app-rn-runtime/styles/theme.variables';\n\nexport class DatePickerProps {\n    mode?: 'date' | 'time' | 'datetime' | string = 'datetime';\n    value?: Date = new Date();\n    minimumDate?: Date = null as any;\n    maximumDate?: Date = null as any;\n    onDateChange?: Function = null as any;\n    onDismiss?: Function = null as any;\n    locale: string = '';\n}\n\nexport class DatePickerState {\n    public value?: Date = null as any;\n    public modalOptions: ModalOptions = {} as any;\n    public showDatePicker = false;\n    public showTimePicker = false;\n}\n\ntype DatePickerStyles = BaseStyles & {\n    modal: AllStyle,\n    content: AllStyle\n};\n\nconst styles: DatePickerStyles = {\n    root: {},\n    text: {},\n    modal: {},\n    content: {\n        backgroundColor: ThemeVariables.INSTANCE.datepickerBgColor\n    }\n};\n\nexport default class DatePickerComponnent extends React.Component<DatePickerProps, DatePickerState, any> {\n    timemodal = null as any;\n    constructor(props: DatePickerProps) {\n        super(props);\n        this.state = {\n            showDatePicker: this.props.mode !== 'time',\n            showTimePicker: this.props.mode === 'time',\n            value: props.value,\n            modalOptions: {}\n        } as DatePickerState;\n    }\n\n    prepareModalOptions(content: ReactNode) {\n        const o = this.state.modalOptions;\n        o.content = content;\n        o.modalStyle = styles.modal;\n        o.centered = true;\n        return o;\n    }\n\n    public onDateChange(date: Date | undefined, modalService: ModalService) {\n        const old = this.state.value;\n        if (old && date) {\n            date.setHours(old.getHours());\n            date.setMinutes(old.getMinutes());\n        }\n        if (this.props.mode === 'date') {\n            this.setState({\n                value : date,\n                showDatePicker: false,\n                showTimePicker: false\n            }, () => {\n                this.props.onDateChange && this.props.onDateChange(this.state.value);\n                this.close(modalService);\n            });\n        } else if (date) {\n            this.setState({\n                value : date,\n                showDatePicker: false,\n                showTimePicker: true\n            }, () => {\n                modalService.refresh();\n            });\n        }\n    }\n\n    public onTimeChange(hours: number, minutes: number, modalService: ModalService) {\n        const date = this.state.value || new Date();\n        date.setHours(hours);\n        date.setMinutes(minutes);\n        this.setState({\n            value : date,\n            showDatePicker: false,\n            showTimePicker: false\n        }, () => {\n            this.props.onDateChange && this.props.onDateChange(this.state.value);\n            this.timemodal = null;\n            this.close(modalService);\n        });\n    }\n\n    prepareTimeModal(modalService: ModalService) {\n        if (!this.timemodal) {\n            this.timemodal = (\n            <View style={{height: 600, marginTop: 600}}>\n                {\n                    React.createElement(TimePickerModal, {\n                        hours : this.props.value?.getHours() || 0,\n                        minutes : this.props.value?.getMinutes() || 0,\n                        visible : true,\n                        onDismiss : () => this.close(modalService),\n                        onConfirm: (params) => {\n                            this.onTimeChange(params.hours, params.minutes, modalService);\n                        }\n                    })\n                }\n            </View>);\n        }\n        return this.timemodal;\n    }\n\n    close(modalService: ModalService) {\n        modalService.hideModal(this.state.modalOptions);\n        this.props.onDismiss && this.props.onDismiss();\n    }\n\n    render() {\n        return (this.state.showDatePicker || this.state.showTimePicker) ? (\n        <ModalConsumer>\n            {(modalService: ModalService) => {\n                modalService.showModal(this.prepareModalOptions(\n                    (<View style={this.state.showDatePicker ? styles.content: {}}>\n                        {this.state.showDatePicker && \n                            React.createElement(DatePickerModalContent, {\n                                mode: \"single\",\n                                date: this.props.value,\n                                onDismiss: () => this.close(modalService),\n                                onConfirm: (params) => this.onDateChange(params.date, modalService),\n                                validRange: {\n                                    startDate: this.props.minimumDate,\n                                    endDate: this.props.maximumDate\n                                },\n                                locale: this.props.locale})}\n                        {this.state.showTimePicker && this.prepareTimeModal(modalService)}\n                    </View>)\n                ));\n                return null;\n            }}\n        </ModalConsumer>): null;\n    }\n}\n"],"mappings":"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","ignoreList":[]}

package/components/input/epoch/datetime/datetime.props.js

@@ -0,0 +1,35 @@
+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 WmDatetimeProps extends BaseProps {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "mode", 'datetime');
+    _defineProperty(this, "datavalue", undefined);
+    _defineProperty(this, "datepattern", '');
+    _defineProperty(this, "outputformat", 'timestamp');
+    _defineProperty(this, "mindate", undefined);
+    _defineProperty(this, "maxdate", undefined);
+    _defineProperty(this, "placeholder", 'Select date time');
+    _defineProperty(this, "readonly", false);
+    _defineProperty(this, "onFieldChange", void 0);
+    _defineProperty(this, "locale", '');
+    _defineProperty(this, "timestamp", void 0);
+    _defineProperty(this, "triggerValidation", void 0);
+    _defineProperty(this, "floatinglabel", void 0);
+    _defineProperty(this, "accessibilitylabel", undefined);
+    _defineProperty(this, "hint", undefined);
+    _defineProperty(this, "accessibilityrole", void 0);
+    _defineProperty(this, "accessibilitylabelledby", undefined);
+    _defineProperty(this, "iswheelpicker", true);
+    _defineProperty(this, "is24hour", true);
+    _defineProperty(this, "dateheadertitle", "Select Date");
+    _defineProperty(this, "dateconfirmationtitle", "Select");
+    _defineProperty(this, "datecanceltitle", "Cancel");
+    _defineProperty(this, "timeheadertitle", "Select Time");
+    _defineProperty(this, "timeconfirmationtitle", "Select");
+    _defineProperty(this, "timecanceltitle", "Cancel");
+  }
+}
+//# sourceMappingURL=datetime.props.js.map