tuya-panel-kit/lib/components/date-picker/datePicker.js

a functional component library for developing tuya device panels!

Object.defineProperty(exports, "__esModule", {
  value: true
});
var _jsxFileName = 'src/components/date-picker/datePicker.js';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactNative = require('react-native');

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _en_US = require('./locale/en_US');

var _en_US2 = _interopRequireDefault(_en_US);

var _zh_CN = require('./locale/zh_CN');

var _zh_CN2 = _interopRequireDefault(_zh_CN);

var _pickerView = require('../picker-view');

var _pickerView2 = _interopRequireDefault(_pickerView);

var _utils = require('../../utils');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var cx = _utils.RatioUtils.convertX;
var getPropsFromStyle = _utils.ThemeUtils.getPropsFromStyle;


var DATETIME = 'datetime';
var DATE = 'date';
var TIME = 'time';
var MONTH = 'month';
var YEAR = 'year';
var ONEDAY = 24 * 60 * 60 * 1000;

function plusZero(n) {
  return n < 10 ? '0' + n : '' + n;
}

var capitalized = function capitalized(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
};

var sortColumnsAndValue = function sortColumnsAndValue(dateSortKeys, cols, value) {
  if (!dateSortKeys || !Array.isArray(dateSortKeys) || dateSortKeys.length !== 3) {
    dateSortKeys && console.warn('dateSortKeys: ' + JSON.stringify(dateSortKeys) + ' \u4E0D\u5408\u6CD5\uFF0C\u5FC5\u987B\u4E3A\u957F\u5EA6\u4E3A3\u7684\u6570\u7EC4\uFF0C\u4E14\u503C\u5FC5\u987B\u4E3A\'year\' || \'month\' || \'day');
    return { cols: cols, value: value };
  }
  var sortedCols = [];
  var sortedValue = [];
  dateSortKeys.forEach(function (k) {
    var colIndex = cols.findIndex(function (col) {
      return col.key === k;
    });
    colIndex !== -1 && sortedCols.push(cols[colIndex]);
    colIndex !== -1 && sortedValue.push(value[colIndex]);
  });
  return { cols: sortedCols, value: sortedValue };
};

var formatColArray = function formatColArray(arrLength, min, labelLocal, isPlusZero) {
  return Array.from(Array(arrLength), function (v, k) {
    var finalLabelLocal = '' + (labelLocal || '');
    var finalLabelMain = isPlusZero ? '' + plusZero(k + min) : '' + (k + min);
    var label = '' + finalLabelMain + finalLabelLocal;
    return { value: '' + (k + min), label: label };
  });
};

var getDaysInMonth = function getDaysInMonth(date) {
  return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
};

var setMonth = function setMonth(date, month) {
  var days = getDaysInMonth(new Date(date.getFullYear(), month));
  date.setDate(Math.min(date.getDate(), days));
  date.setMonth(month);
};

