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

package/dist/cjs/{index-f015597d.js → index-4e6f6a0c.js}

@@ -4,14 +4,14 @@ var React = require('react');
 var slicedToArray = require('./slicedToArray-067dd3bc.js');
 var reactBootstrap = require('react-bootstrap');
 var urlFor = require('./urlFor.js');
-var index = require('./index-d2a6ef75.js');
+var index = require('./index-7435b964.js');
 var Router = require('next/router');
 var index$1 = require('./index-187c967e.js');
 var PropTypes = require('prop-types');
 var _commonjsHelpers = require('./_commonjsHelpers-06173234.js');
 require('./Beam.js');
 var Segment = require('./Segment.js');
-var main = require('./main-47be4f9f.js');
+var main = require('./main-ae8472f3.js');
 var BlockContent = require('./BlockContent-96b44364.js');
 var _extends = require('./extends-be0d85bc.js');
 var urlForFile = require('./urlForFile-5084fc48.js');
@@ -8715,6 +8715,7 @@ var Poll$1 = function Poll(_ref) {
       _node$showResults = node.showResults,
       showResults = _node$showResults === undefined ? false : _node$showResults;
 
+  var inputRef = React.useRef([]);
 
   var onSubmitPoll = function onSubmitPoll(e, setShowAnswer) {
     e.preventDefault();
@@ -8735,6 +8736,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["default"].createElement(
     React__default["default"].Fragment,
     null,
@@ -8745,78 +8756,84 @@ var Poll$1 = function Poll(_ref) {
     ),
     !showAnswer && choices && choices.length > 0 && React__default["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["default"].createElement(
           'div',
-          { key: choice._key },
+          { key: choice._key, 'data-index': index, onClick: function onClick(e) {
+              return userChoiceSelection(e);
+            } },
           React__default["default"].createElement(
             'label',
             { className: 'pl-2' },
-            React__default["default"].createElement('input', { type: 'radio', id: 'male', name: choice._type, value: choice._key, onChange: function onChange(e) {
-                return setSelectedChoice(e.target.value);
-              } }),
+            React__default["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["default"].createElement(
         reactBootstrap.Button,
-        { disabled: !selectedChoice, type: 'submit' },
+        { disabled: !selectedChoice, className: 'mt-3', type: 'submit' },
         'Vote'
       )
     ),
-    React__default["default"].createElement(
+    showAnswer && React__default["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["default"].createElement(
-          'div',
-          { key: choice._key, className: 'mb-3' },
+          React__default["default"].Fragment,
+          null,
+          choice.choiceAnswer === true && React__default["default"].createElement(
+            'div',
+            null,
+            React__default["default"].createElement(
+              'span',
+              { style: { color: 'limegreen' } },
+              'Correct!'
+            )
+          ),
           React__default["default"].createElement(
             'div',
-            { className: 'correct-answer' },
+            { key: choice._key, className: 'mb-3' },
             React__default["default"].createElement(
               'div',
-              null,
-              choice.choiceText
-            ),
-            choice.choiceAnswer === true && React__default["default"].createElement(
-              'div',
-              null,
+              { className: 'correct-answer' },
+              React__default["default"].createElement(reactBootstrap.ProgressBar, { now: percentage }),
+              React__default["default"].createElement(
+                'div',
+                null,
+                choice.choiceText
+              ),
               React__default["default"].createElement(
-                'span',
-                { style: { color: 'limegreen' } },
-                'Correct!'
+                'div',
+                { className: 'float-right' },
+                percentage,
+                '% (',
+                choice.choiceCount ? choice.choiceCount : 0,
+                ' Votes)'
               )
             )
-          ),
-          React__default["default"].createElement(reactBootstrap.ProgressBar, { now: percentage }),
-          React__default["default"].createElement(
-            'span',
-            { className: 'float-right' },
-            percentage,
-            '% (',
-            choice.choiceCount ? choice.choiceCount : 0,
-            ' Votes)'
           )
         );
-      })
-    ),
-    showAnswer && React__default["default"].createElement(
-      'h4',
-      { className: 'text-center small p-3' },
-      'Total Votes: ',
-      choicesTotalCount
+      }),
+      showAnswer && React__default["default"].createElement(
+        'h4',
+        { className: 'text-center small p-3' },
+        'Total Votes: ',
+        choicesTotalCount
+      )
     ),
     showAnswer && response && React__default["default"].createElement(BlockContent.BlockContent, { blocks: response, serializers: getSerializers }),
     React__default["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      '
     )
   );
 };
