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

RelayEditor: allow setting the marker

Browse source
This commit is contained in:
Alex Gleason 2024-04-01 13:19:19 -05:00
parent db9f65cf77
commit bc6082d3f2
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
2 changed files with 25 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/ui/select/select.tsx
View file

@ -3,18 +3,22 @@ import React from 'react';
interface ISelect extends React.SelectHTMLAttributes<HTMLSelectElement> {
children: Iterable<React.ReactNode>;
full?: boolean;
}
/** Multiple-select dropdown. */
const Select = React.forwardRef<HTMLSelectElement, ISelect>((props, ref) => {
const { children, className, ...filteredProps } = props;
const { children, className, full = true, ...filteredProps } = props;
return (
<select
ref={ref}
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 black:bg-black sm:text-sm 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',
'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 black:bg-black sm:text-sm 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',
className,
{
'w-full': full,
},
)}
{...filteredProps}
>

21
src/features/nostr-relays/components/relay-editor.tsx
View file

@ -1,6 +1,7 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { HStack, Input } from 'soapbox/components/ui';
import { HStack, Input, Select } from 'soapbox/components/ui';
import Streamfield, { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
import { useInstance } from 'soapbox/hooks';
@ -45,15 +46,31 @@ const RelayField: StreamfieldComponent<RelayData> = ({ value, onChange }) => {
};
};
const handleMarkerChange = (e: React.ChangeEvent<HTMLSelectElement>): void => {
onChange({ ...value, marker: (e.currentTarget.value as 'read' | 'write' | '') || undefined });
};
return (
<HStack space={2} grow>
<Input
type='text'
outerClassName='w-2/5 grow'
outerClassName='w-full grow'
value={value.url}
onChange={handleChange('url')}
placeholder={instance.nostr?.relay ?? `wss://${instance.domain}/relay`}
/>
<Select className='mt-1' full={false} onChange={handleMarkerChange}>
<option value='' selected={value.marker === undefined}>
<FormattedMessage id='nostr_relays.read_write' defaultMessage='Read & write' />
</option>
<option value='read' selected={value.marker === 'read'}>
<FormattedMessage id='nostr_relays.read_only' defaultMessage='Read-only' />
</option>
<option value='write' selected={value.marker === 'write'}>
<FormattedMessage id='nostr_relays.write_only' defaultMessage='Write-only' />
</option>
</Select>
</HStack>
);
};