Skip to content

Commit 071e139

Browse files
bplok20010bplok20010
committed
v2 Init
1 parent 1f8fbfb commit 071e139

29 files changed

+17280
-11864
lines changed

‎.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -1 +1,5 @@
11
/node_modules
2+
/lib
3+
/cjs
4+
/esm
5+
/dist

‎.prettierignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
*.md

‎.prettierrc

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"arrowParens": "always",
3+
"bracketSpacing": true,
4+
"endOfLine": "auto",
5+
"htmlWhitespaceSensitivity": "css",
6+
"insertPragma": false,
7+
"jsxBracketSameLine": false,
8+
"jsxSingleQuote": false,
9+
"printWidth": 100,
10+
"proseWrap": "preserve",
11+
"quoteProps": "as-needed",
12+
"requirePragma": false,
13+
"semi": true,
14+
"singleQuote": false,
15+
"tabWidth": 4,
16+
"trailingComma": "es5",
17+
"useTabs": true
18+
}

‎LICENSE

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2018 react-widget
3+
Copyright (c) 2018-2020 react-widget-listbox nobo
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎babel.config.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
module.exports = api => {
2+
const isTest = api.env("test");
3+
if (!isTest) return {};
4+
5+
return {
6+
presets: [
7+
[
8+
"babel-preset-packez",
9+
{
10+
modules: "cjs",
11+
},
12+
],
13+
],
14+
};
15+
};

‎examples/Demo.js

+32-36
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,36 @@
1-
import React, { Component } from 'react';
2-
import DemoList from './DemoList';
1+
import React, { Component } from "react";
2+
import DemoList from "./DemoList";
33

44
export default class Demo extends Component {
5+
state = {
6+
current: DemoList[0],
7+
};
58

6-
state = {
7-
current: DemoList[0]
8-
}
9+
onDemoChange(item, e) {
10+
this.setState({
11+
current: item,
12+
});
13+
}
914

10-
onDemoChange(item, e) {
11-
this.setState({
12-
current: item
13-
});
14-
}
15-
16-
render() {
17-
const { current } = this.state;
18-
return (
19-
<div className="container">
20-
<div className="slider">
21-
{
22-
DemoList.map((item, i) => {
23-
return (
24-
<div
25-
className={current === item ? 'active' : ''}
26-
onClick={this.onDemoChange.bind(this, item)}
27-
>
28-
{item.label}
29-
</div>
30-
);
31-
})
32-
}
33-
</div>
34-
<div className="content">
35-
{current ? <current.component /> : null}
36-
</div>
37-
</div>
38-
)
39-
}
40-
}
15+
render() {
16+
const { current } = this.state;
17+
return (
18+
<div className="container">
19+
<div className="slider">
20+
{DemoList.map((item, i) => {
21+
return (
22+
<div
23+
key={i}
24+
className={current === item ? "active" : ""}
25+
onClick={this.onDemoChange.bind(this, item)}
26+
>
27+
{item.label}
28+
</div>
29+
);
30+
})}
31+
</div>
32+
<div className="content">{current ? <current.component /> : null}</div>
33+
</div>
34+
);
35+
}
36+
}

‎examples/demos/demo1.js

+88-94
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,98 @@
1-
import React, { Component } from 'react';
2-
import ListBox from '../../src';
1+
import React, { Component } from "react";
2+
import ListBox from "../../src";
33

44
const dataset = [];
55

66
var uuid = 100;
77

88
for (let i = 0; i < 10; i++) {
9-
const items = [];
10-
const d = {
11-
children: items,
12-
label: '分组' + (i + 1)
13-
}
14-
15-
dataset.push(d)
16-
17-
for (let j = 0; j < 40; j++) {
18-
let d = {
19-
value: uuid++,
20-
label: '选项' + (j + 1),
21-
disabled: !(j % 5)
22-
}
23-
items.push(d)
24-
}
9+
const items = [];
10+
const d = {
11+
children: items,
12+
label: "分组" + (i + 1),
13+
};
14+
15+
dataset.push(d);
16+
17+
for (let j = 0; j < 40; j++) {
18+
let d = {
19+
value: uuid++,
20+
label: "选项" + (j + 1),
21+
disabled: !(j % 5),
22+
};
23+
items.push(d);
24+
}
2525
}
2626

