Skip to content

Commit c27ddac

Browse files
bplok20010bplok20010
committed
v1.1.0
1 parent 09d2416 commit c27ddac

Some content is hidden

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

44 files changed

+20807
-41097
lines changed

‎.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,5 @@
11
/node_modules
2+
/lib
3+
/cjs
4+
/esm
5+
/dist

‎.prettierignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
*.md

‎.prettierrc

Lines changed: 18 additions & 0 deletions
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

Lines changed: 1 addition & 1 deletion
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) 2020 react-widget-checkbox 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

‎README.md

Lines changed: 269 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,269 @@
1-
# checkbox
2-
checkbox
1+
# Checkbox
2+
3+
Checkbox组件
4+
5+
## 安装
6+
7+
```
8+
npm install --save react-widget-checkbox
9+
```
10+
11+
12+
## 使用
13+
14+
[![Edit react-widget-checkbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-widget-checkbox-g9xn0?fontsize=14&hidenavigation=1&theme=dark)
15+
16+
```js
17+
import {Checkbox} from 'react-widget-checkbox';
18+
import 'react-widget-checkbox/style';
19+
20+
<Checkbox defaultChecked={true}>Checkbox</Checkbox>
21+
22+
```
23+
24+
25+
26+
### Interfaces
27+
28+
```ts
29+
export interface RWCheckboxProps extends React.HTMLAttributes<HTMLInputElement> {
30+
prefixCls?: string;
31+
className?: string;
32+
name?: string;
33+
defaultChecked?: boolean;
34+
checked?: boolean;
35+
disabled?: boolean;
36+
readOnly?: boolean;
37+
indeterminate?: boolean;
38+
}
39+
export interface RWCheckboxState {
40+
checked: boolean;
41+
}
42+
export declare class RWCheckbox extends React.Component<RWCheckboxProps, RWCheckboxState> {
43+
static defaultProps: {
44+
prefixCls?: string;
45+
defaultChecked: boolean;
46+
};
47+
static getDerivedStateFromProps(props: RWCheckboxProps, state: RWCheckboxState): {
48+
checked: boolean;
49+
};
50+
state: {
51+
checked: boolean;
52+
};
53+
handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
54+
render(): JSX.Element;
55+
}
56+
57+
export interface CheckboxProps extends Omit<RWCheckboxProps, "onChange" | "onMouseEnter" | "onMouseLeave"> {
58+
name?: string;
59+
value?: any;
60+
onChange?: (checked: boolean, e: React.ChangeEvent<HTMLInputElement>) => void;
61+
onMouseEnter?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
62+
onMouseLeave?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
63+
}
64+
export declare const Checkbox: React.FC<CheckboxProps> & {
65+
Group: typeof CheckboxGroup;
66+
};
67+
68+
export interface CheckboxOption<T = any> {
69+
value: T;
70+
label: React.ReactNode;
71+
style?: React.CSSProperties;
72+
className?: string;
73+
disabled?: boolean;
74+
readOnly?: boolean;
75+
onChange?: (checked: boolean, e: React.ChangeEvent<HTMLInputElement>) => void;
76+
}
77+
export interface CheckboxGroupProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange" | "defaultChecked"> {
78+
prefixCls?: string;
79+
name?: string;
80+
defaultValue?: T[];
81+
value?: T[];
82+
disabled?: boolean;
83+
readOnly?: boolean;
84+
options?: T extends string | number ? (string | number)[] : CheckboxOption<T>[];
85+
onChange?: (checkedValue: T[]) => void;
86+
}
87+
export interface CheckboxGroupState<T = any> {
88+
value: T[];
89+
}
90+
export declare class CheckboxGroup<T = any> extends React.Component<CheckboxGroupProps<T>, CheckboxGroupState<T>> {
91+
static defaultProps: {
92+
prefixCls: string;
93+
};
94+
static getDerivedStateFromProps(nextProps: CheckboxGroupProps, state: CheckboxGroupState): {
95+
value: any[];
96+
};
97+
state: {
98+
value: T[];
99+
};
100+
getGroupContext(): {
101+
toggleChange: (option: CheckboxOption<any>) => void;
102+
value: T[];
103+
name: string | undefined;
104+
disabled: boolean;
105+
readOnly: boolean;
106+
};
107+
getOptions(): CheckboxOption<any>[];
108+
toggleChange: (option: CheckboxOption) => void;
109+
render(): JSX.Element;
110+
}
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+
}
122+
```
123+
124+
125+
### 基础样式
126+
127+
```css
128+
/* RWCheckbox 基础样式 */
129+
.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;
138+
}
139+
140+
.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;
154+
}
155+
156+
.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;
166+
}
167+
168+
.rw-checkbox-input:focus + .rw-checkbox-inner,
169+
.rw-checkbox:hover .rw-checkbox-inner {
170+
border-color: #1890ff;
171+
}
172+
173+
.rw-checkbox-disabled .rw-checkbox-input,
174+
.rw-checkbox-disabled {
175+
cursor: not-allowed;
176+
}
177+
178+
.rw-checkbox-disabled:hover .rw-checkbox-inner,
179+
.rw-checkbox-disabled:active .rw-checkbox-inner,
180+
.rw-checkbox-disabled .rw-checkbox-inner {
181+
background-color: #f5f5f5;
182+
border-color: #d9d9d9 !important;
183+
}
184+
185+
/* RWCheckbox 选中样式 */
186+
.rw-checkbox-checked .rw-checkbox-inner {
187+
background: #1890ff;
188+
border-color: #1890ff;
189+
}
190+
191+
.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: " ";
205+
}
206+
207+
.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;
215+
}
216+
217+
.rw-checkbox-disabled .rw-checkbox-inner:after {
218+
border-color: #d9d9d9;
219+
}
220+
221+
/* RWCheckbox半选状态 */
222+
.rw-checkbox-indeterminate:not(.rw-checkbox-disabled) .rw-checkbox-inner {
223+
border-color: #1890ff;
224+
}
225+
.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+
transform: translate(-50%, -50%) scale(1);
233+
opacity: 1;
234+
content: " ";
235+
}
236+
237+
.rw-checkbox-indeterminate.rw-checkbox-disabled .rw-checkbox-inner:after {
238+
background: #d9d9d9;
239+
}
240+
241+
/* Checkbox */
242+
.rw-checkbox-wrapper {
243+
display: inline-flex;
244+
cursor: pointer;
245+
vertical-align: middle;
246+
outline: none;
247+
align-items: center;
248+
}
249+
250+
.rw-checkbox-wrapper:hover .rw-checkbox-inner {
251+
border-color: #1890ff;
252+
}
253+
254+
.rw-checkbox-label {
255+
flex: 1;
256+
padding: 0 8px;
257+
overflow: hidden;
258+
text-overflow: ellipsis;
259+
white-space: nowrap;
260+
}
261+
262+
.rw-checkbox-wrapper-disabled .rw-checkbox-label {
263+
color: rgba(0, 0, 0, 0.25);
264+
cursor: not-allowed;
265+
}
266+
267+
268+
269+
```

‎babel.config.js

Lines changed: 15 additions & 0 deletions
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+
};

‎docs/asset-manifest.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"index.css": "static/css/index.2e651538.chunk.css",
3+
"index.js": "static/js/index.2e651538.chunk.js",
4+
"runtime-index.js": "static/js/runtime-index.92eae014.js",
5+
"static/js/2.979b8646.chunk.js": "static/js/2.979b8646.chunk.js",
6+
"index.html": "index.html"
7+
}

‎docs/index.html

Lines changed: 1 addition & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1 @@
1-
<!DOCTYPE html>
2-
<html style="width:100%; height:100%; overflow:hidden;">
3-
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-
<link href="static\css\index.081348a7.css" rel="stylesheet"></head>
19-
20-
<body style="background:#F5F5F5">
21-
<div class="demo" id="demo">
22-
</div>
23-
<script src="static\js\vendors.25a9504c.chunk.js"></script><script src="static\js\index.59a5a500.js"></script></body>
24-
25-
</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.2e651538.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.2e651538.chunk.js"></script></body></html>

0 commit comments

Comments
 (0)