refactor: flat onChange
This commit is contained in:
parent
6b52c18a0d
commit
abb7420ce7
|
@ -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>
|
||||
),
|
||||
)
|
||||
|
|
|
@ -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' : ''}>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -10,9 +10,7 @@ const decorate = compose(
|
|||
);
|
||||
|
||||
const Number = ({
|
||||
dispatchers: {
|
||||
onChange = () => {},
|
||||
} = {},
|
||||
onChange = () => {},
|
||||
options,
|
||||
value,
|
||||
}) => {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -4,9 +4,7 @@ import React from 'react';
|
|||
import propTypes from './prop-types';
|
||||
|
||||
const String = ({
|
||||
dispatchers: {
|
||||
onChange = () => {},
|
||||
} = {},
|
||||
onChange = () => {},
|
||||
options,
|
||||
value,
|
||||
}) => (
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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]}
|
||||
|
|
Loading…
Reference in New Issue
Block a user