@wavemaker/app-rn-runtime 11.8.5-next.27433 → 11.8.5-patch.1

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/datetime/datetime.props.js

@@ -0,0 +1,24 @@
+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, "locale", '');
+    _defineProperty(this, "accessibilitylabel", undefined);
+    _defineProperty(this, "hint", undefined);
+    _defineProperty(this, "accessibilitylabelledby", undefined);
+    _defineProperty(this, "iswheelpicker", true);
+    _defineProperty(this, "is24hour", true);
+  }
+}
+//# sourceMappingURL=datetime.props.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["BaseProps","WmDatetimeProps","constructor","args","_defineProperty","undefined"],"sources":["datetime.props.ts"],"sourcesContent":["import { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { AccessibilityRole } from 'react-native';\n\nexport default class WmDatetimeProps extends BaseProps {\n  mode = 'datetime';\n  datavalue?: string | Date | number = undefined as any;\n  datepattern?: string = '';\n  outputformat?: string = 'timestamp';\n  mindate?: string | Date = undefined as any;\n  maxdate?: string | Date = undefined as any;\n  placeholder? = 'Select date time';\n  readonly? = false;\n  onFieldChange?: any;\n  locale: string = '';\n  timestamp?: any;\n  triggerValidation?: any;\n  floatinglabel?: string;\n  accessibilitylabel?: string = undefined;\n  hint?: string = undefined;\n  accessibilityrole?: AccessibilityRole;\n  accessibilitylabelledby?: string = undefined;\n  iswheelpicker?: boolean = true;\n  is24hour?: boolean = true;\n}\n"],"mappings":";;;AAAA,SAASA,SAAS,QAAQ,+CAA+C;AAGzE,eAAe,MAAMC,eAAe,SAASD,SAAS,CAAC;EAAAE,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,eAC9C,UAAU;IAAAA,eAAA,oBACoBC,SAAS;IAAAD,eAAA,sBACvB,EAAE;IAAAA,eAAA,uBACD,WAAW;IAAAA,eAAA,kBACTC,SAAS;IAAAD,eAAA,kBACTC,SAAS;IAAAD,eAAA,sBACpB,kBAAkB;IAAAA,eAAA,mBACrB,KAAK;IAAAA,eAAA,iBAEA,EAAE;IAAAA,eAAA,6BAIWC,SAAS;IAAAD,eAAA,eACvBC,SAAS;IAAAD,eAAA,kCAEUC,SAAS;IAAAD,eAAA,wBAClB,IAAI;IAAAA,eAAA,mBACT,IAAI;EAAA;AAC3B","ignoreList":[]}

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

@@ -0,0 +1,15 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import WmDatetimeProps from '../datetime/datetime.props';
+export default class WmDateProps extends WmDatetimeProps {
+  constructor() {
+    super();
+    _defineProperty(this, "timepattern", '');
+    this.mode = 'time';
+    this.placeholder = 'Select time';
+    this.datepattern = this.timepattern;
+    this.outputformat = 'HH:mm:ss';
+  }
+}
+//# sourceMappingURL=time.props.js.map

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

