@momo-kits/date-picker 0.0.38-beta → 0.0.40-beta.2

package/datePicker/DatePicker.js

@@ -6,7 +6,7 @@ import {
 } from 'react-native';
 import PropTypes from 'prop-types';
 import {
-    BottomPopupHeader, Button, Text, ScreenUtils, SwitchLanguage, Spacing
+    BottomPopupHeader, Button, Text, ScreenUtils, SwitchLanguage, Spacing, Colors
 } from '@momo-kits/core';
 import WheelPicker from './WheelPicker';
 import DatePickerHelper from './helper/DatePickerHelper';
@@ -26,13 +26,22 @@ const styles = StyleSheet.create({
         width: widthScreen,
         alignItems: 'center',
         justifyContent: 'center',
+        paddingHorizontal: 21,
+        paddingTop: 12
     },
     column: {
         borderWidth: 2,
         borderColor: 'red',
     },
     header: {
-        borderRadius: 16,
+        borderTopLeftRadius: 12,
+        borderTopRightRadius: 12,
+        //backgroundColor:'red',
+        height: 64,
+        borderBottomColor: Colors.black_04,
+        borderBottomWidth: 1,
+        alignItems:'center',
+        justifyContent:'center',
         marginBottom: 0, // Spacing.S,
     },
     view: {
@@ -128,11 +137,11 @@ class DatePicker extends Component {
                 } : DatePickerHelper.formatDate(propsSelectedDate, props.format);
             }
         }
-        this.createDataDate(this.minDate, this.maxDate, props.minuteArray);
+        this.createDataDate(this.minDate, this.maxDate, props.minuteArray, props.rangeHour);
         this.selectedIndexDate();
     }
 
