69de9bc92d
Summary: This diff moves the core of ElementsInspector to flipper-plugin and decouples it from legacy design system and Electron, without any significant improvements or API changes yet, which will follow later. Colors and docs will be added later in this stack. Reviewed By: passy Differential Revision: D27660300 fbshipit-source-id: 96abfa3b3174fa852cf04ae119c23c3d629fee74
97 lines
2.4 KiB
TypeScript
97 lines
2.4 KiB
TypeScript
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @format
|
|
*/
|
|
|
|
import {
|
|
FlexColumn,
|
|
FlexBox,
|
|
Element,
|
|
ElementID,
|
|
ElementsInspector,
|
|
Glyph,
|
|
colors,
|
|
styled,
|
|
} from 'flipper';
|
|
import React, {memo, useState} from 'react';
|
|
|
|
const MultipleSelectorSectionContainer = styled(FlexColumn)({
|
|
maxHeight: 100,
|
|
});
|
|
|
|
const MultipleSelectorSectionTitle = styled(FlexBox)({
|
|
cursor: 'pointer',
|
|
backgroundColor: '#f6f7f9',
|
|
padding: '2px',
|
|
paddingLeft: '9px',
|
|
width: '325px',
|
|
height: '20px',
|
|
fontWeight: 500,
|
|
boxShadow: '2px 2px 2px #ccc',
|
|
border: `1px solid ${colors.light20}`,
|
|
borderTopLeftRadius: '4px',
|
|
borderTopRightRadius: '4px',
|
|
textAlign: 'center',
|
|
});
|
|
|
|
const Chevron = styled(Glyph)({
|
|
marginRight: 4,
|
|
marginLeft: -2,
|
|
marginBottom: 1,
|
|
});
|
|
|
|
type MultipleSelectorSectionProps = {
|
|
initialSelectedElement: ElementID | null | undefined;
|
|
elements: {[id: string]: Element};
|
|
onElementSelected: (key: string) => void;
|
|
onElementHovered:
|
|
| ((key: string | null | undefined) => any)
|
|
| null
|
|
| undefined;
|
|
};
|
|
|
|
const MultipleSelectorSection: React.FC<MultipleSelectorSectionProps> = memo(
|
|
(props: MultipleSelectorSectionProps) => {
|
|
const {
|
|
initialSelectedElement,
|
|
elements,
|
|
onElementSelected,
|
|
onElementHovered,
|
|
} = props;
|
|
const [selectedId, setSelectedId] = useState<ElementID | null | undefined>(
|
|
initialSelectedElement,
|
|
);
|
|
const [collapsed, setCollapsed] = useState(false);
|
|
return (
|
|
<MultipleSelectorSectionContainer>
|
|
<MultipleSelectorSectionTitle
|
|
onClick={() => {
|
|
setCollapsed(!collapsed);
|
|
}}>
|
|
<Chevron name={collapsed ? 'chevron-up' : 'chevron-down'} size={12} />
|
|
Multiple elements found at the target coordinates
|
|
</MultipleSelectorSectionTitle>
|
|
{!collapsed && (
|
|
<ElementsInspector
|
|
onElementSelected={(key: string) => {
|
|
setSelectedId(key);
|
|
onElementSelected(key);
|
|
}}
|
|
onElementHovered={onElementHovered}
|
|
onElementExpanded={() => {}}
|
|
root={null}
|
|
selected={selectedId}
|
|
elements={elements}
|
|
/>
|
|
)}
|
|
</MultipleSelectorSectionContainer>
|
|
);
|
|
},
|
|
);
|
|
|
|
export default MultipleSelectorSection;
|