From 30879b2d502edc8d03d084c3b54a47541fbf60e0 Mon Sep 17 00:00:00 2001 From: Joseph Izang Date: Sun, 7 Nov 2021 20:25:06 +0100 Subject: [PATCH] fix statusChanged handling bug --- .../src/app/components/side-panel.js | 2 +- .../src/app/components/vertical-icons.js | 136 +++++++++--------- .../src/lib/compiler-container.tsx | 2 +- .../solidity-compiler/src/lib/css/style.css | 2 +- .../src/lib/components/Badge.tsx | 57 ++++++++ .../src/lib/components/Home.tsx | 2 +- .../src/lib/components/Icon.tsx | 102 +++++++------ .../src/lib/components/Settings.tsx | 2 +- .../src/lib/reducers/iconBadgeReducer.ts | 60 ++++++++ .../src/lib/reducers/iconReducers.ts | 49 ------- .../src/lib/remix-ui-vertical-icons-panel.css | 16 +-- .../src/lib/remix-ui-vertical-icons-panel.tsx | 4 +- 12 files changed, 248 insertions(+), 186 deletions(-) create mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx create mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconBadgeReducer.ts delete mode 100644 libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconReducers.ts diff --git a/apps/remix-ide/src/app/components/side-panel.js b/apps/remix-ide/src/app/components/side-panel.js index c82176134b..b3c723caec 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) - setTimeout(() => this.verticalIcons.linkContent(profile), 60000) + setTimeout(() => this.verticalIcons.linkContent(profile), 150) } /** diff --git a/apps/remix-ide/src/app/components/vertical-icons.js b/apps/remix-ide/src/app/components/vertical-icons.js index e67e7c9043..e74ff87418 100644 --- a/apps/remix-ide/src/app/components/vertical-icons.js +++ b/apps/remix-ide/src/app/components/vertical-icons.js @@ -5,7 +5,7 @@ import ReactDOM from 'react-dom' import React from 'react' // eslint-disable-line // eslint-disable-next-line no-unused-vars import { RemixUiVerticalIconsPanel } from '@remix-ui/vertical-icons-panel' -var helper = require('../../lib/helper') +// var helper = require('../../lib/helper') const globalRegistry = require('../../global/registry') const { Plugin } = require('@remixproject/engine') const EventEmitter = require('events') @@ -66,19 +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', () => { - console.log('caught statusChanged in react!') - }) + // 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!') + // }) } /** @@ -86,66 +86,66 @@ export class VerticalIcons extends Plugin { * @param {Object} key * @param {Object} type */ - resolveClasses (key, type) { - let classes = 'remixui_status' - - switch (key) { - case 'succeed': - classes += ' fas fa-check-circle text-' + type + ' ' + 'remixui_statusCheck' - break - case 'edited': - classes += ' fas fa-sync text-' + type + ' ' + 'remixui_statusCheck' - break - case 'loading': - classes += ' fas fa-spinner text-' + type + ' ' + 'remixui_statusCheck' - break - case 'failed': - classes += ' fas fa-exclamation-triangle text-' + type + ' ' + 'remixui_statusCheck' - break - default: { - classes += ' badge badge-pill badge-' + type - } - } - return classes - } + // resolveClasses (key, type) { + // let classes = 'remixui_status' + + // switch (key) { + // case 'succeed': + // classes += ' fas fa-check-circle text-' + type + ' ' + 'remixui_statusCheck' + // break + // case 'edited': + // classes += ' fas fa-sync text-' + type + ' ' + 'remixui_statusCheck' + // break + // case 'loading': + // classes += ' fas fa-spinner text-' + type + ' ' + 'remixui_statusCheck' + // break + // case 'failed': + // classes += ' fas fa-exclamation-triangle text-' + type + ' ' + 'remixui_statusCheck' + // break + // default: { + // classes += ' badge badge-pill badge-' + type + // } + // } + // return classes + // } /** * Set a new status for the @arg name * @param {String} name * @param {Object} status */ - setIconStatus (name, status) { - const el = this.icons[name] - if (!el) return - const statusEl = el.querySelector('i') - if (statusEl) { - el.removeChild(statusEl) - } - 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 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 - - el.appendChild(``) - - el.classList.add('remixui_icon') - } + // setIconStatus (name, status) { + // const el = this.icons[name] + // if (!el) return + // const statusEl = el.querySelector('i') + // if (statusEl) { + // el.removeChild(statusEl) + // } + // 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 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 + + // el.appendChild(``) + + // el.classList.add('remixui_icon') + // } /** * Remove an icon from the map diff --git a/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx b/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx index b17d16afeb..2636c9d77c 100644 --- a/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx +++ b/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx @@ -596,7 +596,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => { } diff --git a/libs/remix-ui/solidity-compiler/src/lib/css/style.css b/libs/remix-ui/solidity-compiler/src/lib/css/style.css index d2bbe9e606..bf1d4d05c9 100644 --- a/libs/remix-ui/solidity-compiler/src/lib/css/style.css +++ b/libs/remix-ui/solidity-compiler/src/lib/css/style.css @@ -151,7 +151,7 @@ padding: 8px 0; border: none; } -.remixui_icon { +.remixui_iconbtn { margin-right: 0.3em; } .remixui_errorBlobs { diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx new file mode 100644 index 0000000000..bd2dcd5cb8 --- /dev/null +++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx @@ -0,0 +1,57 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ +// eslint-disable-next-line no-use-before-define +import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel' +// eslint-disable-next-line no-use-before-define +import React, { Fragment, useEffect, useReducer } from 'react' +import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer' +import { BadgeStatus, IconProfile, IconStatus } from './Icon' + +interface BadgeProps { + verticalIconPlugin: VerticalIcons + iconRef: React.MutableRefObject + profile: IconProfile, + badgeStatus: BadgeStatus +} + +// eslint-disable-next-line no-undef +// eslint-disable-next-line @typescript-eslint/no-unused-vars +function Badge ({ iconRef, verticalIconPlugin, profile, badgeStatus }: BadgeProps) { + /** + * resolve a classes list for @arg key + * @param {Object} key + * @param {Object} type + */ + function resolveClasses (key: string, type: string) { + let classes = 'remixui_status' + switch (key) { + case 'succeed': + classes += ' fas fa-check-circle text-' + type + ' ' + 'remixui_statusCheck' + break + case 'edited': + classes += ' fas fa-sync text-' + type + ' ' + 'remixui_statusCheck' + break + case 'loading': + classes += ' fas fa-spinner text-' + type + ' ' + 'remixui_statusCheck' + break + case 'failed': + classes += ' fas fa-exclamation-triangle text-' + type + ' ' + 'remixui_statusCheck' + break + default: { + classes += ' badge badge-pill badge-' + type + } + } + return classes + } + + return ( + + ) +} + +export default Badge diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Home.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Home.tsx index 7490819deb..8801a9556f 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Home.tsx +++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Home.tsx @@ -10,7 +10,7 @@ interface HomeProps { function Home ({ verticalIconPlugin }: HomeProps) { return (
verticalIconPlugin.activateHome()} // @ts-ignore plugin="home" 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 b8bed447bd..ded511240b 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 @@ -6,16 +6,48 @@ import VerticalIconsContextMenu from '../vertical-icons-context-menu' 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 { defaultState, iconStatusReducer } from '../reducers/iconReducers' +import Badge from './Badge' +import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer' interface IconProps { verticalIconPlugin: VerticalIcons - profile: any + profile: IconProfile contextMenuAction: (evt: any, profileName: string, documentation: string) => void addActive: (profileName: string) => void removeActive: () => void } +export interface IconStatus { + key: string + title: string + type: string + } + +export interface BadgeStatus extends IconStatus { + text: string + } + +export interface IconProfile { + description: string + displayName: string + documentation: string + events: any[] + icon: string + kind: string + location: string + methods: string[] + name: string + version: string + tooltip?: string + } + +const initialState = { + text: '', + key: '', + title: '', + type: '' +} + function Icon ({ profile, verticalIconPlugin, @@ -39,8 +71,8 @@ function Icon ({ const [showContext, setShowContext] = useState(false) const [canDeactivate] = useState(false) const iconRef = useRef(null) + const [badgeStatus, dispatchStatusUpdate] = useReducer(iconBadgeReducer, initialState) // eslint-disable-next-line @typescript-eslint/no-unused-vars - const [status, dispatchIconStatus] = useReducer(iconStatusReducer, defaultState) const handleContextMenu = (e: SyntheticEvent & PointerEvent) => { const deactivationState = verticalIconPlugin.appManager @@ -59,49 +91,10 @@ function Icon ({ setShowContext(false) } - /** - * Set a new status for the @arg name - * keys = ['succeed', 'edited', 'none', 'loading', 'failed'] - * types = ['error', 'warning', 'success', 'info', ''] - * @param {String} name - * @param {Object} status - */ - // eslint-disable-next-line @typescript-eslint/no-unused-vars - // 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 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') - // } - useEffect(() => { - console.log('profile.name: ', profile.name) - verticalIconPlugin.on(profile.name, 'statusChanged', () => { - console.log('caught statusChanged in react! icon.tsx') + verticalIconPlugin.on(profile.name, 'statusChanged', (iconStatus: IconStatus) => { + const action: IconBadgeReducerAction = { type: profile.name, payload: { status: iconStatus, ref: iconRef } } + dispatchStatusUpdate(action) }) }, []) @@ -134,15 +127,16 @@ function Icon ({ > {name}
- {/* { status && status.profileName.length - ? : null - } */} + { + verticalIconPlugin.keys.includes(badgeStatus.key) ? ( + + ) : null + } {showContext ? ( +
{ +// 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()) +// } +// } + +/** + * Set a new status for the @arg name + * @param {String} name + * @param {Object} status + */ +// eslint-disable-next-line @typescript-eslint/no-unused-vars +// if (!ref.current) return +function setIconStatus (name: string, status: IconStatus, ref: React.MutableRefObject) { + const statusEl = ref.current.querySelector('i') + if (statusEl) { + ref.current.removeChild(statusEl) // need to eject component instead of removing? + } + if (status.key === 'none') return { ...status, text: '' } // remove status + + let text = '' + let key = '' + if (typeof status.key === 'number') { + key = status.key + // eslint-disable-next-line @typescript-eslint/no-unused-vars + text = key + } else key = helper.checkSpecialChars(status.key) ? '' : status.key + + let thisType = '' + if (status.type === 'error') { + thisType = 'danger' // to use with bootstrap + // eslint-disable-next-line @typescript-eslint/no-unused-vars + } else thisType = helper.checkSpecialChars(status.type) ? '' : status.type! + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const title = helper.checkSpecialChars(status.title) ? '' : status.title + // ref.current.classList.add('remixui_icon') + return { title, type: thisType, key, text } +} + +export function iconBadgeReducer (state: BadgeStatus, action: IconBadgeReducerAction) { + const status = setIconStatus(action.type, action.payload.status, action.payload.ref) + if (action.type.length > 0) { + console.log(`from reducer of ${action.type} :`, { status }) + return status + } + return state +} diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconReducers.ts b/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconReducers.ts deleted file mode 100644 index 53b318d918..0000000000 --- a/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconReducers.ts +++ /dev/null @@ -1,49 +0,0 @@ -export const defaultState: { - key: string | number - title: string - type: string - text: string - profileName: string - errorStatus: () => void -} = { key: '', title: '', type: '', text: '', profileName: '', errorStatus: () => {} } - -export type IconStatusActionType = { - type: 'success' | 'warning' | 'error' | 'info' | '' - payload?: any -} - -/** status: { key: string | number, title: string, type: string } - * resolve a classes list for @arg key - * @param {String} key - * @param {String} type - */ -export function resolveClasses (key: string, type: string) { - let classes = 'remixui_status' - - switch (key) { - case 'succeed': - classes += ' fas fa-check-circle text-' + type + ' ' + 'remixui_statusCheck' - break - case 'edited': - classes += ' fas fa-sync text-' + type + ' ' + 'remixui_statusCheck' - break - case 'loading': - classes += ' fas fa-spinner text-' + type + ' ' + 'remixui_statusCheck' - break - case 'failed': - classes += ' fas fa-exclamation-triangle text-' + type + ' ' + 'remixui_statusCheck' - break - default: { - classes += ' badge badge-pill badge-' + type - } - } - return classes -} - -export function iconStatusReducer (state, action: IconStatusActionType) { - const { type, payload } = action - if (type === 'success') { - - } - return defaultState -} diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css index 536b67ea90..6e1e71a5f3 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css +++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css @@ -1,8 +1,7 @@ .remixui_homeIcon { - display: block; + /* display: block; */ width: 42px; height: 42px; - margin-bottom: 20px; cursor: pointer; } .remixui_homeIcon svg path { @@ -40,9 +39,9 @@ bottom: 0; } .remixui_status { - position: absolute; + /* position: relative; bottom: 0; - right: 0; + right: 0; */ } .remixui_statusCheck { font-size: 1.2em; @@ -83,7 +82,8 @@ -ms-overflow-style: none; } .remixui_scrollable-container { - height: 550px; + flex-basis: 510px; + flex-grow: 2; /* border-bottom: 3px solid #3f4455; */ } .remixui_scrollbar::-webkit-scrollbar { /* Chrome, Safari and other Webkit browsers*/ @@ -100,12 +100,12 @@ } .remixui_settings { - height: 30px; + flex-basis: 50px; } .remixui_requiredSection { - min-height: 180px; - max-height: 330px; + flex-basis: 180px; + flex-grow: 1; } #menuitems { diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx index d813a69c4f..3496f468d9 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx +++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx @@ -95,10 +95,10 @@ export function RemixUiVerticalIconsPanel ({ return (
-
+
+
scrollableRef.current.clientHeight ? 'remixui_default-icons-container remixui_requiredSection' : 'remixui_requiredSection'}> -