-    createDataDate(minDate, maxDate, minuteArray) {
+    createDataDate(minDate, maxDate, minuteArray, rangeHour) {
         this.minDay = 1;
         this.minMonth = 1;
         this.minYear = 1970;
@@ -159,7 +168,7 @@ class DatePicker extends Component {
         } else {
             this.minutes = DatePickerHelper.makeRange(0, 59, true);
         }
-        this.ranged = DatePickerHelper.arrayRange;
+        this.ranged = rangeHour || DatePickerHelper.arrayRange;
     }
 
     selectedIndexDate() {
@@ -171,15 +180,13 @@ class DatePicker extends Component {
             current = this.maxDate;
         }
         if (format === 'hh:mm' && isRanged) {
-            const valueHours_1 = this.selectedDate ? `${getStrings(this.selectedDate?.from?.getHours()?.toString())}:${getStrings(this.selectedDate?.from?.getMinutes()?.toString())}` : '';
-
-            const valueHours_2 = this.selectedDate ? `${getStrings(this.selectedDate?.to?.getHours()?.toString())}:${getStrings(this.selectedDate?.to?.getMinutes()?.toString())}` : '';
-
-            this.hourRangeIndex_1 = this.selectedDate
+            const valueHours_1 = this.selectedDate?.from ? `${getStrings(this.selectedDate?.from?.getHours()?.toString())}:${getStrings(this.selectedDate?.from?.getMinutes()?.toString())}` : '00:00';
+            const valueHours_2 = this.selectedDate?.to ? `${getStrings(this.selectedDate?.to?.getHours()?.toString())}:${getStrings(this.selectedDate?.to?.getMinutes()?.toString())}` : '00:00';
+            this.hourRangeIndex_1 = valueHours_1
                 ? this.ranged.indexOf(valueHours_1)
                 : this.ranged.indexOf(`${current.getHours().toString()}:${current.getMinutes().toString()}`);
 
-            this.hourRangeIndex_2 = this.selectedDate
+            this.hourRangeIndex_2 = valueHours_2
                 ? this.ranged.indexOf(valueHours_2)
                 : this.ranged.indexOf(`${current.getHours().toString()}:${current.getMinutes().toString()}`);
             return;
@@ -199,14 +206,14 @@ class DatePicker extends Component {
         if (format === 'hh:mm' && !isRanged) {
             const valueHours = this.selectedDate ? this.selectedDate?.getHours()?.toString()?.length === 1 ? `0${this.selectedDate.getHours().toString()}` : this.selectedDate?.getHours()?.toString() || '' : '';
             const valueMinute = this.selectedDate ? this.selectedDate?.getMinutes()?.toString()?.length === 1 ? `0${this.selectedDate.getMinutes().toString()}` : this.selectedDate?.getMinutes()?.toString() || '' : '';
-
+            
             this.hourIndex = this.selectedDate
                 ? this.hours.indexOf(valueHours)
-                : this.hours.indexOf(current.getHours().toString());
+                : this.hours.indexOf(current.getHours().toString().length === 1 ? `0${current.getHours().toString()}` : current.getHours().toString());
 
             this.minuteIndex = this.selectedDate
                 ? this.minutes.indexOf(valueMinute)
-                : this.minutes.indexOf(current.getMinutes().toString());
+                : this.minutes.indexOf(current.getMinutes().toString().length === 1 ? `0${current.getMinutes().toString()}` : current.getMinutes().toString());
         }
     }
 
@@ -259,11 +266,9 @@ class DatePicker extends Component {
         const day = this.days[this.dayIndex];
         const month = this.months[this.monthIndex];
         const year = this.years[this.yearIndex];
-        const hour = this.hours[this.hourIndex];
-        const minute = this.minutes[this.minuteIndex];
-
+        const hour = this.hours[this.hourIndex] || '00';
+        const minute = this.minutes[this.minuteIndex] || '00';
         const selectedDateFormatted = DatePickerHelper.toString(day, month, year, hour, minute, format);
-
         if (onSelected && typeof onSelected === 'function') {
             onSelected(selectedDateFormatted || selectedDate || DatePickerHelper.getCurrentDate(format));
         }
@@ -429,10 +434,11 @@ class DatePicker extends Component {
 
     renderHeader() {
         const {
-            title, placeholder, body, buttonTitle, onButtonPress, headerStyle, iconClosePosition = 'right'
+            title, placeholder, body, buttonTitle, onButtonPress, headerStyle, iconClosePosition = 'right', iconType
         } = this.props;
         return (
             <BottomPopupHeader
+                iconType={iconType}
                 iconClosePosition={iconClosePosition}
                 body={body}
                 onClose={this.hide}
@@ -539,7 +545,7 @@ class DatePicker extends Component {
     renderFooter() {
         const { titleFooter, renderFooter } = this.props;
         return renderFooter ? renderFooter() : (
-            <View style={{ paddingHorizontal: 12, marginBottom: ifIphoneX(29, 11), marginTop: 28 }}>
+            <View style={{ paddingHorizontal: 12, marginBottom: ifIphoneX(35, 12), marginTop: 16 }}>
                 <Button
                     onPress={this.finish}
                     title={titleFooter || SwitchLanguage.confirm}
@@ -582,7 +588,10 @@ DatePicker.propTypes = {
     renderDescription: PropTypes.any,
     description: PropTypes.string,
     renderFooter: PropTypes.any,
-    style: PropTypes.any
+    style: PropTypes.any,
+    rangeHour: PropTypes.array,
+    iconClosePosition: PropTypes.oneOf(['left', 'right']),
+    iconType: PropTypes.oneOf(['icon', 'text']),
 };
 
 DatePicker.defaultProps = {

package/datePicker/ListPicker.js

@@ -0,0 +1,193 @@
+import React, { Component } from 'react';
+import {
+    Dimensions, StyleSheet, View
+} from 'react-native';
+import {
+    Button, IconSource, TouchableOpacity, Text, Colors, Image, DeviceUtils, SwitchLanguage
+} from '@momo-kits/core';
+import WheelPicker from './WheelPicker';
+
+const { isIphoneX } = DeviceUtils;
+
+const widthScreen = Dimensions.get('window').width;
+
+export default class ListPicker extends Component {
+    constructor(props) {
+        super(props);
+        this.data = 0;
+    }
+
+    hide = () => {
+        const { onClose, requestClose } = this.props;
+        if (requestClose && typeof requestClose === 'function') {
+            requestClose(() => {
+                if (onClose && typeof onClose === 'function') {
+                    onClose();
+                }
+            });
+        }
+    }
+
+    onBeginDrag = () => {
+        if (this.refs.picker) {
+            this.refs.picker.setScrollEnabled(false);
+        }
+    }
+
+    onEndDrag = () => {
+        if (this.refs.picker) {
+            this.refs.picker.setScrollEnabled(true);
+        }
+    }
+
+    onChangeValue = (value) => {
+        const { callback } = this.props;
+        if (typeof callback === 'function') {
+            callback(value);
+        }
+    }
+
+    onPressClear = () => {
+        this.hide();
+    }
+
+    onPressChoose = () => {
+        this.onChangeValue(this.data);
+        this.hide();
+    }
+
+    renderRight = () => (
+        <TouchableOpacity
+            onPress={this.onPressChoose}
+        >
+            <Text.Title style={{ fontWeight: 'bold', color: Colors.pink_05 }}>{SwitchLanguage.save}</Text.Title>
+        </TouchableOpacity>
+    );
+
+    renderLeftIcon = () => (
+        <TouchableOpacity onPress={() => this.hide()}>
+            <Image
+                source={IconSource.ic_close_x_24}
+                style={{ width: 25, height: 25, tintColor: Colors.black_17 }}
+            />
+        </TouchableOpacity>
+    );
+
+    renderHeader() {
+        const { title = '' } = this.props;
+        return (
+            <View style={styles.header}>
+                {this.renderLeftIcon()}
+                <Text style={styles.title}>
+                    {title}
+                </Text>
+                {this.props.typeStyle === 'aboveAction' ? this.renderRight() : <View style={{ width: 25 }} />}
+            </View>
+        );
+    }
+
+    renderContent() {
+        const { arrData = [], stylePicker, initValue } = this.props;
+        return (
+            <View style={styles.contentStyle}>
+                <WheelPicker
+                    stylePicker={stylePicker}
+                    bottomOffset={1}
+                    value={initValue}
+                    key="picker"
+                    ref="picker"
+                    arrayValue={arrData}
+                    onBeginDrag={this.onBeginDrag}
+                    onEndDrag={this.onEndDrag}
+                    onValueChange={(value) => {
+                        this.data = value;
+                    }}
+                />
+
+            </View>
+        );
+    }
+
+    render() {
+        return (
+            <View style={styles.view}>
+                {this.renderHeader()}
+                {this.renderContent()}
+                {
+                    this.props.typeStyle === 'aboveAction'
+                        ? null
+                        : (
+                            <View style={styles.btnView}>
+                                <Button
+                                    style={{ flex: 1 }}
+                                    title={SwitchLanguage.cancel}
+                                    buttonStyle={{ backgroundColor: Colors.second_text_color }}
+                                    onPress={this.onPressClear}
+                                />
+                                <Button
+                                    style={{ flex: 1, marginLeft: 15 }}
+                                    title={SwitchLanguage.choose}
+                                    type="primary"
+                                    onPress={this.onPressChoose}
+                                />
+                            </View>
+                        )
+                }
+            </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        width: widthScreen,
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    contentStyle: {
+        height: 230,
+    },
+    column: {
+        borderWidth: 2,
+        borderColor: 'red',
+    },
+    header: {
+        flexDirection: 'row',
+        height: 50,
+        width: widthScreen,
+        paddingHorizontal: 16,
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        backgroundColor: '#fff',
+        borderBottomWidth: 1,
+        borderColor: '#DADADA',
+    },
+    view: {
+        backgroundColor: 'white',
+        paddingBottom: 10 + (isIphoneX() ? 10 : 0)
+    },
+    title: {
+        fontWeight: 'bold',
+        color: Colors.black_17,
+        flex: 1,
+        fontSize: 16,
+        textAlign: 'center'
+    },
+    titleCancel: {
+        fontSize: 17,
+        color: '#4A90E2'
+    },
+    titleConfirm: {
+        fontSize: 17,
+        color: '#4A90E2',
+        textAlign: 'right'
+    },
+    btnView: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        marginHorizontal: 15,
+        height: 60,
+        alignItems: 'center'
+    }
+});

package/datePicker/WheelPicker.js

@@ -6,6 +6,7 @@ import {
     LinearGradient, Text, Colors, ScaleSize
 } from '@momo-kits/core';
 import ScrollCustom from './custom/ScrollCustom';
+import DatePickerHelper from './helper/DatePickerHelper';
 
 const widthScreen = Dimensions.get('window').width;
 // var heightScreen = Dimensions.get('window').height;
@@ -14,8 +15,9 @@ export default class WheelPicker extends Component {
     constructor(props) {
         super(props);
         const {
-            heightItem, value, numberItem, arrayValue
+            heightItem, value: valueItem, numberItem, arrayValue
         } = this.props;
+        const value = valueItem === -1 ? 0 : valueItem;
         this.heightItem = heightItem;
         this.currentPosition = value * this.heightItem;
         this.prePosition = this.currentPosition;
@@ -171,19 +173,20 @@ export default class WheelPicker extends Component {
         const { items, value, width } = this.state;
         const { preFix, bottomOffset } = this.props;
         return (
-            <View style={{ flex: 1, height: heightContain + 20 }}>
-                <Text.SubTitle style={{
+            <View style={{ flex: 1, height: heightContain + 40 }}>
+                <Text.SubTitle weight='bold' style={{
                     color: Colors.black_17, marginLeft: 6, marginBottom: 3
                 }}
                 >
-                    {preFix?.toUpperCase()}
+                    {DatePickerHelper.capitalizeFirstLetter(preFix || '')}
                 </Text.SubTitle>
                 <View
                     style={{
                         flex: 1,
                         height: heightContain,
-                        // backgroundColor: 'blue',
+                        //backgroundColor: 'blue',
                         marginHorizontal: 6,
+                        paddingBottom: 20,
                         borderWidth: 1,
                         borderColor: Colors.black_04,
                         borderRadius: 8,

package/datePicker/helper/DatePickerHelper.js

@@ -77,7 +77,7 @@ export default class DatePickerHelper {
     static formatDate(date, format) {
         if (date && format) {
             const {
-                year, month, day, hour, minute, second
+                year, month, day, hour, minute, second = 0
             } = DatePickerHelper.getDateTimeFromFormat(date, format);
             if (DatePickerHelper.checkValidDate(year, month, day)
                 && DatePickerHelper.checkValidTime(hour, minute, second)) {
@@ -156,17 +156,21 @@ export default class DatePickerHelper {
         return null;
     }
 
-    static checkValidDate(year, month, day) {
+    static checkValidDate(y, m, d) {
+        const year = parseInt(y);
+        const month = parseInt(m);
+        const day = parseInt(d);
         const months31 = [0, 2, 4, 6, 7, 9, 11];
         const months30 = [3, 5, 8, 10];
         const months28 = [1];
         const isLeap = ((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0);
         if (year != null && month != null && day != null) {
             const isDayValid = day > 0;
-            const isMonthValid = (months31.indexOf(month) !== -1 && day <= 31)
-            || (months30.indexOf(month) !== -1 && day <= 30)
-            || (months28.indexOf(month) !== -1 && day <= 28)
-            || (months28.indexOf(month) !== -1 && day <= 29 && isLeap);
+            const isMonthValid = (months31.indexOf(parseInt(month)) != -1 && day <= 31)
+            || (months30.indexOf(month) != -1 && day <= 30)
+            || (months30.indexOf(month) != -1 && day <= 31)
+            || (months28.indexOf(month) != -1 && day <= 28)
+            || (months28.indexOf(month) != -1 && day <= 29 && isLeap);
             return isDayValid && isMonthValid;
         }
         return false;
@@ -194,4 +198,8 @@ export default class DatePickerHelper {
 
         return monthLength[month - 1];
     }
+
+    static capitalizeFirstLetter(string) {
+        return string.charAt(0).toUpperCase() + string.slice(1);
+      }
 }

package/index.js

@@ -1,7 +1,9 @@
 import DatePicker from './datePicker/DatePicker';
 import DatePickerInput from './datePicker/DatePickerInput';
+import ListPicker from './datePicker/ListPicker';
 
 export {
     DatePicker,
-    DatePickerInput
+    DatePickerInput,
+    ListPicker
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/date-picker",
-  "version": "0.0.38-beta",
+  "version": "0.0.40-beta.2",
   "private": false,
   "main": "index.js",
   "dependencies": {},
@@ -8,8 +8,8 @@
     "react-native": ">=0.55",
     "prop-types": "^15.7.2",
     "react": "16.9.0",
-    "lodash": "^4.17.15",
-    "@momo-kits/core": ">=0.0.5-beta"
+    "@momo-kits/core": ">=0.0.5-beta",
+    "lodash": "^4.17.15"
   },
   "devDependencies": {},
   "license": "MoMo"

package/publish.sh

@@ -21,7 +21,7 @@ rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js'  --exclude 'props-type
 #npm login
 #publish dist to npm
 cd dist
-npm publish --access=public
+npm publish --tag beta --access=public
 cd ..
 rm -rf dist