refactor: flat onChange

This commit is contained in:
cha0s 2020-06-22 05:47:28 -05:00
parent 6b52c18a0d
commit abb7420ce7
11 changed files with 31 additions and 47 deletions

View File

@ -13,7 +13,7 @@ const decorate = compose(
const Actions = ({
context,
dispatchers,
onChange = () => {},
value,
}) => (
<div className="actions">
@ -24,7 +24,7 @@ const Actions = ({
(traversal, i) => (
// eslint-disable-next-line react/no-array-index-key
<li key={i}>
<Value.Component context={context} dispatchers={dispatchers} value={traversal} />
<Value.Component context={context} onChange={onChange} value={traversal} />
</li>
),
)

View File

@ -4,9 +4,7 @@ import React from 'react';
import propTypes from './prop-types';
const Bool = ({
dispatchers: {
onChange = () => {},
} = {},
onChange = () => {},
value,
}) => (
<select onChange={(event) => onChange(!!event.target.value, event)} value={value ? '1' : ''}>

View File

@ -23,11 +23,11 @@ const decorate = compose(
const Condition = ({
context,
dispatchers: parentDispatchers,
onChange: parentOnChange = () => {},
value,
}) => {
const onChange = (change) => {
parentDispatchers.onChange({
parentOnChange({
...value,
...change,
});
@ -41,15 +41,13 @@ const Condition = ({
...operands.slice(index + 1),
];
};
const makeDispatchers = (index) => ({
onChange: (newValue, event) => {
onChange(
operatorRef.current === event.target
? {operator: newValue}
: {operands: mergeToOperand(index, newValue)},
);
},
});
const makeOnChange = (index) => (newValue, event) => {
onChange(
operatorRef.current === event.target
? {operator: newValue}
: {operands: mergeToOperand(index, newValue)},
);
};
return (
<span className="condition">
{
@ -63,13 +61,13 @@ const Condition = ({
case '<=': {
return value.operands.slice(1).reduce(
(r, operand, i) => {
const opDispatchers = makeDispatchers(i + 1);
const opOnChange = makeOnChange(i);
return (
<>
{r}
<select
className="operator"
onChange={(event) => opDispatchers.onChange(event.target.value, event)}
onChange={(event) => opOnChange(event.target.value, event)}
ref={operatorRef}
value={value.operator}
>
@ -78,7 +76,7 @@ const Condition = ({
<span className="operand">
<Value.Component
context={context}
dispatchers={opDispatchers}
onChange={opOnChange}
value={operand}
/>
</span>
@ -89,7 +87,7 @@ const Condition = ({
<span className="operand">
<Value.Component
context={context}
dispatchers={makeDispatchers(0)}
onChange={makeOnChange(0)}
value={value.operands[0]}
/>
</span>

View File

@ -13,7 +13,7 @@ const decorate = compose(
const Literal = ({
context,
dispatchers,
onChange = () => {},
value,
}) => {
const typeRenderers = useTypeRenderers();
@ -30,7 +30,7 @@ const Literal = ({
.map((option) => <option key={option}>{option}</option>)
}
</select>
{Component ? <Component dispatchers={dispatchers} value={value.value} /> : null}
{Component ? <Component onChange={onChange} value={value.value} /> : null}
</div>
);
};

View File

@ -10,9 +10,7 @@ const decorate = compose(
);
const Number = ({
dispatchers: {
onChange = () => {},
} = {},
onChange = () => {},
options,
value,
}) => {

View File

@ -12,7 +12,7 @@ const decorate = compose(
const Routines = ({
context,
dispatchers,
onChange = () => {},
value,
}) => {
const entries = value.routines ? Object.entries(value.routines) : [];
@ -28,7 +28,7 @@ const Routines = ({
<span className="text">{name}</span>
<Actions.Component
context={context}
dispatchers={dispatchers}
onChange={onChange}
value={routine.routine}
/>
</label>

View File

@ -4,9 +4,7 @@ import React from 'react';
import propTypes from './prop-types';
const String = ({
dispatchers: {
onChange = () => {},
} = {},
onChange = () => {},
options,
value,
}) => (

View File

@ -14,7 +14,7 @@ const decorate = compose(
const Traversal = (props) => {
const {
context,
dispatchers,
onChange = () => {},
value: {steps, value},
} = props;
const stepsType = typeFromSteps(context, steps);
@ -50,7 +50,7 @@ const Traversal = (props) => {
{arg.label}
<Value.Component
context={context}
dispatchers={dispatchers}
onChange={onChange}
value={arg}
/>
</label>
@ -72,7 +72,7 @@ const Traversal = (props) => {
<span className="op">=</span>
<Value.Component
context={context}
dispatchers={dispatchers}
onChange={onChange}
value={value}
/>
</span>

View File

@ -11,23 +11,17 @@ const decorate = compose(
);
const Vector = ({
dispatchers: {
onChange = () => {},
} = {},
onChange = () => {},
value,
}) => (
<span className="vector">
<Number.Component
dispatchers={{
onChange: (axe) => onChange([axe, value[1]]),
}}
onChange={(axe) => onChange([axe, value[1]])}
value={value[0]}
/>
<span className="separator">{' x '}</span>
<Number.Component
dispatchers={{
onChange: (axe) => onChange([value[0], axe]),
}}
onChange={(axe) => onChange([value[0], axe])}
value={value[1]}
/>
</span>

View File

@ -14,7 +14,7 @@ const decorate = compose(
const Value = ({
context,
dispatchers,
onChange = () => {},
options,
type: typeHint,
value,
@ -36,7 +36,7 @@ const Value = ({
? (
<Component
context={context}
dispatchers={dispatchers}
onChange={onChange}
options={options}
type={type}
value={value}

View File

@ -49,9 +49,7 @@ const makeTraitPaneRenderer = (context, dispatch, target, traitType) => (trait)
<div className="invisible-separator" />
<Value.Component
context={context}
dispatchers={{
onChange: (value) => dispatch(setTraitProperty({...payload, value})),
}}
onChange={(value) => dispatch(setTraitProperty({...payload, value}))}
options={options}
type={type}
value={values[key]}