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

🌈 React Native UI library

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';
import { varCreator as varCreatorButton } from '../button/style';
import Col from '../col';
import DatePickerView from '../date-picker-view';
import { formatDate } from '../date-picker-view/helper';
import useDateMinMax from '../date-picker-view/useDateMinMax';
import { usePersistFn, useControllableValue } from '../hooks';
import Locale from '../locale';
import { varCreator as varCreatorPicker, styleCreator as styleCreatorPicker } from '../picker/style';
import Row from '../row';
import Theme from '../theme';
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 = _ref => {
  let {
    initialValue,
    confirmButtonText,
    resetButtonText,
    onConfirm,
    placeholder,
    // DateView
    mode = 'Y-D',
    min,
    max,
    renderLabel,
    loading,
    ...restProps
  } = _ref;

  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, Values.current[1] || max]); // 同步 value，避免外部 value 清空后，触发 onChangePickView 的时候把旧数据带出来

  useEffect(() => {
    Values.current = [...value];
  }, [value]);
  const onChangePickView = usePersistFn(v => {
    Values.current[dayActive] = v;
    onChange([...Values.current]);
  });
  const onPressConfirm = usePersistFn(() => {
    onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(Values.current);
  });
  const onPressDay1 = usePersistFn(() => {
    // 切换的时候没有滚动时间做默认选择
    if (!Values.current[0]) {
      Values.current[0] = getRightDate(currentDate, minDateE, maxDateE);
      onChange([...Values.current]);
    }

    setDayActive(0);
    setLimitDates([min, Values.current[1] || max]);
  });
  const onPressDay2 = usePersistFn(() => {
    // 切换的时候没有滚动时间做默认选择
    if (!Values.current[1]) {
      Values.current[1] = getRightDate(currentDate, minDateS, maxDateS);
      onChange([...Values.current]);
    }

    setDayActive(1);
    setLimitDates([Values.current[0] || min, max]);
  });
  const onPressReset = usePersistFn(() => {
    Values.current = [...OriginalValues.current];
    onPressDay1();
    onChange([...Values.current]);
  }); // 把开时间提前锁定

  useEffect(() => {
    onPressDay1();
  }, [onPressDay1]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
    style: STYLES_PICKER.data_range
  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: STYLES_PICKER.data_range_item,
    onPress: onPressDay1,
    activeOpacity: CV_BUTTON.button_active_opacity
  }, /*#__PURE__*/React.createElement(Text, {
    style: STYLES_PICKER.data_range_text
  }, locale.labelStartTime), /*#__PURE__*/React.createElement(Text, {
    style: [STYLES_PICKER.data_range_day, dayActive === 0 ? STYLES_PICKER.data_range_day_active : null]
  }, value[0] ? formatDate(mode, value[0]) : (placeholder === null || placeholder === void 0 ? void 0 : placeholder[0]) || locale.placeholder[0])), /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: STYLES_PICKER.data_range_item,
    onPress: onPressDay2,
    activeOpacity: CV_BUTTON.button_active_opacity
  }, /*#__PURE__*/React.createElement(Text, {
    style: STYLES_PICKER.data_range_text
  }, locale.labelEndTime), /*#__PURE__*/React.createElement(Text, {
    style: [STYLES_PICKER.data_range_day, dayActive === 1 ? STYLES_PICKER.data_range_day_active : null]
  }, value[1] ? formatDate(mode, value[1]) : (placeholder === null || placeholder === void 0 ? void 0 : placeholder[1]) || locale.placeholder[1]))), /*#__PURE__*/React.createElement(DatePickerView, {
    mode: mode,
    value: value[dayActive] || currentDate,
    renderLabel: renderLabel,
    onChange: onChangePickView,
    min: limitDates[0],
    max: limitDates[1],
    loading: loading
  }), /*#__PURE__*/React.createElement(Row, {
    gap: CV_PICKER.picker_action_gap,
    style: btnStyle
  }, /*#__PURE__*/React.createElement(Col, {
    span: 12
  }, /*#__PURE__*/React.createElement(Button, {
    type: "hazy",
    text: resetButtonText || locale.resetButtonText,
    loading: loading,
    onPress: onPressReset
  })), /*#__PURE__*/React.createElement(Col, {
    span: 12
  }, /*#__PURE__*/React.createElement(Button, {
    text: confirmButtonText || locale.confirmButtonText,
    loading: loading,
    onPress: onPressConfirm
  }))));
};

export default /*#__PURE__*/memo(DatePickerRangeView);
//# sourceMappingURL=date-picker-range-view.js.map