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

SoapboxConfig: refactor inputs

This commit is contained in:
Alex Gleason 2022-05-05 16:35:30 -05:00
parent 2fdf4413f5
commit f5039b9877
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
2 changed files with 22 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/soapbox/components/ui/input/input.tsx
View File

@ -11,7 +11,7 @@ const messages = defineMessages({
hidePassword: { id: 'input.password.hide_password', defaultMessage: 'Hide password' }, hidePassword: { id: 'input.password.hide_password', defaultMessage: 'Hide password' },
}); });
interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxLength' | 'onChange' | 'type' | 'autoComplete' | 'autoCorrect' | 'autoCapitalize' | 'required' | 'disabled' | 'onClick' | 'readOnly'> { interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxLength' | 'onChange' | 'type' | 'autoComplete' | 'autoCorrect' | 'autoCapitalize' | 'required' | 'disabled' | 'onClick' | 'readOnly' | 'min' | 'pattern'> {
/** Put the cursor into the input on mount. */ /** Put the cursor into the input on mount. */
autoFocus?: boolean, autoFocus?: boolean,
/** The initial text in the input. */ /** The initial text in the input. */
@ -27,11 +27,11 @@ interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxL
/** Text to display before a value is entered. */ /** Text to display before a value is entered. */
placeholder?: string, placeholder?: string,
/** Text in the input. */ /** Text in the input. */
value?: string, value?: string | number,
/** Change event handler for the input. */ /** Change event handler for the input. */
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void, onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void,
/** HTML input type. */ /** HTML input type. */
type: 'text' | 'email' | 'tel' | 'password', type: 'text' | 'number' | 'email' | 'tel' | 'password',
} }
/** Form input element. */ /** Form input element. */

39
app/soapbox/features/soapbox_config/index.tsx
View File

@ -5,12 +5,10 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
import { updateConfig } from 'soapbox/actions/admin'; import { updateConfig } from 'soapbox/actions/admin';
import { uploadMedia } from 'soapbox/actions/media'; import { uploadMedia } from 'soapbox/actions/media';
import snackbar from 'soapbox/actions/snackbar'; import snackbar from 'soapbox/actions/snackbar';
import { Column, Form, FormActions, Button } from 'soapbox/components/ui'; import { Column, Form, FormActions, FormGroup, Input, Button } from 'soapbox/components/ui';
import Streamfield from 'soapbox/components/ui/streamfield/streamfield'; import Streamfield from 'soapbox/components/ui/streamfield/streamfield';
import { import {
FieldsGroup, FieldsGroup,
TextInput,
SimpleInput,
SimpleTextarea, SimpleTextarea,
FileChooserLogo, FileChooserLogo,
Checkbox, Checkbox,
@ -220,15 +218,16 @@ const SoapboxConfig: React.FC = () => {
</div> </div>
</div> </div>
</FieldsGroup> </FieldsGroup>
<FieldsGroup>
<TextInput <FormGroup labelText={intl.formatMessage(messages.copyrightFooterLabel)}>
name='copyright' <Input
label={intl.formatMessage(messages.copyrightFooterLabel)} type='text'
placeholder={intl.formatMessage(messages.copyrightFooterLabel)} placeholder={intl.formatMessage(messages.copyrightFooterLabel)}
value={soapbox.copyright} value={soapbox.copyright}
onChange={handleChange(['copyright'], (e) => e.target.value)} onChange={handleChange(['copyright'], (e) => e.target.value)}
/> />
</FieldsGroup> </FormGroup>
<FieldsGroup> <FieldsGroup>
<Checkbox <Checkbox
name='verifiedCanEditName' name='verifiedCanEditName'
@ -263,13 +262,14 @@ const SoapboxConfig: React.FC = () => {
onChange={handleChange(['singleUserMode'], (e) => e.target.checked)} onChange={handleChange(['singleUserMode'], (e) => e.target.checked)}
/> />
{soapbox.get('singleUserMode') && ( {soapbox.get('singleUserMode') && (
<TextInput <FormGroup labelText={intl.formatMessage(messages.singleUserModeProfileLabel)}>
name='singleUserModeProfile' <Input
label={intl.formatMessage(messages.singleUserModeProfileLabel)} type='text'
placeholder={intl.formatMessage(messages.singleUserModeProfileHint)} placeholder={intl.formatMessage(messages.singleUserModeProfileHint)}
value={soapbox.singleUserModeProfile} value={soapbox.singleUserModeProfile}
onChange={handleChange(['singleUserModeProfile'], (e) => e.target.value)} onChange={handleChange(['singleUserModeProfile'], (e) => e.target.value)}
/> />
</FormGroup>
)} )}
</FieldsGroup> </FieldsGroup>
@ -303,18 +303,17 @@ const SoapboxConfig: React.FC = () => {
onRemoveItem={deleteStreamItem(['cryptoAddresses'])} onRemoveItem={deleteStreamItem(['cryptoAddresses'])}
/> />
<FieldsGroup> <FormGroup labelText={intl.formatMessage(messages.cryptoDonatePanelLimitLabel)}>
<SimpleInput <Input
type='number' type='number'
min={0} min={0}
pattern='[0-9]+' pattern='[0-9]+'
name='cryptoDonatePanelLimit'
label={intl.formatMessage(messages.cryptoDonatePanelLimitLabel)}
placeholder={intl.formatMessage(messages.cryptoDonatePanelLimitLabel)} placeholder={intl.formatMessage(messages.cryptoDonatePanelLimitLabel)}
value={soapbox.cryptoDonatePanel.get('limit')} value={soapbox.cryptoDonatePanel.get('limit')}
onChange={handleChange(['cryptoDonatePanel', 'limit'], (e) => Number(e.target.value))} onChange={handleChange(['cryptoDonatePanel', 'limit'], (e) => Number(e.target.value))}
/> />
</FieldsGroup> </FormGroup>
<Accordion <Accordion
headline={intl.formatMessage(messages.rawJSONLabel)} headline={intl.formatMessage(messages.rawJSONLabel)}
expanded={jsonEditorExpanded} expanded={jsonEditorExpanded}