Better fix the create market focus issues. Expand to 4 lines when you add many chars to a question.
This commit is contained in:
parent
d8681b043c
commit
a8fd4c8014
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue
Block a user