refactor(client): clean extra FormGroup component in personal info
parent
849e2c041d
commit
cc29df3033
|
@ -0,0 +1,23 @@
|
|||
import React from 'react';
|
||||
|
||||
interface GridProps extends React.HTMLAttributes<Element> {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const GridStyle = {
|
||||
display: 'grid',
|
||||
gap: '15px',
|
||||
marginBottom: '15px'
|
||||
};
|
||||
|
||||
const Grid = ({ children, ...rest }: GridProps) => {
|
||||
return (
|
||||
<div {...rest} style={GridStyle}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Grid.displayName = 'Grid';
|
||||
|
||||
export default Grid;
|
|
@ -1,5 +1,6 @@
|
|||
export { default as ButtonSpacer } from './button-spacer';
|
||||
export { default as FullWidthRow } from './full-width-row';
|
||||
export { default as Grid } from './grid';
|
||||
export { default as SlimWidthRow } from './slim-width-row';
|
||||
export { default as Loader } from './loader';
|
||||
export { default as SkeletonSprite } from './skeleton-sprite';
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
import {
|
||||
FormGroup,
|
||||
ControlLabel,
|
||||
FormControl,
|
||||
HelpBlock,
|
||||
|
@ -9,7 +8,7 @@ import React, { Component } from 'react';
|
|||
|
||||
import { TFunction, withTranslation } from 'react-i18next';
|
||||
import isURL from 'validator/lib/isURL';
|
||||
import { FullWidthRow, Spacer } from '../helpers';
|
||||
import { FullWidthRow, Grid, Spacer } from '../helpers';
|
||||
import BlockSaveButton from '../helpers/form/block-save-button';
|
||||
import SoundSettings from './sound';
|
||||
import ThemeSettings, { Themes } from './theme';
|
||||
|
@ -79,7 +78,6 @@ class AboutSettings extends Component<AboutProps, AboutState> {
|
|||
picture === formValues.picture &&
|
||||
about === formValues.about
|
||||
) {
|
||||
// eslint-disable-next-line react/no-did-update-set-state
|
||||
return this.setState({
|
||||
originalValues: {
|
||||
name,
|
||||
|
@ -216,49 +214,48 @@ class AboutSettings extends Component<AboutProps, AboutState> {
|
|||
<SectionHeader>{t('settings.headings.personal-info')}</SectionHeader>
|
||||
<FullWidthRow>
|
||||
<form id='camper-identity' onSubmit={this.handleSubmit}>
|
||||
<div role='group' aria-label={t('settings.headings.personal-info')}>
|
||||
<FormGroup controlId='about-name'>
|
||||
<ControlLabel>
|
||||
<strong>{t('settings.labels.name')}</strong>
|
||||
</ControlLabel>
|
||||
<FormControl
|
||||
onChange={this.handleNameChange}
|
||||
type='text'
|
||||
value={name}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup controlId='about-location'>
|
||||
<ControlLabel>
|
||||
<strong>{t('settings.labels.location')}</strong>
|
||||
</ControlLabel>
|
||||
<FormControl
|
||||
onChange={this.handleLocationChange}
|
||||
type='text'
|
||||
value={location}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup controlId='about-picture'>
|
||||
<ControlLabel>
|
||||
<strong>{t('settings.labels.picture')}</strong>
|
||||
</ControlLabel>
|
||||
<FormControl
|
||||
onChange={this.handlePictureChange}
|
||||
type='url'
|
||||
value={picture}
|
||||
/>
|
||||
{this.showImageValidationWarning()}
|
||||
</FormGroup>
|
||||
<FormGroup controlId='about-about'>
|
||||
<ControlLabel>
|
||||
<strong>{t('settings.labels.about')}</strong>
|
||||
</ControlLabel>
|
||||
<FormControl
|
||||
componentClass='textarea'
|
||||
onChange={this.handleAboutChange}
|
||||
value={about}
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
<Grid
|
||||
role='group'
|
||||
aria-label={t('settings.headings.personal-info')}
|
||||
>
|
||||
<ControlLabel htmlFor='about-name'>
|
||||
<strong>{t('settings.labels.name')}</strong>
|
||||
</ControlLabel>
|
||||
<FormControl
|
||||
id='about-name'
|
||||
onChange={this.handleNameChange}
|
||||
type='text'
|
||||
value={name}
|
||||
/>
|
||||
<ControlLabel htmlFor='about-location'>
|
||||
<strong>{t('settings.labels.location')}</strong>
|
||||
</ControlLabel>
|
||||
<FormControl
|
||||
id='about-location'
|
||||
onChange={this.handleLocationChange}
|
||||
type='text'
|
||||
value={location}
|
||||
/>
|
||||
<ControlLabel htmlFor='about-picture'>
|
||||
<strong>{t('settings.labels.picture')}</strong>
|
||||
</ControlLabel>
|
||||
<FormControl
|
||||
id='about-picture'
|
||||
onChange={this.handlePictureChange}
|
||||
type='url'
|
||||
value={picture}
|
||||
/>
|
||||
{this.showImageValidationWarning()}
|
||||
<ControlLabel htmlFor='about-about'>
|
||||
<strong>{t('settings.labels.about')}</strong>
|
||||
</ControlLabel>
|
||||
<FormControl
|
||||
id='about-about'
|
||||
componentClass='textarea'
|
||||
onChange={this.handleAboutChange}
|
||||
value={about}
|
||||
/>
|
||||
</Grid>
|
||||
<BlockSaveButton disabled={this.isFormPristine()}>
|
||||
{t('buttons.save')}{' '}
|
||||
<span className='sr-only'>
|
||||
|
|
Loading…
Reference in New Issue