@@ -0,0 +1,192 @@
+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, { Component } from 'react';
+import { PixelRatio, StyleSheet, View } from 'react-native';
+import WmWheelScrollPicker from './wheelpicker/wheelpicker.component';
+import { getDateObject, getDates, getMonthIndex, getMonths, getYearRange } from '@wavemaker/app-rn-runtime/core/utils';
+import moment from 'moment';
+export class WmWheelDatePickerProps {
+  constructor() {
+    _defineProperty(this, "selectedDate", new Date());
+    _defineProperty(this, "itemHeight", PixelRatio.roundToNearestPixel(50));
+    _defineProperty(this, "wrapperHeight", PixelRatio.roundToNearestPixel(150));
+  }
+}
+export const START_DATE = {
+  'date': 1,
+  'month': 0,
+  'year': 1950
+};
+export const END_DATE = {
+  'date': 31,
+  'month': 11,
+  'year': 2060
+};
+export class WmWheelDatePickerState {}
+export class WmWheelDatePicker extends Component {
+  constructor(_props) {
+    var _selectedDate$getFull;
+    super(_props);
+    _defineProperty(this, "selectedDateIndex", 0);
+    _defineProperty(this, "selectedMonthIndex", 0);
+    _defineProperty(this, "selectedYearIndex", 0);
+    _defineProperty(this, "dateData", []);
+    _defineProperty(this, "monthData", []);
+    _defineProperty(this, "yearData", []);
+    _defineProperty(this, "localSelectedDate", '');
+    _defineProperty(this, "monthValue", 0);
+    _defineProperty(this, "yearValue", '');
+    _defineProperty(this, "getMinValue", (minValue, type) => {
+      const currentMonth = moment(minValue).format('M');
+      const currentYear = moment(minValue).format('YYYY');
+      const selectedMonth = moment(this.localSelectedDate).format('M');
+      const selectedYear = moment(this.localSelectedDate).format('YYYY');
+      const isFutureMonth = Number(selectedMonth) > Number(currentMonth);
+      const isFutureYear = Number(selectedYear) > Number(currentYear);
+      if (!(minValue instanceof Date)) return START_DATE[type];
+      switch (type) {
+        case 'date':
+          const dateValue = isFutureYear ? 1 : isFutureMonth ? 1 : new Date(minValue).getDate();
+          // this.selectedDateIndex = dateIndex;
+          return dateValue;
+        case 'month':
+          const monthValue = isFutureYear ? 0 : new Date(minValue).getMonth();
+          // this.selectedMonthIndex = 11;
+          return monthValue;
+        case 'year':
+          return new Date(minValue).getFullYear();
+        default:
+          return 0;
+      }
+    });
+    _defineProperty(this, "getMaxValue", (maxValue, type) => {
+      if (!(maxValue instanceof Date)) return END_DATE[type];
+      switch (type) {
+        case 'date':
+          return new Date(maxValue).getDate();
+        case 'month':
+          return new Date(maxValue).getMonth();
+        case 'year':
+          return new Date(maxValue).getFullYear();
+        default:
+          return 0;
+      }
+    });
+    _defineProperty(this, "handleValueChange", (valueType, value, index) => {
+      var _this$props, _this$props$onDateCha;
+      switch (valueType) {
+        case 'date':
+          this.selectedDateIndex = index;
+          break;
+        case 'month':
+          this.monthValue = getMonthIndex(value === null || value === void 0 ? void 0 : value.toString());
+          this.selectedMonthIndex = index;
+          break;
+        case 'year':
+          this.yearValue = value;
+          this.selectedYearIndex = index;
+          break;
+        default:
+          break;
+      }
+      const {
+        props
+      } = this;
+      const minDate = props.minDate;
+      const maxDate = props.maxDate;
+      // * date range
+      const minDateNum = minDate ? this.getMinValue(minDate, 'date') : 1;
+      const maxDateNum = maxDate ? this.getMaxValue(maxDate, 'date') : 31;
+      const minYear = minDate ? this.getMinValue(minDate, 'year') : 1950;
+      const maxYear = maxDate ? this.getMaxValue(maxDate, 'year') : 2060;
+      const selectedDate = getDates(minDateNum, maxDateNum)[this.selectedDateIndex];
+      const selectedMonthIndex = this.monthValue;
+      const selectedYear = getYearRange(minYear, maxYear)[this.selectedYearIndex];
+      const dateObj = getDateObject(selectedDate, selectedMonthIndex, selectedYear);
+      this.localSelectedDate = dateObj;
+      (_this$props = this.props) === null || _this$props === void 0 || (_this$props$onDateCha = _this$props.onDateChange) === null || _this$props$onDateCha === void 0 || _this$props$onDateCha.call(_this$props, dateObj);
+    });
+    const _selectedDate = this.props.selectedDate || new Date();
+    this.itemHeight = PixelRatio.roundToNearestPixel(this.props.itemHeight || 50) || PixelRatio.roundToNearestPixel(50);
+    this.wrapperHeight = PixelRatio.roundToNearestPixel(this.props.wrapperHeight || 150) || PixelRatio.roundToNearestPixel(150);
+
+    // * Initial values
+    this.defaultSelectedDate = _selectedDate;
+    this.localSelectedDate = _selectedDate;
+    this.monthValue = _selectedDate.getMonth();
+    this.yearValue = (_selectedDate$getFull = _selectedDate.getFullYear()) === null || _selectedDate$getFull === void 0 ? void 0 : _selectedDate$getFull.toString();
+
+    // TODO: selected date handling for range of dates
+    if (!(this.props.minDate || this.props.maxDate)) {
+      this.selectedDateIndex = _selectedDate.getDate() - 1;
+      this.selectedMonthIndex = _selectedDate.getMonth();
+      this.selectedYearIndex = getYearRange().indexOf(_selectedDate.getFullYear());
+    }
+  }
+  // TODO: cache this func for performance improvement
+  getPickerData(type) {
+    const {
+      props
+    } = this;
+    const minDate = props.minDate;
+    const maxDate = props.maxDate;
+    const minDateNum = minDate ? this.getMinValue(minDate, 'date') : 1;
+    const maxDateNum = maxDate ? this.getMaxValue(maxDate, 'date') : 31;
+    const minMonth = minDate ? this.getMinValue(minDate, 'month') : 0;
+    const maxMonth = maxDate ? this.getMaxValue(maxDate, 'month') : 11;
+    const minYear = minDate ? this.getMinValue(minDate, 'year') : 1950;
+    const maxYear = maxDate ? this.getMaxValue(maxDate, 'year') : 2060;
+    switch (type) {
+      case "date":
+        const dateData = getDates(minDateNum, maxDateNum);
+        this.dateData = dateData;
+        return dateData;
+      case "month":
+        const monthData = getMonths(minMonth, maxMonth);
+        this.monthData = monthData;
+        return monthData;
+      case "year":
+        const yearData = getYearRange(minYear, maxYear);
+        this.yearData = yearData;
+        return yearData;
+      default:
+        return [];
+    }
+  }
+  render() {
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.root
+    }, /*#__PURE__*/React.createElement(WmWheelScrollPicker, {
+      data: this.getPickerData('date'),
+      wrapperHeight: this.wrapperHeight,
+      itemHeight: this.itemHeight,
+      selectedIndex: this.selectedDateIndex,
+      onValueChange: (value, index) => this.handleValueChange('date', value, index)
+    }), /*#__PURE__*/React.createElement(View, {
+      style: styles.middle
+    }, /*#__PURE__*/React.createElement(WmWheelScrollPicker, {
+      data: this.getPickerData('month'),
+      wrapperHeight: this.wrapperHeight,
+      itemHeight: this.itemHeight,
+      selectedIndex: this.selectedMonthIndex,
+      onValueChange: (value, index) => this.handleValueChange('month', value, index)
+    })), /*#__PURE__*/React.createElement(WmWheelScrollPicker, {
+      data: this.getPickerData('year'),
+      wrapperHeight: this.wrapperHeight,
+      itemHeight: this.itemHeight,
+      selectedIndex: this.selectedYearIndex,
+      onValueChange: (value, index) => this.handleValueChange('year', value, index)
+    }));
+  }
+}
+export default WmWheelDatePicker;
+const styles = StyleSheet.create({
+  root: {
+    flexDirection: 'row'
+  },
+  middle: {
+    marginHorizontal: 15
+  }
+});
+//# sourceMappingURL=wheel-date-picker.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Component","PixelRatio","StyleSheet","View","WmWheelScrollPicker","getDateObject","getDates","getMonthIndex","getMonths","getYearRange","moment","WmWheelDatePickerProps","constructor","_defineProperty","Date","roundToNearestPixel","START_DATE","END_DATE","WmWheelDatePickerState","WmWheelDatePicker","props","_selectedDate$getFull","minValue","type","currentMonth","format","currentYear","selectedMonth","localSelectedDate","selectedYear","isFutureMonth","Number","isFutureYear","dateValue","getDate","monthValue","getMonth","getFullYear","maxValue","valueType","value","index","_this$props","_this$props$onDateCha","selectedDateIndex","toString","selectedMonthIndex","yearValue","selectedYearIndex","minDate","maxDate","minDateNum","getMinValue","maxDateNum","getMaxValue","minYear","maxYear","selectedDate","dateObj","onDateChange","call","itemHeight","wrapperHeight","defaultSelectedDate","indexOf","getPickerData","minMonth","maxMonth","dateData","monthData","yearData","render","createElement","style","styles","root","data","selectedIndex","onValueChange","handleValueChange","middle","create","flexDirection","marginHorizontal"],"sources":["wheel-date-picker.component.tsx"],"sourcesContent":["import React, { Component } from 'react';\nimport { PixelRatio, StyleSheet, View } from 'react-native';\nimport WmWheelScrollPicker from './wheelpicker/wheelpicker.component'\nimport { getDateObject, getDates, getMonthIndex, getMonths, getYearRange } from '@wavemaker/app-rn-runtime/core/utils';\nimport moment from 'moment';\n\nexport class WmWheelDatePickerProps {\n  minDate?: Date | string;\n  maxDate?: Date | string;\n  selectedDate?: Date = new Date();\n  onDateChange?: (date: Date) => void;\n  itemHeight?: number = PixelRatio.roundToNearestPixel(50);\n  wrapperHeight?: number = PixelRatio.roundToNearestPixel(150);\n}\n\nexport const START_DATE = {\n  'date': 1,\n  'month': 0,\n  'year': 1950,\n};\n\nexport const END_DATE = {\n  'date': 31,\n  'month': 11,\n  'year': 2060,\n};\n\nexport class WmWheelDatePickerState {}\n\nexport class WmWheelDatePicker extends Component<\n  WmWheelDatePickerProps,\n  WmWheelDatePickerState,\n  any\n> {\n  itemHeight: number;\n  wrapperHeight: number;\n  selectedDateIndex: number = 0;\n  selectedMonthIndex: number = 0;\n  selectedYearIndex: number = 0;\n  dateData: number[] = [];\n  monthData: string[] = [];\n  yearData: number[] = [];\n  defaultSelectedDate: Date;\n  localSelectedDate: Date | string = '';\n  monthValue: number = 0;\n  yearValue: string = '';\n\n  constructor(props: WmWheelDatePickerProps) {\n    super(props);\n    const selectedDate = this.props.selectedDate || new Date();\n\n    this.itemHeight =\n    PixelRatio.roundToNearestPixel(this.props.itemHeight || 50) || PixelRatio.roundToNearestPixel(50);\n    this.wrapperHeight =\n    PixelRatio.roundToNearestPixel(this.props.wrapperHeight || 150) || PixelRatio.roundToNearestPixel(150);\n\n    // * Initial values\n    this.defaultSelectedDate = selectedDate;\n    this.localSelectedDate = selectedDate;\n    this.monthValue = selectedDate.getMonth();\n    this.yearValue = selectedDate.getFullYear()?.toString();\n\n    // TODO: selected date handling for range of dates\n    if (!(this.props.minDate || this.props.maxDate)) {\n      this.selectedDateIndex = selectedDate.getDate() - 1;\n      this.selectedMonthIndex = selectedDate.getMonth();\n      this.selectedYearIndex = getYearRange().indexOf(selectedDate.getFullYear());\n    }\n  }\n\n  getMinValue = (minValue: string | Date, type: 'date' | 'month' | 'year') => {\n    const currentMonth = moment(minValue).format('M');\n    const currentYear = moment(minValue).format('YYYY');\n    const selectedMonth = moment(this.localSelectedDate).format('M');\n    const selectedYear = moment(this.localSelectedDate).format('YYYY');\n    const isFutureMonth = Number(selectedMonth) > Number(currentMonth);\n    const isFutureYear = Number(selectedYear) > Number(currentYear);\n\n    if (!(minValue instanceof Date)) return START_DATE[type];\n\n    switch(type) {\n      case 'date':\n        const dateValue =\n          isFutureYear\n            ? 1\n            : isFutureMonth\n              ? 1\n              : new Date(minValue).getDate();\n        // this.selectedDateIndex = dateIndex;\n        return dateValue;\n      case 'month':\n        const monthValue = isFutureYear ? 0 : new Date(minValue).getMonth();\n        // this.selectedMonthIndex = 11;\n        return monthValue;\n      case 'year':\n        return new Date(minValue).getFullYear();\n      default:\n        return 0;\n    }\n  }\n\n  getMaxValue = (maxValue: string | Date | undefined, type: 'date' | 'month' | 'year') => {\n    if (!(maxValue instanceof Date)) return END_DATE[type];\n\n    switch(type) {\n      case 'date':\n        return new Date(maxValue).getDate();\n      case 'month':\n        return new Date(maxValue).getMonth();\n      case 'year':\n        return new Date(maxValue).getFullYear();\n      default:\n        return 0;\n    }\n  }\n\n  handleValueChange = (\n    valueType: 'date' | 'month' | 'year',\n    value: string | number,\n    index: number,\n  ) => {\n    switch (valueType) {\n      case 'date':\n        this.selectedDateIndex = index;\n        break;\n      case 'month':\n        this.monthValue = getMonthIndex(value?.toString());\n        this.selectedMonthIndex = index;\n        break;\n      case 'year':\n        this.yearValue = value as string;\n        this.selectedYearIndex = index;\n        break;\n      default:\n        break;\n    }\n\n    const {props} = this;\n    const minDate = props.minDate;\n    const maxDate = props.maxDate;\n    // * date range\n    const minDateNum = minDate ? this.getMinValue(minDate, 'date') : 1;\n    const maxDateNum = maxDate ? this.getMaxValue(maxDate, 'date') : 31;\n    const minYear = minDate ? this.getMinValue(minDate, 'year') : 1950;\n    const maxYear = maxDate ? this.getMaxValue(maxDate, 'year') : 2060;\n\n    const selectedDate = getDates(minDateNum, maxDateNum)[this.selectedDateIndex];\n    const selectedMonthIndex = this.monthValue;\n    const selectedYear = getYearRange(minYear, maxYear)[this.selectedYearIndex];\n\n    const dateObj = getDateObject(\n      selectedDate,\n      selectedMonthIndex,\n      selectedYear,\n    );\n    this.localSelectedDate = dateObj;\n\n    this.props?.onDateChange?.(dateObj);\n  };\n\n  // TODO: cache this func for performance improvement\n  getPickerData(type: 'date' | 'month' | 'year') {\n    const {props} = this;\n    const minDate = props.minDate;\n    const maxDate = props.maxDate;\n    const minDateNum = minDate ? this.getMinValue(minDate, 'date') : 1;\n    const maxDateNum = maxDate ? this.getMaxValue(maxDate, 'date') : 31;\n    const minMonth = minDate ? this.getMinValue(minDate, 'month') : 0;\n    const maxMonth = maxDate ? this.getMaxValue(maxDate, 'month') : 11;\n    const minYear = minDate ? this.getMinValue(minDate, 'year') : 1950;\n    const maxYear = maxDate ? this.getMaxValue(maxDate, 'year') : 2060;\n\n    switch (type) {\n      case \"date\":\n        const dateData = getDates(minDateNum, maxDateNum);\n        this.dateData = dateData;\n        return dateData;\n      case \"month\":\n        const monthData = getMonths(minMonth, maxMonth);\n        this.monthData = monthData;\n        return monthData;\n      case \"year\":\n        const yearData = getYearRange(minYear, maxYear);\n        this.yearData = yearData;\n        return yearData;\n      default:\n        return [];\n    }\n  }\n\n  render() {\n    return (\n      <View style={styles.root}>\n        <WmWheelScrollPicker\n          data={this.getPickerData('date')}\n          wrapperHeight={this.wrapperHeight}\n          itemHeight={this.itemHeight}\n          selectedIndex={this.selectedDateIndex}\n          onValueChange={(value: string | number, index: number) =>\n            this.handleValueChange('date', value, index)\n          }\n        />\n        <View style={styles.middle}>\n          <WmWheelScrollPicker\n            data={this.getPickerData('month')}\n            wrapperHeight={this.wrapperHeight}\n            itemHeight={this.itemHeight}\n            selectedIndex={this.selectedMonthIndex}\n            onValueChange={(value: string | number, index: number) =>\n              this.handleValueChange('month', value, index)\n            }\n          />\n        </View>\n        <WmWheelScrollPicker\n          data={this.getPickerData('year')}\n          wrapperHeight={this.wrapperHeight}\n          itemHeight={this.itemHeight}\n          selectedIndex={this.selectedYearIndex}\n          onValueChange={(value: string | number, index: number) =>\n            this.handleValueChange('year', value, index)\n          }\n        />\n      </View>\n    );\n  }\n}\n\nexport default WmWheelDatePicker;\n\nconst styles = StyleSheet.create({\n  root: {\n    flexDirection: 'row',\n  },\n  middle: {\n    marginHorizontal: 15,\n  },\n});\n"],"mappings":"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","ignoreList":[]}

