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

Use clsx instead of template strings

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2023-02-14 18:49:32 +01:00
parent 783a79d306
commit 3aba4218c5
3 changed files with 20 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/soapbox/components/ui/select/select.tsx
View file

@ -1,3 +1,4 @@
import clsx from 'clsx';
import React from 'react'; import React from 'react';
interface ISelect extends React.SelectHTMLAttributes<HTMLSelectElement> { interface ISelect extends React.SelectHTMLAttributes<HTMLSelectElement> {
@ -11,7 +12,10 @@ const Select = React.forwardRef<HTMLSelectElement, ISelect>((props, ref) => {
return ( return (
<select <select
ref={ref} ref={ref}
className={`w-full truncate rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-primary-500 focus:outline-none focus:ring-primary-500 disabled:opacity-50 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm ${className}`} className={clsx(
'w-full truncate rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-primary-500 focus:outline-none focus:ring-primary-500 disabled:opacity-50 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm',
className,
)}
{...filteredProps} {...filteredProps}
> >
{children} {children}

2
app/soapbox/features/compose/components/privacy-dropdown.tsx
View file

@ -120,7 +120,7 @@ const PrivacyDropdownMenu: React.FC<IPrivacyDropdownMenu> = ({ style, items, pla
// It should not be transformed when mounting because the resulting // It should not be transformed when mounting because the resulting
// size will be used to determine the coordinate of the menu by // size will be used to determine the coordinate of the menu by
// react-overlays // react-overlays
<div className={`privacy-dropdown__dropdown ${placement}`} style={{ ...style, opacity: opacity, transform: mounted ? `scale(${scaleX}, ${scaleY})` : undefined }} role='listbox' ref={node}> <div className={clsx('privacy-dropdown__dropdown', placement)} style={{ ...style, opacity: opacity, transform: mounted ? `scale(${scaleX}, ${scaleY})` : undefined }} role='listbox' ref={node}>
{items.map(item => ( {items.map(item => (
<div role='option' tabIndex={0} key={item.value} data-index={item.value} onKeyDown={handleKeyDown} onClick={handleClick} className={clsx('privacy-dropdown__option', { active: item.value === value })} aria-selected={item.value === value} ref={item.value === value ? focusedItem : null}> <div role='option' tabIndex={0} key={item.value} data-index={item.value} onKeyDown={handleKeyDown} onClick={handleClick} className={clsx('privacy-dropdown__option', { active: item.value === value })} aria-selected={item.value === value} ref={item.value === value ? focusedItem : null}>
<div className='privacy-dropdown__option__icon'> <div className='privacy-dropdown__option__icon'>

32
app/soapbox/features/ui/components/modals/media-modal.tsx
View file

@ -142,24 +142,20 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
); );
if (media.size > 1) { if (media.size > 1) {
pagination = media.toArray().map((item, i) => { pagination = media.toArray().map((item, i) => (
const classes = ['media-modal__button']; <li className='media-modal__page-dot' key={i}>
if (i === getIndex()) { <button
classes.push('media-modal__button--active'); tabIndex={0}
} className={clsx('media-modal__button', {
return ( 'media-modal__button--active': i === getIndex(),
<li className='media-modal__page-dot' key={i}> })}
<button onClick={handleChangeIndex}
tabIndex={0} data-index={i}
className={classes.join(' ')} >
onClick={handleChangeIndex} {i + 1}
data-index={i} </button>
> </li>
{i + 1} ));
</button>
</li>
);
});
} }
const isMultiMedia = media.map((image) => image.type !== 'image').toArray(); const isMultiMedia = media.map((image) => image.type !== 'image').toArray();