PickerDate.js 3.99 KB
Newer Older
Giang Tran committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
import React, {Component} from 'react';
import {StyleSheet, View, Image, Text} from 'react-native';
import DatePicker from 'react-native-datepicker';
import {
  WIDTHXD,
  HEIGHTXD,
  getFontXD,
  WIDTHXDICON,
} from '../../Config/Functions';
import R from '../../assets/R';
import Icon from 'react-native-vector-icons/AntDesign';

/**
 * This Function to choice date
 * @callback onValueChange value of date you choice
 * @param value value of date you choice
 * @param containerStyle custom containerStyle of view
 * @param textStyle style value of date
 * @param placeholder value of placeholder
 * @param width width of datePicker
 * @param date value of date you choice
 * @param enableEdit status allow edit
 * other you can make minDate,maxDate... with props of libary react-native-datepicker
 */
class PickerDate extends Component {
  state = {
    date: new Date(),
  };

  /**
   * This Function to set date
   * @param date value of date you choice
   */
  onChangeDate = (date) => {
    this.setState({date});
  };

  render() {
    const {
Giang Tran committed
40
      valueString,
Giang Tran committed
41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
      onValueChange,
      value,
      containerStyle,
      textStyle,
      placeholder,
      width,
      disabled,
      title,
    } = this.props;
    return (
      <View style={{marginVertical: 5}}>
        <Text
          style={{
            fontSize: getFontXD(42),
            color: R.colors.color777,
            marginBottom: 5,
          }}>
          {title}
        </Text>
        <View
          style={[
            styles.inputBox,
            containerStyle !== null && containerStyle,
            width && {width},
          ]}>
          {disabled ? (
            <View
              style={{
                flexDirection: 'row',
Giang Tran committed
70
                justifyContent: 'space-between',
Giang Tran committed
71
                alignItems: 'center',
Giang Tran committed
72 73
                flex: 1,
                paddingHorizontal: 10,
Giang Tran committed
74 75 76 77 78 79 80 81
              }}>
              <Text
                style={{
                  ...styles.textDate,
                  ...textStyle,
                  paddingVertical: 0,
                  marginRight: WIDTHXD(15),
                }}>
Giang Tran committed
82
                {valueString}
Giang Tran committed
83
              </Text>
Giang Tran committed
84

Giang Tran committed
85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150
              <Icon name={'calendar'} size={22} color={'#929292'} />
            </View>
          ) : (
            <DatePicker
              confirmBtnText={'OK'}
              cancelBtnText={'Cancel'}
              locale="vi"
              style={[
                {paddingHorizontal: 0, borderWidth: 0, width: WIDTHXD(960)},
                width && {width: width - WIDTHXD(30)},
              ]}
              date={value}
              mode="date"
              placeholder={placeholder !== null && placeholder}
              format="DD/MM/YYYY" // you can change format of date in date picker
              git
              iconComponent={
                <Icon name={'calendar'} size={22} color={'#929292'} />
              } // to custom icon
              customStyles={{
                dateInput: {
                  flex: 5,
                  marginLeft: WIDTHXD(0),
                  borderWidth: 0,
                  color: R.colors.black0,
                },
                dateText: {
                  ...styles.textDate,
                },
              }}
              onDateChange={(date) => {
                this.onChangeDate(date);
                onValueChange && onValueChange(date); // return value of date, Fuction from parent
              }}
              {...this.props}
            />
          )}
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  inputBox: {
    borderRadius: WIDTHXD(20),

    height: HEIGHTXD(120),
    borderWidth: 0.3,
    borderColor: R.colors.borderGray,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    // paddingVertical: HEIGHTXD(17),
    backgroundColor: 'white',
  },
  textDate: {
    fontSize: getFontXD(42),
    color: R.colors.black0,
    alignSelf: 'flex-start',
    paddingLeft: WIDTHXD(16),
    paddingVertical: HEIGHTXD(25),
  },
});

export default React.memo(PickerDate);