UNPKG

@fruits-chain/react-native-xiaoshu

Version:
185 lines (181 loc) 8.32 kB
"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 _index = _interopRequireDefault(require("../button/index.js")); var _style = require("../button/style.js"); var _index2 = _interopRequireDefault(require("../col/index.js")); var _index3 = _interopRequireDefault(require("../date-picker-view/index.js")); var _helper = require("../date-picker-view/helper.js"); var _useDateMinMax = _interopRequireDefault(require("../date-picker-view/useDateMinMax.js")); var _index4 = require("../hooks/index.js"); var _index5 = _interopRequireDefault(require("../locale/index.js")); var _style2 = require("../picker/style.js"); var _index6 = _interopRequireDefault(require("../row/index.js")); var _index7 = _interopRequireDefault(require("../theme/index.js")); var _jsxRuntime = require("react/jsx-runtime"); function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); } function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; } 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 = !(0, _isNil.default)(initialValue) ? initialValue : defaultInitialValue; const locale = _index5.default.useLocale().DatePickerRangeView; const TOKENS = _index7.default.useThemeTokens(); const CV_BUTTON = _index7.default.createVar(TOKENS, _style.varCreator); const CV_PICKER = _index7.default.createVar(TOKENS, _style2.varCreator); const STYLES_PICKER = _index7.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, _index4.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 || null, Values.current[1] || max || null]); // 同步 value,避免外部 value 清空后,触发 onChangePickView 的时候把旧数据带出来 (0, _react.useEffect)(() => { Values.current = [...value]; }, [value]); const onChangePickView = (0, _index4.usePersistFn)(v => { Values.current[dayActive] = v; onChange([...Values.current]); }); const onPressConfirm = (0, _index4.usePersistFn)(() => { onConfirm?.(Values.current); }); const onPressClear = (0, _index4.usePersistFn)(() => { onClear?.(Values.current); }); const onPressDay1 = (0, _index4.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 = (0, _index4.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 = (0, _index4.usePersistFn)(() => { Values.current = [...OriginalValues.current]; onChange([...Values.current]); // 最大最小时间使用了 useMemo,等数据重新计算好后再回到开始时间 setTimeout(() => { onPressDay1(); }, 0); }); // 把开时间提前锁定 (0, _react.useEffect)(() => { onPressDay1(); }, [onPressDay1]); return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, { children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, { style: STYLES_PICKER.data_range, testID: testID, children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, { style: STYLES_PICKER.data_range_item, onPress: onPressDay1, activeOpacity: CV_BUTTON.button_active_opacity, children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, { style: STYLES_PICKER.data_range_text, children: locale.labelStartTime }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, { style: [STYLES_PICKER.data_range_day, dayActive === 0 ? STYLES_PICKER.data_range_day_active : null], children: value[0] ? (0, _helper.formatDate)(mode, value[0]) : placeholder?.[0] ?? locale.placeholder[0] })] }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, { style: STYLES_PICKER.data_range_item, onPress: onPressDay2, activeOpacity: CV_BUTTON.button_active_opacity, children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, { style: STYLES_PICKER.data_range_text, children: locale.labelEndTime }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, { style: [STYLES_PICKER.data_range_day, dayActive === 1 ? STYLES_PICKER.data_range_day_active : null], children: value[1] ? (0, _helper.formatDate)(mode, value[1]) : placeholder?.[1] ?? locale.placeholder[1] })] })] }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.default, { mode: mode, value: value[dayActive] || currentDate, renderLabel: renderLabel, onChange: onChangePickView, min: limitDates[0] || undefined, max: limitDates[1] || undefined, loading: loading }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index6.default, { gap: CV_PICKER.picker_action_gap, style: btnStyle, children: [clearable ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.default, { span: 6, children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, { type: "hazy", text: clearButtonText ?? locale.clearButtonText, loading: loading, onPress: onPressClear }) }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.default, { span: clearable ? 6 : 12, children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, { type: "hazy", text: resetButtonText ?? locale.resetButtonText, loading: loading, onPress: onPressReset }) }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.default, { span: 12, children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, { text: confirmButtonText ?? locale.confirmButtonText, loading: loading, onPress: onPressConfirm }) })] })] }); }; var _default = exports.default = /*#__PURE__*/(0, _react.memo)(DatePickerRangeView); //# sourceMappingURL=date-picker-range-view.js.map