var DatePicker = function (_React$Component) {
  _inherits(DatePicker, _React$Component);

  function DatePicker(props) {
    _classCallCheck(this, DatePicker);

    var _this = _possibleConstructorReturn(this, (DatePicker.__proto__ || Object.getPrototypeOf(DatePicker)).call(this, props));

    _this.onValueChange = function (value, index, key) {
      var newValue = _this.getNewDate(value, index, key);
      if (!('date' in _this.props)) {
        _this.setState({ date: newValue });
      }
      if (_this.props.onDateChange) {
        _this.props.onDateChange(newValue);
      }
      if (_this.props.onValueChange) {
        _this.props.onValueChange(value, index);
      }
    };

    _this.getNewDate = function (values, index, key) {
      var value = parseInt(values, 10);
      var mode = _this.props.mode;

      var newValue = new Date(_this.getDate());
      if (mode === DATETIME || mode === DATE || mode === YEAR || mode === MONTH) {
        switch (key) {
          case 'year':
            newValue.setFullYear(value);
            break;
          case 'month':
            setMonth(newValue, value - 1);
            break;
          case 'day':
            newValue.setDate(value);
            break;
          case 'hour':
            _this.setHours(newValue, value);
            break;
          case 'minute':
            newValue.setMinutes(value);
            break;
          case 'ampm':
            _this.setAmPm(newValue, value);
            break;
          default:
            break;
        }
      } else if (mode === TIME) {
        switch (key) {
          case 'hour':
            _this.setHours(newValue, value);
            break;
          case 'minute':
            newValue.setMinutes(value);
            break;
          case 'ampm':
            _this.setAmPm(newValue, value);
            break;
          default:
            break;
        }
      }
      return _this.getRealDate(newValue);
    };

    _this.getTimeColsData = function (date) {
      var minMinute = 0;
      var maxMinute = 59;
      var minHour = 0;
      var maxHour = 23;
      var _this$props = _this.props,
          mode = _this$props.mode,
          use12Hours = _this$props.use12Hours,
          isPlusZero = _this$props.isPlusZero,
          isAmpmFirst = _this$props.isAmpmFirst,
          minDate = _this$props.minDate,
          maxDate = _this$props.maxDate;
      var locale = _this.locale;

      var minDateMinute = minDate.getMinutes();
      var maxDateMinute = maxDate.getMinutes();
      var minDateHour = minDate.getHours();
      var maxDateHour = maxDate.getHours();
      var nowHour = date.getHours();
      if (mode === DATETIME) {
        var year = date.getFullYear();
        var month = date.getMonth();
        var day = date.getDate();
        var minDateYear = minDate.getFullYear();
        var maxDateYear = maxDate.getFullYear();
        var minDateMonth = minDate.getMonth();
        var maxDateMonth = maxDate.getMonth();
        var minDateDay = minDate.getDate();
        var maxDateDay = maxDate.getDate();
        if (minDateYear === year && minDateMonth === month && minDateDay === day) {
          minHour = minDateHour;
          if (minDateHour === nowHour) {
            minMinute = minDateMinute;
          }
        }
        if (maxDateYear === year && maxDateMonth === month && maxDateDay === day) {
          maxHour = maxDateHour;
          if (maxDateHour === nowHour) {
            maxMinute = maxDateMinute;
          }
        }
      } else {
        minHour = minDateHour;
        if (minDateHour === nowHour) {
          minMinute = minDateMinute;
        }
        maxHour = maxDateHour;
        if (maxDateHour === nowHour) {
          maxMinute = maxDateMinute;
        }
      }
      var ampmCols = [];

      if (use12Hours) {
        var ampm = [{ value: '0', label: locale.am }, { value: '1', label: locale.pm }];
        ampmCols = [{ key: 'ampm', values: ampm }];
      }
      var hour = [];
      if (minHour === 0 && maxHour === 0 || minHour !== 0 && maxHour !== 0) {
        minHour = _this.getRealHour(minHour);
      } else if (minHour === 0 && use12Hours) {
        minHour = 1;
        hour.push({ value: '0', label: locale.hour ? '12' + locale.hour : '12' });
      }
      maxHour = _this.getRealHour(maxHour);
      var hours = formatColArray(maxHour - minHour + 1, minHour, locale.hour || '', isPlusZero);
      hour = hour.concat(hours);
      var hourCols = { key: 'hour', values: hour };
      var nowMinute = date.getMinutes();
      var minute = formatColArray(maxMinute - minMinute + 1, minMinute, locale.minute || '', isPlusZero);
      var minuteCols = { key: 'minute', values: minute };

      var cols = !isAmpmFirst ? [hourCols, minuteCols].concat(ampmCols) : ampmCols.concat([hourCols, minuteCols]);
      return { cols: cols, nowMinute: nowMinute, nowHour: nowHour };
    };

    _this.getRealDate = function (date) {
      var _this$props2 = _this.props,
          mode = _this$props2.mode,
          minDate = _this$props2.minDate,
          maxDate = _this$props2.maxDate;

      switch (mode) {
        case DATETIME:
          if (date < minDate) {
            return new Date(+minDate);
          }
          if (date > maxDate) {
            return new Date(+maxDate);
          }
          break;
        case TIME:
          {
            var maxHour = maxDate.getHours();
            var maxMinutes = maxDate.getMinutes();
            var minHour = minDate.getHours();
            var minMinutes = minDate.getMinutes();
            var hour = date.getHours();
            var minutes = date.getMinutes();
            if (hour < minHour || hour === minHour && minutes < minMinutes) {
              return new Date(+minDate);
            }
            if (hour > maxHour || hour === maxHour && minMinutes > maxMinutes) {
              return new Date(+maxDate);
            }
          }
          break;
        default:
          if (date >= +maxDate + ONEDAY) {
            return new Date(+maxDate);
          }
          if (+date + ONEDAY <= minDate) {
            return new Date(+minDate);
          }
          break;
      }
      return date;
    };

    _this.getDateColsData = function () {
      var _this$props3 = _this.props,
          mode = _this$props3.mode,
          maxDate = _this$props3.maxDate,
          minDate = _this$props3.minDate,
          isPlusZero = _this$props3.isPlusZero;
      var locale = _this.locale;

      var date = _this.getDate();
      var nowYear = date.getFullYear();
      var nowMonth = date.getMonth();
      var maxDateYear = maxDate.getFullYear();
      var minDateYear = minDate.getFullYear();
      var minDateMonth = minDate.getMonth();
      var maxDateMonth = maxDate.getMonth();
      var minDateDay = minDate.getDate();
      var maxDateDay = maxDate.getDate();
      var year = formatColArray(maxDateYear - minDateYear + 1, minDateYear, locale.year);
      var yearCol = { key: 'year', values: year };
      if (mode === YEAR) {
        return [yearCol];
      }

      var minMonth = 0;
      var maxMonth = 11;
      if (minDateYear === nowYear) {
        minMonth = minDateMonth;
      }
      if (maxDateYear === nowYear) {
        maxMonth = maxDateMonth;
      }
      var month = formatColArray(maxMonth - minMonth + 1, minMonth + 1, locale.month, isPlusZero);
      var monthCol = { key: 'month', values: month };
      if (mode === MONTH) {
        return [yearCol, monthCol];
      }

      var minDay = 1;
      var maxDay = getDaysInMonth(date);
      if (minDateYear === nowYear && minDateMonth === nowMonth) {
        minDay = minDateDay;
      }
      if (maxDateYear === nowYear && maxDateMonth === nowMonth) {
        maxDay = maxDateDay;
      }
      var day = formatColArray(maxDay - minDay + 1, minDay, locale.day, isPlusZero);
      var dayCol = { key: 'day', values: day };

      return [yearCol, monthCol, dayCol];
    };

    _this.getIndexAndCols = function () {
      var _this$props4 = _this.props,
          mode = _this$props4.mode,
          use12Hours = _this$props4.use12Hours,
          isAmpmFirst = _this$props4.isAmpmFirst,
          isTimeFirst = _this$props4.isTimeFirst,
          dateSortKeys = _this$props4.dateSortKeys;

      var date = _this.getDate();
      var cols = [];
      var value = [];

      if (mode === YEAR) {
        return {
          cols: _this.getDateColsData(),
          value: ['' + date.getFullYear()]
        };
      }
      if (mode === MONTH) {
        var unSortDateCols = _this.getDateColsData();
        var unSortDateValue = ['' + date.getFullYear(), '' + (date.getMonth() + 1)];
        return sortColumnsAndValue(dateSortKeys, unSortDateCols, unSortDateValue);
      }
      if (mode === DATE) {
        var _unSortDateCols = _this.getDateColsData();
        var _unSortDateValue = ['' + date.getFullYear(), '' + (date.getMonth() + 1), '' + date.getDate()];
        return sortColumnsAndValue(dateSortKeys, _unSortDateCols, _unSortDateValue);
      }
      var time = _this.getTimeColsData(date);
      var realhour = time.nowHour;
      var timeValue = ['' + realhour, '' + time.nowMinute];
      if (use12Hours) {
        realhour = time.nowHour === 0 ? 12 : time.nowHour > 12 ? time.nowHour - 12 : time.nowHour;
        timeValue[0] = '' + realhour;
        var ampmStr = '' + (time.nowHour >= 12 ? 1 : 0);
        if (isAmpmFirst) {
          timeValue.splice(0, 0, ampmStr);
        } else {
          timeValue.push(ampmStr);
        }
      }
      if (mode === DATETIME) {
        var _unSortDateCols2 = _this.getDateColsData();
        var _unSortDateValue2 = ['' + date.getFullYear(), '' + (date.getMonth() + 1), '' + date.getDate()];

        var _sortColumnsAndValue = sortColumnsAndValue(dateSortKeys, _unSortDateCols2, _unSortDateValue2),
            sortDateCols = _sortColumnsAndValue.cols,
            sortDateValue = _sortColumnsAndValue.value;

        return {
          cols: isTimeFirst ? [].concat(_toConsumableArray(time.cols), _toConsumableArray(sortDateCols)) : [].concat(_toConsumableArray(sortDateCols), _toConsumableArray(time.cols)),
          value: isTimeFirst ? [].concat(timeValue, _toConsumableArray(sortDateValue)) : [].concat(_toConsumableArray(sortDateValue), timeValue)
        };
      }
      if (mode === TIME) {
        return {
          cols: time.cols,
          value: [].concat(timeValue)
        };
      }
      return {
        cols: cols,
        value: value
      };
    };

    _this.i18n = function (locale) {
      if (typeof locale === 'string') {
        _this.locale = locale === 'cn' ? _zh_CN2.default : _en_US2.default;
      } else if (typeof locale === 'object') {
        _this.locale = _extends({}, _en_US2.default, locale);
      } else {
        _this.locale = _en_US2.default;
      }
    };

    _this.state = {
      date: props.date || props.defaultDate
    };
    _this.i18n(props.locale);
    return _this;
  }

  _createClass(DatePicker, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if ('date' in nextProps) {
        this.setState({ date: nextProps.date || nextProps.defaultDate });
      }
      this.i18n(nextProps.locale);
    }
  }, {
    key: 'getDate',
    value: function getDate() {
      return this.getRealDate(this.state.date || this.props.minDate);
    }
  }, {
    key: 'getRealHour',
    value: function getRealHour(hour) {
      if (this.props.use12Hours) {
        var resultHours = hour;
        if (hour === 0) {
          resultHours = 12;
        }
        if (hour > 12) {
          resultHours -= 12;
        }
        return resultHours;
      }
      return hour;
    }
  }, {
    key: 'setHours',
    value: function setHours(date, hour) {
      if (this.props.use12Hours) {
        var dh = date.getHours();
        var nhour = hour;
        nhour = dh >= 12 ? hour + 12 : hour;
        nhour = nhour >= 24 ? 0 : nhour;
        date.setHours(nhour);
      } else {
        date.setHours(hour);
      }
    }
  }, {
    key: 'setAmPm',
    value: function setAmPm(date, index) {
      if (index === 0) {
        date.setTime(+date - ONEDAY / 2);
      } else {
        date.setTime(+date + ONEDAY / 2);
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _getIndexAndCols = this.getIndexAndCols(),
          value = _getIndexAndCols.value,
          cols = _getIndexAndCols.cols;

      var pickerFontSize = cx(30);
      if (cols.length < 3) {
        pickerFontSize = cx(30);
      } else if (cols.length === 3) {
        pickerFontSize = cx(27);
      } else {
        pickerFontSize = cx(24);
      }

      var _props = this.props,
          locale = _props.locale,
          mode = _props.mode,
          use12Hours = _props.use12Hours,
          minDate = _props.minDate,
          maxDate = _props.maxDate,
          onDateChange = _props.onDateChange,
          onValueChange = _props.onValueChange,
          isAmpmFirst = _props.isAmpmFirst,
          date = _props.date,
          defaultDate = _props.defaultDate,
          style = _props.style,
          loop = _props.loop,
          pickerFontColor = _props.pickerFontColor,
          accessibilityLabel = _props.accessibilityLabel,
          PickerProps = _objectWithoutProperties(_props, ['locale', 'mode', 'use12Hours', 'minDate', 'maxDate', 'onDateChange', 'onValueChange', 'isAmpmFirst', 'date', 'defaultDate', 'style', 'loop', 'pickerFontColor', 'accessibilityLabel']);

      var multiStyle = {
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: 5,
        paddingRight: 5,
        backgroundColor: '#fff',
        height: 216
      };
      var bgColor = getPropsFromStyle('backgroundColor', style);
      return _react2.default.createElement(
        _reactNative.View,
        { style: [multiStyle, style], __source: {
            fileName: _jsxFileName,
            lineNumber: 556
          }
        },
        cols.map(function (pItem, pindex) {
          return _react2.default.createElement(
            _pickerView2.default,
            _extends({
              theme: { fontColor: pickerFontColor, fontSize: pickerFontSize }
            }, PickerProps, {
              style: { flex: 1, backgroundColor: bgColor || '#fff' },
              key: pItem.key,
              accessibilityLabel: accessibilityLabel + '_' + capitalized(pItem.key),

              loop: pItem.key !== 'ampm' && loop,
              selectedItemTextColor: pickerFontColor,
              itemStyle: _reactNative.StyleSheet.flatten([{ color: pickerFontColor }, PickerProps.itemStyle]),
              selectedValue: value[pindex],
              onValueChange: function onValueChange(dateValue) {
                return _this2.onValueChange(dateValue, pindex, pItem.key);
              },
              __source: {
                fileName: _jsxFileName,
                lineNumber: 558
              }
            }),
            pItem.values.map(function (item) {
              return _react2.default.createElement(_pickerView2.default.Item, {
                key: pItem.key + '_' + item.value,
                value: item.value,
                label: item.label,
                __source: {
                  fileName: _jsxFileName,
                  lineNumber: 572
                }
              });
            })
          );
        })
      );
    }
  }]);

  return DatePicker;
}(_react2.default.Component);

