react-dropzone#DropzoneRootProps TypeScript Examples

W95ConvertDialog = (props: {
    visible: boolean;
    format: UploadFormat;
    titleFormat: TitleFormatType;
    files: File[];
    setFiles: React.Dispatch<React.SetStateAction<File[]>>;
    selectedTrackIndex: number;
    setSelectedTrack: React.Dispatch<React.SetStateAction<number>>;
    moveFileUp: () => void;
    moveFileDown: () => void;
    handleClose: () => void;
    handleChangeFormat: (ev: any, newFormat: any) => void;
    handleChangeTitleFormat: (
        event: React.ChangeEvent<{
            value: any;
        }>
    ) => void;
    handleConvert: () => void;
    tracksOrderVisible: boolean;
    setTracksOrderVisible: React.Dispatch<React.SetStateAction<boolean>>;
    handleToggleTracksOrder: () => void;
    selectedTrackRef: React.MutableRefObject<HTMLDivElement | null>;
    getRootProps: (props?: DropzoneRootProps | undefined) => DropzoneRootProps;
    getInputProps: (props?: DropzoneInputProps | undefined) => DropzoneInputProps;
    isDragActive: boolean;
    open: () => void;
    disableRemove: boolean;
    handleRemoveSelectedTrack: () => void;
    dialogVisible: boolean;
}) => {
    const themeContext = useContext(ThemeContext);

    const renderTracks = useCallback(() => {
        return props.files.map((file, i) => {
            const isSelected = props.selectedTrackIndex === i;
            const ref = isSelected ? props.selectedTrackRef : null;
            return (
                <CustomTableRow
                    key={`${i}`}
                    onClick={() => props.setSelectedTrack(i)}
                    ref={ref}
                    style={isSelected ? themeContext.selectedTableRow : {}}
                >
                    <TableDataCell>{file.name}</TableDataCell>
                </CustomTableRow>
            );
        });
    }, [props, themeContext]);

    if (!props.dialogVisible) {
        return null;
    }

    return (
        <DialogOverlay>
            <DialogWindow>
                <WindowHeader style={{ display: 'flex', alignItems: 'center' }}>
                    <span style={{ flex: '1 1 auto' }}>Upload Settings</span>
                    <Button onClick={props.handleClose}>
                        <WindowCloseIcon />
                    </Button>
                </WindowHeader>
                <DialogWindowContent>
                    <div style={{ display: 'flex', width: '100%' }}>
                        <Fieldset label="Recording Mode" style={{ display: 'flex', flex: '1 1 auto' }}>
                            <Select
                                defaultValue={props.format}
                                options={recordModeOptions}
                                width={90}
                                onChange={(ev: any, format: any) => props.handleChangeFormat(ev, format.value)}
                            />
                        </Fieldset>
                        <Fieldset label="Track title" style={{ flex: '1 1 auto', marginLeft: 16 }}>
                            <Select
                                defaultValue={props.titleFormat}
                                options={trackTitleOptions}
                                width={180}
                                onChange={props.handleChangeTitleFormat}
                            />
                        </Fieldset>
                    </div>
                    {props.tracksOrderVisible ? (
                        <div {...props.getRootProps()} style={{ width: '100%', marginTop: 16 }}>
                            <Divider style={{ marginTop: 16 }} />
                            <Toolbar style={{ display: 'flex' }}>
                                <Button variant="menu" onClick={props.open}>
                                    Add...
                                </Button>
                                <Button variant="menu" disabled={props.disableRemove} onClick={props.handleRemoveSelectedTrack}>
                                    <img alt="delete" src={DeleteIconUrl} style={{ marginRight: 4 }} />
                                    Remove
                                </Button>
                                <div style={{ flex: '1 1 auto' }}></div>
                                <Button variant="menu" disabled={props.disableRemove} onClick={props.moveFileDown}>
                                    <img alt="Move Down" src={ArrowDownIconUrl} />
                                </Button>
                                <Button variant="menu" disabled={props.disableRemove} onClick={props.moveFileUp}>
                                    <img alt="Move Up" src={ArrowUpIconUrl} />
                                </Button>
                            </Toolbar>
                            <div style={{ maxHeight: '30vh', overflow: 'scroll' }}>
                                <Table>
                                    <TableBody>{renderTracks()}</TableBody>
                                </Table>
                            </div>
                            <input {...props.getInputProps()} />
                        </div>
                    ) : null}

                    <DialogFooter>
                        <Button onClick={props.handleToggleTracksOrder}>{`${props.tracksOrderVisible ? 'Hide' : 'Edit'} Tracks`}</Button>
                        <div style={{ flex: '1 1 auto' }}></div>
                        <FooterButton onClick={props.handleConvert}>OK</FooterButton>
                        <FooterButton onClick={props.handleClose}>Cancel</FooterButton>
                    </DialogFooter>
                </DialogWindowContent>
            </DialogWindow>
        </DialogOverlay>
    );
}

