chore: ded
This commit is contained in:
cha0s
parent
250f057d0c
commit
b8d775eaa6
|
|
@ -1,131 +0,0 @@
|
|||
import './condition.scss';
|
||||
|
||||
import {join} from 'path';
|
||||
|
||||
import {useJsonPatcher} from '@avocado/resource-persea';
|
||||
import {
|
||||
classnames,
|
||||
PropTypes,
|
||||
React,
|
||||
} from '@latus/react';
|
||||
|
||||
import Variant from './help/variant';
|
||||
|
||||
const Condition = ({context, path, value}) => {
|
||||
const patch = useJsonPatcher();
|
||||
const operands = value.operands.map((operand, i) => {
|
||||
const operandKey = join(path, 'operands', i.toString());
|
||||
return (
|
||||
<Variant
|
||||
context={context}
|
||||
key={operandKey}
|
||||
onChange={(event, value, localPath) => {
|
||||
patch({
|
||||
path: localPath,
|
||||
value,
|
||||
});
|
||||
}}
|
||||
path={operandKey}
|
||||
type="any"
|
||||
value={operand}
|
||||
/>
|
||||
);
|
||||
});
|
||||
const operator = (
|
||||
<select
|
||||
key={join(path, 'operator')}
|
||||
onChange={(event) => {
|
||||
patch({
|
||||
path: join(path, 'operator'),
|
||||
value: event.target.value,
|
||||
});
|
||||
}}
|
||||
value={value.operator}
|
||||
>
|
||||
<option value="is">is</option>
|
||||
<option value="isnt">isnt</option>
|
||||
<option value=">">></option>
|
||||
<option value=">=">>=</option>
|
||||
<option value="<"><</option>
|
||||
<option value="<="><=</option>
|
||||
<option value="or">or</option>
|
||||
<option value="and">and</option>
|
||||
<option value="contains">contains</option>
|
||||
</select>
|
||||
);
|
||||
const renderables = [];
|
||||
switch (value.operator) {
|
||||
case 'or':
|
||||
case 'and':
|
||||
renderables.push(operator);
|
||||
renderables.push(...operands.map((operand, i) => (
|
||||
<div className="operand__wrapper">
|
||||
{operand}
|
||||
<button
|
||||
className="condition__remove-operand"
|
||||
onClick={() => {
|
||||
patch({
|
||||
op: 'remove',
|
||||
path: join(path, 'operands', i.toString()),
|
||||
});
|
||||
}}
|
||||
type="button"
|
||||
>
|
||||
x
|
||||
</button>
|
||||
</div>
|
||||
)));
|
||||
renderables.push(
|
||||
<button
|
||||
onClick={() => {
|
||||
patch({
|
||||
op: 'add',
|
||||
path: join(path, 'operands/-'),
|
||||
value: {
|
||||
type: 'literal',
|
||||
value: true,
|
||||
},
|
||||
});
|
||||
}}
|
||||
type="button"
|
||||
>
|
||||
Add operand
|
||||
</button>,
|
||||
);
|
||||
break;
|
||||
default:
|
||||
renderables.push(operands.shift());
|
||||
renderables.push(operator);
|
||||
renderables.push(...operands);
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className={classnames(
|
||||
'condition',
|
||||
{'condition--vertical': -1 !== ['and', 'or'].indexOf(value.operator)},
|
||||
)}
|
||||
>
|
||||
{renderables}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Condition.defaultProps = {};
|
||||
|
||||
Condition.displayName = 'Condition';
|
||||
|
||||
Condition.propTypes = {
|
||||
context: PropTypes.shape({
|
||||
describeChildren: PropTypes.func,
|
||||
get: PropTypes.func,
|
||||
}).isRequired,
|
||||
path: PropTypes.string.isRequired,
|
||||
value: PropTypes.shape({
|
||||
operator: PropTypes.string,
|
||||
operands: PropTypes.arrayOf(
|
||||
PropTypes.any,
|
||||
),
|
||||
}).isRequired,
|
||||
};
|
||||
|
||||
export default Condition;
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
.condition {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
&.condition--vertical {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.condition--vertical {
|
||||
|
||||
> select {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
> .expression,
|
||||
> .key,
|
||||
> .literal {
|
||||
margin-left: 1em;
|
||||
}
|
||||
> .expression {
|
||||
margin-bottom: 0.5em;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.condition .condition--vertical {
|
||||
padding-top: 0.5em;
|
||||
}
|
||||
|
||||
.operand__wrapper {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
padding-left: 0.5em;
|
||||
width: 100%;
|
||||
&:nth-of-type(2n+1) {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
> button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
font-size: 0.8em;
|
||||
margin-left: auto;
|
||||
margin-right: 0.5em;
|
||||
padding: 1em;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,367 +0,0 @@
|
|||
import './expression.scss';
|
||||
|
||||
import {join, relative} from 'path';
|
||||
|
||||
import {useJsonPatcher} from '@avocado/resource-persea';
|
||||
import {
|
||||
classnames,
|
||||
PropTypes,
|
||||
React,
|
||||
useLatus,
|
||||
} from '@latus/react';
|
||||
|
||||
import compile from '../../compilers/compile';
|
||||
import {isInvocation, isKey} from '../../testers';
|
||||
import Invocation from './expression/invocation';
|
||||
import Key from './expression/key';
|
||||
import Variant from './help/variant';
|
||||
|
||||
const Expression = ({
|
||||
context,
|
||||
path,
|
||||
type,
|
||||
value,
|
||||
vararg,
|
||||
}) => {
|
||||
const latus = useLatus();
|
||||
const patch = useJsonPatcher();
|
||||
const types = latus.get('%behavior-types');
|
||||
let i = 0;
|
||||
const {ops, value: expressionValue} = value;
|
||||
const Renderables = [];
|
||||
let opsCount = 0;
|
||||
// eslint-disable-next-line react/destructuring-assignment
|
||||
let description = context.describeChildren();
|
||||
const onChange = (event, value, localPath) => {
|
||||
const patches = [];
|
||||
const j = parseInt(relative(path, localPath).split('/')[1], 10);
|
||||
if (j < ops.length - 1) {
|
||||
for (let k = j + 1; k < ops.length; ++k) {
|
||||
patches.unshift({
|
||||
op: 'remove',
|
||||
path: join(path, 'ops', k.toString()),
|
||||
});
|
||||
}
|
||||
}
|
||||
else if (event && j === ops.length) {
|
||||
patches.push({
|
||||
op: 'add',
|
||||
path: join(path, 'ops', j.toString()),
|
||||
value: {
|
||||
type: 'key',
|
||||
},
|
||||
});
|
||||
}
|
||||
patches.push({
|
||||
path: localPath,
|
||||
value,
|
||||
});
|
||||
patch(patches);
|
||||
};
|
||||
do {
|
||||
const op = ops[i];
|
||||
const opPath = join(path, 'ops', opsCount.toString());
|
||||
const nextOp = i === ops.length - 1 ? undefined : ops[i + 1];
|
||||
if (isKey(op)) {
|
||||
const isFirst = 0 === i;
|
||||
const isLast = i === ops.length - 1 ? true : isInvocation(ops[i + 1]);
|
||||
Renderables.push(
|
||||
<Key
|
||||
childrenDescription={{
|
||||
...(
|
||||
isFirst && 'void' !== type
|
||||
? {
|
||||
'[literal]': {label: '', type},
|
||||
}
|
||||
: {}
|
||||
),
|
||||
...(
|
||||
vararg && isFirst
|
||||
? {'...': {label: '', type: description.type}}
|
||||
: {}
|
||||
),
|
||||
...(
|
||||
isLast && !isFirst
|
||||
? {'.': {label: '', type: description.type}}
|
||||
: {}
|
||||
),
|
||||
...description.children,
|
||||
...(
|
||||
isFirst
|
||||
? {
|
||||
'[key]': {label: '', type: 'undefined'},
|
||||
}
|
||||
: {
|
||||
'[key]': {label: '', type: 'undefined'},
|
||||
'[invoke]': {label: '', type: 'undefined'},
|
||||
}
|
||||
),
|
||||
}}
|
||||
key={opPath}
|
||||
onChange={((i) => (event, value, localPath) => {
|
||||
if ('.' === value || '...' === value) {
|
||||
const parts = localPath.split('/');
|
||||
parts.pop();
|
||||
parts.pop();
|
||||
if ('...' === value) {
|
||||
parts.pop();
|
||||
patch({
|
||||
op: 'remove',
|
||||
path: parts.join('/'),
|
||||
});
|
||||
return;
|
||||
}
|
||||
const patches = [];
|
||||
for (let j = i; j < ops.length; ++j) {
|
||||
patches.unshift(
|
||||
{
|
||||
op: 'remove',
|
||||
path: join(parts.join('/'), j.toString()),
|
||||
},
|
||||
);
|
||||
}
|
||||
patch(patches);
|
||||
}
|
||||
else if ('[literal]' === value) {
|
||||
patch({
|
||||
op: 'replace',
|
||||
path,
|
||||
value: {
|
||||
type: 'literal',
|
||||
value: null,
|
||||
},
|
||||
});
|
||||
}
|
||||
else {
|
||||
onChange(event, value, localPath);
|
||||
}
|
||||
})(i)}
|
||||
path={opPath}
|
||||
value={op.key}
|
||||
/>,
|
||||
);
|
||||
opsCount += 1;
|
||||
}
|
||||
if (isInvocation(op)) {
|
||||
const R = Renderables.pop();
|
||||
Renderables.push(
|
||||
<div
|
||||
className="expression__invocation-toggle-wrapper"
|
||||
key={`${opPath}-toggle-from`}
|
||||
>
|
||||
{R}
|
||||
<button
|
||||
className="expression__invocation-toggle from"
|
||||
onClick={() => {
|
||||
patch({
|
||||
op: 'remove',
|
||||
path: opPath,
|
||||
});
|
||||
}}
|
||||
type="button"
|
||||
>
|
||||
→
|
||||
</button>
|
||||
</div>,
|
||||
);
|
||||
Renderables.push(
|
||||
<Invocation
|
||||
context={context}
|
||||
description={description}
|
||||
Expression={Expression}
|
||||
key={opPath}
|
||||
onChange={onChange}
|
||||
op={op}
|
||||
path={opPath}
|
||||
/>,
|
||||
);
|
||||
opsCount += 1;
|
||||
}
|
||||
if (isKey(op)) {
|
||||
const current = compile({type: 'expression', ops: ops.slice(0, i + 1)}, latus)(context);
|
||||
description = description.children?.[op.key] || {type: 'undefined'};
|
||||
const {args, type} = description;
|
||||
if ('void' !== type) {
|
||||
description = {
|
||||
...context.constructor.descriptionFor(
|
||||
type,
|
||||
current,
|
||||
latus,
|
||||
),
|
||||
...(args ? {args} : {}),
|
||||
};
|
||||
}
|
||||
if (description.args && (!nextOp || !isInvocation(nextOp))) {
|
||||
const R = Renderables.pop();
|
||||
Renderables.push(
|
||||
<div
|
||||
className="expression__invocation-toggle-wrapper"
|
||||
key={`${opPath}-toggle-to`}
|
||||
>
|
||||
{R}
|
||||
<button
|
||||
className="expression__invocation-toggle to"
|
||||
onClick={((description, opPath) => () => {
|
||||
const parts = opPath.split('/');
|
||||
parts.push(parseInt(parts.pop(), 10) + 1);
|
||||
patch({
|
||||
op: 'add',
|
||||
path: parts.join('/'),
|
||||
value: {
|
||||
type: 'invoke',
|
||||
args: description.vararg
|
||||
? []
|
||||
: description.args.map(
|
||||
(arg) => ({
|
||||
...(false === arg.compile ? {compile: false} : {}),
|
||||
...(
|
||||
(types[arg.type] || types.undefined).create(
|
||||
(arg.options?.length || 0) > 0
|
||||
? arg.options[0].value
|
||||
: undefined,
|
||||
)
|
||||
),
|
||||
}),
|
||||
),
|
||||
},
|
||||
});
|
||||
})(description, opPath)}
|
||||
type="button"
|
||||
>
|
||||
→
|
||||
</button>
|
||||
</div>,
|
||||
);
|
||||
}
|
||||
}
|
||||
if (isInvocation(op)) {
|
||||
if ('void' !== description.type) {
|
||||
description = context.constructor.descriptionFor(
|
||||
description.type,
|
||||
undefined,
|
||||
latus,
|
||||
);
|
||||
}
|
||||
}
|
||||
} while (i++ < ops.length - 1);
|
||||
if (
|
||||
description.children
|
||||
|| 'undefined' === description.type
|
||||
) {
|
||||
const opPath = join(path, 'ops', opsCount.toString());
|
||||
Renderables.push(
|
||||
<Key
|
||||
childrenDescription={{
|
||||
'.': {label: '', type: description.type},
|
||||
...(description.children || {}),
|
||||
'[key]': {label: '', type: 'undefined'},
|
||||
'[invoke]': {label: '', type: 'undefined'},
|
||||
}}
|
||||
key={opPath}
|
||||
onChange={onChange}
|
||||
path={opPath}
|
||||
value="."
|
||||
/>,
|
||||
);
|
||||
opsCount += 1;
|
||||
}
|
||||
const [lastOp] = ops.slice(-1);
|
||||
if (
|
||||
'void' === type
|
||||
&& isKey(lastOp)
|
||||
) {
|
||||
const opPath = join(path, 'value');
|
||||
Renderables.push(
|
||||
<Key
|
||||
childrenDescription={{
|
||||
'≡': {label: '', type: description.type},
|
||||
'≔': {label: '', type: 'void'},
|
||||
}}
|
||||
key={opPath}
|
||||
onChange={(event, value) => {
|
||||
if ('≡' === value) {
|
||||
patch({
|
||||
op: 'remove',
|
||||
path: opPath,
|
||||
});
|
||||
}
|
||||
else {
|
||||
patch({
|
||||
path: opPath,
|
||||
value: (types[description.type] || types.undefined).create(),
|
||||
});
|
||||
}
|
||||
}}
|
||||
path={opPath}
|
||||
value={expressionValue ? '≔' : '≡'}
|
||||
/>,
|
||||
);
|
||||
if (expressionValue) {
|
||||
const expressionType = isKey(lastOp) && description.args
|
||||
? 'function'
|
||||
: description.type;
|
||||
Renderables.push(
|
||||
<Variant
|
||||
context={context}
|
||||
onChange={(event, value, localPath) => {
|
||||
patch({
|
||||
path: localPath,
|
||||
value,
|
||||
});
|
||||
}}
|
||||
key={join(opPath, 'expression')}
|
||||
path={opPath}
|
||||
type={expressionType}
|
||||
value={expressionValue}
|
||||
vararg={vararg}
|
||||
/>,
|
||||
);
|
||||
}
|
||||
}
|
||||
let realType = description.type;
|
||||
if (isKey(lastOp) && description.args) {
|
||||
realType = 'function';
|
||||
}
|
||||
if (expressionValue) {
|
||||
realType = 'undefined' === description.type ? 'undefined' : 'void';
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className={classnames(
|
||||
'expression',
|
||||
{'wrong-type': 'any' !== type && 'undefined' !== type && realType !== type},
|
||||
{'undefined-type': 'undefined' === realType},
|
||||
)}
|
||||
>
|
||||
{Renderables}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Expression.defaultProps = {
|
||||
vararg: false,
|
||||
};
|
||||
|
||||
Expression.displayName = 'Expression';
|
||||
|
||||
Expression.propTypes = {
|
||||
context: PropTypes.shape({
|
||||
constructor: PropTypes.func,
|
||||
describeChildren: PropTypes.func,
|
||||
get: PropTypes.func,
|
||||
}).isRequired,
|
||||
value: PropTypes.shape({
|
||||
ops: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
key: PropTypes.string,
|
||||
}),
|
||||
),
|
||||
// eslint-disable-next-line react/forbid-prop-types
|
||||
value: PropTypes.any,
|
||||
}).isRequired,
|
||||
vararg: PropTypes.bool,
|
||||
path: PropTypes.string.isRequired,
|
||||
type: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default Expression;
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
.expression {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
button, .button {
|
||||
color: #00bdd6;
|
||||
}
|
||||
&.wrong-type {
|
||||
background-color: rgb(180, 0, 0);
|
||||
padding: 0.5em;
|
||||
}
|
||||
&.undefined-type {
|
||||
background-color: rgb(180, 180, 0);
|
||||
padding: 0.5em;
|
||||
}
|
||||
> .expression {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.expression__invocation-toggle-wrapper {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.expression__invocation-toggle {
|
||||
background: #222222;
|
||||
margin: 0;
|
||||
padding: 0.25em;
|
||||
pointer-events: auto;
|
||||
&:hover {
|
||||
background: #333333;
|
||||
}
|
||||
&.to {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,137 +0,0 @@
|
|||
import './invocation.scss';
|
||||
|
||||
import {join} from 'path';
|
||||
|
||||
import {useJsonPatcher} from '@avocado/resource-persea';
|
||||
import {
|
||||
PropTypes,
|
||||
React,
|
||||
} from '@latus/react';
|
||||
|
||||
import Variant from '../help/variant';
|
||||
import Key from './key';
|
||||
|
||||
const Invocation = ({
|
||||
context,
|
||||
description,
|
||||
onChange,
|
||||
op,
|
||||
path,
|
||||
}) => {
|
||||
const patch = useJsonPatcher();
|
||||
const argComponent = (arg, i) => {
|
||||
const argPath = join(path, 'args', i.toString());
|
||||
if ('undefined' === arg.type) {
|
||||
return (
|
||||
<Key
|
||||
childrenDescription={{
|
||||
'...': {label: '', type: 'undefined'},
|
||||
'[literal]': {label: '', type: 'undefined'},
|
||||
...context.describeChildren().children,
|
||||
'[key]': {label: '', type: 'undefined'},
|
||||
}}
|
||||
key={path}
|
||||
onChange={(event, value) => {
|
||||
if ('[literal]' === value) {
|
||||
patch({
|
||||
type: 'add',
|
||||
path: argPath,
|
||||
value: {
|
||||
type: 'literal',
|
||||
value: null,
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
patch({
|
||||
type: 'add',
|
||||
path: argPath,
|
||||
value: {
|
||||
type: 'expression',
|
||||
ops: [
|
||||
{
|
||||
type: 'key',
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
onChange(false, value, join(argPath, 'ops/0/key'));
|
||||
}}
|
||||
path={argPath}
|
||||
value="..."
|
||||
/>
|
||||
);
|
||||
}
|
||||
let darg;
|
||||
if ('function' === typeof description?.args) {
|
||||
darg = description?.args(i);
|
||||
}
|
||||
else {
|
||||
const j = description.vararg ? i % description?.args?.length : i;
|
||||
darg = description?.args?.[j];
|
||||
}
|
||||
const type = darg?.type || 'undefined';
|
||||
return (
|
||||
<Variant
|
||||
context={context}
|
||||
onChange={onChange}
|
||||
options={darg?.options}
|
||||
path={argPath}
|
||||
type={type}
|
||||
value={arg}
|
||||
vararg={
|
||||
'undefined' === type
|
||||
|| description.vararg
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
const isVarArg = 'undefined' === description.type || description.vararg;
|
||||
const args = op.args.concat();
|
||||
if (isVarArg) {
|
||||
args.push({type: 'undefined'});
|
||||
}
|
||||
return (
|
||||
<div className="invocation">
|
||||
{args.length > 0 && (
|
||||
<div className="invocation__args-wrapper">
|
||||
{
|
||||
args.map((arg, i) => (
|
||||
<div
|
||||
key={join(path, 'args', i.toString())}
|
||||
className="invocation__arg"
|
||||
>
|
||||
{argComponent(arg, i)}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Invocation.displayName = 'Invocation';
|
||||
|
||||
Invocation.propTypes = {
|
||||
context: PropTypes.shape({
|
||||
describeChildren: PropTypes.func,
|
||||
}).isRequired,
|
||||
description: PropTypes.shape({
|
||||
args: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
options: PropTypes.arrayOf(PropTypes.any),
|
||||
type: PropTypes.string,
|
||||
}),
|
||||
),
|
||||
type: PropTypes.string,
|
||||
vararg: PropTypes.bool,
|
||||
}).isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
op: PropTypes.shape({
|
||||
args: PropTypes.arrayOf(PropTypes.any),
|
||||
}).isRequired,
|
||||
path: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default Invocation;
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
.invocation {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-left: 0.25em;
|
||||
> .expression {
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
&:after {
|
||||
color: #00bdd6;
|
||||
content: ')';
|
||||
font-size: 1.5em;
|
||||
}
|
||||
&:before {
|
||||
color: #00bdd6;
|
||||
content: '(';
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.invocation__args-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin: 0.25em;
|
||||
}
|
||||
|
||||
.invocation__arg {
|
||||
align-items: center;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
display: flex;
|
||||
padding: 0.5em;
|
||||
position: relative;
|
||||
&:nth-of-type(2n+1) {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
&:after {
|
||||
color: #00bdd6;
|
||||
content: ',';
|
||||
font-size: 1.5em;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
&:last-of-type {
|
||||
&::after {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.invocation__arg-sep {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
|
@ -1,140 +0,0 @@
|
|||
import './key.scss';
|
||||
|
||||
import {join} from 'path';
|
||||
|
||||
import {useJsonPatcher} from '@avocado/resource-persea';
|
||||
import {
|
||||
PropTypes,
|
||||
React,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from '@latus/react';
|
||||
import natsort from 'natsort';
|
||||
|
||||
const sorter = natsort({insensitive: true});
|
||||
|
||||
const Key = ({
|
||||
childrenDescription,
|
||||
onChange,
|
||||
path,
|
||||
value,
|
||||
}) => {
|
||||
const patch = useJsonPatcher();
|
||||
const customizeRef = useRef();
|
||||
const [customization, setCustomization] = useState(false);
|
||||
const [customizationPath, setCustomizationPath] = useState('/');
|
||||
useEffect(() => {
|
||||
customizeRef.current?.focus();
|
||||
});
|
||||
const optionKeys = Object.entries(childrenDescription).map(([key]) => key);
|
||||
if (-1 === optionKeys.indexOf(value)) {
|
||||
optionKeys.unshift(value);
|
||||
}
|
||||
const options = optionKeys
|
||||
.sort(sorter)
|
||||
.map((key) => (
|
||||
<option key={key} value={key}>{key}</option>
|
||||
));
|
||||
const confirmCustomization = () => {
|
||||
const parts = customizationPath.split('/');
|
||||
parts.pop();
|
||||
setCustomization(false);
|
||||
setCustomizationPath('/');
|
||||
if ('value' === parts[parts.length - 1]) {
|
||||
patch({
|
||||
type: 'add',
|
||||
path: parts.join('/'),
|
||||
value: {
|
||||
type: 'expression',
|
||||
ops: [
|
||||
{
|
||||
type: 'key',
|
||||
key: customization,
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
}
|
||||
else {
|
||||
patch({
|
||||
type: 'add',
|
||||
path: parts.join('/'),
|
||||
value: {
|
||||
type: 'key',
|
||||
},
|
||||
});
|
||||
onChange(false, customization, join(parts.join('/'), 'key'));
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div
|
||||
className="key"
|
||||
>
|
||||
{
|
||||
false === customization
|
||||
? (
|
||||
<select
|
||||
className="key__selector"
|
||||
onChange={(event) => {
|
||||
const localPath = join(path, 'key');
|
||||
const {target: {value}} = event;
|
||||
switch (value) {
|
||||
case '[key]': {
|
||||
setCustomization('');
|
||||
setCustomizationPath(localPath);
|
||||
break;
|
||||
}
|
||||
case '[invoke]': {
|
||||
const parts = localPath.split('/');
|
||||
parts.pop();
|
||||
patch({
|
||||
type: 'add',
|
||||
path: parts.join('/'),
|
||||
value: {
|
||||
type: 'invoke',
|
||||
args: [],
|
||||
},
|
||||
});
|
||||
break;
|
||||
}
|
||||
default:
|
||||
onChange(event, value, localPath);
|
||||
}
|
||||
}}
|
||||
value={value}
|
||||
>
|
||||
{options}
|
||||
</select>
|
||||
)
|
||||
: (
|
||||
<input
|
||||
type="text"
|
||||
onBlur={confirmCustomization}
|
||||
onChange={({target: {value}}) => {
|
||||
setCustomization(value);
|
||||
}}
|
||||
onKeyPress={(event) => {
|
||||
if ('Enter' === event.key) {
|
||||
confirmCustomization(event);
|
||||
}
|
||||
}}
|
||||
ref={customizeRef}
|
||||
value={customization}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Key.displayName = 'Key';
|
||||
|
||||
Key.propTypes = {
|
||||
childrenDescription: PropTypes.shape({}).isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
path: PropTypes.string.isRequired,
|
||||
value: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default Key;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
.key__selector {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
|
@ -1,149 +0,0 @@
|
|||
import './expressions.scss';
|
||||
|
||||
import {join} from 'path';
|
||||
|
||||
import {useJsonPatcher} from '@avocado/resource-persea';
|
||||
import {
|
||||
PropTypes,
|
||||
React,
|
||||
useLatus,
|
||||
} from '@latus/react';
|
||||
|
||||
import compile from '../../compilers/compile';
|
||||
import Expression from './expression';
|
||||
|
||||
const Expressions = ({
|
||||
context,
|
||||
value: {expressions},
|
||||
path,
|
||||
}) => {
|
||||
const latus = useLatus();
|
||||
const patch = useJsonPatcher();
|
||||
const createExpressionSwapper = (l, r) => () => {
|
||||
const le = expressions[l];
|
||||
const re = expressions[r];
|
||||
patch([
|
||||
{
|
||||
path: join(path, 'expressions', l.toString()),
|
||||
value: re,
|
||||
},
|
||||
{
|
||||
path: join(path, 'expressions', r.toString()),
|
||||
value: le,
|
||||
},
|
||||
]);
|
||||
};
|
||||
let currentContext = context;
|
||||
return (
|
||||
<div className="expressions">
|
||||
{
|
||||
expressions.map((expression, i) => {
|
||||
currentContext = currentContext.clone();
|
||||
const {ops} = expression;
|
||||
if (3 === ops.length && 'context' === ops[0].key && 'add' === ops[1].key) {
|
||||
const [key, value] = ops[2].args;
|
||||
if ('undefined' !== key.type && 'undefined' !== value.type) {
|
||||
currentContext.add(
|
||||
compile(key, latus)(currentContext),
|
||||
compile(value, latus)(currentContext),
|
||||
);
|
||||
}
|
||||
}
|
||||
const expressionPath = join(path, 'expressions', i.toString());
|
||||
return (
|
||||
<div
|
||||
className="expressions__expression-wrapper"
|
||||
key={expressionPath}
|
||||
>
|
||||
<div className="expressions__move-expression">
|
||||
{i > 0 && (
|
||||
<button
|
||||
className="expressions__move-expression-up"
|
||||
onClick={createExpressionSwapper(i, i - 1)}
|
||||
type="button"
|
||||
>
|
||||
🠹
|
||||
</button>
|
||||
)}
|
||||
<div className="expressions__move-expression-spacer" />
|
||||
{i < expressions.length - 1 && (
|
||||
<button
|
||||
className="expressions__move-expression-down"
|
||||
onClick={createExpressionSwapper(i, i + 1)}
|
||||
type="button"
|
||||
>
|
||||
🠻
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<Expression
|
||||
context={currentContext}
|
||||
value={expression}
|
||||
path={expressionPath}
|
||||
type="void"
|
||||
/>
|
||||
<button
|
||||
className="expressions__remove-expression"
|
||||
onClick={() => {
|
||||
patch({
|
||||
op: 'remove',
|
||||
path: expressionPath,
|
||||
});
|
||||
}}
|
||||
type="button"
|
||||
>
|
||||
x
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
}
|
||||
<div className="expressions__expression-wrapper">
|
||||
<button
|
||||
className="expressions__add-expression"
|
||||
onClick={() => {
|
||||
patch({
|
||||
op: 'add',
|
||||
path: join(path, 'expressions/-'),
|
||||
value: {
|
||||
type: 'expression',
|
||||
ops: [
|
||||
{
|
||||
type: 'key',
|
||||
key: 'Flow',
|
||||
},
|
||||
{
|
||||
type: 'key',
|
||||
key: 'nop',
|
||||
},
|
||||
{
|
||||
type: 'invoke',
|
||||
args: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
}}
|
||||
type="button"
|
||||
>
|
||||
Add expression
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Expressions.displayName = 'Expressions';
|
||||
|
||||
Expressions.propTypes = {
|
||||
context: PropTypes.shape({}).isRequired,
|
||||
value: PropTypes.shape({
|
||||
type: PropTypes.string,
|
||||
expressions: PropTypes.arrayOf(
|
||||
PropTypes.shape({}),
|
||||
),
|
||||
}).isRequired,
|
||||
path: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default Expressions;
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
.expressions__expression-wrapper {
|
||||
align-items: center;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
&:nth-of-type(2n+1) {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
button, .button {
|
||||
color: #00bdd6;
|
||||
}
|
||||
}
|
||||
|
||||
.expressions__move-expression {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin: 0.5em;
|
||||
}
|
||||
|
||||
.expressions__move-expression-up,
|
||||
.expressions__move-expression-down {
|
||||
margin: 0;
|
||||
padding: 0 0.5em;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.expressions__move-expression-up
|
||||
+ .expressions__move-expression-spacer
|
||||
+ .expressions__move-expression-down {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.expressions__expression-wrapper > .expression {
|
||||
margin-right: 0.5em;
|
||||
padding: 0.5em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.expressions__remove-expression {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
font-size: 0.8em;
|
||||
margin-left: auto;
|
||||
margin-right: 0.5em;
|
||||
padding: 1em;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.expressions__add-expression {
|
||||
font-size: 0.8em;
|
||||
margin-left: 0.5em;
|
||||
margin-right: 0.5em;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
import {
|
||||
PropTypes,
|
||||
React,
|
||||
useLatus,
|
||||
} from '@latus/react';
|
||||
|
||||
const Variant = (props) => {
|
||||
const {value} = props;
|
||||
const {type} = value;
|
||||
const latus = useLatus();
|
||||
const Component = latus.get('%behavior-components')[type];
|
||||
return (
|
||||
<Component
|
||||
value={value}
|
||||
// eslint-disable-next-line react/jsx-props-no-spreading
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
Variant.displayName = 'Variant';
|
||||
|
||||
Variant.propTypes = {
|
||||
onChange: PropTypes.func.isRequired,
|
||||
path: PropTypes.string.isRequired,
|
||||
value: PropTypes.shape({
|
||||
type: PropTypes.string,
|
||||
}).isRequired,
|
||||
};
|
||||
|
||||
export default Variant;
|
||||
|
|
@ -1,263 +0,0 @@
|
|||
import './literal.scss';
|
||||
|
||||
import {join} from 'path';
|
||||
|
||||
import {useJsonPatcher} from '@avocado/resource-persea';
|
||||
import {
|
||||
Rectangle,
|
||||
Vector,
|
||||
} from '@avocado/math-persea';
|
||||
import {
|
||||
Json,
|
||||
Number,
|
||||
} from '@avocado/react';
|
||||
import {
|
||||
PropTypes,
|
||||
React,
|
||||
useLatus,
|
||||
useState,
|
||||
} from '@latus/react';
|
||||
|
||||
import Context from '../../context';
|
||||
import Key from './expression/key';
|
||||
|
||||
const Literal = ({
|
||||
context,
|
||||
onChange,
|
||||
path,
|
||||
type,
|
||||
options,
|
||||
value,
|
||||
vararg,
|
||||
}) => {
|
||||
const latus = useLatus();
|
||||
const patch = useJsonPatcher();
|
||||
const [selectingType, setSelectingType] = useState(false);
|
||||
const types = latus.get('%behavior-types');
|
||||
const setLiteralType = (type) => {
|
||||
const value = (types[type] || types.undefined).create();
|
||||
if (null !== value) {
|
||||
patch({
|
||||
op: 'replace',
|
||||
path,
|
||||
value,
|
||||
});
|
||||
}
|
||||
setSelectingType(false);
|
||||
};
|
||||
// eslint-disable-next-line react/destructuring-assignment
|
||||
const contextDescription = context.describeChildren();
|
||||
const valueComponent = (path, type, {value}) => {
|
||||
switch (type) {
|
||||
case 'bool': {
|
||||
return (
|
||||
<select
|
||||
onChange={(event) => {
|
||||
onChange(event, !!event.target.value, path);
|
||||
}}
|
||||
value={null === value ? false : value}
|
||||
>
|
||||
<option value={false}>false</option>
|
||||
<option value>true</option>
|
||||
</select>
|
||||
);
|
||||
}
|
||||
case 'number':
|
||||
return (
|
||||
<Number
|
||||
onChange={(event, value) => {
|
||||
onChange(event, value, path);
|
||||
}}
|
||||
value={null === value ? 0 : value}
|
||||
/>
|
||||
);
|
||||
case 'string':
|
||||
return (
|
||||
<input
|
||||
type="text"
|
||||
onChange={(event) => {
|
||||
onChange(event, event.target.value, path);
|
||||
}}
|
||||
value={null === value ? '' : value}
|
||||
/>
|
||||
);
|
||||
case 'object':
|
||||
return (
|
||||
<Json
|
||||
onChange={(event, value) => {
|
||||
onChange(event, value, path);
|
||||
}}
|
||||
json={null === value ? {} : value}
|
||||
/>
|
||||
);
|
||||
case 'vector':
|
||||
return (
|
||||
<Vector
|
||||
onChange={(event, value) => {
|
||||
onChange(event, value, path);
|
||||
}}
|
||||
value={null === value ? [0, 0] : value}
|
||||
/>
|
||||
);
|
||||
case 'rectangle':
|
||||
return (
|
||||
<Rectangle
|
||||
onChange={(event, value) => {
|
||||
onChange(event, value, path);
|
||||
}}
|
||||
value={null === value ? [0, 0, 0, 0] : value}
|
||||
/>
|
||||
);
|
||||
case 'function':
|
||||
case 'null':
|
||||
case 'array':
|
||||
return null;
|
||||
default: {
|
||||
const elements = [];
|
||||
if ('undefined' === type || 'any' === type) {
|
||||
elements.push(
|
||||
<select
|
||||
key={join(path, 'equality')}
|
||||
onChange={({target: {value}}) => {
|
||||
setSelectingType('≟' === value);
|
||||
}}
|
||||
value={selectingType ? '≟' : '='}
|
||||
>
|
||||
<option>=</option>
|
||||
<option>≟</option>
|
||||
</select>,
|
||||
);
|
||||
}
|
||||
if ('undefined' !== typeof value) {
|
||||
elements.push(
|
||||
<div className="component" key={join(path, 'component')}>
|
||||
{
|
||||
valueComponent(
|
||||
path,
|
||||
Context.descriptionFor(undefined, value, latus).type,
|
||||
{value},
|
||||
)
|
||||
}
|
||||
</div>,
|
||||
);
|
||||
}
|
||||
return <>{elements}</>;
|
||||
}
|
||||
}
|
||||
};
|
||||
const {type: inferred} = Context.descriptionFor(undefined, value.value, latus);
|
||||
const typeKey = `[literal ${inferred}]`;
|
||||
return (
|
||||
<>
|
||||
{
|
||||
selectingType
|
||||
? (
|
||||
<select
|
||||
onChange={({target: {value}}) => {
|
||||
setLiteralType(value);
|
||||
}}
|
||||
>
|
||||
<option>- Select type -</option>
|
||||
{
|
||||
Object.entries(types)
|
||||
.filter(([type, value]) => value.create && type)
|
||||
.map(([type]) => type)
|
||||
.map((type) => <option key={type} value={type}>{type}</option>)
|
||||
}
|
||||
</select>
|
||||
)
|
||||
: (
|
||||
<Key
|
||||
childrenDescription={{
|
||||
...(
|
||||
'undefined' === type
|
||||
? {'.': {label: '', type: 'undefined'}}
|
||||
: {}
|
||||
),
|
||||
...(
|
||||
vararg
|
||||
? {'...': {label: '', type: 'undefined'}}
|
||||
: {}
|
||||
),
|
||||
[typeKey]: {label: '', type: value.type},
|
||||
...contextDescription.children,
|
||||
'[key]': {label: '', type: value.type},
|
||||
}}
|
||||
onChange={(event, value) => {
|
||||
if ('.' === value || '...' === value) {
|
||||
patch({
|
||||
op: 'remove',
|
||||
path,
|
||||
});
|
||||
return;
|
||||
}
|
||||
patch({
|
||||
op: 'replace',
|
||||
path,
|
||||
value: {
|
||||
type: 'expression',
|
||||
ops: [
|
||||
{
|
||||
type: 'key',
|
||||
key: value,
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
}}
|
||||
path={path}
|
||||
value={typeKey}
|
||||
/>
|
||||
)
|
||||
}
|
||||
<div className="literal">
|
||||
{
|
||||
options.length > 0
|
||||
? (
|
||||
<select
|
||||
onChange={(event) => {
|
||||
onChange(event, options[event.target.value].value, join(path, 'value'));
|
||||
}}
|
||||
value={options.findIndex(({value: optionValue}) => value.value === optionValue)}
|
||||
>
|
||||
{
|
||||
Object.entries(options)
|
||||
.map(([key, {label}]) => (
|
||||
<option
|
||||
key={label}
|
||||
value={key}
|
||||
>
|
||||
{label}
|
||||
</option>
|
||||
))
|
||||
}
|
||||
</select>
|
||||
)
|
||||
: valueComponent(join(path, 'value'), type, value)
|
||||
}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Literal.defaultProps = {
|
||||
options: [],
|
||||
vararg: false,
|
||||
};
|
||||
|
||||
Literal.displayName = 'Literal';
|
||||
|
||||
Literal.propTypes = {
|
||||
context: PropTypes.shape({
|
||||
describeChildren: PropTypes.func,
|
||||
}).isRequired,
|
||||
type: PropTypes.string.isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
options: PropTypes.arrayOf(PropTypes.any),
|
||||
path: PropTypes.string.isRequired,
|
||||
// eslint-disable-next-line react/forbid-prop-types
|
||||
value: PropTypes.any.isRequired,
|
||||
vararg: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default Literal;
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
.literal {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
pointer-events: auto;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user