91 lines
3.1 KiB
TypeScript
91 lines
3.1 KiB
TypeScript
import React from 'react';
|
|
import { Form, Button, Checkbox, Divider } from 'antd';
|
|
import { FormComponentProps } from 'antd/lib/form';
|
|
import { EmailSubscriptions } from 'types';
|
|
import { groupEmailSubscriptionsByCategory } from 'utils/email';
|
|
import './EmailSubscriptionsForm.less';
|
|
|
|
interface OwnProps {
|
|
emailSubscriptions: EmailSubscriptions;
|
|
loading: boolean;
|
|
onSubmit: (settings: EmailSubscriptions) => void;
|
|
}
|
|
|
|
type Props = OwnProps & FormComponentProps;
|
|
|
|
class EmailSubscriptionsForm extends React.Component<Props, {}> {
|
|
componentDidMount() {
|
|
this.props.form.setFieldsValue(this.props.emailSubscriptions);
|
|
}
|
|
render() {
|
|
const { emailSubscriptions, loading } = this.props;
|
|
const { getFieldDecorator } = this.props.form;
|
|
const groupedSubs = groupEmailSubscriptionsByCategory(emailSubscriptions);
|
|
|
|
const fields = Object.entries(this.props.form.getFieldsValue());
|
|
const numChecked = fields.map(([_, v]) => v).filter(v => v).length;
|
|
const numUnchecked = fields.map(([_, v]) => v).filter(v => !v).length;
|
|
|
|
const indeterminate = numChecked !== 0 && numUnchecked !== 0;
|
|
const isAllChecked = numChecked === fields.length;
|
|
|
|
return (
|
|
<div className="EmailSubscriptionsForm">
|
|
<Form className="EmailSubscriptionsForm-form" onSubmit={this.handleSubmit}>
|
|
{groupedSubs.map(gs => (
|
|
<div key={gs.category.key}>
|
|
<Divider orientation="left">{gs.category.description}</Divider>
|
|
{gs.subscriptionSettings.map(ss => (
|
|
<div key={ss.key}>
|
|
<Form.Item>
|
|
{getFieldDecorator(ss.key, {
|
|
valuePropName: 'checked',
|
|
})(<Checkbox>{ss.description}</Checkbox>)}
|
|
</Form.Item>
|
|
</div>
|
|
))}
|
|
</div>
|
|
))}
|
|
<div>
|
|
<Divider />
|
|
<Form.Item>
|
|
<Checkbox
|
|
indeterminate={indeterminate}
|
|
onChange={this.handleCheckAll}
|
|
checked={isAllChecked}
|
|
>
|
|
<b>{isAllChecked ? 'uncheck all' : 'check all'}</b>
|
|
</Checkbox>
|
|
</Form.Item>
|
|
</div>
|
|
<div>
|
|
<Button type="primary" htmlType="submit" size="large" block loading={loading}>
|
|
Save settings
|
|
</Button>
|
|
</div>
|
|
</Form>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
private handleCheckAll = () => {
|
|
const fields = Object.entries(this.props.form.getFieldsValue());
|
|
const numChecked = fields.map(([_, v]) => v).filter(v => v).length;
|
|
const checked = numChecked !== fields.length;
|
|
const newSettings = fields.reduce((a: any, [k, _]) => {
|
|
a[k] = checked;
|
|
return a;
|
|
}, {});
|
|
this.props.form.setFieldsValue(newSettings);
|
|
};
|
|
|
|
private handleSubmit = (ev: React.FormEvent<HTMLFormElement>) => {
|
|
ev.preventDefault();
|
|
this.props.onSubmit(this.props.form.getFieldsValue() as EmailSubscriptions);
|
|
};
|
|
}
|
|
|
|
const FormWrappedEmailSubscriptionsForm = Form.create()(EmailSubscriptionsForm);
|
|
|
|
export default FormWrappedEmailSubscriptionsForm;
|