@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
415 lines (414 loc) • 18 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DatetimePicker = DatetimePicker;
exports.default = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = require("react");
var _taro = require("@tarojs/taro");
var _index = _interopRequireDefault(require("../picker/index"));
var utils = _interopRequireWildcard(require("../wxs/utils"));
var _defaultProps = require("../default-props");
var _wxs = require("./wxs");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["value", "filter", "type", "showToolbar", "formatter", "minDate", "maxDate", "minHour", "maxHour", "minMinute", "maxMinute", "title", "itemHeight", "visibleItemCount", "confirmButtonText", "cancelButtonText", "onInput", "onChange", "onCancel", "onConfirm", "style", "className", "formatValue", "ref"];
/* eslint-disable @typescript-eslint/ban-ts-comment */
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var d = (0, _defaultProps.get)().DatetimePicker;
function DatetimePicker(props, ref_) {
var _d$props = _objectSpread(_objectSpread({}, d), props),
_d$props$value = _d$props.value,
value = _d$props$value === void 0 ? null : _d$props$value,
filter = _d$props.filter,
_d$props$type = _d$props.type,
type = _d$props$type === void 0 ? 'datetime' : _d$props$type,
_d$props$showToolbar = _d$props.showToolbar,
showToolbar = _d$props$showToolbar === void 0 ? true : _d$props$showToolbar,
_d$props$formatter = _d$props.formatter,
formatter = _d$props$formatter === void 0 ? _wxs.defaultFormatter : _d$props$formatter,
_d$props$minDate = _d$props.minDate,
minDate = _d$props$minDate === void 0 ? new Date(_wxs.currentYear - 10, 0, 1).getTime() : _d$props$minDate,
_d$props$maxDate = _d$props.maxDate,
maxDate = _d$props$maxDate === void 0 ? new Date(_wxs.currentYear + 10, 11, 31).getTime() : _d$props$maxDate,
_d$props$minHour = _d$props.minHour,
minHour = _d$props$minHour === void 0 ? 0 : _d$props$minHour,
_d$props$maxHour = _d$props.maxHour,
maxHour = _d$props$maxHour === void 0 ? 23 : _d$props$maxHour,
_d$props$minMinute = _d$props.minMinute,
minMinute = _d$props$minMinute === void 0 ? 0 : _d$props$minMinute,
_d$props$maxMinute = _d$props.maxMinute,
maxMinute = _d$props$maxMinute === void 0 ? 59 : _d$props$maxMinute,
title = _d$props.title,
itemHeight = _d$props.itemHeight,
visibleItemCount = _d$props.visibleItemCount,
confirmButtonText = _d$props.confirmButtonText,
cancelButtonText = _d$props.cancelButtonText,
onInput = _d$props.onInput,
onChange = _d$props.onChange,
onCancel = _d$props.onCancel,
_onConfirm = _d$props.onConfirm,
style = _d$props.style,
className = _d$props.className,
formatValue = _d$props.formatValue,
ref = _d$props.ref,
others = (0, _objectWithoutProperties2.default)(_d$props, _excluded);
var PickRef = (0, _react.useRef)({});
var _useState = (0, _react.useState)(Date.now()),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
innerValue = _useState2[0],
setInnerValue = _useState2[1]; // 真正的选中的值还是在picker里面
var _useState3 = (0, _react.useState)([]),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
columns = _useState4[0],
setColumns = _useState4[1];
var minHour_ = minHour;
var maxHour_ = maxHour;
var minMinute_ = minMinute;
var maxMinute_ = maxMinute;
var getPicker = (0, _react.useCallback)(function () {
if (PickRef.current) {
var setColumnValues = PickRef.current.setColumnValues;
PickRef.current.setColumnValues = function () {
return (
// @ts-ignore
setColumnValues.apply(PickRef.current, [arguments.length <= 1 ? undefined : arguments[1], arguments.length <= 2 ? undefined : arguments[2], false])
);
};
}
return PickRef.current;
}, []);
var getBoundary = (0, _react.useCallback)(function (type, innerValue) {
var _ref;
var value = new Date(innerValue);
var yearDate = "".concat(type, "Date") === 'maxDate' ? maxDate : minDate;
var boundary = new Date(yearDate);
var year = boundary.getFullYear();
var month = 1;
var date = 1;
var hour = 0;
var minute = 0;
if (type === 'max') {
month = 12;
date = (0, _wxs.getMonthEndDay)(value.getFullYear(), value.getMonth() + 1);
hour = 23;
minute = 59;
}
if (value.getFullYear() === year) {
month = boundary.getMonth() + 1;
if (value.getMonth() + 1 === month) {
date = boundary.getDate();
if (value.getDate() === date) {
hour = boundary.getHours();
if (value.getHours() === hour) {
minute = boundary.getMinutes();
}
}
}
}
return _ref = {}, (0, _defineProperty2.default)(_ref, "".concat(type, "Year"), year), (0, _defineProperty2.default)(_ref, "".concat(type, "Month"), month), (0, _defineProperty2.default)(_ref, "".concat(type, "Date"), date), (0, _defineProperty2.default)(_ref, "".concat(type, "Hour"), hour), (0, _defineProperty2.default)(_ref, "".concat(type, "Minute"), minute), _ref;
}, [maxDate, minDate]);
var getRanges = (0, _react.useCallback)(function (nowValue) {
var res = [{
type: 'hour',
range: [minHour_, maxHour_]
}, {
type: 'minute',
range: [minMinute_, maxMinute_]
}];
if (type === 'time') {
return res;
}
var _getBoundary = getBoundary('max', nowValue || innerValue),
maxYear = _getBoundary.maxYear,
maxDate = _getBoundary.maxDate,
maxMonth = _getBoundary.maxMonth,
maxHour = _getBoundary.maxHour,
maxMinute = _getBoundary.maxMinute;
var _getBoundary2 = getBoundary('min', nowValue || innerValue),
minYear = _getBoundary2.minYear,
minDate = _getBoundary2.minDate,
minMonth = _getBoundary2.minMonth,
minHour = _getBoundary2.minHour,
minMinute = _getBoundary2.minMinute;
var result = [{
type: 'year',
range: [minYear, maxYear]
}, {
type: 'month',
range: [minMonth, maxMonth]
}, {
type: 'day',
range: [minDate, maxDate]
}, {
type: 'hour',
range: [minHour, maxHour]
}, {
type: 'minute',
range: [minMinute, maxMinute]
}];
if (type === 'date') result.splice(3, 2);
if (type === 'year-month') result.splice(2, 3);
return result;
}, [getBoundary, innerValue, maxHour_, maxMinute_, minHour_, minMinute_, type]);
var getOriginColumns = (0, _react.useCallback)(function (nowValue) {
var results = getRanges(nowValue).map(function (_ref2) {
var type = _ref2.type,
range = _ref2.range;
var values = (0, _wxs.times)(range[1] - range[0] + 1, function (index) {
var value = range[0] + index;
return type === 'year' ? "".concat(value) : (0, _wxs.padZero)(value);
});
if (filter) {
values = filter(type, values);
}
return {
type: type,
values: values
};
});
return results;
}, [filter, getRanges]);
var updateColumns = (0, _react.useCallback)(function (nowValue) {
var results = getOriginColumns(nowValue).map(function (column) {
return {
values: column.values.map(function (value) {
return formatter(column.type, value);
})
};
});
return setColumns(results);
}, [formatter, getOriginColumns]);
var updateColumnValue = (0, _react.useCallback)(function (value, isChange) {
var values = [];
var picker = getPicker();
if (type === 'time') {
var pair = value.split(':');
values = [formatter('hour', pair[0]), formatter('minute', pair[1])];
} else {
var date = new Date(value);
values = [formatter('year', "".concat(date.getFullYear())), formatter('month', (0, _wxs.padZero)(date.getMonth() + 1))];
if (type === 'date') {
values.push(formatter('day', (0, _wxs.padZero)(date.getDate())));
}
if (type === 'datetime') {
values.push(formatter('day', (0, _wxs.padZero)(date.getDate())), formatter('hour', (0, _wxs.padZero)(date.getHours())), formatter('minute', (0, _wxs.padZero)(date.getMinutes())));
}
}
updateColumns(value);
return new Promise(function (resolve) {
setTimeout(function () {
(0, _taro.nextTick)(function () {
if (others.mode !== 'content' || isChange) {
picker.setValues(values);
}
resolve("".concat(value));
});
}, 6);
});
}, [formatter, getPicker, type, updateColumns]);
var correctValue = (0, _react.useCallback)(function (value) {
// validate value
var isDateType = type !== 'time';
if (isDateType && !(0, _wxs.isValidDate)(value)) {
value = minDate;
} else if (!isDateType && !value) {
value = "".concat((0, _wxs.padZero)(minHour), ":00");
}
// time type
if (!isDateType) {
var _value$split = value.split(':'),
_value$split2 = (0, _slicedToArray2.default)(_value$split, 2),
hour = _value$split2[0],
minute = _value$split2[1];
hour = (0, _wxs.padZero)((0, _wxs.range)(hour, minHour, maxHour));
minute = (0, _wxs.padZero)((0, _wxs.range)(minute, minMinute, maxMinute));
return "".concat(hour, ":").concat(minute);
}
// date type
value = Math.max(value, minDate);
value = Math.min(value, maxDate);
return value;
}, [maxDate, maxHour, maxMinute, minDate, minHour, minMinute, type]);
var updateCurrentValue = function updateCurrentValue(current) {
var val = correctValue(current);
var isEqual = val === innerValue;
if (!isEqual) {
updateColumnValue(val).then(function () {
if (onInput && others.mode !== 'content') {
onInput({
detail: val,
currentTarget: {
dataset: {
type: type
}
}
});
}
});
}
};
(0, _react.useLayoutEffect)(function () {
var v = value;
if (type !== 'time' && typeof value === 'string') {
v = new Date(value).getTime();
}
updateCurrentValue(v);
setTimeout(function () {
setInnerValue(v);
}, 120);
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[type, minDate, maxDate, minHour, maxHour, minMinute, maxMinute, value]);
var onChange_ = function onChange_(e) {
var valueArr = e.detail.value;
var value;
var picker = getPicker();
if (type === 'datetime') {
value = new Date("".concat(valueArr[0], "-").concat(valueArr[1], "-").concat(valueArr[2], " ").concat(valueArr[3], ":").concat(valueArr[4])).getTime();
} else if (type === 'date') {
value = new Date("".concat(valueArr[0], "-").concat(valueArr[1], "-").concat(valueArr[2])).getTime();
} else if (type === 'time') {
value = new Date("".concat(valueArr[0], ":").concat(valueArr[1])).getTime();
} else if (type === 'year-month') {
value = new Date("".concat(valueArr[0], "-").concat(valueArr[1])).getTime();
}
var originColumns = getOriginColumns(value);
if (type === 'time') {
var indexes = picker.getIndexes();
value = "".concat(+originColumns[0].values[indexes[0]], ":").concat(+originColumns[1].values[indexes[1]]);
} else {
var _indexes = picker.getIndexes();
var values = _indexes.map(function (value, index) {
return originColumns[index].values[value];
});
var year = (0, _wxs.getTrueValue)(values[0]);
var month = (0, _wxs.getTrueValue)(values[1]);
var _maxDate = (0, _wxs.getMonthEndDay)(year, month);
var date = (0, _wxs.getTrueValue)(values[2]);
if (type === 'year-month') {
date = 1;
}
date = date > _maxDate ? _maxDate : date;
var hour = 0;
var minute = 0;
if (type === 'datetime') {
hour = (0, _wxs.getTrueValue)(values[3]);
minute = (0, _wxs.getTrueValue)(values[4]);
}
value = new Date(year, month - 1, date, hour, minute);
}
value = correctValue(value);
updateColumnValue(value, true).then(function () {
if (onInput && others.mode !== 'content') onInput({
detail: value,
currentTarget: {
dataset: {
type: type
}
}
});
if (onChange) {
var _e = {
detail: {
datetimePicker: {
columns: columns,
setColumns: setColumns,
innerValue: innerValue,
updateColumnValue: updateColumnValue
}
}
};
onChange(_e);
}
});
};
(0, _react.useImperativeHandle)(ref_, function () {
return {
pickerInstance: PickRef.current,
columns: columns,
setColumns: setColumns,
innerValue: innerValue,
updateColumnValue: updateColumnValue,
updateCurrentValue: updateCurrentValue
};
});
var _renderContent = function _renderContent(data) {
if (others.renderContent) return others.renderContent(data);
if (data !== null && data !== void 0 && data.length) {
if (type === 'datetime') {
return "".concat(data[0], "-").concat(data[1], "-").concat(data[2], " ").concat(data[3], ":").concat(data[4]);
} else if (type === 'date') {
return "".concat(data[0], "-").concat(data[1], "-").concat(data[2]);
} else if (type === 'year-month') {
return "".concat(data[0], "-").concat(data[1]);
} else if (type === 'time') {
return "".concat(data[0], ":").concat(data[1]);
} else return '';
} else return '请选择';
};
// @ts-ignore
var _formatValue = function _formatValue(v) {
if (formatValue) {
return formatValue(v);
} else {
if (type === 'datetime') {
return "".concat(v[0], "-").concat(v[1], "-").concat(v[2], " ").concat(v[3], ":").concat(v[4]);
} else if (type === 'date') {
return "".concat(v[0], "-").concat(v[1], "-").concat(v[2]);
} else if (type === 'year-month') {
return "".concat(v[0], "-").concat(v[1]);
} else if (type === 'time') {
return "".concat(v[0], ":").concat(v[1]);
}
}
};
var valueArr = (0, _react.useMemo)(function () {
var res = (0, _wxs.getCurrentValueArr)(innerValue);
var index = 4;
if (type === 'year-month') index = 1;
if (type === 'time') index = 1;
if (type === 'date') index = 2;
return res.slice(0, index + 1);
}, [innerValue, type]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, _objectSpread({
renderContent: _renderContent,
ref: PickRef,
className: "van-datetime-picker column-class ".concat(className || ''),
style: utils.style([style]),
title: title,
columns: columns,
itemHeight: itemHeight,
showToolbar: showToolbar,
visibleItemCount: visibleItemCount,
confirmButtonText: confirmButtonText,
cancelButtonText: cancelButtonText,
onChange: onChange_,
onConfirm: function onConfirm(event) {
if (others.mode === 'content') {
onInput === null || onInput === void 0 ? void 0 : onInput({
detail: _objectSpread(_objectSpread({}, event.detail), {}, {
value: _formatValue(event.detail.value)
})
});
return;
}
if (_onConfirm) _onConfirm({
detail: _objectSpread(_objectSpread({}, event.detail), {}, {
value: _formatValue(event.detail.value)
})
});
},
onCancel: onCancel,
value: valueArr
}, others));
}
var _default = /*#__PURE__*/(0, _react.forwardRef)(DatetimePicker);
exports.default = _default;