Skip to content

Commit 85a8e45

Browse files
felixgiraultfelixgirault
committed
Prettier formatting
1 parent baacc81 commit 85a8e45

20 files changed

Lines changed: 1180 additions & 1088 deletions

‎src/components/app-item.js‎

Lines changed: 91 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,95 @@
1-
import React from 'react'
1+
import React from 'react';
22

33
export default class AppItem extends React.Component {
4+
render() {
5+
const {checked, onToggle, name, title, description, t, ns} = this.props;
6+
const required = this.props.required || false;
7+
const optOut = this.props.optOut || false;
8+
const purposes = this.props.purposes || [];
9+
const onChange = (e) => {
10+
onToggle(e.target.checked);
11+
};
12+
const id = `orejime-app-item-${name}`;
13+
const isChecked = checked || required;
14+
const purposesText = purposes
15+
.map((purpose) => t(['purposes', purpose]))
16+
.join(', ');
17+
const optOutText = optOut ? (
18+
<span
19+
className={ns('AppItem-optOut')}
20+
title={t(['app', 'optOut', 'description'])}
21+
>
22+
{t(['app', 'optOut', 'title'])}
23+
</span>
24+
) : (
25+
''
26+
);
27+
const requiredText = required ? (
28+
<span
29+
className={ns('AppItem-required')}
30+
title={t(['app', 'required', 'description'])}
31+
>
32+
{t(['app', 'required', 'title'])}
33+
</span>
34+
) : (
35+
''
36+
);
437

5-
render(){
6-
const {checked, onToggle, name, title, description, t, ns} = this.props
7-
const required = this.props.required || false
8-
const optOut = this.props.optOut || false
9-
const purposes = this.props.purposes || []
10-
const onChange = (e) => {
11-
onToggle(e.target.checked)
12-
}
13-
const id = `orejime-app-item-${name}`
14-
const isChecked = checked || required
15-
const purposesText = purposes.map((purpose) => t(['purposes', purpose])).join(", ")
16-
const optOutText = optOut
17-
? <span
18-
className={ns('AppItem-optOut')}
19-
title={t(['app', 'optOut', 'description'])}
20-
>
21-
{t(['app', 'optOut', 'title'])}
22-
</span>
23-
: ''
24-
const requiredText = required
25-
? <span
26-
className={ns('AppItem-required')}
27-
title={t(['app', 'required', 'description'])}
28-
>
29-
{t(['app', 'required', 'title'])}
30-
</span>
31-
: ''
32-
33-
const purposesEl = purposes.length > 0
34-
? <p className={ns('AppItem-purposes')}>
35-
{t(['app', purposes.length > 1 ? 'purposes' : 'purpose'])}: {purposesText}
36-
</p>
37-
: null
38-
const switchLabel = isChecked ? 'enabled' : 'disabled'
39-
return <div className={ns('AppItem')}>
40-
<input
41-
id={id}
42-
className={ns('AppItem-input')}
43-
aria-describedby={`${id}-description`}
44-
disabled={required}
45-
checked={isChecked}
46-
type="checkbox"
47-
onChange={onChange}
48-
/>
49-
<label
50-
htmlFor={id}
51-
className={ns('AppItem-label')}
52-
{...(required ? {tabIndex: "0"} : {})}
53-
>
54-
<span className={ns('AppItem-title')}>{t([name, 'title']) || title}</span>{requiredText}{optOutText}
55-
<span className={ns(`AppItem-switch ${required ? 'AppItem-switch--disabled' : ''}`)}>
56-
<div className={ns('AppItem-slider')}></div>
57-
<div aria-hidden="true" className={ns('AppItem-switchLabel')}>{t(switchLabel)}</div>
58-
</span>
59-
</label>
60-
<div id={`${id}-description`} className={ns('AppItem-fullDescription')}>
61-
<p
62-
className={ns('AppItem-description')}
63-
dangerouslySetInnerHTML={{
64-
__html: t([name, 'description']) || description
65-
}}
66-
/>
67-
{purposesEl}
68-
</div>
69-
</div>
70-
}
71-
38+
const purposesEl =
39+
purposes.length > 0 ? (
40+
<p className={ns('AppItem-purposes')}>
41+
{t(['app', purposes.length > 1 ? 'purposes' : 'purpose'])}:{' '}
42+
{purposesText}
43+
</p>
44+
) : null;
45+
const switchLabel = isChecked ? 'enabled' : 'disabled';
46+
return (
47+
<div className={ns('AppItem')}>
48+
<input
49+
id={id}
50+
className={ns('AppItem-input')}
51+
aria-describedby={`${id}-description`}
52+
disabled={required}
53+
checked={isChecked}
54+
type="checkbox"
55+
onChange={onChange}
56+
/>
57+
<label
58+
htmlFor={id}
59+
className={ns('AppItem-label')}
60+
{...(required ? {tabIndex: '0'} : {})}
61+
>
62+
<span className={ns('AppItem-title')}>
63+
{t([name, 'title']) || title}
64+
</span>
65+
{requiredText}
66+
{optOutText}
67+
<span
68+
className={ns(
69+
`AppItem-switch ${
70+
required ? 'AppItem-switch--disabled' : ''
71+
}`
72+
)}
73+
>
74+
<div className={ns('AppItem-slider')}></div>
75+
<div aria-hidden="true" className={ns('AppItem-switchLabel')}>
76+
{t(switchLabel)}
77+
</div>
78+
</span>
79+
</label>
80+
<div
81+
id={`${id}-description`}
82+
className={ns('AppItem-fullDescription')}
83+
>
84+
<p
85+
className={ns('AppItem-description')}
86+
dangerouslySetInnerHTML={{
87+
__html: t([name, 'description']) || description
88+
}}
89+
/>
90+
{purposesEl}
91+
</div>
92+
</div>
93+
);
94+
}
7295
}

