@mjhls/mjh-framework 1.0.1069-masterhead → 1.0.1069-poll-update

package/dist/esm/{index-c10c03a2.js → index-4bf993d8.js}

@@ -2,14 +2,14 @@ import React__default, { useState, useEffect, useRef, useLayoutEffect, useCallba
 import { _ as _slicedToArray, a as _getIterator } from './slicedToArray-6ebcbfea.js';
 import { Carousel, Table, Figure as Figure$1, Card, Row, Col, Button as Button$1, ProgressBar } from 'react-bootstrap';
 import urlFor from './urlFor.js';
-import { l as lib_3 } from './index-f0fc23eb.js';
+import { l as lib_3 } from './index-5cc7b406.js';
 import Router, { useRouter } from 'next/router';
 import { g as getYoutubeId } from './index-c7e2ac95.js';
 import PropTypes from 'prop-types';
 import { c as createCommonjsModule, u as unwrapExports } from './_commonjsHelpers-0c4b6f40.js';
 import './Beam.js';
 import Segment from './Segment.js';
-import { f as main_18, b as main_42, m as main_43 } from './main-f97773b2.js';
+import { f as main_18, b as main_42, m as main_43 } from './main-754d4992.js';
 import { B as BlockContent } from './BlockContent-1e73bd2c.js';
 import { _ as _extends, b as _extends$1 } from './extends-1559c147.js';
 import { u as urlForFile } from './urlForFile-f6485737.js';
@@ -28,7 +28,7 @@ import ReactGA from 'react-ga';
 import GroupDeck from './GroupDeck.js';
 import { m as moment } from './moment-bc12cb97.js';
 import SocialShare from './SocialShare.js';
-import { a as _Array$from, _ as _toConsumableArray } from './toConsumableArray-f7074d7c.js';
+import { _ as _toConsumableArray, a as _Array$from } from './toConsumableArray-f7074d7c.js';
 import Pagination from 'react-bootstrap/Pagination';
 import { h as html_decode_1 } from './entities-6d9154b4.js';
 import DFPAdSlot from './AdSlot.js';
@@ -8695,6 +8695,7 @@ var Poll$1 = function Poll(_ref) {
       _node$showResults = node.showResults,
       showResults = _node$showResults === undefined ? false : _node$showResults;
 
+  var inputRef = useRef([]);
 
   var onSubmitPoll = function onSubmitPoll(e, setShowAnswer) {
     e.preventDefault();
@@ -8715,6 +8716,16 @@ var Poll$1 = function Poll(_ref) {
       return acc;
     }
   }, 0);
+
+  var userChoiceSelection = function userChoiceSelection(e) {
+    if (inputRef.current[e.currentTarget.dataset['index']].checked) {
+      inputRef.current[e.currentTarget.dataset['index']].checked = false;
+    } else {
+      inputRef.current[e.currentTarget.dataset['index']].checked = true;
+      setSelectedChoice(inputRef.current[e.currentTarget.dataset['index']].value);
+    }
+  };
+
   return React__default.createElement(
     React__default.Fragment,
     null,
@@ -8725,78 +8736,84 @@ var Poll$1 = function Poll(_ref) {
     ),
     !showAnswer && choices && choices.length > 0 && React__default.createElement(
       'form',
-      { onSubmit: function onSubmit(e) {
+      { className: 'formPoll', onSubmit: function onSubmit(e) {
           return onSubmitPoll(e);
         } },
-      choices && choices.map(function (choice) {
+      choices && choices.map(function (choice, index) {
         return React__default.createElement(
           'div',
-          { key: choice._key },
+          { key: choice._key, 'data-index': index, onClick: function onClick(e) {
+              return userChoiceSelection(e);
+            } },
           React__default.createElement(
             'label',
             { className: 'pl-2' },
-            React__default.createElement('input', { type: 'radio', id: 'male', name: choice._type, value: choice._key, onChange: function onChange(e) {
-                return setSelectedChoice(e.target.value);
-              } }),
+            React__default.createElement('input', { ref: function ref(el) {
+                return inputRef.current[index] = el;
+              }, type: 'radio', id: 'male', name: choice._type, value: choice._key }),
             ' ' + choice.choiceText
           )
         );
       }),
       React__default.createElement(
         Button$1,
-        { disabled: !selectedChoice, type: 'submit' },
+        { disabled: !selectedChoice, className: 'mt-3', type: 'submit' },
         'Vote'
       )
     ),
-    React__default.createElement(
+    showAnswer && React__default.createElement(
       'div',
-      { className: 'progress-container' },
+      { className: 'progress-container mb-3' },
       showAnswer && choices && choices.length > 0 && choices.map(function (choice) {
         var percentage = choicesTotalCount && choicesTotalCount > 0 ? choice.choiceCount ? Math.floor(choice.choiceCount * 100 / choicesTotalCount) : 0 : 0;
         return React__default.createElement(
-          'div',
-          { key: choice._key, className: 'mb-3' },
+          React__default.Fragment,
+          null,
+          choice.choiceAnswer === true && React__default.createElement(
+            'div',
+            null,
+            React__default.createElement(
+              'span',
+              { style: { color: 'limegreen' } },
+              'Correct!'
+            )
+          ),
           React__default.createElement(
             'div',
-            { className: 'correct-answer' },
+            { key: choice._key, className: 'mb-3' },
             React__default.createElement(
               'div',
-              null,
-              choice.choiceText
-            ),
-            choice.choiceAnswer === true && React__default.createElement(
-              'div',
-              null,
+              { className: 'correct-answer' },
+              React__default.createElement(ProgressBar, { now: percentage }),
+              React__default.createElement(
+                'div',
+                null,
+                choice.choiceText
+              ),
               React__default.createElement(
-                'span',
-                { style: { color: 'limegreen' } },
-                'Correct!'
+                'div',
+                { className: 'float-right' },
+                percentage,
+                '% (',
+                choice.choiceCount ? choice.choiceCount : 0,
+                ' Votes)'
               )
             )
-          ),
-          React__default.createElement(ProgressBar, { now: percentage }),
-          React__default.createElement(
-            'span',
-            { className: 'float-right' },
-            percentage,
-            '% (',
-            choice.choiceCount ? choice.choiceCount : 0,
-            ' Votes)'
           )
         );
-      })
-    ),
-    showAnswer && React__default.createElement(
-      'h4',
-      { className: 'text-center small p-3' },
-      'Total Votes: ',
-      choicesTotalCount
+      }),
+      showAnswer && React__default.createElement(
+        'h4',
+        { className: 'text-center small p-3' },
+        'Total Votes: ',
+        choicesTotalCount
+      )
     ),
     showAnswer && response && React__default.createElement(BlockContent, { blocks: response, serializers: getSerializers }),
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        .correct-answer {\n          display: flex;\n          justify-content: space-between;\n        }\n        .progress-bar {\n          color: #fff;\n        }\n      '
+      '\n        .formPoll > div {\n          box-shadow: 0 0 5px 2px #9b9b9b6b;\n          border-radius: 5px;\n          display: flex;\n          flex-direction: row;\n          align-items: center;\n          padding: 0.5rem 0;\n          text-align: center;\n          margin: 0.5rem 0;\n          cursor: pointer;\n        }\n        .formPoll > div:hover {\n          background-color: #cbcbcb;\n        }\n        .formPoll > div > label {\n          pointer-events: none;\n          margin-bottom: 0;\n        }\n        .progress-container,\n        .formPoll {\n          background-color: #eaeaea;\n          padding: 1rem;\n          border-radius: 5px;\n          box-shadow: 0 0 5px 2px #9b9b9b6b;\n        }\n        .progress-container > div {\n          position: relative;\n          font-weight: bold;\n          border-radius: 5px;\n        }\n        .progress-container > div:not(:nth-child(1)) {\n          box-shadow: 0 0 5px 2px #9b9b9b6b;\n        }\n        .correct-answer {\n          display: flex;\n          justify-content: space-between;\n          flex-direction: row;\n          align-items: center;\n          height: 2rem;\n          background-color: darkgrey;\n          border-radius: 5px;\n        }\n        .float-right {\n          z-index: 2;\n          padding-right: 1rem;\n          color: #fff;\n        }\n        .progress {\n          align-self: flex-start;\n          display: contents;\n          border-radius: 5px;\n        }\n        .progress-bar {\n          width: 33%;\n          height: 100%;\n          position: absolute;\n          border-radius: 5px 0 0 5px;\n          background-color: var(--primary);\n        }\n        .correct-answer > div:nth-child(2) {\n          z-index: 1;\n          color: white;\n          padding-left: 0.5rem;\n        }\n      '
     )
   );
 };
@@ -8810,7 +8827,7 @@ var Poll = function Poll(_ref) {
       _ref.showVotes;
       var getSerializers = _ref.getSerializers;
 
-  var _useState = useState(null),
+  var _useState = useState([]),
       _useState2 = _slicedToArray(_useState, 2),
       selectedChoice = _useState2[0],
       setSelectedChoice = _useState2[1];
@@ -8826,6 +8843,7 @@ var Poll = function Poll(_ref) {
       _node$showResults = node.showResults,
       showResults = _node$showResults === undefined ? false : _node$showResults;
 
+  var inputRef = useRef([]);
 
   var onSubmitPoll = function onSubmitPoll(e, setShowAnswer) {
     e.preventDefault();
@@ -8874,6 +8892,23 @@ var Poll = function Poll(_ref) {
       return acc;
     }
   }, 0);
+
+  var userChoiceSelection = function userChoiceSelection(e) {
+    if (inputRef.current[e.currentTarget.dataset['index']].checked) {
+      inputRef.current[e.currentTarget.dataset['index']].checked = false;
+      var updateChoices = selectedChoice.filter(function (choice) {
+        if (inputRef.current[e.currentTarget.dataset['index']].value !== choice) {
+          return choice;
+        }
+      });
+      setSelectedChoice(updateChoices);
+    } else {
+      inputRef.current[e.currentTarget.dataset['index']].checked = true;
+
+      setSelectedChoice.apply(undefined, [inputRef.current[e.currentTarget.dataset['index']].value].concat(_toConsumableArray(selectedChoice)));
+    }
+  };
+
   return React__default.createElement(
     React__default.Fragment,
     null,
@@ -8884,78 +8919,84 @@ var Poll = function Poll(_ref) {
     ),
     !showAnswer && choices && choices.length > 0 && React__default.createElement(
       'form',
-      { onSubmit: function onSubmit(e) {
+      { className: 'multiChoicePoll', onSubmit: function onSubmit(e) {
           return onSubmitPoll(e);
         } },
-      choices && choices.map(function (choice) {
+      choices && choices.map(function (choice, index) {
         return React__default.createElement(
           'div',
-          { key: choice._key },
+          { key: choice._key, 'data-index': index, onClick: function onClick(e) {
+              return userChoiceSelection(e);
+            } },
           React__default.createElement(
             'label',
             { className: 'pl-2' },
-            React__default.createElement('input', { type: 'checkbox', id: 'male', name: choice._type, value: choice._key, onChange: function onChange(e) {
-                return setSelectedChoice(e.target.value);
-              } }),
+            React__default.createElement('input', { ref: function ref(el) {
+                return inputRef.current[index] = el;
+              }, type: 'checkbox', id: 'male', name: choice._type, value: choice._key }),
             ' ' + choice.choiceText
           )
         );
       }),
       React__default.createElement(
         Button$1,
-        { disabled: !selectedChoice, type: 'submit' },
+        { disabled: !selectedChoice, className: 'mt-3', type: 'submit' },
         'Vote'
       )
     ),
-    React__default.createElement(
+    showAnswer && React__default.createElement(
       'div',
-      { className: 'progress-container' },
+      { className: 'progress-container mb-3' },
       showAnswer && choices && choices.length > 0 && choices.map(function (choice) {
         var percentage = choicesTotalCount && choicesTotalCount > 0 ? choice.choiceCount ? Math.floor(choice.choiceCount * 100 / choicesTotalCount) : 0 : 0;
         return React__default.createElement(
-          'div',
-          { key: choice._key, className: 'mb-3' },
+          React__default.Fragment,
+          null,
+          choice.choiceAnswer === true && React__default.createElement(
+            'div',
+            null,
+            React__default.createElement(
+              'span',
+              { style: { color: 'limegreen' } },
+              'Correct!'
+            )
+          ),
           React__default.createElement(
             'div',
-            { className: 'correct-answer' },
+            { key: choice._key, className: 'mb-3' },
             React__default.createElement(
               'div',
-              null,
-              choice.choiceText
-            ),
-            choice.choiceAnswer === true && React__default.createElement(
-              'div',
-              null,
+              { className: 'correct-answer' },
+              React__default.createElement(ProgressBar, { now: percentage }),
               React__default.createElement(
-                'span',
-                { style: { color: 'limegreen' } },
-                'Correct!'
+                'div',
+                null,
+                choice.choiceText
+              ),
+              React__default.createElement(
+                'div',
+                { className: 'float-right' },
+                percentage,
+                '% (',
+                choice.choiceCount ? choice.choiceCount : 0,
+                ' Votes)'
               )
             )
-          ),
-          React__default.createElement(ProgressBar, { now: percentage }),
-          React__default.createElement(
-            'span',
-            { className: 'float-right' },
-            percentage,
-            '% (',
-            choice.choiceCount ? choice.choiceCount : 0,
-            ' Votes)'
           )
         );
-      })
-    ),
-    showAnswer && React__default.createElement(
-      'h4',
-      { className: 'text-center small p-3' },
-      'Total Votes: ',
-      choicesTotalCount
+      }),
+      showAnswer && React__default.createElement(
+        'h4',
+        { className: 'text-center small p-3' },
+        'Total Votes: ',
+        choicesTotalCount
+      )
     ),
     showAnswer && response && React__default.createElement(BlockContent, { blocks: response, serializers: getSerializers }),
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        .correct-answer {\n          width: 100%;\n          display: flex;\n          justify-content: space-between;\n          padding: 0 0.5rem;\n        }\n        .progress-bar {\n          color: #fff;\n        }\n      '
+      '\n        .multiChoicePoll > div {\n          box-shadow: 0 0 5px 2px #9b9b9b6b;\n          border-radius: 5px;\n          display: flex;\n          flex-direction: row;\n          align-items: center;\n          padding: 0.5rem 0;\n          text-align: center;\n          margin: 0.5rem 0;\n          cursor: pointer;\n        }\n        .multiChoicePoll > div:hover {\n          background-color: #cbcbcb;\n        }\n        .multiChoicePoll > div > label {\n          pointer-events: none;\n          margin-bottom: 0;\n        }\n        .progress-container,\n        .multiChoicePoll {\n          background-color: #eaeaea;\n          padding: 1rem;\n          border-radius: 5px;\n          box-shadow: 0 0 5px 2px #9b9b9b6b;\n        }\n        .progress-container > div {\n          position: relative;\n          font-weight: bold;\n          border-radius: 5px;\n        }\n        .progress-container > div:not(:nth-child(1)) {\n          box-shadow: 0 0 5px 2px #9b9b9b6b;\n        }\n        .correct-answer {\n          display: flex;\n          justify-content: space-between;\n          flex-direction: row;\n          align-items: center;\n          height: 2rem;\n          background-color: darkgrey;\n          border-radius: 5px;\n        }\n        .float-right {\n          z-index: 2;\n          padding-right: 1rem;\n          color: #fff;\n        }\n        .progress {\n          align-self: flex-start;\n          display: contents;\n          border-radius: 5px;\n        }\n        .progress-bar {\n          width: 33%;\n          height: 100%;\n          position: absolute;\n          border-radius: 5px 0 0 5px;\n          background-color: var(--primary);\n        }\n        .correct-answer > div:nth-child(2) {\n          z-index: 1;\n          color: white;\n          padding-left: 0.5rem;\n        }\n      '
     )
   );
 };