feat: add, remove, rename routines

This commit is contained in:
cha0s 2021-01-30 21:39:44 -06:00
parent a15a921f68
commit 84f7d71775
2 changed files with 119 additions and 7 deletions

View File

@ -1,6 +1,13 @@
import {join} from 'path';
import {PropTypes, React} from '@latus/react';
import {
PropTypes,
React,
useEffect,
useRef,
useState,
} from '@latus/react';
import {useJsonPatcher} from '@persea/json';
import {
Tab,
Tabs,
@ -15,12 +22,69 @@ const Behaved = ({
json,
path,
}) => {
const patch = useJsonPatcher();
const editingRef = useRef();
useEffect(() => {
editingRef.current?.focus();
});
const [isEditing, setIsEditing] = useState(false);
const tabs = [];
const tabPanels = [];
Object.entries(json.params.routines).forEach(([key, expressions]) => {
const routinePath = join(path, 'params/routines', key);
tabs.push(
<Tab key={key}>
{key}
<Tab
key={key}
onDoubleClick={() => {
if (false === isEditing) {
setTimeout(() => {
editingRef.current?.select();
}, 10);
}
setIsEditing(key);
}}
>
{
key === isEditing
? (
<input
type="text"
value={key}
onBlur={() => {
setIsEditing(false);
}}
onChange={({target: {value}}) => {
patch({
op: 'move',
from: routinePath,
path: join(path, 'params/routines', value),
});
setIsEditing(value);
}}
onKeyPress={({key}) => {
if ('Enter' === key) {
setIsEditing(false);
}
}}
ref={editingRef}
/>
)
: key
}
&nbsp;
<button
type="button"
className="routines__tab-remove"
onClick={() => {
patch({
op: 'remove',
path: routinePath,
});
}}
>
</button>
</Tab>,
);
tabPanels.push(
@ -28,7 +92,7 @@ const Behaved = ({
<Expressions
context={entity.context}
value={expressions}
path={join(path, 'params/routines', key)}
path={routinePath}
/>
</TabPanel>,
);
@ -38,9 +102,51 @@ const Behaved = ({
<div className="behaved__routines-label label">
<div className="behaved__routines-label-text">Routines</div>
<Tabs>
<div className="behaved__routines-tab-bar">
<button
className="traits__add-trait"
onClick={() => {
let i = 1;
let name = 'untitled';
while (json.params.routines[name]) {
name = `untitled (${i++})`;
}
patch({
op: 'add',
path: join(path, 'params/routines', name),
value: {
type: 'expressions',
expressions: [
{
type: 'expression',
ops: [
{
type: 'key',
key: 'Flow',
},
{
type: 'key',
key: 'nop',
},
{
type: 'invoke',
args: [],
},
],
},
],
},
});
setIsEditing(name);
}}
type="button"
>
+
</button>
<TabList>
{tabs}
</TabList>
</div>
<div className="routines__tab-panes">
{tabPanels}
</div>

View File

@ -1,3 +1,9 @@
.behaved__routines-tab-bar {
display: flex;
margin-bottom: 1em;
overflow: auto;
}
.behaved__routines-label[class] {
flex-wrap: nowrap;
> .react-tabs {