bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

SensitiveButton: use UI components

Browse source
This commit is contained in:
Alex Gleason 2022-06-07 13:55:34 -05:00
parent 08daa19f2c
commit edffe9a837
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
2 changed files with 13 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/soapbox/components/ui/form-group/form-group.tsx
View file

@ -8,6 +8,8 @@ import Stack from '../stack/stack';
interface IFormGroup { interface IFormGroup {
/** Input label message. */ /** Input label message. */
labelText?: React.ReactNode, labelText?: React.ReactNode,
/** Input label tooltip message. */
labelTitle?: string,
/** Input hint message. */ /** Input hint message. */
hintText?: React.ReactNode, hintText?: React.ReactNode,
/** Input errors. */ /** Input errors. */
@ -16,7 +18,7 @@ interface IFormGroup {
/** Input container with label. Renders the child. */ /** Input container with label. Renders the child. */
const FormGroup: React.FC<IFormGroup> = (props) => { const FormGroup: React.FC<IFormGroup> = (props) => {
const { children, errors = [], labelText, hintText } = props; const { children, errors = [], labelText, labelTitle, hintText } = props;
const formFieldId: string = useMemo(() => `field-${uuidv4()}`, []); const formFieldId: string = useMemo(() => `field-${uuidv4()}`, []);
const inputChildren = React.Children.toArray(children); const inputChildren = React.Children.toArray(children);
const hasError = errors?.length > 0; const hasError = errors?.length > 0;
@ -41,6 +43,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
htmlFor={formFieldId} htmlFor={formFieldId}
data-testid='form-group-label' data-testid='form-group-label'
className='-mt-0.5 block text-sm font-medium text-gray-700 dark:text-gray-400' className='-mt-0.5 block text-sm font-medium text-gray-700 dark:text-gray-400'
title={labelTitle}
> >
{labelText} {labelText}
</label> </label>
@ -74,6 +77,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
htmlFor={formFieldId} htmlFor={formFieldId}
data-testid='form-group-label' data-testid='form-group-label'
className='block text-sm font-medium text-gray-700 dark:text-gray-400' className='block text-sm font-medium text-gray-700 dark:text-gray-400'
title={labelTitle}
> >
{labelText} {labelText}
</label> </label>

18
app/soapbox/features/compose/components/sensitive-button.tsx
View file

@ -1,8 +1,8 @@
import classNames from 'classnames';
import React from 'react'; import React from 'react';
import { useIntl, defineMessages, FormattedMessage } from 'react-intl'; import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
import { changeComposeSensitivity } from 'soapbox/actions/compose'; import { changeComposeSensitivity } from 'soapbox/actions/compose';
import { FormGroup, Checkbox } from 'soapbox/components/ui';
import { useAppSelector, useAppDispatch } from 'soapbox/hooks'; import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
const messages = defineMessages({ const messages = defineMessages({
@ -23,20 +23,18 @@ const SensitiveButton: React.FC = () => {
}; };
return ( return (
<div className='compose-form__sensitive-button'> <div className='px-2.5 py-1'>
<label className={classNames('icon-button', { active })} title={intl.formatMessage(active ? messages.marked : messages.unmarked)}> <FormGroup
<input labelText={<FormattedMessage id='compose_form.sensitive.hide' defaultMessage='Mark media as sensitive' />}
labelTitle={intl.formatMessage(active ? messages.marked : messages.unmarked)}
>
<Checkbox
name='mark-sensitive' name='mark-sensitive'
type='checkbox'
checked={active} checked={active}
onChange={onClick} onChange={onClick}
disabled={disabled} disabled={disabled}
/> />
</FormGroup>
<span className={classNames('checkbox', { active })} />
<FormattedMessage id='compose_form.sensitive.hide' defaultMessage='Mark media as sensitive' />
</label>
</div> </div>
); );
}; };