@mjhls/mjh-framework 1.0.150 → 1.0.151

package/README.md

@@ -1,5 +1,5 @@
 
-# mjh-framework v. 1.0.150
+# mjh-framework v. 1.0.151
 
 
 

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import React__default, { Component, useState, useEffect, useRef, createElement, createContext } from 'react';
+import React__default, { Component, useState, useEffect, useRef, createContext, createElement } from 'react';
 import PropTypes from 'prop-types';
 import reactDom from 'react-dom';
 import Container from 'react-bootstrap/Container';
@@ -7985,6 +7985,10 @@ var IoIosHome = function (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M258.5 104.1c-1.5-1.2-3.5-1.2-5 0l-156 124.8c-.9.8-1.5 1.9-1.5 3.1v230c0 1.1.9 2 2 2h108c1.1 0 2-.9 2-2V322c0-1.1.9-2 2-2h92c1.1 0 2 .9 2 2v140c0 1.1.9 2 2 2h108c1.1 0 2-.9 2-2V232c0-1.2-.6-2.4-1.5-3.1l-156-124.8z"}},{"tag":"path","attr":{"d":"M458.7 204.2l-189-151.4C265.9 49.7 261 48 256 48s-9.9 1.7-13.7 4.8L160 119.7V77.5c0-1.1-.9-2-2-2H98c-1.1 0-2 .9-2 2v92.2l-42.7 35.1c-3.1 2.5-5.1 6.2-5.3 10.2-.2 4 1.3 7.9 4.1 10.7 2.6 2.6 6.1 4.1 9.9 4.1 3.2 0 6.3-1.1 8.8-3.1l183.9-148c.5-.4.9-.4 1.3-.4s.8.1 1.3.4l183.9 147.4c2.5 2 5.6 3.1 8.8 3.1 3.7 0 7.2-1.4 9.9-4.1 2.9-2.8 4.4-6.7 4.2-10.7-.3-4-2.2-7.7-5.4-10.2z"}}]})(props);
 };
 IoIosHome.displayName = "IoIosHome";
+var IoIosOpen = function (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M227.8 300.2c-5.1-5.1-5.1-13.3 0-18.4l133.7-133.7c-5.3-2.6-11.2-4.1-17.5-4.1H88c-22 0-40 18-40 40v224c0 22 18 40 40 40h256c22 0 40-18 40-40V184c0-6.3-1.5-12.2-4.1-17.5L246.2 300.2c-5.1 5.1-13.3 5.1-18.4 0z"}},{"tag":"path","attr":{"d":"M459.5 68.5C457 66 453 64 449 64h-97c-7.2-.1-13.1 5.7-13.1 12.9-.1 7.2 5.7 13.1 12.9 13.1l67.3.5-57.6 57.6c8 3.9 14.5 10.4 18.4 18.4l57.6-57.6.5 67.3c.1 7.2 5.9 13 13.1 12.9 7.2-.1 13-5.9 12.9-13.1V78c0-3.5-2-7-4.5-9.5z"}}]})(props);
+};
+IoIosOpen.displayName = "IoIosOpen";
 var IoMdArrowDropdown = function (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M128 192l128 128 128-128z"}}]})(props);
 };
@@ -15579,28 +15583,13 @@ var RelatedTopicsDropdown = function RelatedTopicsDropdown(_ref) {
 };
 
 // THIS FILE IS AUTO GENERATED
