@momo-kits/date-picker 0.0.65-beta.21 → 0.0.65-beta.23

package/datePicker/DatePicker.js

@@ -11,7 +11,7 @@ import {
   SwitchLanguage,
   Spacing,
   Colors,
-} from '@momo-kits/core-v2';
+} from '@momo-kits/core';
 import WheelPicker from './WheelPicker';
 import DatePickerHelper from './helper/DatePickerHelper';
 
@@ -204,6 +204,8 @@ class DatePicker extends Component {
       this.minutes = DatePickerHelper.makeRange(0, 59, true);
     }
     this.ranged = rangeHour || DatePickerHelper.arrayRange;
+    this.startTime = startTime || DatePickerHelper.arrayRange;
+    this.endTime = endTime || DatePickerHelper.arrayRange;
   }
 
   selectedIndexDate() {
@@ -332,7 +334,6 @@ class DatePicker extends Component {
     if (isRanged && format === 'hh:mm') {
       const from = this.ranged[this.hourRangeIndex_1];
       const to = this.ranged[this.hourRangeIndex_2];
-
       if (onSelected && typeof onSelected === 'function') {
         onSelected({
           from,
@@ -514,6 +515,7 @@ class DatePicker extends Component {
     bottomOffset,
     callback,
     reversePreFix,
+    showLabel,
   ) {
     if (!this.arrayRef) {
       this.arrayRef = {};
@@ -529,7 +531,7 @@ class DatePicker extends Component {
         value={valueInput}
         arrayValue={arrayValue}
         reversePreFix={reversePreFix}
-        preFix={label}
+        preFix={showLabel ? label : ''}
         onBeginDrag={this.onBeginDrag}
         onEndDrag={this.onEndDrag}
         onValueChange={value => {
@@ -572,9 +574,9 @@ class DatePicker extends Component {
     const {description, descriptionStyle, renderDescription} = this.props;
     if (renderDescription) return renderDescription;
     return description ? (
-      <Text.Paragraph style={[{marginBottom: Spacing.S}, descriptionStyle]}>
+      <Text.Title style={[{marginBottom: Spacing.S}, descriptionStyle]}>
         {description}
-      </Text.Paragraph>
+      </Text.Title>
     ) : null;
   };
 
@@ -588,8 +590,8 @@ class DatePicker extends Component {
       labelMinute,
       labelHour,
       isRanged,
+      showLabel = true,
     } = this.props;
-
     if (isRanged && format === 'hh:mm') {
       return (
         <View style={styles.container}>
@@ -598,7 +600,7 @@ class DatePicker extends Component {
             {this.renderColumn(
               'HourRange1',
               this.hourRangeIndex_1,
-              this.ranged,
+              this.startTime,
               SwitchLanguage.from,
               bottomOffset,
               value => {
@@ -609,7 +611,7 @@ class DatePicker extends Component {
             {this.renderColumn(
               'HourRange2',
               this.hourRangeIndex_2,
-              this.ranged,
+              this.endTime,
               SwitchLanguage.to,
               bottomOffset,
               value => {
@@ -635,6 +637,7 @@ class DatePicker extends Component {
                 value => {
                   this.renderUpdate({day: value});
                 },
+                showLabel,
               )
             : null}
           {format.indexOf('MM') !== -1
@@ -647,6 +650,7 @@ class DatePicker extends Component {
                 value => {
                   this.setStateDate(this.dayIndex, value, this.yearIndex);
                 },
+                showLabel,
               )
             : null}
           {format.indexOf('YYYY') !== -1
@@ -659,6 +663,7 @@ class DatePicker extends Component {
                 value => {
                   this.setStateMonth(this.dayIndex, this.monthIndex, value);
                 },
+                showLabel,
               )
             : null}
           {format.indexOf('hh') !== -1

package/datePicker/DatePickerInput.js

@@ -1,136 +1,139 @@
 import PropTypes from 'prop-types';
-import React, {useState} from 'react';
-import {StyleSheet} from 'react-native';
-import {isEmpty} from 'lodash';
+import React, { useState } from 'react';
+import { StyleSheet } from 'react-native';
+import { isEmpty } from 'lodash';
 import {
-  IconSource,
-  TouchableOpacity,
-  Text,
-  Colors,
-  ValueUtil,
-  Image,
-  Radius,
-} from '@momo-kits/core-v2';
+    IconSource,
+    TouchableOpacity,
+    Text,
+    Colors,
+    ValueUtil,
+    Image,
+} from '@momo-kits/core';
 import DatePicker from './DatePicker';
 
 const DatePickerInput = ({
-  navigator,
-  defaultDate,
-  maxDate,
-  minDate,
-  format = 'dd/MM/YYYY',
-  onSelected,
-  onClose,
-  style,
-  textStyle,
-  icon,
-  iconStyle,
-  error,
-  disabled,
-  minuteArray,
-  title,
-  showRightIcon,
+    navigator,
+    defaultDate,
+    maxDate,
+    minDate,
+    format = 'dd/MM/YYYY',
+    onSelected,
+    onClose,
+    style,
+    textStyle,
+    icon,
+    iconStyle,
+    error,
+    disabled,
+    minuteArray,
+    title,
+    showRightIcon,
 }) => {
-  const [selected, setSelected] = useState(defaultDate || '');
+    const [selected, setSelected] = useState(defaultDate || '');
 
-  const onPress = () => {
-    navigator?.showBottom?.({
-      screen: DatePicker,
-      params: {
-        dragDisabled: true,
-        minDate,
-        maxDate,
-        format,
-        title,
-        selectedDate: selected,
-        onClose,
-        minuteArray,
-        onSelected: dateSelected => {
-          onSelected?.(dateSelected);
-          setSelected(dateSelected);
-        },
-      },
-    });
-  };
-  let otherStyle = {};
-  if (error) otherStyle = styles.error;
-  if (disabled) otherStyle = styles.disabled;
+    const onPress = () => {
+        navigator?.showBottom?.({
+            screen: DatePicker,
+            params: {
+                dragDisabled: true,
+                minDate,
+                maxDate,
+                format,
+                title,
+                selectedDate: selected,
+                onClose,
+                minuteArray,
+                onSelected: (dateSelected) => {
+                    onSelected?.(dateSelected);
+                    setSelected(dateSelected);
+                },
+            },
+        });
+    };
+    let otherStyle = {};
+    if (error) otherStyle = styles.error;
+    if (disabled) otherStyle = styles.disabled;
 
-  return (
-    <TouchableOpacity
-      disabled={disabled}
-      onPress={onPress}
-      style={[styles.container, ValueUtil.extractStyle(style), otherStyle]}>
-      <Text.Paragraph
-        style={[
-          styles.defaultText,
-          ValueUtil.extractStyle(textStyle),
-          isEmpty(selected) ? {color: Colors.black_09} : {},
-        ]}>
-        {isEmpty(selected) ? format : selected}
-      </Text.Paragraph>
-      {showRightIcon ? (
-        <Image
-          source={icon || IconSource.ic_calendar}
-          style={[styles.icon, ValueUtil.extractStyle(iconStyle)]}
-        />
-      ) : (
-        <View />
-      )}
-    </TouchableOpacity>
-  );
+    return (
+        <TouchableOpacity
+            disabled={disabled}
+            onPress={onPress}
+            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>
+            {showRightIcon ? (
+                <Image
+                    source={icon || IconSource.ic_calendar}
+                    style={[styles.icon, ValueUtil.extractStyle(iconStyle)]}
+                />
+            ) : (
+                <View />
+            )}
+        </TouchableOpacity>
+    );
 };
 
 DatePickerInput.propTypes = {
-  defaultDate: PropTypes.string,
-  format: PropTypes.oneOf(['hh:mm', 'MM/YYYY', 'dd/MM', 'dd/MM/YYYY']),
-  icon: PropTypes.any,
-  maxDate: PropTypes.string,
-  minDate: PropTypes.string,
-  navigator: PropTypes.object,
-  onClose: PropTypes.func,
-  onSelected: PropTypes.func,
-  iconStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  textStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  error: PropTypes.bool,
-  disabled: PropTypes.bool,
-  minuteArray: PropTypes.arrayOf(PropTypes.string),
-  showRightIcon: PropTypes.bool,
-  title: PropTypes.string,
+    defaultDate: PropTypes.string,
+    format: PropTypes.oneOf(['hh:mm', 'MM/YYYY', 'dd/MM', 'dd/MM/YYYY']),
+    icon: PropTypes.any,
+    maxDate: PropTypes.string,
+    minDate: PropTypes.string,
+    navigator: PropTypes.object,
+    onClose: PropTypes.func,
+    onSelected: PropTypes.func,
+    iconStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    textStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    error: PropTypes.bool,
+    disabled: PropTypes.bool,
+    minuteArray: PropTypes.arrayOf(PropTypes.string),
+    showRightIcon: PropTypes.bool,
+    title: PropTypes.string,
 };
 DatePickerInput.defaultProps = {
-  showRightIcon: true,
+    showRightIcon: true,
 };
 
 export default DatePickerInput;
 
 const styles = StyleSheet.create({
-  icon: {
-    width: 16,
-    height: 16,
-    resizeMode: 'contain',
-    tintColor: Colors.black_09,
-  },
-  container: {
-    flexDirection: 'row',
-    height: 42,
-    borderRadius: Radius.S,
-    borderColor: Colors.black_06,
-    borderWidth: 1,
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: 12,
-    backgroundColor: Colors.black_01,
-  },
-  error: {
-    borderColor: Colors.red_03,
-  },
-  defaultText: {
-    // fontSize: 14
-  },
-  disabled: {
-    backgroundColor: Colors.black_05,
-    borderWidth: 0,
-  },
+    icon: {
+        width: 16,
+        height: 16,
+        resizeMode: 'contain',
+        tintColor: Colors.black_09,
+    },
+    container: {
+        flexDirection: 'row',
+        height: 42,
+        borderRadius: 4,
+        borderColor: Colors.black_06,
+        borderWidth: 1,
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 12,
+        backgroundColor: Colors.black_01,
+    },
+    error: {
+        borderColor: Colors.red_05,
+    },
+    defaultText: {
+        // fontSize: 14
+    },
+    disabled: {
+        backgroundColor: Colors.black_05,
+        borderWidth: 0,
+    },
 });