react-leaf-polls
Version:
Customizable set of poll components for react.
318 lines (307 loc) • 11 kB
JavaScript
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
var styles = {"container":"_2EYYE","inner":"_3x3X6","answer":"_1gKL9","answer_hover":"_28NA5","answerContainer":"_wMDGK"};
function manageVote(results, item, index, refs) {
item.votes++;
countPercentage(results);
animateAnswers(index, results, refs);
}
function animateAnswers(index, results, refs) {
var answer = refs[index].current;
var oppositeIndex = index === 0 ? 1 : 0;
var anotherAnswer = refs[oppositeIndex].current;
var percentage = results[index].percentage;
if (answer && anotherAnswer && percentage) {
answer.animate([{
width: '50%',
easing: 'ease-out'
}, {
width: percentage + "%",
easing: 'ease-out'
}], 500);
anotherAnswer.animate([{
width: '50%',
easing: 'ease-out'
}, {
width: 100 - percentage + "%",
easing: 'ease-out'
}], 500);
answer.style.width = percentage + "%";
anotherAnswer.style.width = 100 - percentage + "%";
answer.animate([{
backgroundColor: 'white'
}, {
backgroundColor: '#efefef'
}], 200);
answer.style.backgroundColor = '#EFEFEF';
var height = answer.offsetHeight;
answer.style.padding = '0';
anotherAnswer.style.padding = '0';
answer.classList.remove(styles.answer_hover);
anotherAnswer.classList.remove(styles.answer_hover);
var inner = refs[0].current;
if (inner) inner.style.height = height + "px";
}
}
function countPercentage(results) {
var sum = results[0].votes + results[1].votes;
results[0].percentage = Math.round(results[0].votes / sum * 100);
results[1].percentage = Math.round(results[1].votes / sum * 100);
}
var BinaryPoll = function BinaryPoll(_ref) {
var question = _ref.question,
results = _ref.results,
theme = _ref.theme,
onVote = _ref.onVote,
isVoted = _ref.isVoted;
var _useState = React.useState(false),
voted = _useState[0],
setVoted = _useState[1];
var answersContainer = React.useRef(null);
var answer0 = React.useRef(null);
var answer1 = React.useRef(null);
var allRefs = [answer0, answer1, answersContainer];
React.useEffect(function () {
if (isVoted) {
countPercentage(results);
animateAnswers(0, results, allRefs);
setVoted(true);
}
}, []);
return React__default.createElement("article", {
className: styles.container,
style: {
alignItems: theme === null || theme === void 0 ? void 0 : theme.alignment
}
}, question && React__default.createElement("h1", {
style: {
color: theme === null || theme === void 0 ? void 0 : theme.textColor
}
}, question), React__default.createElement("div", {
ref: answersContainer,
className: styles.inner,
style: {
backgroundColor: theme === null || theme === void 0 ? void 0 : theme.backgroundColor
}
}, React__default.createElement("div", {
ref: answer0,
role: 'button',
className: styles.answer_hover + ' ' + styles.answer,
id: 'binAnswer0',
onClick: function onClick() {
if (!voted) {
setVoted(true);
manageVote(results, results[0], 0, allRefs);
onVote === null || onVote === void 0 ? void 0 : onVote(results[0], results);
}
}
}, React__default.createElement("div", {
className: styles.answerContainer
}, React__default.createElement("p", {
style: {
color: theme === null || theme === void 0 ? void 0 : theme.leftColor
}
}, results[0].text), voted && React__default.createElement("span", {
style: {
color: theme === null || theme === void 0 ? void 0 : theme.textColor
}
}, results[0].percentage, "%"))), React__default.createElement("div", {
ref: answer1,
role: 'button',
className: styles.answer_hover + ' ' + styles.answer,
id: 'binAnswer1',
onClick: function onClick() {
if (!voted) {
setVoted(true);
manageVote(results, results[1], 1, allRefs);
onVote === null || onVote === void 0 ? void 0 : onVote(results[1], results);
}
}
}, React__default.createElement("div", {
className: styles.answerContainer
}, React__default.createElement("p", {
style: {
color: theme === null || theme === void 0 ? void 0 : theme.rightColor
}
}, results[1].text), voted && React__default.createElement("span", {
style: {
color: theme === null || theme === void 0 ? void 0 : theme.textColor
}
}, results[1].percentage, "%")))));
};
var styles$1 = {"container":"_1xGEd","answer":"_3gEzx","answer_hover":"_cCkxB","answerInner":"_is6ww"};
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _createForOfIteratorHelperLoose(o, allowArrayLike) {
var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
if (it) return (it = it.call(o)).next.bind(it);
if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
if (it) o = it;
var i = 0;
return function () {
if (i >= o.length) return {
done: true
};
return {
done: false,
value: o[i++]
};
};
}
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function manageVote$1(results, item, refs, theme) {
item.votes++;
countPercentage$1(results);
animateAnswers$1(results, refs, theme, item.id);
}
function animateAnswers$1(results, refs, theme, index, isVotedId) {
var answers = [];
var restOfAnswers = [];
for (var _iterator = _createForOfIteratorHelperLoose(results), _step; !(_step = _iterator()).done;) {
var result = _step.value;
if (index !== undefined) {
result.id !== index && restOfAnswers.push(result);
} else {
restOfAnswers = results;
}
var answerBuffer = refs.current[result.id].current;
answerBuffer && answers.push(answerBuffer);
}
if (index !== undefined) {
answers[index].animate([{
width: 0,
easing: 'ease-out',
backgroundColor: 'white'
}, {
width: results[index].percentage + "%",
easing: 'ease-out',
backgroundColor: "" + (theme === null || theme === void 0 ? void 0 : theme.mainColor)
}], 500);
answers[index].style.width = results[index].percentage + "%";
if (theme !== null && theme !== void 0 && theme.mainColor) answers[index].style.backgroundColor = theme === null || theme === void 0 ? void 0 : theme.mainColor;
}
for (var _iterator2 = _createForOfIteratorHelperLoose(restOfAnswers), _step2; !(_step2 = _iterator2()).done;) {
var ans = _step2.value;
answers[ans.id].animate([{
width: 0,
easing: 'ease-out',
backgroundColor: 'white'
}, {
width: ans.percentage + "%",
easing: 'ease-out',
backgroundColor: "" + (ans.id === isVotedId ? theme === null || theme === void 0 ? void 0 : theme.mainColor : '#efefef')
}], 500);
answers[ans.id].style.width = ans.percentage + "%";
answers[ans.id].style.backgroundColor = "" + (ans.id === isVotedId ? theme === null || theme === void 0 ? void 0 : theme.mainColor : '#efefef');
}
}
function countPercentage$1(results) {
var votes = [];
var sum = 0;
for (var _iterator3 = _createForOfIteratorHelperLoose(results), _step3; !(_step3 = _iterator3()).done;) {
var result = _step3.value;
votes.push(result.votes);
sum += result.votes;
}
for (var i = 0; i < votes.length; i++) {
results[i].percentage = sum === 0 ? 0 : Math.floor(votes[i] / sum * 100);
}
}
var MultiplePoll = function MultiplePoll(_ref) {
var question = _ref.question,
results = _ref.results,
theme = _ref.theme,
onVote = _ref.onVote,
isVoted = _ref.isVoted,
isVotedId = _ref.isVotedId;
var _useState = React.useState(false),
voted = _useState[0],
setVoted = _useState[1];
var answerRefs = React.useRef(results.map(function () {
return React.createRef();
}));
React.useEffect(function () {
if (isVoted) {
countPercentage$1(results);
animateAnswers$1(results, answerRefs, theme, undefined, isVotedId);
setVoted(true);
}
}, []);
return React__default.createElement("article", {
className: styles$1.container,
style: {
alignItems: theme === null || theme === void 0 ? void 0 : theme.alignment
}
}, question && React__default.createElement("h1", {
style: {
color: theme === null || theme === void 0 ? void 0 : theme.textColor
}
}, question), results.map(function (result) {
return React__default.createElement("div", {
key: result.id,
role: 'button',
id: 'mulAnswer' + result.id,
className: voted ? styles$1.answer : styles$1.answer_hover + ' ' + styles$1.answer,
style: {
backgroundColor: theme === null || theme === void 0 ? void 0 : theme.backgroundColor
},
onClick: function onClick() {
if (!voted) {
setVoted(true);
manageVote$1(results, result, answerRefs, theme);
onVote === null || onVote === void 0 ? void 0 : onVote(result, results);
}
}
}, React__default.createElement("div", {
ref: answerRefs.current[result.id],
className: styles$1.answerInner
}, React__default.createElement("p", {
style: {
color: theme === null || theme === void 0 ? void 0 : theme.textColor
}
}, result.text)), voted && React__default.createElement("span", {
style: {
color: theme === null || theme === void 0 ? void 0 : theme.textColor
}
}, result.percentage, "%"));
}));
};
var LeafPoll = function LeafPoll(_ref) {
var type = _ref.type,
question = _ref.question,
results = _ref.results,
theme = _ref.theme,
onVote = _ref.onVote,
_ref$isVoted = _ref.isVoted,
isVoted = _ref$isVoted === void 0 ? false : _ref$isVoted,
isVotedId = _ref.isVotedId;
return type === 'binary' ? React.createElement(BinaryPoll, {
question: question,
results: results,
theme: theme,
onVote: onVote,
isVoted: isVoted
}) : React.createElement(MultiplePoll, {
question: question,
results: results,
theme: theme,
onVote: onVote,
isVoted: isVoted,
isVotedId: isVotedId
});
};
exports.LeafPoll = LeafPoll;
//# sourceMappingURL=index.js.map