feat: particle tabs

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

@@ -4,28 +4,45 @@ import {
   memo,
   PropTypes,
   React,
+  useLatus,
 } from '@latus/react';
+import {
+  JsonTabs,
+} from '@persea/json';
 
 import Particle from './emitter/particle';
 
 const Emitter = memo(({
   entity,
-  json: {params: {particles}},
+  json,
   path,
-}) => (
-  <div className="emitter">
-    {
-      Object.keys(particles).map((key) => (
-        <Particle
-          entity={entity}
-          key={key}
-          particle={particles[key]}
-          path={join(path, 'params/particles', key)}
-        />
-      ))
-    }
-  </div>
-));
+}) => {
+  const latus = useLatus();
+  const {Emitted} = latus.get('%traits');
+  return (
+    <div className="emitter">
+      <JsonTabs
+        createPanel={(particle, key) => (
+          <Particle
+            entity={entity}
+            key={key}
+            particle={particle}
+            path={join(path, 'params/particles', key)}
+          />
+        )}
+        defaultValue={{
+          rate: 0,
+          count: 1,
+          traits: {
+            Emitted: Emitted.withDefaults({}),
+          },
+        }}
+        path={join(path, 'params/particles')}
+        map={json.params.particles}
+      />
+    </div>
+  );
+});
 
 Emitter.displayName = 'Emitter';