jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

(server) Make Multiple Selector Collapsable

Browse Source 
Summary: per title

Reviewed By: mweststrate

Differential Revision: D21214900

fbshipit-source-id: 61e565391ca7d5796bb22c9ece76ea5dabe97be7
This commit is contained in:
Chaiwat Ekkaewnumchai
2020-05-07 03:37:49 -07:00
committed by Facebook GitHub Bot
parent 83a2203751
commit a6b69f7939
1 changed files with 27 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
desktop/plugins/layout/MultipleSelectionSection.tsx
View File

@@ -13,6 +13,7 @@ import {
Element, Element,
ElementID, ElementID,
ElementsInspector, ElementsInspector,
Glyph,
colors, colors,
styled, styled,
} from 'flipper'; } from 'flipper';
@@ -38,6 +39,12 @@ const MultipleSelectorSectionTitle = styled(FlexBox)({
textAlign: 'center', textAlign: 'center',
}); });
const Chevron = styled(Glyph)({
marginRight: 4,
marginLeft: -2,
marginBottom: 1,
});
type MultipleSelectorSectionProps = { type MultipleSelectorSectionProps = {
initialSelectedElement: ElementID | null | undefined; initialSelectedElement: ElementID | null | undefined;
elements: {[id: string]: Element}; elements: {[id: string]: Element};
@@ -59,23 +66,30 @@ const MultipleSelectorSection: React.FC<MultipleSelectorSectionProps> = memo(
const [selectedId, setSelectedId] = useState<ElementID | null | undefined>( const [selectedId, setSelectedId] = useState<ElementID | null | undefined>(
initialSelectedElement, initialSelectedElement,
); );
const [collapsed, setCollapsed] = useState(false);
return ( return (
<MultipleSelectorSectionContainer> <MultipleSelectorSectionContainer>
<MultipleSelectorSectionTitle> <MultipleSelectorSectionTitle
onClick={() => {
setCollapsed(!collapsed);
}}>
<Chevron name={collapsed ? 'chevron-up' : 'chevron-down'} size={12} />
Multiple elements found at the target coordinates Multiple elements found at the target coordinates
</MultipleSelectorSectionTitle> </MultipleSelectorSectionTitle>
<ElementsInspector {!collapsed && (
onElementSelected={(key: string) => { <ElementsInspector
setSelectedId(key); onElementSelected={(key: string) => {
onElementSelected(key); setSelectedId(key);
}} onElementSelected(key);
onElementHovered={onElementHovered} }}
onElementExpanded={() => {}} onElementHovered={onElementHovered}
onValueChanged={null} onElementExpanded={() => {}}
root={null} onValueChanged={null}
selected={selectedId} root={null}
elements={elements} selected={selectedId}
/> elements={elements}
/>
)}
</MultipleSelectorSectionContainer> </MultipleSelectorSectionContainer>
); );
}, },