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

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

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["value", "filter", "type", "showToolbar", "formatter", "minDate", "maxDate", "minHour", "maxHour", "minMinute", "maxMinute", "title", "itemHeight", "visibleItemCount", "confirmButtonText", "cancelButtonText", "onInput", "onChange", "onCancel", "onConfirm"];

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) { _defineProperty(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; }

/* eslint-disable @typescript-eslint/ban-ts-comment */
import { useState, useCallback, useRef, useLayoutEffect, forwardRef, useImperativeHandle } from 'react';
import { nextTick } from '@tarojs/taro';
import VanPicker from '../picker/index';
import * as utils from '../wxs/utils';
import { defaultFormatter, getMonthEndDay, getTrueValue, times, padZero, range, isValidDate, currentYear } from './wxs';
import { jsx as _jsx } from "react/jsx-runtime";
export 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 ? defaultFormatter : _props$formatter,
      _props$minDate = props.minDate,
      minDate = _props$minDate === void 0 ? new Date(currentYear - 10, 0, 1).getTime() : _props$minDate,
      _props$maxDate = props.maxDate,
      maxDate = _props$maxDate === void 0 ? new Date(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 = _objectWithoutProperties(props, _excluded);

  var PickRef = useRef({});

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

  var _useState3 = useState([]),
      _useState4 = _slicedToArray(_useState3, 2),
      columns = _useState4[0],
      setColumns = _useState4[1];

  var minHour_ = minHour;
  var maxHour_ = maxHour;
  var minMinute_ = minMinute;
  var maxMinute_ = maxMinute;
  var getPicker = 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 = 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 = 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 = {}, _defineProperty(_ref, "".concat(type, "Year"), year), _defineProperty(_ref, "".concat(type, "Month"), month), _defineProperty(_ref, "".concat(type, "Date"), date), _defineProperty(_ref, "".concat(type, "Hour"), hour), _defineProperty(_ref, "".concat(type, "Minute"), minute), _ref;
  }, [maxDate, minDate]);
  var getRanges = 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 = useCallback(function (nowValue) {
    var results = getRanges(nowValue).map(function (_ref2) {
      var type = _ref2.type,
          range = _ref2.range;
      var values = times(range[1] - range[0] + 1, function (index) {
        var value = range[0] + index;
        return type === 'year' ? "".concat(value) : padZero(value);
      });

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

      return {
        type: type,
        values: values
      };
    });
    return results;
  }, [filter, getRanges]);
  var updateColumns = 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 = 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', padZero(date.getMonth() + 1))];

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

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

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

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


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

      hour = padZero(range(hour, minHour, maxHour));
      minute = padZero(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],
  // )

  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 = getTrueValue(values[0]);
      var month = getTrueValue(values[1]);

      var _maxDate = getMonthEndDay(year, month);

      var date = getTrueValue(values[2]);

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

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

      if (type === 'datetime') {
        hour = getTrueValue(values[3]);
        minute = 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);
      }
    });
  };

  useImperativeHandle(ref, function () {
    return {
      pickerInstance: PickRef.current,
      columns: columns,
      setColumns: setColumns,
      innerValue: innerValue,
      updateColumnValue: updateColumnValue
    };
  });
  return /*#__PURE__*/_jsx(VanPicker, {
    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
  });
}
export default /*#__PURE__*/forwardRef(DatetimePicker);