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

🌈 React Native UI library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _isNil = _interopRequireDefault(require("lodash/isNil"));

var _react = _interopRequireWildcard(require("react"));

var _reactNative = require("react-native");

var _button = _interopRequireDefault(require("../button"));

var _style = require("../button/style");

var _col = _interopRequireDefault(require("../col"));

var _datePickerView = _interopRequireDefault(require("../date-picker-view"));

var _helper = require("../date-picker-view/helper");

var _useDateMinMax = _interopRequireDefault(require("../date-picker-view/useDateMinMax"));

var _hooks = require("../hooks");

var _locale = _interopRequireDefault(require("../locale"));

var _style2 = require("../picker/style");

var _row = _interopRequireDefault(require("../row"));

var _theme = _interopRequireDefault(require("../theme"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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 = !(0, _isNil.default)(initialValue) ? initialValue : defaultInitialValue;

  const locale = _locale.default.useLocale().DatePickerRangeView;

  const TOKENS = _theme.default.useThemeTokens();

  const CV_BUTTON = _theme.default.createVar(TOKENS, _style.varCreator);

  const CV_PICKER = _theme.default.createVar(TOKENS, _style2.varCreator);

  const STYLES_PICKER = _theme.default.createStyle(CV_PICKER, _style2.styleCreator);

  const btnStyle = (0, _react.useMemo)(() => ({
    paddingHorizontal: CV_PICKER.picker_action_gap
  }), [CV_PICKER.picker_action_gap]);
  const [value, onChange] = (0, _hooks.useControllableValue)(restProps, {
    defaultValue: [..._initialValue]
  });
  const [minDateS, maxDateS] = (0, _useDateMinMax.default)(mode, min, value[1] || max);
  const [minDateE, maxDateE] = (0, _useDateMinMax.default)(mode, value[0] || min, max);
  const currentDate = (0, _react.useMemo)(() => new Date(), []);
  const [dayActive, setDayActive] = (0, _react.useState)(0);
  const Values = (0, _react.useRef)([...value]);
  const OriginalValues = (0, _react.useRef)(_initialValue);
  const [limitDates, setLimitDates] = (0, _react.useState)([min, Values.current[1] || max]); // 同步 value，避免外部 value 清空后，触发 onChangePickView 的时候把旧数据带出来

  (0, _react.useEffect)(() => {
    Values.current = [...value];
  }, [value]);
  const onChangePickView = (0, _hooks.usePersistFn)(v => {
    Values.current[dayActive] = v;
    onChange([...Values.current]);
  });
  const onPressConfirm = (0, _hooks.usePersistFn)(() => {
    onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(Values.current);
  });
  const onPressDay1 = (0, _hooks.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 = (0, _hooks.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 = (0, _hooks.usePersistFn)(() => {
    Values.current = [...OriginalValues.current];
    onPressDay1();
    onChange([...Values.current]);
  }); // 把开时间提前锁定

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

var _default = /*#__PURE__*/(0, _react.memo)(DatePickerRangeView);

exports.default = _default;
//# sourceMappingURL=date-picker-range-view.js.map