refactor: Behaved

packages/entity/src/trait-components/behaved.jsx

@@ -3,18 +3,10 @@ import {join} from 'path';
 import {
   PropTypes,
   React,
-  useEffect,
-  usePrevious,
-  useRef,
-  useState,
 } from '@latus/react';
-import {useJsonPatcher} from '@persea/json';
 import {
-  Tab,
-  Tabs,
-  TabList,
-  TabPanel,
-} from 'react-tabs';
+  JsonTabs,
+} from '@persea/json';
 
 import Expressions from '../behavior-components/expressions';
 
@@ -22,133 +14,25 @@ const Behaved = ({
   entity,
   json,
   path,
-}) => {
-  const patch = useJsonPatcher();
-  const editingRef = useRef();
-  useEffect(() => {
-    editingRef.current?.focus();
-  });
-  const [isEditing, setIsEditing] = useState(false);
-  const [previousKey, setPreviousKey] = useState(false);
-  const previousEditing = usePrevious(isEditing);
-  useEffect(() => {
-    setTimeout(() => {
-      if (false === previousEditing) {
-        editingRef.current?.select();
-      }
-    }, 10);
-  }, [editingRef, isEditing, previousEditing]);
-  const tabs = [];
-  const tabPanels = [];
-  Object.entries(json.params.routines).forEach(([key, expressions]) => {
-    const routinePath = join(path, 'params/routines', key);
-    const confirmEdit = () => {
-      if (isEditing && previousKey !== isEditing) {
-        patch({
-          op: 'move',
-          from: join(path, 'params/routines', previousKey),
-          path: join(path, 'params/routines', isEditing),
-        });
-      }
-      setIsEditing(false);
-      setPreviousKey(false);
-    };
-    tabs.push(
-      <Tab
-        key={key}
-        onDoubleClick={() => {
-          setPreviousKey(key);
-          setIsEditing(key);
-        }}
-      >
-        {
-          key === previousKey
-            ? (
-              <input
-                type="text"
-                value={isEditing}
-                onBlur={confirmEdit}
-                onChange={({target: {value}}) => {
-                  setPreviousKey(key);
-                  setIsEditing(value);
-                }}
-                onKeyPress={({key}) => {
-                  if ('Enter' === key) {
-                    confirmEdit();
-                  }
-                }}
-                ref={editingRef}
-              />
-            )
-            : key
-        }
-        &nbsp;
-        <button
-          type="button"
-          className="routines__tab-remove"
-          onClick={() => {
-            patch({
-              op: 'remove',
-              path: routinePath,
-            });
-          }}
-        >
-          ✕
-        </button>
-
-      </Tab>,
-    );
-    tabPanels.push(
-      <TabPanel key={key}>
+}) => (
+  <div className="behaved">
+    <JsonTabs
+      createPanel={(expressions, key) => (
         <Expressions
           context={entity.context}
           value={expressions}
-          path={routinePath}
+          path={join(path, 'params/routines', key)}
         />
-      </TabPanel>,
-    );
-  });
-  return (
-    <div className="behaved">
-      <div className="label">
-        <div className="vertical">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: [],
-                  },
-                });
-                setIsEditing(name);
-                setPreviousKey(name);
-              }}
-              type="button"
-            >
-              +
-            </button>
-            <TabList>
-              {tabs}
-            </TabList>
-          </div>
-          <div className="routines__tab-panes">
-            {tabPanels}
-          </div>
-        </Tabs>
-      </div>
-    </div>
-  );
-};
+      )}
+      defaultValue={{
+        type: 'expressions',
+        expressions: [],
+      }}
+      path={join(path, 'params/routines')}
+      map={json.params.routines}
+    />
+  </div>
+);
 
 Behaved.displayName = 'Behaved';