gui-one-nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
305 lines (304 loc) • 11.8 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["minDate", "maxDate", "type", "isShowChinese", "minuteStep", "modelValue", "visible", "title", "formatter", "onCloseDatePicker", "onConfirmDatePicker", "filter", "onChange", "threeDimensional", "className", "style"];
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; }
import React__default, { useState, useRef, useEffect } from 'react';
import { P as Picker } from './picker.taro-f003b725.js';
var currentYear = new Date().getFullYear();
var defaultProps = {
modelValue: null,
visible: false,
title: '',
type: 'date',
isShowChinese: false,
threeDimensional: true,
minuteStep: 1,
minDate: new Date(currentYear - 10, 0, 1),
maxDate: new Date(currentYear + 10, 11, 31)
};
var DatePicker = function DatePicker(props) {
var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
minDate = _defaultProps$props.minDate,
maxDate = _defaultProps$props.maxDate,
type = _defaultProps$props.type,
isShowChinese = _defaultProps$props.isShowChinese,
minuteStep = _defaultProps$props.minuteStep,
modelValue = _defaultProps$props.modelValue,
visible = _defaultProps$props.visible,
title = _defaultProps$props.title,
formatter = _defaultProps$props.formatter,
onCloseDatePicker = _defaultProps$props.onCloseDatePicker,
onConfirmDatePicker = _defaultProps$props.onConfirmDatePicker,
filter = _defaultProps$props.filter,
onChange = _defaultProps$props.onChange,
threeDimensional = _defaultProps$props.threeDimensional,
className = _defaultProps$props.className,
style = _defaultProps$props.style,
rest = _objectWithoutProperties(_defaultProps$props, _excluded);
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
show = _useState2[0],
setShow = _useState2[1];
var _useState3 = useState(modelValue),
_useState4 = _slicedToArray(_useState3, 2),
currentDate = _useState4[0],
setCurrentDate = _useState4[1];
var _useState5 = useState([]),
_useState6 = _slicedToArray(_useState5, 2),
defaultValue = _useState6[0],
setDefaultValue = _useState6[1];
var _useState7 = useState([]),
_useState8 = _slicedToArray(_useState7, 2),
listData = _useState8[0],
setListData = _useState8[1];
var pickerRef = useRef(null);
var isDate = function isDate(val) {
return Object.prototype.toString.call(val) === '[object Date]' && !Number.isNaN(val.getTime());
};
var zhCNType = {
day: '日',
year: '年',
month: '月',
hour: '时',
minute: '分',
seconds: '秒'
};
var formatValue = function formatValue(value) {
var cvalue = value;
if (!cvalue || cvalue && !isDate(cvalue)) {
cvalue = minDate;
}
var timestmp = Math.max(cvalue.getTime(), minDate.getTime());
timestmp = Math.min(timestmp, maxDate.getTime());
return new Date(timestmp);
};
function getMonthEndDay(year, month) {
return new Date(year, month, 0).getDate();
}
var getBoundary = function getBoundary(type, value) {
var _ref;
var boundary = type === 'min' ? minDate : maxDate;
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;
}
var seconds = minute;
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), _defineProperty(_ref, "".concat(type, "Seconds"), seconds), _ref;
};
var ranges = function ranges(date) {
var curDate = date || currentDate;
console.log(11, currentDate);
if (!curDate) return [];
var _getBoundary = getBoundary('max', curDate),
maxYear = _getBoundary.maxYear,
maxDate = _getBoundary.maxDate,
maxMonth = _getBoundary.maxMonth,
maxHour = _getBoundary.maxHour,
maxMinute = _getBoundary.maxMinute,
maxSeconds = _getBoundary.maxSeconds;
var _getBoundary2 = getBoundary('min', curDate),
minYear = _getBoundary2.minYear,
minDate = _getBoundary2.minDate,
minMonth = _getBoundary2.minMonth,
minHour = _getBoundary2.minHour,
minMinute = _getBoundary2.minMinute,
minSeconds = _getBoundary2.minSeconds;
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]
}, {
type: 'seconds',
range: [minSeconds, maxSeconds]
}];
switch (type.toLocaleLowerCase()) {
case 'date':
result = result.slice(0, 3);
break;
case 'datetime':
result = result.slice(0, 5);
break;
case 'time':
result = result.slice(3, 6);
break;
case 'year-month':
result = result.slice(0, 2);
break;
case 'month-day':
result = result.slice(1, 3);
break;
case 'datehour':
result = result.slice(0, 4);
break;
}
return result;
};
var updateChooseValueCustmer = function updateChooseValueCustmer(index, selectedValue, cacheValueData) {
if (['date', 'datetime', 'datehour', 'month-day', 'year-month'].includes(type.toLocaleLowerCase())) {
var _date;
var formatDate = [];
selectedValue.forEach(function (item) {
formatDate.push(item);
});
if (type.toLocaleLowerCase() === 'month-day' && formatDate.length < 3) {
formatDate.unshift(new Date(modelValue || minDate || maxDate).getFullYear());
}
if (type.toLocaleLowerCase() === 'year-month' && formatDate.length < 3) {
formatDate.push(new Date(modelValue || minDate || maxDate).getDate());
}
var year = Number(formatDate[0]);
var month = Number(formatDate[1]) - 1;
var day = Math.min(Number(formatDate[2]), getMonthEndDay(Number(formatDate[0]), Number(formatDate[1])));
var date = null;
if (type.toLocaleLowerCase() === 'date' || type.toLocaleLowerCase() === 'month-day' || type.toLocaleLowerCase() === 'year-month') {
date = new Date(year, month, day);
} else if (type.toLocaleLowerCase() === 'datetime') {
date = new Date(year, month, day, Number(formatDate[3]), Number(formatDate[4]));
} else if (type.toLocaleLowerCase() === 'datehour') {
date = new Date(year, month, day, Number(formatDate[3]));
}
var isEqual = (currentDate === null || currentDate === void 0 ? void 0 : currentDate.getTime()) === ((_date = date) === null || _date === void 0 ? void 0 : _date.getTime());
date && isDate(date) && !isEqual && setCurrentDate(formatValue(date));
}
props.onChange && props.onChange(index, selectedValue, cacheValueData);
};
var padZero = function padZero(num) {
var targetLength = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
var str = "".concat(num);
while (str.length < targetLength) {
str = "0".concat(str);
}
return str;
};
var formatterOption = function formatterOption(type, value) {
var fOption = null;
if (formatter) {
fOption = formatter(type, {
text: padZero(value, 2),
value: padZero(value, 2)
});
} else {
var padMin = padZero(value, 2);
var fatter = isShowChinese ? zhCNType[type] : '';
fOption = {
text: padMin + fatter,
value: padMin
};
}
return fOption;
};
var generateValue = function generateValue(min, max, val, type, columnIndex) {
var cmin = min;
var arr = [];
var index = 0;
while (cmin <= max) {
arr.push(formatterOption(type, cmin));
if (type === 'minute') {
cmin += minuteStep;
} else {
cmin++;
}
if (cmin <= val) {
index++;
}
}
defaultValue[columnIndex] = arr[index].value;
setDefaultValue(_toConsumableArray(defaultValue));
if (props.filter && props.filter(type, arr)) {
return props.filter(type, arr);
}
return arr;
};
var getDateIndex = function getDateIndex(type) {
if (!currentDate) return 0;
var d = 0;
if (type === 'year') {
d = currentDate.getFullYear();
} else if (type === 'month') {
d = currentDate.getMonth() + 1;
} else if (type === 'day') {
d = currentDate.getDate();
} else if (type === 'hour') {
d = currentDate.getHours();
} else if (type === 'minute') {
d = currentDate.getMinutes();
} else if (type === 'seconds') {
d = currentDate.getSeconds();
}
return d;
};
var columns = function columns(date) {
var val = ranges(date).map(function (res, columnIndex) {
return generateValue(res.range[0], res.range[1], getDateIndex(res.type), res.type, columnIndex);
});
return val || [];
};
useEffect(function () {
setCurrentDate(formatValue(modelValue));
// initDefault()
}, []);
useEffect(function () {
setCurrentDate(formatValue(modelValue));
}, [modelValue]);
useEffect(function () {
setShow(visible);
}, [visible]);
useEffect(function () {
if (currentDate) {
setListData(columns());
}
}, [currentDate]);
return React__default.createElement("div", _objectSpread({
className: "nut-datepicker ".concat(className || ''),
style: style
}, rest), listData.length > 0 && React__default.createElement(Picker, {
isVisible: show,
listData: listData,
onClose: onCloseDatePicker,
defaultValueData: defaultValue,
onConfirm: function onConfirm(values, options) {
return onConfirmDatePicker && onConfirmDatePicker(values, options);
},
onChange: function onChange(index, value, list) {
return updateChooseValueCustmer(index, value, list);
},
threeDimensional: threeDimensional,
ref: pickerRef
}));
};
DatePicker.defaultProps = defaultProps;
DatePicker.displayName = 'NutDatePicker';
export { DatePicker as D };