@fruits-chain/react-native-xiaoshu
Version:
🌈 React Native UI library
185 lines (181 loc) • 8.32 kB
JavaScript
;
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