react-peer-chat 0.2.0 → 0.2.1

package/build/icons.js

@@ -1,39 +1,29 @@
 import React from "react";
 import './icons.css';
 export function BiSolidMessageDetail(props) {
-    return <span {...props}>
-        <svg fill="currentColor" width='1.5rem' height='1.5rem' className='scale-down'>
-            <path d="M20 2H4c-1.103 0-2 .894-2 1.992v12.016C2 17.106 2.897 18 4 18h3v4l6.351-4H20c1.103 0 2-.894 2-1.992V3.992A1.998 1.998 0 0 0 20 2zm-6 11H7v-2h7v2zm3-4H7V7h10v2z"/>
-        </svg>
-    </span>;
+    return React.createElement("span", Object.assign({}, props),
+        React.createElement("svg", { fill: "currentColor", width: '1.5rem', height: '1.5rem', className: 'scale-down' },
+            React.createElement("path", { d: "M20 2H4c-1.103 0-2 .894-2 1.992v12.016C2 17.106 2.897 18 4 18h3v4l6.351-4H20c1.103 0 2-.894 2-1.992V3.992A1.998 1.998 0 0 0 20 2zm-6 11H7v-2h7v2zm3-4H7V7h10v2z" })));
 }
 export function BiSolidMessageX(props) {
-    return <span {...props}>
-        <svg fill="currentColor" width='1.5rem' height='1.5rem' className='scale-down'>
-            <path d="M20 2H4c-1.103 0-2 .894-2 1.992v12.016C2 17.106 2.897 18 4 18h3v4l6.351-4H20c1.103 0 2-.894 2-1.992V3.992A1.998 1.998 0 0 0 20 2zm-3.293 11.293-1.414 1.414L12 11.414l-3.293 3.293-1.414-1.414L10.586 10 7.293 6.707l1.414-1.414L12 8.586l3.293-3.293 1.414 1.414L13.414 10l3.293 3.293z"/>
-        </svg>
-    </span>;
+    return React.createElement("span", Object.assign({}, props),
+        React.createElement("svg", { fill: "currentColor", width: '1.5rem', height: '1.5rem', className: 'scale-down' },
+            React.createElement("path", { d: "M20 2H4c-1.103 0-2 .894-2 1.992v12.016C2 17.106 2.897 18 4 18h3v4l6.351-4H20c1.103 0 2-.894 2-1.992V3.992A1.998 1.998 0 0 0 20 2zm-3.293 11.293-1.414 1.414L12 11.414l-3.293 3.293-1.414-1.414L10.586 10 7.293 6.707l1.414-1.414L12 8.586l3.293-3.293 1.414 1.414L13.414 10l3.293 3.293z" })));
 }
 export function GrSend(props) {
-    return <span {...props}>
-        <svg fill="currentColor" width='1.5rem' height='1.5rem' className='scale-down invert'>
-            <path fill="none" stroke="#000" strokeWidth={2} d="M22,3 L2,11 L20.5,19 L22,3 Z M10,20.5 L13,16 M15.5,9.5 L9,14 L9.85884537,20.0119176 C9.93680292,20.5576204 10.0751625,20.5490248 10.1651297,20.009222 L11,15 L15.5,9.5 Z"/>
-        </svg>
-    </span>;
+    return React.createElement("span", Object.assign({}, props),
+        React.createElement("svg", { fill: "currentColor", width: '1.5rem', height: '1.5rem', className: 'scale-down invert' },
+            React.createElement("path", { fill: "none", stroke: "#000", strokeWidth: 2, d: "M22,3 L2,11 L20.5,19 L22,3 Z M10,20.5 L13,16 M15.5,9.5 L9,14 L9.85884537,20.0119176 C9.93680292,20.5576204 10.0751625,20.5490248 10.1651297,20.009222 L11,15 L15.5,9.5 Z" })));
 }
 export function BsFillMicFill(props) {
-    return <span {...props}>
-        <svg fill="currentColor" width='1rem' height='1rem'>
-            <path d="M5 3a3 3 0 0 1 6 0v5a3 3 0 0 1-6 0V3z"/>
-            <path d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z"/>
-        </svg>
-    </span>;
+    return React.createElement("span", Object.assign({}, props),
+        React.createElement("svg", { fill: "currentColor", width: '1rem', height: '1rem' },
+            React.createElement("path", { d: "M5 3a3 3 0 0 1 6 0v5a3 3 0 0 1-6 0V3z" }),
+            React.createElement("path", { d: "M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z" })));
 }
 export function BsFillMicMuteFill(props) {
-    return <span {...props}>
-        <svg fill="currentColor" width='1rem' height='1rem'>
-            <path d="M13 8c0 .564-.094 1.107-.266 1.613l-.814-.814A4.02 4.02 0 0 0 12 8V7a.5.5 0 0 1 1 0v1zm-5 4c.818 0 1.578-.245 2.212-.667l.718.719a4.973 4.973 0 0 1-2.43.923V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 1 0v1a4 4 0 0 0 4 4zm3-9v4.879L5.158 2.037A3.001 3.001 0 0 1 11 3z"/>
-            <path d="M9.486 10.607 5 6.12V8a3 3 0 0 0 4.486 2.607zm-7.84-9.253 12 12 .708-.708-12-12-.708.708z"/>
-        </svg>
-    </span>;
+    return React.createElement("span", Object.assign({}, props),
+        React.createElement("svg", { fill: "currentColor", width: '1rem', height: '1rem' },
+            React.createElement("path", { d: "M13 8c0 .564-.094 1.107-.266 1.613l-.814-.814A4.02 4.02 0 0 0 12 8V7a.5.5 0 0 1 1 0v1zm-5 4c.818 0 1.578-.245 2.212-.667l.718.719a4.973 4.973 0 0 1-2.43.923V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 1 0v1a4 4 0 0 0 4 4zm3-9v4.879L5.158 2.037A3.001 3.001 0 0 1 11 3z" }),
+            React.createElement("path", { d: "M9.486 10.607 5 6.12V8a3 3 0 0 0 4.486 2.607zm-7.84-9.253 12 12 .708-.708-12-12-.708.708z" })));
 }

