lint & format

codesyntax · Mar 30, 2024 · 45f988e · 45f988e
1 parent 8180f6a
commit 45f988e
Show file tree

Hide file tree

Showing 5 changed files with 154 additions and 117 deletions.
diff --git a/src/SocialSharing.css b/src/SocialSharing.css
@@ -1,52 +1,52 @@
 ul {
-    list-style-type: none;
+  list-style-type: none;
 }
 
 ul.horizontal {
-    padding: 0;
-    margin: 0;
-    display: table;
-    width: 100%;
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  display: table;
+  width: 100%;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
 }
 
 ul.horizontal li {
-    display: table-cell;
-    padding: 8px;
+  display: table-cell;
+  padding: 8px;
 }
 
 ul.vertical li {
-    background-color: white;
-    padding: 10px;
-    margin-bottom: 10px;
-    border-radius: 50%;
-    box-shadow: 10px;
+  background-color: white;
+  padding: 10px;
+  margin-bottom: 10px;
+  border-radius: 50%;
+  box-shadow: 10px;
 }
 
 li:hover .fa-icon {
-    -webkit-transform: rotate(-15deg);
-    transform: rotate(-15deg);
+  -webkit-transform: rotate(-15deg);
+  transform: rotate(-15deg);
 }
 
 .fa-icon {
-    -webkit-transition: -webkit-transform 0.2s ease-in-out;
-    transition: transform 0.2s ease-in-out;
-    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
+  -webkit-transition: -webkit-transform 0.2s ease-in-out;
+  transition: transform 0.2s ease-in-out;
+  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
 }
 
 .icon-container {
-    position: relative;
-    width: 100%;
-    max-width: 400px;
+  position: relative;
+  width: 100%;
+  max-width: 400px;
 }
 
 .fa-icon-position {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    -ms-transform: translate(-50%, -50%);
-    text-align: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  text-align: center;
 }
diff --git a/src/SocialSharing.jsx b/src/SocialSharing.jsx
@@ -1,8 +1,13 @@
 import React, { useEffect, useState } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { isCmsUi } from '@plone/volto/helpers';
 import PropTypes from 'prop-types';
-import { DEFAULT_SOCIAL, DEFAULT_POSITIONS, DEFAULT_LOGO_SIZE, DEFAULT_BUTTON_SIZE } from './defaultSettings';
+import {
+  DEFAULT_SOCIAL,
+  DEFAULT_POSITIONS,
+  DEFAULT_LOGO_SIZE,
+  DEFAULT_BUTTON_SIZE,
+} from './defaultSettings';
 import './SocialSharing.css';
 import './fontawesome';
 import { SOCIAL_INTERFACE, LOGO_SIZE_INTERFACE } from './interfaces';
