Initial commit/

1 files changed, 103 insertions, 0 deletions

diff --git a/frontend/app/components/picker/datePicker.js b/frontend/app/components/picker/datePicker.js
new file mode 100644
index 0000000..4225613
--- /dev/null
+++ b/frontend/app/components/picker/datePicker.js
@@ -0,0 +1,103 @@
+import React from 'react';
+import { RkPicker } from 'react-native-ui-kitten';
+
+export const DatePart = Object.freeze({ YEAR: 1, MONTH: 2, DAY: 3 });
+
+export class DatePicker extends React.Component {
+  componentName = 'DatePicker';
+
+  state = {
+    data: {
+      days: DatePicker.generateArrayFromRange(1, 31),
+      years: DatePicker.generateArrayFromRange(2000, 2030),
+      months: [
+        { key: 1, value: 'Jun' }, { key: 2, value: 'Feb' },
+        { key: 3, value: 'Mar' }, { key: 4, value: 'Apr' },
+        { key: 5, value: 'May' }, { key: 6, value: 'Jun' },
+        { key: 7, value: 'Jul' }, { key: 8, value: 'Aug' },
+        { key: 9, value: 'Sep' }, { key: 10, value: 'Oct' },
+        { key: 11, value: 'Nov' }, { key: 12, value: 'Dec' },
+      ],
+    },
+  };
+
+  onDatePickerConfirm = (date) => {
+    let resultDate = {};
+    if (this.props.customDateParts) {
+      let i = 0;
+      if (this.props.customDateParts.includes(DatePart.MONTH)) {
+        resultDate.month = date[i += 1];
+      }
+      if (this.props.customDateParts.includes(DatePart.DAY)) {
+        resultDate.day = date[i += 1];
+      }
+      if (this.props.customDateParts.includes(DatePart.YEAR)) {
+        resultDate.year = date[i];
+      }
+    } else {
+      resultDate = { month: date[0], day: date[1], year: date[2] };
+    }
+    this.props.onConfirm(resultDate);
+  };
+
+  static generateArrayFromRange(start, finish) {
+    return Array(...Array((finish - start) + 1)).map((_, i) => start + i);
+  }
+
+  findElementByKey(key, array) {
+    let element = array[0];
+    array.forEach((value) => {
+      if (value.key === key) element = value;
+    });
+    return element;
+  }
+
+  render() {
+    const {
+      onConfirm,
+      selectedYear,
+      selectedMonth,
+      selectedDay,
+      customDateParts,
+      ...props
+    } = this.props;
+
+    let data = [this.state.data.months, this.state.data.days, this.state.data.years];
+    let selectedOptions = [
+      this.findElementByKey(selectedMonth, this.state.data.months),
+      selectedDay || 1,
+      selectedYear || 2000,
+    ];
+    if (customDateParts) {
+      selectedOptions = [];
+      data = [];
+      if (customDateParts.includes(DatePart.MONTH)) {
+        data.push(this.state.data.months);
+        selectedOptions.push(this.findElementByKey(selectedMonth, this.state.data.months));
+      }
+      if (customDateParts.includes(DatePart.DAY)) {
+        data.push(this.state.data.days);
+        selectedOptions.push(selectedDay || 1);
+      }
+      if (customDateParts.includes(DatePart.YEAR)) {
+        data.push(this.state.data.years);
+        selectedOptions.push(selectedYear || 2000);
+      }
+    }
+    return (
+      <RkPicker
+        rkType='highlight'
+        title='Set Date'
+        data={data}
+        onConfirm={this.onDatePickerConfirm}
+        selectedOptions={selectedOptions}
+        optionRkType='subtitle small'
+        selectedOptionRkType='header4'
+        titleTextRkType='header4'
+        cancelTextRkType='light'
+        confirmTextRkType=''
+        {...props}
+      />
+    );
+  }
+}