Skip to content

Commit 17585a5

Browse files
bplok20010bplok20010
committed
CheckboxGroup props 支持 render 属性
1 parent bfcdb7c commit 17585a5

12 files changed

+215
-192
lines changed

‎README.md

+100-93
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,21 @@ export interface CheckboxOption<T = any> {
7474
readOnly?: boolean;
7575
onChange?: (checked: boolean, e: React.ChangeEvent<HTMLInputElement>) => void;
7676
}
77+
78+
79+
export interface RenderProps<T = any> {
80+
value: T | undefined;
81+
onChange: (value: T) => void;
82+
}
83+
export interface CheckboxOption<T = any> {
84+
value: T;
85+
label: React.ReactNode;
86+
style?: React.CSSProperties;
87+
className?: string;
88+
disabled?: boolean;
89+
readOnly?: boolean;
90+
onChange?: (checked: boolean, e: React.ChangeEvent<HTMLInputElement>) => void;
91+
}
7792
export interface CheckboxGroupProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange" | "defaultChecked"> {
7893
prefixCls?: string;
7994
name?: string;
@@ -82,6 +97,7 @@ export interface CheckboxGroupProps<T = any> extends Omit<React.HTMLAttributes<H
8297
disabled?: boolean;
8398
readOnly?: boolean;
8499
options?: T extends string | number ? (string | number)[] : CheckboxOption<T>[];
100+
render?: (props: RenderProps) => React.ReactNode;
85101
onChange?: (checkedValue: T[]) => void;
86102
}
87103
export interface CheckboxGroupState<T = any> {
@@ -106,19 +122,9 @@ export declare class CheckboxGroup<T = any> extends React.Component<CheckboxGrou
106122
};
107123
getOptions(): CheckboxOption<any>[];
108124
toggleChange: (option: CheckboxOption) => void;
125+
handleChange: (value: T[]) => void;
109126
render(): JSX.Element;
110127
}
111-
112-
export interface CheckboxGroupContextValue {
113-
toggleChange: (option: {
114-
value: any;
115-
label: React.ReactNode;
116-
}) => void;
117-
value: any;
118-
name: string | undefined;
119-
disabled: boolean;
120-
readOnly: boolean;
121-
}
122128
```
123129

124130

@@ -127,142 +133,143 @@ export interface CheckboxGroupContextValue {
127133
```css
128134
/* RWCheckbox 基础样式 */
129135
.rw-checkbox {
130-
position: relative;
131-
display: inline-block;
132-
vertical-align: middle;
133-
outline: none;
134-
margin: 0;
135-
padding: 0;
136-
box-sizing: border-box;
137-
flex: none;
136+
position: relative;
137+
display: inline-block;
138+
vertical-align: middle;
139+
outline: none;
140+
margin: 0;
141+
padding: 0;
142+
box-sizing: border-box;
143+
flex: none;
138144
}
139145

140146
.rw-checkbox-input {
141-
width: 100%;
142-
height: 100%;
143-
position: absolute;
144-
top: 0;
145-
bottom: 0;
146-
left: 0;
147-
right: 0;
148-
z-index: 1;
149-
cursor: pointer;
150-
opacity: 0;
151-
padding: 0;
152-
margin: 0;
153-
box-sizing: border-box;
147+
width: 100%;
148+
height: 100%;
149+
position: absolute;
150+
top: 0;
151+
bottom: 0;
152+
left: 0;
153+
right: 0;
154+
z-index: 1;
155+
cursor: pointer;
156+
opacity: 0;
157+
padding: 0;
158+
margin: 0;
159+
box-sizing: border-box;
154160
}
155161

156162
.rw-checkbox-inner {
157-
position: relative;
158-
top: 0;
159-
left: 0;
160-
display: block;
161-
width: 16px;
162-
height: 16px;
163-
border: 1px solid #d9d9d9;
164-
border-radius: 2px;
165-
box-sizing: border-box;
163+
position: relative;
164+
top: 0;
165+
left: 0;
166+
display: block;
167+
width: 16px;
168+
height: 16px;
169+
border: 1px solid #d9d9d9;
170+
border-radius: 2px;
171+
box-sizing: border-box;
166172
}
167173

