ukelli-ui
Version:
Base on React's UI lib. Make frontend's dev simpler and faster.
212 lines (211 loc) • 9.32 kB
JavaScript
/* eslint-disable react/no-multi-comp */
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React, { Component } from 'react';
import { Call, TimeFormat } from 'basic-helper';
import { Grid } from '../../core/grid';
var AnimatedCard = function (_a) {
var position = _a.position, animation = _a.animation, digit = _a.digit, style = _a.style;
return (React.createElement("div", { className: "flip-card " + position + " " + animation, style: style },
React.createElement("span", { className: "count" }, digit)));
};
var StaticCard = function (_a) {
var position = _a.position, digit = _a.digit, style = _a.style;
return (React.createElement("div", { className: position, style: style },
React.createElement("span", { className: "count" }, digit)));
};
var FlipUnitContainer = /** @class */ (function (_super) {
__extends(FlipUnitContainer, _super);
function FlipUnitContainer() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.preDigit = 0;
_this.shuffle = true;
_this.state = {
preDigit: 0,
shuffle: true
};
return _this;
}
FlipUnitContainer.prototype.shouldComponentUpdate = function (nextProps) {
if (this.props.digit !== nextProps.digit) {
this.preDigit = this.props.digit;
this.shuffle = !this.shuffle;
}
return true;
};
FlipUnitContainer.prototype.render = function () {
var _a = this.props, digit = _a.digit, unit = _a.unit, _b = _a.width, width = _b === void 0 ? 140 : _b, _c = _a.height, height = _c === void 0 ? 120 : _c, flipItemStyle = _a.flipItemStyle;
// const { shuffle, preDigit } = this.state;
var _d = this, shuffle = _d.shuffle, preDigit = _d.preDigit;
var previousDigit = +preDigit || 0;
var currentDigit = +digit;
// let previousDigit = +FlipDigitCache[unit] || 0;
if (unit !== 'hour') {
previousDigit = previousDigit === -1 ? 59 : previousDigit;
previousDigit = previousDigit === 60 ? '00' : previousDigit;
}
else {
previousDigit = previousDigit === -1 ? 23 : previousDigit;
}
if (+currentDigit < 10) {
currentDigit = "0" + currentDigit;
}
if (previousDigit !== '00' && previousDigit < 10) {
previousDigit = "0" + previousDigit;
}
var digit1 = shuffle ? previousDigit : currentDigit;
var digit2 = !shuffle ? previousDigit : currentDigit;
var animation1 = shuffle ? 'fold' : 'unfold';
var animation2 = !shuffle ? 'fold' : 'unfold';
var scaleStyle = {
height: height, width: width, fontSize: height / 1.3
};
var styleForAnimate = __assign(__assign({}, flipItemStyle), { height: height / 2, width: width });
return (React.createElement("div", { className: "flip-unit-container", style: scaleStyle },
React.createElement(StaticCard, { position: "before", style: flipItemStyle, digit: currentDigit }),
React.createElement(StaticCard, { position: "now", style: flipItemStyle, digit: previousDigit }),
React.createElement(AnimatedCard, { style: styleForAnimate, position: "first", digit: digit1, animation: animation1 }),
React.createElement(AnimatedCard, { style: styleForAnimate, position: "second", digit: digit2, animation: animation2 })));
};
FlipUnitContainer.defaultProps = {
width: 140,
height: 120,
};
return FlipUnitContainer;
}(React.Component));
var Countdown = /** @class */ (function (_super) {
__extends(Countdown, _super);
// isTimerStart = false;
function Countdown(props) {
var _this = _super.call(this, props) || this;
_this.state = {
isTimerStart: false,
countdown: 0
};
return _this;
}
Countdown.prototype.shouldComponentUpdate = function (nextProps, nextState) {
var isReceiveNewProps = this.props !== nextProps;
var isNewCount = this.state.countdown !== nextState.countdown;
var isChangeTimerStatus = this.state.isTimerStart !== nextState.isTimerStart;
// if(isReceiveNewProps) {
// this.clearTimer();
// }
return isNewCount || isReceiveNewProps || isChangeTimerStatus;
};
Countdown.prototype.componentDidMount = function () {
this.startCountdown();
};
Countdown.prototype.componentDidUpdate = function (prevProps, prevState) {
if (this.props.start != prevProps.start || !this.state.isTimerStart) {
this.clearTimer();
this.startCountdown();
}
};
Countdown.prototype.componentWillUnmount = function () {
this.clearTimer();
};
Countdown.prototype.startCountdown = function () {
var start = this.props.start;
if (this.state.isTimerStart || start === 0)
return;
this.clearTimer();
this.startTimer();
};
Countdown.prototype.setJumpElemCount = function (timeObj) {
if (!this.jumpElem)
return;
this.jumpElem.innerHTML = timeObj.hour + ":" + timeObj.min + ":" + timeObj.sec || 0;
};
Countdown.prototype.clearTimer = function () {
// this.isTimerStart = false;
this.interval && clearInterval(this.interval);
this.interval = null;
this.setState({
isTimerStart: false
});
};
Countdown.prototype.startTimer = function () {
var _this = this;
if (this.state.isTimerStart)
return;
var _a = this.props, start = _a.start, countdownNotifyTimer = _a.countdownNotifyTimer, onCountdownNotify = _a.onCountdownNotify, onTimeout = _a.onTimeout;
var countdown = start - 1;
// this.isTimerStart = true;
this.setState({
isTimerStart: true,
countdown: countdown
});
this.interval = setInterval(function () {
countdown--;
_this.setState({
countdown: (countdown < 0) ? 0 : countdown
});
if (countdownNotifyTimer && countdown === +countdownNotifyTimer) {
Call(onCountdownNotify, countdown);
}
if (countdown === -1) {
onTimeout();
_this.clearTimer();
// clearInterval(oneRound);
// this.setState({
// isTimerStart: false,
// isTimeout: true
// });
}
}, 1000);
};
Countdown.prototype.render = function () {
var _a = this.props, width = _a.width, height = _a.height, countdownNotifyTimer = _a.countdownNotifyTimer, onCountdownNotify = _a.onCountdownNotify, onTimeout = _a.onTimeout, flipItemStyle = _a.flipItemStyle, className = _a.className, other = __rest(_a, ["width", "height", "countdownNotifyTimer", "onCountdownNotify", "onTimeout", "flipItemStyle", "className"]);
var countdown = this.state.countdown;
var timeObj = TimeFormat(countdown);
this.setJumpElemCount(timeObj);
// const hasCountdown = countdown != -1;
var container = (React.createElement("section", { className: "flip-clock " + (className || '') },
React.createElement(Grid, { container: true }, Object.keys(timeObj).map(function (unit, idx) {
var currTime = timeObj[unit];
return (React.createElement(Grid, __assign({ key: unit }, other),
React.createElement(FlipUnitContainer, { unit: unit, flipItemStyle: flipItemStyle, width: width, height: height, digit: currTime })));
}))));
return container;
};
Countdown.defaultProps = {
width: 140,
height: 120,
};
return Countdown;
}(Component));
export default Countdown;