‎src/components/app-list.js‎

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,27 @@ import React from 'react';
22
import AppItem from './app-item';
33

44
const AppList = ({t, ns, apps, consents, onToggle}) => (
5-
<ul className={ns('AppList')}>
6-
{apps.map((app) => {
7-
const checked = consents[app.name];
8-
const handleToggle = (value) =>
9-
onToggle(app, value);
5+
<ul className={ns('AppList')}>
6+
{apps.map((app) => {
7+
const checked = consents[app.name];
8+
const handleToggle = (value) => onToggle(app, value);
109

11-
return (
12-
<li
13-
key={`app-${app.name}`}
14-
className={ns(`AppList-item AppList-item--${app.name}`)}
15-
>
16-
<AppItem
17-
checked={checked || app.required}
18-
onToggle={handleToggle}
19-
t={t}
20-
ns={ns}
21-
{...app}
22-
/>
23-
</li>
24-
);
25-
})}
26-
</ul>
10+
return (
11+
<li
12+
key={`app-${app.name}`}
13+
className={ns(`AppList-item AppList-item--${app.name}`)}
14+
>
15+
<AppItem
16+
checked={checked || app.required}
17+
onToggle={handleToggle}
18+
t={t}
19+
ns={ns}
20+
{...app}
21+
/>
22+
</li>
23+
);
24+
})}
25+
</ul>
2726
);
2827

2928
export default AppList;

‎src/components/apps.js‎

Lines changed: 83 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,98 @@
1-
import React from 'react'
1+
import React from 'react';
22
import AppList from './app-list';
33
import CategorizedAppList from './categorized-app-list';
44

