moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

EditGroup: move AvatarPicker and HeaderPicker into their own components

This commit is contained in:
Alex Gleason 2023-04-03 14:26:31 -05:00
parent 51fa0c27ca
commit 1b9c070a20
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
3 changed files with 101 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
app/soapbox/features/group/components/group-avatar-picker.tsx Normal file
View File

@ -0,0 +1,45 @@
import clsx from 'clsx';
import React from 'react';
import Icon from 'soapbox/components/icon';
import { Avatar, HStack } from 'soapbox/components/ui';
interface IMediaInput {
src: string | undefined
accept: string
onChange: React.ChangeEventHandler<HTMLInputElement>
disabled: boolean
}
const AvatarPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onChange, accept, disabled }, ref) => {
return (
<label className='absolute bottom-0 left-1/2 h-20 w-20 -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full bg-primary-500 ring-2 ring-white dark:ring-primary-900'>
{src && <Avatar src={src} size={80} />}
<HStack
alignItems='center'
justifyContent='center'
className={clsx('absolute left-0 top-0 h-full w-full rounded-full transition-opacity', {
'opacity-0 hover:opacity-90 bg-primary-500': src,
})}
>
<Icon
src={require('@tabler/icons/camera-plus.svg')}
className='h-5 w-5 text-white'
/>
</HStack>
<span className='sr-only'>Upload avatar</span>
<input
ref={ref}
name='avatar'
type='file'
accept={accept}
onChange={onChange}
disabled={disabled}
className='hidden'
/>
</label>
);
});
export default AvatarPicker;

52
app/soapbox/features/group/components/group-header-picker.tsx Normal file
View File

@ -0,0 +1,52 @@
import clsx from 'clsx';
import React from 'react';
import { FormattedMessage } from 'react-intl';
import Icon from 'soapbox/components/icon';
import { HStack, Text } from 'soapbox/components/ui';
interface IMediaInput {
src: string | undefined
accept: string
onChange: React.ChangeEventHandler<HTMLInputElement>
disabled: boolean
}
const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onChange, accept, disabled }, ref) => {
return (
<label
className='dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-accent-blue sm:h-36 sm:shadow'
>
{src && <img className='h-full w-full object-cover' src={src} alt='' />}
<HStack
className={clsx('absolute top-0 h-full w-full transition-opacity', {
'opacity-0 hover:opacity-90 bg-primary-100 dark:bg-gray-800': src,
})}
space={1.5}
alignItems='center'
justifyContent='center'
>
<Icon
src={require('@tabler/icons/photo-plus.svg')}
className='h-4.5 w-4.5'
/>
<Text size='md' theme='primary' weight='semibold'>
<FormattedMessage id='group.upload_banner' defaultMessage='Upload photo' />
</Text>
<input
ref={ref}
name='header'
type='file'
accept={accept}
onChange={onChange}
disabled={disabled}
className='hidden'
/>
</HStack>
</label>
);
});
export default HeaderPicker;

81
app/soapbox/features/group/edit-group.tsx
View File

@ -1,100 +1,27 @@
import clsx from 'clsx';
import React, { useState } from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import Icon from 'soapbox/components/icon';
import { Avatar, Button, Column, Form, FormActions, FormGroup, HStack, Input, Spinner, Text, Textarea } from 'soapbox/components/ui';
import { Button, Column, Form, FormActions, FormGroup, Input, Spinner, Textarea } from 'soapbox/components/ui';
import { useAppSelector, useInstance } from 'soapbox/hooks';
import { useGroup, useUpdateGroup } from 'soapbox/hooks/api';
import { useImageField, useTextField } from 'soapbox/hooks/forms';
import { isDefaultAvatar, isDefaultHeader } from 'soapbox/utils/accounts';
import AvatarPicker from './components/group-avatar-picker';
import HeaderPicker from './components/group-header-picker';
import type { List as ImmutableList } from 'immutable';
const nonDefaultAvatar = (url: string | undefined) => url && isDefaultAvatar(url) ? undefined : url;
const nonDefaultHeader = (url: string | undefined) => url && isDefaultHeader(url) ? undefined : url;
interface IMediaInput {
src: string | undefined
accept: string
onChange: React.ChangeEventHandler<HTMLInputElement>
disabled: boolean
}
const messages = defineMessages({
heading: { id: 'navigation_bar.edit_group', defaultMessage: 'Edit Group' },
groupNamePlaceholder: { id: 'manage_group.fields.name_placeholder', defaultMessage: 'Group Name' },
groupDescriptionPlaceholder: { id: 'manage_group.fields.description_placeholder', defaultMessage: 'Description' },
});
const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onChange, accept, disabled }, ref) => {
return (
<label
className='dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-accent-blue sm:h-36 sm:shadow'
>
{src && <img className='h-full w-full object-cover' src={src} alt='' />}
<HStack
className={clsx('absolute top-0 h-full w-full transition-opacity', {
'opacity-0 hover:opacity-90 bg-primary-100 dark:bg-gray-800': src,
})}
space={1.5}
alignItems='center'
justifyContent='center'
>
<Icon
src={require('@tabler/icons/photo-plus.svg')}
className='h-4.5 w-4.5'
/>
<Text size='md' theme='primary' weight='semibold'>
<FormattedMessage id='group.upload_banner' defaultMessage='Upload photo' />
</Text>
<input
ref={ref}
name='header'
type='file'
accept={accept}
onChange={onChange}
disabled={disabled}
className='hidden'
/>
</HStack>
</label>
);
});
const AvatarPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onChange, accept, disabled }, ref) => {
return (
<label className='absolute bottom-0 left-1/2 h-20 w-20 -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full bg-primary-500 ring-2 ring-white dark:ring-primary-900'>
{src && <Avatar src={src} size={80} />}
<HStack
alignItems='center'
justifyContent='center'
className={clsx('absolute left-0 top-0 h-full w-full rounded-full transition-opacity', {
'opacity-0 hover:opacity-90 bg-primary-500': src,
})}
>
<Icon
src={require('@tabler/icons/camera-plus.svg')}
className='h-5 w-5 text-white'
/>
</HStack>
<span className='sr-only'>Upload avatar</span>
<input
ref={ref}
name='avatar'
type='file'
accept={accept}
onChange={onChange}
disabled={disabled}
className='hidden'
/>
</label>
);
});
interface IEditGroup {
params: {
id: string