@mounaji_npm/share-dialog 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +35 -0
- package/src/index.jsx +127 -0
package/package.json
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@mounaji_npm/share-dialog",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Modal dialog to share links via copy, WhatsApp, Email, and native share API",
|
|
5
|
+
"keywords": ["share", "dialog", "modal", "whatsapp", "react", "saas", "mounaji"],
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"type": "module",
|
|
8
|
+
"publishConfig": {
|
|
9
|
+
"access": "public",
|
|
10
|
+
"registry": "https://registry.npmjs.org/"
|
|
11
|
+
},
|
|
12
|
+
"main": "./dist/mounajisharedialog.umd.cjs",
|
|
13
|
+
"module": "./dist/mounajisharedialog.es.js",
|
|
14
|
+
"exports": {
|
|
15
|
+
".": {
|
|
16
|
+
"import": "./dist/mounajisharedialog.es.js",
|
|
17
|
+
"require": "./dist/mounajisharedialog.umd.cjs"
|
|
18
|
+
}
|
|
19
|
+
},
|
|
20
|
+
"files": ["dist", "src", "DOCS.md"],
|
|
21
|
+
"scripts": {
|
|
22
|
+
"build": "vite build",
|
|
23
|
+
"dev": "vite build --watch"
|
|
24
|
+
},
|
|
25
|
+
"peerDependencies": {
|
|
26
|
+
"react": ">=17.0.0",
|
|
27
|
+
"react-dom": ">=17.0.0"
|
|
28
|
+
},
|
|
29
|
+
"devDependencies": {
|
|
30
|
+
"@vitejs/plugin-react": "^4.3.4",
|
|
31
|
+
"react": "^19.0.0",
|
|
32
|
+
"react-dom": "^19.0.0",
|
|
33
|
+
"vite": "^6.0.0"
|
|
34
|
+
}
|
|
35
|
+
}
|
package/src/index.jsx
ADDED
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @mounaji_npm/share-dialog — Modal to share links via copy, WhatsApp, Email, native share API
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
const STYLES = {
|
|
6
|
+
font: 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
export function ShareDialog({ open, url, title = 'Compartir', onClose }) {
|
|
10
|
+
if (!open) return null;
|
|
11
|
+
|
|
12
|
+
const copyLink = async () => {
|
|
13
|
+
try {
|
|
14
|
+
await navigator.clipboard.writeText(url);
|
|
15
|
+
} catch (e) {}
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
const shareWhatsApp = () => {
|
|
19
|
+
const txt = `${title} - ${url}`;
|
|
20
|
+
window.open(`https://wa.me/?text=${encodeURIComponent(txt)}`, '_blank');
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
const shareEmail = () => {
|
|
24
|
+
window.open(`mailto:?subject=${encodeURIComponent(title)}&body=${encodeURIComponent(url)}`, '_blank');
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
const shareNative = async () => {
|
|
28
|
+
if (navigator.share) {
|
|
29
|
+
try {
|
|
30
|
+
await navigator.share({ title, url });
|
|
31
|
+
} catch (e) {}
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
const hasNativeShare = typeof navigator !== 'undefined' && navigator.share;
|
|
36
|
+
|
|
37
|
+
const btnStyle = {
|
|
38
|
+
display: 'flex',
|
|
39
|
+
flexDirection: 'column',
|
|
40
|
+
alignItems: 'center',
|
|
41
|
+
gap: 6,
|
|
42
|
+
padding: '14px 8px',
|
|
43
|
+
border: '1.5px solid #e2e8f0',
|
|
44
|
+
borderRadius: 10,
|
|
45
|
+
background: 'white',
|
|
46
|
+
cursor: 'pointer',
|
|
47
|
+
fontSize: 12,
|
|
48
|
+
fontWeight: 600,
|
|
49
|
+
color: '#334155',
|
|
50
|
+
fontFamily: STYLES.font,
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
return (
|
|
54
|
+
<div onClick={onClose} style={{
|
|
55
|
+
position: 'fixed',
|
|
56
|
+
inset: 0,
|
|
57
|
+
background: 'rgba(0,0,0,0.5)',
|
|
58
|
+
display: 'flex',
|
|
59
|
+
alignItems: 'center',
|
|
60
|
+
justifyContent: 'center',
|
|
61
|
+
zIndex: 200,
|
|
62
|
+
padding: 16,
|
|
63
|
+
}}>
|
|
64
|
+
<div onClick={e => e.stopPropagation()} style={{
|
|
65
|
+
background: 'white',
|
|
66
|
+
borderRadius: 14,
|
|
67
|
+
padding: 24,
|
|
68
|
+
maxWidth: 380,
|
|
69
|
+
width: '100%',
|
|
70
|
+
boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
|
|
71
|
+
fontFamily: STYLES.font,
|
|
72
|
+
}}>
|
|
73
|
+
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
|
|
74
|
+
<h3 style={{ margin: 0, fontSize: 18, fontWeight: 700, color: '#0f172a' }}>{title}</h3>
|
|
75
|
+
<button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#94a3b8', fontSize: 20 }}>×</button>
|
|
76
|
+
</div>
|
|
77
|
+
|
|
78
|
+
<div style={{
|
|
79
|
+
display: 'flex',
|
|
80
|
+
gap: 8,
|
|
81
|
+
background: '#f1f5f9',
|
|
82
|
+
padding: '10px 12px',
|
|
83
|
+
borderRadius: 8,
|
|
84
|
+
marginBottom: 16,
|
|
85
|
+
alignItems: 'center',
|
|
86
|
+
}}>
|
|
87
|
+
<span style={{ fontSize: 11, color: '#64748b', flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{url}</span>
|
|
88
|
+
</div>
|
|
89
|
+
|
|
90
|
+
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
|
|
91
|
+
<button onClick={copyLink} style={btnStyle}>
|
|
92
|
+
<span style={{ fontSize: 22 }}>📋</span>
|
|
93
|
+
Copiar
|
|
94
|
+
</button>
|
|
95
|
+
<button onClick={shareWhatsApp} style={btnStyle}>
|
|
96
|
+
<span style={{ fontSize: 22 }}>💬</span>
|
|
97
|
+
WhatsApp
|
|
98
|
+
</button>
|
|
99
|
+
<button onClick={shareEmail} style={btnStyle}>
|
|
100
|
+
<span style={{ fontSize: 22 }}>✉</span>
|
|
101
|
+
Email
|
|
102
|
+
</button>
|
|
103
|
+
</div>
|
|
104
|
+
|
|
105
|
+
{hasNativeShare && (
|
|
106
|
+
<button onClick={shareNative} style={{
|
|
107
|
+
width: '100%',
|
|
108
|
+
marginTop: 12,
|
|
109
|
+
padding: '10px',
|
|
110
|
+
border: '1.5px solid #0d9488',
|
|
111
|
+
borderRadius: 10,
|
|
112
|
+
background: '#f0fdfa',
|
|
113
|
+
cursor: 'pointer',
|
|
114
|
+
fontSize: 13,
|
|
115
|
+
fontWeight: 600,
|
|
116
|
+
color: '#0d9488',
|
|
117
|
+
fontFamily: STYLES.font,
|
|
118
|
+
}}>
|
|
119
|
+
Compartir nativamente
|
|
120
|
+
</button>
|
|
121
|
+
)}
|
|
122
|
+
</div>
|
|
123
|
+
</div>
|
|
124
|
+
);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
export default ShareDialog;
|