Add support for warnings from client

Summary:
THis is useful for bloks where fliper needs to be open before hand,

We might also be able to replace some of the annoying notification bubles with these sleeker inline warnings

Reviewed By: lblasa

Differential Revision: D49454977

fbshipit-source-id: fca4fbd3258a68d93c75655cfff247adfa3e6bb2
This commit is contained in:
Luke De Feo
2023-09-20 05:43:49 -07:00
committed by Facebook GitHub Bot
parent a35708989c
commit a033f96725
2 changed files with 11 additions and 4 deletions

View File

@@ -187,7 +187,8 @@ export type Tag =
| 'iOS' | 'iOS'
| 'BloksBoundTree' | 'BloksBoundTree'
| 'BloksDerived' | 'BloksDerived'
| 'TreeRoot'; | 'TreeRoot'
| 'Warning';
export type Inspectable = export type Inspectable =
| InspectableObject | InspectableObject

View File

@@ -10,6 +10,7 @@
import {Id, ClientNode} from '../../ClientTypes'; import {Id, ClientNode} from '../../ClientTypes';
import {OnSelectNode} from '../../DesktopTypes'; import {OnSelectNode} from '../../DesktopTypes';
import React, { import React, {
CSSProperties,
Ref, Ref,
RefObject, RefObject,
useEffect, useEffect,
@@ -35,7 +36,7 @@ import {useVirtualizer} from '@tanstack/react-virtual';
import {ContextMenu} from './ContextMenu'; import {ContextMenu} from './ContextMenu';
import {MillisSinceEpoch, useKeyboardControls} from './useKeyboardControls'; import {MillisSinceEpoch, useKeyboardControls} from './useKeyboardControls';
import {toTreeList} from './toTreeList'; import {toTreeList} from './toTreeList';
import {CaretDownOutlined} from '@ant-design/icons'; import {CaretDownOutlined, WarningOutlined} from '@ant-design/icons';
const {Text} = Typography; const {Text} = Typography;
@@ -584,6 +585,10 @@ function nodeIcon(node: TreeNode) {
return <NodeIconImage src="facebook/bloks-logo-orange.png" />; return <NodeIconImage src="facebook/bloks-logo-orange.png" />;
} else if (node.tags.includes('BloksDerived')) { } else if (node.tags.includes('BloksDerived')) {
return <NodeIconImage src="facebook/bloks-logo-blue.png" />; return <NodeIconImage src="facebook/bloks-logo-blue.png" />;
} else if (node.tags.includes('Warning')) {
return (
<WarningOutlined style={{...nodeiconStyle, color: theme.errorColor}} />
);
} else { } else {
return ( return (
<div <div
@@ -599,12 +604,13 @@ function nodeIcon(node: TreeNode) {
const NodeIconSize = 14; const NodeIconSize = 14;
const IconRightMargin = '4px'; const IconRightMargin = '4px';
const NodeIconImage = styled.img({ const nodeiconStyle: CSSProperties = {
height: NodeIconSize, height: NodeIconSize,
width: NodeIconSize, width: NodeIconSize,
marginRight: IconRightMargin, marginRight: IconRightMargin,
userSelect: 'none', userSelect: 'none',
}); };
const NodeIconImage = styled.img({...nodeiconStyle});
const renderDepthOffset = 12; const renderDepthOffset = 12;