DatePicker.propTypes = {
  accessibilityLabel: _propTypes2.default.string,

  locale: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),

  mode: _propTypes2.default.string,

  loop: _propTypes2.default.bool,

  use12Hours: _propTypes2.default.bool,

  isPlusZero: _propTypes2.default.bool,

  minDate: _propTypes2.default.object,

  maxDate: _propTypes2.default.object,

  onDateChange: _propTypes2.default.func,

  onValueChange: _propTypes2.default.func,

  isAmpmFirst: _propTypes2.default.bool,

  isTimeFirst: _propTypes2.default.bool,

  date: _propTypes2.default.object,

  defaultDate: _propTypes2.default.object,

  style: _reactNative.ViewPropTypes.style,

  pickerFontColor: _propTypes2.default.string,

  dateSortKeys: _propTypes2.default.array
};
DatePicker.defaultProps = {
  accessibilityLabel: 'DatePicker',
  mode: DATE,
  loop: false,
  use12Hours: false,
  isPlusZero: true,
  isAmpmFirst: false,
  isTimeFirst: false,
  locale: 'en',
  minDate: new Date(2000, 0, 1, 0, 0, 0),
  maxDate: new Date(2030, 11, 31, 23, 59, 59),
  onDateChange: function onDateChange() {},
  onValueChange: function onValueChange() {},
  pickerFontColor: '#333',
  dateSortKeys: null
};
exports.default = DatePicker;