vantui-edit/lib/datetime-picker/index.js

一套适用于Taro3及React的vantui组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DatetimePicker = DatetimePicker;
exports.default = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = require("react");

var _taro = require("@tarojs/taro");

var _index = _interopRequireDefault(require("../picker/index"));

var utils = _interopRequireWildcard(require("../wxs/utils"));

var _wxs = require("./wxs");

var _jsxRuntime = require("react/jsx-runtime");

var _excluded = ["value", "filter", "type", "showToolbar", "formatter", "minDate", "maxDate", "minHour", "maxHour", "minMinute", "maxMinute", "title", "itemHeight", "visibleItemCount", "confirmButtonText", "cancelButtonText", "onInput", "onChange", "onCancel", "onConfirm"];

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

function DatetimePicker(props, ref) {
  var _props$value = props.value,
      value = _props$value === void 0 ? null : _props$value,
      filter = props.filter,
      _props$type = props.type,
      type = _props$type === void 0 ? 'datetime' : _props$type,
      _props$showToolbar = props.showToolbar,
      showToolbar = _props$showToolbar === void 0 ? true : _props$showToolbar,
      _props$formatter = props.formatter,
      formatter = _props$formatter === void 0 ? _wxs.defaultFormatter : _props$formatter,
      _props$minDate = props.minDate,
      minDate = _props$minDate === void 0 ? new Date(_wxs.currentYear - 10, 0, 1).getTime() : _props$minDate,
      _props$maxDate = props.maxDate,
      maxDate = _props$maxDate === void 0 ? new Date(_wxs.currentYear + 10, 11, 31).getTime() : _props$maxDate,
      _props$minHour = props.minHour,
      minHour = _props$minHour === void 0 ? 0 : _props$minHour,
      _props$maxHour = props.maxHour,
      maxHour = _props$maxHour === void 0 ? 23 : _props$maxHour,
      _props$minMinute = props.minMinute,
      minMinute = _props$minMinute === void 0 ? 0 : _props$minMinute,
      _props$maxMinute = props.maxMinute,
      maxMinute = _props$maxMinute === void 0 ? 59 : _props$maxMinute,
      title = props.title,
      itemHeight = props.itemHeight,
      visibleItemCount = props.visibleItemCount,
      confirmButtonText = props.confirmButtonText,
      cancelButtonText = props.cancelButtonText,
      onInput = props.onInput,
      onChange = props.onChange,
      onCancel = props.onCancel,
      _onConfirm = props.onConfirm,
      others = (0, _objectWithoutProperties2.default)(props, _excluded);
  var PickRef = (0, _react.useRef)({});

  var _useState = (0, _react.useState)(Date.now()),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      innerValue = _useState2[0],
      setInnerValue = _useState2[1];

  var _useState3 = (0, _react.useState)([]),
      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
      columns = _useState4[0],
      setColumns = _useState4[1];

  var minHour_ = minHour;
  var maxHour_ = maxHour;
  var minMinute_ = minMinute;
  var maxMinute_ = maxMinute;
  var getPicker = (0, _react.useCallback)(function () {
    if (PickRef.current) {
      var setColumnValues = PickRef.current.setColumnValues;

      PickRef.current.setColumnValues = function () {
        return (// @ts-ignore
          setColumnValues.apply(PickRef.current, [arguments.length <= 1 ? undefined : arguments[1], arguments.length <= 2 ? undefined : arguments[2], false])
        );
      };
    }

    return PickRef.current;
  }, []);
  var getBoundary = (0, _react.useCallback)(function (type, innerValue) {
    var _ref;

    var value = new Date(innerValue);
    var yearDate = "".concat(type, "Date") === 'maxDate' ? maxDate : minDate;
    var boundary = new Date(yearDate);
    var year = boundary.getFullYear();
    var month = 1;
    var date = 1;
    var hour = 0;
    var minute = 0;

    if (type === 'max') {
      month = 12;
      date = (0, _wxs.getMonthEndDay)(value.getFullYear(), value.getMonth() + 1);
      hour = 23;
      minute = 59;
    }

    if (value.getFullYear() === year) {
      month = boundary.getMonth() + 1;

      if (value.getMonth() + 1 === month) {
        date = boundary.getDate();

        if (value.getDate() === date) {
          hour = boundary.getHours();

          if (value.getHours() === hour) {
            minute = boundary.getMinutes();
          }
        }
      }
    }

    return _ref = {}, (0, _defineProperty2.default)(_ref, "".concat(type, "Year"), year), (0, _defineProperty2.default)(_ref, "".concat(type, "Month"), month), (0, _defineProperty2.default)(_ref, "".concat(type, "Date"), date), (0, _defineProperty2.default)(_ref, "".concat(type, "Hour"), hour), (0, _defineProperty2.default)(_ref, "".concat(type, "Minute"), minute), _ref;
  }, [maxDate, minDate]);
  var getRanges = (0, _react.useCallback)(function (nowValue) {
    var res = [{
      type: 'hour',
      range: [minHour_, maxHour_]
    }, {
      type: 'minute',
      range: [minMinute_, maxMinute_]
    }];

    if (type === 'time') {
      return res;
    }

    var _getBoundary = getBoundary('max', nowValue || innerValue),
        maxYear = _getBoundary.maxYear,
        maxDate = _getBoundary.maxDate,
        maxMonth = _getBoundary.maxMonth,
        maxHour = _getBoundary.maxHour,
        maxMinute = _getBoundary.maxMinute;

    var _getBoundary2 = getBoundary('min', nowValue || innerValue),
        minYear = _getBoundary2.minYear,
        minDate = _getBoundary2.minDate,
        minMonth = _getBoundary2.minMonth,
        minHour = _getBoundary2.minHour,
        minMinute = _getBoundary2.minMinute;

    var result = [{
      type: 'year',
      range: [minYear, maxYear]
    }, {
      type: 'month',
      range: [minMonth, maxMonth]
    }, {
      type: 'day',
      range: [minDate, maxDate]
    }, {
      type: 'hour',
      range: [minHour, maxHour]
    }, {
      type: 'minute',
      range: [minMinute, maxMinute]
    }];
    if (type === 'date') result.splice(3, 2);
    if (type === 'year-month') result.splice(2, 3);
    return result;
  }, [getBoundary, innerValue, maxHour_, maxMinute_, minHour_, minMinute_, type]);
  var getOriginColumns = (0, _react.useCallback)(function (nowValue) {
    var results = getRanges(nowValue).map(function (_ref2) {
      var type = _ref2.type,
          range = _ref2.range;
      var values = (0, _wxs.times)(range[1] - range[0] + 1, function (index) {
        var value = range[0] + index;
        return type === 'year' ? "".concat(value) : (0, _wxs.padZero)(value);
      });

      if (filter) {
        values = filter(type, values);
      }

      return {
        type: type,
        values: values
      };
    });
    return results;
  }, [filter, getRanges]);
  var updateColumns = (0, _react.useCallback)(function (nowValue) {
    var results = getOriginColumns(nowValue).map(function (column) {
      return {
        values: column.values.map(function (value) {
          return formatter(column.type, value);
        })
      };
    });
    return setColumns(results);
  }, [formatter, getOriginColumns]);
  var updateColumnValue = (0, _react.useCallback)(function (value) {
    var values = [];
    var picker = getPicker();

    if (type === 'time') {
      var pair = value.split(':');
      values = [formatter('hour', pair[0]), formatter('minute', pair[1])];
    } else {
      var date = new Date(value);
      values = [formatter('year', "".concat(date.getFullYear())), formatter('month', (0, _wxs.padZero)(date.getMonth() + 1))];

      if (type === 'date') {
        values.push(formatter('day', (0, _wxs.padZero)(date.getDate())));
      }

      if (type === 'datetime') {
        values.push(formatter('day', (0, _wxs.padZero)(date.getDate())), formatter('hour', (0, _wxs.padZero)(date.getHours())), formatter('minute', (0, _wxs.padZero)(date.getMinutes())));
      }
    }

    updateColumns(value);
    (0, _taro.nextTick)(function () {
      setInnerValue(value);
    });
    return new Promise(function (resolve) {
      setTimeout(function () {
        (0, _taro.nextTick)(function () {
          picker.setValues(values);
          resolve("".concat(value));
        });
      }, 6);
    });
  }, [formatter, getPicker, type, updateColumns]);
  var correctValue = (0, _react.useCallback)(function (value) {
    // validate value
    var isDateType = type !== 'time';

    if (isDateType && !(0, _wxs.isValidDate)(value)) {
      value = minDate;
    } else if (!isDateType && !value) {
      value = "".concat((0, _wxs.padZero)(minHour), ":00");
    } // time type


    if (!isDateType) {
      var _value$split = value.split(':'),
          _value$split2 = (0, _slicedToArray2.default)(_value$split, 2),
          hour = _value$split2[0],
          minute = _value$split2[1];

      hour = (0, _wxs.padZero)((0, _wxs.range)(hour, minHour, maxHour));
      minute = (0, _wxs.padZero)((0, _wxs.range)(minute, minMinute, maxMinute));
      return "".concat(hour, ":").concat(minute);
    } // date type


    value = Math.max(value, minDate);
    value = Math.min(value, maxDate);
    return value;
  }, [maxDate, maxHour, maxMinute, minDate, minHour, minMinute, type]); // useLayoutEffect(
  //   function () {
  //     const val = correctValue(value)
  //     updateColumnValue(val)
  //   },
  //   // eslint-disable-next-line react-hooks/exhaustive-deps
  //   [correctValue],
  // )

  (0, _react.useLayoutEffect)(function () {
    var val = correctValue(value);
    var isEqual = val === innerValue;

    if (!isEqual) {
      updateColumnValue(val).then(function () {
        if (onInput) {
          onInput({
            detail: val,
            currentTarget: {
              dataset: {
                type: type
              }
            }
          });
        }
      });
    }
  }, // eslint-disable-next-line react-hooks/exhaustive-deps
  [type, minDate, maxDate, minHour, maxHour, minMinute, maxMinute]);

  var onChange_ = function onChange_(e) {
    var valueArr = e.detail.value;
    var value;
    var picker = getPicker();

    if (type === 'datetime') {
      value = new Date("".concat(valueArr[0], "-").concat(valueArr[1], "-").concat(valueArr[2], " ").concat(valueArr[3], ":").concat(valueArr[4])).getTime();
    } else if (type === 'date') {
      value = new Date("".concat(valueArr[0], "-").concat(valueArr[1], "-").concat(valueArr[2])).getTime();
    } else if (type === 'time') {
      value = new Date("".concat(valueArr[0], ":").concat(valueArr[1])).getTime();
    } else if (type === 'year-month') {
      value = new Date("".concat(valueArr[0], "-").concat(valueArr[1])).getTime();
    }

    var originColumns = getOriginColumns(value);

    if (type === 'time') {
      var indexes = picker.getIndexes();
      value = "".concat(+originColumns[0].values[indexes[0]], ":").concat(+originColumns[1].values[indexes[1]]);
    } else {
      var _indexes = picker.getIndexes();

      var values = _indexes.map(function (value, index) {
        return originColumns[index].values[value];
      });

      var year = (0, _wxs.getTrueValue)(values[0]);
      var month = (0, _wxs.getTrueValue)(values[1]);

      var _maxDate = (0, _wxs.getMonthEndDay)(year, month);

      var date = (0, _wxs.getTrueValue)(values[2]);

      if (type === 'year-month') {
        date = 1;
      }

      date = date > _maxDate ? _maxDate : date;
      var hour = 0;
      var minute = 0;

      if (type === 'datetime') {
        hour = (0, _wxs.getTrueValue)(values[3]);
        minute = (0, _wxs.getTrueValue)(values[4]);
      }

      value = new Date(year, month - 1, date, hour, minute);
    }

    value = correctValue(value);
    updateColumnValue(value).then(function () {
      if (onInput) onInput({
        detail: value,
        currentTarget: {
          dataset: {
            type: type
          }
        }
      });

      if (onChange) {
        var _e = {
          detail: {
            datetimePicker: {
              columns: columns,
              setColumns: setColumns,
              innerValue: innerValue,
              updateColumnValue: updateColumnValue
            }
          }
        };
        onChange(_e);
      }
    });
  };

  (0, _react.useImperativeHandle)(ref, function () {
    return {
      pickerInstance: PickRef.current,
      columns: columns,
      setColumns: setColumns,
      innerValue: innerValue,
      updateColumnValue: updateColumnValue
    };
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, {
    ref: PickRef,
    className: "van-datetime-picker column-class ".concat(others.className || ''),
    style: utils.style([others.style]),
    title: title,
    columns: columns,
    itemHeight: itemHeight,
    showToolbar: showToolbar,
    visibleItemCount: visibleItemCount,
    confirmButtonText: confirmButtonText,
    cancelButtonText: cancelButtonText,
    onChange: onChange_,
    onConfirm: function onConfirm(event) {
      if (_onConfirm) _onConfirm({
        detail: _objectSpread(_objectSpread({}, event.detail), {}, {
          value: innerValue
        })
      });
    },
    onCancel: onCancel
  });
}

var _default = /*#__PURE__*/(0, _react.forwardRef)(DatetimePicker);

exports.default = _default;