Simple antd types for each inspectable type
Summary: Replace draft inspectors with read-only components. This is a first step into having a richer UI. At the moment, these are read-only components but will likely be extended in the future as to allow editing of values. Reviewed By: LukeDefeo Differential Revision: D40345016 fbshipit-source-id: a6aef5861474b4aa8353c00ef257ab17b4cff00e
This commit is contained in:
Lorenzo Blasa
committed by
Facebook GitHub Bot
Facebook GitHub Bot
parent
9721993576
commit
bb3b1cecef
@@ -8,90 +8,239 @@
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import {Color, Inspectable, InspectableObject, UINode} from '../../../types';
|
||||
import {Panel} from 'flipper-plugin';
|
||||
import {Inspectable, InspectableObject, UINode} from '../../../types';
|
||||
import {DataInspector, Panel, styled} from 'flipper-plugin';
|
||||
import {Checkbox, Col, Row} from 'antd';
|
||||
import {displayableName} from '../utilities/displayableName';
|
||||
import ColorInspector from './ColorInspector';
|
||||
import SizeInspector from './SizeInspector';
|
||||
import {theme} from 'flipper-plugin';
|
||||
import SpaceBoxInspector from './SpaceBoxInspector';
|
||||
import BoundsInspector from './BoundsInspector';
|
||||
import Coordinate3DInspector from './Coordinate3DInspector';
|
||||
import CoordinateInspector from './CoordinateInspector';
|
||||
|
||||
type Props = {
|
||||
node: UINode;
|
||||
const NumberValue = styled.span({
|
||||
color: theme.semanticColors.numberValue,
|
||||
display: 'flex',
|
||||
});
|
||||
|
||||
const TextValue = styled.span({
|
||||
color: theme.semanticColors.stringValue,
|
||||
display: 'flex',
|
||||
});
|
||||
|
||||
const EnumValue = styled.span({
|
||||
color: theme.semanticColors.stringValue,
|
||||
fontSize: theme.fontSize.small,
|
||||
margin: 'auto',
|
||||
});
|
||||
|
||||
const ContainerStyle = {
|
||||
marginTop: 4,
|
||||
marginBottom: 4,
|
||||
borderStyle: 'solid',
|
||||
borderColor: theme.dividerColor,
|
||||
borderWidth: '0 0 1px 0',
|
||||
};
|
||||
|
||||
const TextAttributeInspector: React.FC<{name: string; value: string}> = ({
|
||||
name,
|
||||
value,
|
||||
}) => {
|
||||
return (
|
||||
<div>
|
||||
{name}: {value}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
const ObjectContainer = styled.div({
|
||||
borderLeftWidth: 5,
|
||||
borderLeftColor: 'lightgray',
|
||||
borderLeftStyle: 'solid',
|
||||
});
|
||||
|
||||
const NumberAttributeInspector: React.FC<{name: string; value: number}> = ({
|
||||
name,
|
||||
value,
|
||||
}) => {
|
||||
return (
|
||||
<div>
|
||||
{name}: {value}
|
||||
</div>
|
||||
);
|
||||
const CenterContainer = styled.div({
|
||||
margin: 'auto',
|
||||
});
|
||||
type NamedAttributeInspectorProps = {
|
||||
name: string;
|
||||
};
|
||||
|
||||
const ColorAttributeInspector: React.FC<{name: string; value: Color}> = ({
|
||||
const NamedAttributeInspector: React.FC<NamedAttributeInspectorProps> = ({
|
||||
name,
|
||||
value,
|
||||
children,
|
||||
}) => {
|
||||
return (
|
||||
<div>
|
||||
{name}: {JSON.stringify(value)}
|
||||
</div>
|
||||
<Row style={ContainerStyle}>
|
||||
<Col span={8} style={{margin: 'auto'}}>
|
||||
{name}
|
||||
</Col>
|
||||
<Col span={16}>
|
||||
<CenterContainer>{children}</CenterContainer>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
const ObjectAttributeInspector: React.FC<{
|
||||
name: string;
|
||||
value: Record<string, Inspectable>;
|
||||
}> = ({name, value}) => {
|
||||
level: number;
|
||||
}> = ({name, value, level}) => {
|
||||
return (
|
||||
<div>
|
||||
{name}: {JSON.stringify(value)}
|
||||
<div style={ContainerStyle}>
|
||||
{name}
|
||||
{Object.keys(value).map(function (key, _) {
|
||||
return (
|
||||
<ObjectContainer
|
||||
key={key}
|
||||
style={{
|
||||
paddingLeft: level,
|
||||
}}>
|
||||
{create(key, value[key], level + 2)}
|
||||
</ObjectContainer>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
function create(key: string, inspectable: Inspectable) {
|
||||
function create(key: string, inspectable: Inspectable, level: number = 2) {
|
||||
switch (inspectable.type) {
|
||||
case 'boolean':
|
||||
return (
|
||||
<NamedAttributeInspector name={displayableName(key)}>
|
||||
<Checkbox checked={inspectable.value} disabled />
|
||||
</NamedAttributeInspector>
|
||||
);
|
||||
case 'enum':
|
||||
return (
|
||||
<NamedAttributeInspector name={displayableName(key)}>
|
||||
<EnumValue>{inspectable.value.value}</EnumValue>
|
||||
</NamedAttributeInspector>
|
||||
);
|
||||
case 'text':
|
||||
return <TextAttributeInspector name={key} value={inspectable.value} />;
|
||||
return (
|
||||
<NamedAttributeInspector name={displayableName(key)}>
|
||||
<TextValue>{inspectable.value}</TextValue>
|
||||
</NamedAttributeInspector>
|
||||
);
|
||||
case 'number':
|
||||
return <NumberAttributeInspector name={key} value={inspectable.value} />;
|
||||
return (
|
||||
<NamedAttributeInspector name={displayableName(key)}>
|
||||
<NumberValue>{inspectable.value}</NumberValue>
|
||||
</NamedAttributeInspector>
|
||||
);
|
||||
case 'color':
|
||||
return <ColorAttributeInspector name={key} value={inspectable.value} />;
|
||||
return (
|
||||
<NamedAttributeInspector name={displayableName(key)}>
|
||||
<ColorInspector color={inspectable.value} />
|
||||
</NamedAttributeInspector>
|
||||
);
|
||||
case 'size':
|
||||
return (
|
||||
<NamedAttributeInspector name={displayableName(key)}>
|
||||
<SizeInspector value={inspectable.value} />
|
||||
</NamedAttributeInspector>
|
||||
);
|
||||
case 'bounds':
|
||||
return (
|
||||
<NamedAttributeInspector name={displayableName(key)}>
|
||||
<BoundsInspector value={inspectable.value} />
|
||||
</NamedAttributeInspector>
|
||||
);
|
||||
case 'coordinate':
|
||||
return (
|
||||
<NamedAttributeInspector name={displayableName(key)}>
|
||||
<CoordinateInspector value={inspectable.value} />
|
||||
</NamedAttributeInspector>
|
||||
);
|
||||
case 'coordinate3d':
|
||||
return (
|
||||
<NamedAttributeInspector name={displayableName(key)}>
|
||||
<Coordinate3DInspector value={inspectable.value} />
|
||||
</NamedAttributeInspector>
|
||||
);
|
||||
case 'space':
|
||||
return (
|
||||
<NamedAttributeInspector name={displayableName(key)}>
|
||||
<SpaceBoxInspector value={inspectable.value} />
|
||||
</NamedAttributeInspector>
|
||||
);
|
||||
case 'object':
|
||||
return <ObjectAttributeInspector name={key} value={inspectable.fields} />;
|
||||
return (
|
||||
<ObjectAttributeInspector
|
||||
name={displayableName(key)}
|
||||
value={inspectable.fields}
|
||||
level={level}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return;
|
||||
return (
|
||||
<NamedAttributeInspector name={displayableName(key)}>
|
||||
<TextValue>{JSON.stringify(inspectable)}</TextValue>
|
||||
</NamedAttributeInspector>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function createSection(name: string, inspectable: InspectableObject) {
|
||||
/**
|
||||
* Filter out those inspectables that affect sizing, positioning, and
|
||||
* overall layout of elements.
|
||||
*/
|
||||
const layoutFilter = new Set([
|
||||
'size',
|
||||
'padding',
|
||||
'margin',
|
||||
'bounds',
|
||||
'position',
|
||||
'globalPosition',
|
||||
'localVisibleRect',
|
||||
'rotation',
|
||||
'scale',
|
||||
'pivot',
|
||||
'layoutParams',
|
||||
'layoutDirection',
|
||||
'translation',
|
||||
'elevation',
|
||||
]);
|
||||
function createSection(
|
||||
mode: InspectorMode,
|
||||
name: string,
|
||||
inspectable: InspectableObject,
|
||||
) {
|
||||
const fields = Object.keys(inspectable.fields).filter(
|
||||
(key) =>
|
||||
(mode === 'attributes' && !layoutFilter.has(key)) ||
|
||||
(mode === 'layout' && layoutFilter.has(key)),
|
||||
);
|
||||
if (!fields || fields.length === 0) {
|
||||
return;
|
||||
}
|
||||
return (
|
||||
<Panel key={name} title={name}>
|
||||
{' '}
|
||||
{Object.keys(inspectable.fields).map(function (key, _) {
|
||||
{fields.map(function (key, _) {
|
||||
return create(key, inspectable.fields[key]);
|
||||
})}
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
|
||||
export const AttributesInspector: React.FC<Props> = ({node}) => {
|
||||
// TODO: add raw panel to inspect data as received.
|
||||
type InspectorMode = 'layout' | 'attributes';
|
||||
type Props = {
|
||||
node: UINode;
|
||||
mode: InspectorMode;
|
||||
rawDisplayEnabled?: boolean;
|
||||
};
|
||||
export const AttributesInspector: React.FC<Props> = ({
|
||||
node,
|
||||
mode,
|
||||
rawDisplayEnabled = false,
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
{Object.keys(node.attributes).map(function (key, _) {
|
||||
return createSection(key, node.attributes[key] as InspectableObject);
|
||||
return createSection(
|
||||
mode,
|
||||
key,
|
||||
node.attributes[key] as InspectableObject,
|
||||
);
|
||||
})}
|
||||
{rawDisplayEnabled ?? (
|
||||
<Panel key="Raw" title="Raw Data" collapsed>
|
||||
<DataInspector data={node.attributes} />
|
||||
</Panel>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,225 @@
|
||||
/**
|
||||
* Copyright (c) Meta Platforms, Inc. and 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 React from 'react';
|
||||
import {Bounds} from '../../../types';
|
||||
|
||||
type Props = {
|
||||
size?: number;
|
||||
strokeColor?: string;
|
||||
outerBoxColor?: string;
|
||||
innerBoxColor?: string;
|
||||
multiplier?: number;
|
||||
margin?: number;
|
||||
separator?: number;
|
||||
value: Bounds;
|
||||
};
|
||||
|
||||
const BoundsInspector: React.FC<Props> = ({
|
||||
size = 180,
|
||||
strokeColor = '#4A5967',
|
||||
outerBoxColor = '#F2F3F7',
|
||||
innerBoxColor = '#CCD1D9',
|
||||
multiplier = 0.4,
|
||||
margin = 4,
|
||||
separator = 10,
|
||||
value,
|
||||
}) => {
|
||||
const scale =
|
||||
Math.min(size / (value.width + value.x), size / (value.height + value.y)) *
|
||||
multiplier;
|
||||
|
||||
const width = value.width * scale;
|
||||
const height = value.height * scale;
|
||||
|
||||
const origin = size / 2;
|
||||
const originX = origin - width / 2;
|
||||
const originY = origin - height / 2;
|
||||
|
||||
const midX = originX + width / 2;
|
||||
const midY = originY + height / 2;
|
||||
|
||||
const lineStyle = {stroke: strokeColor, strokeWidth: '2'};
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
style={{border: '1', borderColor: innerBoxColor, borderStyle: 'solid'}}
|
||||
viewBox={'0 0 ' + size + ' ' + size}
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width={size} height={size} x={0} y={0} fill={outerBoxColor} />{' '}
|
||||
{/** outer-box */}
|
||||
<rect
|
||||
width={width}
|
||||
height={height}
|
||||
x={originX}
|
||||
y={originY}
|
||||
fill={innerBoxColor}
|
||||
/>{' '}
|
||||
{/** bounded-box */}
|
||||
<circle cx={originX} cy={midY} r="2" fill={strokeColor} /> {/** left */}
|
||||
<circle cx={midX} cy={originY} r="2" fill={strokeColor} /> {/** top */}
|
||||
<circle
|
||||
cx={originX}
|
||||
cy={originY + height}
|
||||
r="2"
|
||||
fill={strokeColor}
|
||||
/>{' '}
|
||||
{/** left-bottom */}
|
||||
<circle cx={originX + width} cy={originY} r="2" fill={strokeColor} />{' '}
|
||||
{/** right-top */}
|
||||
<circle
|
||||
cx={originX + width}
|
||||
cy={originY + height}
|
||||
r="2"
|
||||
fill={strokeColor}
|
||||
/>{' '}
|
||||
{/** right-bottom */}
|
||||
<text
|
||||
x={0}
|
||||
y={midY}
|
||||
dominant-baseline="middle"
|
||||
text-anchor="right"
|
||||
fill={strokeColor}>
|
||||
{value.x}
|
||||
</text>
|
||||
{/** x */}
|
||||
<line
|
||||
x1={separator * 2}
|
||||
y1={midY}
|
||||
x2={originX - separator}
|
||||
y2={midY}
|
||||
style={lineStyle}
|
||||
strokeDasharray="2,2"
|
||||
/>
|
||||
{/** left */}
|
||||
<line
|
||||
x1={separator * 2}
|
||||
y1={midY - margin}
|
||||
x2={separator * 2}
|
||||
y2={midY + margin}
|
||||
style={lineStyle}
|
||||
/>
|
||||
{/** bezel */}
|
||||
<line
|
||||
x1={originX - separator}
|
||||
y1={midY - margin}
|
||||
x2={originX - separator}
|
||||
y2={midY + margin}
|
||||
style={lineStyle}
|
||||
/>
|
||||
{/** bezel */}
|
||||
<text
|
||||
x={midX}
|
||||
y={originY + height + separator * 2}
|
||||
dominant-baseline="middle"
|
||||
text-anchor="middle"
|
||||
fill={strokeColor}>
|
||||
{value.width}
|
||||
</text>
|
||||
{/** width */}
|
||||
<line
|
||||
x1={originX}
|
||||
y1={originY + height + separator}
|
||||
x2={originX + width}
|
||||
y2={originY + height + separator}
|
||||
style={lineStyle}
|
||||
strokeDasharray="2,2"
|
||||
/>
|
||||
{/** bottom */}
|
||||
<line
|
||||
x1={originX}
|
||||
y1={originY + height + separator - margin}
|
||||
x2={originX}
|
||||
y2={originY + height + separator + margin}
|
||||
style={lineStyle}
|
||||
/>
|
||||
{/** bezel */}
|
||||
<line
|
||||
x1={originX + width}
|
||||
y1={originY + height + separator - margin}
|
||||
x2={originX + width}
|
||||
y2={originY + height + separator + margin}
|
||||
style={lineStyle}
|
||||
/>
|
||||
{/** bezel */}
|
||||
<text
|
||||
x={midX}
|
||||
y={separator}
|
||||
dominant-baseline="middle"
|
||||
text-anchor="middle"
|
||||
fill={strokeColor}>
|
||||
{value.y}
|
||||
</text>
|
||||
{/** y */}
|
||||
<line
|
||||
x1={midX}
|
||||
y1={separator * 2}
|
||||
x2={midX}
|
||||
y2={originY - separator}
|
||||
style={lineStyle}
|
||||
strokeDasharray="2,2"
|
||||
/>
|
||||
{/** top */}
|
||||
<line
|
||||
x1={midX - margin}
|
||||
y1={separator * 2}
|
||||
x2={midX + margin}
|
||||
y2={separator * 2}
|
||||
style={lineStyle}
|
||||
/>
|
||||
{/** bezel */}
|
||||
<line
|
||||
x1={midX - margin}
|
||||
y1={originY - separator}
|
||||
x2={midX + margin}
|
||||
y2={originY - separator}
|
||||
style={lineStyle}
|
||||
/>
|
||||
{/** bezel */}
|
||||
<text
|
||||
x={originX + width + separator * 3}
|
||||
y={midY}
|
||||
dominant-baseline="middle"
|
||||
text-anchor="middle"
|
||||
fill={strokeColor}>
|
||||
{value.height}
|
||||
</text>
|
||||
{/** height */}
|
||||
<line
|
||||
x1={originX + width + separator}
|
||||
y1={originY}
|
||||
x2={originX + width + separator}
|
||||
y2={originY + height}
|
||||
style={lineStyle}
|
||||
strokeDasharray="2,2"
|
||||
/>
|
||||
{/** right */}
|
||||
<line
|
||||
x1={originX + width + separator - margin}
|
||||
y1={originY}
|
||||
x2={originX + width + separator + margin}
|
||||
y2={originY}
|
||||
style={lineStyle}
|
||||
/>
|
||||
{/** bezel */}
|
||||
<line
|
||||
x1={originX + width + separator - margin}
|
||||
y1={originY + height}
|
||||
x2={originX + width + separator + margin}
|
||||
y2={originY + height}
|
||||
style={lineStyle}
|
||||
/>
|
||||
{/** bezel */}
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default BoundsInspector;
|
||||
@@ -0,0 +1,70 @@
|
||||
/**
|
||||
* Copyright (c) Meta Platforms, Inc. and 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 React from 'react';
|
||||
import {Popover} from 'antd';
|
||||
import {Color} from '../../../types';
|
||||
import {SketchPicker, RGBColor, ColorResult} from 'react-color';
|
||||
import {styled} from 'flipper-plugin';
|
||||
|
||||
type State = {
|
||||
color: RGBColor;
|
||||
};
|
||||
|
||||
const OuterColorButton = styled.div({
|
||||
padding: '5px',
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: '5px',
|
||||
boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
|
||||
display: 'inline-block',
|
||||
cursor: 'pointer',
|
||||
});
|
||||
|
||||
const InnerColorButton = styled.div({
|
||||
width: '36px',
|
||||
height: '14px',
|
||||
borderRadius: '2px',
|
||||
});
|
||||
|
||||
class ColorInspector extends React.Component<{color: Color}> {
|
||||
state: State = {
|
||||
color: this.props.color ?? {
|
||||
r: 255,
|
||||
g: 255,
|
||||
b: 255,
|
||||
a: 1,
|
||||
},
|
||||
};
|
||||
|
||||
handleChange = (_color: ColorResult) => {
|
||||
// No color changes to be applied at this stage.
|
||||
// this.setState({color: color.rgb});
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Popover
|
||||
placement="bottomRight"
|
||||
content={
|
||||
<SketchPicker color={this.state.color} onChange={this.handleChange} />
|
||||
}
|
||||
trigger="click">
|
||||
<OuterColorButton role="button" tabIndex={0}>
|
||||
<InnerColorButton
|
||||
style={{
|
||||
background: `rgba(${this.state.color.r}, ${this.state.color.g}, ${this.state.color.b}, ${this.state.color.a})`,
|
||||
}}
|
||||
/>
|
||||
</OuterColorButton>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ColorInspector;
|
||||
@@ -0,0 +1,68 @@
|
||||
/**
|
||||
* Copyright (c) Meta Platforms, Inc. and 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 React from 'react';
|
||||
import {Coordinate3D} from '../../../types';
|
||||
import {Col, Row} from 'antd';
|
||||
import {theme} from 'flipper-plugin';
|
||||
|
||||
type Props = {
|
||||
value: Coordinate3D;
|
||||
};
|
||||
|
||||
const Coordinate3DInspector: React.FC<Props> = ({value}) => {
|
||||
return (
|
||||
<>
|
||||
<Row
|
||||
style={{
|
||||
fontSize: theme.fontSize.small,
|
||||
paddingLeft: '20%',
|
||||
paddingRight: '20%',
|
||||
}}>
|
||||
<Col span={8} style={{textAlign: 'center'}}>
|
||||
x
|
||||
</Col>
|
||||
<Col span={8} style={{textAlign: 'center'}}>
|
||||
y
|
||||
</Col>
|
||||
<Col span={8} style={{textAlign: 'center'}}>
|
||||
z
|
||||
</Col>
|
||||
</Row>
|
||||
<Row style={{paddingLeft: '20%', paddingRight: '20%'}}>
|
||||
<Col
|
||||
span={8}
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
color: theme.semanticColors.numberValue,
|
||||
}}>
|
||||
{value.x}
|
||||
</Col>
|
||||
<Col
|
||||
span={8}
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
color: theme.semanticColors.numberValue,
|
||||
}}>
|
||||
{value.y}
|
||||
</Col>
|
||||
<Col
|
||||
span={8}
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
color: theme.semanticColors.numberValue,
|
||||
}}>
|
||||
{value.z}
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Coordinate3DInspector;
|
||||
@@ -0,0 +1,57 @@
|
||||
/**
|
||||
* Copyright (c) Meta Platforms, Inc. and 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 React from 'react';
|
||||
import {Coordinate} from '../../../types';
|
||||
import {Col, Row} from 'antd';
|
||||
import {theme} from 'flipper-plugin';
|
||||
|
||||
type Props = {
|
||||
value: Coordinate;
|
||||
};
|
||||
|
||||
const CoordinateInspector: React.FC<Props> = ({value}) => {
|
||||
return (
|
||||
<>
|
||||
<Row
|
||||
style={{
|
||||
fontSize: theme.fontSize.small,
|
||||
paddingLeft: '20%',
|
||||
paddingRight: '20%',
|
||||
}}>
|
||||
<Col span={12} style={{textAlign: 'center'}}>
|
||||
x
|
||||
</Col>
|
||||
<Col span={12} style={{textAlign: 'center'}}>
|
||||
y
|
||||
</Col>
|
||||
</Row>
|
||||
<Row style={{paddingLeft: '20%', paddingRight: '20%'}}>
|
||||
<Col
|
||||
span={12}
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
color: theme.semanticColors.numberValue,
|
||||
}}>
|
||||
{value.x}
|
||||
</Col>
|
||||
<Col
|
||||
span={12}
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
color: theme.semanticColors.numberValue,
|
||||
}}>
|
||||
{value.y}
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CoordinateInspector;
|
||||
@@ -0,0 +1,35 @@
|
||||
/**
|
||||
* Copyright (c) Meta Platforms, Inc. and 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 React from 'react';
|
||||
import {Col, Row} from 'antd';
|
||||
import {styled, theme} from 'flipper-plugin';
|
||||
|
||||
type Props = {
|
||||
name: string;
|
||||
};
|
||||
|
||||
export const DefaultInputContainer = styled.div({
|
||||
margin: 'auto',
|
||||
padding: '2px',
|
||||
minWidth: '50px',
|
||||
backgroundColor: theme.backgroundDefault,
|
||||
borderRadius: '5px',
|
||||
boxShadow: '0 0 0 1px rgba(0,0,0,.2)',
|
||||
display: 'inline-block',
|
||||
});
|
||||
|
||||
export const DefaultInspectorContainer: React.FC<Props> = (props) => {
|
||||
return (
|
||||
<Row>
|
||||
<Col span={8}>{props.name}</Col>
|
||||
<Col span={16}>{props.children}</Col>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
@@ -10,26 +10,31 @@
|
||||
import React from 'react';
|
||||
import {Col, Row} from 'antd';
|
||||
import {UINode} from '../../../types';
|
||||
import {styled} from 'flipper-plugin';
|
||||
|
||||
type Props = {
|
||||
node: UINode;
|
||||
};
|
||||
|
||||
const IdentityContainer = styled.div({
|
||||
marginTop: '10px',
|
||||
});
|
||||
|
||||
export const IdentityInspector: React.FC<Props> = ({node}) => {
|
||||
return (
|
||||
<>
|
||||
<Row gutter={4} style={{marginTop: '10px'}}>
|
||||
<Col flex="100px">
|
||||
<IdentityContainer>
|
||||
<Row gutter={4}>
|
||||
<Col span="12">
|
||||
<div style={{padding: '0 16px'}}>Name:</div>
|
||||
</Col>
|
||||
<Col flex="auto">{node.name}</Col>
|
||||
<Col span="12">{node.name}</Col>
|
||||
</Row>
|
||||
<Row gutter={4}>
|
||||
<Col flex="100px">
|
||||
<Col span="12">
|
||||
<div style={{padding: '0 16px'}}>Id:</div>
|
||||
</Col>
|
||||
<Col flex="auto">{node.id}</Col>
|
||||
<Col span="12">{node.id}</Col>
|
||||
</Row>
|
||||
</>
|
||||
</IdentityContainer>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) Meta Platforms, Inc. and 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 React from 'react';
|
||||
import {UINode} from '../../../types';
|
||||
|
||||
type Props = {
|
||||
node: UINode;
|
||||
};
|
||||
|
||||
export const LayoutInspector: React.FC<Props> = () => {
|
||||
return <p>Origin and size</p>;
|
||||
};
|
||||
@@ -0,0 +1,57 @@
|
||||
/**
|
||||
* Copyright (c) Meta Platforms, Inc. and 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 React from 'react';
|
||||
import {Size} from '../../../types';
|
||||
import {Col, Row} from 'antd';
|
||||
import {theme} from 'flipper-plugin';
|
||||
|
||||
type Props = {
|
||||
value: Size;
|
||||
};
|
||||
|
||||
const SizeInspector: React.FC<Props> = ({value}) => {
|
||||
return (
|
||||
<>
|
||||
<Row
|
||||
style={{
|
||||
fontSize: theme.fontSize.small,
|
||||
paddingLeft: '20%',
|
||||
paddingRight: '20%',
|
||||
}}>
|
||||
<Col span={12} style={{textAlign: 'center'}}>
|
||||
width
|
||||
</Col>
|
||||
<Col span={12} style={{textAlign: 'center'}}>
|
||||
height
|
||||
</Col>
|
||||
</Row>
|
||||
<Row style={{paddingLeft: '20%', paddingRight: '20%'}}>
|
||||
<Col
|
||||
span={12}
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
color: theme.semanticColors.numberValue,
|
||||
}}>
|
||||
{value.width}
|
||||
</Col>
|
||||
<Col
|
||||
span={12}
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
color: theme.semanticColors.numberValue,
|
||||
}}>
|
||||
{value.height}
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SizeInspector;
|
||||
@@ -0,0 +1,202 @@
|
||||
/**
|
||||
* Copyright (c) Meta Platforms, Inc. and 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 React from 'react';
|
||||
import {SpaceBox} from '../../../types';
|
||||
|
||||
type Props = {
|
||||
size?: number;
|
||||
strokeColor?: string;
|
||||
outerBoxColor?: string;
|
||||
innerBoxColor?: string;
|
||||
margin?: number;
|
||||
separator?: number;
|
||||
value: SpaceBox;
|
||||
};
|
||||
|
||||
const SpaceBoxInspector: React.FC<Props> = ({
|
||||
size = 180,
|
||||
strokeColor = '#4A5967',
|
||||
outerBoxColor = '#F2F3F7',
|
||||
innerBoxColor = '#CCD1D9',
|
||||
margin = 10,
|
||||
separator = 4,
|
||||
value,
|
||||
}) => {
|
||||
const half = size / 2;
|
||||
const quarter = size / 4;
|
||||
const radius = 2;
|
||||
|
||||
const lineStyle = {stroke: strokeColor, strokeWidth: '2'};
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
style={{border: '1', borderColor: innerBoxColor, borderStyle: 'solid'}}
|
||||
viewBox={'0 0 ' + size + ' ' + size}
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width={size} height={size} x={0} y={0} fill={outerBoxColor} />{' '}
|
||||
{/** outer-box */}
|
||||
<rect
|
||||
width={half}
|
||||
height={half}
|
||||
x={quarter}
|
||||
y={quarter}
|
||||
fill={innerBoxColor}
|
||||
/>{' '}
|
||||
{/** inner-box */}
|
||||
<circle cx={quarter} cy={half} r={radius} fill={strokeColor} />
|
||||
{/** left */}
|
||||
<circle cx={half} cy={quarter} r={radius} fill={strokeColor} />
|
||||
{/** top */}
|
||||
<circle cx={half} cy={half + quarter} r={radius} fill={strokeColor} />
|
||||
{/** bottom */}
|
||||
<circle cx={half + quarter} cy={half} r={radius} fill={strokeColor} />
|
||||
{/** right */}
|
||||
{/** left-inner */}
|
||||
<line
|
||||
x1={quarter + margin}
|
||||
y1={half}
|
||||
x2={half - margin}
|
||||
y2={half}
|
||||
style={lineStyle}
|
||||
/>
|
||||
{/** straight-line */}
|
||||
<line
|
||||
x1={quarter + margin}
|
||||
y1={half - separator}
|
||||
x2={quarter + margin}
|
||||
y2={half + separator}
|
||||
style={lineStyle}
|
||||
/>
|
||||
{/** left-separator */}
|
||||
<line
|
||||
x1={half - margin}
|
||||
y1={half - separator}
|
||||
x2={half - margin}
|
||||
y2={half + separator}
|
||||
style={lineStyle}
|
||||
/>
|
||||
{/** right-separator */}
|
||||
{/** right-inner */}
|
||||
<line
|
||||
x1={half + margin}
|
||||
y1={half}
|
||||
x2={half + quarter - margin}
|
||||
y2={half}
|
||||
style={lineStyle}
|
||||
/>
|
||||
{/** straight-line */}
|
||||
<line
|
||||
x1={half + margin}
|
||||
y1={half - separator}
|
||||
x2={half + margin}
|
||||
y2={half + separator}
|
||||
style={lineStyle}
|
||||
/>
|
||||
{/** left-separator */}
|
||||
<line
|
||||
x1={half + quarter - margin}
|
||||
y1={half - separator}
|
||||
x2={half + quarter - margin}
|
||||
y2={half + separator}
|
||||
style={lineStyle}
|
||||
/>
|
||||
{/** right-separator */}
|
||||
{/** top-inner */}
|
||||
<line
|
||||
x1={half}
|
||||
y1={quarter + margin}
|
||||
x2={half}
|
||||
y2={half - margin}
|
||||
style={lineStyle}
|
||||
/>
|
||||
{/** straight-line */}
|
||||
<line
|
||||
x1={half - separator}
|
||||
y1={quarter + margin}
|
||||
x2={half + separator}
|
||||
y2={quarter + margin}
|
||||
style={lineStyle}
|
||||
/>
|
||||
{/** left-separator */}
|
||||
<line
|
||||
x1={half - separator}
|
||||
y1={half - margin}
|
||||
x2={half + separator}
|
||||
y2={half - margin}
|
||||
style={lineStyle}
|
||||
/>
|
||||
{/** right-separator */}
|
||||
{/** bottom-inner */}
|
||||
<line
|
||||
x1={half}
|
||||
y1={half + margin}
|
||||
x2={half}
|
||||
y2={half + quarter - margin}
|
||||
style={lineStyle}
|
||||
/>
|
||||
{/** straight-line */}
|
||||
<line
|
||||
x1={half - separator}
|
||||
y1={half + margin}
|
||||
x2={half + separator}
|
||||
y2={half + margin}
|
||||
style={lineStyle}
|
||||
/>
|
||||
{/** left-separator */}
|
||||
<line
|
||||
x1={half - separator}
|
||||
y1={half + quarter - margin}
|
||||
x2={half + separator}
|
||||
y2={half + quarter - margin}
|
||||
style={lineStyle}
|
||||
/>
|
||||
{/** right-separator */}
|
||||
<text
|
||||
x={half}
|
||||
y={quarter - quarter / 2}
|
||||
dominant-baseline="middle"
|
||||
text-anchor="middle"
|
||||
fill={strokeColor}>
|
||||
{value.top}
|
||||
</text>
|
||||
{/** top */}
|
||||
<text
|
||||
x={half}
|
||||
y={size - quarter / 2}
|
||||
dominant-baseline="middle"
|
||||
text-anchor="middle"
|
||||
fill={strokeColor}>
|
||||
{value.bottom}
|
||||
</text>
|
||||
{/** bottom */}
|
||||
<text
|
||||
x={quarter - quarter / 2}
|
||||
y={half}
|
||||
dominant-baseline="middle"
|
||||
text-anchor="middle"
|
||||
fill={strokeColor}>
|
||||
{value.left}
|
||||
</text>
|
||||
{/** left */}
|
||||
<text
|
||||
x={size - quarter / 2}
|
||||
y={half}
|
||||
dominant-baseline="middle"
|
||||
text-anchor="middle"
|
||||
fill={strokeColor}>
|
||||
{value.right}
|
||||
</text>
|
||||
{/** right */}
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default SpaceBoxInspector;
|
||||
Reference in New Issue
Block a user