@@ -12,15 +17,15 @@ const SocialSharing = ({
   socialElements = DEFAULT_SOCIAL,
   bannerPosition = DEFAULT_POSITIONS,
   logoSize = DEFAULT_LOGO_SIZE,
-  buttonSize = DEFAULT_BUTTON_SIZE }) => {
-
-  const [currentUrl, setCurrentUrl] = useState("");
+  buttonSize = DEFAULT_BUTTON_SIZE,
+}) => {
+  const [currentUrl, setCurrentUrl] = useState('');
   const [display, setDisplay] = useState(true);
   const pathName = location.pathname;
 
   useEffect(() => {
     setCurrentUrl(window.location.href);
-  })
+  });
 
   // Disable sharing on non content routes
   useEffect(() => {
@@ -31,55 +36,79 @@ const SocialSharing = ({
   const [isMobile, setIsMobile] = useState(false);
 
   function handleWindowSizeChange() {
-    setIsMobile(window.innerWidth <= 768)
+    setIsMobile(window.innerWidth <= 768);
   }
   useEffect(() => {
-    handleWindowSizeChange()
+    handleWindowSizeChange();
     window.addEventListener('resize', handleWindowSizeChange);
     return () => {
       window.removeEventListener('resize', handleWindowSizeChange);
-    }
+    };
   });
   // end - MOBILE checker
 
-
   return (
     <>
-    { display && (
-      <div style={isMobile ? bannerPosition["mobile"] : bannerPosition["desktop"]}>
-        <ul className={isMobile ? "horizontal volto-social-sharing" : "vertical volto-social-sharing"}>
-        {
-          socialElements.filter(social => (!social.only_mobile === !isMobile || isMobile)).map(social => {
-            return (
-              <li className={`volto-social-${social.id}`} key={social.id} style={{ backgroundColor: social.color }}>
-                <div
-                  style={{
-                    width: buttonSize,
-                    height: buttonSize,
-                    left: `calc(50% - ${buttonSize} / 2)`
-                  }}
-                  className="icon-container">
-                    <a target="_blank" title={`Send to ${social.name}`} href={`${social.sharing_url}${currentUrl}`} className="fa-icon-position">
-                    <FontAwesomeIcon icon={social.fa_name} color="white" size={logoSize} className="fa-icon" />
-                  </a>
-                </div>
-              </li>
-              )
-            })
+      {display && (
+        <div
+          style={
+            isMobile ? bannerPosition['mobile'] : bannerPosition['desktop']
           }
+        >
+          <ul
+            className={
+              isMobile
+                ? 'horizontal volto-social-sharing'
+                : 'vertical volto-social-sharing'
+            }
+          >
+            {socialElements
+              .filter((social) => !social.only_mobile === !isMobile || isMobile)
+              .map((social) => {
+                return (
+                  <li
+                    className={`volto-social-${social.id}`}
+                    key={social.id}
+                    style={{ backgroundColor: social.color }}
+                  >
+                    <div
+                      style={{
+                        width: buttonSize,
+                        height: buttonSize,
+                        left: `calc(50% - ${buttonSize} / 2)`,
+                      }}
+                      className="icon-container"
+                    >
+                      <a
+                        target="_blank"
+                        title={`Send to ${social.name}`}
+                        href={`${social.sharing_url}${currentUrl}`}
+                        className="fa-icon-position"
+                        rel="noreferrer"
+                      >
+                        <FontAwesomeIcon
+                          icon={social.fa_name}
+                          color="white"
+                          size={logoSize}
+                          className="fa-icon"
+                        />
+                      </a>
+                    </div>
+                  </li>
+                );
+              })}
           </ul>
         </div>
-        )
-      }
-      </>
-    );
+      )}
+    </>
+  );
 };
 
 SocialSharing.prototype = {
   socialElements: SOCIAL_INTERFACE,
   bannerPosition: PropTypes.object,
   logoSize: LOGO_SIZE_INTERFACE,
-  buttonSize: PropTypes.string
+  buttonSize: PropTypes.string,
 };
 
 export default SocialSharing;
diff --git a/src/defaultSettings.js b/src/defaultSettings.js
@@ -1,47 +1,55 @@
-export const DEFAULT_SOCIAL = [{
-    name: "Facebook",
-    fa_name: ["fab", "facebook-f"],
-    color: "#3b5998",
-    sharing_url: "http://www.facebook.com/sharer.php?u=",
-    id: "fb",
-}, {
-    name: "Twitter",
-    fa_name:["fab", "twitter"],
-    color: "#00acee",
-    sharing_url: "http://twitter.com/?status=",
-    id: "tw"
-}, {
-    name: "Telegram",
-    fa_name:["fab", "telegram-plane"],
-    color: "#0088cc",
-    sharing_url: "tg://msg?text=",
-    only_mobile:true,
-    id: "tg"
-}, {
-    name: "Whatsapp",
-    fa_name:["fab", "whatsapp"],
-    color: "#00bb2d",
-    sharing_url: "whatsapp://send?text=",
-    only_mobile:true,
-    id: "wa"
-}];
-
+export const DEFAULT_SOCIAL = [
+  {
+    name: 'Facebook',
+    fa_name: ['fab', 'facebook-f'],
+    color: '#3b5998',
+    sharing_url: 'http://www.facebook.com/sharer.php?u=',
+    id: 'fb',
+  },
+  {
+    name: 'Twitter',
+    fa_name: ['fab', 'twitter'],
+    color: '#00acee',
+    sharing_url: 'http://twitter.com/?status=',
+    id: 'tw',
+  },
+  {
+    name: 'Telegram',
+    fa_name: ['fab', 'telegram-plane'],
+    color: '#0088cc',
+    sharing_url: 'tg://msg?text=',
+    only_mobile: true,
+    id: 'tg',
+  },
+  {
+    name: 'Whatsapp',
+    fa_name: ['fab', 'whatsapp'],
+    color: '#00bb2d',
+    sharing_url: 'whatsapp://send?text=',
+    only_mobile: true,
+    id: 'wa',
+  },
+];
 
 export const DEFAULT_POSITIONS = {
-    "desktop": {
-      position: 'fixed', right: '0', top: '50%',
-      transform: 'translate(-50%, -50%)',
-      zIndex: '9999'
-    },
-    "mobile": {
-      position: 'fixed', left: '50%', bottom: '-23px',
-      transform: 'translate(-50%, -50%)',
-      width: "100%",
-      zIndex: '9999'
-    }
-}
+  desktop: {
+    position: 'fixed',
+    right: '0',
+    top: '50%',
+    transform: 'translate(-50%, -50%)',
+    zIndex: '9999',
+  },
+  mobile: {
+    position: 'fixed',
+    left: '50%',
+    bottom: '-23px',
+    transform: 'translate(-50%, -50%)',
+    width: '100%',
+    zIndex: '9999',
+  },
+};
 
 // OPTIONS:  "lg" | "xs" | "sm" | "2x" | "3x" | "4x" | "5x" | "6x" | "7x" | "8x" | "9x" | "10x"
-export const DEFAULT_LOGO_SIZE = "lg";
+export const DEFAULT_LOGO_SIZE = 'lg';
 
-export const DEFAULT_BUTTON_SIZE = "30px"
+export const DEFAULT_BUTTON_SIZE = '30px';
diff --git a/src/fontawesome.js b/src/fontawesome.js
@@ -1,4 +1,4 @@
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { fas } from '@fortawesome/free-solid-svg-icons';
-import {fab} from '@fortawesome/free-brands-svg-icons';
-library.add(fas, fab);
+import { fab } from '@fortawesome/free-brands-svg-icons';
+library.add(fas, fab);
diff --git a/src/interfaces.js b/src/interfaces.js
@@ -1,11 +1,11 @@
 import PropTypes from 'prop-types';
 
 export const SOCIAL_INTERFACE = {
-    name: PropTypes.string.isRequired,
-    fa_name: PropTypes.array.isRequired,
-    color: PropTypes.string.isRequired,
-    sharing_url: PropTypes.string.isRequired,
-    only_mobile:PropTypes.bool,
-    id: PropTypes.string
-}
-export const LOGO_SIZE_INTERFACE = "lg"||"xs"||"6x";
+  name: PropTypes.string.isRequired,
+  fa_name: PropTypes.array.isRequired,
+  color: PropTypes.string.isRequired,
+  sharing_url: PropTypes.string.isRequired,
+  only_mobile: PropTypes.bool,
+  id: PropTypes.string,
+};
+export const LOGO_SIZE_INTERFACE = 'lg' || 'xs' || '6x';