Better fix the create market focus issues. Expand to 4 lines when you add many chars to a question.

This commit is contained in:
James Grugett 2022-03-06 00:48:08 -08:00
parent d8681b043c
commit a8fd4c8014

View File

@ -1,5 +1,6 @@
import { SparklesIcon, XIcon } from '@heroicons/react/solid'
import { Avatar } from './avatar'
import { useEffect, useRef, useState } from 'react'
import { useRef, useState } from 'react'
import { Spacer } from './layout/spacer'
import { NewContract } from '../pages/create'
import { firebaseLogin, User } from '../lib/firebase/users'
@ -7,7 +8,6 @@ import { ContractsGrid } from './contracts-list'
import { Contract } from '../../common/contract'
import { Col } from './layout/col'
import clsx from 'clsx'
import { SparklesIcon } from '@heroicons/react/solid'
import { Row } from './layout/row'
export function FeedPromo(props: { hotContracts: Contract[] }) {
@ -69,7 +69,8 @@ export default function FeedCreate(props: {
}) {
const { user, tag, className } = props
const [question, setQuestion] = useState('')
const [focused, setFocused] = useState(false)
const [isExpanded, setIsExpanded] = useState(false)
const inputRef = useRef<HTMLTextAreaElement | null>()
const placeholders = [
'Will anyone I know get engaged this year?',
@ -86,60 +87,60 @@ export default function FeedCreate(props: {
)
const placeholder = props.placeholder ?? `e.g. ${placeholders[randIndex]}`
const panelRef = useRef<HTMLElement | null>()
const inputRef = useRef<HTMLTextAreaElement | null>()
useEffect(() => {
const onClick = () => {
if (
panelRef.current &&
document.activeElement &&
!panelRef.current.contains(document.activeElement)
)
setFocused(false)
}
window.addEventListener('click', onClick)
return () => window.removeEventListener('click', onClick)
})
return (
<div
className={clsx(
'mt-2 w-full rounded bg-white p-4 shadow-md',
question || focused ? 'ring-2 ring-indigo-300' : '',
'mt-2 w-full rounded bg-white p-4 shadow-md cursor-text',
isExpanded ? 'ring-2 ring-indigo-300' : '',
className
)}
onClick={() => !focused && !question && inputRef.current?.focus()}
ref={(elem) => (panelRef.current = elem)}
onClick={() => {
!isExpanded && inputRef.current?.focus()
}}
>
<div className="relative flex items-start space-x-3">
<Avatar username={user?.username} avatarUrl={user?.avatarUrl} noLink />
<div className="min-w-0 flex-1">
{/* TODO: Show focus, for accessibility */}
<div>
<Row className="justify-between">
<p className="my-0.5 text-sm">Ask a question... </p>
</div>
{isExpanded && (
<button
className="btn btn-xs btn-circle btn-ghost rounded"
onClick={() => setIsExpanded(false)}
>
<XIcon
className="mx-auto h-6 w-6 text-gray-500"
aria-hidden="true"
/>
</button>
)}
</Row>
<textarea
ref={inputRef as any}
className="w-full resize-none appearance-none border-transparent bg-transparent p-0 text-lg text-indigo-700 placeholder:text-gray-400 focus:border-transparent focus:ring-transparent sm:text-xl"
className={clsx(
'w-full resize-none appearance-none border-transparent bg-transparent p-0 text-indigo-700 placeholder:text-gray-400 focus:border-transparent focus:ring-transparent',
question && 'text-lg sm:text-xl',
!question && 'text-base sm:text-lg'
)}
placeholder={placeholder}
value={question}
rows={question.length > 68 ? 4 : 2}
onClick={(e) => e.stopPropagation()}
onChange={(e) => setQuestion(e.target.value.replace('\n', ''))}
onFocus={() => setFocused(true)}
onFocus={() => setIsExpanded(true)}
/>
</div>
</div>
{/* Hide component instead of deleting, so edits to NewContract don't get lost */}
<div className={question || focused ? '' : 'hidden'}>
<div className={isExpanded ? '' : 'hidden'}>
<NewContract question={question} tag={tag} />
</div>
{/* Show a fake "Create Market" button, which gets replaced with the NewContract one*/}
{!(question || focused) && (
<div className="flex justify-end">
{!isExpanded && (
<div className="flex justify-end sm:-mt-4">
<button className="btn btn-sm" disabled>
Create Market
</button>