Skip to content

Commit fdb2c3d

Browse files
zombieJzombieJ
authored
feat: checkable support (#184)
* chore: option of it * chore: multiple * feat: Add active back * chore: Dropdown should place it * chore: Back of customize children * feat: Use labelRender * chore: connect value * feat: Auto open path of select value * chore: onDropdownChange * chore: search open * chore: filter nodes * chore: ts update * test: back of test init * feat: Hover trigger * fix: changeOnSelect props * test: Control mode * test: disabled * test: disabled * fix: back of notFoundContent * chore: Update rc-tree-select * chore: Parse value on first time * chore: Internal value parser * fix: proxy should keep the nest value as path key * fix: hover & selecOnChange logic * fix: fieldNames match * test: for fieldNames * chore: add warning test * fix: dbl click should close changeOnSelect * chore: tmp of loadData * chore: Back of loadData * fix: empty node isLeaf check logic * test: all pass of index * feat: Add filter * chore: Search on client side * chore: add search.sort func * test: render of searchConfig * refactor: Move SearchResult into hooks * chore:key to up & down * chore: simple key navigation * chore: rm selected style * chore: path selection * feat: rtl keyboard * chore: rtl support * test: update of onKeyDown * test: rtl test * chore: clean up * test: more coverage * test: more test case * feat: Use checkable instead * test: multiple test case * test: 100% coverage * chore: clean up * docs: Update docs * chore: Update comment
1 parent 04c4655 commit fdb2c3d

36 files changed

+2244
-1448
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ lib
2626
es
2727
yarn.lock
2828
package-lock.json
29+
coverage
2930
# umi
3031
.umi
3132
.umi-production

‎.prettierrc

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"endOfLine": "lf",
3+
"semi": true,
4+
"singleQuote": true,
5+
"tabWidth": 2,
6+
"trailingComma": "all",
7+
"printWidth": 100,
8+
"arrowParens": "avoid"
9+
}

