@wavemaker/app-rn-runtime 12.0.0-next.46502 → 12.0.0-next.47810

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":";;;AAAA,OAAOA,KAAK,MAAqB,OAAO;AACxC,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,sBAAsB,EAAEC,eAAe,QAAQ,0BAA0B;AAGlF,SAASC,aAAa,QAAoC,8CAA8C;AACxG,OAAOC,cAAc,MAAM,kDAAkD;AAE7E,OAAO,MAAMC,eAAe,CAAC;EAAAC,YAAA;IAAAC,eAAA,eACsB,UAAU;IAAAA,eAAA,gBAC1C,IAAIC,IAAI,CAAC,CAAC;IAAAD,eAAA,sBACJ,IAAI;IAAAA,eAAA,sBACJ,IAAI;IAAAA,eAAA,uBACC,IAAI;IAAAA,eAAA,oBACP,IAAI;IAAAA,eAAA,iBACV,EAAE;EAAA;AACvB;AAEA,OAAO,MAAME,eAAe,CAAC;EAAAH,YAAA;IAAAC,eAAA,gBACH,IAAI;IAAAA,eAAA,uBACU,CAAC,CAAC;IAAAA,eAAA,yBACd,KAAK;IAAAA,eAAA,yBACL,KAAK;EAAA;AACjC;AAOA,MAAMG,MAAwB,GAAG;EAC7BC,IAAI,EAAE,CAAC,CAAC;EACRC,IAAI,EAAE,CAAC,CAAC;EACRC,KAAK,EAAE,CAAC,CAAC;EACTC,OAAO,EAAE;IACLC,eAAe,EAAEX,cAAc,CAACY,QAAQ,CAACC;EAC7C;AACJ,CAAC;AAED,eAAe,MAAMC,oBAAoB,SAASnB,KAAK,CAACoB,SAAS,CAAwC;EAErGb,WAAWA,CAACc,KAAsB,EAAE;IAChC,KAAK,CAACA,KAAK,CAAC;IAACb,eAAA,oBAFL,IAAI;IAGZ,IAAI,CAACc,KAAK,GAAG;MACTC,cAAc,EAAE,IAAI,CAACF,KAAK,CAACG,IAAI,KAAK,MAAM;MAC1CC,cAAc,EAAE,IAAI,CAACJ,KAAK,CAACG,IAAI,KAAK,MAAM;MAC1CE,KAAK,EAAEL,KAAK,CAACK,KAAK;MAClBC,YAAY,EAAE,CAAC;IACnB,CAAoB;EACxB;EAEAC,mBAAmBA,CAACb,OAAkB,EAAE;IACpC,MAAMc,CAAC,GAAG,IAAI,CAACP,KAAK,CAACK,YAAY;IACjCE,CAAC,CAACd,OAAO,GAAGA,OAAO;IACnBc,CAAC,CAACC,UAAU,GAAGnB,MAAM,CAACG,KAAK;IAC3Be,CAAC,CAACE,QAAQ,GAAG,IAAI;IACjB,OAAOF,CAAC;EACZ;EAEOG,YAAYA,CAACC,IAAsB,EAAEC,YAA0B,EAAE;IACpE,MAAMC,GAAG,GAAG,IAAI,CAACb,KAAK,CAACI,KAAK;IAC5B,IAAIS,GAAG,IAAIF,IAAI,EAAE;MACbA,IAAI,CAACG,QAAQ,CAACD,GAAG,CAACE,QAAQ,CAAC,CAAC,CAAC;MAC7BJ,IAAI,CAACK,UAAU,CAACH,GAAG,CAACI,UAAU,CAAC,CAAC,CAAC;IACrC;IACA,IAAI,IAAI,CAAClB,KAAK,CAACG,IAAI,KAAK,MAAM,EAAE;MAC5B,IAAI,CAACgB,QAAQ,CAAC;QACVd,KAAK,EAAGO,IAAI;QACZV,cAAc,EAAE,KAAK;QACrBE,cAAc,EAAE;MACpB,CAAC,EAAE,MAAM;QACL,IAAI,CAACJ,KAAK,CAACW,YAAY,IAAI,IAAI,CAACX,KAAK,CAACW,YAAY,CAAC,IAAI,CAACV,KAAK,CAACI,KAAK,CAAC;QACpE,IAAI,CAACe,KAAK,CAACP,YAAY,CAAC;MAC5B,CAAC,CAAC;IACN,CAAC,MAAM,IAAID,IAAI,EAAE;MACb,IAAI,CAACO,QAAQ,CAAC;QACVd,KAAK,EAAGO,IAAI;QACZV,cAAc,EAAE,KAAK;QACrBE,cAAc,EAAE;MACpB,CAAC,EAAE,MAAM;QACLS,YAAY,CAACQ,OAAO,CAAC,CAAC;MAC1B,CAAC,CAAC;IACN;EACJ;EAEOC,YAAYA,CAACC,KAAa,EAAEC,OAAe,EAAEX,YAA0B,EAAE;IAC5E,MAAMD,IAAI,GAAG,IAAI,CAACX,KAAK,CAACI,KAAK,IAAI,IAAIjB,IAAI,CAAC,CAAC;IAC3CwB,IAAI,CAACG,QAAQ,CAACQ,KAAK,CAAC;IACpBX,IAAI,CAACK,UAAU,CAACO,OAAO,CAAC;IACxB,IAAI,CAACL,QAAQ,CAAC;MACVd,KAAK,EAAGO,IAAI;MACZV,cAAc,EAAE,KAAK;MACrBE,cAAc,EAAE;IACpB,CAAC,EAAE,MAAM;MACL,IAAI,CAACJ,KAAK,CAACW,YAAY,IAAI,IAAI,CAACX,KAAK,CAACW,YAAY,CAAC,IAAI,CAACV,KAAK,CAACI,KAAK,CAAC;MACpE,IAAI,CAACoB,SAAS,GAAG,IAAI;MACrB,IAAI,CAACL,KAAK,CAACP,YAAY,CAAC;IAC5B,CAAC,CAAC;EACN;EAEAa,gBAAgBA,CAACb,YAA0B,EAAE;IACzC,IAAI,CAAC,IAAI,CAACY,SAAS,EAAE;MAAA,IAAAE,iBAAA,EAAAC,kBAAA;MACjB,IAAI,CAACH,SAAS,gBACd9C,KAAA,CAAAkD,aAAA,CAACjD,IAAI;QAACkD,KAAK,EAAE;UAACC,MAAM,EAAE,GAAG;UAAEC,SAAS,EAAE;QAAG;MAAE,gBAEnCrD,KAAK,CAACkD,aAAa,CAAC/C,eAAe,EAAE;QACjCyC,KAAK,EAAG,EAAAI,iBAAA,OAAI,CAAC3B,KAAK,CAACK,KAAK,cAAAsB,iBAAA,uBAAhBA,iBAAA,CAAkBX,QAAQ,CAAC,CAAC,KAAI,CAAC;QACzCQ,OAAO,EAAG,EAAAI,kBAAA,OAAI,CAAC5B,KAAK,CAACK,KAAK,cAAAuB,kBAAA,uBAAhBA,kBAAA,CAAkBV,UAAU,CAAC,CAAC,KAAI,CAAC;QAC7Ce,OAAO,EAAG,IAAI;QACdC,SAAS,EAAGA,CAAA,KAAM,IAAI,CAACd,KAAK,CAACP,YAAY,CAAC;QAC1CsB,SAAS,EAAGC,MAAM,IAAK;UACnB,IAAI,CAACd,YAAY,CAACc,MAAM,CAACb,KAAK,EAAEa,MAAM,CAACZ,OAAO,EAAEX,YAAY,CAAC;QACjE;MACJ,CAAC,CAEH,CAAE;IACZ;IACA,OAAO,IAAI,CAACY,SAAS;EACzB;EAEAL,KAAKA,CAACP,YAA0B,EAAE;IAC9BA,YAAY,CAACwB,SAAS,CAAC,IAAI,CAACpC,KAAK,CAACK,YAAY,CAAC;IAC/C,IAAI,CAACN,KAAK,CAACkC,SAAS,IAAI,IAAI,CAAClC,KAAK,CAACkC,SAAS,CAAC,CAAC;EAClD;EAEAI,MAAMA,CAAA,EAAG;IACL,OAAQ,IAAI,CAACrC,KAAK,CAACC,cAAc,IAAI,IAAI,CAACD,KAAK,CAACG,cAAc,gBAC9DzB,KAAA,CAAAkD,aAAA,CAAC9C,aAAa,QACR8B,YAA0B,IAAK;MAC7BA,YAAY,CAAC0B,SAAS,CAAC,IAAI,CAAChC,mBAAmB,cAC1C5B,KAAA,CAAAkD,aAAA,CAACjD,IAAI;QAACkD,KAAK,EAAE,IAAI,CAAC7B,KAAK,CAACC,cAAc,GAAGZ,MAAM,CAACI,OAAO,GAAE,CAAC;MAAE,GACxD,IAAI,CAACO,KAAK,CAACC,cAAc,iBACtBvB,KAAK,CAACkD,aAAa,CAAChD,sBAAsB,EAAE;QACxCsB,IAAI,EAAE,QAAQ;QACdS,IAAI,EAAE,IAAI,CAACZ,KAAK,CAACK,KAAK;QACtB6B,SAAS,EAAEA,CAAA,KAAM,IAAI,CAACd,KAAK,CAACP,YAAY,CAAC;QACzCsB,SAAS,EAAGC,MAAM,IAAK,IAAI,CAACzB,YAAY,CAACyB,MAAM,CAACxB,IAAI,EAAEC,YAAY,CAAC;QACnE2B,UAAU,EAAE;UACRC,SAAS,EAAE,IAAI,CAACzC,KAAK,CAAC0C,WAAW;UACjCC,OAAO,EAAE,IAAI,CAAC3C,KAAK,CAAC4C;QACxB,CAAC;QACDC,MAAM,EAAE,IAAI,CAAC7C,KAAK,CAAC6C;MAAM,CAAC,CAAC,EAClC,IAAI,CAAC5C,KAAK,CAACG,cAAc,IAAI,IAAI,CAACsB,gBAAgB,CAACb,YAAY,CAC9D,CACV,CAAC,CAAC;MACF,OAAO,IAAI;IACf,CACW,CAAC,GAAG,IAAI;EAC3B;AACJ","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

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