-var FaWindowClose = function (props) {
-  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-83.6 290.5c4.8 4.8 4.8 12.6 0 17.4l-40.5 40.5c-4.8 4.8-12.6 4.8-17.4 0L256 313.3l-66.5 67.1c-4.8 4.8-12.6 4.8-17.4 0l-40.5-40.5c-4.8-4.8-4.8-12.6 0-17.4l67.1-66.5-67.1-66.5c-4.8-4.8-4.8-12.6 0-17.4l40.5-40.5c4.8-4.8 12.6-4.8 17.4 0l66.5 67.1 66.5-67.1c4.8-4.8 12.6-4.8 17.4 0l40.5 40.5c4.8 4.8 4.8 12.6 0 17.4L313.3 256l67.1 66.5z"}}]})(props);
+var FaRegWindowClose = function (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 394c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h404c3.3 0 6 2.7 6 6v340zM356.5 194.6L295.1 256l61.4 61.4c4.6 4.6 4.6 12.1 0 16.8l-22.3 22.3c-4.6 4.6-12.1 4.6-16.8 0L256 295.1l-61.4 61.4c-4.6 4.6-12.1 4.6-16.8 0l-22.3-22.3c-4.6-4.6-4.6-12.1 0-16.8l61.4-61.4-61.4-61.4c-4.6-4.6-4.6-12.1 0-16.8l22.3-22.3c4.6-4.6 12.1-4.6 16.8 0l61.4 61.4 61.4-61.4c4.6-4.6 12.1-4.6 16.8 0l22.3 22.3c4.7 4.6 4.7 12.1 0 16.8z"}}]})(props);
 };
-FaWindowClose.displayName = "FaWindowClose";
+FaRegWindowClose.displayName = "FaRegWindowClose";
 
 /*****UStream Component*****/
-/*
-
-Width and Height(percent or px) prop passed is the floating window, when closed
-it will take 100% of its parent element
-
-You can pass in another SRC for Ustream if needed
-
-If 'close' is passed as prop, the floating window will be removed
-from DOM once close button is hit
-
-Example:
-import { Ustream } from '@mjhls/mjh-framework';
-<Ustream width={'200px'} height={'120px'} close />
-
-*/
-/************************* */
+
 var Ustream = function Ustream(_ref) {
   var _ref$width = _ref.width,
       width = _ref$width === undefined ? '300px' : _ref$width,
@@ -15608,6 +15597,8 @@ var Ustream = function Ustream(_ref) {
       height = _ref$height === undefined ? '168px' : _ref$height,
       _ref$close = _ref.close,
       close = _ref$close === undefined ? false : _ref$close,
+      _ref$right = _ref.right,
+      right = _ref$right === undefined ? false : _ref$right,
       _ref$src = _ref.src,
       src = _ref$src === undefined ? 'https://video.ibm.com/embed/23627444?volume=0&autoplay=true' : _ref$src;
 
@@ -15625,11 +15616,15 @@ var Ustream = function Ustream(_ref) {
 
   useEffect(function () {
     try {
-      document.querySelector('.ustream-close').addEventListener('click', function (e) {
-        var container = document.getElementById('ustream-container');
-        if (close) {
+      var container = document.getElementById('ustream-container');
+
+      if (close) {
+        var closeBtn = document.querySelector('.ustream-close');
+        closeBtn.addEventListener('click', function () {
           container.remove();
-        } else {
+        });
+      } else {
+        document.querySelector('.ustream-minimize').addEventListener('click', function (e) {
           container.style.position = 'static';
           container.style.padding = '0 1rem';
           container.classList.add('closed');
@@ -15639,9 +15634,14 @@ var Ustream = function Ustream(_ref) {
           console.log(newHeight);
           console.log(ustreamContainer);
           setHeight(newHeight);
-          e.target.remove();
-        }
-      });
+          document.querySelector('.ustream-minimize').remove();
+          var closeBtn = document.querySelector('.ustream-close');
+          closeBtn.style.display = 'block';
+          closeBtn.addEventListener('click', function () {
+            container.remove();
+          });
+        });
+      }
     } catch (err) {}
   }, []);
 
@@ -15651,10 +15651,23 @@ var Ustream = function Ustream(_ref) {
     React__default.createElement(
       'div',
       { style: { position: 'relative' } },
-      React__default.createElement(
+      close ? React__default.createElement(
         'div',
         { className: 'ustream-close' },
-        React__default.createElement(FaWindowClose, { style: { fontSize: '1.3rem' } })
+        React__default.createElement(FaRegWindowClose, { style: { color: '#fff', fontSize: '1.3rem' } })
+      ) : React__default.createElement(
+        React__default.Fragment,
+        null,
+        React__default.createElement(
+          'div',
+          { className: 'ustream-minimize' },
+          React__default.createElement(IoIosOpen, { style: right ? { color: '#fff', fontSize: '1.3rem', transform: 'rotateZ(-90deg)' } : { color: '#fff', fontSize: '1.3rem' } })
+        ),
+        React__default.createElement(
+          'div',
+          { className: 'ustream-close' },
+          React__default.createElement(FaRegWindowClose, { style: { color: '#fff', fontSize: '1rem' } })
+        )
       ),
       React__default.createElement('iframe', {
         id: 'ustream-iframe',
@@ -15662,13 +15675,12 @@ var Ustream = function Ustream(_ref) {
         webkitallowfullscreen: true,
         allowFullScreen: true,
         frameBorder: 'no',
-
         style: { maxWidth: '100%', height: currentHeight, width: currentWidth } })
     ),
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        #ustream-container {\n          position: fixed;\n          bottom: 0;\n          right: 1rem;\n          z-index: 999;\n          max-width: 100%;\n        }\n        .ustream-close {\n          position: absolute;\n          color: white;\n          right: 0.5rem;\n          top: 0.25rem;\n          cursor: pointer;\n          font-weight: bold;\n        }\n        @media screen and (max-width: 768px) {\n          #ustream-container:not(.closed) {\n            width: 231px !important;\n            height: 130px !important;\n          }\n          #ustream-container:not(.closed) iframe {\n            height: 130px !important;\n          }\n        }\n      '
+      '\n        #ustream-container {\n          position: fixed;\n          bottom: 0;\n          ' + (right ? 'right: 1rem;' : 'left: 1.5rem;') + '\n          z-index: 999;\n          max-width: 100%;\n        }\n        .ustream-minimize,\n        .ustream-close {\n          position: absolute;\n          color: white;\n          right: 0.5rem;\n          top: 0.25rem;\n          cursor: pointer;\n          font-weight: bold;\n        }\n        .ustream-close {\n          ' + (close ? 'display: block; right: .75rem; top: .5rem; ' : 'display: none; right: .5rem; top: .75rem;') + '\n        }\n        @media screen and (max-width: 768px) {\n          #ustream-container:not(.closed) {\n            width: 231px !important;\n            height: 130px !important;\n          }\n          #ustream-container:not(.closed) iframe {\n            height: 130px !important;\n          }\n        }\n      '
     )
   );
 };