@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
220 lines (219 loc) • 9.88 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _components = require("@tarojs/components");
var _react = _interopRequireWildcard(require("react"));
var utils = _interopRequireWildcard(require("../../../wxs/utils"));
var _utils2 = require("../../utils");
var computed = _interopRequireWildcard(require("./wxs"));
var _jsxRuntime = require("react/jsx-runtime");
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; }
function Index(props, ref) {
var date = props.date,
rowHeight = props.rowHeight,
showMonthTitle = props.showMonthTitle,
showMark = props.showMark,
color = props.color,
type = props.type,
firstDayOfWeek = props.firstDayOfWeek,
currentDate = props.currentDate,
onClick = props.onClick,
minDate = props.minDate,
maxDate = props.maxDate,
allowSameDay = props.allowSameDay,
formatter = props.formatter,
className = props.className,
id = props.id;
var _useState = (0, _react.useState)(true),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
visible = _useState2[0],
setVisible = _useState2[1];
var _useState3 = (0, _react.useState)([]),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
days = _useState4[0],
setDays_ = _useState4[1];
var onClick_ = (0, _react.useCallback)(function (item) {
if (item.type !== 'disabled') {
if (onClick) onClick(item);
}
}, [onClick]);
var getMultipleDayType = (0, _react.useCallback)(function (day) {
if (!Array.isArray(currentDate)) {
return '';
}
var isSelected = function isSelected(date) {
return currentDate.some(function (item) {
return (0, _utils2.compareDay)(item, date) === 0;
});
};
if (isSelected(day)) {
var prevDay = (0, _utils2.getPrevDay)(day);
var nextDay = (0, _utils2.getNextDay)(day);
var prevSelected = isSelected(prevDay);
var nextSelected = isSelected(nextDay);
if (prevSelected && nextSelected) {
return 'multiple-middle';
}
if (prevSelected) {
return 'end';
}
return nextSelected ? 'start' : 'multiple-selected';
}
return '';
}, [currentDate]);
var getRangeDayType = (0, _react.useCallback)(function (day) {
if (!Array.isArray(currentDate)) {
return '';
}
var _currentDate = (0, _slicedToArray2.default)(currentDate, 2),
startDay = _currentDate[0],
endDay = _currentDate[1];
if (!startDay) {
return '';
}
var compareToStart = (0, _utils2.compareDay)(day, startDay);
if (!endDay) {
return compareToStart === 0 ? 'start' : '';
}
var compareToEnd = (0, _utils2.compareDay)(day, endDay);
if (compareToStart === 0 && compareToEnd === 0 && allowSameDay) {
return 'start-end';
}
if (compareToStart === 0) {
return 'start';
}
if (compareToEnd === 0) {
return 'end';
}
if (compareToStart > 0 && compareToEnd < 0) {
return 'middle';
}
return '';
}, [allowSameDay, currentDate]);
var getDayType = (0, _react.useCallback)(function (day) {
if ((0, _utils2.compareDay)(day, minDate) < 0 || (0, _utils2.compareDay)(day, maxDate) > 0) {
return 'disabled';
}
if (type === 'single') {
return (0, _utils2.compareDay)(day, currentDate) === 0 ? 'selected' : '';
}
if (type === 'multiple') {
return getMultipleDayType(day);
}
/* istanbul ignore else */
if (type === 'range') {
return getRangeDayType(day);
}
return '';
}, [currentDate, getMultipleDayType, getRangeDayType, maxDate, minDate, type]);
var getBottomInfo = (0, _react.useCallback)(function (type_) {
if (type === 'range') {
if (type_ === 'start') {
return '开始';
}
if (type_ === 'end') {
return '结束';
}
if (type_ === 'start-end') {
return '开始/结束';
}
}
}, [type]);
var setDays = (0, _react.useCallback)(function () {
var days = [];
var startDate = new Date(date || 0);
var year = startDate.getFullYear();
var month = startDate.getMonth();
var totalDay = (0, _utils2.getMonthEndDay)(startDate.getFullYear(), startDate.getMonth() + 1);
for (var day = 1; day <= totalDay; day++) {
var _date = new Date(year, month, day);
var _type = getDayType(_date);
var config = {
date: _date,
type: _type,
text: day,
bottomInfo: getBottomInfo(_type)
};
if (formatter) {
config = formatter(config);
}
days.push(config);
}
setDays_(days);
}, [date, formatter, getBottomInfo, getDayType]);
(0, _react.useEffect)(function () {
setDays();
}, [setDays]);
(0, _react.useImperativeHandle)(ref, function () {
return {
setVisible: setVisible,
visible: visible
};
});
if (!props.ifRender) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
style: {
minHeight: 428
},
id: id,
className: "van-calendar__month ".concat(className)
});
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
id: id,
className: "van-calendar__month ".concat(className),
style: _objectSpread(_objectSpread({}, computed.getMonthStyle(visible, date, rowHeight ? Number(rowHeight) : 0)), {}, {
minHeight: 428
}),
children: [showMonthTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "van-calendar__month-title",
children: computed.formatMonthTitle(date)
}), visible && days.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
className: "van-calendar__days",
children: [showMark && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "van-calendar__month-mark",
children: computed.getMark(date)
}), days.map(function (item, index) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
style: computed.getDayStyle(item.type, index, date, rowHeight, color, firstDayOfWeek),
className: utils.bem('calendar__day', [item.type]) + ' ' + item.className,
onClick: function onClick() {
return onClick_(item);
},
children: item.type === 'selected' || currentDate === item.date.getTime() ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
className: "van-calendar__selected-day",
style: {
width: rowHeight,
height: rowHeight,
background: color
},
children: [item.topInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "van-calendar__top-info",
children: item.topInfo
}), item.text, item.bottomInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "van-calendar__bottom-info",
children: item.bottomInfo
})]
}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
children: [item.topInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "van-calendar__top-info",
children: item.topInfo
}), item.text, item.bottomInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "van-calendar__bottom-info",
children: item.bottomInfo
})]
})
}, "van-calendar__month".concat(index));
})]
})]
});
}
var _default = /*#__PURE__*/(0, _react.forwardRef)(Index);
exports.default = _default;