@momo-kits/date-picker 0.0.3-beta → 0.0.5

package/datePicker/DatePicker.js

@@ -128,11 +128,11 @@ class DatePicker extends Component {
                 } : DatePickerHelper.formatDate(propsSelectedDate, props.format);
             }
         }
-        this.createDataDate(this.minDate, this.maxDate);
+        this.createDataDate(this.minDate, this.maxDate, props.minuteArray, props.rangeHour);
         this.selectedIndexDate();
     }
 
-    createDataDate(minDate, maxDate) {
+    createDataDate(minDate, maxDate, minuteArray, rangeHour) {
         this.minDay = 1;
         this.minMonth = 1;
         this.minYear = 1970;
@@ -153,9 +153,13 @@ class DatePicker extends Component {
         this.days = DatePickerHelper.makeRange(1, 31);
         this.months = DatePickerHelper.makeRange(1, 12);
         this.years = DatePickerHelper.makeRange(this.minYear, this.maxYear);
-        this.minutes = DatePickerHelper.makeRange(0, 59, true);
         this.hours = DatePickerHelper.makeRange(0, 23, true);
-        this.ranged = DatePickerHelper.arrayRange;
+        if (Array.isArray(minuteArray)) {
+            this.minutes = minuteArray;
+        } else {
+            this.minutes = DatePickerHelper.makeRange(0, 59, true);
+        }
+        this.ranged = rangeHour || DatePickerHelper.arrayRange;
     }
 
     selectedIndexDate() {
@@ -425,10 +429,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}
@@ -578,7 +583,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 = {
@@ -596,3 +604,4 @@ DatePicker.defaultProps = {
 };
 
 export default DatePicker;
+

package/datePicker/DatePickerInput.js

@@ -8,7 +8,8 @@ import {
 import DatePicker from './DatePicker';
 
 const DatePickerInput = ({
-    navigator, defaultDate, maxDate, minDate, format = 'dd/MM/YYYY', onSelected, onClose, style, textStyle, icon, iconStyle, error, disabled
+    navigator, defaultDate, maxDate, minDate, format = 'dd/MM/YYYY', onSelected, onClose,
+    style, textStyle, icon, iconStyle, error, disabled, minuteArray, title, showRightIcon
 }) => {
     const [selected, setSelected] = useState(defaultDate || '');
 
@@ -20,8 +21,10 @@ const DatePickerInput = ({
                 minDate,
                 maxDate,
                 format,
+                title,
                 selectedDate: selected,
                 onClose,
+                minuteArray,
                 onSelected: (dateSelected) => {
                     onSelected?.(dateSelected);
                     setSelected(dateSelected);
@@ -40,10 +43,12 @@ const DatePickerInput = ({
             style={[styles.container, ValueUtil.extractStyle(style), otherStyle]}
         >
             <Text.Title style={[styles.defaultText, ValueUtil.extractStyle(textStyle), isEmpty(selected) ? { color: Colors.black_09 } : {}]}>{isEmpty(selected) ? format : selected}</Text.Title>
-            <Image
-                source={icon || IconSource.ic_calendar}
-                style={[styles.icon, ValueUtil.extractStyle(iconStyle)]}
-            />
+            {showRightIcon ? (
+                <Image
+                    source={icon || IconSource.ic_calendar}
+                    style={[styles.icon, ValueUtil.extractStyle(iconStyle)]}
+                />
+            ) : <View />}
         </TouchableOpacity>
     );
 };
@@ -61,7 +66,13 @@ DatePickerInput.propTypes = {
     style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
     textStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
     error: PropTypes.bool,
-    disabled: PropTypes.bool
+    disabled: PropTypes.bool,
+    minuteArray: PropTypes.arrayOf(PropTypes.string),
+    showRightIcon: PropTypes.bool,
+    title: PropTypes.string
+};
+DatePickerInput.defaultProps = {
+    showRightIcon: true
 };
 
 export default DatePickerInput;
@@ -94,4 +105,4 @@ const styles = StyleSheet.create({
         backgroundColor: Colors.black_05,
         borderWidth: 0
     }
-});
+});

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: 200,
+    },
+    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/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,19 +1,16 @@
 {
-    "name": "@momo-kits/date-picker",
-    "version": "0.0.3-beta",
-    "private": false,
-    "main": "index.js",
-    "dependencies": {
-      "prop-types": "^15.7.2",
-      "react": "16.9.0",
-      "lodash": "^4.17.15",
-      "@momo-kits/core": "^0.0.5-beta"
-    },
-    "peerDependencies": {
-      "react": "16.9.0",
-      "react-native": ">=0.55"
-    },
-    "devDependencies": {},
-    "license": "MOMO"
-  }
-  
+  "name": "@momo-kits/date-picker",
+  "version": "0.0.5",
+  "private": false,
+  "main": "index.js",
+  "dependencies": {},
+  "peerDependencies": {
+    "react-native": ">=0.55",
+    "prop-types": "^15.7.2",
+    "react": "16.9.0",
+    "@momo-kits/core": ">=0.0.5-beta",
+    "lodash": "^4.17.15"
+  },
+  "devDependencies": {},
+  "license": "MoMo"
+}

package/publish.sh

@@ -12,7 +12,7 @@ echo VERSION: $VERSION
 rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js'  --exclude 'props-type.js' --exclude 'prop-types.js' ./* dist
 
 # #babel component to dist
-babel ./dist -d dist --copy-files
+#babel ./dist -d dist --copy-files
 
 #copy option
 #cp -r ./src/ dist