Skip to content

Commit 1c23a2a

Browse files
alexander-akaitalexander-akait
authored
refactor: more ES6 code and code improvements (#700)
* refactor: more ES6 code and code improvements * test: fix * refactor: fix
1 parent 4af64e3 commit 1c23a2a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+529
-473
lines changed

‎client/components/Button.jsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import cls from "classnames";
2-
import * as s from "./Button.css";
3-
import PureComponent from "../lib/PureComponent";
2+
import PureComponent from "../lib/PureComponent.jsx";
3+
4+
import * as styles from "./Button.css";
45

56
export default class Button extends PureComponent {
67
render({ active, className, children, ...props }) {
78
const classes = cls(className, {
8-
[s.button]: true,
9-
[s.active]: active,
9+
[styles.button]: true,
10+
[styles.active]: active,
1011
});
1112

1213
return (

‎client/components/Checkbox.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
1-
import { Component } from "preact";
21
import cls from "classnames";
2+
import { Component } from "preact";
33

4-
import * as s from "./Checkbox.css";
4+
import * as styles from "./Checkbox.css";
55

66
export default class Checkbox extends Component {
77
render() {
88
const { checked, className, children } = this.props;
99

1010
return (
11-
<label className={cls(s.label, className)}>
11+
<label className={cls(styles.label, className)}>
1212
<input
13-
className={s.checkbox}
13+
className={styles.checkbox}
1414
type="checkbox"
1515
checked={checked}
1616
onChange={this.handleChange}
1717
/>
18-
<span className={s.itemText}>{children}</span>
18+
<span className={styles.itemText}>{children}</span>
1919
</label>
2020
);
2121
}

‎client/components/CheckboxList.jsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import CheckboxListItem from "./CheckboxListItem";
2-
import * as s from "./CheckboxList.css";
3-
import PureComponent from "../lib/PureComponent";
1+
import PureComponent from "../lib/PureComponent.jsx";
2+
import CheckboxListItem from "./CheckboxListItem.jsx";
3+
4+
import * as styles from "./CheckboxList.css";
45

56
const ALL_ITEM = Symbol("ALL_ITEM");
67

@@ -40,8 +41,8 @@ export default class CheckboxList extends PureComponent {
4041
const { label, items, renderLabel } = this.props;
4142

4243
return (
43-
<div className={s.container}>
44-
<div className={s.label}>{label}:</div>
44+
<div className={styles.container}>
45+
<div className={styles.label}>{label}:</div>
4546
<div>
4647
<CheckboxListItem
4748
item={ALL_ITEM}

‎client/components/CheckboxListItem.jsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import { Component } from "preact";
22

3-
import Checkbox from "./Checkbox";
4-
import CheckboxList from "./CheckboxList";
5-
import * as s from "./CheckboxList.css";
3+
import Checkbox from "./Checkbox.jsx";
4+
import CheckboxList from "./CheckboxList.jsx";
5+
6+
import * as styles from "./CheckboxList.css";
67

78
export default class CheckboxListItem extends Component {
89
render() {
910
return (
10-
<div className={s.item}>
11+
<div className={styles.item}>
1112
<Checkbox {...this.props} onChange={this.handleChange}>
1213
{this.renderLabel()}
1314
</Checkbox>

‎client/components/ContextMenu.jsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import cls from "classnames";
2-
import ContextMenuItem from "./ContextMenuItem";
3-
import PureComponent from "../lib/PureComponent";
4-
import { store } from "../store";
5-
import { elementIsOutside } from "../utils";
2+
import PureComponent from "../lib/PureComponent.jsx";
3+
import { store } from "../store.js";
4+
import { elementIsOutside } from "../utils.js";
5+
import ContextMenuItem from "./ContextMenuItem.jsx";
66

7-
import * as s from "./ContextMenu.css";
7+
import * as styles from "./ContextMenu.css";
88

99
export default class ContextMenu extends PureComponent {
1010
componentDidMount() {
@@ -30,8 +30,8 @@ export default class ContextMenu extends PureComponent {
3030
render() {
3131
const { visible } = this.props;
3232
const containerClassName = cls({
33-
[s.container]: true,
34-
[s.hidden]: !visible,
33+
[styles.container]: true,
34+
[styles.hidden]: !visible,
3535
});
3636
const multipleChunksSelected = store.selectedChunks.length > 1;
3737
return (
@@ -93,14 +93,14 @@ export default class ContextMenu extends PureComponent {
9393
/**
9494
* Handle document-wide `mousedown` events to detect clicks
9595
* outside the context menu.
96-
* @param {MouseEvent} e - DOM mouse event object
96+
* @param {MouseEvent} event - DOM mouse event object
9797
* @returns {void}
9898
*/
99-
handleDocumentMousedown = (e) => {
100-
const isSecondaryClick = e.ctrlKey || e.button === 2;
101-
if (!isSecondaryClick && elementIsOutside(e.target, this.node)) {
102-
e.preventDefault();
103-
e.stopPropagation();
99+
handleDocumentMousedown = (event) => {
100+
const isSecondaryClick = event.ctrlKey || event.button === 2;
101+
if (!isSecondaryClick && elementIsOutside(event.target, this.node)) {
102+
event.preventDefault();
103+
event.stopPropagation();
104104
this.hide();
105105
}
106106
};

‎client/components/ContextMenuItem.jsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import cls from "classnames";
2-
import * as s from "./ContextMenuItem.css";
2+
3+
import * as styles from "./ContextMenuItem.css";
34

45
function noop() {
56
return false;
67
}
78

89
export default function ContextMenuItem({ children, disabled, onClick }) {
910
const className = cls({
10-
[s.item]: true,
11-
[s.disabled]: disabled,
11+
[styles.item]: true,
12+
[styles.disabled]: disabled,
1213
});
1314
const handler = disabled ? noop : onClick;
1415
return (

‎client/components/Dropdown.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { createRef } from "preact";
2-
import PureComponent from "../lib/PureComponent";
2+
import PureComponent from "../lib/PureComponent.jsx";
33

4-
import * as s from "./Dropdown.css";
4+
import * as styles from "./Dropdown.css";
55

66
export default class Dropdown extends PureComponent {
77
input = createRef();
@@ -29,12 +29,12 @@ export default class Dropdown extends PureComponent {
2929
: options;
3030

3131
return (
32-
<div className={s.container}>
33-
<div className={s.label}>{label}:</div>
32+
<div className={styles.container}>
33+
<div className={styles.label}>{label}:</div>
3434
<div>
3535
<input
3636
ref={this.input}
37-
className={s.input}
37+
className={styles.input}
3838
type="text"
3939
value={this.state.query}
4040
onInput={this.handleInput}
@@ -45,7 +45,7 @@ export default class Dropdown extends PureComponent {
4545
{filteredOptions.map((option) => (
4646
<div
4747
key={option}
48-
className={s.option}
48+
className={styles.option}
4949
onClick={this.getOptionClickHandler(option)}
5050
>
5151
{option}

‎client/components/Icon.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import cls from "classnames";
2-
import * as s from "./Icon.css";
3-
import PureComponent from "../lib/PureComponent";
4-
52
import iconArrowRight from "../assets/icon-arrow-right.svg";
6-
import iconPin from "../assets/icon-pin.svg";
73
import iconMoon from "../assets/icon-moon.svg";
4+
import iconPin from "../assets/icon-pin.svg";
85
import iconSun from "../assets/icon-sun.svg";
6+
import PureComponent from "../lib/PureComponent.jsx";
7+
8+
import * as s from "./Icon.css";
99

1010
const ICONS = {
1111
"arrow-right": {

‎client/components/ModuleItem.jsx‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1+
import cls from "classnames";
12
import escapeRegExp from "escape-string-regexp";
2-
import { escape } from "html-escaper";
33
import { filesize } from "filesize";
4-
import cls from "classnames";
4+
import { escape } from "html-escaper";
5+
import PureComponent from "../lib/PureComponent.jsx";
56

6-
import PureComponent from "../lib/PureComponent";
7-
import * as s from "./ModuleItem.css";
7+
import * as styles from "./ModuleItem.css";
88

99
export default class ModuleItem extends PureComponent {
1010
state = {
@@ -13,8 +13,8 @@ export default class ModuleItem extends PureComponent {
1313

1414
render({ module, showSize }) {
1515
const invisible = !this.state.visible;
16-
const classes = cls(s.container, s[this.itemType], {
17-
[s.invisible]: invisible,
16+
const classes = cls(styles.container, styles[this.itemType], {
17+
[styles.invisible]: invisible,
1818
});
1919

2020
return (
@@ -57,10 +57,11 @@ export default class ModuleItem extends PureComponent {
5757
} while (match);
5858

5959
if (lastMatch) {
60-
html =
61-
escape(title.slice(0, lastMatch.index)) +
62-
`<strong>${escape(lastMatch[0])}</strong>` +
63-
escape(title.slice(lastMatch.index + lastMatch[0].length));
60+
html = `${escape(
61+
title.slice(0, lastMatch.index),
62+
)}<strong>${escape(lastMatch[0])}</strong>${escape(
63+
title.slice(lastMatch.index + lastMatch[0].length),
64+
)}`;
6465
}
6566
}
6667

‎client/components/ModulesList.jsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import cls from "classnames";
2-
import * as s from "./ModulesList.css";
3-
import ModuleItem from "./ModuleItem";
4-
import PureComponent from "../lib/PureComponent";
2+
import PureComponent from "../lib/PureComponent.jsx";
3+
import ModuleItem from "./ModuleItem.jsx";
4+
5+
import * as styles from "./ModulesList.css";
56

67
export default class ModulesList extends PureComponent {
78
render({ modules, showSize, highlightedText, isModuleVisible, className }) {
89
return (
9-
<div className={cls(s.container, className)}>
10+
<div className={cls(styles.container, className)}>
1011
{modules.map((module) => (
1112
<ModuleItem
1213
key={module.cid}

0 commit comments

Comments
 (0)