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

🌈 React Native UI library

"use strict";

import isNil from 'lodash/isNil';
import React, { useMemo, useRef, useState, useEffect, memo } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import Button from "../button/index.js";
import { varCreator as varCreatorButton } from "../button/style.js";
import Col from "../col/index.js";
import DatePickerView from "../date-picker-view/index.js";
import { formatDate } from "../date-picker-view/helper.js";
import useDateMinMax from "../date-picker-view/useDateMinMax.js";
import { usePersistFn, useControllableValue } from "../hooks/index.js";
import Locale from "../locale/index.js";
import { varCreator as varCreatorPicker, styleCreator as styleCreatorPicker } from "../picker/style.js";
import Row from "../row/index.js";
import Theme from "../theme/index.js";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const defaultInitialValue = [null, null];
const getRightDate = (v, min, max) => {
  if (v.getTime() < min.getTime()) {
    return min;
  }
  if (v.getTime() > max.getTime()) {
    return max;
  }
  return v;
};
const DatePickerRangeView = ({
  initialValue,
  confirmButtonText,
  resetButtonText,
  onConfirm,
  placeholder,
  clearable,
  onClear,
  clearButtonText,
  // DateView
  mode = 'Y-D',
  min,
  max,
  renderLabel,
  loading,
  testID,
  ...restProps
}) => {
  const _initialValue = !isNil(initialValue) ? initialValue : defaultInitialValue;
  const locale = Locale.useLocale().DatePickerRangeView;
  const TOKENS = Theme.useThemeTokens();
  const CV_BUTTON = Theme.createVar(TOKENS, varCreatorButton);
  const CV_PICKER = Theme.createVar(TOKENS, varCreatorPicker);
  const STYLES_PICKER = Theme.createStyle(CV_PICKER, styleCreatorPicker);
  const btnStyle = useMemo(() => ({
    paddingHorizontal: CV_PICKER.picker_action_gap
  }), [CV_PICKER.picker_action_gap]);
  const [value, onChange] = useControllableValue(restProps, {
    defaultValue: [..._initialValue]
  });
  const [minDateS, maxDateS] = useDateMinMax(mode, min, value[1] || max);
  const [minDateE, maxDateE] = useDateMinMax(mode, value[0] || min, max);
  const currentDate = useMemo(() => new Date(), []);
  const [dayActive, setDayActive] = useState(0);
  const Values = useRef([...value]);
  const OriginalValues = useRef([..._initialValue]);
  const [limitDates, setLimitDates] = useState([min || null, Values.current[1] || max || null]);

  // 同步 value，避免外部 value 清空后，触发 onChangePickView 的时候把旧数据带出来
  useEffect(() => {
    Values.current = [...value];
  }, [value]);
  const onChangePickView = usePersistFn(v => {
    Values.current[dayActive] = v;
    onChange([...Values.current]);
  });
  const onPressConfirm = usePersistFn(() => {
    onConfirm?.(Values.current);
  });
  const onPressClear = usePersistFn(() => {
    onClear?.(Values.current);
  });
  const onPressDay1 = usePersistFn(() => {
    // 切换的时候没有滚动时间做默认选择
    if (!Values.current[0]) {
      Values.current[0] = getRightDate(currentDate, minDateE, maxDateE);
      onChange([...Values.current]);
    }
    setDayActive(0);
    setLimitDates([min || null, Values.current[1] || max || null]);
  });
  const onPressDay2 = usePersistFn(() => {
    // 切换的时候没有滚动时间做默认选择
    if (!Values.current[1]) {
      Values.current[1] = getRightDate(Values.current[0] || new Date(), minDateS, maxDateS);
      onChange([...Values.current]);
    }
    setDayActive(1);
    setLimitDates([Values.current[0] || min || null, max || null]);
  });
  const onPressReset = usePersistFn(() => {
    Values.current = [...OriginalValues.current];
    onChange([...Values.current]);

    // 最大最小时间使用了 useMemo，等数据重新计算好后再回到开始时间
    setTimeout(() => {
      onPressDay1();
    }, 0);
  });

  // 把开时间提前锁定
  useEffect(() => {
    onPressDay1();
  }, [onPressDay1]);
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsxs(View, {
      style: STYLES_PICKER.data_range,
      testID: testID,
      children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
        style: STYLES_PICKER.data_range_item,
        onPress: onPressDay1,
        activeOpacity: CV_BUTTON.button_active_opacity,
        children: [/*#__PURE__*/_jsx(Text, {
          style: STYLES_PICKER.data_range_text,
          children: locale.labelStartTime
        }), /*#__PURE__*/_jsx(Text, {
          style: [STYLES_PICKER.data_range_day, dayActive === 0 ? STYLES_PICKER.data_range_day_active : null],
          children: value[0] ? formatDate(mode, value[0]) : placeholder?.[0] ?? locale.placeholder[0]
        })]
      }), /*#__PURE__*/_jsxs(TouchableOpacity, {
        style: STYLES_PICKER.data_range_item,
        onPress: onPressDay2,
        activeOpacity: CV_BUTTON.button_active_opacity,
        children: [/*#__PURE__*/_jsx(Text, {
          style: STYLES_PICKER.data_range_text,
          children: locale.labelEndTime
        }), /*#__PURE__*/_jsx(Text, {
          style: [STYLES_PICKER.data_range_day, dayActive === 1 ? STYLES_PICKER.data_range_day_active : null],
          children: value[1] ? formatDate(mode, value[1]) : placeholder?.[1] ?? locale.placeholder[1]
        })]
      })]
    }), /*#__PURE__*/_jsx(DatePickerView, {
      mode: mode,
      value: value[dayActive] || currentDate,
      renderLabel: renderLabel,
      onChange: onChangePickView,
      min: limitDates[0] || undefined,
      max: limitDates[1] || undefined,
      loading: loading
    }), /*#__PURE__*/_jsxs(Row, {
      gap: CV_PICKER.picker_action_gap,
      style: btnStyle,
      children: [clearable ? /*#__PURE__*/_jsx(Col, {
        span: 6,
        children: /*#__PURE__*/_jsx(Button, {
          type: "hazy",
          text: clearButtonText ?? locale.clearButtonText,
          loading: loading,
          onPress: onPressClear
        })
      }) : null, /*#__PURE__*/_jsx(Col, {
        span: clearable ? 6 : 12,
        children: /*#__PURE__*/_jsx(Button, {
          type: "hazy",
          text: resetButtonText ?? locale.resetButtonText,
          loading: loading,
          onPress: onPressReset
        })
      }), /*#__PURE__*/_jsx(Col, {
        span: 12,
        children: /*#__PURE__*/_jsx(Button, {
          text: confirmButtonText ?? locale.confirmButtonText,
          loading: loading,
          onPress: onPressConfirm
        })
      })]
    })]
  });
};
export default /*#__PURE__*/memo(DatePickerRangeView);
//# sourceMappingURL=date-picker-range-view.js.map