Skip to content

Commit 390b3f8

Browse files
brendanmoorebrendanmoore
committed
Refactor css-modules to plain css
 - Use `extract-text-webpack-plugin` for `dist` (examples/storybook remain unchanged) - Added `classnames` helper to streamline classname concatenation - Remove IE specific hacks
1 parent f108483 commit 390b3f8

17 files changed

+659
-666
lines changed

‎README.md‎

Lines changed: 52 additions & 48 deletions
Large diffs are not rendered by default.

‎examples/storybooks/__snapshots__/storyshots.test.js.snap‎

Lines changed: 411 additions & 411 deletions
Large diffs are not rendered by default.

‎package-lock.json‎

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

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@
9191
"eslint-plugin-import": "^2.8.0",
9292
"eslint-plugin-jsx-a11y": "^6.0.3",
9393
"eslint-plugin-react": "^7.5.1",
94+
"extract-text-webpack-plugin": "^3.0.2",
9495
"file-loader": "^1.1.6",
9596
"gh-pages": "^1.1.0",
9697
"html-webpack-plugin": "^2.30.1",

‎src/__snapshots__/react-sortable-tree.test.js.snap‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
exports[`<SortableTree /> should render tree correctly 1`] = `
44
<div
5-
className="tree"
5+
className="rst__tree"
66
style={
77
Object {
88
"height": "100%",
@@ -13,7 +13,7 @@ exports[`<SortableTree /> should render tree correctly 1`] = `
1313
<div
1414
aria-label="grid"
1515
aria-readonly={true}
16-
className="ReactVirtualized__Grid ReactVirtualized__List virtualScrollOverride"
16+
className="ReactVirtualized__Grid ReactVirtualized__List rst__virtualScrollOverride"
1717
id={undefined}
1818
onScroll={[Function]}
1919
role="grid"
@@ -48,7 +48,7 @@ exports[`<SortableTree /> should render tree correctly 1`] = `
4848
}
4949
>
5050
<div
51-
className="node"
51+
className="rst__node"
5252
style={
5353
Object {
5454
"height": 62,
@@ -60,15 +60,15 @@ exports[`<SortableTree /> should render tree correctly 1`] = `
6060
}
6161
>
6262
<div
63-
className="lineBlock lineHalfHorizontalRight"
63+
className="rst__lineBlock rst__lineHalfHorizontalRight"
6464
style={
6565
Object {
6666
"width": 44,
6767
}
6868
}
6969
/>
7070
<div
71-
className="nodeContent"
71+
className="rst__nodeContent"
7272
style={
7373
Object {
7474
"left": 44,
@@ -83,31 +83,31 @@ exports[`<SortableTree /> should render tree correctly 1`] = `
8383
}
8484
>
8585
<div
86-
className="rowWrapper"
86+
className="rst__rowWrapper"
8787
>
8888
<div
89-
className="row"
89+
className="rst__row"
9090
style={
9191
Object {
9292
"opacity": 1,
9393
}
9494
}
9595
>
9696
<div
97-
className="moveHandle"
97+
className="rst__moveHandle"
9898
/>
9999
<div
100-
className="rowContents"
100+
className="rst__rowContents"
101101
>
102102
<div
103-
className="rowLabel"
103+
className="rst__rowLabel"
104104
>
105105
<span
106-
className="rowTitle"
106+
className="rst__rowTitle"
107107
/>
108108
</div>
109109
<div
110-
className="rowToolbar"
110+
className="rst__rowToolbar"
111111
/>
112112
</div>
113113
</div>

‎src/node-renderer-default.js‎

Lines changed: 40 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,8 @@
11
import React, { Component } from 'react';
22
import PropTypes from 'prop-types';
3-
import { getIEVersion } from './utils/browser-utils';
4-
import baseStyles from './node-renderer-default.scss';
53
import { isDescendant } from './utils/tree-data-utils';
6-
7-
let styles = baseStyles;
8-
// Add extra classes in browsers that don't support flex
9-
if (getIEVersion < 10) {
10-
styles = {
11-
...baseStyles,
12-
row: `${styles.row} ${styles.row_NoFlex}`,
13-
rowContents: `${styles.rowContents} ${styles.rowContents_NoFlex}`,
14-
rowLabel: `${styles.rowLabel} ${styles.rowLabel_NoFlex}`,
15-
rowToolbar: `${styles.rowToolbar} ${styles.rowToolbar_NoFlex}`,
16-
};
17-
}
4+
import classnames from './utils/classnames';
5+
import './node-renderer-default.scss';
186

197
class NodeRendererDefault extends Component {
208
render() {
@@ -52,26 +40,26 @@ class NodeRendererDefault extends Component {
5240
// Show a loading symbol on the handle when the children are expanded
5341
// and yet still defined by a function (a callback to fetch the children)
5442
handle = (
55-
<div className={styles.loadingHandle}>
56-
<div className={styles.loadingCircle}>
57-
<div className={styles.loadingCirclePoint} />
58-
<div className={styles.loadingCirclePoint} />
59-
<div className={styles.loadingCirclePoint} />
60-
<div className={styles.loadingCirclePoint} />
61-
<div className={styles.loadingCirclePoint} />
62-
<div className={styles.loadingCirclePoint} />
63-
<div className={styles.loadingCirclePoint} />
64-
<div className={styles.loadingCirclePoint} />
65-
<div className={styles.loadingCirclePoint} />
66-
<div className={styles.loadingCirclePoint} />
67-
<div className={styles.loadingCirclePoint} />
68-
<div className={styles.loadingCirclePoint} />
43+
<div className="rst__loadingHandle">
44+
<div className="rst__loadingCircle">
45+
<div className="rst__loadingCirclePoint" />
46+
<div className="rst__loadingCirclePoint" />
47+
<div className="rst__loadingCirclePoint" />
48+
<div className="rst__loadingCirclePoint" />
49+
<div className="rst__loadingCirclePoint" />
50+
<div className="rst__loadingCirclePoint" />
51+
<div className="rst__loadingCirclePoint" />
52+
<div className="rst__loadingCirclePoint" />
53+
<div className="rst__loadingCirclePoint" />
54+
<div className="rst__loadingCirclePoint" />
55+
<div className="rst__loadingCirclePoint" />
56+
<div className="rst__loadingCirclePoint" />
6957
</div>
7058
</div>
7159
);
7260
} else {
7361
// Show the handle used to initiate a drag-and-drop
74-
handle = connectDragSource(<div className={styles.moveHandle} />, {
62+
handle = connectDragSource(<div className="rst__moveHandle" />, {
7563
dropEffect: 'copy',
7664
});
7765
}
@@ -90,7 +78,7 @@ class NodeRendererDefault extends Component {
9078
type="button"
9179
aria-label={node.expanded ? 'Collapse' : 'Expand'}
9280
className={
93-
node.expanded ? styles.collapseButton : styles.expandButton
81+
node.expanded ? 'rst__collapseButton' : 'rst__expandButton'
9482
}
9583
style={{ left: -0.5 * scaffoldBlockPxWidth }}
9684
onClick={() =>
@@ -106,26 +94,24 @@ class NodeRendererDefault extends Component {
10694
!isDragging && (
10795
<div
10896
style={{ width: scaffoldBlockPxWidth }}
109-
className={styles.lineChildren}
97+
className="rst__lineChildren"
11098
/>
11199
)}
112100
</div>
113101
)}
114102

115-
<div className={styles.rowWrapper}>
103+
<div className="rst__rowWrapper">
116104
{/* Set the row preview to be used during drag and drop */}
117105
{connectDragPreview(
118106
<div
119-
className={
120-
styles.row +
121-
(isLandingPadActive ? ` ${styles.rowLandingPad}` : '') +
122-
(isLandingPadActive && !canDrop
123-
? ` ${styles.rowCancelPad}`
124-
: '') +
125-
(isSearchMatch ? ` ${styles.rowSearchMatch}` : '') +
126-
(isSearchFocus ? ` ${styles.rowSearchFocus}` : '') +
127-
(className ? ` ${className}` : '')
128-
}
107+
className={classnames(
108+
'rst__row',
109+
isLandingPadActive && 'rst__rowLandingPad',
110+
isLandingPadActive && !canDrop && 'rst__rowCancelPad',
111+
isSearchMatch && 'rst__rowSearchMatch',
112+
isSearchFocus && 'rst__rowSearchFocus',
113+
className
114+
)}
129115
style={{
130116
opacity: isDraggedDescendant ? 0.5 : 1,
131117
...style,
@@ -134,17 +120,17 @@ class NodeRendererDefault extends Component {
134120
{handle}
135121

136122
<div
137-
className={
138-
styles.rowContents +
139-
(!canDrag ? ` ${styles.rowContentsDragDisabled}` : '')
140-
}
123+
className={classnames(
124+
'rst__rowContents',
125+
!canDrag && 'rst__rowContentsDragDisabled'
126+
)}
141127
>
142-
<div className={styles.rowLabel}>
128+
<div className="rst__rowLabel">
143129
<span
144-
className={
145-
styles.rowTitle +
146-
(node.subtitle ? ` ${styles.rowTitleWithSubtitle}` : '')
147-
}
130+
className={classnames(
131+
'rst__rowTitle',
132+
node.subtitle && 'rst__rowTitleWithSubtitle'
133+
)}
148134
>
149135
{typeof nodeTitle === 'function'
150136
? nodeTitle({
@@ -156,7 +142,7 @@ class NodeRendererDefault extends Component {
156142
</span>
157143

158144
{nodeSubtitle && (
159-
<span className={styles.rowSubtitle}>
145+
<span className="rst__rowSubtitle">
160146
{typeof nodeSubtitle === 'function'
161147
? nodeSubtitle({
162148
node,
@@ -168,11 +154,11 @@ class NodeRendererDefault extends Component {
168154
)}
169155
</div>
170156

171-
<div className={styles.rowToolbar}>
157+
<div className="rst__rowToolbar">
172158
{buttons.map((btn, index) => (
173159
<div
174160
key={index} // eslint-disable-line react/no-array-index-key
175-
className={styles.toolbarButton}
161+
className="rst__toolbarButton"
176162
>
177163
{btn}
178164
</div>

0 commit comments

Comments
 (0)