@@ -0,0 +1,163 @@
+import BASE_THEME from '@wavemaker/app-rn-runtime/styles/theme';
+import { defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';
+import { Platform } from 'react-native';
+export const DEFAULT_CLASS = 'app-datetime';
+BASE_THEME.registerStyle((themeVariables, addStyle) => {
+  const defaultStyles = defineStyles({
+    root: {
+      paddingTop: 8,
+      paddingBottom: 8,
+      paddingLeft: 16,
+      paddingRight: 16,
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderRadius: 6,
+      backgroundColor: themeVariables.inputBackgroundColor,
+      borderColor: themeVariables.inputBorderColor,
+      justifyContent: 'center',
+      width: '100%'
+    },
+    focused: {},
+    invalid: {
+      borderBottomColor: themeVariables.inputInvalidBorderColor
+    },
+    placeholderText: {
+      color: themeVariables.inputPlaceholderColor
+    },
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    text: {
+      fontSize: 16,
+      color: themeVariables.inputTextColor
+    },
+    calendarIcon: {
+      root: {
+        alignSelf: 'center'
+      },
+      icon: {
+        fontSize: 24
+      }
+    },
+    clearIcon: {
+      root: {
+        alignSelf: 'center',
+        justifyContent: 'center',
+        marginRight: 4,
+        height: 24,
+        width: 24,
+        borderRadius: 16,
+        backgroundColor: themeVariables.inputDisabledBgColor
+      },
+      icon: {
+        fontSize: 16,
+        paddingRight: 0,
+        fontWeight: 'bold'
+      }
+    },
+    dialog: {
+      minWidth: 320,
+      paddingTop: 24,
+      paddingBottom: 24,
+      paddingLeft: 24,
+      paddingRight: 24,
+      elevation: 6,
+      width: '90%',
+      maxHeight: themeVariables.maxModalHeight,
+      backgroundColor: themeVariables.dialogBackgroundColor,
+      borderRadius: 28
+    },
+    actionWrapper: {
+      flexDirection: 'row-reverse',
+      marginRight: 20
+    },
+    selectBtn: {
+      root: {
+        paddingLeft: 12,
+        paddingRight: 12
+      }
+    },
+    cancelBtn: {
+      root: {
+        paddingLeft: 12,
+        paddingRight: 12
+      }
+    },
+    skeleton: {
+      root: {
+        height: 16,
+        borderRadius: 4,
+        marginRight: 16,
+        width: '80%'
+      },
+      icon: {
+        width: 32,
+        height: 32,
+        borderRadius: 4
+      }
+    }
+  });
+  addStyle(DEFAULT_CLASS, '', defaultStyles);
+
+  // Add horizontal form input styles for horizontal form field layouts - positioned early to avoid overriding more specific styles
+  addStyle('form-datetime-input-horizontal', '', {
+    root: {
+      flex: 1,
+      minWidth: 0,
+      // Allow shrinking below intrinsic content size if needed
+      maxWidth: '100%'
+    },
+    text: {}
+  });
+
+  // Timestamp widgets use the datetime component but have their own widget type
+  addStyle('form-timestamp-input-horizontal', '', {
+    root: {
+      width: '100%'
+    },
+    rootWrapper: {
+      width: '70%'
+    },
+    text: {}
+  });
+  addStyle('form-datetime-input-horizontal', '', {
+    root: {
+      width: '100%'
+    },
+    rootWrapper: {
+      width: '70%'
+    },
+    text: {}
+  });
+  addStyle(DEFAULT_CLASS + '-disabled', '', {
+    root: {
+      backgroundColor: themeVariables.inputDisabledBgColor
+    }
+  });
+  addStyle(DEFAULT_CLASS + '-rtl', '', Platform.OS == "web" ? {
+    clearIcon: {
+      root: {
+        marginLeft: 4,
+        marginRight: 0
+      }
+    }
+  } : {});
+  addStyle(DEFAULT_CLASS + '-with-label', '', {
+    root: {
+      minHeight: 48,
+      paddingVertical: 16
+    },
+    floatingLabel: {
+      position: 'absolute',
+      top: 12,
+      left: 16,
+      fontSize: 14,
+      color: themeVariables.floatingLabelColor
+    },
+    activeFloatingLabel: {
+      color: themeVariables.activeFloatingLabelColor
+    }
+  });
+});
+//# sourceMappingURL=datetime.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["BASE_THEME","defineStyles","Platform","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","paddingTop","paddingBottom","paddingLeft","paddingRight","borderWidth","borderStyle","borderRadius","backgroundColor","inputBackgroundColor","borderColor","inputBorderColor","justifyContent","width","focused","invalid","borderBottomColor","inputInvalidBorderColor","placeholderText","color","inputPlaceholderColor","container","flexDirection","alignItems","text","fontSize","inputTextColor","calendarIcon","alignSelf","icon","clearIcon","marginRight","height","inputDisabledBgColor","fontWeight","dialog","minWidth","elevation","maxHeight","maxModalHeight","dialogBackgroundColor","actionWrapper","selectBtn","cancelBtn","skeleton","flex","maxWidth","rootWrapper","OS","marginLeft","minHeight","paddingVertical","floatingLabel","position","top","left","floatingLabelColor","activeFloatingLabel","activeFloatingLabelColor"],"sources":["datetime.styles.ts"],"sourcesContent":["import BASE_THEME, { AllStyle } from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { WmIconStyles } from '@wavemaker/app-rn-runtime/components/basic/icon/icon.styles';\nimport { TextStyle, Platform, ViewStyle } from 'react-native';\nimport { WmButtonStyles } from '@wavemaker/app-rn-runtime/components/basic/button/button.styles';\nimport { WmSkeletonStyles } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.styles';\n\nexport type WmDatetimeStyles = BaseStyles & {\n    focused: AllStyle,\n    container: AllStyle,\n    placeholderText: TextStyle,\n    invalid: AllStyle,\n    clearIcon: WmIconStyles,\n    calendarIcon: WmIconStyles,\n    floatingLabel: TextStyle & ViewStyle,\n    activeFloatingLabel: AllStyle\n    actionWrapper: ViewStyle,\n    selectBtn: WmButtonStyles,\n    cancelBtn: WmButtonStyles,\n    dialog: AllStyle,\n    skeleton: WmSkeletonStyles;\n};\n\nexport const DEFAULT_CLASS = 'app-datetime';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n    const defaultStyles: WmDatetimeStyles = defineStyles({\n        root: {\n            paddingTop: 8,\n            paddingBottom: 8,\n            paddingLeft: 16,\n            paddingRight: 16,\n            borderWidth: 1,\n            borderStyle: 'solid',\n            borderRadius: 6,\n            backgroundColor: themeVariables.inputBackgroundColor,\n            borderColor: themeVariables.inputBorderColor,\n            justifyContent: 'center',\n            width: '100%'\n        },\n        focused: {\n\n        },\n        invalid: {\n            borderBottomColor: themeVariables.inputInvalidBorderColor\n        },\n        placeholderText: {\n          color: themeVariables.inputPlaceholderColor\n        },\n        container: {\n            flexDirection: 'row',\n            alignItems: 'center'\n        },\n        text: {\n            fontSize: 16,\n            color: themeVariables.inputTextColor\n        },\n        calendarIcon: {\n            root: {\n                alignSelf: 'center'\n            },\n            icon: {\n                fontSize: 24\n            }\n        },\n        clearIcon:  {\n            root : {\n                alignSelf: 'center',\n                justifyContent: 'center',\n                marginRight: 4,\n                height: 24,\n                width: 24,\n                borderRadius: 16,\n                backgroundColor: themeVariables.inputDisabledBgColor\n            },\n            icon: {\n                fontSize: 16,\n                paddingRight: 0,\n                fontWeight: 'bold'\n            }\n        } as WmIconStyles,\n        dialog:{\n            minWidth: 320,\n            paddingTop: 24,\n            paddingBottom: 24,\n            paddingLeft: 24,\n            paddingRight: 24,\n            elevation: 6,\n            width: '90%',\n            maxHeight: themeVariables.maxModalHeight,\n            backgroundColor: themeVariables.dialogBackgroundColor,\n            borderRadius: 28\n        },\n        actionWrapper: {\n            flexDirection: 'row-reverse', \n            marginRight: 20,\n        },\n        selectBtn: {\n            root:{\n                paddingLeft: 12,\n                paddingRight: 12,\n            }\n        },\n        cancelBtn: {\n            root:{\n                paddingLeft: 12,\n                paddingRight: 12,\n            }\n        },\n        skeleton: {\n            root:{\n              height: 16,\n              borderRadius: 4,\n              marginRight:16,\n              width:'80%' \n            },\n            icon:{\n                width:32,\n                height:32,\n                borderRadius:4\n            }\n          } as any as WmSkeletonStyles,\n    }) as any as WmDatetimeStyles;\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-datetime-input-horizontal', '', {\n      root: {\n        flex: 1,\n        minWidth: 0, // Allow shrinking below intrinsic content size if needed\n        maxWidth: '100%'  \n      },\n      text: {}\n    } as BaseStyles);\n    \n    // Timestamp widgets use the datetime component but have their own widget type\n    addStyle('form-timestamp-input-horizontal', '', {\n      root: {\n        width: '100%'\n      },\n      rootWrapper: {\n        width: '70%'\n      },\n      text: {}\n    } as BaseStyles);\n\n    addStyle('form-datetime-input-horizontal', '', {\n        root: {\n        width: '100%'\n        },\n        rootWrapper: {\n        width: '70%'\n        },\n        text: {}\n    } as BaseStyles);\n    \n    addStyle(DEFAULT_CLASS + '-disabled', '', {\n        root : {\n        backgroundColor: themeVariables.inputDisabledBgColor\n        }\n    });\n    addStyle(DEFAULT_CLASS + '-rtl', '', Platform.OS==\"web\"?{\n        clearIcon: {\n        root: {\n            marginLeft: 4,\n            marginRight: 0\n        }\n    }\n  }:{});\n  addStyle(DEFAULT_CLASS + '-with-label', '', {\n    root:{\n        minHeight: 48,\n        paddingVertical: 16\n    },\n    floatingLabel: {\n        position: 'absolute',\n        top: 12,\n        left: 16,\n        fontSize: 14,\n        color: themeVariables.floatingLabelColor\n    },\n    activeFloatingLabel: {\n        color: themeVariables.activeFloatingLabelColor\n    }\n  } as any as WmDatetimeStyles);\n});"],"mappings":"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","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/time/time.styles.js

@@ -0,0 +1,48 @@
+import BASE_THEME from '@wavemaker/app-rn-runtime/styles/theme';
+import { DEFAULT_CLASS as DATE_TIME_DEFAUlT_CLASS } from '../datetime/datetime.styles';
+import { Platform } from 'react-native';
+export const DEFAULT_CLASS = 'app-time';
+BASE_THEME.registerStyle((themeVariables, addStyle) => {
+  addStyle(DEFAULT_CLASS, DATE_TIME_DEFAUlT_CLASS, {});
+
+  // Add horizontal form input styles for horizontal form field layouts - positioned early to avoid overriding more specific styles
+  addStyle('form-time-input-horizontal', '', {
+    root: {
+      width: '100%'
+    },
+    rootWrapper: {
+      width: '70%'
+    },
+    text: {}
+  });
+  addStyle(DEFAULT_CLASS + '-disabled', '', {
+    root: {
+      backgroundColor: themeVariables.inputDisabledBgColor
+    }
+  });
+  addStyle(DEFAULT_CLASS + '-rtl', '', Platform.OS == "web" ? {
+    clearIcon: {
+      root: {
+        marginLeft: 4,
+        marginRight: 0
+      }
+    }
+  } : {});
+  addStyle(DEFAULT_CLASS + '-with-label', '', {
+    root: {
+      minHeight: 48,
+      paddingVertical: 16
+    },
+    floatingLabel: {
+      position: 'absolute',
+      top: 12,
+      left: 16,
+      fontSize: 14,
+      color: themeVariables.floatingLabelColor
+    },
+    activeFloatingLabel: {
+      color: themeVariables.activeFloatingLabelColor
+    }
+  });
+});
+//# sourceMappingURL=time.styles.js.map

package/components/input/epoch/time/time.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BASE_THEME","DEFAULT_CLASS","DATE_TIME_DEFAUlT_CLASS","Platform","registerStyle","themeVariables","addStyle","root","width","rootWrapper","text","backgroundColor","inputDisabledBgColor","OS","clearIcon","marginLeft","marginRight","minHeight","paddingVertical","floatingLabel","position","top","left","fontSize","color","floatingLabelColor","activeFloatingLabel","activeFloatingLabelColor"],"sources":["time.styles.ts"],"sourcesContent":["import BASE_THEME from '@wavemaker/app-rn-runtime/styles/theme';\nimport { WmDatetimeStyles, DEFAULT_CLASS as DATE_TIME_DEFAUlT_CLASS } from '../datetime/datetime.styles';\nimport { Platform } from 'react-native';\nimport { BaseStyles } from '@wavemaker/app-rn-runtime/core/base.component';\n\nexport type WmTimeStyles = WmDatetimeStyles;\n\nexport const DEFAULT_CLASS = 'app-time';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n  addStyle(DEFAULT_CLASS, DATE_TIME_DEFAUlT_CLASS, {});\n  \n  // Add horizontal form input styles for horizontal form field layouts - positioned early to avoid overriding more specific styles\n  addStyle('form-time-input-horizontal', '', {\n    root: {\n      width: '100%'\n    },\n    rootWrapper: {\n      width: '70%'\n    },\n    text: {}\n  } as BaseStyles);\n  \n  addStyle(DEFAULT_CLASS + '-disabled', '', {\n      root : {\n        backgroundColor: themeVariables.inputDisabledBgColor\n      }\n  });\n  addStyle(DEFAULT_CLASS + '-rtl', '', Platform.OS==\"web\"?{\n    clearIcon: {\n        root: {\n            marginLeft: 4,\n            marginRight: 0\n        }\n    }\n  }:{});\n  addStyle(DEFAULT_CLASS + '-with-label', '', {\n    root:{\n      minHeight: 48,\n      paddingVertical: 16\n    },\n    floatingLabel: {\n        position: 'absolute',\n        top: 12,\n        left: 16,\n        fontSize: 14,\n        color: themeVariables.floatingLabelColor\n    },\n    activeFloatingLabel: {\n        color: themeVariables.activeFloatingLabelColor\n    }\n  } as any as WmDatetimeStyles);\n});"],"mappings":"AAAA,OAAOA,UAAU,MAAM,wCAAwC;AAC/D,SAA2BC,aAAa,IAAIC,uBAAuB,QAAQ,6BAA6B;AACxG,SAASC,QAAQ,QAAQ,cAAc;AAKvC,OAAO,MAAMF,aAAa,GAAG,UAAU;AACvCD,UAAU,CAACI,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACrDA,QAAQ,CAACL,aAAa,EAAEC,uBAAuB,EAAE,CAAC,CAAC,CAAC;;EAEpD;EACAI,QAAQ,CAAC,4BAA4B,EAAE,EAAE,EAAE;IACzCC,IAAI,EAAE;MACJC,KAAK,EAAE;IACT,CAAC;IACDC,WAAW,EAAE;MACXD,KAAK,EAAE;IACT,CAAC;IACDE,IAAI,EAAE,CAAC;EACT,CAAe,CAAC;EAEhBJ,QAAQ,CAACL,aAAa,GAAG,WAAW,EAAE,EAAE,EAAE;IACtCM,IAAI,EAAG;MACLI,eAAe,EAAEN,cAAc,CAACO;IAClC;EACJ,CAAC,CAAC;EACFN,QAAQ,CAACL,aAAa,GAAG,MAAM,EAAE,EAAE,EAAEE,QAAQ,CAACU,EAAE,IAAE,KAAK,GAAC;IACtDC,SAAS,EAAE;MACPP,IAAI,EAAE;QACFQ,UAAU,EAAE,CAAC;QACbC,WAAW,EAAE;MACjB;IACJ;EACF,CAAC,GAAC,CAAC,CAAC,CAAC;EACLV,QAAQ,CAACL,aAAa,GAAG,aAAa,EAAE,EAAE,EAAE;IAC1CM,IAAI,EAAC;MACHU,SAAS,EAAE,EAAE;MACbC,eAAe,EAAE;IACnB,CAAC;IACDC,aAAa,EAAE;MACXC,QAAQ,EAAE,UAAU;MACpBC,GAAG,EAAE,EAAE;MACPC,IAAI,EAAE,EAAE;MACRC,QAAQ,EAAE,EAAE;MACZC,KAAK,EAAEnB,cAAc,CAACoB;IAC1B,CAAC;IACDC,mBAAmB,EAAE;MACjBF,KAAK,EAAEnB,cAAc,CAACsB;IAC1B;EACF,CAA4B,CAAC;AAC/B,CAAC,CAAC","ignoreList":[]}

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

@@ -0,0 +1,206 @@
+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, getDaysInMonth } from '@wavemaker/app-rn-runtime/core/utils';
+export class WmWheelDatePickerProps {
+  constructor() {
+    _defineProperty(this, "minDate", void 0);
+    _defineProperty(this, "maxDate", void 0);
+    _defineProperty(this, "selectedDate", new Date());
+    _defineProperty(this, "onDateChange", void 0);
+    _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, "itemHeight", void 0);
+    _defineProperty(this, "wrapperHeight", void 0);
+    _defineProperty(this, "selectedDateIndex", 0);
+    _defineProperty(this, "selectedMonthIndex", 0);
+    _defineProperty(this, "selectedYearIndex", 0);
+    _defineProperty(this, "dateData", []);
+    _defineProperty(this, "monthData", []);
+    _defineProperty(this, "yearData", []);
+    _defineProperty(this, "defaultSelectedDate", void 0);
+    _defineProperty(this, "localSelectedDate", '');
+    _defineProperty(this, "monthValue", 0);
+    _defineProperty(this, "yearValue", '');
+    _defineProperty(this, "getMinValue", type => {
+      if (!this.props.minDate) return START_DATE[type];
+      const minDate = new Date(this.props.minDate);
+      switch (type) {
+        case 'date':
+          return minDate.getDate();
+        case 'month':
+          return minDate.getMonth();
+        case 'year':
+          return minDate.getFullYear();
+        default:
+          return 0;
+      }
+    });
+    _defineProperty(this, "getMaxValue", type => {
+      if (!this.props.maxDate) return END_DATE[type];
+      const maxDate = new Date(this.props.maxDate);
+      switch (type) {
+        case 'date':
+          return maxDate.getDate();
+        case 'month':
+          return maxDate.getMonth();
+        case 'year':
+          return maxDate.getFullYear();
+        default:
+          return 0;
+      }
+    });
+    _defineProperty(this, "handleValueChange", (valueType, value, index) => {
+      var _this$props, _this$props$onDateCha;
+      let indexValue = Object.is(index, -0) ? 0 : index;
+      switch (valueType) {
+        case 'date':
+          this.selectedDateIndex = indexValue;
+          break;
+        case 'month':
+          this.monthValue = getMonthIndex(value === null || value === void 0 ? void 0 : value.toString());
+          this.selectedMonthIndex = indexValue;
+          break;
+        case 'year':
+          this.selectedYearIndex = indexValue;
+          break;
+      }
+      const minYear = this.getMinValue('year');
+      const maxYear = this.getMaxValue('year');
+      const selectedYear = getYearRange(minYear, maxYear)[this.selectedYearIndex];
+
+      // Restrict months dynamically
+      let minMonth = 0;
+      let maxMonth = 11;
+      if (selectedYear === minYear) minMonth = this.getMinValue('month');
+      if (selectedYear === maxYear) maxMonth = this.getMaxValue('month');
+
+      // Update month data dynamically
+      this.monthData = getMonths(minMonth, maxMonth);
+
+      // Ensure selected month is within range
+      let minDate = 1;
+      let maxDate = 31;
+      if (this.monthValue > maxMonth) {
+        this.selectedMonthIndex = maxMonth;
+      }
+      maxDate = getDaysInMonth(getMonthIndex(this.monthData[this.selectedMonthIndex]) + 1, selectedYear);
+      if (this.monthValue < minMonth) {
+        this.monthValue = minMonth;
+        maxDate = getDaysInMonth(this.monthValue + 1, selectedYear);
+      }
+
+      // Restrict days dynamically
+      const selectedMonth = this.selectedMonthIndex;
+      if (selectedYear === minYear && this.monthValue === minMonth) minDate = this.getMinValue('date');
+      if (selectedYear === maxYear && selectedMonth === maxMonth) maxDate = this.getMaxValue('date');
+      if (maxYear === minYear && this.monthValue === maxMonth) maxDate = this.getMaxValue('date');
+
+      // Update date data dynamically
+      this.dateData = getDates(minDate, maxDate);
+
+      // Ensure selected date is within range
+      if (this.selectedDateIndex > maxDate - 1) this.selectedDateIndex = maxDate - 1;
+      const selectedDate = this.dateData[this.selectedDateIndex] || this.dateData[this.dateData.indexOf(this.selectedDateIndex + 1)];
+      ;
+
+      // Create new selected date
+      const dateObj = getDateObject(selectedDate, getMonthIndex(this.monthData[this.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, this.localSelectedDate);
+    });
+    const _minDate = this.props.minDate ? new Date(this.props.minDate) : new Date(START_DATE.year, START_DATE.month, START_DATE.date);
+    const _maxDate = this.props.maxDate ? new Date(this.props.maxDate) : new Date(END_DATE.year, END_DATE.month, END_DATE.date);
+    let _selectedDate = this.props.selectedDate ? new Date(this.props.selectedDate) : new Date();
+    if (_selectedDate < _minDate) _selectedDate = _minDate;
+    if (_selectedDate > _maxDate) _selectedDate = _maxDate;
+    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();
+    const _selectedYear = _selectedDate.getFullYear();
+    const _selectedMonth = _selectedDate.getMonth();
+    const selectedDay = _selectedDate.getDate();
+
+    // Generate valid year range
+    const _minYear = _minDate.getFullYear();
+    const _maxYear = _maxDate.getFullYear();
+    this.yearData = getYearRange(_minYear, _maxYear);
+    this.selectedYearIndex = this.yearData.indexOf(_selectedYear);
+
+    // Generate valid months based on selected year
+    let _minMonth = 0;
+    let _maxMonth = 11;
+    if (_selectedYear === _minYear) _minMonth = _minDate.getMonth();
+    if (_selectedYear === _maxYear) _maxMonth = _maxDate.getMonth();
+    this.monthData = getMonths(_minMonth, _maxMonth);
+    this.selectedMonthIndex = this.monthData.indexOf(getMonths(0, 11)[_selectedMonth]);
+
+    // Generate valid days based on selected year & month
+    let minDay = 1;
+    let maxDay = getDaysInMonth(_selectedMonth + 1, _selectedYear);
+    if (_selectedYear === _minYear && _selectedMonth === _minMonth) minDay = _minDate.getDate();
+    if (_selectedYear === _maxYear && _selectedMonth === _maxMonth) maxDay = _maxDate.getDate();
+    this.dateData = getDates(minDay, maxDay);
+    this.selectedDateIndex = this.dateData.indexOf(selectedDay);
+  }
+  render() {
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.root
+    }, /*#__PURE__*/React.createElement(WmWheelScrollPicker, {
+      data: this.dateData,
+      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.monthData,
+      wrapperHeight: this.wrapperHeight,
+      itemHeight: this.itemHeight,
+      selectedIndex: this.selectedMonthIndex,
+      onValueChange: (value, index) => this.handleValueChange('month', value, index)
+    })), /*#__PURE__*/React.createElement(WmWheelScrollPicker, {
+      data: getYearRange(this.getMinValue('year'), this.getMaxValue('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