‎README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -143,13 +143,13 @@ React.render(
143143
<td>expand current item when click or hover</td>
144144
</tr>
145145
<tr>
146-
<td>popupVisible</td>
146+
<td>open</td>
147147
<td>Boolean</td>
148148
<td></td>
149149
<td>visibility of popup overlay</td>
150150
</tr>
151151
<tr>
152-
<td>onPopupVisibleChange</td>
152+
<td>onDropdownVisibleChange</td>
153153
<td>Function(visible)</td>
154154
<td></td>
155155
<td>callback when popup overlay's visibility changed</td>

‎assets/index.less

+2-166
Original file line numberDiff line numberDiff line change
@@ -1,166 +1,2 @@
1-
.effect() {
2-
animation-duration: .3s;
3-
animation-fill-mode: both;
4-
transform-origin: 0 0;
5-
}
6-
7-
.rc-cascader {
8-
font-size: 12px;
9-
&-menus {
10-
font-size: 12px;
11-
overflow: hidden;
12-
background: #fff;
13-
position: absolute;
14-
border: 1px solid #d9d9d9;
15-
border-radius: 6px;
16-
box-shadow: 0 0 4px rgba(0,0,0,0.17);
17-
white-space: nowrap;
18-
19-
&-hidden {
20-
display: none;
21-
}
22-
23-
&.slide-up-enter, &.slide-up-appear {
24-
.effect();
25-
opacity: 0;
26-
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
27-
animation-play-state: paused;
28-
}
29-
30-
&.slide-up-leave {
31-
.effect();
32-
opacity: 1;
33-
animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
34-
animation-play-state: paused;
35-
}
36-
37-
&.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
38-
&.slide-up-appear.slide-up-appear-active&-placement-bottomLeft {
39-
animation-name: SlideUpIn;
40-
animation-play-state: running;
41-
}
42-
43-
&.slide-up-enter.slide-up-enter-active&-placement-topLeft,
44-
&.slide-up-appear.slide-up-appear-active&-placement-topLeft {
45-
animation-name: SlideDownIn;
46-
animation-play-state: running;
47-
}
48-
49-
&.slide-up-leave.slide-up-leave-active&-placement-bottomLeft {
50-
animation-name: SlideUpOut;
51-
animation-play-state: running;
52-
}
53-
54-
&.slide-up-leave.slide-up-leave-active&-placement-topLeft {
55-
animation-name: SlideDownOut;
56-
animation-play-state: running;
57-
}
58-
}
59-
&-menu {
60-
display: inline-block;
61-
width: 100px;
62-
height: 192px;
63-
list-style: none;
64-
margin: 0;
65-
padding: 0;
66-
border-right: 1px solid #e9e9e9;
67-
overflow: auto;
68-
&:last-child {
69-
border-right: 0;
70-
}
71-
}
72-
&-menu-item {
73-
height: 32px;
74-
line-height: 32px;
75-
padding: 0 16px;
76-
cursor: pointer;
77-
white-space: nowrap;
78-
overflow: hidden;
79-
text-overflow: ellipsis;
80-
transition: all 0.3s ease;
81-
position: relative;
82-
&:hover {
83-
background: tint(#2db7f5, 90%);
84-
}
85-
&-disabled {
86-
cursor: not-allowed;
87-
color: #ccc;
88-
&:hover {
89-
background: transparent;
90-
}
91-
}
92-
&-loading:after {
93-
position: absolute;
94-
right: 12px;
95-
content: 'loading';
96-
color: #aaa;
97-
font-style: italic;
98-
}
99-
&-active {
100-
background: tint(#2db7f5, 80%);
101-
&:hover {
102-
background: tint(#2db7f5, 80%);
103-
}
104-
}
105-
&-expand {
106-
position: relative;
107-
&-icon {
108-
font-size: 12px;
109-
color: #999;
110-
position: absolute;
111-
right: 16px;
112-
line-height: 32px;
113-
}
114-
}
115-
}
116-
}
117-
118-
@keyframes SlideUpIn {
119-
0% {
120-
opacity: 0;
121-
transform-origin: 0% 0%;
122-
transform: scaleY(.8);
123-
}
124-
100% {
125-
opacity: 1;
126-
transform-origin: 0% 0%;
127-
transform: scaleY(1);
128-
}
129-
}
130-
@keyframes SlideUpOut {
131-
0% {
132-
opacity: 1;
133-
transform-origin: 0% 0%;
134-
transform: scaleY(1);
135-
}
136-
100% {
137-
opacity: 0;
138-
transform-origin: 0% 0%;
139-
transform: scaleY(0.8);
140-
}
141-
}
142-
143-
@keyframes SlideDownIn {
144-
0% {
145-
opacity: 0;
146-
transform-origin: 0% 100%;
147-
transform: scaleY(0.8);
148-
}
149-
100% {
150-
opacity: 1;
151-
transform-origin: 0% 100%;
152-
transform: scaleY(1);
153-
}
154-
}
155-
@keyframes SlideDownOut {
156-
0% {
157-
opacity: 1;
158-
transform-origin: 0% 100%;
159-
transform: scaleY(1);
160-
}
161-
100% {
162-
opacity: 0;
163-
transform-origin: 0% 100%;
164-
transform: scaleY(0.8);
165-
}
166-
}
1+
@import "./select.less";
2+
@import "./list.less";

‎assets/list.less

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
@select-prefix: ~'rc-cascader';
2+
3+
.@{select-prefix} {
4+
&-dropdown {
5+
min-height: auto;
6+
}
7+
8+
&-holder {
9+
display: flex;
10+
flex-wrap: nowrap;
11+
}
12+
13+
&-menu {
14+
flex: none;
15+
margin: 0;
16+
padding: 0;
17+
list-style: none;
18+
border-left: 1px solid blue;
19+
20+
&:first-child {
21+
border-left: 0;
22+
}
23+
24+
&-item {
25+
display: flex;
26+
flex-wrap: nowrap;
27+
padding-right: 20px;
28+
position: relative;
29+
30+
&-selected {
31+
background: rgba(0, 0, 255, 0.05);
32+
}
33+
34+
&-active {
35+
background: rgba(0, 255, 0, 0.1);
36+
}
37+
38+
&-disabled {
39+
opacity: 0.5;
40+
}
41+
42+
43+
44+
&-content {
45+
flex: auto;
46+
}
47+
48+
&-expand-icon {
49+
position: absolute;
50+
right: 4px;
51+
top: 50%;
52+
transform: translateY(-50%);
53+
}
54+
}
55+
}
56+
57+
&-checkbox {
58+
position: relative;
59+
display: block;
60+
flex: none;
61+
width: 20px;
62+
height: 20px;
63+
border: 1px solid blue;
64+
65+
&::after {
66+
position: absolute;
67+
top: 50%;
68+
left: 50%;
69+
transform: translate(-50%, -50%);
70+
content: '';
71+
}
72+
73+
&-checked::after {
74+
content: '✔️';
75+
}
76+
77+
&-indeterminate::after {
78+
content: '➖';
79+
}
80+
}
81+
82+
// ====================== RTL ======================
83+
&-rtl {
84+
direction: rtl;
85+
86+
.@{select-prefix}-menu {
87+
flex: none;
88+
margin: 0;
89+
padding: 0;
90+
list-style: none;
91+
border-left: none;
92+
border-right: 1px solid blue;
93+
94+
&:first-child {
95+
border-right: 0;
96+
}
97+
}
98+
}
99+
}

‎assets/select.less

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@import '~rc-select/assets/index';
2+
3+
@select-prefix: ~'rc-cascader';

‎docs/demo/debug.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## debug
2+
3+
<code src="../../examples/debug.tsx">

‎examples/animation.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ class Demo extends React.Component {
7070

7171
render() {
7272
return (
73-
<Cascader options={addressOptions} onChange={this.onChange} transitionName="slide-up">
73+
<Cascader options={addressOptions} onChange={this.onChange} animation="slide-up">
7474
<input value={this.state.inputValue} readOnly />
7575
</Cascader>
7676
);

0 commit comments

Comments
 (0)