@@ -8830,7 +8847,7 @@ var Poll = function Poll(_ref) {
       _ref.showVotes;
       var getSerializers = _ref.getSerializers;
 
-  var _useState = React.useState(null),
+  var _useState = React.useState([]),
       _useState2 = slicedToArray._slicedToArray(_useState, 2),
       selectedChoice = _useState2[0],
       setSelectedChoice = _useState2[1];
@@ -8846,6 +8863,7 @@ var Poll = function Poll(_ref) {
       _node$showResults = node.showResults,
       showResults = _node$showResults === undefined ? false : _node$showResults;
 
+  var inputRef = React.useRef([]);
 
   var onSubmitPoll = function onSubmitPoll(e, setShowAnswer) {
     e.preventDefault();
@@ -8894,6 +8912,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._toConsumableArray(selectedChoice)));
+    }
+  };
+
   return React__default["default"].createElement(
     React__default["default"].Fragment,
     null,
@@ -8904,78 +8939,84 @@ var Poll = function Poll(_ref) {
     ),
     !showAnswer && choices && choices.length > 0 && React__default["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["default"].createElement(
           'div',
-          { key: choice._key },
+          { key: choice._key, 'data-index': index, onClick: function onClick(e) {
+              return userChoiceSelection(e);
+            } },
           React__default["default"].createElement(
             'label',
             { className: 'pl-2' },
-            React__default["default"].createElement('input', { type: 'checkbox', id: 'male', name: choice._type, value: choice._key, onChange: function onChange(e) {
-                return setSelectedChoice(e.target.value);
-              } }),
+            React__default["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["default"].createElement(
         reactBootstrap.Button,
-        { disabled: !selectedChoice, type: 'submit' },
+        { disabled: !selectedChoice, className: 'mt-3', type: 'submit' },
         'Vote'
       )
     ),
-    React__default["default"].createElement(
+    showAnswer && React__default["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["default"].createElement(
-          'div',
-          { key: choice._key, className: 'mb-3' },
+          React__default["default"].Fragment,
+          null,
+          choice.choiceAnswer === true && React__default["default"].createElement(
+            'div',
+            null,
+            React__default["default"].createElement(
+              'span',
+              { style: { color: 'limegreen' } },
+              'Correct!'
+            )
+          ),
           React__default["default"].createElement(
             'div',
-            { className: 'correct-answer' },
+            { key: choice._key, className: 'mb-3' },
             React__default["default"].createElement(
               'div',
-              null,
-              choice.choiceText
-            ),
-            choice.choiceAnswer === true && React__default["default"].createElement(
-              'div',
-              null,
+              { className: 'correct-answer' },
+              React__default["default"].createElement(reactBootstrap.ProgressBar, { now: percentage }),
               React__default["default"].createElement(
-                'span',
-                { style: { color: 'limegreen' } },
-                'Correct!'
+                'div',
+                null,
+                choice.choiceText
+              ),
+              React__default["default"].createElement(
+                'div',
+                { className: 'float-right' },
+                percentage,
+                '% (',
+                choice.choiceCount ? choice.choiceCount : 0,
+                ' Votes)'
               )
             )
-          ),
-          React__default["default"].createElement(reactBootstrap.ProgressBar, { now: percentage }),
-          React__default["default"].createElement(
-            'span',
-            { className: 'float-right' },
-            percentage,
-            '% (',
-            choice.choiceCount ? choice.choiceCount : 0,
-            ' Votes)'
           )
         );
-      })
-    ),
-    showAnswer && React__default["default"].createElement(
-      'h4',
-      { className: 'text-center small p-3' },
-      'Total Votes: ',
-      choicesTotalCount
+      }),
+      showAnswer && React__default["default"].createElement(
+        'h4',
+        { className: 'text-center small p-3' },
+        'Total Votes: ',
+        choicesTotalCount
+      )
     ),
     showAnswer && response && React__default["default"].createElement(BlockContent.BlockContent, { blocks: response, serializers: getSerializers }),
     React__default["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      '
     )
   );
 };