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

package/datePicker/DatePicker.js

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

package/datePicker/DatePickerInput.js

@@ -1,139 +1,136 @@
 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,
-} from '@momo-kits/core';
+  IconSource,
+  TouchableOpacity,
+  Text,
+  Colors,
+  ValueUtil,
+  Image,
+  Radius,
+} from '@momo-kits/core-v2';
 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.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>
-    );
+  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>
+  );
 };
 
 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: 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,
-    },
+  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,
+  },
 });