From e8d32089ca43a24c83b1d83382d23910be20b264 Mon Sep 17 00:00:00 2001
From: Aria Minaei <aria.minaei@gmail.com>
Date: Mon, 13 Sep 2021 16:59:01 +0200
Subject: [PATCH] Implemented types.string

---
 .../propEditors/DeterminePropEditor.tsx       |  3 +-
 .../propEditors/StringPropEditor.tsx          | 33 +++++++++++++++++++
 .../uiComponents/form/BasicNumberInput.tsx    |  9 -----
 .../uiComponents/form/BasicStringInput.tsx    | 31 +++++++++++++++++
 4 files changed, 66 insertions(+), 10 deletions(-)
 create mode 100644 theatre/studio/src/panels/DetailPanel/propEditors/StringPropEditor.tsx
 create mode 100644 theatre/studio/src/uiComponents/form/BasicStringInput.tsx

diff --git a/theatre/studio/src/panels/DetailPanel/propEditors/DeterminePropEditor.tsx b/theatre/studio/src/panels/DetailPanel/propEditors/DeterminePropEditor.tsx
index dda8cb9..4a016e2 100644
--- a/theatre/studio/src/panels/DetailPanel/propEditors/DeterminePropEditor.tsx
+++ b/theatre/studio/src/panels/DetailPanel/propEditors/DeterminePropEditor.tsx
@@ -6,6 +6,7 @@ import BooleanPropEditor from './BooleanPropEditor'
 import CompoundPropEditor from './CompoundPropEditor'
 import NumberPropEditor from './NumberPropEditor'
 import StringLiteralPropEditor from './StringLiteralPropEditor'
+import StringPropEditor from './StringPropEditor'
 
 /**
  * Returns the PropTypeConfig by path. Assumes `path` is a valid prop path and that
@@ -64,7 +65,7 @@ const propEditorByPropType: {
 } = {
   compound: CompoundPropEditor,
   number: NumberPropEditor,
-  string: () => <></>,
+  string: StringPropEditor,
   enum: () => <></>,
   boolean: BooleanPropEditor,
   stringLiteral: StringLiteralPropEditor,
diff --git a/theatre/studio/src/panels/DetailPanel/propEditors/StringPropEditor.tsx b/theatre/studio/src/panels/DetailPanel/propEditors/StringPropEditor.tsx
new file mode 100644
index 0000000..3320516
--- /dev/null
+++ b/theatre/studio/src/panels/DetailPanel/propEditors/StringPropEditor.tsx
@@ -0,0 +1,33 @@
+import type {PropTypeConfig_String} from '@theatre/core/propTypes'
+import type SheetObject from '@theatre/core/sheetObjects/SheetObject'
+import React, {useCallback} from 'react'
+import {useEditingToolsForPrimitiveProp} from './utils/useEditingToolsForPrimitiveProp'
+import {SingleRowPropEditor} from './utils/SingleRowPropEditor'
+import BasicStringInput from '@theatre/studio/uiComponents/form/BasicStringInput'
+
+const StringPropEditor: React.FC<{
+  propConfig: PropTypeConfig_String
+  pointerToProp: SheetObject['propsP']
+  obj: SheetObject
+}> = ({propConfig, pointerToProp, obj}) => {
+  const stuff = useEditingToolsForPrimitiveProp<string>(
+    pointerToProp,
+    obj,
+    propConfig,
+  )
+
+  const onChange = useCallback(
+    (el: React.ChangeEvent<HTMLInputElement>) => {
+      stuff.permenantlySetValue(String(el.target.value))
+    },
+    [propConfig, pointerToProp, obj],
+  )
+
+  return (
+    <SingleRowPropEditor {...{stuff, propConfig, pointerToProp}}>
+      <BasicStringInput value={stuff.value} onChange={onChange} />
+    </SingleRowPropEditor>
+  )
+}
+
+export default StringPropEditor
diff --git a/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx b/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx
index c5946cb..626247a 100644
--- a/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx
+++ b/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx
@@ -1,6 +1,4 @@
-import {theme} from '@theatre/studio/css'
 import {clamp, isInteger, round} from 'lodash-es'
-import {darken, lighten} from 'polished'
 import type {MutableRefObject} from 'react'
 import React, {useMemo, useRef, useState} from 'react'
 import styled from 'styled-components'
@@ -53,13 +51,6 @@ const Input = styled.input`
   height: calc(100% - 4px);
   border-radius: 2px;
 
-  /* &:hover,
-  &:focus,
-  ${Container}.dragging > & {
-    background: ${darken(0.9, theme.panel.bg)};
-    border: 1px solid ${lighten(0.1, theme.panel.bg)};
-  } */
-
   &:focus {
     cursor: text;
   }
diff --git a/theatre/studio/src/uiComponents/form/BasicStringInput.tsx b/theatre/studio/src/uiComponents/form/BasicStringInput.tsx
new file mode 100644
index 0000000..163f2ee
--- /dev/null
+++ b/theatre/studio/src/uiComponents/form/BasicStringInput.tsx
@@ -0,0 +1,31 @@
+import styled from 'styled-components'
+
+const BasicStringInput = styled.input.attrs({type: 'text'})`
+  background: transparent;
+  border: 1px solid transparent;
+  color: rgba(255, 255, 255, 0.9);
+  padding: 1px 6px;
+  font: inherit;
+  outline: none;
+  cursor: text;
+  text-align: left;
+  width: 100%;
+  height: calc(100% - 4px);
+  border-radius: 2px;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+
+  &:hover {
+    background-color: #10101042;
+    border-color: #00000059;
+  }
+
+  &:hover,
+  &:focus {
+    cursor: text;
+    background-color: #10101042;
+    border-color: #00000059;
+  }
+`
+
+export default BasicStringInput