package/build/index.css

@@ -28,8 +28,19 @@
     outline: 2px solid white;
     border-radius: 0.25rem;
     font-size: smaller;
+}
+
+.position-left {
+    left: 0.5rem;
+    translate: -100%;
+}
+
+.position-center {
     translate: -50%;
-    left: 50%;
+}
+
+.position-right {
+    left: 0.5rem;
 }
 
 .message-container {

package/build/index.d.ts

@@ -30,5 +30,5 @@ type Props = {
     children?: ReactNode | ((childrenOptions: ChildrenOptions) => ReactNode);
 } & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 export default function Chat({ name, peerId, remotePeerId, peerOptions, text, voice, dialogOptions, onError, children, ...props }: Props): React.JSX.Element;
-export declare const cleanStorage: () => void;
+export declare const clearChat: () => void;
 export {};

package/build/index.js

@@ -132,48 +132,39 @@ export default function Chat(_a) {
         if (container)
             container.scrollTop = container.scrollHeight;
     }, [dialog, opponentName, messages]);
-    return <div className='main' {...props}>
-        {typeof children === 'function' ? children({ notification, messages, addMessage, dialogRef, audio, setAudio }) : <>
-            {text && <div>
-                {dialog ? <BiSolidMessageX onClick={() => setDialog(false)}/>
-                    : <div className='notification'>
-                        <BiSolidMessageDetail onClick={() => {
-                            setNotification(false);
-                            setDialog(true);
-                        }}/>
-                        {notification && <span className='badge'/>}
-                    </div>}
-                <dialog ref={dialogRef} className={`${dialog ? 'dialog' : ''} position-${(dialogOptions === null || dialogOptions === void 0 ? void 0 : dialogOptions.position) || 'center'}`} style={dialogOptions === null || dialogOptions === void 0 ? void 0 : dialogOptions.style}>
-                    <div className='heading'>Chat</div>
-                    <hr />
-                    <div>
-                        <div ref={containerRef} className='message-container'>
-                            {opponentName && messages.map(({ id, text }, i) => <div key={i}>
-                                <strong>{id === peerId ? 'You' : opponentName}: </strong>
-                                <span>{text}</span>
-                            </div>)}
-                        </div>
-                        <hr />
-                        <form className='input-container' onSubmit={e => {
-                    var _a;
-                    e.preventDefault();
-                    const text = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value;
-                    if (text) {
-                        inputRef.current.value = '';
-                        addMessage({ id: peerId, text }, true);
-                    }
-                }}>
-                            <input ref={inputRef} className='input' placeholder='Enter a message'/>
-                            <button type='submit'><GrSend /></button>
-                        </form>
-                    </div>
-                </dialog>
-            </div>}
-            {voice && <div>
-                {audio ? <BsFillMicFill title="Turn mic off" onClick={() => setAudio(false)}/> : <BsFillMicMuteFill title="Turn mic on" onClick={() => setAudio(true)}/>}
-            </div>}
-        </>}
-        {voice && audio && <audio ref={streamRef} autoPlay style={{ display: 'none' }}/>}
-    </div>;
+    return React.createElement("div", Object.assign({ className: 'main' }, props),
+        typeof children === 'function' ? children({ notification, messages, addMessage, dialogRef, audio, setAudio }) : React.createElement(React.Fragment, null,
+            text && React.createElement("div", null,
+                dialog ? React.createElement(BiSolidMessageX, { onClick: () => setDialog(false) })
+                    : React.createElement("div", { className: 'notification' },
+                        React.createElement(BiSolidMessageDetail, { onClick: () => {
+                                setNotification(false);
+                                setDialog(true);
+                            } }),
+                        notification && React.createElement("span", { className: 'badge' })),
+                React.createElement("dialog", { ref: dialogRef, className: `${dialog ? 'dialog' : ''} position-${(dialogOptions === null || dialogOptions === void 0 ? void 0 : dialogOptions.position) || 'center'}`, style: dialogOptions === null || dialogOptions === void 0 ? void 0 : dialogOptions.style },
+                    React.createElement("div", { className: 'heading' }, "Chat"),
+                    React.createElement("hr", null),
+                    React.createElement("div", null,
+                        React.createElement("div", { ref: containerRef, className: 'message-container' }, opponentName && messages.map(({ id, text }, i) => React.createElement("div", { key: i },
+                            React.createElement("strong", null,
+                                id === peerId ? 'You' : opponentName,
+                                ": "),
+                            React.createElement("span", null, text)))),
+                        React.createElement("hr", null),
+                        React.createElement("form", { className: 'input-container', onSubmit: e => {
+                                var _a;
+                                e.preventDefault();
+                                const text = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value;
+                                if (text) {
+                                    inputRef.current.value = '';
+                                    addMessage({ id: peerId, text }, true);
+                                }
+                            } },
+                            React.createElement("input", { ref: inputRef, className: 'input', placeholder: 'Enter a message' }),
+                            React.createElement("button", { type: 'submit' },
+                                React.createElement(GrSend, null)))))),
+            voice && React.createElement("div", null, audio ? React.createElement(BsFillMicFill, { title: "Turn mic off", onClick: () => setAudio(false) }) : React.createElement(BsFillMicMuteFill, { title: "Turn mic on", onClick: () => setAudio(true) }))),
+        voice && audio && React.createElement("audio", { ref: streamRef, autoPlay: true, style: { display: 'none' } }));
 }
-export const cleanStorage = () => removeStorage('rpc-messages');
+export const clearChat = () => removeStorage('rpc-messages');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-peer-chat",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "An easy to use react component for impleting peer-to-peer chatting.",
   "main": "./build/index.js",
   "type": "module",