@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
403 lines • 16 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
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"];
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) { _defineProperty(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; }
/* eslint-disable @typescript-eslint/ban-ts-comment */
import { useState, useCallback, useRef, useLayoutEffect, forwardRef, useImperativeHandle, useMemo } from 'react';
import { nextTick } from '@tarojs/taro';
import VanPicker from '../picker/index';
import * as utils from '../wxs/utils';
import { get } from '../default-props';
import { defaultFormatter, getMonthEndDay, getTrueValue, times, padZero, range, isValidDate, currentYear, getCurrentValueArr } from './wxs';
import { jsx as _jsx } from "react/jsx-runtime";
var d = get().DatetimePicker;
export 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 ? defaultFormatter : _d$props$formatter,
_d$props$minDate = _d$props.minDate,
minDate = _d$props$minDate === void 0 ? new Date(currentYear - 10, 0, 1).getTime() : _d$props$minDate,
_d$props$maxDate = _d$props.maxDate,
maxDate = _d$props$maxDate === void 0 ? new Date(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 = _objectWithoutProperties(_d$props, _excluded);
var PickRef = useRef({});
var _useState = useState(Date.now()),
_useState2 = _slicedToArray(_useState, 2),
innerValue = _useState2[0],
setInnerValue = _useState2[1]; // 真正的选中的值还是在picker里面
var _useState3 = useState([]),
_useState4 = _slicedToArray(_useState3, 2),
columns = _useState4[0],
setColumns = _useState4[1];
var minHour_ = minHour;
var maxHour_ = maxHour;
var minMinute_ = minMinute;
var maxMinute_ = maxMinute;
var getPicker = 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 = 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 = 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 = {}, _defineProperty(_ref, "".concat(type, "Year"), year), _defineProperty(_ref, "".concat(type, "Month"), month), _defineProperty(_ref, "".concat(type, "Date"), date), _defineProperty(_ref, "".concat(type, "Hour"), hour), _defineProperty(_ref, "".concat(type, "Minute"), minute), _ref;
}, [maxDate, minDate]);
var getRanges = 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 = useCallback(function (nowValue) {
var results = getRanges(nowValue).map(function (_ref2) {
var type = _ref2.type,
range = _ref2.range;
var values = times(range[1] - range[0] + 1, function (index) {
var value = range[0] + index;
return type === 'year' ? "".concat(value) : padZero(value);
});
if (filter) {
values = filter(type, values);
}
return {
type: type,
values: values
};
});
return results;
}, [filter, getRanges]);
var updateColumns = 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 = 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', padZero(date.getMonth() + 1))];
if (type === 'date') {
values.push(formatter('day', padZero(date.getDate())));
}
if (type === 'datetime') {
values.push(formatter('day', padZero(date.getDate())), formatter('hour', padZero(date.getHours())), formatter('minute', padZero(date.getMinutes())));
}
}
updateColumns(value);
return new Promise(function (resolve) {
setTimeout(function () {
nextTick(function () {
if (others.mode !== 'content' || isChange) {
picker.setValues(values);
}
resolve("".concat(value));
});
}, 6);
});
}, [formatter, getPicker, type, updateColumns]);
var correctValue = useCallback(function (value) {
// validate value
var isDateType = type !== 'time';
if (isDateType && !isValidDate(value)) {
value = minDate;
} else if (!isDateType && !value) {
value = "".concat(padZero(minHour), ":00");
}
// time type
if (!isDateType) {
var _value$split = value.split(':'),
_value$split2 = _slicedToArray(_value$split, 2),
hour = _value$split2[0],
minute = _value$split2[1];
hour = padZero(range(hour, minHour, maxHour));
minute = padZero(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
}
}
});
}
});
}
};
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 = getTrueValue(values[0]);
var month = getTrueValue(values[1]);
var _maxDate = getMonthEndDay(year, month);
var date = getTrueValue(values[2]);
if (type === 'year-month') {
date = 1;
}
date = date > _maxDate ? _maxDate : date;
var hour = 0;
var minute = 0;
if (type === 'datetime') {
hour = getTrueValue(values[3]);
minute = 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);
}
});
};
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 = useMemo(function () {
var res = 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__*/_jsx(VanPicker, _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));
}
export default /*#__PURE__*/forwardRef(DatetimePicker);