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 = ({ setValue, setActive, active, field, value, type }) => { if (active === field) { return setValue(field, type === 'number' ? parseInt(value):value)} onClick={event => event.stopPropagation()} initialValue={value} type={type} /> } function onClick(ev) { ev.stopPropagation(); setActive(field); } return {value}; } const RoomRow: React.FC = (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('bigbluebutton', 'Are you sure you want to delete "{name}"? This operation can not be undone', { name: room.name }), t('bigbluebutton', 'Delete "{name}"?', { name: room.name }), confirmed => { if (confirmed) { props.deleteRoom(room.id); } }, true ); } function edit(field: string, type: 'text' | 'number' = 'text'){ return } return ( {edit('name')} {edit('welcome')} {edit('maxParticipants', 'number')} updateRoom('record', event.target.checked)} /> ) } export default RoomRow;