From 6b52c18a0d8ff61e2e934195a1210c5f4bd359ff Mon Sep 17 00:00:00 2001
From: cha0s <git@cha0s.io>
Date: Mon, 22 Jun 2020 05:39:15 -0500
Subject: [PATCH] feat: vector renderer

---
 src/client/types/vector.raw.scss          |  8 +++++
 src/client/types/vector.type-renderer.jsx | 44 +++++++++++++++++++++++
 2 files changed, 52 insertions(+)
 create mode 100644 src/client/types/vector.raw.scss
 create mode 100644 src/client/types/vector.type-renderer.jsx

diff --git a/src/client/types/vector.raw.scss b/src/client/types/vector.raw.scss
new file mode 100644
index 0000000..c1f7c14
--- /dev/null
+++ b/src/client/types/vector.raw.scss
@@ -0,0 +1,8 @@
+:scope {
+  align-items: center;
+  display: flex;
+}
+
+.separator {
+  margin: 0 0.25em;
+}
diff --git a/src/client/types/vector.type-renderer.jsx b/src/client/types/vector.type-renderer.jsx
new file mode 100644
index 0000000..cce0fa4
--- /dev/null
+++ b/src/client/types/vector.type-renderer.jsx
@@ -0,0 +1,44 @@
+import {compose} from '@avocado/core';
+import contempo from 'contempo';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import Number from './number.type-renderer';
+import propTypes from './prop-types';
+
+const decorate = compose(
+  contempo(require('./vector.raw.scss')),
+);
+
+const Vector = ({
+  dispatchers: {
+    onChange = () => {},
+  } = {},
+  value,
+}) => (
+  <span className="vector">
+    <Number.Component
+      dispatchers={{
+        onChange: (axe) => onChange([axe, value[1]]),
+      }}
+      value={value[0]}
+    />
+    <span className="separator">{' x '}</span>
+    <Number.Component
+      dispatchers={{
+        onChange: (axe) => onChange([value[0], axe]),
+      }}
+      value={value[1]}
+    />
+  </span>
+);
+
+Vector.propTypes = {
+  ...propTypes,
+  value: PropTypes.arrayOf(PropTypes.number).isRequired,
+};
+
+export default {
+  type: 'vector',
+  Component: decorate(Vector),
+};