Skip to content

Commit 7bfb821

Browse files
mschwartzmschwartz
committed
Merge branch 'master' of github.com:ModusCreateOrg/extjs-reactjs-examples
2 parents 9cfe1ef + 42d1db8 commit 7bfb821

File tree

109 files changed

+132266
-284
lines changed

Some content is hidden

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

109 files changed

+132266
-284
lines changed

‎07-list/a-basic-list/src/List.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ class List extends Component {
1515
<div
1616
key={item.id}
1717
className={this.getItemClassName(item)}
18-
onClick={this.onItemClick.bind(this, item)}
18+
onClick={this.handleItemClick.bind(this, item)}
1919
>
2020
<div className="main">{item.lastName}, {item.firstName}</div>
2121
<div className="secondary">
@@ -28,11 +28,11 @@ class List extends Component {
2828
getItemClassName (item) {
2929
return 'list-item';
3030
}
31-
onItemClick (item, e) {
31+
handleItemClick (item, e) {
3232
e.preventDefault();
33-
const { onItemClick } = this.props;
34-
if (typeof onItemClick === 'function') {
35-
onItemClick(item, e);
33+
const { handleItemClick } = this.props;
34+
if (typeof handleItemClick === 'function') {
35+
handleItemClick(item, e);
3636
}
3737
}
3838
}

‎07-list/b-selectable-list/src/List.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ class List extends Component {
1818
<div
1919
key={item.id}
2020
className={this.getItemClassName(item)}
21-
onClick={this.onItemClick.bind(this, item)}
21+
onClick={this.handleItemClick.bind(this, item)}
2222
>
2323
<div className="main">{item.lastName}, {item.firstName}</div>
2424
<div className="secondary">
@@ -31,11 +31,11 @@ class List extends Component {
3131
getItemClassName (item) {
3232
return 'list-item';
3333
}
34-
onItemClick (item, e) {
34+
handleItemClick (item, e) {
3535
e.preventDefault();
36-
const { onItemClick } = this.props;
37-
if (typeof onItemClick === 'function') {
38-
onItemClick(item, e);
36+
const { handleItemClick } = this.props;
37+
if (typeof handleItemClick === 'function') {
38+
handleItemClick(item, e);
3939
}
4040
}
4141
}

‎07-list/b-selectable-list/src/Selectable.js‎

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,41 @@
1-
import React from 'react'
21
import './Selectable.css';
32

43
function selectable (List) {
54
return class SelectableList extends List {
6-
buildItem (item) {
7-
const node = super.buildItem(item);
8-
const { selected = [] } = this.state;
9-
let className = 'list-item';
10-
if (selected.includes(item.id)) {
11-
className = `${className} list-item-selected`;
12-
}
13-
return React.cloneElement(node, { className });
5+
getItemClassName (item) {
6+
const className = super.getItemClassName(item);
7+
const {
8+
selected = []
9+
} = this.state;
10+
11+
return selected.includes(item.id) ?
12+
`${className} list-item-selected` :
13+
className;
1414
}
15+
1516
onItemClick (toSelect, e) {
1617
super.onItemClick(toSelect, e);
18+
1719
const { data, selection, onSelection } = this.props;
20+
1821
let { selected = [] } = this.state;
22+
1923
let add = true;
24+
2025
if (selection === 'multi') {
2126
const last = selected[ selected.length - 1 ];
27+
2228
if (last != null) {
2329
const lastIdx = data.findIndex(item => item.id === last);
2430
const currentIdx = data.findIndex(item => item.id === toSelect.id);
31+
2532
if (lastIdx === currentIdx) {
2633
// indices are the same, deselect
2734
selected.splice(currentIdx - 1, 1);
35+
2836
add = false;
2937
}
38+
3039
if (e.shiftKey) {
3140
if (lastIdx !== -1 && currentIdx !== -1) {
3241
// get all items between the last selected item
@@ -51,21 +60,25 @@ function selectable (List) {
5160
// single mode, clear out the array
5261
selected.length = 0;
5362
}
63+
5464
if (add) {
5565
selected.push(toSelect.id);
5666
}
67+
5768
if (selected.length > 1) {
5869
// remove duplicates
5970
selected = [ ...new Set(selected) ];
6071
}
72+
6173
this.setState({
6274
selected
6375
});
76+
6477
if (typeof onSelection === 'function') {
6578
onSelection(selected.map(id => data.find(item => item.id === id)));
6679
}
6780
}
6881
}
6982
}
70-
export default selectable;
7183

84+
export default selectable;

‎07-list/c-list-tools/src/List.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ class List extends Component {
2020
<div
2121
key={item.id}
2222
className={this.getItemClassName(item)}
23-
onClick={this.onItemClick.bind(this, item)}
23+
onClick={this.handleItemClick.bind(this, item)}
2424
>
2525
<div className="main">{item.lastName}, {item.firstName}</div>
2626
<div className="secondary">
@@ -33,11 +33,11 @@ class List extends Component {
3333
getItemClassName (item) {
3434
return 'list-item';
3535
}
36-
onItemClick (item, e) {
36+
handleItemClick (item, e) {
3737
e.preventDefault();
38-
const { onItemClick } = this.props;
39-
if (typeof onItemClick === 'function') {
40-
onItemClick(item, e);
38+
const { handleItemClick } = this.props;
39+
if (typeof handleItemClick === 'function') {
40+
handleItemClick(item, e);
4141
}
4242
}
4343
}

‎07-list/c-list-tools/src/Selectable.js‎

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,41 @@
1-
import React from 'react'
21
import './Selectable.css';
32

43
function selectable (List) {
54
return class SelectableList extends List {
6-
buildItem (item) {
7-
const node = super.buildItem(item);
8-
const { selected = [] } = this.state;
9-
let className = 'list-item';
10-
if (selected.includes(item.id)) {
11-
className = `${className} list-item-selected`;
12-
}
13-
return React.cloneElement(node, { className });
5+
getItemClassName (item) {
6+
const className = super.getItemClassName(item);
7+
const {
8+
selected = []
9+
} = this.state;
10+
11+
return selected.includes(item.id) ?
12+
`${className} list-item-selected` :
13+
className;
1414
}
15+
1516
onItemClick (toSelect, e) {
1617
super.onItemClick(toSelect, e);
18+
1719
const { data, selection, onSelection } = this.props;
20+
1821
let { selected = [] } = this.state;
22+
1923
let add = true;
24+
2025
if (selection === 'multi') {
2126
const last = selected[ selected.length - 1 ];
27+
2228
if (last != null) {
2329
const lastIdx = data.findIndex(item => item.id === last);
2430
const currentIdx = data.findIndex(item => item.id === toSelect.id);
31+
2532
if (lastIdx === currentIdx) {
2633
// indices are the same, deselect
2734
selected.splice(currentIdx - 1, 1);
35+
2836
add = false;
2937
}
38+
3039
if (e.shiftKey) {
3140
if (lastIdx !== -1 && currentIdx !== -1) {
3241
// get all items between the last selected item
@@ -51,21 +60,25 @@ function selectable (List) {
5160
// single mode, clear out the array
5261
selected.length = 0;
5362
}
63+
5464
if (add) {
5565
selected.push(toSelect.id);
5666
}
67+
5768
if (selected.length > 1) {
5869
// remove duplicates
5970
selected = [ ...new Set(selected) ];
6071
}
72+
6173
this.setState({
6274
selected
6375
});
76+
6477
if (typeof onSelection === 'function') {
6578
onSelection(selected.map(id => data.find(item => item.id === id)));
6679
}
6780
}
6881
}
6982
}
70-
export default selectable;
7183

84+
export default selectable;

‎07-list/c-list-tools/src/Toolable.js‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,12 @@ function toolable (List) {
99
prop: 'disclosure'
1010
}
1111
}
12+
1213
buildItem (item) {
1314
const node = super.buildItem(item);
15+
1416
const tools = this.buildTools();
17+
1518
return tools.length ?
1619
(
1720
<div key={item.id} className={this.getItemClassName(item)}>
@@ -27,37 +30,48 @@ function toolable (List) {
2730
) :
2831
node;
2932
}
33+
3034
getItemClassName (item) {
3135
const className = super.getItemClassName(item);
3236
const tools = this.buildTools();
37+
3338
return tools.length ? `${className} list-item-tooled` : className;
3439
}
40+
3541
buildTools () {
3642
const { props, tools} = this;
43+
3744
const items = [];
45+
3846
for (const name in tools) {
3947
const cfg = tools[ name ];
48+
4049
if (props[ cfg.prop ]) {
4150
items.push(name);
4251
}
4352
}
53+
4454
return items;
4555
}
56+
4657
buildTool (name, item) {
4758
const { tools: { [ name ] : cfg } } = this;
59+
4860
return <div
4961
key={`list-tool-${item.id}`}
5062
className={`list-tool ${cfg.cls}`}
5163
onClick={this.onToolClick.bind(this, item, cfg)}
5264
/>;
5365
}
66+
5467
onToolClick = (item, tool) => {
5568
const { props: { [ tool.prop ]: cfg } } = this;
69+
5670
if (typeof cfg === 'function') {
5771
cfg(item);
5872
}
5973
}
6074
}
6175
}
62-
export default toolable;
6376

77+
export default toolable;

0 commit comments

Comments
 (0)