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

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

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