discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

Profile settings fixes (#219)

Browse Source
This commit is contained in:
Ilya Y 2023-09-15 12:30:50 +03:00 committed by GitHub
parent a95a075755
commit 218c190d2e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 41 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Views/Author/Author.tsx
View File

@ -44,9 +44,9 @@ export const AuthorView = (props: Props) => {
const [followers, setFollowers] = createSignal<Author[]>([]) const [followers, setFollowers] = createSignal<Author[]>([])
const [subscriptions, setSubscriptions] = createSignal<Array<Author | Topic>>([]) const [subscriptions, setSubscriptions] = createSignal<Array<Author | Topic>>([])
const [bioWrapper, setBioWrapper] = createSignal<HTMLElement>() const [bioWrapper, setBioWrapper] = createSignal<HTMLElement>()
const [bioContainer, setBioContainer] = createSignal<HTMLElement>()
const [showExpandBioControl, setShowExpandBioControl] = createSignal(false) const [showExpandBioControl, setShowExpandBioControl] = createSignal(false)
const bioContainerRef: { current: HTMLDivElement } = { current: null }
const fetchSubscriptions = async (): Promise<{ authors: Author[]; topics: Topic[] }> => { const fetchSubscriptions = async (): Promise<{ authors: Author[]; topics: Topic[] }> => {
try { try {
const [getAuthors, getTopics] = await Promise.all([ const [getAuthors, getTopics] = await Promise.all([
@ -63,8 +63,8 @@ export const AuthorView = (props: Props) => {
} }
const checkBioHeight = () => { const checkBioHeight = () => {
if (bioContainer()) { if (bioContainerRef.current) {
setShowExpandBioControl(bioContainer().offsetHeight > bioWrapper().offsetHeight) setShowExpandBioControl(bioContainerRef.current.offsetHeight > bioWrapper().offsetHeight)
} }
} }
@ -184,7 +184,7 @@ export const AuthorView = (props: Props) => {
class={styles.longBio} class={styles.longBio}
classList={{ [styles.longBioExpanded]: isBioExpanded() }} classList={{ [styles.longBioExpanded]: isBioExpanded() }}
> >
<div ref={setBioContainer}>{author().about}</div> <div ref={(el) => (bioContainerRef.current = el)} innerHTML={author().about} />
</div> </div>
<Show when={showExpandBioControl()}> <Show when={showExpandBioControl()}>

76
src/components/_shared/GrowingTextarea/GrowingTextarea.tsx
View File

@ -40,45 +40,43 @@ export const GrowingTextarea = (props: Props) => {
} }
return ( return (
<Show when={value()}> <div
<div class={clsx(styles.GrowingTextarea, {
class={clsx(styles.GrowingTextarea, { [styles.bordered]: props.variant === 'bordered',
[styles.bordered]: props.variant === 'bordered', [styles.hasFieldName]: props.fieldName && value().length > 0
[styles.hasFieldName]: props.fieldName && value().length > 0 })}
})} >
> <Show when={props.fieldName && value().length > 0}>
<Show when={props.fieldName && value().length > 0}> <div class={styles.fieldName}>{props.fieldName}</div>
<div class={styles.fieldName}>{props.fieldName}</div> </Show>
</Show> <div class={clsx(styles.growWrap, props.class)} data-replicated-value={value()}>
<div class={clsx(styles.growWrap, props.class)} data-replicated-value={value()}> <textarea
<textarea ref={props.textAreaRef}
ref={props.textAreaRef} rows={1}
rows={1} maxlength={props.maxLength}
maxlength={props.maxLength} autocomplete="off"
autocomplete="off" class={clsx(styles.textInput, props.class)}
class={clsx(styles.textInput, props.class)} value={props.maxLength ? props.initialValue.slice(0, props.maxLength) : props.initialValue}
value={props.maxLength ? props.initialValue.slice(0, props.maxLength) : props.initialValue} onKeyDown={props.allowEnterKey ? handleKeyDown : null}
onKeyDown={props.allowEnterKey ? handleKeyDown : null} onInput={(event) => handleChangeValue(event)}
onInput={(event) => handleChangeValue(event)} onChange={(event) => props.value(event.target.value)}
onChange={(event) => props.value(event.target.value)} placeholder={props.placeholder}
placeholder={props.placeholder} onFocus={() => setIsFocused(true)}
onFocus={() => setIsFocused(true)} onBlur={() => setIsFocused(false)}
onBlur={() => setIsFocused(false)} />
/>
</div>
<Show when={(props.maxLength && value() && isFocused()) || props.variant === 'bordered'}>
<div
class={clsx(styles.maxLength, {
[styles.visible]: isFocused(),
[styles.limited]: value().length === props.maxLength
})}
>
<Show when={props.variant === 'bordered'} fallback={`${value().length} / ${props.maxLength}`}>
{`${props.maxLength - value().length}`}
</Show>
</div>
</Show>
</div> </div>
</Show> <Show when={(props.maxLength && value() && isFocused()) || props.variant === 'bordered'}>
<div
class={clsx(styles.maxLength, {
[styles.visible]: isFocused(),
[styles.limited]: value().length === props.maxLength
})}
>
<Show when={props.variant === 'bordered'} fallback={`${value().length} / ${props.maxLength}`}>
{`${props.maxLength - value().length}`}
</Show>
</div>
</Show>
</div>
) )
} }