From 72075f5b88b5058c70d7b2daae72148e5a5a7ebb Mon Sep 17 00:00:00 2001 From: Joseph Izang Date: Wed, 3 Nov 2021 09:32:41 +0100 Subject: [PATCH] working on icons reducers --- .../src/lib/components/Icon.tsx | 75 ++++++------------- .../src/lib/reducers/iconReducers.ts | 43 ++++++++++- 2 files changed, 62 insertions(+), 56 deletions(-) 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 1116d0bdc4..25adcdf57c 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 @@ -3,9 +3,10 @@ // eslint-disable-next-line @typescript-eslint/no-unused-vars import VerticalIconsContextMenu from '../vertical-icons-context-menu' // eslint-disable-next-line @typescript-eslint/no-unused-vars -import React, { Fragment, SyntheticEvent, useEffect, useRef, useState } from 'react' +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' interface IconProps { verticalIconPlugin: VerticalIcons @@ -32,7 +33,7 @@ function Icon ({ const { tooltip, displayName, name, kind, icon, documentation } = profile const [title] = useState(() => { const temp = tooltip || displayName || name - return temp.replace(/^\w/, word => word.toUpperCase()) + return temp.replace(/^\w/, (word: string) => word.toUpperCase()) }) const [links, setLinks] = useState<{ Documentation: string, CanDeactivate: boolean }>( {} as { Documentation: string, CanDeactivate: boolean } @@ -44,7 +45,8 @@ function Icon ({ const [showContext, setShowContext] = useState(false) const [canDeactivate] = useState(false) const iconRef = useRef(null) - const iconStatusValues = { title: '', key: '', type: '', text: '' } + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const [status, dispatchIconStatus] = useReducer(iconStatusReducer, defaultState) const handleContextMenu = (e: SyntheticEvent & PointerEvent) => { const deactivationState = verticalIconPlugin.appManager @@ -63,45 +65,19 @@ function Icon ({ setShowContext(false) } - /** - * resolve a classes list for @arg key - * @param {String} key - * @param {String} 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 - } - /** * 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: { key: string | number, title: string, type: string }) { + function setIconStatus (name: string) { if (!iconRef.current) return const statusEl = iconRef.current.querySelector('i') if (statusEl) { - iconRef.current.removeChild(statusEl) + iconRef.current.removeChild(statusEl) // need to eject component instead of removing? } if (status.key === 'none') return // remove status @@ -120,7 +96,7 @@ function Icon ({ const icon = document.createElement('i') icon.title = title - icon.className = resolveClasses(key, type) + // icon.className = resolveClasses(key, type) icon.ariaHidden = 'true' const innerText = document.createTextNode(text) icon.appendChild(innerText) @@ -128,21 +104,21 @@ function Icon ({ iconRef.current.classList.add('remixui_icon') } - function listenOnStatus (profile: any) { - function setErrorStatus (status: any) { - 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, status) + 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()) } - verticalIconPlugin.iconStatus[profile.name] = setErrorStatus - verticalIconPlugin.on(profile.name, 'statusChanged', verticalIconPlugin.iconStatus[profile.name]) + setIconStatus(profile.name) + } + function listenOnStatus () { + // verticalIconPlugin.iconStatus[profile.name] = setErrorStatus // { profileName: profile.name, errorStatus: setErrorStatus } ? + verticalIconPlugin.on(profile.name, 'statusChanged', dispatchIconStatus({ type: 'success', payload: { } })) } useEffect(() => { - listenOnStatus(profile) + listenOnStatus() return () => { console.log('just listened for status change ', { profile }) addEventListener('statusChanged', (e) => { @@ -180,15 +156,6 @@ function Icon ({ > {name} - {verticalIconPlugin.iconStatus && Object.keys(verticalIconPlugin.iconStatus).length !== null ? ( - - ) : null } {showContext ? ( void +} = { key: '', title: '', type: '', text: '', profileName: '', errorStatus: () => {} } -function iconStatusReducer (state, action: any) { +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 + */ +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 }