27-
2827
export default class DEMO extends Component {
29-
30-
state = {
31-
value: 2
32-
}
33-
34-
35-
handleChange = (value) => {
36-
this.setState({
37-
value
38-
})
39-
40-
console.log('changed ', value)
41-
}
42-
43-
handleChange2 = (value) => {
44-
console.log('changed ', value)
45-
}
46-
47-
filterMsg = ''
48-
49-
render() {
50-
51-
return (
52-
<div>
53-
<ListBox
54-
style={{
55-
maxWidth: 300,
56-
maxHeight: 400,
57-
}}
58-
autoFocus
59-
renderHeader={() => <h3>header</h3>}
60-
renderFooter={() => <h3>footer</h3>}
61-
renderMenu={(a) => a}
62-
renderMenuItem={(a) => a + '-opt'}
63-
renderMenuGroupTitle={(a) => a + '-opt'}
64-
headerStyle={{
65-
borderBottom: '1px solid #ccc'
66-
}}
67-
footerStyle={{
68-
borderTop: '1px solid #ccc'
69-
}}
70-
value={this.state.value}
71-
onChange={this.handleChange}
72-
items={dataset.filter((item, i) => item.label.indexOf(this.filterMsg) >= 0)}
73-
emptyLabel="无匹配项"
74-
onItemGroupClick={(d) => console.log(d)}
75-
/>
76-
77-
<ListBox
78-
items={dataset}
79-
multiple
80-
disabled={false}
81-
labelInValue
82-
onChange={this.handleChange2}
83-
style={{
84-
maxWidth: 300,
85-
height: 400,
86-
}}
87-
>
88-
</ListBox>
89-
<ListBox
90-
multiple
91-
disabled={false}
92-
labelInValue
93-
onChange={this.handleChange2}
94-
items={dataset}
95-
style={{
96-
maxWidth: 300,
97-
height: 400,
98-
}}
99-
></ListBox>
100-
</div >
101-
);
102-
}
103-
28+
state = {
29+
value: 2,
30+
};
31+
32+
handleChange = (value) => {
33+
this.setState({
34+
value,
35+
});
36+
37+
console.log("changed ", value);
38+
};
39+
40+
handleChange2 = (value) => {
41+
console.log("changed ", value);
42+
};
43+
44+
filterMsg = "";
45+
46+
render() {
47+
return (
48+
<div>
49+
<ListBox
50+
style={{
51+
maxWidth: 300,
52+
maxHeight: 400,
53+
}}
54+
autoFocus
55+
renderHeader={() => <h3>header</h3>}
56+
renderFooter={() => <h3>footer</h3>}
57+
renderMenu={(a) => a}
58+
renderMenuItem={(a) => a + "-opt"}
59+
renderMenuGroupTitle={(a) => a + "-opt"}
60+
headerStyle={{
61+
borderBottom: "1px solid #ccc",
62+
}}
63+
footerStyle={{
64+
borderTop: "1px solid #ccc",
65+
}}
66+
value={this.state.value}
67+
onChange={this.handleChange}
68+
items={dataset.filter((item, i) => item.label.indexOf(this.filterMsg) >= 0)}
69+
emptyLabel="无匹配项"
70+
onItemGroupClick={(d) => console.log(d)}
71+
/>
72+
73+
<ListBox
74+
items={dataset}
75+
multiple
76+
disabled={false}
77+
labelInValue
78+
onChange={this.handleChange2}
79+
style={{
80+
maxWidth: 300,
81+
height: 400,
82+
}}
83+
></ListBox>
84+
<ListBox
85+
multiple
86+
disabled={false}
87+
labelInValue
88+
onChange={this.handleChange2}
89+
items={dataset}
90+
style={{
91+
maxWidth: 300,
92+
height: 400,
93+
}}
94+
></ListBox>
95+
</div>
96+
);
97+
}
10498
}

‎examples/index.html

+23-23
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
<!DOCTYPE html>
2-
<html style="width:100%; height:100%; overflow:hidden;">
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>ListBox</title>
6+
<meta
7+
name="viewport"
8+
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"
9+
/>
10+
<style type="text/css">
11+
.demo {
12+
width: 900px;
13+
height: 500px;
14+
margin: 100px auto;
15+
background: #fff;
16+
font-size: 12px;
17+
overflow: auto;
18+
}
19+
</style>
20+
</head>
321

4-
<head>
5-
<meta charset="utf-8">
6-
<title>scrollview</title>
7-
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">
8-
<style type="text/css">
9-
.demo {
10-
width: 900px;
11-
height: 500px;
12-
margin: 100px auto;
13-
background: #FFF;
14-
font-size: 12px;
15-
overflow: auto;
16-
}
17-
</style>
18-
</head>
19-
20-
<body style="background:#F5F5F5">
21-
<div class="demo" id="demo">
22-
</div>
23-
</body>
24-
25-
</html>
22+
<body style="background: #f5f5f5;">
23+
<div class="demo" id="demo"></div>
24+
</body>
25+
</html>

‎index.js

-2
This file was deleted.

‎jest.config.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
transform: {
3+
"^.+\\.[t|j]sx?$": "babel-jest",
4+
},
5+
};

0 commit comments

Comments
 (0)