Start refactoring forms
This commit is contained in:
Alex Gleason
parent
8035048ca4
commit
8b7ee7133b
3 changed files with 144 additions and 48 deletions
81
app/gabsocial/features/forms/index.js
Normal file
81
app/gabsocial/features/forms/index.js
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
import React from 'react';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import PropTypes from 'prop-types';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
|
||||
export class SimpleForm extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
children: PropTypes.node,
|
||||
onSubmit: PropTypes.function,
|
||||
}
|
||||
|
||||
render() {
|
||||
const { children, onSubmit } = this.props;
|
||||
|
||||
return (
|
||||
<form className='simple_form' onSubmit={onSubmit}>
|
||||
{children}
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export class FieldsGroup extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
children: PropTypes.node,
|
||||
}
|
||||
|
||||
render() {
|
||||
const { children } = this.props;
|
||||
|
||||
return (
|
||||
<div className='fields-group'>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export class Checkbox extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
label: PropTypes.string,
|
||||
checked: PropTypes.bool,
|
||||
onChange: PropTypes.func,
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
checked: false,
|
||||
}
|
||||
|
||||
render() {
|
||||
const { label, checked, onChange } = this.props;
|
||||
const id = uuidv4();
|
||||
|
||||
return (
|
||||
<div className='input with_label boolean optional'>
|
||||
<div className='label_input'>
|
||||
<label className='boolean optional' htmlFor={id}>
|
||||
{label}
|
||||
</label>
|
||||
<div className='label_input__wrapper'>
|
||||
<label className='checkbox'>
|
||||
<input
|
||||
id={id}
|
||||
className='boolean optional'
|
||||
type='checkbox'
|
||||
checked={checked}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import PropTypes from 'prop-types';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { changeSetting } from 'gabsocial/actions/settings';
|
||||
import { Checkbox } from '../../forms';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
settings: state.get('settings'),
|
||||
});
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
class SettingsCheckbox extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
label: PropTypes.string,
|
||||
path: PropTypes.array.isRequired,
|
||||
settings: ImmutablePropTypes.map.isRequired,
|
||||
}
|
||||
|
||||
handleCheckboxSetting = path => {
|
||||
const { dispatch } = this.props;
|
||||
return (e) => {
|
||||
dispatch(changeSetting(path, e.target.checked));
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const { label, path, settings } = this.props;
|
||||
|
||||
return (
|
||||
<Checkbox
|
||||
label={label}
|
||||
checked={settings.getIn(path)}
|
||||
onChange={this.handleCheckboxSetting(path)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -6,6 +6,8 @@ import PropTypes from 'prop-types';
|
|||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { changeSetting } from 'gabsocial/actions/settings';
|
||||
import Column from '../ui/components/column';
|
||||
import { SimpleForm, FieldsGroup } from 'gabsocial/features/forms';
|
||||
import SettingsCheckbox from './components/settings_checkbox';
|
||||
|
||||
const messages = defineMessages({
|
||||
heading: { id: 'column.preferences', defaultMessage: 'Preferences' },
|
||||
|
|
@ -70,9 +72,9 @@ class Preferences extends ImmutablePureComponent {
|
|||
|
||||
return (
|
||||
<Column icon='users' heading={intl.formatMessage(messages.heading)} backBtnSlim>
|
||||
<form className='simple_form' onSubmit={this.handleSubmit}>
|
||||
<SimpleForm onSubmit={this.handleSubmit}>
|
||||
|
||||
<div className='fields-group'>
|
||||
<FieldsGroup>
|
||||
<div className='input with_label select optional user_setting_theme'>
|
||||
<div className='label_input'>
|
||||
<label className='select optional' htmlFor='user_setting_theme'>Site theme</label>
|
||||
|
|
@ -93,9 +95,9 @@ class Preferences extends ImmutablePureComponent {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FieldsGroup>
|
||||
|
||||
<div className='fields-group'>
|
||||
<FieldsGroup>
|
||||
<div className='input with_floating_label radio_buttons optional user_setting_default_privacy'>
|
||||
<div className='label_input'>
|
||||
<label className='radio_buttons optional'>Post privacy</label>
|
||||
|
|
@ -121,52 +123,24 @@ class Preferences extends ImmutablePureComponent {
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FieldsGroup>
|
||||
|
||||
<div className='fields-group'>
|
||||
<FieldsGroup>
|
||||
<SettingsCheckbox
|
||||
label='Show confirmation dialog before unfollowing someone'
|
||||
path={['unfollowModal']}
|
||||
/>
|
||||
<SettingsCheckbox
|
||||
label='Show confirmation dialog before reposting'
|
||||
path={['boostModal']}
|
||||
/>
|
||||
<SettingsCheckbox
|
||||
label='Show confirmation dialog before deleting a post'
|
||||
path={['deleteModal']}
|
||||
/>
|
||||
</FieldsGroup>
|
||||
|
||||
<div className='input with_label boolean optional user_setting_unfollow_modal'>
|
||||
<div className='label_input'>
|
||||
<label className='boolean optional' htmlFor='user_setting_unfollow_modal'>
|
||||
Show confirmation dialog before unfollowing someone
|
||||
</label>
|
||||
<div className='label_input__wrapper'>
|
||||
<label className='checkbox'>
|
||||
<input className='boolean optional' type='checkbox' checked={settings.get('unfollowModal')} onChange={this.handleCheckboxSetting(['unfollowModal'])} id='user_setting_unfollow_modal' />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='input with_label boolean optional user_setting_boost_modal'>
|
||||
<div className='label_input'>
|
||||
<label className='boolean optional' htmlFor='user_setting_boost_modal'>
|
||||
Show confirmation dialog before reposting
|
||||
</label>
|
||||
<div className='label_input__wrapper'>
|
||||
<label className='checkbox'>
|
||||
<input className='boolean optional' type='checkbox' checked={settings.get('boostModal')} onChange={this.handleCheckboxSetting(['boostModal'])} id='user_setting_boost_modal' />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='input with_label boolean optional user_setting_delete_modal'>
|
||||
<div className='label_input'>
|
||||
<label className='boolean optional' htmlFor='user_setting_delete_modal'>
|
||||
Show confirmation dialog before deleting a post
|
||||
</label>
|
||||
<div className='label_input__wrapper'>
|
||||
<label className='checkbox'>
|
||||
<input className='boolean optional' type='checkbox' checked={settings.get('deleteModal')} onChange={this.handleCheckboxSetting(['deleteModal'])} id='user_setting_delete_modal' />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</SimpleForm>
|
||||
</Column>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue