siam-ui-utils 2.2.8 → 2.2.10

package/eslint.config.mjs

@@ -1,41 +1,41 @@
-import js from '@eslint/js';
-import globals from 'globals';
-import pluginReact from 'eslint-plugin-react';
-import pluginReactHooks from 'eslint-plugin-react-hooks';
-import pluginReactRefresh from 'eslint-plugin-react-refresh';
-import { defineConfig } from 'eslint/config';
-
-export default defineConfig([
-  { ignores: ['build', '**/*.d.ts'] },
-  {
-    files: ['**/*.{js,jsx,ts,tsx}'],
-    languageOptions: {
-      ecmaVersion: 'latest',
-      sourceType: 'module',
-      globals: globals.browser,
-      parserOptions: {
-        ecmaFeatures: { jsx: true },
-      },
-    },
-    plugins: {
-      react: pluginReact,
-      'react-hooks': pluginReactHooks,
-      'react-refresh': pluginReactRefresh,
-    },
-    rules: {
-      ...js.configs.recommended.rules,
-      ...pluginReact.configs.recommended.rules,
-      ...pluginReact.configs['jsx-runtime'].rules,
-      ...pluginReactHooks.configs.recommended.rules,
-      'react/jsx-no-target-blank': 'off',
-      'react-refresh/only-export-components': [
-        'off',
-        { allowConstantExport: true },
-      ],
-      'react/prop-types': 'off',
-      '@/no-default-export': 'off',
-      'no-unused-vars': 'warn',
-    },
-    settings: { react: { version: 'detect' } },
-  },
-]);
+import js from '@eslint/js';
+import globals from 'globals';
+import pluginReact from 'eslint-plugin-react';
+import pluginReactHooks from 'eslint-plugin-react-hooks';
+import pluginReactRefresh from 'eslint-plugin-react-refresh';
+import { defineConfig } from 'eslint/config';
+
+export default defineConfig([
+  { ignores: ['build', '**/*.d.ts'] },
+  {
+    files: ['**/*.{js,jsx,ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      globals: globals.browser,
+      parserOptions: {
+        ecmaFeatures: { jsx: true },
+      },
+    },
+    plugins: {
+      react: pluginReact,
+      'react-hooks': pluginReactHooks,
+      'react-refresh': pluginReactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...pluginReact.configs.recommended.rules,
+      ...pluginReact.configs['jsx-runtime'].rules,
+      ...pluginReactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'off',
+        { allowConstantExport: true },
+      ],
+      'react/prop-types': 'off',
+      '@/no-default-export': 'off',
+      'no-unused-vars': 'warn',
+    },
+    settings: { react: { version: 'detect' } },
+  },
+]);

package/index.d.ts

@@ -82,4 +82,7 @@ declare module 'siam-ui-utils' {
 
   //VIDEO CALL ROOM
   export function WhereByRoom(props);
+
+  //COPY LINK
+  export function CopyLink(props);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "siam-ui-utils",
-  "version": "2.2.8",
+  "version": "2.2.10",
   "keywords": [
     "ampf-react",
     "ampf-utils",

package/src/App.jsx

@@ -11,6 +11,7 @@ import './index.css';
 import './App.css';
 import './assets/css/vendor/bootstrap.min.css';
 import { WhereByRoom } from './where-by-room';
+import CopyLink from './copy-link';
 
 const App = () => {
   const [open, setOpen] = useState('0');
@@ -81,7 +82,7 @@ const App = () => {
           <AccordionHeader targetId="4">Video Call Room</AccordionHeader>
           <AccordionBody accordionId="4">
             <WhereByRoom
-              src="https://ampf.whereby.com/ampf-cons-virc92qft?displayName=Jose"
+              src="https://whereby.com/test-ampf-room"
               title="Videollamada de ejemplo"
             />
           </AccordionBody>
@@ -110,6 +111,12 @@ const App = () => {
             />
           </AccordionBody>
         </AccordionItem>
+        <AccordionItem>
+          <AccordionHeader targetId="2">Copy-Link</AccordionHeader>
+          <AccordionBody accordionId="2">
+            <CopyLink link="https://linkdepruebaparaelcopylink.com" />
+          </AccordionBody>
+        </AccordionItem>
       </Accordion>
     </div>
   );

package/src/copy-link/index.jsx

@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import { Button } from 'reactstrap';
+import copiarIcon from '../assets/img/copiar.png';
+import './styles.scss';
+
+const copyToClipboard = async (text) => {
+  try {
+    if (!text) return false;
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text);
+      return true;
+    }
+    const ta = document.createElement('textarea');
+    ta.value = text;
+    ta.style.position = 'fixed';
+    ta.style.left = '-9999px';
+    document.body.appendChild(ta);
+    ta.select();
+    document.execCommand('copy');
+    document.body.removeChild(ta);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+const CopyLink = ({ link }) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    await copyToClipboard(link);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+  return (
+    <span className="copy-link-container">
+      <span
+        title={link}
+        className={`copy-link-text${copied ? ' copied' : ''}`}
+        onClick={handleCopy}
+      >
+        {link}
+      </span>
+      <Button
+        color="link"
+        size="sm"
+        onClick={handleCopy}
+        title="Copiar link"
+        className="copy-link-btn"
+      >
+        <img src={copiarIcon} alt="Copiar" />
+      </Button>
+      {copied && <span className="copy-link-copied">¡Copiado!</span>}
+    </span>
+  );
+};
+
+export default CopyLink;

package/src/copy-link/styles.scss

@@ -0,0 +1,39 @@
+.copy-link-container {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  position: relative;
+}
+
+.copy-link-text {
+  width: 90%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+  vertical-align: middle;
+  cursor: pointer;
+  transition: color 0.2s;
+  font-weight: 500;
+  color: #007bff;
+
+  &.copied {
+    color: #28a745;
+  }
+}
+
+.copy-link-btn {
+  padding: 0;
+  font-size: 16px;
+}
+
+.copy-link-copied {
+  color: #28a745;
+  font-size: 13px;
+  margin-left: 8px;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  white-space: nowrap;
+}

package/src/index.js

@@ -7,4 +7,4 @@ export * from './CustomSelectInput';
 export * from './tomar-foto';
 export * as IntlMessages from './IntlMessages';
 export * from './where-by-room';
-
+export * from './copy-link';

package/src/where-by-room/index.jsx

@@ -2,14 +2,7 @@ import { WherebyProvider } from '@whereby.com/browser-sdk/react';
 import '@whereby.com/browser-sdk/embed';
 import Room from './room';
 
-export const WhereByRoom = ({
-  src,
-  onEvent,
-  onActions,
-  iframeClass,
-  isChatEnabled = true,
-  isMinimalEnabled = false,
-}) => {
+export const WhereByRoom = ({ src, onEvent, onActions, iframeClass }) => {
   return (
     <WherebyProvider>
       <Room
@@ -17,8 +10,6 @@ export const WhereByRoom = ({
         onEvent={onEvent}
         onActions={onActions}
         iframeClass={iframeClass}
-        isChatEnabled={isChatEnabled}
-        isMinimalEnabled={isMinimalEnabled}
       />
     </WherebyProvider>
   );

package/src/where-by-room/room.jsx

@@ -1,14 +1,7 @@
 import { useEffect, useRef } from 'react';
 import '@whereby.com/browser-sdk/embed';
 
-export const Room = ({
-  src,
-  onEvent,
-  onActions,
-  iframeClass,
-  isChatEnabled = true,
-  isMinimalEnabled = false,
-}) => {
+export const Room = ({ src, onEvent, onActions, iframeClass }) => {
   const wherebyRef = useRef(null);
 
   useEffect(() => {
@@ -74,12 +67,11 @@ export const Room = ({
         ref={wherebyRef}
         class={iframeClass}
         room={src}
-        chat={isChatEnabled ? 'on' : 'off'}
+        chat="on"
         screenshare="on"
         audio="on"
         video="on"
         allow="camera; microphone; fullscreen"
-        minimal={isMinimalEnabled ? 'on' : 'off'}
       />
     </div>
   );