mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

fix icon badge

Browse Source
pull/1861/head
Joseph Izang 3 years ago
parent 43ecad665e
commit ef75e15313
5 changed files with 65 additions and 66 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx
  2. 26
      libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
  3. 44
      libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx
  4. 30
      libs/remix-ui/vertical-icons-panel/src/lib/components/Solidity.tsx
  5. 29
      libs/remix-ui/vertical-icons-panel/src/lib/components/SolidityStaticAnalysis.tsx

2
libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx
Unescape View File

@ -7,7 +7,7 @@ import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeR
import { BadgeStatus, IconProfile, IconStatus } from './Icon' import { BadgeStatus, IconProfile, IconStatus } from './Icon'
interface BadgeProps { interface BadgeProps {
badgeStatus: BadgeStatus badgeStatus?: BadgeStatus
} }
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef

26
libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx
Unescape View File

@ -3,9 +3,10 @@
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
import VerticalIconsContextMenu from '../vertical-icons-context-menu' import VerticalIconsContextMenu from '../vertical-icons-context-menu'
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
import React, { Fragment, SyntheticEvent, useEffect, useReducer, useRef, useState } from 'react' import React, { Dispatch, Fragment, SyntheticEvent, useEffect, useReducer, useRef, useState } from 'react'
import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel' import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
import Badge from './Badge' import Badge from './Badge'
import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
interface IconProps { interface IconProps {
verticalIconPlugin: VerticalIcons verticalIconPlugin: VerticalIcons
@ -13,7 +14,6 @@ import Badge from './Badge'
contextMenuAction: (evt: any, profileName: string, documentation: string) => void contextMenuAction: (evt: any, profileName: string, documentation: string) => void
addActive: (profileName: string) => void addActive: (profileName: string) => void
removeActive: () => void removeActive: () => void
badgeStatus?: BadgeStatus
} }
export interface IconStatus { export interface IconStatus {
@ -41,14 +41,21 @@ export interface IconProfile {
tooltip?: string tooltip?: string
} }
const initialState = {
text: '',
key: '',
title: '',
type: '',
pluginName: ''
}
function Icon ({ function Icon ({
profile, profile,
verticalIconPlugin, verticalIconPlugin,
contextMenuAction, contextMenuAction,
addActive, addActive,
removeActive, removeActive
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
badgeStatus
}: IconProps) { }: IconProps) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
const { tooltip, displayName, name, kind, icon, documentation } = profile const { tooltip, displayName, name, kind, icon, documentation } = profile
@ -59,6 +66,7 @@ function Icon ({
const [links, setLinks] = useState<{ Documentation: string, CanDeactivate: boolean }>( const [links, setLinks] = useState<{ Documentation: string, CanDeactivate: boolean }>(
{} as { Documentation: string, CanDeactivate: boolean } {} as { Documentation: string, CanDeactivate: boolean }
) )
const [badgeStatus, dispatchStatusUpdate] = useReducer(iconBadgeReducer, initialState)
// @ts-ignore // @ts-ignore
const [pageX, setPageX] = useState<number>(null) const [pageX, setPageX] = useState<number>(null)
// @ts-ignore // @ts-ignore
@ -85,6 +93,14 @@ function Icon ({
setShowContext(false) setShowContext(false)
} }
useEffect(() => {
verticalIconPlugin.on(name, 'statusChanged', (iconStatus: IconStatus) => {
iconStatus.pluginName = name
const action: IconBadgeReducerAction = { type: name, payload: { status: iconStatus, verticalIconPlugin: verticalIconPlugin } }
dispatchStatusUpdate(action)
})
}, [])
return ( return (
<Fragment> <Fragment>
<div <div
@ -114,7 +130,7 @@ function Icon ({
<img className="remixui_image" src={icon} alt={name} /> <img className="remixui_image" src={icon} alt={name} />
{ badgeStatus && badgeStatus.pluginName === name ? ( { badgeStatus && badgeStatus.pluginName === name ? (
<Badge <Badge
badgeStatus={badgeStatus!} badgeStatus={badgeStatus}
/>) : null } />) : null }
</div> </div>
{showContext ? ( {showContext ? (

44
libs/remix-ui/vertical-icons-panel/src/lib/components/OtherIcons.tsx
Unescape View File

@ -19,30 +19,29 @@ interface OtherIconsProps {
removeActive: () => void removeActive: () => void
} }
const initialState = { // const initialState = {
text: '', // text: '',
key: '', // key: '',
title: '', // title: '',
type: '', // type: '',
pluginName: '' // pluginName: ''
} // }
function OtherIcons ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: OtherIconsProps) { function OtherIcons ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: OtherIconsProps) {
const [badgeStatus, dispatchStatusUpdate] = useReducer(iconBadgeReducer, initialState) // useEffect(() => {
// Object.keys(verticalIconsPlugin.targetProfileForChange)
useEffect(() => { // .filter(customFilter)
Object.keys(verticalIconsPlugin.targetProfileForChange) // .forEach(p =>
.filter(customFilter) // verticalIconsPlugin.on(verticalIconsPlugin.targetProfileForChange[p].name, 'statusChanged', (iconStatus: IconStatus) => {
.forEach(p => // iconStatus.pluginName = verticalIconsPlugin.targetProfileForChange[p].name
verticalIconsPlugin.on(verticalIconsPlugin.targetProfileForChange[p].name, 'statusChanged', (iconStatus: IconStatus) => { // const action: IconBadgeReducerAction = {
iconStatus.pluginName = verticalIconsPlugin.targetProfileForChange[p].name // type: verticalIconsPlugin.targetProfileForChange[p].name,
const action: IconBadgeReducerAction = { // payload: { status: iconStatus, verticalIconPlugin: verticalIconsPlugin }
type: verticalIconsPlugin.targetProfileForChange[p].name, // }
payload: { status: iconStatus, verticalIconPlugin: verticalIconsPlugin } // console.log('check the event payload', { iconStatus })
} // dispatchStatusUpdate(action)
dispatchStatusUpdate(action) // }))
})) // }, [verticalIconsPlugin.targetProfileForChange, Object.keys(verticalIconsPlugin.targetProfileForChange).length])
}, [verticalIconsPlugin.targetProfileForChange, Object.keys(verticalIconsPlugin.targetProfileForChange).length])
return ( return (
<div id="otherIcons"> <div id="otherIcons">
{ {
@ -58,7 +57,6 @@ function OtherIcons ({ verticalIconsPlugin, itemContextAction, addActive, remove
key={ key={
verticalIconsPlugin.targetProfileForChange[p].displayName verticalIconsPlugin.targetProfileForChange[p].displayName
} }
badgeStatus={badgeStatus}
/> />
))} ))}
</div> </div>

30
libs/remix-ui/vertical-icons-panel/src/lib/components/Solidity.tsx
Unescape View File

@ -1,9 +1,8 @@
import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel' import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
// eslint-disable-next-line no-use-before-define // eslint-disable-next-line no-use-before-define
import React, { Fragment, useEffect, useReducer } from 'react' import { Fragment } from 'react'
import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
// import Badge from './Badge' // import Badge from './Badge'
import Icon, { IconStatus } from './Icon' import Icon from './Icon'
interface SolidityProps { interface SolidityProps {
verticalIconsPlugin: VerticalIcons verticalIconsPlugin: VerticalIcons
@ -11,23 +10,19 @@ interface SolidityProps {
addActive: (name: string) => void addActive: (name: string) => void
removeActive: () => void removeActive: () => void
} }
const initialState = {
text: '', // const init = [initialState]
key: '',
title: '',
type: ''
}
function Solidity ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: SolidityProps) { function Solidity ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: SolidityProps) {
const [badgeStatus, dispatchStatusUpdate] = useReducer(iconBadgeReducer, initialState) // const [badgeStatus, dispatchStatusUpdate] = useReducer(iconBadgeReducer, init)
useEffect(() => { // useEffect(() => {
verticalIconsPlugin.on('solidity', 'statusChanged', (iconStatus: IconStatus) => { // verticalIconsPlugin.on('solidity', 'statusChanged', (iconStatus: IconStatus) => {
iconStatus.pluginName = 'solidity' // iconStatus.pluginName = 'solidity'
const action: IconBadgeReducerAction = { type: 'solidity', payload: { status: iconStatus, verticalIconPlugin: verticalIconsPlugin } } // const action: IconBadgeReducerAction = { type: 'solidity', payload: { status: iconStatus, verticalIconPlugin: verticalIconsPlugin } }
dispatchStatusUpdate(action) // dispatchStatusUpdate(action)
}) // })
}, []) // }, [])
return ( return (
<Fragment> <Fragment>
{verticalIconsPlugin.targetProfileForChange && {verticalIconsPlugin.targetProfileForChange &&
@ -47,7 +42,6 @@ function Solidity ({ verticalIconsPlugin, itemContextAction, addActive, removeAc
key={ key={
verticalIconsPlugin.targetProfileForChange[p].displayName verticalIconsPlugin.targetProfileForChange[p].displayName
} }
badgeStatus={badgeStatus}
/> />
</div> </div>
)) ))

29
libs/remix-ui/vertical-icons-panel/src/lib/components/SolidityStaticAnalysis.tsx
Unescape View File

@ -1,9 +1,8 @@
import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel' import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
// eslint-disable-next-line no-use-before-define // eslint-disable-next-line no-use-before-define
import React, { Fragment, useEffect, useReducer } from 'react' import { Fragment } from 'react'
import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
// import Badge from './Badge' // import Badge from './Badge'
import Icon, { IconStatus } from './Icon' import Icon from './Icon'
interface SolidityStaticAnalysisProps { interface SolidityStaticAnalysisProps {
verticalIconsPlugin: VerticalIcons verticalIconsPlugin: VerticalIcons
@ -12,22 +11,15 @@ interface SolidityStaticAnalysisProps {
removeActive: () => void removeActive: () => void
} }
const initialState = {
text: '',
key: '',
title: '',
type: ''
}
function SolidityStaticAnalysis ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: SolidityStaticAnalysisProps) { function SolidityStaticAnalysis ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: SolidityStaticAnalysisProps) {
const [badgeStatus, dispatchStatusUpdate] = useReducer(iconBadgeReducer, initialState) // const [badgeStatus, dispatchStatusUpdate] = useReducer(iconBadgeReducer, initialState)
useEffect(() => { // useEffect(() => {
verticalIconsPlugin.on('solidityStaticAnalysis', 'statusChanged', (iconStatus: IconStatus) => { // verticalIconsPlugin.on('solidityStaticAnalysis', 'statusChanged', (iconStatus: IconStatus) => {
iconStatus.pluginName = 'solidityStaticAnalysis' // iconStatus.pluginName = 'solidityStaticAnalysis'
const action: IconBadgeReducerAction = { type: 'solidityStaticAnalysis', payload: { status: iconStatus, verticalIconPlugin: verticalIconsPlugin } } // const action: IconBadgeReducerAction = { type: 'solidityStaticAnalysis', payload: { status: iconStatus, verticalIconPlugin: verticalIconsPlugin } }
dispatchStatusUpdate(action) // dispatchStatusUpdate(action)
}) // })
}, []) // }, [])
return ( return (
<Fragment> <Fragment>
{verticalIconsPlugin.targetProfileForChange && {verticalIconsPlugin.targetProfileForChange &&
@ -47,7 +39,6 @@ function SolidityStaticAnalysis ({ verticalIconsPlugin, itemContextAction, addAc
key={ key={
verticalIconsPlugin.targetProfileForChange[p].displayName verticalIconsPlugin.targetProfileForChange[p].displayName
} }
badgeStatus={badgeStatus}
/> />
</div> </div>
)) ))

Write Preview
Loading…
Cancel
Save