From a75247681c0d8bcb5d6e58d560bb296e4aaae927 Mon Sep 17 00:00:00 2001 From: filip mertens Date: Wed, 29 Jun 2022 09:26:26 +0200 Subject: [PATCH] add file decorators --- apps/remix-ide/src/app.js | 10 ++-- apps/remix-ide/src/app/panels/file-panel.js | 6 +-- apps/remix-ide/src/app/panels/tab-proxy.js | 4 +- .../src/app/plugins}/code-parser.tsx | 26 +++++----- .../src/app/plugins/file-decorator.ts | 23 +++++---- libs/remix-core-plugin/src/index.ts | 4 +- .../{file-states => file-decorators}/.babelrc | 0 .../.eslintrc | 0 libs/remix-ui/file-decorators/src/index.ts | 3 ++ .../lib/components/file-decoration-icon.tsx | 48 +++++++++++++++++++ .../file-decoration-custom-icon.tsx} | 8 ++-- .../file-decoration-error-icon.tsx | 11 +++++ .../file-decoration-warning-icon.tsx | 11 +++++ .../src/lib/types/index.ts | 17 +++---- .../tsconfig.json | 0 .../tsconfig.lib.json | 0 libs/remix-ui/file-states/src/index.ts | 3 -- .../src/lib/components/file-state-icon.tsx | 48 ------------------- .../filestates/file-state-error-icon.tsx | 11 ----- .../filestates/file-state-warning-icon.tsx | 11 ----- libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx | 37 +++++++++----- .../workspace/src/lib/actions/events.ts | 13 ++--- .../workspace/src/lib/actions/payload.ts | 7 +-- .../src/lib/components/file-explorer.tsx | 2 +- .../src/lib/components/file-label.tsx | 15 +++--- .../src/lib/components/file-render.tsx | 15 +++--- .../workspace/src/lib/reducers/workspace.ts | 7 +-- .../remix-ui/workspace/src/lib/types/index.ts | 4 +- nx.json | 2 +- package.json | 2 +- tsconfig.base.json | 2 +- workspace.json | 10 ++-- 32 files changed, 188 insertions(+), 172 deletions(-) rename {libs/remix-core-plugin/src/lib => apps/remix-ide/src/app/plugins}/code-parser.tsx (96%) rename libs/remix-core-plugin/src/lib/file-states.ts => apps/remix-ide/src/app/plugins/file-decorator.ts (71%) rename libs/remix-ui/{file-states => file-decorators}/.babelrc (100%) rename libs/remix-ui/{file-states => file-decorators}/.eslintrc (100%) create mode 100644 libs/remix-ui/file-decorators/src/index.ts create mode 100644 libs/remix-ui/file-decorators/src/lib/components/file-decoration-icon.tsx rename libs/remix-ui/{file-states/src/lib/components/filestates/file-state-custom-icon.tsx => file-decorators/src/lib/components/filedecorationicons/file-decoration-custom-icon.tsx} (58%) create mode 100644 libs/remix-ui/file-decorators/src/lib/components/filedecorationicons/file-decoration-error-icon.tsx create mode 100644 libs/remix-ui/file-decorators/src/lib/components/filedecorationicons/file-decoration-warning-icon.tsx rename libs/remix-ui/{file-states => file-decorators}/src/lib/types/index.ts (71%) rename libs/remix-ui/{file-states => file-decorators}/tsconfig.json (100%) rename libs/remix-ui/{file-states => file-decorators}/tsconfig.lib.json (100%) delete mode 100644 libs/remix-ui/file-states/src/index.ts delete mode 100644 libs/remix-ui/file-states/src/lib/components/file-state-icon.tsx delete mode 100644 libs/remix-ui/file-states/src/lib/components/filestates/file-state-error-icon.tsx delete mode 100644 libs/remix-ui/file-states/src/lib/components/filestates/file-state-warning-icon.tsx diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js index 616cba5724..f821712f57 100644 --- a/apps/remix-ide/src/app.js +++ b/apps/remix-ide/src/app.js @@ -13,7 +13,9 @@ import { LandingPage } from './app/ui/landing-page/landing-page' import { MainPanel } from './app/components/main-panel' import { PermissionHandlerPlugin } from './app/plugins/permission-handler-plugin' import { AstWalker } from '@remix-project/remix-astwalker' -import { LinkLibraries, DeployLibraries, OpenZeppelinProxy, CodeParser, FileStates } from '@remix-project/core-plugin' +import { LinkLibraries, DeployLibraries, OpenZeppelinProxy } from '@remix-project/core-plugin' +import { CodeParser } from './app/plugins/code-parser' +import { FileDecorator } from './app/plugins/file-decorator' import { WalkthroughService } from './walkthroughService' @@ -204,7 +206,7 @@ class AppComponent { ) const contextualListener = new EditorContextListener(new AstWalker()) const codeParser = new CodeParser(new AstWalker()) - const fileStates = new FileStates() + const fileDecorator = new FileDecorator() this.notification = new NotificationPlugin() @@ -230,7 +232,7 @@ class AppComponent { offsetToLineColumnConverter, contextualListener, codeParser, - fileStates, + fileDecorator, terminal, web3Provider, compileAndRun, @@ -357,7 +359,7 @@ class AppComponent { await this.appManager.activatePlugin(['sidePanel']) // activating host plugin separately await this.appManager.activatePlugin(['home']) await this.appManager.activatePlugin(['settings', 'config']) - await this.appManager.activatePlugin(['hiddenPanel', 'pluginManager', 'contextualListener', 'codeParser', 'fileStates', 'terminal', 'blockchain', 'fetchAndCompile', 'contentImport', 'gistHandler']) + await this.appManager.activatePlugin(['hiddenPanel', 'pluginManager', 'contextualListener', 'codeParser', 'fileDecorator', 'terminal', 'blockchain', 'fetchAndCompile', 'contentImport', 'gistHandler']) await this.appManager.activatePlugin(['settings']) await this.appManager.activatePlugin(['walkthrough','storage', 'search','compileAndRun']) diff --git a/apps/remix-ide/src/app/panels/file-panel.js b/apps/remix-ide/src/app/panels/file-panel.js index 1461a648f8..a7acf90462 100644 --- a/apps/remix-ide/src/app/panels/file-panel.js +++ b/apps/remix-ide/src/app/panels/file-panel.js @@ -30,7 +30,7 @@ const { SlitherHandle } = require('../files/slither-handle.js') const profile = { name: 'filePanel', displayName: 'File explorers', - methods: ['createNewFile', 'uploadFile', 'getCurrentWorkspace', 'getWorkspaces', 'createWorkspace', 'setWorkspace', 'registerContextMenuItem', 'renameWorkspace', 'deleteWorkspace', 'setFileState'], + methods: ['createNewFile', 'uploadFile', 'getCurrentWorkspace', 'getWorkspaces', 'createWorkspace', 'setWorkspace', 'registerContextMenuItem', 'renameWorkspace', 'deleteWorkspace'], events: ['setWorkspace', 'workspaceRenamed', 'workspaceDeleted', 'workspaceCreated'], icon: 'assets/img/fileManager.webp', description: ' - ', @@ -85,10 +85,6 @@ module.exports = class Filepanel extends ViewPlugin { }) } - async setFileState (fileState) { - console.log(fileState) - this.emit('setFileState', fileState) - } getCurrentWorkspace () { return this.currentWorkspaceMetadata diff --git a/apps/remix-ide/src/app/panels/tab-proxy.js b/apps/remix-ide/src/app/panels/tab-proxy.js index e6a0c1bead..daa3575ddb 100644 --- a/apps/remix-ide/src/app/panels/tab-proxy.js +++ b/apps/remix-ide/src/app/panels/tab-proxy.js @@ -170,8 +170,8 @@ export class TabProxy extends Plugin { this.removeTab(profile.name) }) - this.on('fileStates', 'fileStateChanged', async (items) => { - this.tabsApi.setFileStates(items) + this.on('fileDecorator', 'fileDecoratorsChanged', async (items) => { + this.tabsApi.setFileDecorations(items) }) try { diff --git a/libs/remix-core-plugin/src/lib/code-parser.tsx b/apps/remix-ide/src/app/plugins/code-parser.tsx similarity index 96% rename from libs/remix-core-plugin/src/lib/code-parser.tsx rename to apps/remix-ide/src/app/plugins/code-parser.tsx index 5bc107ce4c..aef97ef613 100644 --- a/libs/remix-core-plugin/src/lib/code-parser.tsx +++ b/apps/remix-ide/src/app/plugins/code-parser.tsx @@ -8,7 +8,7 @@ import { AstNode, CompilationError, CompilationResult, CompilationSource } from import { helper } from '@remix-project/remix-solidity' import React from 'react' -import { fileState, fileStateType } from '@remix-ui/file-states' +import { fileDecoration, fileDecorationType } from '@remix-ui/file-decorators' // eslint-disable-next-line @@ -121,18 +121,18 @@ export class CodeParser extends Plugin { try { - let fileState:fileState = { + let fileState:fileDecoration = { path: this.currentFile, isDirectory: false, - fileStateType: fileStateType.Custom, + fileStateType: fileDecorationType.Error, fileStateLabelClass: 'text-success', fileStateIconClass: '', fileStateIcon: , - comment: '', + text: '2', owner: 'code-parser', bubble: true } - await this.call('fileStates', 'setFileState', fileState) + await this.call('fileDecorator', 'setFileDecorators', fileState) fileState = { ...fileState, fileStateLabelClass: 'text-danger', @@ -144,41 +144,41 @@ export class CodeParser extends Plugin { fileStateLabelClass: 'text-danger', fileStateIcon:
call rob now!
, } - await this.call('fileStates', 'setFileState', fileState) + await this.call('fileDecorator', 'setFileDecorators', fileState) - const states:fileState[] = [ + const states:fileDecoration[] = [ { path: 'contracts/2_Owner.sol', isDirectory: false, - fileStateType: fileStateType.Custom, + fileStateType: fileDecorationType.Custom, fileStateLabelClass: 'text-success', fileStateIconClass: '', fileStateIcon: , - comment: '', + text: '', owner: 'code-parser', bubble: true }, { path: 'contracts/2_Owner.sol', isDirectory: false, - fileStateType: fileStateType.Custom, + fileStateType: fileDecorationType.Custom, fileStateLabelClass: 'text-danger', fileStateIconClass: '', fileStateIcon: , - comment: '', + text: '', owner: 'code-parser', bubble: true } ] - await this.call('fileStates', 'setFileState', states) + await this.call('fileDecorator', 'setFileDecorators', states) } catch (e) { console.log('error calling filePanel', e) } } else { - await this.call('fileStates', 'setFileState', [{ + await this.call('fileDecorator', 'setFileDecorators', [{ path: this.currentFile, isDirectory: false, fileStateType: [], diff --git a/libs/remix-core-plugin/src/lib/file-states.ts b/apps/remix-ide/src/app/plugins/file-decorator.ts similarity index 71% rename from libs/remix-core-plugin/src/lib/file-states.ts rename to apps/remix-ide/src/app/plugins/file-decorator.ts index f0a91d0c7e..6626bf87cc 100644 --- a/libs/remix-core-plugin/src/lib/file-states.ts +++ b/apps/remix-ide/src/app/plugins/file-decorator.ts @@ -3,18 +3,18 @@ import { default as deepequal } from 'deep-equal' // eslint-disable-line import { Plugin } from '@remixproject/engine' -import { fileState } from '@remix-ui/file-states' +import { fileDecoration } from '@remix-ui/file-decorators' const profile = { - name: 'fileStates', - desciption: 'Keeps state of the files', - methods: ['setFileState'], - events: ['fileStateChanged'], + name: 'fileDecorator', + desciption: 'Keeps decorators of the files', + methods: ['setFileDecorators'], + events: ['fileDecoratorsChanged'], version: '0.0.1' } -export class FileStates extends Plugin { - private _fileStates: fileState[] = [] +export class FileDecorator extends Plugin { + private _fileStates: fileDecoration[] = [] constructor() { super(profile) } @@ -22,9 +22,9 @@ export class FileStates extends Plugin { * * @param fileStates Array of file states */ - async setFileState(fileStates: fileState[] | fileState) { + async setFileDecorators(fileStates: fileDecoration[] | fileDecoration) { const workspace = await this.call('filePanel', 'getCurrentWorkspace') - function sortByPath( a, b ) { + function sortByPath( a: fileDecoration, b: fileDecoration ) { if ( a.path < b.path ){ return -1; } @@ -40,7 +40,7 @@ export class FileStates extends Plugin { state.workspace = workspace }) const filteredState = this._fileStates.filter((state) => { - const index = fileStatesPayload.findIndex((payloadFileState: fileState) => { + const index = fileStatesPayload.findIndex((payloadFileState: fileDecoration) => { return payloadFileState.owner == state.owner && payloadFileState.path == state.path }) return index == -1 @@ -49,9 +49,8 @@ export class FileStates extends Plugin { if (!deepequal(newState, this._fileStates)) { this._fileStates = newState - console.log('fileStates', this._fileStates) - this.emit('fileStateChanged', this._fileStates) + this.emit('fileDecoratorsChanged', this._fileStates) } } } \ No newline at end of file diff --git a/libs/remix-core-plugin/src/index.ts b/libs/remix-core-plugin/src/index.ts index 413f67aa4a..6038733518 100644 --- a/libs/remix-core-plugin/src/index.ts +++ b/libs/remix-core-plugin/src/index.ts @@ -7,6 +7,4 @@ export { EditorContextListener } from './lib/editor-context-listener' export { GistHandler } from './lib/gist-handler' export * from './types/contract' export { LinkLibraries, DeployLibraries } from './lib/link-libraries' -export { OpenZeppelinProxy } from './lib/openzeppelin-proxy' -export { CodeParser } from './lib/code-parser' -export { FileStates } from './lib/file-states' +export { OpenZeppelinProxy } from './lib/openzeppelin-proxy' \ No newline at end of file diff --git a/libs/remix-ui/file-states/.babelrc b/libs/remix-ui/file-decorators/.babelrc similarity index 100% rename from libs/remix-ui/file-states/.babelrc rename to libs/remix-ui/file-decorators/.babelrc diff --git a/libs/remix-ui/file-states/.eslintrc b/libs/remix-ui/file-decorators/.eslintrc similarity index 100% rename from libs/remix-ui/file-states/.eslintrc rename to libs/remix-ui/file-decorators/.eslintrc diff --git a/libs/remix-ui/file-decorators/src/index.ts b/libs/remix-ui/file-decorators/src/index.ts new file mode 100644 index 0000000000..a116c66cd3 --- /dev/null +++ b/libs/remix-ui/file-decorators/src/index.ts @@ -0,0 +1,3 @@ +export { fileDecoration, fileDecorationType, FileType } from './lib/types/index' +export { FileDecorationIcons } from './lib/components/file-decoration-icon' + diff --git a/libs/remix-ui/file-decorators/src/lib/components/file-decoration-icon.tsx b/libs/remix-ui/file-decorators/src/lib/components/file-decoration-icon.tsx new file mode 100644 index 0000000000..4c0743a89c --- /dev/null +++ b/libs/remix-ui/file-decorators/src/lib/components/file-decoration-icon.tsx @@ -0,0 +1,48 @@ +// eslint-disable-next-line no-use-before-define +import React, { useEffect, useState } from 'react' + +import { fileDecoration, fileDecorationType, FileType } from '../types' +import FileDecorationCustomIcon from './filedecorationicons/file-decoration-custom-icon' +import FileDecorationErrorIcon from './filedecorationicons/file-decoration-error-icon' +import FileDecorationWarningIcon from './filedecorationicons/file-decoration-warning-icon' + +export type fileDecorationProps = { + file: FileType, + fileDecorations: fileDecoration[] +} + +export const FileDecorationIcons = (props: fileDecorationProps) => { + const [states, setStates] = useState([]) + useEffect(() => { + //console.log(props.file) + //console.log(props.fileState) + setStates(props.fileDecorations.filter((fileDecoration) => fileDecoration.path === props.file.path || `${fileDecoration.workspace.name}/${fileDecoration.path}` === props.file.path)) + }, [props.fileDecorations]) + + const getTags = function () { + if (states && states.length) { + const elements: JSX.Element[] = [] + + for (const [index, state] of states.entries()) { + switch (state.fileStateType) { + case fileDecorationType.Error: + elements.push() + break + case fileDecorationType.Warning: + elements.push() + break + case fileDecorationType.Custom: + elements.push() + break + } + } + return elements + } + } + + return <> + {getTags()} + +} + +export default FileDecorationIcons \ No newline at end of file diff --git a/libs/remix-ui/file-states/src/lib/components/filestates/file-state-custom-icon.tsx b/libs/remix-ui/file-decorators/src/lib/components/filedecorationicons/file-decoration-custom-icon.tsx similarity index 58% rename from libs/remix-ui/file-states/src/lib/components/filestates/file-state-custom-icon.tsx rename to libs/remix-ui/file-decorators/src/lib/components/filedecorationicons/file-decoration-custom-icon.tsx index b6cefc3429..d45319740b 100644 --- a/libs/remix-ui/file-states/src/lib/components/filestates/file-state-custom-icon.tsx +++ b/libs/remix-ui/file-decorators/src/lib/components/filedecorationicons/file-decoration-custom-icon.tsx @@ -1,13 +1,13 @@ // eslint-disable-next-line no-use-before-define import React from 'react' -import { fileState } from '../../types' +import { fileDecoration } from '../../types' -const FileStateCustomIcon = (props: { - fileState: fileState +const FileDecorationCustomIcon = (props: { + fileState: fileDecoration }) => { return <> {props.fileState.fileStateIcon} } -export default FileStateCustomIcon \ No newline at end of file +export default FileDecorationCustomIcon \ No newline at end of file diff --git a/libs/remix-ui/file-decorators/src/lib/components/filedecorationicons/file-decoration-error-icon.tsx b/libs/remix-ui/file-decorators/src/lib/components/filedecorationicons/file-decoration-error-icon.tsx new file mode 100644 index 0000000000..8a9393f294 --- /dev/null +++ b/libs/remix-ui/file-decorators/src/lib/components/filedecorationicons/file-decoration-error-icon.tsx @@ -0,0 +1,11 @@ +// eslint-disable-next-line no-use-before-define +import React from 'react' +import { fileDecoration } from '../../types' + +const FileDecorationErrorIcon = (props: { + fileState: fileDecoration +}) => { + return <>{props.fileState.text} +} + +export default FileDecorationErrorIcon \ No newline at end of file diff --git a/libs/remix-ui/file-decorators/src/lib/components/filedecorationicons/file-decoration-warning-icon.tsx b/libs/remix-ui/file-decorators/src/lib/components/filedecorationicons/file-decoration-warning-icon.tsx new file mode 100644 index 0000000000..309dbac35e --- /dev/null +++ b/libs/remix-ui/file-decorators/src/lib/components/filedecorationicons/file-decoration-warning-icon.tsx @@ -0,0 +1,11 @@ +// eslint-disable-next-line no-use-before-define +import React from 'react' +import { fileDecoration } from '../../types' + +const FileDecorationWarningIcon = (props: { + fileState: fileDecoration +}) => { + return <>{props.fileState.text} +} + +export default FileDecorationWarningIcon \ No newline at end of file diff --git a/libs/remix-ui/file-states/src/lib/types/index.ts b/libs/remix-ui/file-decorators/src/lib/types/index.ts similarity index 71% rename from libs/remix-ui/file-states/src/lib/types/index.ts rename to libs/remix-ui/file-decorators/src/lib/types/index.ts index 484c546c61..c08f8a7c82 100644 --- a/libs/remix-ui/file-states/src/lib/types/index.ts +++ b/libs/remix-ui/file-decorators/src/lib/types/index.ts @@ -1,4 +1,4 @@ -export enum fileStateType { +export enum fileDecorationType { Error = 'ERROR', Warning = 'WARNING', Success = 'SUCCESS', @@ -15,23 +15,24 @@ export enum fileStateType { Custom = 'CUSTOM', } - export type fileState = { + export type fileDecoration = { path: string, isDirectory: boolean, - fileStateType: fileStateType, + fileStateType: fileDecorationType, fileStateLabelClass: string, fileStateIconClass: string, fileStateIcon: string | HTMLDivElement | JSX.Element, bubble: boolean, - comment: string, + text?: string, owner: string, - workspace?: string + workspace?: any + tooltip?: string } export interface FileType { path: string, - name: string, - isDirectory: boolean, - type: 'folder' | 'file' | 'gist', + name?: string, + isDirectory?: boolean, + type?: 'folder' | 'file' | 'gist', child?: File[] } \ No newline at end of file diff --git a/libs/remix-ui/file-states/tsconfig.json b/libs/remix-ui/file-decorators/tsconfig.json similarity index 100% rename from libs/remix-ui/file-states/tsconfig.json rename to libs/remix-ui/file-decorators/tsconfig.json diff --git a/libs/remix-ui/file-states/tsconfig.lib.json b/libs/remix-ui/file-decorators/tsconfig.lib.json similarity index 100% rename from libs/remix-ui/file-states/tsconfig.lib.json rename to libs/remix-ui/file-decorators/tsconfig.lib.json diff --git a/libs/remix-ui/file-states/src/index.ts b/libs/remix-ui/file-states/src/index.ts deleted file mode 100644 index 1fa5ac421b..0000000000 --- a/libs/remix-ui/file-states/src/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { fileState, fileStateType } from './lib/types/index' -export { FileStateIcons } from './lib/components/file-state-icon' - diff --git a/libs/remix-ui/file-states/src/lib/components/file-state-icon.tsx b/libs/remix-ui/file-states/src/lib/components/file-state-icon.tsx deleted file mode 100644 index 70648e9201..0000000000 --- a/libs/remix-ui/file-states/src/lib/components/file-state-icon.tsx +++ /dev/null @@ -1,48 +0,0 @@ -// eslint-disable-next-line no-use-before-define -import React, { useEffect, useState } from 'react' - -import { fileState, fileStateType, FileType } from '../types' -import FileStateCustomIcon from './filestates/file-state-custom-icon' -import FileStateErrorIcon from './filestates/file-state-error-icon' -import FileStateWarningIcon from './filestates/file-state-warning-icon' - -export type fileStateProps = { - file: FileType, - fileState: fileState[] -} - -export const FileStateIcons = (props: fileStateProps) => { - const [states, setStates] = useState([]) - useEffect(() => { - //console.log(props.file) - //console.log(props.fileState) - setStates(props.fileState.filter((st) => st.path === props.file.path)) - }, [props.fileState]) - - const getTags = function () { - if (states && states.length) { - const elements: JSX.Element[] = [] - - for (const [index, state] of states.entries()) { - switch (state.fileStateType) { - case fileStateType.Error: - elements.push() - break - case fileStateType.Warning: - elements.push() - break - case fileStateType.Custom: - elements.push() - break - } - } - return elements - } - } - - return <> - {getTags()} - -} - -export default FileStateIcons \ No newline at end of file diff --git a/libs/remix-ui/file-states/src/lib/components/filestates/file-state-error-icon.tsx b/libs/remix-ui/file-states/src/lib/components/filestates/file-state-error-icon.tsx deleted file mode 100644 index 1324626e19..0000000000 --- a/libs/remix-ui/file-states/src/lib/components/filestates/file-state-error-icon.tsx +++ /dev/null @@ -1,11 +0,0 @@ -// eslint-disable-next-line no-use-before-define -import React from 'react' -import { fileState } from '../../types' - -const FileStateErrorIcon = (props: { - fileState: fileState -}) => { - return <>{props.fileState.comment} -} - -export default FileStateErrorIcon \ No newline at end of file diff --git a/libs/remix-ui/file-states/src/lib/components/filestates/file-state-warning-icon.tsx b/libs/remix-ui/file-states/src/lib/components/filestates/file-state-warning-icon.tsx deleted file mode 100644 index 53ba6f78c1..0000000000 --- a/libs/remix-ui/file-states/src/lib/components/filestates/file-state-warning-icon.tsx +++ /dev/null @@ -1,11 +0,0 @@ -// eslint-disable-next-line no-use-before-define -import React from 'react' -import { fileState } from '../../types' - -const FileStateWarningIcon = (props: { - fileState: fileState -}) => { - return <>{props.fileState.comment} -} - -export default FileStateWarningIcon \ No newline at end of file diff --git a/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx b/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx index 1cc560f089..a1ca18e6d8 100644 --- a/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx +++ b/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx @@ -1,5 +1,7 @@ -import { fileState } from '@remix-ui/workspace' + +import { fileDecoration, FileDecorationIcons } from '@remix-ui/file-decorators' import { Plugin } from '@remixproject/engine' + import React, { useState, useRef, useEffect, useReducer } from 'react' // eslint-disable-line import { Tab, Tabs, TabList, TabPanel } from 'react-tabs' import './remix-ui-tabs.css' @@ -23,7 +25,7 @@ export interface TabsUIApi { interface ITabsState { selectedIndex: number, - fileStates: fileState[], + fileDecorations: fileDecoration[], } interface ITabsAction { @@ -34,7 +36,7 @@ interface ITabsAction { const initialTabsState: ITabsState = { selectedIndex: -1, - fileStates: [], + fileDecorations: [], } const tabsReducer = (state: ITabsState, action: ITabsAction) => { @@ -44,10 +46,10 @@ const tabsReducer = (state: ITabsState, action: ITabsAction) => { ...state, selectedIndex: action.payload, } - case 'SET_FILE_STATES': + case 'SET_FILE_DECORATIONS': return { ...state, - fileStates: action.payload, + fileDecorations: action.payload as fileDecoration[], } default: return state @@ -64,16 +66,26 @@ export const TabsUI = (props: TabsUIProps) => { tabs.current = props.tabs // we do this to pass the tabs list to the onReady callbacks useEffect(() => { - console.log('TabsUI useEffect') if (props.tabs[tabsState.selectedIndex]) { tabsRef.current[tabsState.selectedIndex].scrollIntoView({ behavior: 'smooth', block: 'center' }) } }, [tabsState.selectedIndex]) - const getFileState = (tab: any) => { - console.log('TAB', tab, tabsState.fileStates) + + + const getFileDecorationClasses = (tab: any) => { + console.log('TAB', tab, tabsState.fileDecorations) + const fileDecoration = tabsState.fileDecorations.find((fileDecoration: fileDecoration) => { + if(`${fileDecoration.workspace.name}/${fileDecoration.path}` === tab.name) return true + }) + return fileDecoration && fileDecoration.fileStateLabelClass + } + + const getFileDecorationIcons = (tab: any) => { + return } + const renderTab = (tab, index) => { console.log('rendertab') const classNameImg = 'my-1 mr-1 text-dark ' + tab.iconClass @@ -83,7 +95,8 @@ export const TabsUI = (props: TabsUIProps) => { return (
{ tabsRef.current[index] = el }} className={classNameTab} data-id={index === currentIndexRef.current ? 'tab-active' : ''} title={tab.tooltip}> {tab.icon ? () : ()} - {tab.title} + {tab.title} + {getFileDecorationIcons(tab)} { props.onClose(index); event.stopPropagation() }}> @@ -101,8 +114,8 @@ export const TabsUI = (props: TabsUIProps) => { dispatch({ type: 'SELECT_INDEX', payload: index }) } - const setFileStates = (fileStates: fileState[]) => { - dispatch({ type: 'SET_FILE_STATES', payload: fileStates }) + const setFileDecorations = (fileStates: fileDecoration[]) => { + dispatch({ type: 'SET_FILE_DECORATIONS', payload: fileStates }) } const transformScroll = (event) => { @@ -118,7 +131,7 @@ export const TabsUI = (props: TabsUIProps) => { props.onReady({ activateTab, active, - setFileStates + setFileDecorations }) return () => { tabsElement.current.removeEventListener('wheel', transformScroll) } diff --git a/libs/remix-ui/workspace/src/lib/actions/events.ts b/libs/remix-ui/workspace/src/lib/actions/events.ts index ff02f5ec2d..62092df30f 100644 --- a/libs/remix-ui/workspace/src/lib/actions/events.ts +++ b/libs/remix-ui/workspace/src/lib/actions/events.ts @@ -1,7 +1,8 @@ +import { fileDecoration } from '@remix-ui/file-decorators' import { extractParentFromKey } from '@remix-ui/helper' import React from 'react' -import { action, WorkspaceTemplate, fileState } from '../types' -import { displayNotification, displayPopUp, fileAddedSuccess, fileRemovedSuccess, fileRenamedSuccess, folderAddedSuccess, loadLocalhostError, loadLocalhostRequest, loadLocalhostSuccess, removeContextMenuItem, removeFocus, rootFolderChangedSuccess, setContextMenuItem, setMode, setReadOnlyMode, setFileStateSuccess } from './payload' +import { action, WorkspaceTemplate } from '../types' +import { displayNotification, displayPopUp, fileAddedSuccess, fileRemovedSuccess, fileRenamedSuccess, folderAddedSuccess, loadLocalhostError, loadLocalhostRequest, loadLocalhostSuccess, removeContextMenuItem, removeFocus, rootFolderChangedSuccess, setContextMenuItem, setMode, setReadOnlyMode, setFileDecorationSuccess } from './payload' import { addInputField, createWorkspace, deleteWorkspace, fetchWorkspaceDirectory, renameWorkspace, switchToWorkspace, uploadFile } from './workspace' const LOCALHOST = ' - connect to localhost - ' @@ -38,8 +39,8 @@ export const listenOnPluginEvents = (filePanelPlugin) => { uploadFile(target, dir, cb) }) - plugin.on('fileStates', 'fileStateChanged', async (items: fileState[]) => { - setFileState(items) + plugin.on('fileDecorator', 'fileDecoratorsChanged', async (items: fileDecoration[]) => { + setFileDecorators(items) }) plugin.on('remixd', 'rootFolderChanged', async (path: string) => { @@ -207,7 +208,7 @@ const rootFolderChanged = async (path) => { await dispatch(rootFolderChangedSuccess(path)) } -const setFileState = async (items: fileState[], cb?: (err: Error, result?: string | number | boolean | Record) => void) => { - await dispatch(setFileStateSuccess(items)) +const setFileDecorators = async (items: fileDecoration[], cb?: (err: Error, result?: string | number | boolean | Record) => void) => { + await dispatch(setFileDecorationSuccess(items)) cb && cb(null, true) } diff --git a/libs/remix-ui/workspace/src/lib/actions/payload.ts b/libs/remix-ui/workspace/src/lib/actions/payload.ts index 338caffd45..7e18377966 100644 --- a/libs/remix-ui/workspace/src/lib/actions/payload.ts +++ b/libs/remix-ui/workspace/src/lib/actions/payload.ts @@ -1,4 +1,5 @@ -import { action, fileState } from '../types' +import { fileDecoration } from '@remix-ui/file-decorators' +import { action } from '../types' export const setCurrentWorkspace = (workspace: string) => { return { @@ -240,9 +241,9 @@ export const fsInitializationCompleted = () => { } } -export const setFileStateSuccess = (items: fileState[]) => { +export const setFileDecorationSuccess = (items: fileDecoration[]) => { return { - type: 'SET_FILE_STATE_SUCCESS', + type: 'SET_FILE_DECORATION_SUCCESS', payload: items } } diff --git a/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx b/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx index adbad94a36..3ccefdb2db 100644 --- a/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx +++ b/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx @@ -432,7 +432,7 @@ export const FileExplorer = (props: FileExplorerProps) => { { files[props.name] && Object.keys(files[props.name]).map((key, index) => void } export const FileLabel = (props: FileLabelProps) => { - const { file, focusEdit, editModeOff, fileState } = props + const { file, focusEdit, editModeOff, fileDecorations } = props const [isEditable, setIsEditable] = useState(false) const [fileStateClasses, setFileStateClasses] = useState('') const labelRef = useRef(null) @@ -28,16 +28,17 @@ export const FileLabel = (props: FileLabelProps) => { }, [file.path, focusEdit]) useEffect(() => { - console.log('fileState', fileState, file.name) - const state = props.fileState.find((state: fileState) => { - console.log('FOUND STATE', state) + console.log('fileState', fileDecorations, file.name) + const state = props.fileDecorations.find((state: fileDecoration) => { if(state.path === props.file.path) return true if(state.bubble && props.file.isDirectory && state.path.startsWith(props.file.path)) return true }) if (state && state.fileStateLabelClass) { setFileStateClasses(state.fileStateLabelClass) + } else{ + setFileStateClasses('') } - }, [fileState]) + }, [fileDecorations]) useEffect(() => { if (labelRef.current) { diff --git a/libs/remix-ui/workspace/src/lib/components/file-render.tsx b/libs/remix-ui/workspace/src/lib/components/file-render.tsx index 4fcad89a83..164689899b 100644 --- a/libs/remix-ui/workspace/src/lib/components/file-render.tsx +++ b/libs/remix-ui/workspace/src/lib/components/file-render.tsx @@ -6,8 +6,11 @@ import { TreeView, TreeViewItem } from '@remix-ui/tree-view' import { getPathIcon } from '@remix-ui/helper' // eslint-disable-next-line @typescript-eslint/no-unused-vars import { FileLabel } from './file-label' +import { fileDecoration, FileDecorationIcons } from '@remix-ui/file-decorators' + + + -import { fileState, FileStateIcons } from '@remix-ui/file-states' export interface RenderFileProps { file: FileType, @@ -21,7 +24,7 @@ export interface RenderFileProps { handleClickFolder: (path: string, type: string) => void, handleClickFile: (path: string, type: string) => void, handleContextMenu: (pageX: number, pageY: number, path: string, content: string, type: string) => void - fileState: fileState[] + fileDecorations: fileDecoration[] } export const FileRender = (props: RenderFileProps) => { @@ -79,7 +82,7 @@ export const FileRender = (props: RenderFileProps) => { iconX='pr-3 fa fa-folder' iconY='pr-3 fa fa-folder-open' key={`${file.path + props.index}`} - label={} + label={} onClick={handleFolderClick} onContextMenu={handleContextMenu} labelClass={labelClass} @@ -92,7 +95,7 @@ export const FileRender = (props: RenderFileProps) => { file.child ? { Object.keys(file.child).map((key, index) => { label={ <>
- - + +
} diff --git a/libs/remix-ui/workspace/src/lib/reducers/workspace.ts b/libs/remix-ui/workspace/src/lib/reducers/workspace.ts index 824ab7daa8..0ab3750573 100644 --- a/libs/remix-ui/workspace/src/lib/reducers/workspace.ts +++ b/libs/remix-ui/workspace/src/lib/reducers/workspace.ts @@ -1,6 +1,7 @@ import { extractNameFromKey } from '@remix-ui/helper' -import { action, fileState, FileType } from '../types' +import { action, FileType } from '../types' import * as _ from 'lodash' +import { fileDecoration } from '@remix-ui/file-decorators' interface Action { type: string payload: any @@ -21,7 +22,7 @@ export interface BrowserState { removedMenuItems: action[], error: string }, - fileState: fileState[] + fileState: fileDecoration[] }, localhost: { sharedFolder: string, @@ -603,7 +604,7 @@ export const browserReducer = (state = browserInitialState, action: Action) => { } } - case 'SET_FILE_STATE_SUCCESS': { + case 'SET_FILE_DECORATION_SUCCESS': { return { ...state, browser: { diff --git a/libs/remix-ui/workspace/src/lib/types/index.ts b/libs/remix-ui/workspace/src/lib/types/index.ts index 32dc82df36..93b6d9f8c9 100644 --- a/libs/remix-ui/workspace/src/lib/types/index.ts +++ b/libs/remix-ui/workspace/src/lib/types/index.ts @@ -1,6 +1,6 @@ import React from 'react' import { customAction } from '@remixproject/plugin-api/lib/file-system/file-panel' -import { fileState } from '@remix-ui/file-states'; +import { fileDecoration } from '@remix-ui/file-decorators'; export type action = { name: string, type?: Array<'folder' | 'gist' | 'file'>, path?: string[], extension?: string[], pattern?: string[], id: string, multiselect: boolean, label: string, sticky?: boolean } export interface JSONStandardInput { @@ -74,7 +74,7 @@ export interface FileExplorerProps { contextMenuItems: MenuItems, removedContextMenuItems: MenuItems, files: { [x: string]: Record }, - fileState: fileState[], + fileState: fileDecoration[], expandPath: string[], focusEdit: string, focusElement: { key: string, type: 'file' | 'folder' | 'gist' }[], diff --git a/nx.json b/nx.json index 25a3150170..1adb77b32e 100644 --- a/nx.json +++ b/nx.json @@ -170,7 +170,7 @@ "remix-ui-permission-handler": { "tags": [] }, - "remix-ui-file-states": { + "remix-ui-file-decorators": { "tags": [] } }, diff --git a/package.json b/package.json index d2e4a7a1b3..dd97af8ad0 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ "workspace-schematic": "nx workspace-schematic", "dep-graph": "nx dep-graph", "help": "nx help", - "lint:libs": "nx run-many --target=lint --projects=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remix-ws-templates,remixd,remix-ui-tree-view,remix-ui-modal-dialog,remix-ui-toaster,remix-ui-helper,remix-ui-debugger-ui,remix-ui-workspace,remix-ui-static-analyser,remix-ui-checkbox,remix-ui-settings,remix-core-plugin,remix-ui-renderer,remix-ui-publish-to-storage,remix-ui-solidity-compiler,solidity-unit-testing,remix-ui-plugin-manager,remix-ui-terminal,remix-ui-editor,remix-ui-app,remix-ui-tabs,remix-ui-panel,remix-ui-run-tab,remix-ui-permission-handler,remix-ui-search,remix-ui-file-states", + "lint:libs": "nx run-many --target=lint --projects=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remix-ws-templates,remixd,remix-ui-tree-view,remix-ui-modal-dialog,remix-ui-toaster,remix-ui-helper,remix-ui-debugger-ui,remix-ui-workspace,remix-ui-static-analyser,remix-ui-checkbox,remix-ui-settings,remix-core-plugin,remix-ui-renderer,remix-ui-publish-to-storage,remix-ui-solidity-compiler,solidity-unit-testing,remix-ui-plugin-manager,remix-ui-terminal,remix-ui-editor,remix-ui-app,remix-ui-tabs,remix-ui-panel,remix-ui-run-tab,remix-ui-permission-handler,remix-ui-search,remix-ui-file-decorators", "build:libs": "nx run-many --target=build --parallel=false --with-deps=true --projects=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remix-ws-templates,remixd", "test:libs": "nx run-many --target=test --projects=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remixd", "publish:libs": "yarn run build:libs && lerna publish --skip-git && yarn run bumpVersion:libs", diff --git a/tsconfig.base.json b/tsconfig.base.json index d3a7b77c15..e985327695 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -52,7 +52,7 @@ "@remix-ui/modal-dialog": ["libs/remix-ui/modal-dialog/src/index.ts"], "@remix-ui/toaster": ["libs/remix-ui/toaster/src/index.ts"], "@remix-ui/file-explorer": ["libs/remix-ui/file-explorer/src/index.ts"], - "@remix-ui/file-states": ["libs/remix-ui/file-states/src/index.ts"], + "@remix-ui/file-decorators": ["libs/remix-ui/file-decorators/src/index.ts"], "@remix-ui/workspace": ["libs/remix-ui/workspace/src/index.ts"], "@remix-ui/static-analyser": [ "libs/remix-ui/static-analyser/src/index.ts" diff --git a/workspace.json b/workspace.json index c779a61745..7064f33710 100644 --- a/workspace.json +++ b/workspace.json @@ -1125,17 +1125,17 @@ } } }, - "remix-ui-file-states": { - "root": "libs/remix-ui/file-states", - "sourceRoot": "libs/remix-ui/file-states/src", + "remix-ui-file-decorators": { + "root": "libs/remix-ui/file-decorators", + "sourceRoot": "libs/remix-ui/file-decorators/src", "projectType": "library", "architect": { "lint": { "builder": "@nrwl/linter:lint", "options": { "linter": "eslint", - "tsConfig": ["libs/remix-ui/file-states/tsconfig.lib.json"], - "exclude": ["**/node_modules/**", "!libs/remix-ui/file-states/**/*"] + "tsConfig": ["libs/remix-ui/file-decorators/tsconfig.lib.json"], + "exclude": ["**/node_modules/**", "!libs/remix-ui/file-decorators/**/*"] } } }