package/components/input/epoch/wheel-time-picker.component.js

@@ -0,0 +1,104 @@
+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, { Component } from 'react';
+import { PixelRatio, StyleSheet, View } from 'react-native';
+import WmWheelScrollPicker from './wheelpicker/wheelpicker.component';
+import { get24Hours, getDateTimeObject, getHours, getMinutes, getTimeIndicators } from '@wavemaker/app-rn-runtime/core/utils';
+export class WmWheelTimePickerProps {
+  constructor() {
+    _defineProperty(this, "selectedTime", new Date());
+    _defineProperty(this, "is24Hour", true);
+    _defineProperty(this, "itemHeight", PixelRatio.roundToNearestPixel(50));
+    _defineProperty(this, "wrapperHeight", PixelRatio.roundToNearestPixel(150));
+  }
+}
+export class WmWheelTimePickerState {}
+export class WmWheelTimePicker extends Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "selectedHourIndex", 0);
+    _defineProperty(this, "selectedMinuteIndex", 0);
+    _defineProperty(this, "selectedTimeIndicatorIndex", 0);
+    _defineProperty(this, "handleValueChange", (valueType, value, index) => {
+      var _this$props, _this$props$onTimeCha;
+      switch (valueType) {
+        case 'hour':
+          this.selectedHourIndex = index;
+          break;
+        case 'minute':
+          this.selectedMinuteIndex = index;
+          break;
+        case 'meridiem':
+          this.selectedTimeIndicatorIndex = index;
+          break;
+        default:
+          break;
+      }
+      const selectedTime = this.props.selectedTime || new Date();
+      const date = selectedTime.getDate();
+      const month = selectedTime.getMonth();
+      const year = selectedTime.getFullYear();
+      let selected24HourFormat;
+      if (!this.props.is24Hour) {
+        // * when time picker is in 12 hour format
+        const selected12HourFormat = Number(getHours()[this.selectedHourIndex]);
+        selected24HourFormat = this.selectedTimeIndicatorIndex === 0 ? selected12HourFormat : selected12HourFormat + 12;
+      } else {
+        // * when time picker is in 24 hour format
+        selected24HourFormat = Number(get24Hours()[this.selectedHourIndex]);
+      }
+      const selectedMinute = Number(getMinutes()[this.selectedMinuteIndex]);
+      const dateObj = getDateTimeObject(date, month, year, selected24HourFormat, selectedMinute);
+      (_this$props = this.props) === null || _this$props === void 0 || (_this$props$onTimeCha = _this$props.onTimeChange) === null || _this$props$onTimeCha === void 0 || _this$props$onTimeCha.call(_this$props, dateObj);
+    });
+    const _selectedTime = props.selectedTime || new Date();
+    const meridiem = _selectedTime.getHours() >= 12 ? 'PM' : 'AM';
+    this.itemHeight = PixelRatio.roundToNearestPixel(this.props.itemHeight || 50) || PixelRatio.roundToNearestPixel(50);
+    this.wrapperHeight = PixelRatio.roundToNearestPixel(this.props.wrapperHeight || 150) || PixelRatio.roundToNearestPixel(150);
+    this.selectedHourIndex = props.is24Hour ? _selectedTime.getHours() : (_selectedTime.getHours() % 12 || 12) - 1;
+    this.selectedMinuteIndex = _selectedTime.getMinutes();
+    this.selectedTimeIndicatorIndex = meridiem === 'AM' ? 0 : 1;
+  }
+  render() {
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.root
+    }, /*#__PURE__*/React.createElement(WmWheelScrollPicker, {
+      data: this.props.is24Hour ? get24Hours() : getHours(),
+      wrapperHeight: this.wrapperHeight,
+      itemHeight: this.itemHeight,
+      selectedIndex: this.selectedHourIndex,
+      onValueChange: (value, index) => {
+        this.handleValueChange('hour', value, index);
+      }
+    }), /*#__PURE__*/React.createElement(View, {
+      style: styles.middle
+    }, /*#__PURE__*/React.createElement(WmWheelScrollPicker, {
+      data: getMinutes(),
+      wrapperHeight: this.wrapperHeight,
+      itemHeight: this.itemHeight,
+      selectedIndex: this.selectedMinuteIndex,
+      onValueChange: (value, index) => {
+        this.handleValueChange('minute', value, index);
+      }
+    })), !this.props.is24Hour ? /*#__PURE__*/React.createElement(WmWheelScrollPicker, {
+      data: getTimeIndicators(),
+      wrapperHeight: this.wrapperHeight,
+      itemHeight: this.itemHeight,
+      selectedIndex: this.selectedTimeIndicatorIndex,
+      onValueChange: (value, index) => {
+        this.handleValueChange('meridiem', value, index);
+      }
+    }) : /*#__PURE__*/React.createElement(React.Fragment, null));
+  }
+}
+export default WmWheelTimePicker;
+const styles = StyleSheet.create({
+  root: {
+    flexDirection: 'row'
+  },
+  middle: {
+    marginHorizontal: 15
+  }
+});
+//# sourceMappingURL=wheel-time-picker.component.js.map

