@momo-kits/date-picker 0.0.65-alpha.20 → 0.0.65-alpha.23

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,
+    },
 });

package/datePicker/ListPicker.js

@@ -1,208 +1,197 @@
-import React, {Component} from 'react';
-import {Dimensions, StyleSheet, View} from 'react-native';
+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-v2';
+    Button,
+    IconSource,
+    TouchableOpacity,
+    Text,
+    Colors,
+    Image,
+    DeviceUtils,
+    SwitchLanguage,
+} from '@momo-kits/core';
 import WheelPicker from './WheelPicker';
 
-const {isIphoneX} = DeviceUtils;
+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);
+    constructor(props) {
+        super(props);
+        this.data = 0;
     }
-  };
 
-  onChangeValue = value => {
-    const {callback} = this.props;
-    if (typeof callback === 'function') {
-      callback(value);
-    }
-  };
+    hide = () => {
+        const { onClose, requestClose } = this.props;
+        if (requestClose && typeof requestClose === 'function') {
+            requestClose(() => {
+                if (onClose && typeof onClose === 'function') {
+                    onClose();
+                }
+            });
+        }
+    };
 
-  onPressClear = () => {
-    this.hide();
-  };
+    onBeginDrag = () => {
+        if (this.refs.picker) {
+            this.refs.picker.setScrollEnabled(false);
+        }
+    };
 
-  onPressChoose = () => {
-    this.onChangeValue(this.data);
-    this.hide();
-  };
+    onEndDrag = () => {
+        if (this.refs.picker) {
+            this.refs.picker.setScrollEnabled(true);
+        }
+    };
 
-  renderRight = () => (
-    <TouchableOpacity onPress={this.onPressChoose}>
-      <Text.Paragraph
-        style={{
-          fontWeight: 'bold',
-          color: Colors.pink_05,
-        }}>
-        {SwitchLanguage.save}
-      </Text.Paragraph>
-    </TouchableOpacity>
-  );
+    onChangeValue = (value) => {
+        const { callback } = this.props;
+        if (typeof callback === 'function') {
+            callback(value);
+        }
+    };
 
-  renderLeftIcon = () => (
-    <TouchableOpacity onPress={() => this.hide()}>
-      <Image
-        source={IconSource.ic_close_x_24}
-        style={{
-          width: 25,
-          height: 25,
-          tintColor: Colors.black_17,
-        }}
-      />
-    </TouchableOpacity>
-  );
+    onPressClear = () => {
+        this.hide();
+    };
 
-  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>
-    );
-  }
+    onPressChoose = () => {
+        this.onChangeValue(this.data);
+        this.hide();
+    };
 
-  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>
+    renderRight = () => (
+        <TouchableOpacity onPress={this.onPressChoose}>
+            <Text.Title style={{ fontWeight: 'bold', color: Colors.pink_05 }}>
+                {SwitchLanguage.save}
+            </Text.Title>
+        </TouchableOpacity>
     );
-  }
 
-  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}
+    renderLeftIcon = () => (
+        <TouchableOpacity onPress={() => this.hide()}>
+            <Image
+                source={IconSource.ic_close_x_24}
+                style={{ width: 25, height: 25, tintColor: Colors.black_17 }}
             />
-          </View>
-        )}
-      </View>
+        </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',
-  },
+    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',
+    },
 });