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

Fixing playground editing

Browse Source 
Summary: editing numerical values didn't work. this fixes it and cleans up the API of the playground

Reviewed By: emilsjolander

Differential Revision: D6976128

fbshipit-source-id: 9b1ace9d93ba8e597bdfb4842ed6adcaf8b77fd9
This commit is contained in:
Daniel Büchele
2018-02-13 06:13:29 -08:00
committed by Facebook Github Bot
parent 9c877a621e
commit 699b1f5012
5 changed files with 64 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
website/src/components/Playground/EditValue.js
View File

@@ -15,14 +15,14 @@ import YogaEnumSelect from './YogaEnumSelect';
import YogaPositionEditor from './YogaPositionEditor'; import YogaPositionEditor from './YogaPositionEditor';
import {Input} from 'antd'; import {Input} from 'antd';
type Props<T, S> = { type Props<T> = {
property: string, property: string,
disabled?: boolean, disabled?: boolean,
value: string | number, value?: ?T,
onChange: (value: number) => void, onChange: (property: string, value: T) => void,
}; };
export default (props: Props<T, S>) => { export default (props: Props<*>) => {
if (YogaEnumSelect.availableProperties.indexOf(props.property) > -1) { if (YogaEnumSelect.availableProperties.indexOf(props.property) > -1) {
return <YogaEnumSelect {...props} />; return <YogaEnumSelect {...props} />;
} else if ( } else if (
@@ -30,6 +30,12 @@ export default (props: Props<T, S>) => {
) { ) {
return <YogaPositionEditor {...props} />; return <YogaPositionEditor {...props} />;
} else { } else {
return <Input type="text" {...props} />; return (
<Input
type="text"
{...props}
onChange={e => props.onChange(props.property, e.target.value)}
/>
);
} }
}; };

69
website/src/components/Playground/Editor.js
View File

@@ -66,7 +66,7 @@ export default class Editor extends Component<Props> {
<EditValue <EditValue
property="direction" property="direction"
value={this.props.direction} value={this.props.direction}
onChange={e => this.props.onChangeSetting('direction', e)} onChange={this.props.onChangeSetting}
/> />
<h2> <h2>
Flex direction Flex direction
@@ -75,8 +75,8 @@ export default class Editor extends Component<Props> {
<EditValue <EditValue
disabled={disabled} disabled={disabled}
property="flexDirection" property="flexDirection"
value={node ? node.flexDirection : ''} value={node ? node.flexDirection : undefined}
onChange={e => this.props.onChangeLayout('flexDirection', e)} onChange={this.props.onChangeLayout}
/> />
<Row gutter={15} style={{marginTop: 30}}> <Row gutter={15} style={{marginTop: 30}}>
@@ -90,11 +90,10 @@ export default class Editor extends Component<Props> {
</h2> </h2>
<EditValue <EditValue
type="text" type="text"
property="flexGrow"
disabled={disabled || selectedNodeIsRoot} disabled={disabled || selectedNodeIsRoot}
value={node ? node.flexGrow : ''} value={node ? node.flexGrow : undefined}
onChange={e => onChange={this.props.onChangeLayout}
this.props.onChangeLayout('flexGrow', e.target.value)
}
/> />
</Col> </Col>
<Col span={12}> <Col span={12}>
@@ -107,11 +106,10 @@ export default class Editor extends Component<Props> {
</h2> </h2>
<EditValue <EditValue
type="text" type="text"
property="flexShrink"
disabled={disabled || selectedNodeIsRoot} disabled={disabled || selectedNodeIsRoot}
value={node ? node.flexShrink : ''} value={node ? node.flexShrink : undefined}
onChange={e => onChange={this.props.onChangeLayout}
this.props.onChangeLayout('flexShrink', e.target.value)
}
/> />
</Col> </Col>
</Row> </Row>
@@ -125,8 +123,8 @@ export default class Editor extends Component<Props> {
<EditValue <EditValue
disabled={disabled} disabled={disabled}
property="flexWrap" property="flexWrap"
value={node ? node.flexWrap : ''} value={node ? node.flexWrap : undefined}
onChange={e => this.props.onChangeLayout('flexWrap', e)} onChange={this.props.onChangeLayout}
/> />
</TabPane> </TabPane>
<TabPane tab="Alignment" key="2"> <TabPane tab="Alignment" key="2">
@@ -137,8 +135,8 @@ export default class Editor extends Component<Props> {
<EditValue <EditValue
disabled={disabled} disabled={disabled}
property="justifyContent" property="justifyContent"
value={node ? node.justifyContent : ''} value={node ? node.justifyContent : undefined}
onChange={e => this.props.onChangeLayout('justifyContent', e)} onChange={this.props.onChangeLayout}
/> />
<h2> <h2>
@@ -148,8 +146,8 @@ export default class Editor extends Component<Props> {
<EditValue <EditValue
disabled={disabled} disabled={disabled}
property="alignItems" property="alignItems"
value={node ? node.alignItems : ''} value={node ? node.alignItems : undefined}
onChange={e => this.props.onChangeLayout('alignItems', e)} onChange={this.props.onChangeLayout}
/> />
<h2> <h2>
@@ -161,8 +159,8 @@ export default class Editor extends Component<Props> {
<EditValue <EditValue
disabled={disabled || selectedNodeIsRoot} disabled={disabled || selectedNodeIsRoot}
property="alignSelf" property="alignSelf"
value={node ? node.alignSelf : ''} value={node ? node.alignSelf : undefined}
onChange={e => this.props.onChangeLayout('alignSelf', e)} onChange={this.props.onChangeLayout}
/> />
<h2> <h2>
@@ -174,8 +172,8 @@ export default class Editor extends Component<Props> {
<EditValue <EditValue
disabled={disabled} disabled={disabled}
property="alignContent" property="alignContent"
value={node ? node.alignContent : ''} value={node ? node.alignContent : undefined}
onChange={e => this.props.onChangeLayout('alignContent', e)} onChange={this.props.onChangeLayout}
/> />
</TabPane> </TabPane>
<TabPane tab="Layout" key="3"> <TabPane tab="Layout" key="3">
@@ -188,22 +186,20 @@ export default class Editor extends Component<Props> {
<EditValue <EditValue
type="text" type="text"
placeholder="width" placeholder="width"
property="width"
disabled={disabled} disabled={disabled}
value={node ? node.width : ''} value={node ? node.width : undefined}
onChange={e => onChange={this.props.onChangeLayout}
this.props.onChangeLayout('width', e.target.value)
}
/> />
</Col> </Col>
<Col span={12}> <Col span={12}>
<EditValue <EditValue
type="text" type="text"
placeholder="height" placeholder="height"
property="height"
disabled={disabled} disabled={disabled}
value={node ? node.height : ''} value={node ? node.height : undefined}
onChange={e => onChange={this.props.onChangeLayout}
this.props.onChangeLayout('height', e.target.value)
}
/> />
</Col> </Col>
</Row> </Row>
@@ -218,11 +214,10 @@ export default class Editor extends Component<Props> {
<EditValue <EditValue
type="text" type="text"
placeholder="Aspect ratio" placeholder="Aspect ratio"
property="aspectRatio"
disabled={disabled} disabled={disabled}
value={node ? node.aspectRatio : ''} value={node ? node.aspectRatio : undefined}
onChange={e => onChange={this.props.onChangeLayout}
this.props.onChangeLayout('aspectRatio', e.target.value)
}
/> />
<h2>Box model</h2> <h2>Box model</h2>
@@ -231,7 +226,7 @@ export default class Editor extends Component<Props> {
property={property} property={property}
key={property} key={property}
value={node ? node[property] : undefined} value={node ? node[property] : undefined}
onChange={value => this.props.onChangeLayout(property, value)} onChange={this.props.onChangeLayout}
/> />
))} ))}
<h2> <h2>
@@ -246,13 +241,13 @@ export default class Editor extends Component<Props> {
<EditValue <EditValue
disabled={disabled} disabled={disabled}
property="positionType" property="positionType"
value={node ? node.positionType : ''} value={node ? node.positionType : undefined}
onChange={e => this.props.onChangeLayout('positionType', e)} onChange={this.props.onChangeLayout}
/> />
<EditValue <EditValue
property="position" property="position"
value={node ? node.position : undefined} value={node ? node.position : undefined}
onChange={value => this.props.onChangeLayout('position', value)} onChange={this.props.onChangeLayout}
/> />
</TabPane> </TabPane>
</Tabs> </Tabs>

10
website/src/components/Playground/YogaEnumSelect.js
View File

@@ -28,11 +28,13 @@ const PROPERTY_LOOKUP = {
flexWrap: 'WRAP', flexWrap: 'WRAP',
}; };
type Property = $Keys<typeof PROPERTY_LOOKUP>;
type Props = { type Props = {
property: $Keys<typeof PROPERTY_LOOKUP>, property: Property,
disabled?: boolean, disabled?: boolean,
value: string | number, value: string | number,
onChange: (value: number) => void, onChange: (property: Property, value: number) => void,
}; };
export default class YogaEnumSelect extends Component<Props> { export default class YogaEnumSelect extends Component<Props> {
@@ -52,7 +54,7 @@ export default class YogaEnumSelect extends Component<Props> {
} }
handleMenuClick = ({key}: {key: string}) => { handleMenuClick = ({key}: {key: string}) => {
this.props.onChange(yoga[key]); this.props.onChange(this.props.property, yoga[key]);
}; };
render() { render() {
@@ -85,7 +87,7 @@ export default class YogaEnumSelect extends Component<Props> {
) : ( ) : (
<RadioGroup <RadioGroup
{...props} {...props}
onChange={e => this.props.onChange(e.target.value)} onChange={e => this.props.onChange(this.props.property, e.target.value)}
defaultValue="a" defaultValue="a"
className="YogaEnumSelect"> className="YogaEnumSelect">
{this.values.map(({key, value}) => ( {this.values.map(({key, value}) => (

20
website/src/components/Playground/YogaPositionEditor.js
View File

@@ -16,10 +16,12 @@ import PositionRecord from './PositionRecord';
import type {PositionRecordT} from './PositionRecord'; import type {PositionRecordT} from './PositionRecord';
import './YogaPositionEditor.css'; import './YogaPositionEditor.css';
type Property = 'position' | 'margin' | 'padding' | 'border';
type Props = { type Props = {
value: PositionRecordT, value: PositionRecordT,
property: 'position' | 'margin' | 'padding' | 'border', property: Property,
onChange: (value: PositionRecordT) => void, onChange: (property: Property, value: PositionRecordT) => void,
}; };
export default class YogaPositionEditor extends Component<Props> { export default class YogaPositionEditor extends Component<Props> {
@@ -36,25 +38,31 @@ export default class YogaPositionEditor extends Component<Props> {
<Input <Input
type="text" type="text"
value={value.top} value={value.top}
onChange={e => onChange(value.set('top', e.target.value))} onChange={e => onChange(property, value.set('top', e.target.value))}
/> />
<div className="YogaPositionEditorRow"> <div className="YogaPositionEditorRow">
<Input <Input
type="text" type="text"
value={value.left} value={value.left}
onChange={e => onChange(value.set('left', e.target.value))} onChange={e =>
onChange(property, value.set('left', e.target.value))
}
/> />
{property} {property}
<Input <Input
type="text" type="text"
value={value.right} value={value.right}
onChange={e => onChange(value.set('right', e.target.value))} onChange={e =>
onChange(property, value.set('right', e.target.value))
}
/> />
</div> </div>
<Input <Input
type="text" type="text"
value={value.bottom} value={value.bottom}
onChange={e => onChange(value.set('bottom', e.target.value))} onChange={e =>
onChange(property, value.set('bottom', e.target.value))
}
/> />
</div> </div>
); );

2
website/src/templates/withPlayground.js
View File

@@ -34,7 +34,7 @@ export default ({pathContext}) => (
<EditValue <EditValue
property={prop} property={prop}
value={layout[prop]} value={layout[prop]}
onChange={e => onChange(prop, e)} onChange={onChange}
/> />
</div> </div>
))} ))}