hc-oss · Virous77 · Jan 24, 2024
diff --git a/src/components/close.tsx b/src/components/close.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 interface CloseButtonProps {
   onClose;
-  closeText?: string;
+  closeText?: string | JSX.Element;
 }
 
 export function CloseButton({ onClose, closeText }: CloseButtonProps) {

diff --git a/src/components/icon/index.tsx b/src/components/icon/index.tsx
@@ -3,7 +3,13 @@ import React from "react";
 import { IconProps } from "../../interfaces";
 import { IconList } from "./list";
 
-export default function Icon({ name, data, onClose, onClick }: IconProps) {
+export default function Icon({
+  name,
+  data,
+  onClose,
+  onClick,
+  dark = false,
+}: IconProps) {
   const { path, viewBox = "0 0 24 24", color, e } = IconList[name];
 
   const handleOnButtonClicked = () => {
@@ -17,9 +23,9 @@ export default function Icon({ name, data, onClose, onClick }: IconProps) {
       onClick={handleOnButtonClicked}
       aria-label={name}
       className="rws-icon"
-      style={{ background: color }}
+      style={{ background: dark ? "#FFFFFF" : color }}
     >
-      <svg fill="white" viewBox={viewBox}>
+      <svg fill={`${dark ? "#000000" : "white"}`} viewBox={viewBox}>
         {path}
       </svg>
     </button>

diff --git a/src/components/icon/list.tsx b/src/components/icon/list.tsx
@@ -11,45 +11,48 @@ const externalOpen = (URL) => window.open(URL, "_blank", "noopener");
 export const IconList: IconListObject = {
   facebook: {
     path: (
-      <path d="M24 12a12 12 0 10-13.9 11.9v-8.4h-3V12h3V9.4c0-3 1.8-4.7 4.6-4.7l2.6.2v3h-1.5c-1.5 0-2 .9-2 1.8V12h3.4l-.5 3.5h-2.8v8.4A12 12 0 0024 12z" />
+      <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3 8h-1.35c-.538 0-.65.221-.65.778v1.222h2l-.209 2h-1.791v7h-3v-7h-2v-2h2v-2.308c0-1.769.931-2.692 3.029-2.692h1.971v3z" />
     ),
     color: "#0076FB",
     e: (l) => externalOpen(`https://www.facebook.com/sharer/sharer.php?u=${l}`),
   },
   twitter: {
     path: (
-      <path d="M24 4.6a10 10 0 01-2.9.7 5 5 0 002.2-2.7c-1 .6-2 1-3.1 1.2a5 5 0 00-8.4 4.5A14 14 0 011.6 3.2 4.8 4.8 0 001 5.6a5 5 0 002.2 4.1 4.9 4.9 0 01-2.3-.6A5 5 0 005 14a5 5 0 01-2.2 0 5 5 0 004.6 3.5 9.9 9.9 0 01-6.1 2.1H0a14 14 0 007.6 2.2c9 0 14-7.5 14-14V7A10 10 0 0024 4.6z" />
+      <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.066 9.645c.183 4.04-2.83 8.544-8.164 8.544-1.622 0-3.131-.476-4.402-1.291 1.524.18 3.045-.244 4.252-1.189-1.256-.023-2.317-.854-2.684-1.995.451.086.895.061 1.298-.049-1.381-.278-2.335-1.522-2.304-2.853.388.215.83.344 1.301.359-1.279-.855-1.641-2.544-.889-3.835 1.416 1.738 3.533 2.881 5.92 3.001-.419-1.796.944-3.527 2.799-3.527.825 0 1.572.349 2.096.907.654-.128 1.27-.368 1.824-.697-.215.671-.67 1.233-1.263 1.589.581-.07 1.135-.224 1.649-.453-.384.578-.87 1.084-1.433 1.489z" />
     ),
     color: "#1DA1F2",
     e: (l, t) =>
       externalOpen(`https://twitter.com/intent/tweet?text=${t}&url=${l}`),
   },
   whatsapp: {
     path: (
-      <path d="M17.5 14.4l-2-1c-.3 0-.5-.1-.7.2l-1 1.1c-.1.2-.3.3-.6.1s-1.3-.5-2.4-1.5a9 9 0 01-1.7-2c-.1-.3 0-.5.2-.6l.4-.6c.2-.1.2-.3.3-.5v-.5L9 7c-.2-.6-.4-.5-.6-.5h-.6c-.2 0-.5 0-.8.4-.2.3-1 1-1 2.5s1 2.8 1.2 3c.2.2 2.1 3.2 5.1 4.5l1.7.6a4 4 0 001.9.2c.5-.1 1.7-.8 2-1.5.2-.6.2-1.2.1-1.4l-.5-.3M12 21.8a9.9 9.9 0 01-5-1.4l-.4-.2-3.7 1 1-3.7-.2-.3a9.9 9.9 0 01-1.5-5.3 9.9 9.9 0 0116.8-7 9.8 9.8 0 013 7 9.9 9.9 0 01-10 9.9m8.4-18.3A11.8 11.8 0 0012.1 0 12 12 0 001.8 17.8L0 24l6.4-1.6a11.9 11.9 0 005.6 1.4 12 12 0 0012-11.9 11.8 11.8 0 00-3.5-8.4z" />
+      <path d="M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.582 2.128 2.182-.573c.978.58 1.911.928 3.145.929 3.178 0 5.767-2.587 5.768-5.766.001-3.187-2.575-5.77-5.764-5.771zm3.392 8.244c-.144.405-.837.774-1.17.824-.299.045-.677.063-1.092-.069-.252-.08-.575-.187-.988-.365-1.739-.751-2.874-2.502-2.961-2.617-.087-.116-.708-.94-.708-1.793s.448-1.273.607-1.446c.159-.173.346-.217.462-.217l.332.006c.106.005.249-.04.39.298.144.347.491 1.2.534 1.287.043.087.072.188.014.304-.058.116-.087.188-.173.289l-.26.304c-.087.086-.177.18-.076.354.101.174.449.741.964 1.201.662.591 1.221.774 1.394.86s.274.072.376-.043c.101-.116.433-.506.549-.68.116-.173.231-.145.39-.087s1.011.477 1.184.564.289.13.332.202c.045.072.045.419-.1.824zm-3.423-14.416c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm.029 18.88c-1.161 0-2.305-.292-3.318-.844l-3.677.964.984-3.595c-.607-1.052-.927-2.246-.926-3.468.001-3.825 3.113-6.937 6.937-6.937 1.856.001 3.598.723 4.907 2.034 1.31 1.311 2.031 3.054 2.03 4.908-.001 3.825-3.113 6.938-6.937 6.938z" />
     ),
     color: "#25D366",
     e: (l, t) => externalOpen(`https://api.whatsapp.com/send?text=${t} ${l}`),
   },
   reddit: {
     path: (
-      <path d="M12 0A12 12 0 000 12a12 12 0 0012 12 12 12 0 0012-12A12 12 0 0012 0zm5.01 4.74c.69 0 1.25.56 1.25 1.25a1.25 1.25 0 01-2.5.06l-2.6-.55-.8 3.75c1.83.07 3.48.63 4.68 1.49.3-.31.73-.5 1.2-.5.97 0 1.76.8 1.76 1.76 0 .72-.43 1.33-1.01 1.61a3.11 3.11 0 01.04.52c0 2.7-3.13 4.87-7 4.87-3.88 0-7-2.17-7-4.87 0-.18 0-.36.04-.53A1.75 1.75 0 014.03 12a1.75 1.75 0 012.96-1.26 8.52 8.52 0 014.74-1.5l.89-4.17a.34.34 0 01.14-.2.35.35 0 01.24-.04l2.9.62a1.21 1.21 0 011.11-.7zM9.25 12a1.25 1.25 0 101.25 1.25c0-.69-.56-1.25-1.25-1.25zm5.5 0a1.25 1.25 0 000 2.5 1.25 1.25 0 000-2.5zm-5.47 3.99a.33.33 0 00-.23.1.33.33 0 000 .46c.84.84 2.49.91 2.96.91.48 0 2.1-.06 2.96-.91a.36.36 0 00.03-.47.33.33 0 00-.46 0c-.55.54-1.68.73-2.51.73-.83 0-1.98-.2-2.51-.73a.33.33 0 00-.24-.1z" />
+      <path d="M14.238 15.348c.085.084.085.221 0 .306-.465.462-1.194.687-2.231.687l-.008-.002-.008.002c-1.036 0-1.766-.225-2.231-.688-.085-.084-.085-.221 0-.305.084-.084.222-.084.307 0 .379.377 1.008.561 1.924.561l.008.002.008-.002c.915 0 1.544-.184 1.924-.561.085-.084.223-.084.307 0zm-3.44-2.418c0-.507-.414-.919-.922-.919-.509 0-.923.412-.923.919 0 .506.414.918.923.918.508.001.922-.411.922-.918zm13.202-.93c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-5-.129c0-.851-.695-1.543-1.55-1.543-.417 0-.795.167-1.074.435-1.056-.695-2.485-1.137-4.066-1.194l.865-2.724 2.343.549-.003.034c0 .696.569 1.262 1.268 1.262.699 0 1.267-.566 1.267-1.262s-.568-1.262-1.267-1.262c-.537 0-.994.335-1.179.804l-2.525-.592c-.11-.027-.223.037-.257.145l-.965 3.038c-1.656.02-3.155.466-4.258 1.181-.277-.255-.644-.415-1.05-.415-.854.001-1.549.693-1.549 1.544 0 .566.311 1.056.768 1.325-.03.164-.05.331-.05.5 0 2.281 2.805 4.137 6.253 4.137s6.253-1.856 6.253-4.137c0-.16-.017-.317-.044-.472.486-.261.82-.766.82-1.353zm-4.872.141c-.509 0-.922.412-.922.919 0 .506.414.918.922.918s.922-.412.922-.918c0-.507-.413-.919-.922-.919z" />
     ),
     color: "#FF4500",
     e: (l, t) =>
       externalOpen(`https://www.reddit.com/submit?url=${l}&title=${t}`),
   },
   telegram: {
     path: (
-      <path d="M23.91 3.79L20.3 20.84c-.25 1.21-.98 1.5-2 .94l-5.5-4.07-2.66 2.57c-.3.3-.55.56-1.1.56-.72 0-.6-.27-.84-.95L6.3 13.7.85 12c-1.18-.35-1.19-1.16.26-1.75l21.26-8.2c.97-.43 1.9.24 1.53 1.73z" />
+      <path
+        id="telegram-5"
+        d="M12,0c-6.627,0 -12,5.373 -12,12c0,6.627 5.373,12 12,12c6.627,0 12,-5.373 12,-12c0,-6.627 -5.373,-12 -12,-12Zm0,2c5.514,0 10,4.486 10,10c0,5.514 -4.486,10 -10,10c-5.514,0 -10,-4.486 -10,-10c0,-5.514 4.486,-10 10,-10Zm2.692,14.889c0.161,0.115 0.368,0.143 0.553,0.073c0.185,-0.07 0.322,-0.228 0.362,-0.42c0.435,-2.042 1.489,-7.211 1.884,-9.068c0.03,-0.14 -0.019,-0.285 -0.129,-0.379c-0.11,-0.093 -0.263,-0.12 -0.399,-0.07c-2.096,0.776 -8.553,3.198 -11.192,4.175c-0.168,0.062 -0.277,0.223 -0.271,0.4c0.006,0.177 0.125,0.33 0.296,0.381c1.184,0.354 2.738,0.847 2.738,0.847c0,0 0.725,2.193 1.104,3.308c0.047,0.139 0.157,0.25 0.301,0.287c0.145,0.038 0.298,-0.001 0.406,-0.103c0.608,-0.574 1.548,-1.461 1.548,-1.461c0,0 1.786,1.309 2.799,2.03Zm-5.505,-4.338l0.84,2.769l0.186,-1.754c0,0 3.243,-2.925 5.092,-4.593c0.055,-0.048 0.062,-0.13 0.017,-0.188c-0.045,-0.057 -0.126,-0.071 -0.188,-0.032c-2.143,1.368 -5.947,3.798 -5.947,3.798Z"
+      />
     ),
     color: "#0088CC",
     e: (l, t) =>
       externalOpen(`https://telegram.me/share/msg?url=${l}&text=${t}`),
   },
   linkedin: {
     path: (
-      <path d="M6.5 21.5h-5v-13h5v13zM4 6.5C2.5 6.5 1.5 5.3 1.5 4s1-2.4 2.5-2.4c1.6 0 2.5 1 2.6 2.5 0 1.4-1 2.5-2.6 2.5zm11.5 6c-1 0-2 1-2 2v7h-5v-13h5V10s1.6-1.5 4-1.5c3 0 5 2.2 5 6.3v6.7h-5v-7c0-1-1-2-2-2z" />
+      <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z" />
     ),
     color: "#0073b1",
     e: (l, t, ti) =>
@@ -59,25 +62,31 @@ export const IconList: IconListObject = {
   },
   mail: {
     path: (
-      <path d="M20 4H4a2 2 0 00-2 2v12c0 1.1.9 2 2 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" />
+      <path d="M12 .02c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.99 6.98l-6.99 5.666-6.991-5.666h13.981zm.01 10h-14v-8.505l7 5.673 7-5.672v8.504z" />
     ),
     color: "#E53E3E",
-    e: (l, t) => externalOpen(`mailto:?body=${l}&subject=${t}`),
+    e: (l, t) => externalOpen(`mailto:?subject=${t}&body=${l}`),
   },
   copy: {
     path: (
-      <path d="M16 1H4a2 2 0 00-2 2v14h2V3h12V1zm3 4H8a2 2 0 00-2 2v14c0 1.1.9 2 2 2h11a2 2 0 002-2V7a2 2 0 00-2-2zm0 16H8V7h11v14z" />
+      <>
+        <path d="M14 8H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2V10c0-1.103-.897-2-2-2z" />
+        <path d="M20 2H10a2 2 0 0 0-2 2v2h8a2 2 0 0 1 2 2v8h2a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z" />
+      </>
     ),
+
     color: "#718096",
-    e: (l) => navigator.clipboard.writeText(decodeURIComponent(l)),
+    e: (l) => {
+      navigator.clipboard.writeText(l);
+    },
   },
   vk: {
     path: (
-      <path d="M22.7 6.24c.16-.52 0-.9-.73-.9H19.5c-.62 0-.91.32-1.06.69 0 0-1.25 3.04-3.02 5.02-.57.57-.83.75-1.15.75-.15 0-.39-.18-.39-.7V6.24c0-.63-.17-.9-.69-.9H9.34c-.39 0-.62.29-.62.56 0 .59.88.72.97 2.4v3.6c0 .8-.14.95-.45.95-.84 0-2.86-3.06-4.06-6.56-.24-.68-.48-.96-1.1-.96H1.61c-.7 0-.85.33-.85.7 0 .65.84 3.88 3.88 8.14 2.03 2.92 4.9 4.5 7.5 4.5 1.55 0 1.75-.35 1.75-.96 0-2.78-.15-3.04.64-3.04.36 0 .99.18 2.44 1.58 1.67 1.67 1.95 2.42 2.88 2.42h2.45c.7 0 1.06-.35.85-1.05-.46-1.45-3.62-4.44-3.76-4.64-.36-.47-.26-.68 0-1.1 0 0 3-4.21 3.3-5.64Z" />
+      <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.344 16.163h-1.867c-1.055 0-1.232-.601-2.102-1.469-.785-.785-1.22-.183-1.202.935.006.297-.141.534-.495.534-1.105 0-2.694.156-4.304-1.58-1.647-1.779-3.374-5.348-3.374-5.699 0-.208.172-.301.459-.301h1.898c.503 0 .545.249.686.568.584 1.331 1.981 4.002 2.354 2.511.214-.856.301-2.839-.615-3.01-.52-.096.396-.652 1.722-.652.33 0 .688.035 1.054.12.673.156.676.458.666.898-.034 1.666-.235 2.786.204 3.069.419.271 1.521-1.502 2.104-2.871.159-.378.191-.632.643-.632h2.322c1.216 0-.159 1.748-1.21 3.112-.847 1.099-.802 1.12.183 2.034.701.651 1.53 1.54 1.53 2.043 0 .238-.186.39-.656.39z" />
     ),
     color: "#07f",
-    e: (l, t, ti) =>
-      externalOpen(`http://vk.com/share.php?url=${l}&title=${ti}&comment=${t}`),
+    e: (l, t) =>
+      externalOpen(`http://vk.com/share.php?url=${l}&title=${t}&noparse=true`),
   },
   okru: {
     path: (

diff --git a/src/components/social-icons.tsx b/src/components/social-icons.tsx
@@ -11,21 +11,24 @@ export const SocialIcons = ({
   data,
   closeText,
   onClick,
+  dark,
+  scrollable = false,
 }: SocialIconsProps) => (
   <section
     role="dialog"
     aria-modal="true"
     className="rws-container web-share-fade-in-up"
   >
     <Header title={data.title} />
-    <div className="rws-icons">
+    <div className={`${scrollable ? "rws-icons-scroll" : "rws-icons"}`}>
       {sites.map((name) => (
         <Icon
           name={name}
           key={name}
           data={data}
           onClose={onClose}
           onClick={onClick}
+          dark={dark}
         />
       ))}
     </div>

diff --git a/src/interfaces.ts b/src/interfaces.ts
@@ -6,26 +6,31 @@ export interface ShareData {
 
 export interface RWebShareProps {
   children: any;
-  closeText?: string;
+  closeText?: string | JSX.Element;
   data: ShareData;
   sites?: string[];
   onClick?;
   disableNative?;
+  dark?: boolean;
+  scrollable?: boolean;
 }
 
 export interface SocialIconsProps {
   onClose;
-  closeText?: string;
+  closeText?: string | JSX.Element;
   sites: string[];
   data: Required<ShareData>;
   onClick?;
+  dark?: boolean;
+  scrollable?: boolean;
 }
 
 export interface IconProps {
   onClose;
   name: string;
   data: Required<ShareData>;
   onClick?;
+  dark?: boolean;
 }
 
 export interface IconItem {

diff --git a/src/sharer.tsx b/src/sharer.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import "./style.css";
 
 import React, { cloneElement, memo, useCallback, useMemo } from "react";
@@ -58,6 +60,8 @@ export const RWebShare = memo((props: RWebShareProps) => {
               data={shareData}
               closeText={props.closeText}
               onClick={props.onClick}
+              dark={props.dark}
+              scrollable={props.scrollable}
             />
           </Backdrop>
         </Portal>

diff --git a/src/style.css b/src/style.css
@@ -28,7 +28,8 @@
   }
 }
 
-.rws-icons {
+.rws-icons,
+.rws-icons-scroll {
   padding: 1.25rem;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
@@ -40,19 +41,19 @@
   height: auto;
   cursor: pointer;
   border: 0;
-  background: #1a78f6;
   padding: 0.75rem;
   border-radius: 0.5rem;
   font-size: 0;
 }
 
 .rws-container {
   max-width: 24rem;
-  width: 90%;
-  background-color: white;
+  width: 100%;
+  background-color: #000000;
   border-radius: 0.5rem;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+  position: fixed;
+  top: 33%;
+  transform: translate(-50%, -50%);
 }
 
 .rws-backdrop {
@@ -61,7 +62,7 @@
   top: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.4);
+  background: rgba(0, 0, 0, 0.2);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -74,14 +75,56 @@
   font-size: 1.25rem;
   font-weight: 600;
   padding-bottom: 0;
+  color: #fff;
 }
 
 .rws-close {
-  background: #edf2f7;
+  background: #ffff;
   cursor: pointer;
   padding: 0.75rem;
   display: block;
   width: 100%;
   border: 0;
   font-size: 1rem;
+  border-radius: 0;
+  border-bottom-left-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+}
+
+.rws-close:hover {
+  background: #f2f2f2;
+}
+
+@media (max-width: 640px) {
+  .rws-container {
+    bottom: 0;
+    top: auto;
+    max-width: 100%;
+  }
+
+  .rws-close {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .rws-icons-scroll {
+    display: flex;
+    flex-direction: row;
+    overflow-x: scroll;
+    padding: 1rem;
+  }
+
+  .rws-icons-scroll::-webkit-scrollbar {
+    display: none;
+  }
+
+  .rws-icons-scroll > .rws-icon {
+    width: 60px;
+    height: 60px;
+  }
+
+  .rws-icon svg {
+    width: 35px;
+    height: 35px;
+  }
 }