168174
.rw-checkbox-input:focus + .rw-checkbox-inner,
169175
.rw-checkbox:hover .rw-checkbox-inner {
170-
border-color: #1890ff;
176+
border-color: #1890ff;
171177
}
172178

173179
.rw-checkbox-disabled .rw-checkbox-input,
174180
.rw-checkbox-disabled {
175-
cursor: not-allowed;
181+
cursor: not-allowed;
176182
}
177183

178184
.rw-checkbox-disabled:hover .rw-checkbox-inner,
179185
.rw-checkbox-disabled:active .rw-checkbox-inner,
180186
.rw-checkbox-disabled .rw-checkbox-inner {
181-
background-color: #f5f5f5;
182-
border-color: #d9d9d9 !important;
187+
background-color: #f5f5f5 !important;
188+
border-color: #d9d9d9 !important;
183189
}
184190

185191
/* RWCheckbox 选中样式 */
186192
.rw-checkbox-checked .rw-checkbox-inner {
187-
background: #1890ff;
188-
border-color: #1890ff;
193+
background: #1890ff;
194+
border-color: #1890ff;
189195
}
190196

191197
.rw-checkbox-inner:after {
192-
box-sizing: border-box;
193-
position: absolute;
194-
top: 45%;
195-
left: 22%;
196-
display: table;
197-
width: 6px;
198-
height: 9px;
199-
border: 2px solid #fff;
200-
border-top: 0;
201-
border-left: 0;
202-
transform: rotate(45deg) scale(0) translate(-50%, -50%);
203-
opacity: 0;
204-
content: " ";
198+
box-sizing: border-box;
199+
position: absolute;
200+
top: 45%;
201+
left: 22%;
202+
display: table;
203+
width: 6px;
204+
height: 9px;
205+
border: 2px solid #fff;
206+
border-top: 0;
207+
border-left: 0;
208+
transform: rotate(45deg) scale(0) translate(-50%, -50%);
209+
opacity: 0;
210+
content: " ";
205211
}
206212

207213
.rw-checkbox-checked .rw-checkbox-inner:after {
208-
opacity: 1;
209-
transform: rotate(45deg) scale(1) translate(-50%, -50%);
210-
}
211-
212-
.rw-checkbox-disabled .rw-checkbox-inner {
213-
background: #f5f5f5;
214-
border-color: #d9d9d9;
214+
opacity: 1;
215+
transform: rotate(45deg) scale(1) translate(-50%, -50%);
215216
}
216217

217218
.rw-checkbox-disabled .rw-checkbox-inner:after {
218-
border-color: #d9d9d9;
219+
border-color: #d9d9d9;
219220
}
220221

221222
/* RWCheckbox半选状态 */
222223
.rw-checkbox-indeterminate:not(.rw-checkbox-disabled) .rw-checkbox-inner {
223-
border-color: #1890ff;
224+
border-color: #1890ff;
224225
}
225226
.rw-checkbox-indeterminate .rw-checkbox-inner:after {
226-
top: 50%;
227-
left: 50%;
228-
width: 8px;
229-
height: 8px;
230-
background-color: #1890ff;
231-
border: 0;
232-
border-radius: 1px;
233-
transform: translate(-4px, -4px) scale(1);
234-
opacity: 1;
235-
content: " ";
227+
top: 50%;
228+
left: 50%;
229+
width: 8px;
230+
height: 8px;
231+
background-color: #1890ff;
232+
border: 0;
233+
border-radius: 1px;
234+
transform: translate(-4px, -4px) scale(1);
235+
opacity: 1;
236+
content: " ";
236237
}
237238

238239
.rw-checkbox-indeterminate.rw-checkbox-disabled .rw-checkbox-inner:after {
239-
background: #d9d9d9;
240+
background: #d9d9d9;
240241
}
241242

