feat: add, remove, rename routines
This commit is contained in:
parent
a15a921f68
commit
84f7d71775
|
@ -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
|
||||
}
|
||||
|
||||
<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>
|
||||
|
|
|
@ -1,3 +1,9 @@
|
|||
.behaved__routines-tab-bar {
|
||||
display: flex;
|
||||
margin-bottom: 1em;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.behaved__routines-label[class] {
|
||||
flex-wrap: nowrap;
|
||||
> .react-tabs {
|
||||
|
|
Loading…
Reference in New Issue
Block a user