@td-design/react-native-picker/lib/module/date-period-input/useDatePeriodInput.js

基于 @td-design/react-native 的 picker 组件

import { useRef } from 'react';
import { Keyboard } from 'react-native';
import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks';
export default function useDatePeriodInput(_ref) {
  let {
    value,
    onChange
  } = _ref;
  const datePickerRef = useRef(null);
  const [order, setOrder] = useSafeState('start');
  const [dates, setDates] = useSafeState(value ?? [undefined, undefined]);
  const handleChange = useMemoizedFn(date => {
    const [startDate, endDate] = dates;
    if (onChange) {
      onChange(order === 'start' ? [date, endDate] : [startDate, date]);
    } else {
      setDates(draft => {
        const nextDates = [...draft];
        nextDates[order === 'start' ? 0 : 1] = date;
        return nextDates;
      });
    }
  });

  /** 点开开始时间选择器 */
  const handleStartPress = () => {
    var _datePickerRef$curren;
    Keyboard.dismiss();
    setOrder('start');
    (_datePickerRef$curren = datePickerRef.current) === null || _datePickerRef$curren === void 0 ? void 0 : _datePickerRef$curren.show();
  };

  /** 点开结束时间选择器 */
  const handleEndPress = () => {
    var _datePickerRef$curren2;
    Keyboard.dismiss();
    setOrder('end');
    (_datePickerRef$curren2 = datePickerRef.current) === null || _datePickerRef$curren2 === void 0 ? void 0 : _datePickerRef$curren2.show();
  };

  /**
   * 清除开始时间
   * 不光是要把date改掉，同时还需要判断结束时间是否有值
   * 如果有值，需要设置结束时间为最大时间
   * 如果没有值，则最大时间
   */
  const clearStartDate = () => {
    const [, endDate] = value ?? [, undefined];
    if (onChange) {
      onChange([undefined, endDate]);
    } else {
      setDates(draft => [undefined, draft[1]]);
    }
  };

  /** 清除结束时间 */
  const clearEndDate = () => {
    const [startDate] = value ?? [undefined];
    if (onChange) {
      onChange([startDate, undefined]);
    } else {
      setDates(draft => [draft[0], undefined]);
    }
  };
  return {
    dates,
    order,
    datePickerRef,
    handleChange: useMemoizedFn(handleChange),
    handleStartPress: useMemoizedFn(handleStartPress),
    handleEndPress: useMemoizedFn(handleEndPress),
    clearStartDate: useMemoizedFn(clearStartDate),
    clearEndDate: useMemoizedFn(clearEndDate)
  };
}
//# sourceMappingURL=useDatePeriodInput.js.map