W95Main = (props: {
    disc: Disc | null;
    deviceName: string;
    selected: number[];
    setSelected: React.Dispatch<React.SetStateAction<number[]>>;
    selectedCount: number;
    tracks: {
        index: number;
        title: string;
        fullWidthTitle: string;
        group: string | null;
        duration: string;
        encoding: string;
    }[];
    uploadedFiles: File[];
    setUploadedFiles: React.Dispatch<React.SetStateAction<File[]>>;
    onDrop: (acceptedFiles: File[], rejectedFiles: File[]) => void;
    getRootProps: (props?: DropzoneRootProps | undefined) => DropzoneRootProps;
    getInputProps: (props?: DropzoneInputProps | undefined) => DropzoneInputProps;
    isDragActive: boolean;
    open: () => void;
    moveMenuAnchorEl: HTMLElement | null;
    setMoveMenuAnchorEl: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
    handleShowMoveMenu: (event: React.MouseEvent<HTMLButtonElement>) => void;
    handleCloseMoveMenu: () => void;
    handleMoveSelectedTrack: (destIndex: number) => void;
    handleShowDumpDialog: () => void;
    handleDeleteSelected: (event: React.MouseEvent) => void;
    handleRenameActionClick: (event: React.MouseEvent) => void;
    handleRenameTrack: (event: React.MouseEvent, item: number) => void;
    handleSelectAllClick: (event: React.ChangeEvent<HTMLInputElement>) => void;
    handleSelectTrackClick: (event: React.MouseEvent, item: number) => void;
}) => {
    const classes = useStyles();
    const themeContext = useContext(ThemeContext);
    const { mainView } = useShallowEqualSelector(state => state.appState);

    return (
        <>
            <Divider />
            <Toolbar style={{ flexWrap: 'wrap', position: 'relative' }}>
                {props.selectedCount === 0 ? (
                    <>
                        <img alt="device" src={DeviceIconUrl} style={{ marginTop: -10, marginLeft: 10 }} />
                        <div className={classes.toolbarItem}>
                            {`${props.deviceName}: (` || `Loading...`}
                            {props.disc?.fullWidthTitle && `${props.disc?.fullWidthTitle} / `}
                            {props.disc?.title || `Untitled Disc`}
                            {`)`}
                        </div>
                        <Bar size={35} />
                        <img alt="minidisc" src={MDIconUrl} style={{ width: 32, marginLeft: 10 }} />
                        {props.disc !== null ? (
                            <Tooltip
                                text={`${formatTimeFromFrames(props.disc.left * 2, false)} in LP2 or ${formatTimeFromFrames(
                                    props.disc.left * 4,
                                    false
                                )} in LP4`}
                                enterDelay={100}
                                leaveDelay={500}
                            >
                                <div className={classes.toolbarItem}>{`${formatTimeFromFrames(
                                    props.disc.left,
                                    false
                                )} left of ${formatTimeFromFrames(props.disc.total, false)} `}</div>
                            </Tooltip>
                        ) : null}
                    </>
                ) : null}

                {props.selectedCount > 0 ? (
                    <>
                        <Button variant="menu" disabled={props.selectedCount !== 1} onClick={props.handleShowMoveMenu}>
                            <img alt="move" src={MoveIconUrl} className={classes.toolbarIcon} />
                            Move
                        </Button>
                        <Button variant="menu" onClick={props.handleShowDumpDialog}>
                            <img alt="record" src={MicIconUrl} className={classes.toolbarIcon} />
                            Record
                        </Button>
                        <Button variant="menu" onClick={props.handleDeleteSelected}>
                            <img alt="delete" src={DeleteIconUrl} className={classes.toolbarIcon} />
                            Delete
                        </Button>
                        <Button variant="menu" onClick={props.handleRenameActionClick} disabled={props.selectedCount > 1}>
                            <img alt="rename" src={RenameIconUrl} className={classes.toolbarIcon} />
                            Rename
                        </Button>
                        {!!props.moveMenuAnchorEl ? (
                            <List style={{ position: 'absolute', left: 16, top: 32, zIndex: 2 }}>
                                {Array(props.tracks.length)
                                    .fill(null)
                                    .map((_, i) => {
                                        return (
                                            <ListItem key={`pos-${i}`} onClick={() => props.handleMoveSelectedTrack(i)}>
                                                {i + 1}
                                            </ListItem>
                                        );
                                    })}
                            </List>
                        ) : null}
                    </>
                ) : null}
                <Bar size={35} />
            </Toolbar>
            <Divider />
            <WindowContent className={classes.windowContent}>
                <div className={classes.container} {...props.getRootProps()} style={{ outline: 'none' }}>
                    <input {...props.getInputProps()} />
                    <Table className={classes.table}>
                        <TableHead>
                            <TableRow head style={{ display: 'flex' }}>
                                <TableHeadCell style={{ width: '2ch' }}>#</TableHeadCell>
                                <TableHeadCell style={{ textAlign: 'left', flex: '1 1 auto' }}>Title</TableHeadCell>
                                <TableHeadCell style={{ textAlign: 'right', width: '20%' }}>Duration</TableHeadCell>
                            </TableRow>
                        </TableHead>
                        <TableBody>
                            {props.tracks.map(track => (
                                <CustomTableRow
                                    style={props.selected.includes(track.index) ? themeContext.selectedTableRow : {}}
                                    key={track.index}
                                    onDoubleClick={(event: React.MouseEvent) => props.handleRenameTrack(event, track.index)}
                                    onClick={(event: React.MouseEvent) => props.handleSelectTrackClick(event, track.index)}
                                >
                                    <TableDataCell style={{ textAlign: 'center', width: '2ch' }}>{track.index + 1}</TableDataCell>
                                    <TableDataCell style={{ width: '80%' }}>
                                        <div>
                                            {track.fullWidthTitle && `${track.fullWidthTitle} / `}
                                            {track.title || `No Title`}
                                        </div>
                                    </TableDataCell>
                                    <TableDataCell style={{ textAlign: 'right', width: '20%' }}>
                                        <span>{track.encoding}</span>
                                        &nbsp;
                                        <span>{track.duration}</span>
                                    </TableDataCell>
                                </CustomTableRow>
                            ))}
                        </TableBody>
                    </Table>
                </div>
                <div className={classes.controlsContainer}>{mainView === 'MAIN' ? <Controls /> : null}</div>
            </WindowContent>
            <FloatingButton onClick={props.open} />

            <UploadDialog />
            <RenameDialog />
            <ErrorDialog />
            <ConvertDialog files={props.uploadedFiles} />
            <RecordDialog />
            <DumpDialog trackIndexes={props.selected} />
            <AboutDialog />
            <PanicDialog />
        </>
    );
}