jeffemmett
/
ggraph
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

string input type

This commit is contained in:
Orion Reed 2024-07-20 00:21:58 +02:00
parent ac5d5ce29f
commit 76fc86b35f
1 changed files with 36 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/SocialShapeUtil.tsx
View File

@ -10,7 +10,7 @@ import {
} from 'tldraw' } from 'tldraw'
import { getUserId } from './storeUtils' import { getUserId } from './storeUtils'
export type ValueType = "SCALAR" | "BOOLEAN" | "NONE" export type ValueType = "SCALAR" | "BOOLEAN" | "STRING" | "NONE"
export type ISocialShape = TLBaseShape< export type ISocialShape = TLBaseShape<
"social", "social",
@ -76,6 +76,8 @@ export class SocialShapeUtil extends BaseBoxShapeUtil<ISocialShape> {
valueType = 'SCALAR' valueType = 'SCALAR'
} else if (text.includes('BOOLEAN')) { } else if (text.includes('BOOLEAN')) {
valueType = 'BOOLEAN' valueType = 'BOOLEAN'
} else if (text.includes('STRING')) {
valueType = 'STRING'
} }
if (valueType !== shape.props.valueType) { if (valueType !== shape.props.valueType) {
@ -88,7 +90,7 @@ export class SocialShapeUtil extends BaseBoxShapeUtil<ISocialShape> {
return ( return (
<HTMLContainer style={{ padding: 4, borderRadius: 4, border: '1px solid #ccc', outline: shape.props.syntaxError ? '2px solid orange' : 'none' }} onPointerDown={(e) => e.stopPropagation()}> <HTMLContainer style={{ padding: 4, borderRadius: 4, border: '1px solid #ccc', outline: shape.props.syntaxError ? '2px solid orange' : 'none' }} onPointerDown={(e) => e.stopPropagation()}>
<textarea style={{ width: '100%', height: '50%', border: 'none', outline: 'none', resize: 'none', pointerEvents: 'all' }} value={shape.props.text} onChange={(e) => handleTextChange(e.target.value)} /> <textarea style={{ width: '100%', height: '50%', border: '1px solid lightgrey', resize: 'none', pointerEvents: 'all' }} value={shape.props.text} onChange={(e) => handleTextChange(e.target.value)} />
<ValueInterface <ValueInterface
type={shape.props.valueType ?? null} type={shape.props.valueType ?? null}
value={shape.props.values[currentUser] ?? defaultValues[shape.props.valueType as keyof typeof defaultValues]} value={shape.props.values[currentUser] ?? defaultValues[shape.props.valueType as keyof typeof defaultValues]}
@ -163,6 +165,38 @@ function ValueInterface({ type, value, values, onChange }: { type: ValueType; va
))} ))}
</div> </div>
</> </>
case 'STRING':
return (
<div style={{ display: 'flex', flexDirection: 'column', width: '100%', gap: '4px' }}>
<textarea
style={{
pointerEvents: 'all',
width: '100%',
minHeight: '60px',
resize: 'vertical',
padding: '4px',
boxSizing: 'border-box',
}}
value={value as string}
onChange={(e) => onChange(e.target.value)}
/>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<div style={{ display: 'flex', gap: '2px' }}>
{Object.values(values).filter(value => value !== '').map((_, i) => (
<div
key={`string-${i}`}
style={{
width: '8px',
height: '8px',
backgroundColor: 'blue',
borderRadius: '50%',
}}
/>
))}
</div>
</div>
</div>
);
case 'SCALAR': case 'SCALAR':
return ( return (
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '4px' }}> <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '4px' }}>