Implemented types.string

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,

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

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;
   }

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