From 904aa2a18dfdf600edd2c6fb9c4b2ddbf1def749 Mon Sep 17 00:00:00 2001 From: Joseph Izang Date: Wed, 3 Nov 2021 23:03:45 +0100 Subject: [PATCH] more fixes for icon status change --- .../src/app/components/side-panel.js | 2 +- .../src/app/components/vertical-icons.js | 26 ++--- .../src/lib/components/Icon.tsx | 95 ++++++++----------- .../src/lib/reducers/iconReducers.ts | 4 +- 4 files changed, 57 insertions(+), 70 deletions(-) diff --git a/apps/remix-ide/src/app/components/side-panel.js b/apps/remix-ide/src/app/components/side-panel.js index 0cc09d84d4..c82176134b 100644 --- a/apps/remix-ide/src/app/components/side-panel.js +++ b/apps/remix-ide/src/app/components/side-panel.js @@ -103,7 +103,7 @@ export class SidePanel extends AbstractPanel { addView (profile, view) { super.addView(profile, view) - this.verticalIcons.linkContent(profile) + setTimeout(() => this.verticalIcons.linkContent(profile), 60000) } /** diff --git a/apps/remix-ide/src/app/components/vertical-icons.js b/apps/remix-ide/src/app/components/vertical-icons.js index 3883181836..e67e7c9043 100644 --- a/apps/remix-ide/src/app/components/vertical-icons.js +++ b/apps/remix-ide/src/app/components/vertical-icons.js @@ -66,17 +66,19 @@ export class VerticalIcons extends Plugin { // the list of supported keys. 'none' will remove the status // const keys = ['edited', 'succeed', 'none', 'loading', 'failed'] // const types = ['error', 'warning', 'success', 'info', ''] - // const fn = (status) => { - // if (!this.types.includes(status.type) && status.type) throw new Error(`type should be ${this.keys.join()}`) - // if (status.key === undefined) throw new Error('status key should be defined') - - // if (typeof status.key === 'string' && (!this.keys.includes(status.key))) { - // throw new Error('key should contain either number or ' + this.keys.join()) - // } - // this.setIconStatus(profile.name, status) - // } - // this.iconStatus[profile.name] = fn - // this.on(profile.name, 'statusChanged', this.iconStatus[profile.name]) + const fn = (status) => { + if (!this.types.includes(status.type) && status.type) throw new Error(`type should be ${this.keys.join()}`) + if (status.key === undefined) throw new Error('status key should be defined') + + if (typeof status.key === 'string' && (!this.keys.includes(status.key))) { + throw new Error('key should contain either number or ' + this.keys.join()) + } + this.setIconStatus(profile.name, status) + } + this.iconStatus[profile.name] = fn + this.on(profile.name, 'statusChanged', () => { + console.log('caught statusChanged in react!') + }) } /** @@ -114,8 +116,6 @@ export class VerticalIcons extends Plugin { */ setIconStatus (name, status) { const el = this.icons[name] - // eslint-disable-next-line no-debugger - debugger if (!el) return const statusEl = el.querySelector('i') if (statusEl) { diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx index 25adcdf57c..b8bed447bd 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx +++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx @@ -5,17 +5,11 @@ import VerticalIconsContextMenu from '../vertical-icons-context-menu' // eslint-disable-next-line @typescript-eslint/no-unused-vars import React, { Fragment, SyntheticEvent, useEffect, useReducer, useRef, useState } from 'react' import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel' -import * as helper from '../../../../../../apps/remix-ide/src/lib/helper' +// import * as helper from '../../../../../../apps/remix-ide/src/lib/helper' import { defaultState, iconStatusReducer } from '../reducers/iconReducers' interface IconProps { verticalIconPlugin: VerticalIcons - // kind: string - // name: string - // icon: string - // displayName: string - // tooltip: string - // documentation: string profile: any contextMenuAction: (evt: any, profileName: string, documentation: string) => void addActive: (profileName: string) => void @@ -73,58 +67,42 @@ function Icon ({ * @param {Object} status */ // eslint-disable-next-line @typescript-eslint/no-unused-vars - function setIconStatus (name: string) { - if (!iconRef.current) return - const statusEl = iconRef.current.querySelector('i') - if (statusEl) { - iconRef.current.removeChild(statusEl) // need to eject component instead of removing? - } - if (status.key === 'none') return // remove status + // function setIconStatus (name: string, status: any) { + // if (!iconRef.current) return + // const statusEl = iconRef.current.querySelector('i') + // if (statusEl) { + // iconRef.current.removeChild(statusEl) // need to eject component instead of removing? + // } + // if (status.key === 'none') return // remove status - let text = '' - let key = '' - if (typeof status.key === 'number') { - key = status.key.toString() - text = key - } else key = helper.checkSpecialChars(status.key) ? '' : status.key + // let text = '' + // let key = '' + // if (typeof status.key === 'number') { + // key = status.key.toString() + // text = key + // } else key = helper.checkSpecialChars(status.key) ? '' : status.key - let type = '' - if (status.type === 'error') { - type = 'danger' // to use with bootstrap - } else type = helper.checkSpecialChars(status.type) ? '' : status.type - const title = helper.checkSpecialChars(status.title) ? '' : status.title + // let type = '' + // if (status.type === 'error') { + // type = 'danger' // to use with bootstrap + // } else type = helper.checkSpecialChars(status.type) ? '' : status.type + // const title = helper.checkSpecialChars(status.title) ? '' : status.title - const icon = document.createElement('i') - icon.title = title - // icon.className = resolveClasses(key, type) - icon.ariaHidden = 'true' - const innerText = document.createTextNode(text) - icon.appendChild(innerText) - iconRef.current!.appendChild(icon) - iconRef.current.classList.add('remixui_icon') - } - - function setErrorStatus () { - if (!verticalIconPlugin.types.includes(status.type) && status.type) throw new Error(`type should be ${verticalIconPlugin.keys.join()}`) - if (status.key === undefined) throw new Error('status key should be defined') - if (typeof status.key === 'string' && (!verticalIconPlugin.keys.includes(status.key))) { - throw new Error('key should contain either number or ' + verticalIconPlugin.keys.join()) - } - setIconStatus(profile.name) - } - function listenOnStatus () { - // verticalIconPlugin.iconStatus[profile.name] = setErrorStatus // { profileName: profile.name, errorStatus: setErrorStatus } ? - verticalIconPlugin.on(profile.name, 'statusChanged', dispatchIconStatus({ type: 'success', payload: { } })) - } + // const icon = document.createElement('i') + // icon.title = title + // // icon.className = resolveClasses(key, type) + // icon.ariaHidden = 'true' + // const innerText = document.createTextNode(text) + // icon.appendChild(innerText) + // iconRef.current!.appendChild(icon) + // iconRef.current.classList.add('remixui_icon') + // } useEffect(() => { - listenOnStatus() - return () => { - console.log('just listened for status change ', { profile }) - addEventListener('statusChanged', (e) => { - console.log('statusChanged just happend for this icon and this is its payload ', e) - }) - } + console.log('profile.name: ', profile.name) + verticalIconPlugin.on(profile.name, 'statusChanged', () => { + console.log('caught statusChanged in react! icon.tsx') + }) }, []) return ( @@ -156,6 +134,15 @@ function Icon ({ > {name} + {/* { status && status.profileName.length + ? : null + } */} {showContext ? (