DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

Unify ESLint and Prettier across xplat/yoga (#1335)

Browse Source 
Summary: Pull Request resolved: https://github.com/facebook/yoga/pull/1335

Reviewed By: christophpurrer

Differential Revision: D47459866

fbshipit-source-id: fd6b4e4e2518d91968ac7180b32129b3f70edf88
This commit is contained in:
Nick Gerleman
2023-07-17 14:27:32 -07:00
committed by Facebook GitHub Bot
parent 05b2edfb85
commit 44507ec62e
35 changed files with 2064 additions and 1559 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
website-next/src/components/Playground/EditValue.tsx
View File

@@ -7,17 +7,17 @@
* @format
*/
import React from 'react';
import React from 'react';
import YogaEnumSelect from './YogaEnumSelect';
import YogaPositionEditor from './YogaPositionEditor';
import {Input} from 'antd';
type Props<T> = {
property: string,
disabled?: boolean,
value?: T,
onChange: (property: string, value: T) => void,
placeholder?: string,
property: string;
disabled?: boolean;
value?: T;
onChange: (property: string, value: T) => void;
placeholder?: string;
};
export default (props: Props<any>) => {

20
website-next/src/components/Playground/Editor.tsx
View File

@@ -17,13 +17,13 @@ import './Editor.css';
const TabPane = Tabs.TabPane;
type Props = {
node: LayoutRecordType,
onChangeLayout: (key: string, value: any) => void,
onChangeSetting: (key: string, value: any) => void,
direction: Direction,
selectedNodeIsRoot: boolean,
onRemove?: () => void,
onAdd?: () => void,
node: LayoutRecordType;
onChangeLayout: (key: string, value: any) => void;
onChangeSetting: (key: string, value: any) => void;
direction: Direction;
selectedNodeIsRoot: boolean;
onRemove?: () => void;
onAdd?: () => void;
};
export default class Editor extends Component<Props> {
@@ -47,7 +47,7 @@ export default class Editor extends Component<Props> {
render() {
const {node, selectedNodeIsRoot} = this.props;
const disabled = !Boolean(node);
const disabled = !node;
return (
<div className="Editor">
@@ -347,7 +347,7 @@ export default class Editor extends Component<Props> {
<Col span={12}>
<Button
icon="plus-circle-o"
disabled={!Boolean(this.props.onAdd)}
disabled={!this.props.onAdd}
onClick={this.props.onAdd}
type="primary">
add child node
@@ -356,7 +356,7 @@ export default class Editor extends Component<Props> {
<Col span={12}>
<Button
icon="close-circle-o"
disabled={!Boolean(this.props.onRemove)}
disabled={!this.props.onRemove}
onClick={this.props.onRemove}
type="danger">
remove node

4
website-next/src/components/Playground/InfoText.tsx
View File

@@ -13,8 +13,8 @@ import Link from '@docusaurus/Link';
import './InfoText.css';
type Props = {
children: any,
doclink: string,
children: any;
doclink: string;
};
export default class InfoText extends Component<Props> {

45
website-next/src/components/Playground/LayoutRecord.tsx
View File

@@ -7,7 +7,6 @@
* @format
*/
import {Record, List} from 'immutable';
import PositionRecord from './PositionRecord';
import type {PositionRecordType} from './PositionRecord';
@@ -24,28 +23,28 @@ import type {
export type LayoutRecordType = ReturnType<LayoutRecordFactory>;
export type LayoutRecordFactory = Record.Factory<{
width?: number | 'auto',
height?: number | 'auto',
minWidth?: number,
minHeight?: number,
maxWidth?: number,
maxHeight?: number,
justifyContent?: Justify,
padding: PositionRecordType,
border: PositionRecordType,
margin: PositionRecordType,
position: PositionRecordType,
positionType: PositionType,
alignItems?: Align,
alignSelf?: Align,
alignContent?: Align,
flexDirection?: FlexDirection,
flexBasis?: number | 'auto',
flexGrow?: number,
flexShrink?: number,
flexWrap?: Wrap,
aspectRatio?: number | 'auto',
children?: List<LayoutRecordType>,
width?: number | 'auto';
height?: number | 'auto';
minWidth?: number;
minHeight?: number;
maxWidth?: number;
maxHeight?: number;
justifyContent?: Justify;
padding: PositionRecordType;
border: PositionRecordType;
margin: PositionRecordType;
position: PositionRecordType;
positionType: PositionType;
alignItems?: Align;
alignSelf?: Align;
alignContent?: Align;
flexDirection?: FlexDirection;
flexBasis?: number | 'auto';
flexGrow?: number;
flexShrink?: number;
flexWrap?: Wrap;
aspectRatio?: number | 'auto';
children?: List<LayoutRecordType>;
}>;
const r: LayoutRecordFactory = Record({

12
website-next/src/components/Playground/PositionGuide.tsx
View File

@@ -13,11 +13,11 @@ import type {PositionRecordType} from './PositionRecord';
import './PositionGuide.css';
type Props = {
inset?: boolean,
reverse?: boolean,
position: PositionRecordType,
offset: PositionRecordType,
color: string,
inset?: boolean;
reverse?: boolean;
position: PositionRecordType;
offset: PositionRecordType;
color: string;
};
export default class PositionGuide extends Component<Props> {
@@ -42,8 +42,6 @@ export default class PositionGuide extends Component<Props> {
) {
return null;
}
if (reverse) {
let temp1 = left;
left = right;

8
website-next/src/components/Playground/PositionRecord.tsx
View File

@@ -12,10 +12,10 @@ import {Record} from 'immutable';
export type PositionRecordType = ReturnType<PositionRecordFactory>;
export type PositionRecordFactory = Record.Factory<{
top: string | number,
right: string | number,
bottom: string | number,
left: string | number,
top: string | number;
right: string | number;
bottom: string | number;
left: string | number;
}>;
const r: PositionRecordFactory = Record({

4
website-next/src/components/Playground/Sidebar.tsx
View File

@@ -11,8 +11,8 @@ import React, {Component} from 'react';
import './Sidebar.css';
type Props = {
width?: number,
children: any,
width?: number;
children: any;
};
export default class Sidebar extends Component<Props> {

21
website-next/src/components/Playground/YogaEnumSelect.tsx
View File

@@ -25,19 +25,19 @@ const PROPERTY_LOOKUP = {
flexWrap: 'WRAP',
};
type Property = keyof(typeof PROPERTY_LOOKUP);
type Property = keyof typeof PROPERTY_LOOKUP;
type Props = {
property: Property,
disabled?: boolean,
value: string | number,
onChange: (property: Property, value: number) => void,
property: Property;
disabled?: boolean;
value: string | number;
onChange: (property: Property, value: number) => void;
};
export default class YogaEnumSelect extends Component<Props> {
static availableProperties = Object.keys(PROPERTY_LOOKUP);
values: Array<{key: string, value: number}>;
values: Array<{key: string; value: number}>;
constructor(props: Props) {
super(props);
@@ -57,17 +57,12 @@ export default class YogaEnumSelect extends Component<Props> {
getTitle = (property: string, key: string): string => {
const replacer = new RegExp(`^${property}_`);
return key
.replace(replacer, '')
.replace('_', ' ')
.toLowerCase();
return key.replace(replacer, '').replace('_', ' ').toLowerCase();
};
render() {
const property = PROPERTY_LOOKUP[this.props.property];
const selected = this.values.find(
({key, value}) => value === this.props.value,
);
const selected = this.values.find(({value}) => value === this.props.value);
return this.values.length > 3 ? (
<div className="YogaEnumSelect">

59
website-next/src/components/Playground/YogaNode.tsx
View File

@@ -18,30 +18,30 @@ import {Direction, Display, Edge, Node, Wrap} from 'yoga-layout/sync';
import './YogaNode.css';
type ComputedLayout = {
left: number,
top: number,
width: number,
height: number,
children: Array<ComputedLayout>,
node: Node,
left: number;
top: number;
width: number;
height: number;
children: Array<ComputedLayout>;
node: Node;
};
type Props = {
layoutDefinition: LayoutRecordType,
className?: string,
computedLayout?: ComputedLayout,
path: Array<number>,
selectedNodePath?: Array<number>,
direction?: Direction,
label?: string,
showGuides: boolean,
onClick?: (path: Array<number>) => void,
onDoubleClick?: (path: Array<number>) => void,
layoutDefinition: LayoutRecordType;
className?: string;
computedLayout?: ComputedLayout;
path: Array<number>;
selectedNodePath?: Array<number>;
direction?: Direction;
label?: string;
showGuides: boolean;
onClick?: (path: Array<number>) => void;
onDoubleClick?: (path: Array<number>) => void;
};
type State = {
visible?: boolean,
hovered: boolean,
visible?: boolean;
hovered: boolean;
};
export default class YogaNode extends Component<Props, State> {
@@ -68,7 +68,7 @@ export default class YogaNode extends Component<Props, State> {
this.calculateLayout(props);
this.state = {
hovered: false,
visible: !Boolean(props.computedLayout),
visible: !props.computedLayout,
};
}
}
@@ -137,7 +137,9 @@ export default class YogaNode extends Component<Props, State> {
? defaultLayout[key]
: layoutDefinition[key];
root[`set${key[0].toUpperCase()}${key.substr(1)}`](value);
} catch (e) {}
} catch (e) {
// Do nothing on failure
}
});
['padding', 'margin', 'position', 'border'].forEach(key => {
@@ -147,7 +149,9 @@ export default class YogaNode extends Component<Props, State> {
Yoga[`EDGE_${direction.toUpperCase()}`],
layoutDefinition[key][direction],
);
} catch (e) {}
} catch (e) {
// Do nothing on failure
}
});
});
@@ -165,7 +169,7 @@ export default class YogaNode extends Component<Props, State> {
return {
...node.getComputedLayout(),
node,
children: Array.apply(null, Array(node.getChildCount())).map((_, i) =>
children: Array(node.getChildCount()).map((_, i) =>
this.getComputedLayout(node.getChild(i)),
),
};
@@ -187,7 +191,7 @@ export default class YogaNode extends Component<Props, State> {
}
};
onMouseLeave = (e: React.MouseEvent) => this.setState({hovered: false});
onMouseLeave = (_e: React.MouseEvent) => this.setState({hovered: false});
showPositionGuides({node}: ComputedLayout) {
const padding = PositionRecord({
@@ -246,13 +250,8 @@ export default class YogaNode extends Component<Props, State> {
}
render() {
const {
layoutDefinition,
className,
path,
selectedNodePath,
label,
} = this.props;
const {layoutDefinition, className, path, selectedNodePath, label} =
this.props;
const computedLayout: ComputedLayout =
this.props.computedLayout || this.computedLayout;

8
website-next/src/components/Playground/YogaPositionEditor.tsx
View File

@@ -16,10 +16,10 @@ import './YogaPositionEditor.css';
type Property = 'position' | 'margin' | 'padding' | 'border';
type Props = {
value: PositionRecordType,
property: Property,
disabled?: boolean,
onChange: (property: Property, value: PositionRecordType) => void,
value: PositionRecordType;
property: Property;
disabled?: boolean;
onChange: (property: Property, value: PositionRecordType) => void;
};
export default class YogaPositionEditor extends Component<Props> {

40
website-next/src/components/Playground/index.tsx
View File

@@ -15,28 +15,30 @@ import {List, setIn} from 'immutable';
import PositionRecord from './PositionRecord';
import LayoutRecord from './LayoutRecord';
import Sidebar from './Sidebar';
import {Row, Col} from 'antd';
import type {LayoutRecordType} from './LayoutRecord';
import './index.css';
type Props = {
layoutDefinition: Object,
direction: Direction,
maxDepth: number,
maxChildren?: number,
minChildren?: number,
selectedNodePath?: Array<number>,
showGuides: boolean,
className?: string,
height?: string | number,
persist?: boolean,
renderSidebar?: (layoutDefinition: LayoutRecordType, onChange: Function) => any,
layoutDefinition: LayoutRecordType;
direction: Direction;
maxDepth: number;
maxChildren?: number;
minChildren?: number;
selectedNodePath?: Array<number>;
showGuides: boolean;
className?: string;
height?: string | number;
persist?: boolean;
renderSidebar?: (
layoutDefinition: LayoutRecordType,
onChange: () => any,
) => any;
};
type State = {
selectedNodePath?: Array<number>,
layoutDefinition: LayoutRecordType,
direction: Direction,
selectedNodePath?: Array<number>;
layoutDefinition: LayoutRecordType;
direction: Direction;
};
function getPath(path: Array<number>): Array<unknown> {
@@ -62,7 +64,7 @@ export default class Playground extends Component<Props, State> {
persist: false,
};
rehydrate = (node: Object): LayoutRecordType => {
rehydrate = (node: LayoutRecordType): LayoutRecordType => {
let record = LayoutRecord(node);
record = record.set('padding', PositionRecord(record.padding));
record = record.set('border', PositionRecord(record.border));
@@ -115,7 +117,7 @@ export default class Playground extends Component<Props, State> {
};
hideSidePanes() {
if (!Boolean(this.props.renderSidebar)) {
if (!this.props.renderSidebar) {
// only unselect if we don't have an external sidebar, otherwise the
// sidebar may rely on a certain node to be selected
this.setState({
@@ -183,7 +185,9 @@ export default class Playground extends Component<Props, State> {
): string =>
btoa(JSON.stringify(this.removeUnchangedProperties(layoutDefinition)));
removeUnchangedProperties = (node: LayoutRecordType): Object => {
removeUnchangedProperties = (
node: LayoutRecordType,
): {children?: unknown} => {
const untouchedLayout = LayoutRecord({});
const untouchedPosition = PositionRecord({});
const result: {children?: unknown} = {};