@gamelearn/arcade-components 0.7.1 → 0.9.0

package/dist/components/{decision-component/components/Rewards.js → rewards-component/components/RewardsComponent.js}

@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _RewardItem = _interopRequireDefault(require("./RewardItem"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
@@ -35,46 +37,66 @@ function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "und
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var Rewards = function Rewards(_ref) {
+var RewardsComponent = function RewardsComponent(_ref) {
   var rewards = _ref.rewards,
       addPoints = _ref.addPoints,
-      indicators = _ref.indicators;
-  // Constantes para carrousel
-  var itemRef = (0, _react.useRef)();
-  var carouselContentRef = (0, _react.useRef)();
+      emitEvent = _ref.emitEvent;
+  var carouselRef = (0, _react.useRef)();
+  var indicators = emitEvent({
+    type: 'loadIndicators'
+  });
 
   var _useState = (0, _react.useState)(0),
       _useState2 = _slicedToArray(_useState, 2),
-      itemWidth = _useState2[0],
-      setItemWidth = _useState2[1];
+      offset = _useState2[0],
+      setOffset = _useState2[1];
+
+  var rewardsSize = (0, _react.useRef)({});
 
   var _useState3 = (0, _react.useState)(0),
       _useState4 = _slicedToArray(_useState3, 2),
-      carouselContentWidth = _useState4[0],
-      setCarouselContentWidth = _useState4[1];
+      leftAmount = _useState4[0],
+      setLeftAmount = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(0),
+  var _useState5 = (0, _react.useState)(),
       _useState6 = _slicedToArray(_useState5, 2),
-      offset = _useState6[0],
-      setOffset = _useState6[1];
+      rightAmount = _useState6[0],
+      setRightAmount = _useState6[1];
 
-  var _useState7 = (0, _react.useState)("translateX(0px)"),
+  var _useState7 = (0, _react.useState)(0),
       _useState8 = _slicedToArray(_useState7, 2),
-      transform = _useState8[0],
-      setTransform = _useState8[1];
+      totalItems = _useState8[0],
+      setTotalItems = _useState8[1];
 
-  var _useState9 = (0, _react.useState)(0),
-      _useState10 = _slicedToArray(_useState9, 2),
-      itemsLeft = _useState10[0],
-      setItemsLeft = _useState10[1];
-
-  var onlyGrade = rewards.filter(function (reward) {
-    return reward.type === 'grade';
-  }).length === rewards.length;
   var filteredRewards = rewards.filter(function (reward) {
     return reward.type !== 'grade';
   });
   var rewardsUnified = [];
+  var displayingItems = 4;
+
+  var getIndicator = function getIndicator(element) {
+    var group = indicators[element.type];
+
+    if (group) {
+      var indicator = group.find(function (r) {
+        return r.id === element.id;
+      });
+      return indicator || null;
+    }
+
+    return null;
+  };
+
+  var getLabel = function getLabel(element) {
+    var indicator = getIndicator(element);
+    return indicator ? indicator.name : null;
+  };
+
+  var _getIcon = function getIcon(element) {
+    var indicator = getIndicator(element);
+    return indicator ? indicator.icon : null;
+  };
+
   filteredRewards.forEach(function (currentReward) {
     var found = rewardsUnified.findIndex(function (reward) {
       return currentReward.id === reward.id;
@@ -83,121 +105,86 @@ var Rewards = function Rewards(_ref) {
     if (found >= 0) {
       rewardsUnified[found].points += currentReward.points;
     } else {
-      rewardsUnified.push(_objectSpread({}, currentReward));
+      rewardsUnified.push(_objectSpread(_objectSpread({}, currentReward), {}, {
+        label: getLabel(currentReward)
+      }));
     }
   });
-  var filteredRewardsUnified = rewardsUnified.filter(function (reward) {
-    return reward.points !== 0;
-  });
-  var noRewards = filteredRewardsUnified.length === 0;
-  (0, _react.useEffect)(function () {
-    if (onlyGrade) {
-      addPoints();
-    }
-  }, [onlyGrade, addPoints]);
-  (0, _react.useEffect)(function () {
-    if (carouselContentRef.current) {
-      setCarouselContentWidth(carouselContentRef.current.offsetWidth);
-    }
-  }, [carouselContentRef]);
-  (0, _react.useEffect)(function () {
-    var itemInScreen = Math.floor(carouselContentWidth / itemWidth);
-    var currentItemsLeft = filteredRewardsUnified.length - itemInScreen - offset;
-    setItemsLeft(currentItemsLeft);
-  }, [carouselContentWidth, itemWidth, offset, filteredRewardsUnified.length]);
-  (0, _react.useEffect)(function () {
-    setTransform("translateX(-".concat(itemWidth * offset, "px)"));
-  }, [itemWidth, offset]);
-  (0, _react.useEffect)(function () {
-    if (itemRef.current) {
-      var separatorWidth = Number.parseInt(window.getComputedStyle(itemRef.current).getPropertyValue('margin-right').split('px')[0], 0);
-      var iWidth = Number.parseInt(itemRef.current.offsetWidth, 0);
-      setItemWidth(separatorWidth + iWidth);
-    }
-  }, [carouselContentRef, itemRef]);
 
   var onClickPrev = function onClickPrev() {
-    if (offset <= 0) return;
+    if (offset - 1 < 0) return;
     setOffset(offset - 1);
+    var nextSize = Object.values(rewardsSize.current)[offset - 1];
+    setRightAmount(null);
+    setLeftAmount(leftAmount + nextSize);
   };
 
   var onClickNext = function onClickNext() {
-    if (itemsLeft <= 1) {
-      return;
-    }
-
+    if (offset + displayingItems >= totalItems) return;
+    setRightAmount(offset + displayingItems === totalItems - 1 ? 0 : null);
     setOffset(offset + 1);
+    var nextSize = Object.values(rewardsSize.current)[offset];
+    setLeftAmount(leftAmount - nextSize);
   };
 
-  if (onlyGrade || noRewards) {
-    return null;
-  }
-
+  (0, _react.useEffect)(function () {
+    setTotalItems(Object.values(rewardsSize.current).length);
+  }, []);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "test--results__rewards"
   }, /*#__PURE__*/_react.default.createElement("span", {
     onClick: onClickPrev,
-    className: "icon-back ".concat(filteredRewardsUnified.length < 4 ? 'visibility--hidden' : '', " ").concat(offset <= 0 ? 'disabled' : '')
+    className: "icon-back ".concat(rewardsUnified.length <= displayingItems ? 'visibility--hidden' : '', " ").concat(offset <= 0 ? 'disabled' : '')
   }), /*#__PURE__*/_react.default.createElement("div", {
-    ref: carouselContentRef,
     className: "test--results__carrousel"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "test--results__carrousel--list test--results__centered",
     style: {
-      transform: transform
+      position: 'relative',
+      height: '100%',
+      overflow: 'hidden'
     }
-  }, filteredRewardsUnified.map(function (reward, i) {
-    var group = indicators.find(function (g) {
-      return g.type === reward.type;
-    });
-
-    if (!group) {
-      return null;
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: carouselRef,
+    style: {
+      display: 'flex',
+      position: 'absolute',
+      left: rewardsUnified.length >= displayingItems && leftAmount !== null && rightAmount == null ? "".concat(leftAmount, "px") : 'auto',
+      right: rightAmount !== null ? "".concat(rightAmount) : 'auto',
+      transition: 'all .2s linear'
     }
-
-    var indicator = group.records.find(function (r) {
-      return r.id === reward.id;
+  }, rewardsUnified && Object.values(rewardsUnified).map(function (reward) {
+    return /*#__PURE__*/_react.default.createElement(_RewardItem.default, {
+      key: reward.id,
+      ref: function ref(node) {
+        if (node) {
+          var computedStyle = window.getComputedStyle(node);
+          var marginString = computedStyle.marginLeft.split('px')[0];
+          var marginLeft = parseInt(marginString, 10);
+          rewardsSize.current[reward.id] = node.clientWidth + marginLeft * 2;
+        }
+      },
+      emitEvent: emitEvent,
+      elementReward: reward,
+      getIcon: function getIcon(icon) {
+        return _getIcon(icon);
+      }
     });
-
-    if (!indicator) {
-      return null;
-    }
-
-    return /*#__PURE__*/_react.default.createElement("div", {
-      key: indicator.name,
-      ref: itemRef,
-      className: "test--results__carrousel--item"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "test--rewards__icons"
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: indicator.icon
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      className: "test--rewards__indicator\n                  ".concat(reward.points > 0 ? 'success' : 'failed')
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "".concat(reward.points > 0 ? 'icon-up' : 'icon-down')
-    }))), /*#__PURE__*/_react.default.createElement("span", {
-      className: "test--rewards__text"
-    }, /*#__PURE__*/_react.default.createElement("b", null, reward.points > 0 ? '+' : '', reward.points), ":", indicator.name));
-  }))), /*#__PURE__*/_react.default.createElement("span", {
+  })))), /*#__PURE__*/_react.default.createElement("span", {
     onClick: onClickNext,
-    className: "icon-next ".concat(filteredRewardsUnified.length < 4 ? 'visibility--hidden' : '', " ").concat(itemsLeft <= 1 ? 'disabled' : '')
+    className: "icon-next ".concat(rewardsUnified.length <= displayingItems ? 'visibility--hidden' : '', " ").concat(offset + displayingItems >= totalItems ? 'disabled' : '')
   }));
 };
 
-Rewards.defaultProps = {
-  rewards: [],
-  indicators: [],
-  addPoints: function addPoints() {}
+RewardsComponent.propTypes = {
+  nodeId: _propTypes.default.string,
+  context: _propTypes.default.shape({}),
+  rewards: _propTypes.default.arrayOf({})
 };
-Rewards.propTypes = {
-  indicators: _propTypes.default.arrayOf(_propTypes.default.shape({})),
-  rewards: _propTypes.default.arrayOf(_propTypes.default.shape({
-    type: _propTypes.default.string,
-    id: _propTypes.default.string,
-    name: _propTypes.default.string,
-    points: _propTypes.default.number
-  })),
-  addPoints: _propTypes.default.func
+RewardsComponent.defaultProps = {
+  nodeId: 0,
+  context: {},
+  rewards: []
 };
-var _default = Rewards;
+var _default = RewardsComponent;
 exports.default = _default;

package/dist/components/rewards-component/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _RewardsComponent = _interopRequireDefault(require("./components/RewardsComponent"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _RewardsComponent.default;
+exports.default = _default;

package/dist/components/rewards-component/mocks/mockForStory.js

@@ -0,0 +1,264 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mockProps5 = exports.mockProps4 = exports.mockProps3 = exports.mockProps2 = exports.mockProps1 = void 0;
+
+var emitEvent = function emitEvent(_ref) {
+  var type = _ref.type,
+      payload = _ref.payload;
+
+  if (type === 'translate') {
+    return payload;
+  }
+
+  if (type === 'loadIndicators') {
+    return {
+      score: [{
+        color: '#4e469e',
+        description: 'description_0_dY5ms0vf',
+        description_labelId: 'description_0_dY5ms0vf',
+        icon: 'font-indicator-bolsa',
+        id: 'ki4qrkam',
+        name: 'Indicator1',
+        name_labelId: 'name_0_dY5ms9T1',
+        points: 295,
+        type: 'score'
+      }, {
+        color: '#4e469e',
+        description: 'description_0_dY5ms0vf',
+        description_labelId: 'description_0_dY5ms0vf',
+        icon: 'font-indicator-bolsa',
+        id: 'ki4qrop',
+        name: 'Indicator1',
+        name_labelId: 'name_0_dY5ms9T1',
+        points: 300,
+        type: 'score'
+      }, {
+        color: '#4e469e',
+        description: 'description_0_dY5ms0vf',
+        description_labelId: 'description_0_dY5ms0vf',
+        icon: 'font-indicator-bolsa',
+        id: 'ki4qiuyi',
+        name: 'Indicator1',
+        name_labelId: 'name_0_dY5ms9T1',
+        points: 300,
+        type: 'score'
+      }],
+      skill: [{
+        color: '#559cac',
+        description: 'description_0_dY5msi7o',
+        description_labelId: 'description_0_dY5msi7o',
+        icon: 'font-indicator-microfono-2',
+        id: 'ki4qrkas',
+        name: 'competency2',
+        name_labelId: 'name_0_dY5mslgV',
+        points: 295,
+        type: 'skill'
+      }, {
+        color: '#559cac',
+        description: 'description_0_dY5msi7o',
+        description_labelId: 'description_0_dY5msi7o',
+        icon: 'font-indicator-microfono-2',
+        id: 'ki4qropi',
+        name: 'competency2',
+        name_labelId: 'name_0_dY5mslgV',
+        points: 295,
+        type: 'skill'
+      }],
+      grade: undefined
+    };
+  }
+};
+
+var mockProps1 = {
+  emitEvent: emitEvent,
+  rewards: [{
+    id: 'ki4qrkam',
+    name: 'Power',
+    points: -22,
+    type: 'score'
+  }]
+};
+exports.mockProps1 = mockProps1;
+var mockProps2 = {
+  emitEvent: emitEvent,
+  rewards: [{
+    id: 'ki4qrkam',
+    name: 'Power',
+    points: -22,
+    type: 'score'
+  }, {
+    id: 'ki4qrop',
+    name: 'BananaSplit3jndflgndjkfh',
+    points: -299453433433434,
+    type: 'score'
+  }]
+};
+exports.mockProps2 = mockProps2;
+var mockProps3 = {
+  emitEvent: emitEvent,
+  rewards: [{
+    id: 'ki4qrkam',
+    name: 'Power',
+    points: -22,
+    type: 'score'
+  }, {
+    id: 'ki4qrop',
+    name: 'BananaSplit3jndflgndjkfh',
+    points: -299453433433434,
+    type: 'score'
+  }, {
+    id: 'ki4qiuyi',
+    name: 'BananaSplit4',
+    points: 87,
+    type: 'score'
+  }]
+};
+exports.mockProps3 = mockProps3;
+var mockProps4 = {
+  emitEvent: emitEvent,
+  rewards: [{
+    id: 'ki4qrkam',
+    name: 'Power',
+    points: -22,
+    type: 'score'
+  }, {
+    id: 'ki4qrkam',
+    name: 'BananaSplit',
+    points: -2,
+    type: 'score'
+  }, {
+    id: 'ki4qrkam',
+    name: 'BananaSplit2',
+    points: -2,
+    type: 'score'
+  }, {
+    id: 'ki4qrop',
+    name: 'BananaSplit3jndflgndjkfh',
+    points: -299453433433434,
+    type: 'score'
+  }, {
+    id: 'ki4qiuyi',
+    name: 'BananaSplit4',
+    points: 87,
+    type: 'score'
+  }, {
+    id: 'ki4qrkam',
+    name: 'BananaSplit5',
+    points: 552,
+    type: 'score'
+  }, {
+    id: 'ki4qrkas',
+    name: 'BananaSplit46',
+    points: 87,
+    type: 'skill'
+  }, {
+    id: 'ki4qrkas',
+    name: 'BananaSplit57',
+    points: 552,
+    type: 'skill'
+  }, {
+    id: 'ki4qrkas',
+    name: 'BananaSplit8',
+    points: 87,
+    type: 'skill'
+  }, {
+    id: 'ki4qrkas',
+    name: 'BananaSplit9',
+    points: 552,
+    type: 'skill'
+  }, {
+    id: 'ki4qrkas',
+    name: 'BananaSplit10',
+    points: 87,
+    type: 'skill'
+  }, {
+    id: 'ki4qrkas',
+    name: 'BananaSplit11',
+    points: 552,
+    type: 'skill'
+  }, {
+    id: 'ki4qrkas',
+    name: 'BananaSplit12',
+    points: 87,
+    type: 'skill'
+  }]
+};
+exports.mockProps4 = mockProps4;
+var mockProps5 = {
+  emitEvent: emitEvent,
+  rewards: [{
+    id: 'ki4qrkam',
+    name: 'Power',
+    points: -22,
+    type: 'score'
+  }, {
+    id: 'ki4qrkam',
+    name: 'BananaSplit',
+    points: -2,
+    type: 'score'
+  }, {
+    id: 'ki4qrkam',
+    name: 'BananaSplit2',
+    points: -2,
+    type: 'score'
+  }, {
+    id: 'ki4qrop',
+    name: 'BananaSplit3jndflgndjkfh',
+    points: -299453433433434,
+    type: 'score'
+  }, {
+    id: 'ki4qiuyi',
+    name: 'BananaSplit4',
+    points: 87,
+    type: 'score'
+  }, {
+    id: 'ki4qrkam',
+    name: 'BananaSplit5',
+    points: 552,
+    type: 'score'
+  }, {
+    id: 'ki4qrkas',
+    name: 'BananaSplit46',
+    points: 87,
+    type: 'skill'
+  }, {
+    id: 'ki4qrkas',
+    name: 'BananaSplit57',
+    points: 552,
+    type: 'skill'
+  }, {
+    id: 'ki4qrkas',
+    name: 'BananaSplit8',
+    points: 87,
+    type: 'skill'
+  }, {
+    id: 'ki4qrkas',
+    name: 'BananaSplit9',
+    points: 552,
+    type: 'skill'
+  }, {
+    id: 'ki4qrkas',
+    name: 'BananaSplit10',
+    points: 87,
+    type: 'skill'
+  }, {
+    id: 'ki4qrkas',
+    name: 'BananaSplit11',
+    points: 552,
+    type: 'skill'
+  }, {
+    id: 'ki4qrkas',
+    name: 'BananaSplit12',
+    points: 87,
+    type: 'skill'
+  }, {
+    id: 'ki4qropi',
+    name: 'BananaSplit13',
+    points: 552,
+    type: 'skill'
+  }]
+};
+exports.mockProps5 = mockProps5;