stargaze-studio/components/forms/FormTextArea.tsx
Arda Nakışçı aa42f8763a
Implement contract UIs (#2)
* Add instantiate page for minter

* Add query page to minter contract

* Add execute page for minter contract

* Add contracts index page

* Refaactor sg721 helper files

* Add instantiate page

* Add query page for sg721

* Add execute page for sg721 contract

* Copy page templates for whitelist contracts

* Add instantitate for whitelist contract

* Add query page to whitelist contract

* Add execute page for whitelist contract
2022-07-19 10:53:03 +03:00

56 lines
1.6 KiB
TypeScript

import clsx from 'clsx'
import { FormControl } from 'components/FormControl'
import type { ComponentPropsWithRef } from 'react'
import { forwardRef, useImperativeHandle, useRef } from 'react'
import { JsonValidStatus } from './JsonValidStatus'
import { StyledTextArea } from './StyledTextArea'
interface BaseProps {
id: string
name: string
title: string
subtitle?: string
isRequired?: boolean
}
type SlicedInputProps = Omit<ComponentPropsWithRef<'textarea'>, keyof BaseProps>
export type FormTextAreaProps = BaseProps & SlicedInputProps
export const FormTextArea = forwardRef<HTMLTextAreaElement, FormTextAreaProps>(
function FormTextArea(props, ref) {
const { id, name, title, subtitle, isRequired, ...rest } = props
return (
<FormControl htmlId={id} isRequired={isRequired} subtitle={subtitle} title={title}>
<StyledTextArea id={id} name={name} ref={ref} {...rest} />
</FormControl>
)
},
//
)
export const JsonTextArea = forwardRef<HTMLTextAreaElement, FormTextAreaProps>(
function JsonTextArea(props, ref) {
const { id, name, title, subtitle, className, ...rest } = props
const innerRef = useRef<HTMLTextAreaElement>(null)
useImperativeHandle(ref, () => innerRef.current!)
return (
<FormControl htmlId={id} subtitle={subtitle} title={title}>
<StyledTextArea
className={clsx('min-h-[8rem] font-mono text-sm', className)}
id={id}
name={name}
ref={innerRef}
{...rest}
/>
<JsonValidStatus textAreaRef={innerRef} />
</FormControl>
)
},
//
)