Skip to content

Commit e6e0ccc

Browse files
lxieyanglxieyang
committed
use classnames to rewrite conditional classes
1 parent 5d3e148 commit e6e0ccc

File tree

6 files changed

+154
-141
lines changed

6 files changed

+154
-141
lines changed

‎src/pages/Sidebar/Sidebar.jsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { Component } from 'react';
2+
import classNames from 'classnames';
23
import update from 'immutability-helper';
34
import DarkModeContext from './context/dark-mode-context';
45
import { sortBy } from 'lodash';
@@ -264,10 +265,10 @@ class Sidebar extends Component {
264265
{(darkModeContext) => {
265266
return (
266267
<div
267-
className={[
268-
'SidebarContainer',
269-
darkModeContext.isDark ? 'Dark' : null,
270-
].join(' ')}
268+
className={classNames({
269+
SidebarContainer: true,
270+
Dark: darkModeContext.isDark,
271+
})}
271272
>
272273
<Title setDisplayTabInFull={this.setDisplayTabInFull} />
273274
<TabsList

‎src/pages/Sidebar/containers/TabsList/SearchBar/SearchBar.jsx‎

Lines changed: 14 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { useContext } from 'react';
2+
import classNames from 'classnames';
23
import DarkModeContext from '../../../context/dark-mode-context';
34
import './SearchBar.css';
45

@@ -15,32 +16,25 @@ const SearchBar = ({
1516
<input
1617
// autoFocus
1718
type="search"
18-
className={['SearchBarInput', isDark ? 'Dark' : null].join(' ')}
19+
className={classNames({
20+
SearchBarInput: true,
21+
Dark: isDark,
22+
})}
1923
placeholder={'🔍 search tabs here'}
2024
value={searchBarInputText}
2125
onChange={(e) => handleSearchBarInputText(e)}
2226
/>
2327
<div className="SearchResultsCountContainer">
2428
<div
25-
className={[
26-
'SearchResultsCount',
27-
isDark ? 'Dark' : null,
28-
searchBarInputText.length > 0 && searchCount === 0
29-
? 'NoResults'
30-
: null,
31-
searchBarInputText.length > 0 && searchCount === 1
32-
? 'Success'
33-
: null,
34-
searchBarInputText.length > 0 && searchCount > 1
35-
? 'Searching'
36-
: null,
37-
// searchBarInputText.length > 0 && searchCount > 1 && searchCount <= 3
38-
// ? 'CloseToSuccess'
39-
// : null,
40-
// searchBarInputText.length > 0 && searchCount > 3
41-
// ? 'Searching'
42-
// : null,
43-
].join(' ')}
29+
className={classNames({
30+
SearchResultsCount: true,
31+
Dark: isDark,
32+
NoResults: searchBarInputText.length > 0 && searchCount === 0,
33+
Success: searchBarInputText.length > 0 && searchCount === 1,
34+
Searching: searchBarInputText.length > 0 && searchCount > 1,
35+
// CloseToSuccess:searchBarInputText.length > 0 && searchCount > 1 && searchCount <= 3,
36+
// Searching: searchBarInputText.length > 0 && searchCount > 3,
37+
})}
4438
>
4539
{searchCount}
4640
</div>

‎src/pages/Sidebar/containers/TabsList/Tab/Tab.jsx‎

Lines changed: 76 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { useRef, useContext } from 'react';
2+
import classNames from 'classnames';
23
import DarkModeContext from '../../../context/dark-mode-context';
34
import Loader from 'react-loader-spinner';
45
import { useDrag, useDrop } from 'react-dnd';
@@ -162,7 +163,10 @@ const Tab = ({
162163
<li
163164
// style={{ opacity: isDragging ? 0 : 1 }}
164165
ref={ref}
165-
className={['TabItem', isDragging ? 'blink' : null].join(' ')}
166+
className={classNames({
167+
TabItem: true,
168+
blink: isDragging,
169+
})}
166170
onClick={(event) => {
167171
if (contextMenuShowPrev && !contextMenuShow) {
168172
clearContextMenuShow();
@@ -191,41 +195,40 @@ const Tab = ({
191195
}}
192196
>
193197
<div
194-
className={[
195-
'TabContainerPad',
196-
isDark ? 'Dark' : null,
197-
active ? 'TabContainerPadActive' : null,
198-
(!active && isHovering && idx === index) ||
199-
(!active && isHovering && isSearching)
200-
? 'TabContainerPadInactiveHovering'
201-
: null,
202-
].join(' ')}
198+
className={classNames({
199+
TabContainerPad: true,
200+
Dark: isDark,
201+
TabContainerPadActive: active,
202+
TabContainerPadInactiveHovering:
203+
(!active && isHovering && idx === index) ||
204+
(!active && isHovering && isSearching),
205+
})}
203206
>
204207
<div
205-
className={[
206-
'TabContainerLeftPadInner',
207-
isDark ? 'Dark' : null,
208-
].join(' ')}
208+
className={classNames({
209+
TabContainerLeftPadInner: true,
210+
Dark: isDark,
211+
})}
209212
></div>
210213
</div>
211214

212215
<div
213-
className={[
214-
'TabContainer',
215-
isDark ? 'Dark' : null,
216-
active ? 'ActiveTabContainer' : null,
217-
(!active && isHovering && idx === index) ||
218-
(!active && isHovering && isSearching)
219-
? 'InactiveTabContainerHovering'
220-
: null,
221-
].join(' ')}
216+
className={classNames({
217+
TabContainer: true,
218+
Dark: isDark,
219+
ActiveTabContainer: active,
220+
InactiveTabContainerHovering:
221+
(!active && isHovering && idx === index) ||
222+
(!active && isHovering && isSearching),
223+
})}
222224
>
223225
{pinned && (
224226
<div className="PinnedIconContainer">
225227
<FaThumbtack
226-
className={['PinnedIcon', isDark ? 'Dark' : null].join(
227-
' '
228-
)}
228+
className={classNames({
229+
PinnedIcon: true,
230+
Dark: isDark,
231+
})}
229232
/>
230233
</div>
231234
)}
@@ -252,30 +255,30 @@ const Tab = ({
252255
title={displayTabInFull ? url : `${title}\n\n${url}`}
253256
>
254257
<div
255-
className={[
256-
'TabTitle',
257-
displayTabInFull ? null : 'Truncated',
258-
].join(' ')}
258+
className={classNames({
259+
TabTitle: true,
260+
Truncated: displayTabInFull,
261+
})}
259262
>
260263
{title}
261264
</div>
262265
{mutedInfo.muted && audible && (
263266
<div
264-
className={[
265-
'MutedIconContainer',
266-
isDark ? 'Dark' : null,
267-
].join(' ')}
267+
className={classNames({
268+
MutedIconContainer: true,
269+
Dark: isDark,
270+
})}
268271
onClick={(e) => muteTabClickedHandler(e, id)}
269272
>
270273
<MdVolumeOff size={'16px'} />
271274
</div>
272275
)}
273276
{!mutedInfo.muted && audible && (
274277
<div
275-
className={[
276-
'MutedIconContainer',
277-
isDark ? 'Dark' : null,
278-
].join(' ')}
278+
className={classNames({
279+
MutedIconContainer: true,
280+
Dark: isDark,
281+
})}
279282
onClick={(e) => muteTabClickedHandler(e, id)}
280283
>
281284
<MdVolumeUp size={'16px'} />
@@ -295,10 +298,10 @@ const Tab = ({
295298
}}
296299
>
297300
<div
298-
className={[
299-
'TabItemActionButton',
300-
isDark ? 'Dark' : null,
301-
].join(' ')}
301+
className={classNames({
302+
TabItemActionButton: true,
303+
Dark: isDark,
304+
})}
302305
onClick={(e) => reloadTabClickedHandler(e, id)}
303306
>
304307
<MdRefresh size={'16px'} />
@@ -309,10 +312,10 @@ const Tab = ({
309312

310313
<div title="Close tab" className="TabItemActionButtonContainer">
311314
<div
312-
className={[
313-
'TabItemActionButton',
314-
isDark ? 'Dark' : null,
315-
].join(' ')}
315+
className={classNames({
316+
TabItemActionButton: true,
317+
Dark: isDark,
318+
})}
316319
onClick={(e) => closeTabClickedHandler(e, id)}
317320
>
318321
<MdClose size={'16px'} />
@@ -321,21 +324,20 @@ const Tab = ({
321324
</div>
322325

323326
<div
324-
className={[
325-
'TabContainerPad',
326-
isDark ? 'Dark' : null,
327-
active ? 'TabContainerPadActive' : null,
328-
(!active && isHovering && idx === index) ||
329-
(!active && isHovering && isSearching)
330-
? 'TabContainerPadInactiveHovering'
331-
: null,
332-
].join(' ')}
327+
className={classNames({
328+
TabContainerPad: true,
329+
Dark: isDark,
330+
TabContainerPadActive: active,
331+
TabContainerPadInactiveHovering:
332+
(!active && isHovering && idx === index) ||
333+
(!active && isHovering && isSearching),
334+
})}
333335
>
334336
<div
335-
className={[
336-
'TabContainerRightPadInner',
337-
isDark ? 'Dark' : null,
338-
].join(' ')}
337+
className={classNames({
338+
TabContainerRightPadInner: true,
339+
Dark: isDark,
340+
})}
339341
></div>
340342
</div>
341343
</li>
@@ -348,7 +350,9 @@ const Tab = ({
348350
onHide={(e) => {
349351
setContextMenuShow(false);
350352
}}
351-
className={[isDark ? 'Dark' : null].join(' ')}
353+
className={classNames({
354+
Dark: isDark,
355+
})}
352356
>
353357
<MenuItem onClick={(e) => openNewTabClickedHandler()}>
354358
<div className="MenuItemIconContainer">
@@ -357,7 +361,12 @@ const Tab = ({
357361
New Tab
358362
</MenuItem>
359363

360-
<MenuItem divider className={[isDark ? 'Dark' : null].join(' ')} />
364+
<MenuItem
365+
divider
366+
className={classNames({
367+
Dark: isDark,
368+
})}
369+
/>
361370

362371
<MenuItem onClick={(e) => reloadTabClickedHandler(e, id)}>
363372
<div className="MenuItemIconContainer">
@@ -397,7 +406,12 @@ const Tab = ({
397406
Copy Tab URL
398407
</MenuItem>
399408

400-
<MenuItem divider className={[isDark ? 'Dark' : null].join(' ')} />
409+
<MenuItem
410+
divider
411+
className={classNames({
412+
Dark: isDark,
413+
})}
414+
/>
401415

402416
<MenuItem onClick={(e) => closeTabClickedHandler(e, id)}>
403417
<div className="MenuItemIconContainer">

‎src/pages/Sidebar/containers/TabsList/TabsList.jsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { Component } from 'react';
2+
import classNames from 'classnames';
23
import DarkModeContext from '../../context/dark-mode-context';
34

45
import { MdAdd } from 'react-icons/md';
@@ -158,16 +159,17 @@ class TabsList extends Component {
158159
})}
159160

160161
<li
161-
className={[
162-
'NewTabButtonContainer',
163-
isDark ? 'Dark' : null,
164-
].join(' ')}
162+
className={classNames({
163+
NewTabButtonContainer: true,
164+
Dark: isDark,
165+
})}
165166
title="Open a new tab"
166167
>
167168
<div
168-
className={['NewTabButton', isDark ? 'Dark' : null].join(
169-
' '
170-
)}
169+
className={classNames({
170+
NewTabButton: true,
171+
Dark: isDark,
172+
})}
171173
onClick={(e) => this.openNewTabClickedHandler(e)}
172174
>
173175
<MdAdd size={'22px'} />

0 commit comments

Comments
 (0)