diff --git a/src/components/close.tsx b/src/components/close.tsx index 4c2c1e1..f1233cf 100644 --- 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 index b2ea200..886ac55 100644 --- 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 }} > - + {path} diff --git a/src/components/icon/list.tsx b/src/components/icon/list.tsx index d832008..d14cfb2 100644 --- a/src/components/icon/list.tsx +++ b/src/components/icon/list.tsx @@ -11,14 +11,14 @@ const externalOpen = (URL) => window.open(URL, "_blank", "noopener"); export const IconList: IconListObject = { facebook: { path: ( - + ), color: "#0076FB", e: (l) => externalOpen(`https://www.facebook.com/sharer/sharer.php?u=${l}`), }, twitter: { path: ( - + ), color: "#1DA1F2", e: (l, t) => @@ -26,14 +26,14 @@ export const IconList: IconListObject = { }, whatsapp: { path: ( - + ), color: "#25D366", e: (l, t) => externalOpen(`https://api.whatsapp.com/send?text=${t} ${l}`), }, reddit: { path: ( - + ), color: "#FF4500", e: (l, t) => @@ -41,7 +41,10 @@ export const IconList: IconListObject = { }, telegram: { path: ( - + ), color: "#0088CC", e: (l, t) => @@ -49,7 +52,7 @@ export const IconList: IconListObject = { }, linkedin: { path: ( - + ), color: "#0073b1", e: (l, t, ti) => @@ -59,25 +62,31 @@ export const IconList: IconListObject = { }, mail: { path: ( - + ), color: "#E53E3E", - e: (l, t) => externalOpen(`mailto:?body=${l}&subject=${t}`), + e: (l, t) => externalOpen(`mailto:?subject=${t}&body=${l}`), }, copy: { path: ( - + <> + + + ), + color: "#718096", - e: (l) => navigator.clipboard.writeText(decodeURIComponent(l)), + e: (l) => { + navigator.clipboard.writeText(l); + }, }, vk: { path: ( - + ), 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 index 91603df..8b70436 100644 --- a/src/components/social-icons.tsx +++ b/src/components/social-icons.tsx @@ -11,6 +11,8 @@ export const SocialIcons = ({ data, closeText, onClick, + dark, + scrollable = false, }: SocialIconsProps) => (
-
+
{sites.map((name) => ( ))}
diff --git a/src/interfaces.ts b/src/interfaces.ts index c8b7d0d..43ce45b 100644 --- a/src/interfaces.ts +++ b/src/interfaces.ts @@ -6,19 +6,23 @@ 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; onClick?; + dark?: boolean; + scrollable?: boolean; } export interface IconProps { @@ -26,6 +30,7 @@ export interface IconProps { name: string; data: Required; onClick?; + dark?: boolean; } export interface IconItem { diff --git a/src/sharer.tsx b/src/sharer.tsx index 18fbc63..5789185 100644 --- 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} /> diff --git a/src/style.css b/src/style.css index 6667a9d..51aef56 100644 --- 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,7 +41,6 @@ height: auto; cursor: pointer; border: 0; - background: #1a78f6; padding: 0.75rem; border-radius: 0.5rem; font-size: 0; @@ -48,11 +48,12 @@ .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; + } }