@fruits-chain/react-native-xiaoshu/lib/module/date-picker-view/useDatePicker.js

🌈 React Native UI library

"use strict";

import { useMemo } from 'react';
import { usePersistFn } from "../hooks/index.js";
import Locale from "../locale/index.js";
import { COLUMN_SERIALIZE_TYPES, serializeMode, getMonthDays, toDateObject, getDateBoundary } from "./helper.js";
import useDateMinMax from "./useDateMinMax.js";
const buildColumnData = (mode, start, end, renderLabel
// eslint-disable-next-line max-params
) => {
  const items = [];
  for (let index = start; index <= end; index++) {
    items.push({
      value: index,
      label: renderLabel(mode, index)
    });
  }
  return items;
};
const useDatePicker = ({
  mode,
  value,
  onChange,
  min,
  max,
  renderLabel
}) => {
  const locale = Locale.useLocale().DatePickerView;
  const modes = useMemo(() => serializeMode(mode.split('-')), [mode]);
  const [minDate, maxDate] = useDateMinMax(mode, min, max);
  const renderLabelPersistFn = usePersistFn((t, n) => {
    if (renderLabel) {
      return renderLabel(t, n);
    }
    switch (t) {
      case 'Y':
        return `${n}${locale.labelYear}`;
      case 'M':
        return `${n}${locale.labelMonth}`;
      case 'D':
        return `${n}${locale.labelDay}`;
      case 'h':
        return `${n}${locale.labelHour}`;
      case 'm':
        return `${n}${locale.labelMinute}`;
      case 's':
        return `${n}${locale.labelSecond}`;
      default:
        return `${n}`;
    }
  });
  const [pickerValues, pickerColumns] = useMemo(() => {
    const _columns = [];
    const _values = [];
    const boundary = getDateBoundary(value, modes, {
      defaultMin: minDate,
      defaultMax: maxDate,
      min,
      max
    });
    const valueDateObject = toDateObject(value);

    // 根据格式化方式挑选值
    COLUMN_SERIALIZE_TYPES.forEach(key => {
      const ab = boundary[key];
      const a = key === 'M' ? ab[0] + 1 : ab[0];
      const b = key === 'M' ? ab[1] + 1 : ab[1];
      const v = key === 'M' ? valueDateObject[key] + 1 : valueDateObject[key];
      _values.push(v);
      _columns.push(buildColumnData(key, a, b, renderLabelPersistFn));
    });

    // 挑选值
    const _pickerColumns = [];
    const _pickerValues = [];
    modes.forEach(key => {
      const keyIndex = COLUMN_SERIALIZE_TYPES.findIndex(cst => cst === key);
      _pickerColumns.push(_columns[keyIndex]);
      _pickerValues.push(_values[keyIndex]);
    });
    return [_pickerValues, _pickerColumns];
  }, [max, maxDate, min, minDate, modes, renderLabelPersistFn, value]);
  const onChangePicker = usePersistFn(v => {
    // console.log('values  =>>>>   ', v)

    const newValue = new Date(value);
    modes.forEach((key, index) => {
      const num = v[index];
      switch (key) {
        case 'Y':
          newValue.setFullYear(num);
          break;
        case 'M':
          {
            // 对 D 进行修正
            const days = getMonthDays(newValue.getFullYear(), num);
            const valueDays = newValue.getDate();
            newValue.setMonth(num - 1, valueDays > days ? days : valueDays);
            break;
          }
        case 'D':
          {
            // 对 D 进行修正
            const days = getMonthDays(newValue.getFullYear(), newValue.getMonth() + 1);
            newValue.setDate(num > days ? days : num);
            break;
          }
        case 'h':
          newValue.setHours(num);
          break;
        case 'm':
          newValue.setMinutes(num);
          break;
        case 's':
          newValue.setSeconds(num);
          break;
        default:
          break;
      }
    });

    // console.log('newValue？？？？   =>   ', toDateObject(newValue))

    // // 最后边界值判断
    // const _minDate = isDate(min) ? min : defaultMinDate
    // const _maxDate = isDate(max) ? max : defaultMaxDate

    const finallyValue = newValue.getTime() >= minDate.getTime() && newValue.getTime() <= maxDate.getTime() ? newValue : newValue.getTime() < minDate.getTime() ? minDate : maxDate;

    // console.log('_minDate   =>   ', toDateObject(_minDate))
    // console.log('_maxDate   =>   ', toDateObject(_maxDate))
    // console.log('newValue   =>   ', toDateObject(newValue))
    // console.log('_minDate  t   =>   ', _minDate.getTime())
    // console.log('_maxDate  t   =>   ', _maxDate.getTime())
    // console.log('newValue  t   =>   ', newValue.getTime())
    // console.log('finallyValue   =>   ', toDateObject(finallyValue))
    // console.log(
    //   newValue.getTime() >= _minDate.getTime() &&
    //     newValue.getTime() <= _maxDate.getTime(),
    // )
    // console.log(newValue.getTime() < _minDate.getTime())
    // console.log('finallyValue   =>>>> ', finallyValue.toString())
    // console.log('finallyValue   =========>>>>>>>>>>>>>>>>>>>>>>>>>')

    onChange(finallyValue);
  });
  return [pickerValues, pickerColumns, onChangePicker, minDate, maxDate];
};
export default useDatePicker;
//# sourceMappingURL=useDatePicker.js.map