feat: remove unused files
This commit is contained in:
@@ -1,49 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
export const HelloWorld = () => {
|
||||
const [count, setCount] = useState(0);
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
padding: '20px',
|
||||
border: '1px solid #ccc',
|
||||
borderRadius: '8px',
|
||||
fontFamily: 'Arial, sans-serif',
|
||||
maxWidth: '300px',
|
||||
margin: '20px auto',
|
||||
textAlign: 'center'
|
||||
}}>
|
||||
<h2>Hello from Chatwoot React!</h2>
|
||||
<p>Count: {count}</p>
|
||||
<button
|
||||
onClick={() => setCount(count + 1)}
|
||||
style={{
|
||||
padding: '10px 20px',
|
||||
backgroundColor: '#007bff',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '16px'
|
||||
}}
|
||||
>
|
||||
Increment
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setCount(0)}
|
||||
style={{
|
||||
padding: '10px 20px',
|
||||
backgroundColor: '#dc3545',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '16px',
|
||||
marginLeft: '10px'
|
||||
}}
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,106 +0,0 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { registerVueWebComponents } from '../vue-components/registerWebComponents';
|
||||
|
||||
export const VueWebComponentWrapper = ({
|
||||
initialCount = 0,
|
||||
title = 'Hello from Vue in React!',
|
||||
color = '#42b883',
|
||||
...otherProps
|
||||
}) => {
|
||||
const elementRef = useRef();
|
||||
const [isReady, setIsReady] = useState(false);
|
||||
const [currentCount, setCurrentCount] = useState(initialCount);
|
||||
|
||||
// Register Web Components on mount
|
||||
useEffect(() => {
|
||||
registerVueWebComponents();
|
||||
setIsReady(true);
|
||||
|
||||
// Listen for custom events from Vue component
|
||||
const handleCountChange = event => {
|
||||
setCurrentCount(event.detail.count);
|
||||
console.log('Vue component count changed:', event.detail.count);
|
||||
};
|
||||
|
||||
document.addEventListener('vue-counter-changed', handleCountChange);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('vue-counter-changed', handleCountChange);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Update Web Component properties when React props change
|
||||
useEffect(() => {
|
||||
if (!isReady || !elementRef.current) return;
|
||||
|
||||
const element = elementRef.current;
|
||||
|
||||
// Set properties on the Web Component
|
||||
// Vue converts camelCase props to kebab-case attributes
|
||||
element.setAttribute('initial-count', initialCount);
|
||||
element.setAttribute('title', title);
|
||||
element.setAttribute('color', color);
|
||||
|
||||
console.log('Updated Vue Web Component props:', {
|
||||
initialCount,
|
||||
title,
|
||||
color,
|
||||
});
|
||||
}, [isReady, initialCount, title, color]);
|
||||
|
||||
if (!isReady) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
padding: '20px',
|
||||
textAlign: 'center',
|
||||
border: '1px dashed #ccc',
|
||||
borderRadius: '8px',
|
||||
color: '#666',
|
||||
}}
|
||||
>
|
||||
Loading Vue Web Component...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ margin: '20px 0' }}>
|
||||
<div
|
||||
style={{
|
||||
padding: '10px',
|
||||
backgroundColor: '#f8f9fa',
|
||||
borderRadius: '4px',
|
||||
marginBottom: '10px',
|
||||
fontSize: '14px',
|
||||
color: '#666',
|
||||
}}
|
||||
>
|
||||
<strong>React Wrapper Info:</strong> Current count tracked by React:{' '}
|
||||
{currentCount}
|
||||
</div>
|
||||
|
||||
{/* This is the Vue Web Component rendered inside React */}
|
||||
<vue-hello-world
|
||||
ref={elementRef}
|
||||
initial-count={initialCount}
|
||||
title={title}
|
||||
color={color}
|
||||
{...otherProps}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
padding: '10px',
|
||||
backgroundColor: '#e8f5e8',
|
||||
borderRadius: '4px',
|
||||
marginTop: '10px',
|
||||
fontSize: '12px',
|
||||
color: '#666',
|
||||
}}
|
||||
>
|
||||
✅ This Vue component is running as a Web Component inside React!
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user