Joseph Izang
3 years ago
parent
74854070d5
commit
10998817ba
@ -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<any> |
||||
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 ( |
||||
<i |
||||
title={badgeStatus.title} |
||||
className={`${resolveClasses(badgeStatus.key, badgeStatus.type!)} remixui_status`} |
||||
aria-hidden="true" |
||||
> |
||||
{badgeStatus.text} |
||||
</i> |
||||
) |
||||
} |
||||
|
||||
export default Badge |
||||
@ -0,0 +1,60 @@ |
||||
/* eslint-disable @typescript-eslint/no-unused-vars */ |
||||
import helper from 'apps/remix-ide/src/lib/helper' |
||||
import { BadgeStatus, IconStatus } from '../components/Icon' |
||||
import React from 'react' |
||||
|
||||
export type IconBadgeReducerAction = { |
||||
readonly type: string |
||||
readonly payload: any |
||||
} |
||||
|
||||
// const fn = (status: IconStatus) => {
|
||||
// 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<any>) { |
||||
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 |
||||
} |
||||
@ -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 |
||||
} |
||||
Loading…
Reference in new issue