package/components/input/epoch/wheel-time-picker.component.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Component","PixelRatio","StyleSheet","View","WmWheelScrollPicker","get24Hours","getDateTimeObject","getHours","getMinutes","getTimeIndicators","WmWheelTimePickerProps","constructor","_defineProperty","Date","roundToNearestPixel","WmWheelTimePickerState","WmWheelTimePicker","props","valueType","value","index","_this$props","_this$props$onTimeCha","selectedHourIndex","selectedMinuteIndex","selectedTimeIndicatorIndex","selectedTime","date","getDate","month","getMonth","year","getFullYear","selected24HourFormat","is24Hour","selected12HourFormat","Number","selectedMinute","dateObj","onTimeChange","call","meridiem","itemHeight","wrapperHeight","render","createElement","style","styles","root","data","selectedIndex","onValueChange","handleValueChange","middle","Fragment","create","flexDirection","marginHorizontal"],"sources":["wheel-time-picker.component.tsx"],"sourcesContent":["import React, { Component } from 'react';\nimport { PixelRatio, StyleSheet, View } from 'react-native';\nimport WmWheelScrollPicker from './wheelpicker/wheelpicker.component';\nimport {\n  get24Hours,\n  getDateTimeObject,\n  getHours,\n  getMinutes,\n  getTimeIndicators,\n} from '@wavemaker/app-rn-runtime/core/utils';\n\nexport class WmWheelTimePickerProps {\n  selectedTime?: Date = new Date();\n  is24Hour?: boolean = true;\n  onTimeChange?: (date: Date) => void;\n  itemHeight?: number = PixelRatio.roundToNearestPixel(50);\n  wrapperHeight?: number = PixelRatio.roundToNearestPixel(150);\n}\n\nexport class WmWheelTimePickerState {}\n\nexport class WmWheelTimePicker extends Component<\n  WmWheelTimePickerProps,\n  WmWheelTimePickerState,\n  any\n> {\n  itemHeight: number;\n  wrapperHeight: number;\n  selectedHourIndex: number = 0;\n  selectedMinuteIndex: number = 0;\n  selectedTimeIndicatorIndex: number = 0;\n\n  constructor(props: WmWheelTimePickerProps) {\n    super(props);\n    const selectedTime = props.selectedTime || new Date();\n    const meridiem = selectedTime.getHours() >= 12 ? 'PM' : 'AM';\n\n    this.itemHeight =\n      PixelRatio.roundToNearestPixel(this.props.itemHeight || 50) ||\n      PixelRatio.roundToNearestPixel(50);\n    this.wrapperHeight =\n      PixelRatio.roundToNearestPixel(this.props.wrapperHeight || 150) ||\n      PixelRatio.roundToNearestPixel(150);\n    this.selectedHourIndex = props.is24Hour\n      ? selectedTime.getHours()\n      : (selectedTime.getHours() % 12 || 12) - 1;\n    this.selectedMinuteIndex = selectedTime.getMinutes();\n    this.selectedTimeIndicatorIndex = meridiem === 'AM' ? 0 : 1;\n  }\n\n  handleValueChange = (\n    valueType: 'hour' | 'minute' | 'meridiem',\n    value: string | number,\n    index: number\n  ) => {\n    switch (valueType) {\n      case 'hour':\n        this.selectedHourIndex = index;\n        break;\n      case 'minute':\n        this.selectedMinuteIndex = index;\n        break;\n      case 'meridiem':\n        this.selectedTimeIndicatorIndex = index;\n        break;\n      default:\n        break;\n    }\n\n    const selectedTime = this.props.selectedTime || new Date();\n    const date = selectedTime.getDate();\n    const month = selectedTime.getMonth();\n    const year = selectedTime.getFullYear();\n\n    let selected24HourFormat;\n    if (!this.props.is24Hour) {\n      // * when time picker is in 12 hour format\n      const selected12HourFormat = Number(getHours()[this.selectedHourIndex]);\n      selected24HourFormat =\n        this.selectedTimeIndicatorIndex === 0\n          ? selected12HourFormat\n          : selected12HourFormat + 12;\n    } else {\n      // * when time picker is in 24 hour format\n      selected24HourFormat = Number(get24Hours()[this.selectedHourIndex]);\n    }\n\n    const selectedMinute = Number(getMinutes()[this.selectedMinuteIndex]);\n\n    const dateObj = getDateTimeObject(\n      date,\n      month,\n      year,\n      selected24HourFormat,\n      selectedMinute\n    );\n\n    this.props?.onTimeChange?.(dateObj);\n  };\n\n  render() {\n    return (\n      <View style={styles.root}>\n        <WmWheelScrollPicker\n          data={this.props.is24Hour ? get24Hours() : getHours()}\n          wrapperHeight={this.wrapperHeight}\n          itemHeight={this.itemHeight}\n          selectedIndex={this.selectedHourIndex}\n          onValueChange={(value: string | number, index: number) => {\n            this.handleValueChange('hour', value, index);\n          }}\n        />\n        <View style={styles.middle}>\n          <WmWheelScrollPicker\n            data={getMinutes()}\n            wrapperHeight={this.wrapperHeight}\n            itemHeight={this.itemHeight}\n            selectedIndex={this.selectedMinuteIndex}\n            onValueChange={(value: string | number, index: number) => {\n              this.handleValueChange('minute', value, index);\n            }}\n          />\n        </View>\n        {!this.props.is24Hour ? (\n          <WmWheelScrollPicker\n            data={getTimeIndicators()}\n            wrapperHeight={this.wrapperHeight}\n            itemHeight={this.itemHeight}\n            selectedIndex={this.selectedTimeIndicatorIndex}\n            onValueChange={(value: string | number, index: number) => {\n              this.handleValueChange('meridiem', value, index);\n            }}\n          />\n        ) : (\n          <></>\n        )}\n      </View>\n    );\n  }\n}\n\nexport default WmWheelTimePicker;\n\nconst styles = StyleSheet.create({\n  root: {\n    flexDirection: 'row',\n  },\n  middle: {\n    marginHorizontal: 15,\n  },\n});\n"],"mappings":"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","ignoreList":[]}

package/components/input/epoch/wheelpicker/wheelpicker.component.js

@@ -0,0 +1,91 @@
+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, { createRef } from 'react';
+import { Text, View } from 'react-native';
+import { ScrollView } from 'react-native-gesture-handler';
+import { DEFAULT_CLASS } from './wheelpicker.styles';
+import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
+export class WmWheelPickerState extends BaseComponentState {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "selectedIndex", 0);
+  }
+}
+export class WmWheelScrollPicker extends BaseComponent {
+  constructor(_props) {
+    super(_props, DEFAULT_CLASS);
+    _defineProperty(this, "wheelPickerRef", null);
+    _defineProperty(this, "handleWheelScroll", event => {
+      // console.log('scroll =>', event.nativeEvent.contentOffset);
+      const selectedIdx = Math.round(event.nativeEvent.contentOffset.y / this.props.itemHeight);
+      this.setState({
+        selectedIndex: selectedIdx
+      });
+    });
+    _defineProperty(this, "handleWheelMomentumEnd", () => {
+      var _this$props$onValueCh, _this$props;
+      const props = this.props;
+      const state = this.state;
+      const selectedData = props.data[state.selectedIndex];
+      (_this$props$onValueCh = (_this$props = this.props).onValueChange) === null || _this$props$onValueCh === void 0 || _this$props$onValueCh.call(_this$props, selectedData, state.selectedIndex);
+    });
+    this.wheelPickerRef = /*#__PURE__*/createRef();
+  }
+  initialScrollTo() {
+    var _this$wheelPickerRef, _this$wheelPickerRef$;
+    const props = this.props;
+    const y = props.itemHeight * props.selectedIndex;
+    (_this$wheelPickerRef = this.wheelPickerRef) === null || _this$wheelPickerRef === void 0 || (_this$wheelPickerRef = _this$wheelPickerRef.current) === null || _this$wheelPickerRef === void 0 || (_this$wheelPickerRef$ = _this$wheelPickerRef.scrollTo) === null || _this$wheelPickerRef$ === void 0 || _this$wheelPickerRef$.call(_this$wheelPickerRef, {
+      y: y,
+      animated: false
+    });
+    this.setState({
+      selectedIndex: props.selectedIndex || 0
+    });
+  }
+  renderWidget(props) {
+    const state = this.state;
+    const styles = this.styles;
+    const {
+      data,
+      wrapperHeight,
+      itemHeight
+    } = props;
+    const scrollOffset = (wrapperHeight - itemHeight) / 2;
+    return /*#__PURE__*/React.createElement(View, {
+      style: [styles.root, {
+        height: wrapperHeight
+      }]
+    }, /*#__PURE__*/React.createElement(ScrollView, {
+      ref: this.wheelPickerRef,
+      scrollEventThrottle: 16,
+      contentContainerStyle: {
+        paddingVertical: scrollOffset
+      },
+      showsVerticalScrollIndicator: false,
+      onLayout: () => this.initialScrollTo(),
+      onScroll: this.handleWheelScroll,
+      onMomentumScrollEnd: this.handleWheelMomentumEnd,
+      decelerationRate: "fast",
+      snapToInterval: itemHeight // your snap points
+    }, data.map((item, index) => {
+      const isSelected = index === state.selectedIndex;
+      return /*#__PURE__*/React.createElement(View, {
+        key: `data_item_${index}`,
+        style: [styles.center, styles.itemBg, {
+          height: itemHeight
+        }]
+      }, /*#__PURE__*/React.createElement(Text, {
+        style: isSelected ? [styles.selectedItemText] : [styles.itemText]
+      }, item));
+    })), /*#__PURE__*/React.createElement(View, {
+      style: [styles.selectedItemBg, {
+        height: itemHeight,
+        top: scrollOffset
+      }]
+    }));
+  }
+}
+export default WmWheelScrollPicker;
+//# sourceMappingURL=wheelpicker.component.js.map

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

@@ -0,0 +1,16 @@
+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";
+import { PixelRatio } from "react-native";
+export const defaultItemHeight = PixelRatio.roundToNearestPixel(50);
+export default class WmWheelPickerProps extends BaseProps {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "data", []);
+    _defineProperty(this, "wrapperHeight", PixelRatio.roundToNearestPixel(150));
+    _defineProperty(this, "itemHeight", defaultItemHeight);
+    _defineProperty(this, "selectedIndex", 0);
+  }
+}
+//# sourceMappingURL=wheelpicker.props.js.map