@gem-mine/rmc-calendar
Version:
React Mobile Calendar Component(web and react-native)
252 lines (220 loc) • 11.5 kB
JavaScript
;
exports.__esModule = true;
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _react = require('react');
var React = _interopRequireWildcard(_react);
var _CalendarPanel = require('./CalendarPanel.base');
var _CalendarPanel2 = _interopRequireDefault(_CalendarPanel);
var _WeekPanel = require('./WeekPanel');
var _WeekPanel2 = _interopRequireDefault(_WeekPanel);
var _SingleMonth = require('./SingleMonth');
var _SingleMonth2 = _interopRequireDefault(_SingleMonth);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var DatePicker = function (_Component) {
(0, _inherits3['default'])(DatePicker, _Component);
function DatePicker() {
(0, _classCallCheck3['default'])(this, DatePicker);
var _this = (0, _possibleConstructorReturn3['default'])(this, _Component.apply(this, arguments));
_this.transform = '';
_this.now = new Date();
_this.today = new Date(_this.now.getFullYear(), _this.now.getMonth(), _this.now.getDate());
_this.genMonthComponent = function (data) {
if (!data) return;
return React.createElement(_SingleMonth2['default'], { key: data.title, today: _this.today, locale: _this.props.locale || {}, monthData: data, showBeginEndInfo: _this.props.showBeginEndInfo, onCellClick: _this.onCellClick, disabledDate: _this.props.disabledDate, renderDateCellExtra: _this.props.renderDateCellExtra, renderDateFullCell: _this.props.renderDateFullCell, ref: function ref(dom) {
// FIXME?: sometimes will callback twice, and the second is null, when use preact.
data.componentRef = dom || data.componentRef || undefined;
data.updateLayout = function () {
_this.computeHeight(data, dom);
};
data.updateLayout();
} });
};
_this.computeHeight = function (data, singleMonth) {
if (singleMonth && singleMonth.wrapperDivDOM) {
// preact, ref时dom有可能无height, offsetTop数据。
if (!data.height && !singleMonth.wrapperDivDOM.clientHeight) {
setTimeout(function () {
return _this.computeHeight(data, singleMonth);
}, 500);
return;
}
data.height = singleMonth.wrapperDivDOM.clientHeight || data.height || 0;
data.y = singleMonth.wrapperDivDOM.offsetTop || data.y || 0;
}
};
_this.setLayout = function (dom) {
if (dom) {
var onLayout = _this.props.onLayout;
onLayout && onLayout(dom.clientHeight);
var scrollHandler = _this.createOnScroll();
dom.ontouchmove = function (evt) {
var positionObj = {
client: dom.clientHeight,
full: evt.currentTarget.clientHeight,
top: -_this.touchParams.lastY
};
var top = positionObj.top;
var onChangeShowDateInfo = _this.props.onChangeShowDateInfo;
var months = _this.state.months;
var length = months.length;
for (var i = 0; i < length; i++) {
var _months$i = months[i],
y = _months$i.y,
height = _months$i.height,
firstDate = _months$i.firstDate,
title = _months$i.title;
if (typeof y !== 'number' || typeof height !== 'number') continue;
if (y < top && top < y + height) {
onChangeShowDateInfo && onChangeShowDateInfo(firstDate, title);
break;
}
}
scrollHandler(positionObj);
};
}
};
_this.setPanel = function (dom) {
_this.panel = dom;
};
// tslint:disable-next-line:member-ordering
_this.touchHandler = function () {
var initDelta = 0;
var lastY = 0;
var delta = initDelta;
return {
onTouchStart: function onTouchStart(evt) {
lastY = evt.touches[0].screenY;
delta = initDelta;
_this.touchParams.startTime = Date.now();
},
onTouchMove: function onTouchMove(evt) {
var ele = evt.currentTarget;
var isReachTop = ele.scrollTop === 0 && _this.touchParams.lastY === 0;
delta = evt.touches[0].screenY - lastY;
_this.touchParams.lastTime = Date.now();
if (isReachTop && delta > 0) {
if (delta > 0) {
evt.preventDefault();
if (delta > 80) {
delta = 80;
}
} else {
delta = 0;
}
_this.setTransform(delta);
} else {
_this.setTransform(_this.touchParams.lastY + delta);
}
},
onTouchEnd: function onTouchEnd() {
_this.touchHandler.onFinish();
},
onTouchCancel: function onTouchCancel() {
_this.touchHandler.onFinish();
},
onFinish: function onFinish() {
_this.touchParams.lastY += delta;
_this.touchParams.lastTime = Date.now();
if (delta > 20 && _this.canLoadPrev() && _this.touchParams.lastY >= 0) {
var _this$props = _this.props,
initalMonths = _this$props.initalMonths,
onChangeShowDateInfo = _this$props.onChangeShowDateInfo;
_this.genMonthData(_this.state.months[0].firstDate, -1);
_this.visibleMonth = _this.state.months.slice(0, initalMonths);
_this.state.months.forEach(function (m) {
m.updateLayout && m.updateLayout();
});
_this.forceUpdate(function () {
_this.state.months.reduce(function (pre, next) {
if (typeof pre.height === 'number' && typeof next.y === 'number') {
next.y = pre.y + pre.height;
}
return next;
}, { height: 0, y: 0 });
var _this$state$months$ = _this.state.months[0],
firstDate = _this$state$months$.firstDate,
title = _this$state$months$.title;
onChangeShowDateInfo && onChangeShowDateInfo(firstDate, title);
});
_this.setTransform(0, 'end');
_this.touchParams.lastY = 0;
} else {
var moveTime = _this.touchParams.lastTime - _this.touchParams.startTime;
if (moveTime <= 300) {
delta = delta < -20 ? -20 : delta > 20 ? 20 : delta;
_this.touchParams.lastY += delta;
moveTime += 1000;
}
_this.setTransform(_this.touchParams.lastY, 'end', moveTime);
}
}
};
}();
_this.setTransform = function () {
var translateY = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var type = arguments[1];
var time = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1000;
if (!_this.panel) return;
if (type === 'end') {
_this.panel.style.transition = 'transform ' + time + 'ms cubic-bezier(0.19, 1, 0.22, 1)';
} else {
_this.panel.style.transition = '';
}
_this.panel.style.transform = 'translateY(' + translateY + 'px)';
};
return _this;
}
DatePicker.prototype.render = function render() {
var _this2 = this;
var _props = this.props,
_props$prefixCls = _props.prefixCls,
prefixCls = _props$prefixCls === undefined ? '' : _props$prefixCls,
_props$locale = _props.locale,
locale = _props$locale === undefined ? {} : _props$locale,
firstDayOfWeek = _props.firstDayOfWeek;
var style = {
transform: this.transform
};
return React.createElement(
'div',
{ className: prefixCls + ' calendar-panel' },
React.createElement(_WeekPanel2['default'], { locale: locale, firstDayOfWeek: firstDayOfWeek }),
React.createElement(
'div',
{ className: 'wrapper', style: {
overflowX: 'hidden',
overflowY: 'visible'
}, ref: this.setLayout, onTouchStart: this.touchHandler.onTouchStart, onTouchMove: this.touchHandler.onTouchMove, onTouchEnd: this.touchHandler.onTouchEnd, onTouchCancel: this.touchHandler.onTouchCancel },
React.createElement(
'div',
{ style: style, ref: this.setPanel },
this.canLoadPrev() && React.createElement(
'div',
{ className: 'load-tip' },
locale.loadPrevMonth
),
React.createElement(
'div',
{ className: 'months' },
this.state.months.map(function (m) {
var hidden = m.height && _this2.visibleMonth.indexOf(m) < 0;
if (hidden) {
return React.createElement('div', { key: m.title + '_shallow', style: { height: m.height } });
}
return m.component;
})
)
)
)
);
};
return DatePicker;
}(_CalendarPanel2['default']);
exports['default'] = DatePicker;
module.exports = exports['default'];