242243
/* Checkbox */
243244
.rw-checkbox-wrapper {
244-
display: inline-flex;
245-
cursor: pointer;
246-
vertical-align: middle;
247-
outline: none;
248-
align-items: center;
245+
display: inline-flex;
246+
cursor: pointer;
247+
vertical-align: middle;
248+
outline: none;
249+
align-items: center;
250+
flex: 1;
249251
}
250252

251253
.rw-checkbox-wrapper:hover .rw-checkbox-inner {
252-
border-color: #1890ff;
254+
border-color: #1890ff;
253255
}
254256

255257
.rw-checkbox-label {
256-
flex: 1;
257-
padding: 0 8px;
258-
overflow: hidden;
259-
text-overflow: ellipsis;
260-
white-space: nowrap;
258+
flex: 1;
259+
padding: 0 8px;
260+
overflow: hidden;
261+
text-overflow: ellipsis;
262+
white-space: nowrap;
261263
}
262264

263265
.rw-checkbox-wrapper-disabled .rw-checkbox-label {
264-
color: rgba(0, 0, 0, 0.25);
265-
cursor: not-allowed;
266+
color: rgba(0, 0, 0, 0.25);
267+
cursor: not-allowed;
268+
}
269+
270+
/* CheckboxGroup */
271+
.rw-checkbox-group {
272+
display: inline-flex;
266273
}
267274

268275

‎docs/asset-manifest.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"index.css": "static/css/index.0d5bbde3.chunk.css",
3-
"index.js": "static/js/index.0d5bbde3.chunk.js",
2+
"index.css": "static/css/index.748535a0.chunk.css",
3+
"index.js": "static/js/index.748535a0.chunk.js",
44
"runtime-index.js": "static/js/runtime-index.92eae014.js",
55
"static/js/2.979b8646.chunk.js": "static/js/2.979b8646.chunk.js",
66
"index.html": "index.html"

‎docs/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctype html><html style="width:100%;height:100%;overflow:auto"><head><meta charset="utf-8"/><title>Checkbox</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"/><style>.demo{width:1100px;height:500px;margin:50px auto;background:#fff;font-size:12px;overflow:auto}.rw-layout-content{height:200px}.rw-layout.rw-layout-has-sider{text-align:center;background:#3ba0e9}.rw-layout-sider{width:200px;text-align:center;background:#3ba0e9;color:#fff}.rw-layout-footer,.rw-layout-header{background:#7dbcea;color:#fff;height:64px;line-height:64px;text-align:center}.rw-layout-content{background:#108ee9;color:#fff;text-align:center}</style><link href="static/css/index.0d5bbde3.chunk.css" rel="stylesheet"></head><body style="background:#f5f5f5"><div class="demo" id="demo"></div><script src="static/js/runtime-index.92eae014.js"></script><script src="static/js/2.979b8646.chunk.js"></script><script src="static/js/index.0d5bbde3.chunk.js"></script></body></html>
1+
<!doctype html><html style="width:100%;height:100%;overflow:auto"><head><meta charset="utf-8"/><title>Checkbox</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"/><style>.demo{width:1100px;height:500px;margin:50px auto;background:#fff;font-size:12px;overflow:auto}.rw-layout-content{height:200px}.rw-layout.rw-layout-has-sider{text-align:center;background:#3ba0e9}.rw-layout-sider{width:200px;text-align:center;background:#3ba0e9;color:#fff}.rw-layout-footer,.rw-layout-header{background:#7dbcea;color:#fff;height:64px;line-height:64px;text-align:center}.rw-layout-content{background:#108ee9;color:#fff;text-align:center}</style><link href="static/css/index.748535a0.chunk.css" rel="stylesheet"></head><body style="background:#f5f5f5"><div class="demo" id="demo"></div><script src="static/js/runtime-index.92eae014.js"></script><script src="static/js/2.979b8646.chunk.js"></script><script src="static/js/index.748535a0.chunk.js"></script></body></html>

‎docs/static/css/index.0d5bbde3.chunk.css renamed to ‎docs/static/css/index.748535a0.chunk.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)