@momo-kits/date-picker 0.73.3-beta.5 → 0.74.2-react-native.2

package/datePicker/DatePickerInput.js

@@ -1,136 +0,0 @@
-import PropTypes from 'prop-types';
-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';
-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,
-}) => {
-  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;
-
-  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,
-};
-DatePickerInput.defaultProps = {
-  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,
-  },
-});

package/datePicker/ListPicker.js

@@ -1,208 +0,0 @@
-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';
-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.Paragraph
-        style={{
-          fontWeight: 'bold',
-          color: Colors.pink_05,
-        }}>
-        {SwitchLanguage.save}
-      </Text.Paragraph>
-    </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: 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',
-  },
-});

package/datePicker/WheelPicker.js

@@ -1,328 +0,0 @@
-import React, {Component} from 'react';
-import {Dimensions, View} from 'react-native';
-import {LinearGradient, Text, Colors, ScaleSize} from '@momo-kits/core-v2';
-import ScrollCustom from './custom/ScrollCustom';
-import DatePickerHelper from './helper/DatePickerHelper';
-
-const widthScreen = Dimensions.get('window').width;
-// var heightScreen = Dimensions.get('window').height;
-
-export default class WheelPicker extends Component {
-  constructor(props) {
-    super(props);
-    const {heightItem, value: valueItem, numberItem, arrayValue} = this.props;
-    const value = valueItem === -1 ? 0 : valueItem;
-    this.heightItem = heightItem;
-    this.currentPosition = value * this.heightItem;
-    this.prePosition = this.currentPosition;
-    this.numberItem = this.convertNumberItem(numberItem);
-    this.isDragging = false;
-    this.state = {
-      // height: 100,
-      width: widthScreen / 3,
-      value,
-      items: arrayValue,
-    };
-  }
-
-  componentDidMount() {
-    const {value} = this.props;
-    console.log(value);
-    this.scrollToPosition(value);
-  }
-
-  componentWillUnmounted() {
-    clearTimeout(this.timer);
-    clearTimeout(this.timerUpdate);
-  }
-
-  scrollToPosition(position) {
-    this.currentPosition = position * this.heightItem;
-    clearTimeout(this.timer);
-    this.timer = setTimeout(() => {
-      if (this.ScrollWheelPicker && this.ScrollWheelPicker.scrollTo) {
-        this.ScrollWheelPicker.scrollTo({y: this.currentPosition});
-      }
-    }, 500);
-  }
-
-  update(param) {
-    this.setState(
-      {
-        items: param.arrayValue,
-        value: param.value,
-      },
-      () => {
-        clearTimeout(this.timerUpdate);
-        this.timerUpdate = setTimeout(() => {
-          this.scrollToPosition(param.value);
-        }, 100);
-      },
-    );
-  }
-
-  setScrollEnabled(enable) {
-    if (
-      this.ScrollWheelPicker &&
-      this.ScrollWheelPicker.setScrollEnabled &&
-      !this.isDragging
-    ) {
-      this.ScrollWheelPicker.setScrollEnabled(enable);
-    }
-  }
-
-  onValueChange() {
-    if (this.currentPosition != null) {
-      const {value} = this.state;
-      const {onValueChange, onEndDrag, refName} = this.props;
-      const position = this.parseInteger(
-        this.currentPosition / this.heightItem,
-      );
-      if (position !== value) {
-        this.setState(
-          {
-            value: position,
-          },
-          () => {
-            this.scrollToPosition(position);
-          },
-        );
-      }
-      if (onValueChange) {
-        onValueChange(position);
-      }
-      if (onEndDrag) {
-        onEndDrag(refName);
-      }
-    }
-  }
-
-  parseInteger(number) {
-    const mode = (number * 10) % 10;
-    if (mode > 5) {
-      return parseInt(number, 10) + 1;
-    }
-    return parseInt(number, 10);
-  }
-
-  checkEvenNumber(number) {
-    const mode = number % 2;
-    if (mode > 0) {
-      return false;
-    }
-    return true;
-  }
-
-  convertNumberItem(number) {
-    let numberItem = number;
-    if (this.checkEvenNumber(numberItem)) {
-      numberItem += 1;
-    }
-
-    return numberItem;
-  }
-
-  renderHiddenItem(numberItem, heightItem, offset = 0) {
-    const numberItemTop = parseInt(numberItem / 2, 10) - offset;
-    const view = [];
-    // eslint-disable-next-line no-plusplus
-    for (let i = 0; i < numberItemTop; i++) {
-      view.push(
-        <View
-          key={`itemTop${i}`}
-          style={{
-            flex: 1,
-            height: heightItem,
-          }}
-        />,
-      );
-    }
-
-    return view;
-  }
-
-  onStartDrag(rawPosition) {
-    this.currentPosition = rawPosition;
-    const {onBeginDrag, refName} = this.props;
-    this.isDragging = true;
-    if (onBeginDrag) {
-      onBeginDrag(refName);
-    }
-    this.createCheckDragging();
-  }
-
-  onEndDrag() {
-    if (this.isDragging) {
-      this.isDragging = false;
-      this.onValueChange();
-    }
-    if (this.checkEndDrag) {
-      clearInterval(this.checkEndDrag);
-    }
-  }
-
-  createCheckDragging() {
-    this.checkEndDrag = setInterval(() => {
-      this.checkPosition();
-    }, 50);
-  }
-
-  checkPosition() {
-    if (this.currentPosition === this.prePosition) {
-      this.onEndDrag();
-    } else {
-      this.prePosition = this.currentPosition;
-    }
-  }
-
-  render() {
-    const numberHiddenItem = parseInt(this.numberItem / 2, 10);
-    const positionCenter = parseInt(this.heightItem * numberHiddenItem, 10);
-    const heightContain = parseInt(this.heightItem * this.numberItem, 10);
-    const {items, value, width} = this.state;
-    const {preFix, bottomOffset} = this.props;
-    return (
-      <View
-        style={{
-          flex: 1,
-          height: heightContain + 40,
-        }}>
-        <Text.Description2
-          weight="semibold"
-          style={{
-            color: Colors.black_17,
-            marginLeft: 6,
-            marginBottom: 3,
-          }}>
-          {DatePickerHelper.capitalizeFirstLetter(preFix || '')}
-        </Text.Description2>
-        <View
-          style={{
-            flex: 1,
-            height: heightContain,
-            marginHorizontal: 6,
-            paddingBottom: 20,
-            borderWidth: 1,
-            borderColor: Colors.black_04,
-            borderRadius: 8,
-            overflow: 'hidden',
-          }}
-          onLayout={event => {
-            if (
-              event &&
-              event.nativeEvent &&
-              event.nativeEvent.layout &&
-              event.nativeEvent.layout.height &&
-              event.nativeEvent.layout.width
-            ) {
-              this.setState({
-                // height: event.nativeEvent.layout.height,
-                width: event.nativeEvent.layout.width,
-              });
-            }
-          }}>
-          <View
-            style={{
-              position: 'absolute',
-              top: positionCenter,
-              left: 0,
-              height: this.heightItem, // + 12,
-              width,
-              backgroundColor: '#f2f8ff',
-            }}
-          />
-
-          <ScrollCustom
-            ref={refName => {
-              this.ScrollWheelPicker = refName;
-            }}
-            onScrollEndDrag={event => {
-              if (
-                event &&
-                event.nativeEvent &&
-                event.nativeEvent.contentOffset &&
-                event.nativeEvent.contentOffset.y != null &&
-                !this.isDragging
-              ) {
-                this.onStartDrag(event.nativeEvent.contentOffset.y);
-              }
-            }}
-            onScroll={event => {
-              if (
-                event &&
-                event.nativeEvent &&
-                event.nativeEvent.contentOffset &&
-                event.nativeEvent.contentOffset.y != null
-              ) {
-                this.currentPosition = event.nativeEvent.contentOffset.y;
-              }
-            }}>
-            {this.renderHiddenItem(this.numberItem, this.heightItem)}
-            {items.map((valueItem, index) => (
-              <View
-                // eslint-disable-next-line react/no-array-index-key
-                key={index}
-                style={{
-                  flex: 1,
-                  height: this.heightItem,
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                }}>
-                <Text.Action2
-                  weight={value === index ? 'bold' : 'semibold'}
-                  style={{
-                    color: value === index ? Colors.black_17 : Colors.black_12,
-
-                    fontSize: 15,
-                  }}>
-                  {valueItem}
-                  {/* {reversePreFix ? `${valueItem} ${preFix}` : `${preFix} ${valueItem}`} */}
-                </Text.Action2>
-              </View>
-            ))}
-            {this.renderHiddenItem(
-              this.numberItem,
-              this.heightItem,
-              bottomOffset,
-            )}
-          </ScrollCustom>
-          <LinearGradient
-            pointerEvents="none"
-            locations={[0.2, 0.85]}
-            colors={['rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 0)']}
-            style={{
-              height: this.heightItem * 2,
-              width,
-              position: 'absolute',
-              top: 0,
-              overflow: 'hidden',
-            }}
-          />
-          <LinearGradient
-            pointerEvents="none"
-            locations={[0, 0.85]}
-            colors={['rgba(255, 255, 255, 0)', 'rgba(255, 255, 255, 1)']}
-            style={{
-              height: this.heightItem * 2,
-              width,
-              position: 'absolute',
-              bottom: 0,
-              overflow: 'hidden',
-            }}
-          />
-        </View>
-      </View>
-    );
-  }
-}
-
-WheelPicker.defaultProps = {
-  arrayValue: [],
-  preFix: '',
-  value: 0,
-  heightItem: 42,
-  numberItem: 5,
-  bottomOffset: 0,
-};
-
-module.exports = WheelPicker;