55
export default class Apps extends React.Component {
6-
constructor(props, context){
7-
super(props, context)
8-
props.manager.watch(this)
9-
this.state = {
10-
consents : props.manager.consents
11-
}
12-
}
6+
constructor(props, context) {
7+
super(props, context);
8+
props.manager.watch(this);
9+
this.state = {
10+
consents: props.manager.consents
11+
};
12+
}
1313

14-
componentWillUnmount(){
15-
const {manager} = this.props
16-
manager.unwatch(this)
17-
}
14+
componentWillUnmount() {
15+
const {manager} = this.props;
16+
manager.unwatch(this);
17+
}
1818

19-
update(obj, type, data){
20-
const {manager} = this.props
21-
if (obj == manager && type == 'consents')
22-
this.setState({consents : data})
23-
}
19+
update(obj, type, data) {
20+
const {manager} = this.props;
21+
if (obj == manager && type == 'consents') this.setState({consents: data});
22+
}
2423

25-
render(){
26-
const {config, t, ns, manager} = this.props
27-
const {consents} = this.state
28-
const {apps, categories} = config
24+
render() {
25+
const {config, t, ns, manager} = this.props;
26+
const {consents} = this.state;
27+
const {apps, categories} = config;
2928

30-
const toggleAll = (value) => {
31-
apps.map((app)=>{
32-
manager.updateConsent(app, value)
33-
})
34-
}
29+
const toggleAll = (value) => {
30+
apps.map((app) => {
31+
manager.updateConsent(app, value);
32+
});
33+
};
3534

36-
const enableAll = () => toggleAll(true)
37-
const disableAll = () => toggleAll(false)
35+
const enableAll = () => toggleAll(true);
36+
const disableAll = () => toggleAll(false);
3837

39-
const allDisabled = apps.filter((app) => {
40-
return (app.required || false)
41-
? false
42-
: consents[app.name]
43-
}).length === 0
38+
const allDisabled =
39+
apps.filter((app) => {
40+
return app.required || false ? false : consents[app.name];
41+
}).length === 0;
4442

45-
const allEnabled = apps.filter((app) => {
46-
return consents[app.name]
47-
}).length === apps.length
43+
const allEnabled =
44+
apps.filter((app) => {
45+
return consents[app.name];
46+
}).length === apps.length;
4847

49-
const someOptional = apps.some((app) => !app.required);
48+
const someOptional = apps.some((app) => !app.required);
5049

51-
return (
52-
<div>
53-
{someOptional ? (
54-
<div className={ns('AppToggles')}>
55-
<button
56-
type="button"
57-
className={ns('Button Button--info AppToggles-button AppToggles-enableAll')}
58-
disabled={allEnabled}
59-
onClick={enableAll}
60-
>
61-
{t(['acceptAll'])}
62-
</button>
63-
<button
64-
type="button"
65-
className={ns('Button Button--info AppToggles-button AppToggles-disableAll')}
66-
disabled={allDisabled}
67-
onClick={disableAll}
68-
>
69-
{t(['declineAll'])}
70-
</button>
71-
</div>
72-
) : null}
50+
return (
51+
<div>
52+
{someOptional ? (
53+
<div className={ns('AppToggles')}>
54+
<button
55+
type="button"
56+
className={ns(
57+
'Button Button--info AppToggles-button AppToggles-enableAll'
58+
)}
59+
disabled={allEnabled}
60+
onClick={enableAll}
61+
>
62+
{t(['acceptAll'])}
63+
</button>
64+
<button
65+
type="button"
66+
className={ns(
67+
'Button Button--info AppToggles-button AppToggles-disableAll'
68+
)}
69+
disabled={allDisabled}
70+
onClick={disableAll}
71+
>
72+
{t(['declineAll'])}
73+
</button>
74+
</div>
75+
) : null}
7376

74-
{categories ? (
75-
<CategorizedAppList
76-
t={t}
77-
ns={ns}
78-
categories={categories}
79-
apps={apps}
80-
consents={consents}
81-
onToggle={manager.updateConsent.bind(manager)}
82-
/>
83-
) : (
84-
<AppList
85-
t={t}
86-
ns={ns}
87-
apps={apps}
88-
consents={consents}
89-
onToggle={manager.updateConsent.bind(manager)}
90-
/>
91-
)}
92-
</div>
93-
);
94-
}
77+
{categories ? (
78+
<CategorizedAppList
79+
t={t}
80+
ns={ns}
81+
categories={categories}
82+
apps={apps}
83+
consents={consents}
84+
onToggle={manager.updateConsent.bind(manager)}
85+
/>
86+
) : (
87+
<AppList
88+
t={t}
89+
ns={ns}
90+
apps={apps}
91+
consents={consents}
92+
onToggle={manager.updateConsent.bind(manager)}
93+
/>
94+
)}
95+
</div>
96+
);
97+
}
9598
}

0 commit comments

Comments
 (0)
⚡