38 lines
1.0 KiB
TypeScript
38 lines
1.0 KiB
TypeScript
import CodeEditor from '@uiw/react-textarea-code-editor';
|
|
import { useEffect, useState } from 'react';
|
|
import { clsx } from 'clsx';
|
|
|
|
type Props = {
|
|
value?: string;
|
|
onChange?: (data: string) => void;
|
|
readonly?: boolean;
|
|
className?: string;
|
|
};
|
|
export const TextArea = (props: Props) => {
|
|
const [code, setCode] = useState<string>('');
|
|
useEffect(() => {
|
|
setCode(props.value || '');
|
|
}, []);
|
|
const _onChange = (value: string) => {
|
|
setCode(value);
|
|
props.onChange && props.onChange(value);
|
|
};
|
|
return (
|
|
<div className={clsx('min-h-16 max-h-52 overflow-scroll p-1 ', props.className)}>
|
|
<CodeEditor
|
|
value={code}
|
|
language='js'
|
|
className='border rounded-sm'
|
|
readOnly={props.readonly}
|
|
placeholder='Please enter JS code.'
|
|
onChange={(evn) => _onChange(evn.target.value)}
|
|
padding={10}
|
|
style={{
|
|
backgroundColor: '#f5f5f5',
|
|
fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|