Skip to content

Commit 53fb8dc

Browse files
felixgiraultfelixgirault
authored
Merge pull request #69 from felixgirault/feature-prettier
Code formatting with prettier
2 parents 6dbe8b2 + 85a8e45 commit 53fb8dc

24 files changed

Lines changed: 1269 additions & 1097 deletions

‎.prettierrc.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"arrowParens": "always",
3+
"bracketSpacing": false,
4+
"htmlWhitespaceSensitivity": "ignore",
5+
"jsxBracketSameLine": false,
6+
"jsxSingleQuote": false,
7+
"printWidth": 80,
8+
"proseWrap": "always",
9+
"quoteProps": "preserve",
10+
"semi": true,
11+
"singleQuote": true,
12+
"tabWidth": 3,
13+
"trailingComma": "none",
14+
"useTabs": true,
15+
"parser": "babel"
16+
}

‎package-lock.json‎

Lines changed: 62 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,8 @@
5050
"node-sass": "^4.13.1",
5151
"preact": "^8.2.9",
5252
"preact-compat": "^3.18.2",
53+
"prettier": "^2.2.1",
54+
"prettier-loader": "^3.3.0",
5355
"sass-loader": "^6.0.7",
5456
"webpack": "^4.25.1",
5557
"webpack-cli": "^3.1.2"

‎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;

0 commit comments

Comments
 (0)
⚡