cloud_bbb/ts/Manager/RoomRow.tsx

105 lines
3.4 KiB
TypeScript

import React, { useState } from 'react';
import {CopyToClipboard} from 'react-copy-to-clipboard';
import { SubmitInput } from './SubmitInput';
import { Room, api } from './Api';
type Props = {
room: Room;
updateRoom: (room: Room) => void;
deleteRoom: (id: number) => void;
}
type EditableValueProps = {
setValue: (key: string, value: string|number) => void;
setActive: (key: string) => void;
active: string;
field: string;
value: string;
type: 'text' | 'number';
}
const EditableValue: React.FC<EditableValueProps> = ({ setValue, setActive, active, field, value, type }) => {
if (active === field) {
return <SubmitInput
autoFocus={true}
onSubmitValue={(value) => setValue(field, type === 'number' ? parseInt(value):value)}
onClick={event => event.stopPropagation()}
initialValue={value}
type={type}
/>
}
function onClick(ev) {
ev.stopPropagation();
setActive(field);
}
return <a className="action-rename" onClick={onClick}>{value}</a>;
}
const RoomRow: React.FC<Props> = (props) => {
const [activeEdit, setActiveEdit] = useState('');
const room = props.room;
function updateRoom(key: string, value: string|boolean|number) {
props.updateRoom({
...props.room,
[key]: value,
});
setActiveEdit('');
}
function deleteRow(ev: MouseEvent) {
ev.preventDefault();
OC.dialogs.confirm(
t('bbb', 'Are you sure you want to delete "{name}"? This operation can not be undone', { name: room.name }),
t('bbb', 'Delete "{name}"?', { name: room.name }),
confirmed => {
if (confirmed) {
props.deleteRoom(room.id);
}
},
true
);
}
function edit(field: string, type: 'text' | 'number' = 'text'){
return <EditableValue field={field} value={room[field]} active={activeEdit} setActive={setActiveEdit} setValue={updateRoom} type={type} />
}
return (
<tr key={room.id}>
<td className="share icon-col">
<CopyToClipboard text={window.location.origin + api.getUrl(`b/${room.uid}`)}>
<span className="icon icon-clippy icon-visible copy-to-clipboard" ></span>
</CopyToClipboard>
</td>
<td className="start icon-col">
<a href={api.getUrl(`b/${room.uid}`)} className="icon icon-play icon-visible" target="_blank" rel="noopener noreferrer"></a>
</td>
<td className="name">
{edit('name')}
</td>
<td className="welcome">
{edit('welcome')}
</td>
<td className="max-participants">
{edit('maxParticipants', 'number')}
</td>
<td className="record">
<input id={`bbb-record-${room.id}`} type="checkbox" className="checkbox" checked={room.record} onChange={(event) => updateRoom('record', event.target.checked)} />
<label htmlFor={`bbb-record-${room.id}`}></label>
</td>
<td className="remove icon-col">
<a className="icon icon-delete icon-visible"
onClick={deleteRow as any}
title="Delete" />
</td>
</tr>
)
}
export default RoomRow;