78 lines
2.0 KiB
TypeScript
78 lines
2.0 KiB
TypeScript
import React, { useRef } from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Image, Upload } from 'lucide-react';
|
|
import { __ } from '@/lib/i18n';
|
|
|
|
interface MediaUploaderProps {
|
|
onSelect: (url: string, id?: number) => void;
|
|
type?: 'image' | 'video' | 'audio' | 'file';
|
|
title?: string;
|
|
buttonText?: string;
|
|
className?: string;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
export function MediaUploader({
|
|
onSelect,
|
|
type = 'image',
|
|
title = __('Select Image'),
|
|
buttonText = __('Use Image'),
|
|
className,
|
|
children
|
|
}: MediaUploaderProps) {
|
|
const frameRef = useRef<any>(null);
|
|
|
|
const openMediaModal = (e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
|
|
// Check if wp.media is available
|
|
const wp = (window as any).wp;
|
|
if (!wp || !wp.media) {
|
|
console.warn('WordPress media library not available');
|
|
return;
|
|
}
|
|
|
|
// Reuse existing frame
|
|
if (frameRef.current) {
|
|
frameRef.current.open();
|
|
return;
|
|
}
|
|
|
|
// Create new frame
|
|
frameRef.current = wp.media({
|
|
title,
|
|
button: {
|
|
text: buttonText,
|
|
},
|
|
library: {
|
|
type,
|
|
},
|
|
multiple: false,
|
|
});
|
|
|
|
// Handle selection
|
|
frameRef.current.on('select', () => {
|
|
const state = frameRef.current.state();
|
|
const selection = state.get('selection');
|
|
|
|
if (selection.length > 0) {
|
|
const attachment = selection.first().toJSON();
|
|
onSelect(attachment.url, attachment.id);
|
|
}
|
|
});
|
|
|
|
frameRef.current.open();
|
|
};
|
|
|
|
return (
|
|
<div onClick={openMediaModal} className={className}>
|
|
{children || (
|
|
<Button variant="outline" size="sm" type="button">
|
|
<Upload className="w-4 h-4 mr-2" />
|
|
{__('Select Image')}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|