Skip to content

Commit

Permalink
Remove double file browser (#2793)
Browse files Browse the repository at this point in the history 
Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
  • Loading branch information
@GermanBluefox @github-advanced-security
GermanBluefox and github-advanced-security[bot] authored Nov 5, 2024
1 parent 1d5a5e6 commit ec5b9fd
Show file tree
Hide file tree
Showing 17 changed files with 481 additions and 12,289 deletions.
123 changes: 109 additions & 14 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

16 changes: 9 additions & 7 deletions packages/adapter-react-v5/src/Components/FileBrowser.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ import { Icon } from './Icon';
import { withWidth } from './withWidth';
import type { ThemeName, ThemeType, Translate, IobTheme } from '../types';

import { FileViewer, EXTENSIONS } from './FileViewer';
import { FileViewer, EXTENSIONS, type FileViewerProps } from './FileViewer';

const ROW_HEIGHT = 32;
const BUTTON_WIDTH = 32;
Expand Down Expand Up @@ -455,7 +455,7 @@ export interface FileBrowserProps {
lang: ioBroker.Languages;
/** The socket connection. */
socket: Connection;
/** Is the component data ready. */
/** Shows if the component data ready. */
ready?: boolean;
/** Is expert mode enabled? (default: false) */
expertMode?: boolean;
Expand Down Expand Up @@ -506,6 +506,8 @@ export interface FileBrowserProps {
allowNonRestricted?: boolean;

showTypeSelector?: boolean;

FileViewer?: React.FC<FileViewerProps>;
}

export interface FolderOrFileItem {
Expand Down Expand Up @@ -856,7 +858,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta

this.browseList[0].processing = true;
this.props.socket
.readDir(this.browseList[0].adapter, this.browseList[0].relPath as string)
.readDir(this.browseList[0].adapter, this.browseList[0].relPath)
.then(files => {
if (this.browseList) {
// if component still mounted
Expand Down Expand Up @@ -2294,7 +2296,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
aria-labelledby="ar_dialog_file_delete_title"
>
<DialogTitle id="ar_dialog_file_delete_title">
{this.props.t('ra_Confirm deletion of %s', this.state.deleteItem.split('/').pop() as string)}
{this.props.t('ra_Confirm deletion of %s', this.state.deleteItem.split('/').pop())}
</DialogTitle>
<DialogContent>
<DialogContentText>{this.props.t('ra_Are you sure?')}</DialogContentText>
Expand Down Expand Up @@ -2333,8 +2335,10 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
}

renderViewDialog(): JSX.Element | null {
const FileViewerComponent = this.props.FileViewer || FileViewer;

return this.state.viewer ? (
<FileViewer
<FileViewerComponent
supportSubscribes={this.supportSubscribes}
key={this.state.viewer}
href={this.state.viewer}
Expand All @@ -2344,8 +2348,6 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
getStyleBackgroundImage={this.getStyleBackgroundImage}
t={this.props.t}
socket={this.props.socket}
lang={this.props.lang}
expertMode={this.state.expertMode}
onClose={() => this.setState({ viewer: '', formatEditFile: '' })}
/>
) : null;
Expand Down
86 changes: 28 additions & 58 deletions packages/adapter-react-v5/src/Components/FileViewer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,8 @@ import type { Connection } from '@iobroker/socket-client';
import { IconNoIcon } from '../icons/IconNoIcon';
import { withWidth } from './withWidth';
import { Utils } from './Utils';
import type { Translate } from '../types';
import type { ThemeType, Translate } from '../types';
import { Icon } from './Icon';
// File viewer in adapter-react does not use ace editor
// import * as ace from 'ace-builds';
// import 'ace-builds/src-noconflict/ext-modelist';
// import Editor from './Editor';

// const modelist = ace.require('ace/ext/modelist');

const styles: Record<string, React.CSSProperties> = {
dialog: {
Expand Down Expand Up @@ -69,23 +63,23 @@ function bufferToBase64(buffer: Buffer, isFull?: boolean): string {
return window.btoa(binary);
}

interface FileViewerProps {
export interface FileViewerProps {
/** Translation function */
t: Translate;
/** Callback when the viewer is closed. */
onClose: () => void;
/** The URL (file path) to the file to be displayed. */
href: string;
// formatEditFile?: string;
formatEditFile?: string;
socket: Connection;
setStateBackgroundImage: () => void;
// themeType: ThemeType;
themeType: ThemeType;
getStyleBackgroundImage: () => React.CSSProperties | null;
/** Flag is the js-controller support subscribe on file */
supportSubscribes?: boolean;
}

interface FileViewerState {
export interface FileViewerState {
text: string | null;
code: string | null;
ext: string | null;
Expand Down Expand Up @@ -224,37 +218,21 @@ export class FileViewerClass extends Component<FileViewerProps, FileViewerState>
}
};

// eslint-disable-next-line class-methods-use-this
writeFile64 = (): void => {
/*
// File viewer in adapter-react does not support write
const parts = this.props.href.split('/');
const data = this.state.editingValue;
parts.splice(0, 2);
const adapter = parts[0];
const name = parts.splice(1).join('/');
this.props.socket.writeFile64(adapter, name, Buffer.from(data).toString('base64'))
.then(() => this.props.onClose())
.catch(e => window.alert(`Cannot write file: ${e}`));
*/
};

static getEditFile(ext: string | null): 'json' | 'json5' | 'javascript' | 'html' | 'text' {
switch (ext) {
case 'json':
return 'json';
case 'json5':
return 'json5';
case 'js':
return 'javascript';
case 'html':
return 'html';
case 'txt':
return 'html';
default:
// e.g. ace/mode/text
return 'text';
}
getEditorOrViewer(): JSX.Element {
return (
<TextField
variant="standard"
style={styles.textarea}
multiline
value={this.state.editingValue || this.state.code || this.state.text}
// onChange={newValue => this.setState({ editingValue: newValue, changed: true })}
slotProps={{
htmlInput: {
readOnly: !this.state.editing,
},
}}
/>
);
}

getContent(): React.JSX.Element | null {
Expand Down Expand Up @@ -319,29 +297,21 @@ export class FileViewerClass extends Component<FileViewerProps, FileViewerState>
if (this.state.code !== null || this.state.text !== null || this.state.editing) {
// File viewer in adapter-react does not support write
// return <Editor
// mode={FileViewerClass.getEditFile(this.props.formatEditFile)}
// mode={this.getEditFile(this.props.formatEditFile)}
// themeType={this.props.themeType}
// value={this.state.editingValue || this.state.code || this.state.text}
// onChange={this.state.editing ? newValue => this.setState({ editingValue: newValue, changed: true }) : undefined}
// />;
return (
<TextField
variant="standard"
style={styles.textarea}
multiline
value={this.state.editingValue || this.state.code || this.state.text}
// onChange={newValue => this.setState({ editingValue: newValue, changed: true })}
slotProps={{
htmlInput: {
readOnly: !this.state.editing,
},
}}
/>
);
return this.getEditorOrViewer();
}
return null;
}

// eslint-disable-next-line class-methods-use-this
onSave(): void {
// Do nothing as the file viewer in adapter-react does not support writing
}

render(): JSX.Element {
return (
<Dialog
Expand Down Expand Up @@ -393,7 +363,7 @@ export class FileViewerClass extends Component<FileViewerProps, FileViewerState>
this.state.editingValue === this.state.text
}
variant="contained"
onClick={this.writeFile64}
onClick={() => this.onSave()}
startIcon={<SaveIcon />}
>
{this.props.t('Save')}
Expand Down
Loading

0 comments on commit ec5b9fd

Please sign in to comment.