From f544187d8c4cfd9eac2da9488cb2026adaeab4f1 Mon Sep 17 00:00:00 2001 From: bunsenstraat Date: Wed, 25 Oct 2023 11:24:47 +0200 Subject: [PATCH] fix lint --- .../home-tab/src/lib/remix-ui-home-tab.tsx | 4 +- .../workspace/src/lib/actions/events.ts | 16 +- .../workspace/src/lib/contexts/index.ts | 2 +- .../src/lib/components/remix-ui-xterm.tsx | 32 +- .../lib/components/remix-ui-xterminals.tsx | 376 +++++++++--------- .../xterm/src/lib/components/xterm-wrap.tsx | 252 ++++++------ 6 files changed, 341 insertions(+), 341 deletions(-) diff --git a/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx b/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx index 0637ddfafb..a6f3257675 100644 --- a/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx +++ b/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx @@ -59,8 +59,8 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
{!isElectron()? - : - } + : + }
diff --git a/libs/remix-ui/workspace/src/lib/actions/events.ts b/libs/remix-ui/workspace/src/lib/actions/events.ts index ba93240c1b..2d1a800cc3 100644 --- a/libs/remix-ui/workspace/src/lib/actions/events.ts +++ b/libs/remix-ui/workspace/src/lib/actions/events.ts @@ -123,14 +123,14 @@ export const listenOnProviderEvents = (provider) => (reducerDispatch: React.Disp if (config.get('currentFile') === path) { // if it's the current file and the content is different: if(showAlert){ - dispatch(displayNotification( - path + ' changed', - 'This file has been changed outside of Remix IDE.', - 'Replace by the new content', 'Keep the content displayed in Remix', - () => { - editor.setText(path, content) - } - ))}else{ + dispatch(displayNotification( + path + ' changed', + 'This file has been changed outside of Remix IDE.', + 'Replace by the new content', 'Keep the content displayed in Remix', + () => { + editor.setText(path, content) + } + ))}else{ editor.setText(path, content) } } else { diff --git a/libs/remix-ui/workspace/src/lib/contexts/index.ts b/libs/remix-ui/workspace/src/lib/contexts/index.ts index a01c06383e..9410e6ada9 100644 --- a/libs/remix-ui/workspace/src/lib/contexts/index.ts +++ b/libs/remix-ui/workspace/src/lib/contexts/index.ts @@ -49,6 +49,6 @@ export const FileSystemContext = createContext<{ dispatchOpenElectronFolder: (path: string) => Promise dispatchGetElectronRecentFolders: () => Promise dispatchRemoveRecentFolder: (path: string) => Promise -}>(null) + }>(null) \ No newline at end of file diff --git a/libs/remix-ui/xterm/src/lib/components/remix-ui-xterm.tsx b/libs/remix-ui/xterm/src/lib/components/remix-ui-xterm.tsx index f93263808a..5d2727b5b7 100644 --- a/libs/remix-ui/xterm/src/lib/components/remix-ui-xterm.tsx +++ b/libs/remix-ui/xterm/src/lib/components/remix-ui-xterm.tsx @@ -19,29 +19,29 @@ export interface RemixUiXtermProps { } const RemixUiXterm = (props: RemixUiXtermProps) => { - const { plugin, pid, send, timeStamp } = props - const xtermRef = React.useRef(null) + const { plugin, pid, send, timeStamp } = props + const xtermRef = React.useRef(null) - useEffect(() => { - props.setTerminalRef(pid, xtermRef.current) - }, [xtermRef.current]) + useEffect(() => { + props.setTerminalRef(pid, xtermRef.current) + }, [xtermRef.current]) - const onKey = (event: { key: string; domEvent: KeyboardEvent }) => { - send(event.key, pid) - } + const onKey = (event: { key: string; domEvent: KeyboardEvent }) => { + send(event.key, pid) + } - return ( + return ( - fitAddon.fit()} - ref={xtermRef} - onKey={onKey}> + fitAddon.fit()} + ref={xtermRef} + onKey={onKey}> - ) + ) } diff --git a/libs/remix-ui/xterm/src/lib/components/remix-ui-xterminals.tsx b/libs/remix-ui/xterm/src/lib/components/remix-ui-xterminals.tsx index 0a3a4c9a5e..c0f1f22213 100644 --- a/libs/remix-ui/xterm/src/lib/components/remix-ui-xterminals.tsx +++ b/libs/remix-ui/xterm/src/lib/components/remix-ui-xterminals.tsx @@ -19,216 +19,216 @@ export interface xtermState { } export const RemixUiXterminals = (props: RemixUiXterminalsProps) => { - const [terminals, setTerminals] = useState([]) - const [workingDir, setWorkingDir] = useState('') - const [showOutput, setShowOutput] = useState(true) - const [theme, setTheme] = useState(themeCollection[0]) - const [terminalsEnabled, setTerminalsEnabled] = useState(false) - const [shells, setShells] = useState([]) - const { plugin } = props - - useEffect(() => { - setTimeout(async () => { - plugin.on('xterm', 'loaded', async () => { - console.log('xterm loaded') - }) - - plugin.on('xterm', 'data', async (data: string, pid: number) => { - writeToTerminal(data, pid) - }) - - plugin.on('xterm', 'close', async (pid: number) => { - setTerminals(prevState => { - const removed = prevState.filter(xtermState => xtermState.pid !== pid) - if (removed.length > 0) - removed[removed.length - 1].hidden = false - if(removed.length === 0) - setShowOutput(true) - return [...removed] - }) - }) - - plugin.on('fs', 'workingDirChanged', (path: string) => { - setWorkingDir(path) - setTerminalsEnabled(true) - }) - - plugin.on('theme', 'themeChanged', async (theme) => { - handleThemeChange(theme) - }) - - const theme = await plugin.call('theme', 'currentTheme') - handleThemeChange(theme) - - - const shells = await plugin.call('xterm', 'getShells') - setShells(shells) - }, 2000) - }, []) - - - const handleThemeChange = (theme: any) => { - themeCollection.forEach((themeItem) => { - if (themeItem.themeName === theme.name) { - setTheme(themeItem) - } - }) - } - - - const writeToTerminal = (data: string, pid: number) => { - setTerminals(prevState => { - const terminal = prevState.find(xtermState => xtermState.pid === pid) - if (terminal.ref && terminal.ref.terminal) { - terminal.ref.terminal.write(data) - } else { - terminal.queue += data - } - return [...prevState] - }) - } - - const send = (data: string, pid: number) => { - plugin.call('xterm', 'keystroke', data, pid) - } - - const createTerminal = async (shell?: string) => { - const pid = await plugin.call('xterm', 'createTerminal', workingDir, shell) - setShowOutput(false) - setTerminals(prevState => { - // set all to hidden - prevState.forEach(xtermState => { - xtermState.hidden = true - }) - return [...prevState, { - pid: pid, - queue: '', - timeStamp: Date.now(), - ref: null, - hidden: false - }] - }) - } - - const setTerminalRef = (pid: number, ref: any) => { - setTerminals(prevState => { - const terminal = prevState.find(xtermState => xtermState.pid === pid) - terminal.ref = ref - if (terminal.queue) { - ref.terminal.write(terminal.queue) - terminal.queue = '' - } - return [...prevState] - }) - } - - const selectTerminal = (state: xtermState) => { + const [terminals, setTerminals] = useState([]) + const [workingDir, setWorkingDir] = useState('') + const [showOutput, setShowOutput] = useState(true) + const [theme, setTheme] = useState(themeCollection[0]) + const [terminalsEnabled, setTerminalsEnabled] = useState(false) + const [shells, setShells] = useState([]) + const { plugin } = props + + useEffect(() => { + setTimeout(async () => { + plugin.on('xterm', 'loaded', async () => { + console.log('xterm loaded') + }) + + plugin.on('xterm', 'data', async (data: string, pid: number) => { + writeToTerminal(data, pid) + }) + + plugin.on('xterm', 'close', async (pid: number) => { setTerminals(prevState => { - // set all to hidden - prevState.forEach(xtermState => { - xtermState.hidden = true - }) - const terminal = prevState.find(xtermState => xtermState.pid === state.pid) - terminal.hidden = false - return [...prevState] + const removed = prevState.filter(xtermState => xtermState.pid !== pid) + if (removed.length > 0) + removed[removed.length - 1].hidden = false + if(removed.length === 0) + setShowOutput(true) + return [...removed] }) - } - - const closeTerminal = () => { - const pid = terminals.find(xtermState => xtermState.hidden === false).pid - if (pid) - plugin.call('xterm', 'close', pid) - } - - const selectOutput = () => { - setShowOutput(true) - } - - const showTerminal = () => { - setShowOutput(false) - if (terminals.length === 0) createTerminal() - } - - - return (<> - -
-
-
- - -
-
+ }) + + plugin.on('fs', 'workingDirChanged', (path: string) => { + setWorkingDir(path) + setTerminalsEnabled(true) + }) + + plugin.on('theme', 'themeChanged', async (theme) => { + handleThemeChange(theme) + }) + + const theme = await plugin.call('theme', 'currentTheme') + handleThemeChange(theme) + + + const shells = await plugin.call('xterm', 'getShells') + setShells(shells) + }, 2000) + }, []) + + + const handleThemeChange = (theme: any) => { + themeCollection.forEach((themeItem) => { + if (themeItem.themeName === theme.name) { + setTheme(themeItem) + } + }) + } + + + const writeToTerminal = (data: string, pid: number) => { + setTerminals(prevState => { + const terminal = prevState.find(xtermState => xtermState.pid === pid) + if (terminal.ref && terminal.ref.terminal) { + terminal.ref.terminal.write(data) + } else { + terminal.queue += data + } + return [...prevState] + }) + } + + const send = (data: string, pid: number) => { + plugin.call('xterm', 'keystroke', data, pid) + } + + const createTerminal = async (shell?: string) => { + const pid = await plugin.call('xterm', 'createTerminal', workingDir, shell) + setShowOutput(false) + setTerminals(prevState => { + // set all to hidden + prevState.forEach(xtermState => { + xtermState.hidden = true + }) + return [...prevState, { + pid: pid, + queue: '', + timeStamp: Date.now(), + ref: null, + hidden: false + }] + }) + } + + const setTerminalRef = (pid: number, ref: any) => { + setTerminals(prevState => { + const terminal = prevState.find(xtermState => xtermState.pid === pid) + terminal.ref = ref + if (terminal.queue) { + ref.terminal.write(terminal.queue) + terminal.queue = '' + } + return [...prevState] + }) + } + + const selectTerminal = (state: xtermState) => { + setTerminals(prevState => { + // set all to hidden + prevState.forEach(xtermState => { + xtermState.hidden = true + }) + const terminal = prevState.find(xtermState => xtermState.pid === state.pid) + terminal.hidden = false + return [...prevState] + }) + } + + const closeTerminal = () => { + const pid = terminals.find(xtermState => xtermState.hidden === false).pid + if (pid) + plugin.call('xterm', 'close', pid) + } + + const selectOutput = () => { + setShowOutput(true) + } + + const showTerminal = () => { + setShowOutput(false) + if (terminals.length === 0) createTerminal() + } + + + return (<> + +
+
+
+ + +
+
- - + + - + - - {shells.map((shell, index) => { - return ( await createTerminal(shell)}>{shell}) - })} - - - + + {shells.map((shell, index) => { + return ( await createTerminal(shell)}>{shell}) + })} + + + +
+
+ + +
+ <> +
+ +
+
+ {terminals.map((xtermState) => { + return ( +
+
+ ) + })} +
+ {terminals.map((xtermState, index) => { + return () + })}
+
+ +
+
-
- <> -
- -
-
- {terminals.map((xtermState) => { - return ( -
- -
- ) - })} -
- {terminals.map((xtermState, index) => { - return () - })} -
-
- -
-
- - - ) + ) } const themeCollection = [ - { themeName: 'HackerOwl', backgroundColor: '#011628', textColor: '#babbcc', + { themeName: 'HackerOwl', backgroundColor: '#011628', textColor: '#babbcc', shapeColor: '#8694a1',fillColor: '#011C32'}, - { themeName: 'Cerulean', backgroundColor: '#ffffff', textColor: '#343a40', + { themeName: 'Cerulean', backgroundColor: '#ffffff', textColor: '#343a40', shapeColor: '#343a40',fillColor: '#f8f9fa'}, - { themeName: 'Cyborg', backgroundColor: '#060606', textColor: '#adafae', + { themeName: 'Cyborg', backgroundColor: '#060606', textColor: '#adafae', shapeColor: '#adafae', fillColor: '#222222'}, - { themeName: 'Dark', backgroundColor: '#222336', textColor: '#babbcc', + { themeName: 'Dark', backgroundColor: '#222336', textColor: '#babbcc', shapeColor: '#babbcc',fillColor: '#2a2c3f'}, - { themeName: 'Flatly', backgroundColor: '#ffffff', textColor: '#343a40', + { themeName: 'Flatly', backgroundColor: '#ffffff', textColor: '#343a40', shapeColor: '#7b8a8b',fillColor: '#ffffff'}, - { themeName: 'Black', backgroundColor: '#1a1a1a', textColor: '#babbcc', + { themeName: 'Black', backgroundColor: '#1a1a1a', textColor: '#babbcc', shapeColor: '#b5b4bc',fillColor: '#1f2020'}, - { themeName: 'Light', backgroundColor: '#eef1f6', textColor: '#3b445e', + { themeName: 'Light', backgroundColor: '#eef1f6', textColor: '#3b445e', shapeColor: '#343a40',fillColor: '#ffffff'}, - { themeName: 'Midcentury', backgroundColor: '#DBE2E0', textColor: '#11556c', + { themeName: 'Midcentury', backgroundColor: '#DBE2E0', textColor: '#11556c', shapeColor: '#343a40',fillColor: '#eeede9'}, - { themeName: 'Spacelab', backgroundColor: '#ffffff', textColor: '#343a40', + { themeName: 'Spacelab', backgroundColor: '#ffffff', textColor: '#343a40', shapeColor: '#333333', fillColor: '#eeeeee'}, - { themeName: 'Candy', backgroundColor: '#d5efff', textColor: '#11556c', + { themeName: 'Candy', backgroundColor: '#d5efff', textColor: '#11556c', shapeColor: '#343a40',fillColor: '#fbe7f8' }, - { themeName: 'Violet', backgroundColor: '#f1eef6', textColor: '#3b445e', + { themeName: 'Violet', backgroundColor: '#f1eef6', textColor: '#3b445e', shapeColor: '#343a40',fillColor: '#f8fafe' }, - { themeName: 'Pride', backgroundColor: '#f1eef6', textColor: '#343a40', + { themeName: 'Pride', backgroundColor: '#f1eef6', textColor: '#343a40', shapeColor: '#343a40',fillColor: '#f8fafe' }, - ] \ No newline at end of file +] \ No newline at end of file diff --git a/libs/remix-ui/xterm/src/lib/components/xterm-wrap.tsx b/libs/remix-ui/xterm/src/lib/components/xterm-wrap.tsx index dd889277a3..03b54ccf6f 100644 --- a/libs/remix-ui/xterm/src/lib/components/xterm-wrap.tsx +++ b/libs/remix-ui/xterm/src/lib/components/xterm-wrap.tsx @@ -103,135 +103,135 @@ interface IProps { } export class Xterm extends React.Component { - /** + /** * The ref for the containing element. */ - terminalRef: React.RefObject + terminalRef: React.RefObject - /** + /** * XTerm.js Terminal object. */ - terminal!: Terminal // This is assigned in the setupTerminal() which is called from the constructor - - static propTypes = { - className: PropTypes.string, - options: PropTypes.object, - addons: PropTypes.array, - onBinary: PropTypes.func, - onCursorMove: PropTypes.func, - onData: PropTypes.func, - onKey: PropTypes.func, - onLineFeed: PropTypes.func, - onScroll: PropTypes.func, - onSelectionChange: PropTypes.func, - onRender: PropTypes.func, - onResize: PropTypes.func, - onTitleChange: PropTypes.func, - customKeyEventHandler: PropTypes.func, - } - - constructor(props: IProps) { - super(props) - - this.terminalRef = React.createRef() - - // Bind Methods - this.onData = this.onData.bind(this) - this.onCursorMove = this.onCursorMove.bind(this) - this.onKey = this.onKey.bind(this) - this.onBinary = this.onBinary.bind(this) - this.onLineFeed = this.onLineFeed.bind(this) - this.onScroll = this.onScroll.bind(this) - this.onSelectionChange = this.onSelectionChange.bind(this) - this.onRender = this.onRender.bind(this) - this.onResize = this.onResize.bind(this) - this.onTitleChange = this.onTitleChange.bind(this) - - this.setupTerminal() - } - - setupTerminal() { - // Setup the XTerm terminal. - this.terminal = new Terminal(this.props.options) - - // Load addons if the prop exists. - if (this.props.addons) { - this.props.addons.forEach((addon) => { - this.terminal.loadAddon(addon) - }) - } - - // Create Listeners - this.terminal.onBinary(this.onBinary) - this.terminal.onCursorMove(this.onCursorMove) - this.terminal.onData(this.onData) - this.terminal.onKey(this.onKey) - this.terminal.onLineFeed(this.onLineFeed) - this.terminal.onScroll(this.onScroll) - this.terminal.onSelectionChange(this.onSelectionChange) - this.terminal.onRender(this.onRender) - this.terminal.onResize(this.onResize) - this.terminal.onTitleChange(this.onTitleChange) - - // Add Custom Key Event Handler - if (this.props.customKeyEventHandler) { - this.terminal.attachCustomKeyEventHandler(this.props.customKeyEventHandler) - } - } - - componentDidMount() { - if (this.terminalRef.current) { - // Creates the terminal within the container element. - this.terminal.open(this.terminalRef.current) - } - } - - componentWillUnmount() { - // When the component unmounts dispose of the terminal and all of its listeners. - this.terminal.dispose() - } - - private onBinary(data: string) { - if (this.props.onBinary) this.props.onBinary(data) - } - - private onCursorMove() { - if (this.props.onCursorMove) this.props.onCursorMove() - } - - private onData(data: string) { - if (this.props.onData) this.props.onData(data) - } - - private onKey(event: { key: string; domEvent: KeyboardEvent }) { - if (this.props.onKey) this.props.onKey(event) - } - - private onLineFeed() { - if (this.props.onLineFeed) this.props.onLineFeed() - } - - private onScroll(newPosition: number) { - if (this.props.onScroll) this.props.onScroll(newPosition) - } - - private onSelectionChange() { - if (this.props.onSelectionChange) this.props.onSelectionChange() - } - - private onRender(event: { start: number; end: number }) { - if (this.props.onRender) this.props.onRender(event) - } - - private onResize(event: { cols: number; rows: number }) { - if (this.props.onResize) this.props.onResize(event) - } - - private onTitleChange(newTitle: string) { - if (this.props.onTitleChange) this.props.onTitleChange(newTitle) - } - - render() { - return
- } + terminal!: Terminal // This is assigned in the setupTerminal() which is called from the constructor + + static propTypes = { + className: PropTypes.string, + options: PropTypes.object, + addons: PropTypes.array, + onBinary: PropTypes.func, + onCursorMove: PropTypes.func, + onData: PropTypes.func, + onKey: PropTypes.func, + onLineFeed: PropTypes.func, + onScroll: PropTypes.func, + onSelectionChange: PropTypes.func, + onRender: PropTypes.func, + onResize: PropTypes.func, + onTitleChange: PropTypes.func, + customKeyEventHandler: PropTypes.func, + } + + constructor(props: IProps) { + super(props) + + this.terminalRef = React.createRef() + + // Bind Methods + this.onData = this.onData.bind(this) + this.onCursorMove = this.onCursorMove.bind(this) + this.onKey = this.onKey.bind(this) + this.onBinary = this.onBinary.bind(this) + this.onLineFeed = this.onLineFeed.bind(this) + this.onScroll = this.onScroll.bind(this) + this.onSelectionChange = this.onSelectionChange.bind(this) + this.onRender = this.onRender.bind(this) + this.onResize = this.onResize.bind(this) + this.onTitleChange = this.onTitleChange.bind(this) + + this.setupTerminal() + } + + setupTerminal() { + // Setup the XTerm terminal. + this.terminal = new Terminal(this.props.options) + + // Load addons if the prop exists. + if (this.props.addons) { + this.props.addons.forEach((addon) => { + this.terminal.loadAddon(addon) + }) + } + + // Create Listeners + this.terminal.onBinary(this.onBinary) + this.terminal.onCursorMove(this.onCursorMove) + this.terminal.onData(this.onData) + this.terminal.onKey(this.onKey) + this.terminal.onLineFeed(this.onLineFeed) + this.terminal.onScroll(this.onScroll) + this.terminal.onSelectionChange(this.onSelectionChange) + this.terminal.onRender(this.onRender) + this.terminal.onResize(this.onResize) + this.terminal.onTitleChange(this.onTitleChange) + + // Add Custom Key Event Handler + if (this.props.customKeyEventHandler) { + this.terminal.attachCustomKeyEventHandler(this.props.customKeyEventHandler) + } + } + + componentDidMount() { + if (this.terminalRef.current) { + // Creates the terminal within the container element. + this.terminal.open(this.terminalRef.current) + } + } + + componentWillUnmount() { + // When the component unmounts dispose of the terminal and all of its listeners. + this.terminal.dispose() + } + + private onBinary(data: string) { + if (this.props.onBinary) this.props.onBinary(data) + } + + private onCursorMove() { + if (this.props.onCursorMove) this.props.onCursorMove() + } + + private onData(data: string) { + if (this.props.onData) this.props.onData(data) + } + + private onKey(event: { key: string; domEvent: KeyboardEvent }) { + if (this.props.onKey) this.props.onKey(event) + } + + private onLineFeed() { + if (this.props.onLineFeed) this.props.onLineFeed() + } + + private onScroll(newPosition: number) { + if (this.props.onScroll) this.props.onScroll(newPosition) + } + + private onSelectionChange() { + if (this.props.onSelectionChange) this.props.onSelectionChange() + } + + private onRender(event: { start: number; end: number }) { + if (this.props.onRender) this.props.onRender(event) + } + + private onResize(event: { cols: number; rows: number }) { + if (this.props.onResize) this.props.onResize(event) + } + + private onTitleChange(newTitle: string) { + if (this.props.onTitleChange) this.props.onTitleChange(newTitle) + } + + render() { + return
+ } } \ No newline at end of file